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

liu

昨天 7fef9ad2195d4b2a399f794221a6fca1b82424d3

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

- 提交审批不再弹选 BPM 流程，直接提交至审批配置指定审批人
- 审核/审核不通过合并为统一审核弹窗（审核不通过必填意见）
- 新增审批人集合接口 approver-ids，仅名单内用户可见审核按钮
- 删除流程选择弹窗 process-select-modal.vue

Co-Authored-By: Claude <noreply@anthropic.com>

 src/api/aftersales/compensation.ts

@@ -17,20 +17,13 @@
    reason?: string; // èµ”付原因
    auditStatus?: number; // å®¡æ‰¹çŠ¶æ€ï¼š0未提交 10审批中 20审核通过 30审核不通过 40已取消
    auditStatusName?: string; // å®¡æ‰¹çŠ¶æ€åç§°
    processInstanceId?: string; // å®¡æ‰¹æµç¨‹å®žä¾‹ç¼–号
    auditUserId?: number; // å®¡æ ¸äºº
    auditTime?: string; // å®¡æ ¸æ—¶é—´
    auditRemark?: string; // å®¡æ ¸å¤‡æ³¨
    reviewerId?: number; // å®¡æ ¸äººç”¨æˆ·ç¼–号
    reviewerName?: string; // å®¡æ ¸äººå§“名
    reviewTime?: string; // å®¡æ ¸æ—¶é—´
    reviewRemark?: string; // å®¡æ ¸æ„è§ï¼ˆä¸é€šè¿‡æ—¶å³ä¸é€šè¿‡åŽŸå› ï¼‰
    payStatus?: number; // æ”¯ä»˜çŠ¶æ€ï¼ˆè´¦åŠ¡è”动预留）
    remark?: string; // å¤‡æ³¨
    createTime?: string;
  }

  /** å®¡æ‰¹å‚æ•° */
  export interface AuditReq {
    id: number;
    auditStatus: number; // 20通过 30驳回
    remark?: string;
  }
}

@@ -66,21 +59,36 @@
  );
}

/** æäº¤èµ”付/服务补偿单审批 */
export function submitCompensation(id: number, processDefinitionKey: string) {
/**
 * æäº¤èµ”付/服务补偿单审批（未提交/审核不通过 â†’ å®¡æ‰¹ä¸­ï¼‰
 * å®¡æ‰¹äººç”±ã€Œç³»ç»Ÿç®¡ç† - å®¡æ‰¹é…ç½®ã€ç»Ÿä¸€é…ç½®ï¼Œæäº¤æ—¶æ— éœ€æŒ‡å®šã€‚
 */
export function submitCompensation(id: number) {
  return requestClient.put<boolean>('/aftersales/compensation/submit', null, {
    params: { id, processDefinitionKey },
    params: { id },
  });
}

/** å®¡æ‰¹èµ”付/服务补偿单 */
export function auditCompensation(data: AfterSaleCompensationApi.AuditReq) {
  return requestClient.put<boolean>('/aftersales/compensation/audit', data);
/** èŽ·å¾—审批人编号集合，供列表页判断是否展示审核按钮 */
export function getCompensationApproverIds() {
  return requestClient.get<number[]>('/aftersales/compensation/approver-ids');
}

/** èŽ·å–赔付/服务补偿单审批流程定义列表 */
export function getApproveProcessList() {
  return requestClient.get<{ id: string; name: string; version: number; key: string }[]>(
    '/aftersales/compensation/approve-process-list',
  );
/**
 * å®¡æ ¸èµ”付/服务补偿单（审批中 â†’ å®¡æ ¸é€šè¿‡ / å®¡æ ¸ä¸é€šè¿‡ï¼‰
 *
 * @param id èµ”付单编号
 * @param pass true=审核通过 / false=审核不通过
 * @param reviewRemark å®¡æ ¸æ„è§ï¼Œpass=false æ—¶å¿…å¡«
 */
export function auditCompensation(
  id: number,
  pass: boolean,
  reviewRemark?: string,
) {
  return requestClient.put<boolean>('/aftersales/compensation/audit', {
    id,
    pass,
    reviewRemark,
  });
}

 src/views/aftersales/compensation/index.vue

@@ -3,38 +3,54 @@
import type { AfterSaleCompensationApi } from '#/api/aftersales/compensation';

import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { Page, useVbenModal } from '@vben/common-ui';
import { isEmpty } from '@vben/utils';
import { useUserStore } from '@vben/stores';

import { message, Tag } from 'ant-design-vue';

import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
  deleteCompensation,
  getApproveProcessList,
  getCompensationApproverIds,
  getCompensationPage,
  submitCompensation,
} from '#/api/aftersales/compensation';
import { $t } from '#/locales';

import { AUDIT_STATUS, useGridColumns, useGridFormSchema } from './data';
import AuditModal from './modules/audit-modal.vue';
import Form from './modules/form.vue';
import ProcessSelectModal from './modules/process-select-modal.vue';

/** å”®åŽèµ”付/服务补偿单列表 */
defineOptions({ name: 'AfterSaleCompensation' });

const router = useRouter();
const userStore = useUserStore();
const currentUserId = userStore.userInfo?.id; // å½“前登录用户 ID，用于审批人权限判断

/** å®¡æ‰¹é…ç½®ä¸­è¯¥ä¸šåŠ¡çš„审批人编号集合，决定「审核 / å®¡æ ¸ä¸é€šè¿‡ã€æŒ‰é’®æ˜¯å¦å±•ç¤º */
const approverIds = ref<number[]>([]);

/** æ‹‰å–审批人集合；失败时保持为空（按钮不展示），不阻断列表加载 */
async function loadApproverIds() {
  try {
    approverIds.value = (await getCompensationApproverIds()) ?? [];
  } catch {
    approverIds.value = [];
  }
}

/** å½“前登录用户是否为该业务的审批人，且赔付单处于审批中（10） */
function canAudit(row: AfterSaleCompensationApi.Compensation) {
  return (
    row.auditStatus === AUDIT_STATUS.PROCESS &&
    !!currentUserId &&
    approverIds.value.includes(currentUserId)
  );
}

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

const [ProcessModal, processModalApi] = useVbenModal({
  connectedComponent: ProcessSelectModal,
  destroyOnClose: true,
});

@@ -43,8 +59,10 @@
  destroyOnClose: true,
});

/** åˆ·æ–°è¡¨æ ¼ä¸Žå®¡æ‰¹äººé›†åˆ */
function handleRefresh() {
  gridApi.query();
  loadApproverIds();
}

function handleCreate() {
@@ -73,40 +91,24 @@
  }
}

/** æäº¤å®¡æ‰¹ - å…ˆèŽ·å–流程列表 */
/** æäº¤å®¡æ‰¹ - å®¡æ‰¹äººç”±ã€Œç³»ç»Ÿç®¡ç† - å®¡æ‰¹é…ç½®ã€ç»Ÿä¸€æŒ‡å®šï¼Œæ­¤å¤„无需选择 */
async function handleSubmit(row: AfterSaleCompensationApi.Compensation) {
  const hideLoading = message.loading({
    content: '获取审批流程...',
    content: '正在提交审批...',
    duration: 0,
  });
  try {
    const processList = await getApproveProcessList();
    hideLoading();
    if (!processList || processList.length === 0) {
      message.warning('暂无可用审批流程，请先配置 BPM æµç¨‹');
      return;
    }
    processModalApi.setData({ id: row.id, processList }).open();
  } catch {
    await submitCompensation(row.id!);
    message.success('提交审批成功');
    handleRefresh();
  } finally {
    hideLoading();
  }
}

/** å®¡æ‰¹ï¼ˆé€šè¿‡/驳回） */
function handleAudit(row: AfterSaleCompensationApi.Compensation) {
  auditModalApi.setData({ id: row.id }).open();
}

/** æŸ¥çœ‹å®¡æ‰¹è¯¦æƒ… */
function handleViewProcess(row: AfterSaleCompensationApi.Compensation) {
  if (!row.processInstanceId) {
    message.warning('该单据尚未提交审批');
    return;
  }
  router.push({
    name: 'BpmProcessInstanceDetail',
    query: { id: row.processInstanceId },
  });
/** å®¡æ ¸ - é€šè¿‡ / ä¸é€šè¿‡ */
function handleAudit(row: AfterSaleCompensationApi.Compensation, pass: boolean) {
  auditModalApi.setData({ pass, row }).open();
}

const checkedIds = ref<number[]>([]);
@@ -151,12 +153,14 @@
    checkboxChange: handleRowCheckboxChange,
  },
});

// è¿›å…¥é¡µé¢å³æ‹‰å–审批人集合，用于判断「审核」按钮是否展示
loadApproverIds();
</script>

<template>
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <ProcessModal @success="handleRefresh" />
    <AuditFormModal @success="handleRefresh" />
    <Grid table-title="赔付/服务补偿单列表">
      <template #toolbar-tools>
@@ -204,21 +208,33 @@
              label: '提交审批',
              type: 'link',
              auth: ['aftersales:compensation:submit'],
              ifShow: row.auditStatus === AUDIT_STATUS.DRAFT || row.auditStatus === AUDIT_STATUS.REJECT,
              onClick: handleSubmit.bind(null, row),
              // å®¡æ‰¹äººç”±å®¡æ‰¹é…ç½®ç»Ÿä¸€æŒ‡å®šï¼Œæäº¤å‰ä»…二次确认，不再弹选流程框
              popConfirm: {
                title: '确认提交审批？提交后由审批配置中指定的审批人处理。',
                confirm: handleSubmit.bind(null, row),
              },
              // æœªæäº¤(0) ä¸Ž å®¡æ ¸ä¸é€šè¿‡(30) å‡å¯æäº¤ï¼ŒåŽè€…需修改后重新提交
              ifShow:
                row.auditStatus === AUDIT_STATUS.DRAFT ||
                row.auditStatus === AUDIT_STATUS.REJECT,
            },
            {
              label: '审批',
              label: '审核',
              type: 'link',
              icon: ACTION_ICON.AUDIT,
              auth: ['aftersales:compensation:audit'],
              ifShow: row.auditStatus === AUDIT_STATUS.PROCESS,
              onClick: handleAudit.bind(null, row),
              // ä»…「审批中 + å½“前登录用户在审批配置的审批人名单内」才显示
              ifShow: canAudit(row),
              onClick: handleAudit.bind(null, row, true),
            },
            {
              label: '查看审批',
              label: '审核不通过',
              type: 'link',
              ifShow: row.auditStatus !== AUDIT_STATUS.DRAFT && !!row.processInstanceId,
              onClick: handleViewProcess.bind(null, row),
              danger: true,
              auth: ['aftersales:compensation:audit'],
              // åŒä¸Šï¼Œä¸Žã€Œå®¡æ ¸ã€æˆå¯¹å‡ºçŽ°
              ifShow: canAudit(row),
              onClick: handleAudit.bind(null, row, false),
            },
            {
              label: $t('common.delete'),

 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>

 src/views/aftersales/compensation/modules/process-select-modal.vue

ÎļþÒÑɾ³ý