refactor: 单据审核改为审批配置状态机（前端统一审核弹窗）

liu

3 天以前 91eff4781fa4142d1f62d30a0fa1de5cae424eaf

 src/views/hrm/performance-appraise/modules/audit-modal.vue

@@ -1,5 +1,8 @@
<script lang="ts" setup>
import { ref } from 'vue';
import type { VbenFormSchema } from '#/adapter/form';
import type { HrmPerformanceAppraiseApi } from '#/api/hrm/performance-appraise';

import { computed, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

@@ -10,42 +13,42 @@

const emit = defineEmits(['success']);

const appraiseId = ref<number>();
const pass = ref(true); // true=审核通过 / false=审核不通过
const rowData = ref<HrmPerformanceAppraiseApi.Appraise>();
const getTitle = computed(() => (pass.value ? '审核通过' : '审核不通过'));

const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
    labelWidth: 100,
    formItemClass: 'col-span-1',
    labelWidth: 90,
  },
  wrapperClass: 'grid-cols-1',
  layout: 'vertical',
  schema: [
    {
      fieldName: 'auditStatus',
      label: '审批结果',
      component: 'RadioGroup',
      componentProps: {
        options: [
          { label: '通过', value: 20 },
          { label: '驳回', value: 30 },
        ],
      },
      rules: 'selectRequired',
    },
    {
      fieldName: 'remark',
      label: '审批备注',
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入审批备注',
        rows: 3,
      },
    },
  ],
  layout: 'horizontal',
  schema: [],
  showDefaultActions: false,
});

/** 审核表单字段：不通过时必须填写原因 */
function useAuditSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'reviewRemark',
      label: '审核意见',
      component: 'Textarea',
      formItemClass: 'col-span-1',
      componentProps: {
        rows: 3,
        placeholder: pass.value
          ? '请输入审核意见（可选）'
          : '请输入不通过原因（必填）',
      },
      rules: pass.value ? '' : 'required',
    },
  ];
}

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
@@ -54,38 +57,40 @@
      return;
    }
    modalApi.lock();
    const values = await formApi.getValues();
    try {
      const values = await formApi.getValues<{
        auditStatus: number;
        remark?: string;
      }>();
      await auditAppraise({
        id: appraiseId.value!,
        auditStatus: values.auditStatus,
        remark: values.remark,
      });
      await auditAppraise(rowData.value!.id!, pass.value, values.reviewRemark);
      await modalApi.close();
      emit('success');
      message.success('审批完成');
      message.success(pass.value ? '审核通过' : '已退回，可修改后重新提交');
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      appraiseId.value = undefined;
      await formApi.resetForm();
      rowData.value = undefined;
      return;
    }
    const data = modalApi.getData<{ id: number }>();
    appraiseId.value = data?.id;
    await formApi.setValues({ auditStatus: 20 });
    const data = modalApi.getData<{
      pass: boolean;
      row: HrmPerformanceAppraiseApi.Appraise;
    }>();
    rowData.value = data.row;
    pass.value = data.pass;
    formApi.setState({ schema: useAuditSchema() });
    formApi.resetForm();
  },
});
</script>

<template>
  <Modal title="审批绩效考核方案" class="w-1/3">
    <Form class="mx-3" />
  <Modal :title="getTitle" class="w-2/5">
    <div v-if="rowData" class="mx-4 mb-4 text-sm text-gray-600">
      <div>方案名称：{{ rowData.name }}</div>
      <div>考核周期：{{ rowData.period }}</div>
      <div>考核指标数：{{ rowData.itemCount }}</div>
    </div>
    <Form class="mx-4" />
  </Modal>
</template>