leaser_front/src/views/setting/system/contract-settings/modal/contract-template-form.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>