<template>
|
<BasicModal :title="title" :width="800" v-bind="$attrs" @ok="handleOk" @register="registerModal">
|
<BasicForm @register="registerForm" />
|
</BasicModal>
|
</template>
|
|
<script lang="ts" setup>
|
import { watch, computed, inject, ref, unref, onMounted } from 'vue';
|
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
import { saveOrUpdateDepart } from '../depart.api';
|
import { useBasicFormSchema, orgCategoryOptions } from '../depart.data';
|
|
const emit = defineEmits(['success', 'register']);
|
const props = defineProps({
|
rootTreeData: { type: Array, default: () => [] },
|
});
|
const prefixCls = inject('prefixCls');
|
// 当前是否是更新模式
|
const isUpdate = ref<boolean>(false);
|
// 当前的弹窗数据
|
const model = ref<object>({});
|
const title = computed(() => (isUpdate.value ? '编辑' : '新增'));
|
|
//注册表单
|
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
|
schemas: useBasicFormSchema().basicFormSchema,
|
showActionButtonGroup: false,
|
});
|
|
// 注册弹窗
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
await resetFields();
|
isUpdate.value = unref(data?.isUpdate);
|
// 当前是否为添加子级
|
let isChild = unref(data?.isChild);
|
let categoryOptions = isChild ? orgCategoryOptions.child : orgCategoryOptions.root;
|
// 隐藏不需要展示的字段
|
updateSchema([
|
{
|
field: 'parentId',
|
show: isChild,
|
componentProps: {
|
// 如果是添加子部门，就禁用该字段
|
disabled: isChild,
|
treeData: props.rootTreeData,
|
},
|
},
|
{
|
field: 'orgCode',
|
show: false,
|
},
|
{
|
field: 'orgCategory',
|
componentProps: { options: categoryOptions },
|
},
|
]);
|
|
let record = unref(data?.record);
|
if (typeof record !== 'object') {
|
record = {};
|
}
|
// 赋默认值
|
record = Object.assign(
|
{
|
departOrder: 0,
|
orgCategory: categoryOptions[0].value,
|
},
|
record
|
);
|
model.value = record;
|
await setFieldsValue({ ...record });
|
});
|
|
// 提交事件
|
async function handleOk() {
|
try {
|
setModalProps({ confirmLoading: true });
|
let values = await validate();
|
//提交表单
|
await saveOrUpdateDepart(values, isUpdate.value);
|
//关闭弹窗
|
closeModal();
|
//刷新列表
|
emit('success');
|
} finally {
|
setModalProps({ confirmLoading: false });
|
}
|
}
|
</script>
|
