You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

140 lines
3.4 KiB

<template>
<div>
<vxe-modal
:z-index="zIndex"
:value="isShow"
show-footer
title="公共文件柜栏目"
show-confirm-button
:width="600"
:height="400"
:fullscreen="$store.getters.device === 'mobile'"
esc-closable
@input="e => $emit('update:isShow',e)"
>
<el-form ref="elForm" :model="form" :rules="rules" label-position="top" label-width="100">
<el-form-item label="父级栏目" prop="pid" required>
<Treeselect
v-model="form.pid"
:options="formatList"
no-children-text="无子菜单"
:normalizer="node => ({
id: node.id,
label: node.name,
children: node.children,
isDefaultExpanded: true
})"
/>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="授权人员" prop="update_children_ids">
<el-select
style="width: 100%;"
multiple
popper-append-to-body
:value="form.update_children_ids ? form.update_children_ids.split(',').map(i => Number(i)) : []"
@input="e => form.update_children_ids = e.toString()"
>
<el-option v-for="user in users" :key="user.id" :value="user.id" :label="user.name" />
</el-select>
</el-form-item>
<el-form-item label="排序" prop="myindex">
<el-input-number v-model="form.myindex" :controls="false" :precision="0" />
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" :loading="loading" @click="submit">确认</el-button>
</template>
</vxe-modal>
</div>
</template>
<script>
import { menuSave } from '@/api/document'
import { PopupManager } from "element-ui/lib/utils/popup";
export default {
props: {
list: {
type: Array,
default: () => []
},
isShow: {
type: Boolean,
default: false,
required: true
},
users: {
type: Array,
default: () => []
}
},
data() {
return {
zIndex: PopupManager.nextZIndex(),
loading: false,
form: {
pid: 0,
name: '',
update_children_ids: '',
myindex: ''
},
rules: {
pid: [
{ required: true, message: '请选择上级目录' }
],
name: [
{ required: true, message: '请输入名称' }
]
}
}
},
computed: {
formatList() {
return [
{
name: '#根目录',
id: 0
},
...this.list
]
}
},
watch: {
isShow(newVal) {
if(newVal) {
this.zIndex = PopupManager.nextZIndex()
}
}
},
methods: {
setPid(pid) {
this.form.pid = pid
},
submit() {
this.$refs['elForm'].validate(async valid => {
if (valid) {
this.loading = true
try {
await menuSave(this.form)
this.$message.success('新增成功')
this.$emit('refresh')
this.$emit('update:isShow', false)
this.loading = false
this.$refs['elForm'].resetFields()
} catch (err) {
this.loading = false
}
}
})
}
}
}
</script>
<style scoped lang="scss">
</style>