113 lines
3.0 KiB
Vue
113 lines
3.0 KiB
Vue
|
<template>
|
|||
|
|
<a-modal
|
|||
|
|
:visible="visible"
|
|||
|
|
:title="isEdit ? '编辑创建合同模板' : '新增创建合同模板'"
|
|||
|
|
unmount-on-close
|
|||
|
|
@ok="handleSubmit"
|
|||
|
|
@cancel="handleCancel"
|
|||
|
|
>
|
|||
|
|
<a-form
|
|||
|
|
ref="formRef"
|
|||
|
|
:model="form"
|
|||
|
|
:rules="rules"
|
|||
|
|
auto-label-width
|
|||
|
|
layout="vertical"
|
|||
|
|
>
|
|||
|
|
<!-- 模版名称 -->
|
|||
|
|
<a-form-item label="模版名称" field="name" required>
|
|||
|
|
<a-input v-model="form.name" placeholder="请输入模板名称" />
|
|||
|
|
</a-form-item>
|
|||
|
|
<!-- 适用范围（部门） -->
|
|||
|
|
<a-form-item label="适用范围" field="user_id">
|
|||
|
|
<a-tree-select
|
|||
|
|
v-model="form.departmentId"
|
|||
|
|
:data="props.departmentListData"
|
|||
|
|
:field-names="{ key: 'id', title: 'name', children: 'children' }"
|
|||
|
|
placeholder="请选择适用范围"
|
|||
|
|
allow-clear
|
|||
|
|
/>
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-form>
|
|||
|
|
</a-modal>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, reactive, watch } from 'vue';
|
|||
|
|
import type { FormInstance } from '@arco-design/web-vue';
|
|||
|
|
import { createTemplateSetting, updateTemplateSetting } from '@/api/setting';
|
|||
|
|
import { DepartmentItem, CreateTemplateSettingParam } from '@/types/setting';
|
|||
|
|
import { Message } from '@arco-design/web-vue';
|
|||
|
|
|
|||
|
|
interface TreeNode {
|
|||
|
|
id: string | number;
|
|||
|
|
name: string;
|
|||
|
|
children?: TreeNode[];
|
|||
|
|
}
|
|||
|
|
const props = defineProps<{
|
|||
|
|
visible: boolean;
|
|||
|
|
isEdit: boolean;
|
|||
|
|
record?: DepartmentItem | null;
|
|||
|
|
departmentListData: TreeNode[]; // 修复类型
|
|||
|
|
}>();
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
(e: 'update:visible', val: boolean): void;
|
|||
|
|
(e: 'submitted'): void;
|
|||
|
|
}>();
|
|||
|
|
|
|||
|
|
// 表单数据
|
|||
|
|
const formRef = ref<FormInstance>();
|
|||
|
|
const form = reactive<CreateTemplateSettingParam>({
|
|||
|
|
name: '',
|
|||
|
|
departmentId: null,
|
|||
|
|
// id: undefined,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 校验规则
|
|||
|
|
const rules = {
|
|||
|
|
name: [{ required: true, message: '请输入模板名称' }],
|
|||
|
|
departmentId: [{ required: true, message: '请选择适用范围' }],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Watch 弹窗控制 & 初始化
|
|||
|
|
watch(
|
|||
|
|
() => props.visible,
|
|||
|
|
(val) => {
|
|||
|
|
if (val) {
|
|||
|
|
if (props.record) {
|
|||
|
|
// form.id = props.record?.id;
|
|||
|
|
// form.name = props.record?.name;
|
|||
|
|
// form.parent_id = props.record?.parentId ?? '';
|
|||
|
|
// form.user_id = props.record?.UserId ?? '';
|
|||
|
|
// form.remark = props.record?.remark ?? '';
|
|||
|
|
// Object.assign(form, props.record);
|
|||
|
|
} else {
|
|||
|
|
Object.assign(form, {
|
|||
|
|
id: undefined,
|
|||
|
|
name: '',
|
|||
|
|
departmentId: null,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ immediate: true }
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// 表单事件
|
|||
|
|
const handleCancel = () => {
|
|||
|
|
emit('update:visible', false);
|
|||
|
|
};
|
|||
|
|
const handleSubmit = async () => {
|
|||
|
|
await formRef.value?.validate();
|
|||
|
|
const { code, message } = props.isEdit
|
|||
|
|
? await updateTemplateSetting(form)
|
|||
|
|
: await createTemplateSetting(form);
|
|||
|
|
if (code === 200) {
|
|||
|
|
Message.success(message);
|
|||
|
|
handleCancel();
|
|||
|
|
// 通知父组件更新部门列表数据
|
|||
|
|
emit('submitted');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|