zsjz-ai/ai-frontend/packages/plat/views/case/CaseForm.vue

<template>
  <BasicModal
    v-bind="$attrs"
    :showFooter="true"
    :centered="true"
    @register="registerModal"
    @ok="handleSubmit"
    width="30%"
  >
    <template #title>
      <span> {{ isEdit ? '编辑案件' : '新增案件' }} </span>
    </template>
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>
<script lang="ts" setup name="ViewsCaseForm">
  import { onBeforeUnmount, ref } from 'vue';
  import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
  import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
  import { create, list, update } from '@jeesite/plat/api/case/caseApi';
  import type { CaseInfo, CreateCaseDTO, UpdateCaseDTO } from '@jeesite/plat/api/case/caseApi';

  const emit = defineEmits(['success', 'register', 'openCase']);

  const isEdit = ref(false);
  const currentCaseId = ref('');
  const existingCaseList = ref<CaseInfo[]>([]);
  const waitingAutoOpen = ref(false);
  const modalDestroyed = ref(false);
  // 是否是打开案件时触发编辑（需要设置密码后直接打开）
  const needPwdForOpen = ref(false);

  onBeforeUnmount(() => {
    modalDestroyed.value = true;
  });

  function safeSetModalProps(props: Record<string, any>) {
    if (modalDestroyed.value) return;
    setModalProps(props);
  }

  function safeCloseModal() {
    if (modalDestroyed.value) return;
    closeModal();
  }

  const normalizeCaseName = (value?: string) => value?.trim().toLocaleLowerCase() || '';
  const defaultCasePwd = '123456';

  const typeOptions = [
    '贪污',
    '行贿受贿',
    '挪用公款',
    '徇私枉法',
    '国有资产流失',
    '失职罪',
    '滥用职权',
    '徇私舞弊',
    '倒卖土地使用权',
    '非法转让',
    '违法运用资金',
    '危险物品肇事',
  ].map((item) => ({
    label: item,
    value: item,
  }));

  const addFormSchemas: FormSchema[] = [
    {
      label: '案件名称',
      field: 'name',
      component: 'Input',
      componentProps: {
        placeholder: '请输入案件名称',
      },
      rules: [
        { required: true, message: '请输入案件名称' },
        {
          trigger: 'blur',
          validator: (_rule, value) => {
            const normalizedName = normalizeCaseName(value);
            if (!normalizedName) {
              return Promise.resolve();
            }
            const hasDuplicateName = existingCaseList.value.some(
              (item) =>
                normalizeCaseName(item.name) === normalizedName &&
                String(item.id ?? '') !== String(currentCaseId.value || ''),
            );
            if (hasDuplicateName) {
              return Promise.reject('案件名称已存在，请重新输入');
            }
            return Promise.resolve();
          },
        },
      ],
    },
    {
      label: '案件密码',
      field: 'pwd',
      component: 'InputPassword',
      componentProps: {
        placeholder: '不填默认 123456',
      },
      rules: [
        {
          trigger: 'blur',
          validator: (_rule, value) => {
            if (isEdit.value && !value?.trim()) {
              return Promise.reject('请输入案件密码');
            }
            return Promise.resolve();
          },
        },
      ],
    },
    {
      label: '案件类型',
      field: 'type',
      component: 'Select',
      componentProps: {
        options: typeOptions,
        placeholder: '默认选择第一个案件类型',
      },
    },
    {
      label: '备注',
      field: 'remark',
      component: 'InputTextArea',
      componentProps: {
        placeholder: '请输入备注',
        rows: 3,
      },
    },
  ];

  const [registerForm, { resetFields, validate, setFieldsValue }] = useForm({
    labelWidth: 100,
    baseColProps: { span: 24 },
    schemas: addFormSchemas,
    showActionButtonGroup: false,
  });

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    modalDestroyed.value = false;
    setModalProps({ loading: true });
    await resetFields();
    isEdit.value = data?.isEdit || false;
    currentCaseId.value = data?.id || '';
    existingCaseList.value = data?.caseList || [];
    waitingAutoOpen.value = false;
    // 获取是否需要设置密码后打开案件
    needPwdForOpen.value = data?.needPwdForOpen || false;
    if (isEdit.value && data) {
      setFieldsValue({
        name: data.name,
        type: data.type,
        remark: data.remark,
        pwd: '',
      });
    } else {
      setFieldsValue({
        type: typeOptions[0]?.value,
      });
    }
    setModalProps({ loading: false });
  });

  async function findCreatedCase(caseName: string) {
    const latestCaseList = await list();
    const normalizedName = normalizeCaseName(caseName);
    return [...(latestCaseList || [])]
      .sort((left, right) => Number(right.id || 0) - Number(left.id || 0))
      .find((item) => normalizeCaseName(item.name) === normalizedName);
  }

  async function handleSubmit() {
    try {
      const data = await validate();
      const caseName = data.name?.trim();
      safeSetModalProps({ confirmLoading: true });

      if (isEdit.value) {
        // 编辑模式：需要id，调用更新接口
        const submittedPwd = data.pwd?.trim() || '';
        const updateData: UpdateCaseDTO = {
          id: Number(currentCaseId.value),
          name: caseName,
          pwd: submittedPwd,
          type: data.type || typeOptions[0]?.value,
          remark: data.remark,
        };
        await update(updateData);

        // 如果是打开案件时触发的编辑，保存后直接打开案件
        if (needPwdForOpen.value) {
          emit('openCase', { id: Number(currentCaseId.value), pwd: submittedPwd });
        }
      } else {
        // 新增模式
        const createdPwd = data.pwd?.trim() || defaultCasePwd;
        const createdType = data.type || typeOptions[0]?.value;
        const createData: CreateCaseDTO = {
          name: caseName,
          pwd: createdPwd,
          type: createdType,
          remark: data.remark,
        };
        await create(createData);
        const createdCase = await findCreatedCase(caseName);
        if (createdCase?.id) {
          waitingAutoOpen.value = true;
          safeSetModalProps({ confirmLoading: true, loading: true, closable: false });
          emit('openCase', {
            id: Number(createdCase.id),
            pwd: createdPwd,
            onFinished: (success: boolean) => {
              waitingAutoOpen.value = false;
              safeSetModalProps({ confirmLoading: false, loading: false, closable: true });
              if (!success) {
                return;
              }
              safeCloseModal();
              emit('success', data);
            },
          });
          return;
        }
        safeCloseModal();
        emit('success', data);
        return;
      }

      safeCloseModal();
      emit('success', data);
    } catch (error: any) {
      if (error && error.errorFields) {
        // 表单验证错误，不做额外处理
      }
      console.log('error', error);
    } finally {
      if (!waitingAutoOpen.value) {
        safeSetModalProps({ confirmLoading: false, closable: true });
      }
    }
  }
</script>
<style lang="less" scoped>
  // 模态框底部按钮居中
  :deep(.jeesite-basic-modal-footer) {
    display: flex;
    justify-content: center;
    gap: 12px;

    .ant-btn {
      margin: 0 !important;
    }
  }
</style>