120 lines
3.2 KiB
Vue
120 lines
3.2 KiB
Vue
<template>
|
||
<a-modal
|
||
:visible="visible"
|
||
title="新增创建合同模板"
|
||
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';
|
||
import { useRouter } from 'vue-router';
|
||
interface TreeNode {
|
||
id: string | number;
|
||
name: string;
|
||
children?: TreeNode[];
|
||
}
|
||
const props = defineProps<{
|
||
visible: boolean;
|
||
isEdit: boolean;
|
||
record?: any;
|
||
departmentListData: TreeNode[]; // 修复类型
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'update:visible', val: boolean): void;
|
||
(e: 'submitted'): void;
|
||
}>();
|
||
const router = useRouter();
|
||
// 表单数据
|
||
const formRef = ref<FormInstance>();
|
||
const form = reactive<any>({
|
||
name: '',
|
||
departmentId: null,
|
||
id: undefined,
|
||
});
|
||
|
||
// 校验规则
|
||
const rules = {
|
||
name: [{ required: true, message: '请输入模板名称' }],
|
||
departmentId: [{ required: true, message: '请选择适用范围' }],
|
||
};
|
||
// 表单事件
|
||
const handleCancel = () => {
|
||
emit('update:visible', false);
|
||
};
|
||
watch(
|
||
() => props.visible,
|
||
(val) => {
|
||
if (val) {
|
||
if (props.record) {
|
||
Object.assign(form, {
|
||
...props.record,
|
||
});
|
||
} else {
|
||
Object.assign(form, {
|
||
id: undefined,
|
||
name: '',
|
||
departmentId: null,
|
||
});
|
||
}
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
);
|
||
const handleSubmit = async () => {
|
||
await formRef.value?.validate();
|
||
if (!form.departmentId || !form.name) return;
|
||
if (props.isEdit) {
|
||
// saveType 保存类别：1 名称与适用范围数据，2 基础信息数据，3 条款数据)
|
||
form.saveType = 1;
|
||
}
|
||
const { code, message, data } = props.isEdit
|
||
? await updateTemplateSetting(form)
|
||
: await createTemplateSetting(form);
|
||
if (code === 200) {
|
||
Message.success(message);
|
||
if (props.isEdit) {
|
||
emit('submitted');
|
||
} else {
|
||
const info = data as any;
|
||
const id = info.contractTemplateSettingId;
|
||
router.push({
|
||
name: 'system-setting-contract-template-edit',
|
||
query: { id },
|
||
});
|
||
}
|
||
handleCancel();
|
||
}
|
||
};
|
||
</script>
|