leaser_front/src/views/setting/system/contract-settings/modal/contract-file-form.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="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/contracts';
  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>