feat: 设置->合同设置->合同文档模板设置

2025-08-26 23:13:34 +08:00
parent ddb35b10f1
commit fc07ed06d5
16 changed files with 1348 additions and 95 deletions
@@ -0,0 +1,167 @@
+<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="departmentId">
+        <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-item label="适用项目" field="projects">
+        <a-select
+          v-model="form.projects"
+          multiple
+          :disabled="!form.departmentId"
+          placeholder="请选择适用项目"
+        >
+          <template v-if="deptProjectList.length">
+            <a-option
+              v-for="item in deptProjectList"
+              :key="item.id"
+              :value="item.id"
+            >
+              {{ item.name }}
+            </a-option>
+          </template>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="上传文档" field="urlArr">
+        <FileUpload
+          v-model:object-keys="form.urlArr"
+          v-model:signed-put-u-r-l="form.urlArr"
+          :max-count="1"
+          :upload-type="1"
+          accept="doc,.docx"
+        />
+        <!-- <a-upload draggable  action="/" /> -->
+        <!-- <FileUpload tip="仅支持.doc / .docx格式，最大文件尺寸10MB" v-model:object-keys="form.url"
+                    v-model:signed-put-u-r-l="form.url" list-type="picture-card" /> -->
+      </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 { createWordSetting, updateWordSetting } from '@/api/setting';
+  import { DepartmentItem } from '@/types/setting';
+  import { getDeptProjectListFromDeptId } from '@/api/common';
+  import { Message } from '@arco-design/web-vue';
+  import FileUpload from '@/components/common/FileUpload.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<any>({
+    name: '',
+    departmentId: null,
+    projects: [],
+    url: '',
+    urlArr: [],
+    id: null,
+  });
+  const deptProjectList = ref<any>([]);
+  //  校验规则
+  const rules = {
+    name: [{ required: true, message: '请输入模板名称' }],
+    departmentId: [{ required: true, message: '请选择适用范围' }],
+    projects: [{ required: true, message: '请选择适用项目' }],
+    urlArr: [{ required: true, message: '请上传合同文档' }],
+  };
+  const getDeptProjectListFromDeptIdData = async (id) => {
+    const { code, data } = await getDeptProjectListFromDeptId(id);
+    if (code === 200) {
+      deptProjectList.value = data?.deptProjectList || [];
+    }
+  };
+
+  //  表单事件
+  const handleCancel = () => {
+    emit('update:visible', false);
+  };
+
+  //  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 }
+  );
+  watch(
+    () => form.departmentId,
+    (id) => {
+      if (id) {
+        deptProjectList.value = [];
+        getDeptProjectListFromDeptIdData(id);
+      }
+    }
+  );
+  const handleSubmit = async () => {
+    await formRef.value?.validate();
+    const params = JSON.parse(JSON.stringify(form));
+    params.url = form.urlArr[0];
+    delete params.urlArr;
+    const { code, message } = props.isEdit
+      ? await updateWordSetting(params)
+      : await createWordSetting(params);
+    if (code === 200) {
+      Message.success(message);
+      handleCancel();
+      // 通知父组件更新部门列表数据
+      emit('submitted');
+    }
+  };
+</script>