140 lines
3.3 KiB
Vue
140 lines
3.3 KiB
Vue
<template>
|
|
<Modal
|
|
:options="getModalOptions"
|
|
:on-positive-click="handleConfirm"
|
|
:on-negative-click="handleClose"
|
|
:on-close="handleClose"
|
|
>
|
|
<template #Context>
|
|
<n-form
|
|
ref="formRef"
|
|
:model="departmentForm"
|
|
:rules="departmentRules"
|
|
:label-width="80"
|
|
label-placement="left"
|
|
require-mark-placement="left"
|
|
:disabled="disabled"
|
|
>
|
|
<template v-for="(item,index) in getFormOptions" :key="index">
|
|
<n-form-item :label="item.label" :path="item.key">
|
|
<n-input v-if="item.type === 'input'" v-model:value="departmentForm[item.key]" v-bind="item.props" />
|
|
<n-select v-if="item.type === 'select'" v-model:value="departmentForm[item.key]" v-bind="item.props" />
|
|
<n-input-number v-if="item.type === 'number'" v-model:value="departmentForm[item.key]" v-bind="item.props" />
|
|
</n-form-item>
|
|
</template>
|
|
|
|
</n-form>
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script>
|
|
import { form, getDeptOptions } from '../tools/form.js'
|
|
import Modal from '@/components/Modal/index.vue'
|
|
import { addDept, editDept } from '@/api/system/dept/index.js'
|
|
import { defineComponent, ref, reactive, computed, toRefs } from 'vue'
|
|
|
|
export default defineComponent({
|
|
name: 'UserModal',
|
|
components: { Modal },
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'create'
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
emits: {
|
|
'update:visible': null,
|
|
'reload': null
|
|
},
|
|
setup(props, { emit }) {
|
|
const MODAL_TYPE = {
|
|
'create': '新建部门',
|
|
'preview': '部门详情',
|
|
'update': '编辑部门'
|
|
}
|
|
getDeptOptions()
|
|
const { departmentForm, departmentRules } = form
|
|
const formRef = ref()
|
|
const data = reactive({
|
|
departmentForm: {
|
|
...departmentForm,
|
|
...props.data,
|
|
pid: props.data?.pid === 0 ? null : props.data?.pid
|
|
},
|
|
departmentRules: {
|
|
...departmentRules
|
|
},
|
|
disabled: props.type === 'preview'
|
|
})
|
|
const getModalOptions = computed(() => {
|
|
return {
|
|
title: MODAL_TYPE[props.type],
|
|
show: props.visible,
|
|
negativeText: '取消',
|
|
positiveText: '确认'
|
|
}
|
|
})
|
|
|
|
const getFormOptions = computed(() => {
|
|
return {
|
|
...form.formItem
|
|
}
|
|
})
|
|
|
|
function handleConfirm() {
|
|
formRef.value.validate((errors) => {
|
|
if (!errors) {
|
|
const params = { ...data.departmentForm }
|
|
if (params.id) {
|
|
editDept(params).then(res => {
|
|
if (res.code === 0) {
|
|
emit('reload')
|
|
handleClose()
|
|
}
|
|
}).catch(e => {
|
|
console.log(e)
|
|
})
|
|
} else {
|
|
addDept(params).then(res => {
|
|
if (res.code === 0) {
|
|
emit('reload')
|
|
handleClose()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
/* 关闭弹窗 */
|
|
const handleClose = () => {
|
|
emit('update:visible', false)
|
|
}
|
|
|
|
return {
|
|
...toRefs(data),
|
|
formRef,
|
|
getModalOptions,
|
|
getFormOptions,
|
|
handleConfirm,
|
|
handleClose
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang='scss'>
|
|
.n-input-number{
|
|
width: 100%;
|
|
}
|
|
</style>
|