<template>
|
<a-spin :spinning="loading">
|
<BasicForm @register="registerForm" />
|
<div class="j-box-bottom-button offset-20" style="margin-top: 30px">
|
<div class="j-box-bottom-button-float">
|
<a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
|
<a-button type="primary" preIcon="ant-design:save-filled" @click="onSubmit">保存</a-button>
|
</div>
|
</div>
|
</a-spin>
|
</template>
|
|
<script lang="ts" setup>
|
import { watch, computed, inject, ref, unref, onMounted } from 'vue';
|
import { BasicForm, useForm } from '/@/components/Form/index';
|
import { saveOrUpdateDepart } from '../depart.api';
|
import { useBasicFormSchema, orgCategoryOptions } from '../depart.data';
|
|
const emit = defineEmits(['success']);
|
const props = defineProps({
|
data: { type: Object, default: () => ({}) },
|
rootTreeData: { type: Array, default: () => [] },
|
});
|
const prefixCls = inject('prefixCls');
|
const loading = ref<boolean>(false);
|
// 当前是否是更新模式
|
const isUpdate = ref<boolean>(true);
|
// 当前的弹窗数据
|
const model = ref<object>({});
|
|
//注册表单
|
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
|
schemas: useBasicFormSchema().basicFormSchema,
|
showActionButtonGroup: false,
|
});
|
|
const categoryOptions = computed(() => {
|
if (!!props?.data?.parentId) {
|
return orgCategoryOptions.child;
|
} else {
|
return orgCategoryOptions.root;
|
}
|
});
|
|
onMounted(() => {
|
// 禁用字段
|
updateSchema([
|
{ field: 'parentId', componentProps: { disabled: true } },
|
{ field: 'orgCode', componentProps: { disabled: true } },
|
]);
|
// data 变化，重填表单
|
watch(
|
() => props.data,
|
async () => {
|
let record = unref(props.data);
|
if (typeof record !== 'object') {
|
record = {};
|
}
|
model.value = record;
|
await resetFields();
|
await setFieldsValue({ ...record });
|
},
|
{ deep: true, immediate: true }
|
);
|
// 更新 父部门 选项
|
watch(
|
() => props.rootTreeData,
|
async () => {
|
updateSchema([
|
{
|
field: 'parentId',
|
componentProps: { treeData: props.rootTreeData },
|
},
|
]);
|
},
|
{ deep: true, immediate: true }
|
);
|
// 监听并更改 orgCategory options
|
watch(
|
categoryOptions,
|
async () => {
|
updateSchema([
|
{
|
field: 'orgCategory',
|
componentProps: { options: categoryOptions.value },
|
},
|
]);
|
},
|
{ immediate: true }
|
);
|
});
|
|
// 重置表单
|
async function onReset() {
|
await resetFields();
|
await setFieldsValue({ ...model.value });
|
}
|
|
// 提交事件
|
async function onSubmit() {
|
try {
|
loading.value = true;
|
let values = await validate();
|
values = Object.assign({}, model.value, values);
|
//提交表单
|
await saveOrUpdateDepart(values, isUpdate.value);
|
//刷新列表
|
emit('success');
|
Object.assign(model.value, values);
|
} finally {
|
loading.value = false;
|
}
|
}
|
</script>
|
