refactor(aftersales): 故障赔付/服务补偿单审核改为审批配置状态机

liu

3 天以前 7fef9ad2195d4b2a399f794221a6fca1b82424d3

 src/views/aftersales/compensation/modules/audit-modal.vue

@@ -1,91 +1,99 @@
<script lang="ts" setup>
import { ref } from 'vue';
  import type { VbenFormSchema } from '#/adapter/form';
  import type { AfterSaleCompensationApi } from '#/api/aftersales/compensation';

import { useVbenModal } from '@vben/common-ui';
  import { computed, ref } from 'vue';

import { message } from 'ant-design-vue';
  import { useVbenModal } from '@vben/common-ui';

import { useVbenForm } from '#/adapter/form';
import { auditCompensation } from '#/api/aftersales/compensation';
  import { message } from 'ant-design-vue';

const emit = defineEmits(['success']);
  import { useVbenForm } from '#/adapter/form';
  import { auditCompensation } from '#/api/aftersales/compensation';

const compensationId = ref<number>();
  const emit = defineEmits(['success']);

const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
    labelWidth: 100,
  },
  wrapperClass: 'grid-cols-1',
  layout: 'vertical',
  schema: [
    {
      fieldName: 'auditStatus',
      label: '审批结果',
      component: 'RadioGroup',
  const pass = ref(true); // true=审核通过 / false=审核不通过
  const rowData = ref<AfterSaleCompensationApi.Compensation>();
  const getTitle = computed(() => (pass.value ? '审核通过' : '审核不通过'));

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

const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
    try {
      const values = await formApi.getValues<{
        auditStatus: number;
        remark?: string;
  /** 审核表单字段：不通过时必须填写原因 */
  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() {
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }
      modalApi.lock();
      const values = await formApi.getValues();
      try {
        await auditCompensation(
          rowData.value!.id!,
          pass.value,
          values.reviewRemark,
        );
        await modalApi.close();
        emit('success');
        message.success(pass.value ? '审核通过' : '已退回，可修改后重新提交');
      } finally {
        modalApi.unlock();
      }
    },
    async onOpenChange(isOpen: boolean) {
      if (!isOpen) {
        rowData.value = undefined;
        return;
      }
      const data = modalApi.getData<{
        pass: boolean;
        row: AfterSaleCompensationApi.Compensation;
      }>();
      await auditCompensation({
        id: compensationId.value!,
        auditStatus: values.auditStatus,
        remark: values.remark,
      });
      await modalApi.close();
      emit('success');
      message.success('审批完成');
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      compensationId.value = undefined;
      await formApi.resetForm();
      return;
    }
    const data = modalApi.getData<{ id: number }>();
    compensationId.value = data?.id;
    await formApi.setValues({ auditStatus: 20 });
  },
});
      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.compensationNo }}</div>
      <div>赔付金额：{{ rowData.amount }}</div>
    </div>
    <Form class="mx-4" />
  </Modal>
</template>