refactor(approval): 审批配置页 + 采购计划/采购订单改为状态机审核

liu

昨天 e99df7745f202936ad9fa59982e52327fd90e763

refactor(approval): 审批配置页 + 采购计划/采购订单改为状态机审核

配合后端将 BPM 审批改为轻量级单级/或签状态机。

- 新增「系统管理 → 审批配置」页面：按业务类型维护启用开关与审批人（多选或签），
  审批人取系统内用户下拉，配套 src/api/system/approval-config
- 采购计划、采购订单列表页去掉流程定义选择弹窗，改为：
  提交（未提交/审核不通过）→ 审核 / 审核不通过（仅审批人可见）→ 查看审批
- 审核走独立的 audit-modal，审核不通过时驳回原因必填
- 审核按钮可见性由 approver-ids 接口 + 当前登录用户判定，与后端校验保持一致
- 采购订单列表/详情补充审核人、审核时间、审核意见展示

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

 src/api/erp/purchase/order/index.ts

@@ -28,6 +28,10 @@
    productNames?: string; // äº§å“åç§°åˆ—表
    creatorName?: string; // åˆ›å»ºäººåç§°
    createTime?: Date; // åˆ›å»ºæ—¶é—´
    reviewerId?: number; // å®¡æ ¸äººç¼–号
    reviewerName?: string; // å®¡æ ¸äººå§“名
    reviewTime?: Date | string; // å®¡æ ¸æ—¶é—´
    reviewRemark?: string; // å®¡æ ¸æ„è§ï¼ˆä¸é€šè¿‡æ—¶ä¸ºé©³å›žåŽŸå› ï¼‰
    items?: PurchaseOrderItem[]; // è®¢å•é¡¹åˆ—表
  }

@@ -98,17 +102,37 @@
  return requestClient.download('/purchase/order/export-excel', { params });
}

/** èŽ·å–采购审核流程列表 */
export function getPurchaseApproveProcessList() {
  return requestClient.get<any[]>('/purchase/order/approve-process-list');
/**
 * æäº¤é‡‡è´­è®¢å•å®¡æ‰¹ï¼ˆæœªæäº¤/审核不通过 â†’ å®¡æ‰¹ä¸­ï¼‰
 *
 * æ”¹ä¸ºè½»é‡çº§çŠ¶æ€æœºå®¡æ‰¹åŽï¼ŒåŽç«¯æŒ‰å®¡æ‰¹é…ç½®æ ¡éªŒå®¡æ‰¹äººï¼Œå‰ç«¯æ— éœ€å†é€‰æ‹© BPM æµç¨‹ã€‚
 */
export function submitPurchaseOrder(id: number) {
  return requestClient.put('/purchase/order/submit', null, {
    params: { id },
  });
}

/** èŽ·å–采购审核流程列表响应 */
export interface ProcessDefinition {
  id: string; // æµç¨‹å®šä¹‰ID
  key: string; // æµç¨‹Key
  name: string; // æµç¨‹åç§°
  version: number; // ç‰ˆæœ¬å·
/**
 * å®¡æ ¸é‡‡è´­è®¢å•ï¼ˆå®¡æ‰¹ä¸­ â†’ å®¡æ ¸é€šè¿‡/审核不通过）
 *
 * ä»…审批配置中指定的审批人本人可调用；pass=false æ—¶ reviewRemark（不通过原因）必填。
 */
export function auditPurchaseOrder(
  id: number,
  pass: boolean,
  reviewRemark?: string,
) {
  return requestClient.put('/purchase/order/audit', {
    id,
    pass,
    reviewRemark,
  });
}

/** èŽ·å–采购订单的审批人编号集合，供前端判断是否展示审核按钮 */
export function getPurchaseOrderApproverUserIds() {
  return requestClient.get<number[]>('/purchase/order/approver-ids');
}

/** ç¡®è®¤æ”¶è´§ */

 src/api/erp/purchase/plan/index.ts

@@ -9,7 +9,11 @@
    no?: string; // è®¡åˆ’单号
    name?: string; // è®¡åˆ’名称
    status?: number; // çŠ¶æ€ï¼š0未提交 10审批中 20审核通过 30审核不通过 40已取消
    processInstanceId?: string; // å·¥ä½œæµç¼–号
    processInstanceId?: string; // å·¥ä½œæµç¼–号（历史字段，改造后不再写入）
    reviewerId?: number; // å®¡æ ¸äººç¼–号
    reviewerName?: string; // å®¡æ ¸äººå§“名
    reviewTime?: string; // å®¡æ ¸æ—¶é—´
    reviewRemark?: string; // å®¡æ ¸æ„è§ï¼ˆé€šè¿‡æ—¶çš„意见 / ä¸é€šè¿‡æ—¶çš„原因）
    demandSource?: number; // éœ€æ±‚来源：1库存预警 2运维/生产计划
    demandSourceName?: string; // éœ€æ±‚来源名称
    planDate?: string; // è®¡åˆ’日期
@@ -50,11 +54,37 @@
  return requestClient.put('/purchase/plan/update', data);
}

/** æäº¤é‡‡è´­è®¡åˆ’审批 */
export function submitPurchasePlan(id: number, processDefinitionKey: string) {
/**
 * æäº¤é‡‡è´­è®¡åˆ’审核（草稿/审核不通过 â†’ å®¡æ‰¹ä¸­ï¼‰
 *
 * æäº¤å‰ç”±åŽç«¯æ ¡éªŒå®¡æ‰¹é…ç½®å·²å¯ç”¨ä¸”配置了有效审批人，无需前端传流程定义。
 */
export function submitPurchasePlan(id: number) {
  return requestClient.put('/purchase/plan/submit', null, {
    params: { id, processDefinitionKey },
    params: { id },
  });
}

/**
 * å®¡æ ¸é‡‡è´­è®¡åˆ’（审批中 â†’ å®¡æ ¸é€šè¿‡/审核不通过）
 *
 * ä»…审批配置中指定的审批人本人可调用；pass=false æ—¶ reviewRemark（不通过原因）必填。
 */
export function auditPurchasePlan(
  id: number,
  pass: boolean,
  reviewRemark?: string,
) {
  return requestClient.put('/purchase/plan/audit', {
    id,
    pass,
    reviewRemark,
  });
}

/** èŽ·å–采购计划的审批人编号集合，用于判断是否展示审核按钮 */
export function getPurchasePlanApproverUserIds() {
  return requestClient.get<number[]>('/purchase/plan/approver-ids');
}

/** æ ¹æ®åº“存预警生成采购计划 */
@@ -101,9 +131,4 @@
/** å¯¼å‡ºé‡‡è´­è®¡åˆ’ Excel */
export function exportPurchasePlan(params: any) {
  return requestClient.download('/purchase/plan/export-excel', { params });
}

/** èŽ·å–审批流程列表 */
export function getApproveProcessList(id: number) {
  return requestClient.get(`/purchase/plan/approve-process-list`, { params: { id } });
}

 src/api/system/approval-config/index.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,62 @@
import type { PageParam, PageResult } from '@vben/request';

import { requestClient } from '#/api/request';

export namespace SystemApprovalConfigApi {
  /** å®¡æ‰¹é…ç½® */
  export interface ApprovalConfig {
    id?: number; // ä¸»é”®ID
    bizType?: string; // ä¸šåŠ¡ç±»åž‹ç¼–码
    bizName?: string; // ä¸šåŠ¡ç±»åž‹åç§°
    approvalEnabled?: boolean; // æ˜¯å¦å¯ç”¨å®¡æ‰¹
    userIds?: number[]; // å®¡æ‰¹äººç”¨æˆ·ID列表
    userNames?: string[]; // å®¡æ‰¹äººå§“名列表
    remark?: string; // å¤‡æ³¨
    createTime?: Date; // åˆ›å»ºæ—¶é—´
  }
}

/** æŸ¥è¯¢å®¡æ‰¹é…ç½®åˆ†é¡µ */
export function getApprovalConfigPage(params: PageParam) {
  return requestClient.get<PageResult<SystemApprovalConfigApi.ApprovalConfig>>(
    '/system/approval-config/page',
    { params },
  );
}

/** æŸ¥è¯¢å®¡æ‰¹é…ç½®è¯¦æƒ… */
export function getApprovalConfig(id: number) {
  return requestClient.get<SystemApprovalConfigApi.ApprovalConfig>(
    `/system/approval-config/get?id=${id}`,
  );
}

/**
 * ä¿å­˜å®¡æ‰¹é…ç½®ï¼ˆæ–°å¢žæˆ–修改）
 *
 * å®¡æ‰¹äººä¸ºæ•´ä½“覆盖：传入的 userIds å³ä¸ºæœ€ç»ˆç»“果，未传入的会被移除。
 */
export function saveApprovalConfig(
  data: SystemApprovalConfigApi.ApprovalConfig,
) {
  return requestClient.post('/system/approval-config/save', data);
}

/** åˆ é™¤å®¡æ‰¹é…ç½® */
export function deleteApprovalConfig(id: number) {
  return requestClient.delete(`/system/approval-config/delete?id=${id}`);
}

/** æŸ¥è¯¢æŒ‡å®šä¸šåŠ¡ç±»åž‹çš„审批人编号集合 */
export function getApproverUserIds(bizType: string) {
  return requestClient.get<number[]>('/system/approval-config/approver-ids', {
    params: { bizType },
  });
}

/** åˆ¤æ–­å½“前登录用户是否为指定业务类型的审批人 */
export function isApprover(bizType: string) {
  return requestClient.get<boolean>('/system/approval-config/is-approver', {
    params: { bizType },
  });
}

 src/views/erp/purchase/order/detail/index.vue

@@ -85,6 +85,18 @@
      field: 'inStatus',
      render: (val) => renderInStatus(val as number),
    },
    { label: '审核人', field: 'reviewerName', render: textRender },
    {
      label: '审核时间',
      field: 'reviewTime',
      render: (val) => (val ? (formatDateTime(val) as string) : '-'),
    },
    {
      label: '审核意见',
      field: 'reviewRemark',
      render: (val, data) =>
        data?.status === 30 && val ? `不通过原因：${val}` : (val || '-'),
    },
    { label: '创建人', field: 'creatorName', render: textRender },
    {
      label: '创建时间',

 src/views/erp/purchase/order/index.vue

@@ -7,6 +7,7 @@

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

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

@@ -15,21 +16,34 @@
  confirmReceipt,
  deletePurchaseOrder,
  exportPurchaseOrder,
  getPurchaseOrderApproverUserIds,
  getPurchaseOrderPage,
  updatePurchaseOrderStatus,
  submitPurchaseOrder,
} from '#/api/erp/purchase/order';
import { $t } from '#/locales';

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

/** ERP é‡‡è´­è®¢å•åˆ—表 */
defineOptions({ name: 'ErpPurchaseOrder' });

const route = useRoute();
const userStore = useUserStore();

/** å½“前业务类型的审批人编号集合，用于判断是否展示审核按钮 */
const approverIds = ref<number[]>([]);
/** å½“前登录用户编号 */
const currentUserId = userStore.userInfo?.id;

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

const [AuditModalComp, auditModalApi] = useVbenModal({
  connectedComponent: AuditModal,
  destroyOnClose: true,
});

@@ -69,21 +83,60 @@
  }
}

/** å®¡æ‰¹/反审批操作 */
async function handleUpdateStatus(
  row: ErpPurchaseOrderApi.PurchaseOrder,
  status: number,
) {
/** æäº¤å®¡æ ¸ - åŽç«¯æŒ‰å®¡æ‰¹é…ç½®æ ¡éªŒå®¡æ‰¹äººï¼Œæ— éœ€å‰ç«¯é€‰æ‹©æµç¨‹ */
async function handleSubmit(row: ErpPurchaseOrderApi.PurchaseOrder) {
  const hideLoading = message.loading({
    content: `确定${status === 20 ? '审批' : '反审批'}该订单吗？`,
    content: '正在提交审核...',
    duration: 0,
  });
  try {
    await updatePurchaseOrderStatus(row.id!, status);
    message.success(`${status === 20 ? '审批' : '反审批'}成功`);
    await submitPurchaseOrder(row.id!);
    message.success('提交成功，等待审批人审核');
    handleRefresh();
  } finally {
    hideLoading();
  }
}

/** å®¡æ ¸ - é€šè¿‡ / ä¸é€šè¿‡ */
function handleAudit(row: ErpPurchaseOrderApi.PurchaseOrder, pass: boolean) {
  auditModalApi.setData({ pass, row }).open();
}

/** å½“前用户是否为该业务类型的审批人 */
function canAudit(row: ErpPurchaseOrderApi.PurchaseOrder) {
  return (
    row.status === 10 && approverIds.value.includes(currentUserId as number)
  );
}

/** æŸ¥çœ‹å®¡æ‰¹è¯¦æƒ… - æ”¹é€ ä¸ºè½»é‡çº§å®¡æ‰¹åŽå±•ç¤ºå®¡æ ¸è®°å½•ï¼Œä¸å†è·³è½¬ BPM æµç¨‹è¯¦æƒ… */
function handleViewProcess(row: ErpPurchaseOrderApi.PurchaseOrder) {
  const parts: string[] = [];
  if (row.reviewerName) {
    parts.push(`审核人：${row.reviewerName}`);
  }
  if (row.reviewTime) {
    parts.push(`审核时间：${row.reviewTime}`);
  }
  if (row.reviewRemark) {
    parts.push(
      `${row.status === 30 ? '不通过原因' : '审核意见'}：${row.reviewRemark}`,
    );
  }
  if (parts.length === 0) {
    message.info('该订单暂无审核记录');
    return;
  }
  message.info(parts.join('　'));
}

/** åŠ è½½å½“前业务类型的审批人编号集合 */
async function loadApproverIds() {
  try {
    approverIds.value = (await getPurchaseOrderApproverUserIds()) ?? [];
  } catch {
    approverIds.value = [];
  }
}

@@ -151,6 +204,7 @@
});

onMounted(() => {
  loadApproverIds();
  const id = route.query.id;
  if (id) {
    formModalApi.setData({ formType: 'detail', id: Number(id) }).open();
@@ -159,7 +213,9 @@
</script>

<template>
  <Page auto-content-height><FormModal @success="handleRefresh" />
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <AuditModalComp @success="handleRefresh" />
    <Grid table-title="采购订单列表">
      <template #toolbar-tools>
        <TableAction
@@ -213,22 +269,43 @@
              type: 'link',
              icon: ACTION_ICON.EDIT,
              auth: ['erp:purchase-order:update'],
              ifShow: () => row.status !== 20,
              // å®¡æ‰¹ä¸­ä¸å¯ä¿®æ”¹ï¼šéœ€å…ˆã€Œå®¡æ ¸ä¸é€šè¿‡ã€é€€å›žï¼›å·²å®¡æ ¸ä¸å¯ä¿®æ”¹
              ifShow: () => row.status === 0 || row.status === 30,
              onClick: handleEdit.bind(null, row),
            },
            {
              label: row.status === 10 ? '审批' : '反审批',
              label: '提交',
              type: 'link',
              auth: ['erp:purchase-order:update-status'],
              // æœªæäº¤ä¸Žå®¡æ ¸ä¸é€šè¿‡å‡å¯æäº¤ï¼Œå®¡æ ¸ä¸é€šè¿‡éœ€ä¿®æ”¹åŽé‡æ–°æäº¤
              ifShow: () => row.status === 0 || row.status === 30,
              onClick: handleSubmit.bind(null, row),
            },
            {
              label: '审核',
              type: 'link',
              icon: ACTION_ICON.AUDIT,
              auth: ['erp:purchase-order:update-status'],
              popConfirm: {
                title: `确认${row.status === 10 ? '审批' : '反审批'}${row.no}吗？`,
                confirm: handleUpdateStatus.bind(
                  null,
                  row,
                  row.status === 10 ? 20 : 10,
                ),
              auth: ['erp:purchase-order:audit'],
              // ä»…「审批中 + å½“前登录用户是审批人」才显示，其他人看不到该按钮
              ifShow: canAudit(row),
              onClick: handleAudit.bind(null, row, true),
              },
            {
              label: '审核不通过',
              type: 'link',
              danger: true,
              icon: ACTION_ICON.AUDIT,
              auth: ['erp:purchase-order:audit'],
              ifShow: canAudit(row),
              onClick: handleAudit.bind(null, row, false),
            },
            {
              label: '查看审批',
              type: 'link',
              icon: ACTION_ICON.VIEW,
              auth: ['erp:purchase-order:query'],
              ifShow: () => row.status === 20 || row.status === 30,
              onClick: handleViewProcess.bind(null, row),
            },
            {
              label: '确认收货',

 src/views/erp/purchase/order/modules/audit-modal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,99 @@
<script lang="ts" setup>
  import type { VbenFormSchema } from '#/adapter/form';
  import type { ErpPurchaseOrderApi } from '#/api/erp/purchase/order';

  import { computed, ref } from 'vue';

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

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

  import { useVbenForm } from '#/adapter/form';
  import { auditPurchaseOrder } from '#/api/erp/purchase/order';

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

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

  const [Form, formApi] = useVbenForm({
    commonConfig: {
      componentProps: {
        class: 'w-full',
      },
      formItemClass: 'col-span-1',
      labelWidth: 130,
    },
    wrapperClass: 'grid-cols-1',
    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() {
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }
      modalApi.lock();
      const values = await formApi.getValues();
      try {
        await auditPurchaseOrder(
          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: ErpPurchaseOrderApi.PurchaseOrder;
      }>();
      rowData.value = data.row;
      pass.value = data.pass;
      formApi.setState({ schema: useAuditSchema() });
      formApi.resetForm();
    },
  });
</script>

<template>
  <Modal :title="getTitle" class="w-2/5">
    <div v-if="rowData" class="mx-4 mb-4 text-sm text-gray-600">
      <div>订单单号：{{ rowData.no }}</div>
      <div>供应商：{{ rowData.supplierName || '-' }}</div>
    </div>
    <Form class="mx-4" />
  </Modal>
</template>

 src/views/erp/purchase/plan/index.vue

@@ -2,11 +2,12 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { ErpPurchasePlanApi } from '#/api/erp/purchase/plan';

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

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

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

@@ -16,27 +17,34 @@
  exportPurchasePlan,
  generatePlanFromStockAlert,
  generatePurchaseRequests,
  getApproveProcessList,
  getPurchasePlanApproverUserIds,
  getPurchasePlanPage,
  submitPurchasePlan,
} from '#/api/erp/purchase/plan';
import { $t } from '#/locales';

import { 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';

/** ERP é‡‡è´­è®¡åˆ’列表 */
defineOptions({ name: 'ErpPurchasePlan' });

const router = useRouter();
const userStore = useUserStore();

/** å½“前业务类型的审批人编号集合，用于判断是否展示审核按钮 */
const approverIds = ref<number[]>([]);
/** å½“前登录用户编号 */
const currentUserId = userStore.userInfo?.id;

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

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

@@ -92,23 +100,29 @@
  }
}

/** æäº¤å®¡æ‰¹ - å…ˆèŽ·å–流程列表 */
/** æäº¤å®¡æ ¸ - åŽç«¯æŒ‰å®¡æ‰¹é…ç½®æ ¡éªŒå®¡æ‰¹äººï¼Œæ— éœ€å‰ç«¯é€‰æ‹©æµç¨‹ */
async function handleSubmit(row: ErpPurchasePlanApi.PurchasePlan) {
  const hideLoading = message.loading({
    content: '获取审批流程...',
    content: '正在提交审核...',
    duration: 0,
  });
  try {
    const processList = await getApproveProcessList(row.id!);
    hideLoading();
    if (!processList || processList.length === 0) {
      message.warning('暂无可用审批流程，请先配置 BPM æµç¨‹');
      return;
    }
    processModalApi.setData({ id: row.id, processList }).open();
  } catch {
    await submitPurchasePlan(row.id!);
    message.success('提交成功，等待审批人审核');
    handleRefresh();
  } finally {
    hideLoading();
  }
}

/** å®¡æ ¸ - é€šè¿‡ / ä¸é€šè¿‡ */
function handleAudit(row: ErpPurchasePlanApi.PurchasePlan, pass: boolean) {
  auditModalApi.setData({ pass, row }).open();
}

/** å½“前用户是否为该业务类型的审批人 */
function canAudit(row: ErpPurchasePlanApi.PurchasePlan) {
  return row.status === 10 && approverIds.value.includes(currentUserId as number);
}

/** ç”Ÿæˆé‡‡è´­ç”³è¯· */
@@ -145,14 +159,37 @@
  formModalApi.setData({ formType: 'detail', id: row.id }).open();
}

/** æŸ¥çœ‹å®¡æ‰¹è¯¦æƒ… */
/** æŸ¥çœ‹å®¡æ‰¹è¯¦æƒ… - æ”¹é€ ä¸ºè½»é‡çº§å®¡æ‰¹åŽå±•ç¤ºå®¡æ ¸è®°å½•ï¼Œä¸å†è·³è½¬ BPM æµç¨‹è¯¦æƒ… */
function handleViewProcess(row: ErpPurchasePlanApi.PurchasePlan) {
  if (!row.processInstanceId) {
    message.warning('该计划尚未提交审批');
  const parts: string[] = [];
  if (row.reviewerName) {
    parts.push(`审核人：${row.reviewerName}`);
  }
  if (row.reviewTime) {
    parts.push(`审核时间：${row.reviewTime}`);
  }
  if (row.reviewRemark) {
    parts.push(`${row.status === 30 ? '不通过原因' : '审核意见'}：${row.reviewRemark}`);
  }
  if (parts.length === 0) {
    message.info('该计划暂无审核记录');
    return;
  }
  router.push({ name: 'BpmProcessInstanceDetail', query: { id: row.processInstanceId } });
  message.info(parts.join('　'));
}

/** åŠ è½½å½“前业务类型的审批人编号集合 */
async function loadApproverIds() {
  try {
    approverIds.value = (await getPurchasePlanApproverUserIds()) ?? [];
  } catch {
    approverIds.value = [];
  }
}

onMounted(() => {
  loadApproverIds();
});

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
@@ -192,7 +229,7 @@
<template>
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <ProcessModal @success="handleRefresh" />
    <AuditModalComp @success="handleRefresh" />
    <Grid table-title="采购计划列表">
      <template #toolbar-tools>
        <TableAction
@@ -264,10 +301,30 @@
            {
              label: '提交',
              type: 'link',
              auth: ['erp:purchase-plan:submit'],
              // è‰ç¨¿ä¸Žå®¡æ ¸ä¸é€šè¿‡å‡å¯æäº¤ï¼Œå®¡æ ¸ä¸é€šè¿‡éœ€ä¿®æ”¹åŽé‡æ–°æäº¤
              ifShow: () => row.status === 0 || row.status === 30,
              onClick: handleSubmit.bind(null, row),
            },
            {
              label: '审核',
              type: 'link',
              icon: ACTION_ICON.AUDIT,
              auth: ['erp:purchase-plan:audit'],
              // ä»…「审批中 + å½“前登录用户是审批人」才显示，其他人看不到该按钮
              ifShow: canAudit(row),
              onClick: handleAudit.bind(null, row, true),
            },
            {
              label: '审核不通过',
              type: 'link',
              danger: true,
              auth: ['erp:purchase-plan:audit'],
              // åŒä¸Šï¼Œä¸Žã€Œå®¡æ ¸ã€æˆå¯¹å‡ºçŽ°ï¼Œä»…审批人可见
              ifShow: canAudit(row),
              onClick: handleAudit.bind(null, row, false),
            },
            {
              label: '生成申请',
              type: 'link',
              auth: ['erp:purchase-plan:generate-request'],

 src/views/erp/purchase/plan/modules/audit-modal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,99 @@
<script lang="ts" setup>
  import type { VbenFormSchema } from '#/adapter/form';
  import type { ErpPurchasePlanApi } from '#/api/erp/purchase/plan';

  import { computed, ref } from 'vue';

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

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

  import { useVbenForm } from '#/adapter/form';
  import { auditPurchasePlan } from '#/api/erp/purchase/plan';

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

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

  const [Form, formApi] = useVbenForm({
    commonConfig: {
      componentProps: {
        class: 'w-full',
      },
      formItemClass: 'col-span-1',
      labelWidth: 130,
    },
    wrapperClass: 'grid-cols-1',
    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() {
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }
      modalApi.lock();
      const values = await formApi.getValues();
      try {
        await auditPurchasePlan(
          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: ErpPurchasePlanApi.PurchasePlan;
      }>();
      rowData.value = data.row;
      pass.value = data.pass;
      formApi.setState({ schema: useAuditSchema() });
      formApi.resetForm();
    },
  });
</script>

<template>
  <Modal :title="getTitle" class="w-2/5">
    <div v-if="rowData" class="mx-4 mb-4 text-sm text-gray-600">
      <div>计划单号：{{ rowData.no }}</div>
      <div>计划名称：{{ rowData.name }}</div>
    </div>
    <Form class="mx-4" />
  </Modal>
</template>

 src/views/erp/purchase/plan/modules/process-select-modal.vue

ÎļþÒÑɾ³ý

 src/views/system/approvalConfig/data.ts

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,111 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';

import { getSimpleUserList } from '#/api/system/user';

/** åˆ—表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'bizName',
      label: '业务类型',
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '请输入业务类型名称',
      },
    },
    {
      fieldName: 'approvalEnabled',
      label: '是否启用',
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [
          { label: '已启用', value: true },
          { label: '未启用', value: false },
        ],
        placeholder: '请选择是否启用',
      },
    },
  ];
}

/** åˆ—表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
  return [
    { field: 'bizName', title: '业务类型', minWidth: 160 },
    { field: 'bizType', title: '业务编码', minWidth: 200 },
    {
      field: 'approvalEnabled',
      title: '是否启用审批',
      width: 120,
      align: 'center',
      slots: { default: 'approvalEnabled' },
    },
    {
      field: 'userNames',
      title: '审批人',
      minWidth: 200,
      slots: { default: 'userNames' },
    },
    { field: 'remark', title: '备注', minWidth: 200 },
    { title: '操作', width: 140, fixed: 'right', slots: { default: 'actions' } },
  ];
}

/** é…ç½®è¡¨å•ï¼šä¸šåŠ¡ç±»åž‹ + å¯ç”¨å¼€å…³ + å®¡æ‰¹äºº */
export function useConfigFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'bizName',
      label: '业务类型',
      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
      fieldName: 'bizType',
      label: '业务编码',
      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
      fieldName: 'approvalEnabled',
      label: '启用审批',
      component: 'Switch',
      defaultValue: false,
      componentProps: {
        checkedChildren: '启用',
        unCheckedChildren: '停用',
      },
      help: '停用后该业务类型将无法提交审核',
    },
    {
      fieldName: 'userIds',
      label: '审批人',
      component: 'ApiSelect',
      componentProps: {
        api: getSimpleUserList,
        labelField: 'nickname',
        valueField: 'id',
        mode: 'multiple',
        allowClear: true,
        placeholder: '请选择审批人',
      },
      help: '可配置多个审批人，多个审批人之间为「或签」，即任意一人审核通过即为通过',
    },
    {
      fieldName: 'remark',
      label: '备注',
      component: 'Textarea',
      componentProps: {
        rows: 3,
        placeholder: '请输入备注',
      },
    },
  ];
}

 src/views/system/approvalConfig/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,93 @@
<script lang="ts" setup>
  import type { VxeTableGridOptions } from '#/adapter/vxe-table';
  import type { SystemApprovalConfigApi } from '#/api/system/approval-config';

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

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

  import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
  import { getApprovalConfigPage } from '#/api/system/approval-config';

  import { useGridColumns, useGridFormSchema } from './data';
  import ConfigForm from './modules/config-form.vue';

  defineOptions({ name: 'SystemApprovalConfig' });

  const [ConfigFormModal, configFormModalApi] = useVbenModal({
    connectedComponent: ConfigForm,
    destroyOnClose: true,
  });

  /** åˆ·æ–°è¡¨æ ¼ */
  function handleRefresh() {
    gridApi.query();
  }

  /** é…ç½®å®¡æ‰¹äºº */
  function handleConfig(row: SystemApprovalConfigApi.ApprovalConfig) {
    configFormModalApi.setData(row).open();
  }

  const [Grid, gridApi] = useVbenVxeGrid({
    formOptions: {
      schema: useGridFormSchema(),
    },
    gridOptions: {
      columns: useGridColumns(),
      height: 'auto',
      keepSource: true,
      proxyConfig: {
        ajax: {
          query: async ({ page }, formValues) =>
            await getApprovalConfigPage({
              pageNo: page.currentPage,
              pageSize: page.pageSize,
              ...formValues,
            }),
        },
      },
      rowConfig: {
        keyField: 'id',
        isHover: true,
      },
      toolbarConfig: {
        refresh: true,
        search: true,
      },
    } as VxeTableGridOptions<SystemApprovalConfigApi.ApprovalConfig>,
  });
</script>

<template>
  <Page auto-content-height>
    <ConfigFormModal @success="handleRefresh" />

    <Grid table-title="审批配置">
      <template #approvalEnabled="{ row }">
        <Tag :color="row.approvalEnabled ? 'success' : 'default'">
          {{ row.approvalEnabled ? '已启用' : '未启用' }}
        </Tag>
      </template>
      <template #userNames="{ row }">
        <span v-if="row.userNames && row.userNames.length > 0">
          {{ row.userNames.join('、') }}
        </span>
        <span v-else class="text-gray-400">未配置</span>
      </template>
      <template #actions="{ row }">
        <TableAction
          :actions="[
            {
              label: '配置审批人',
              type: 'link',
              icon: ACTION_ICON.EDIT,
              auth: ['system:approval-config:update'],
              onClick: handleConfig.bind(null, row),
            },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>

 src/views/system/approvalConfig/modules/config-form.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,79 @@
<script lang="ts" setup>
  import type { SystemApprovalConfigApi } from '#/api/system/approval-config';

  import { ref } from 'vue';

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

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

  import { useVbenForm } from '#/adapter/form';
  import { saveApprovalConfig } from '#/api/system/approval-config';

  import { useConfigFormSchema } from '../data';

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

  const currentRow = ref<SystemApprovalConfigApi.ApprovalConfig>();

  const [Form, formApi] = useVbenForm({
    commonConfig: {
      componentProps: {
        class: 'w-full',
      },
      formItemClass: 'col-span-1',
      labelWidth: 100,
    },
    wrapperClass: 'grid-cols-1',
    layout: 'horizontal',
    schema: useConfigFormSchema(),
    showDefaultActions: false,
  });

  const [Modal, modalApi] = useVbenModal({
    async onConfirm() {
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }
      modalApi.lock();
      const values = await formApi.getValues();
      try {
        await saveApprovalConfig({
          id: currentRow.value?.id,
          bizType: values.bizType,
          bizName: values.bizName,
          approvalEnabled: values.approvalEnabled,
          userIds: values.userIds ?? [],
          remark: values.remark,
        });
        await modalApi.close();
        emit('success');
        message.success('保存成功');
      } finally {
        modalApi.unlock();
      }
    },
    async onOpenChange(isOpen: boolean) {
      if (!isOpen) {
        currentRow.value = undefined;
        return;
      }
      const data = modalApi.getData<SystemApprovalConfigApi.ApprovalConfig>();
      currentRow.value = data;
      await formApi.setValues({
        bizName: data.bizName,
        bizType: data.bizType,
        approvalEnabled: data.approvalEnabled ?? false,
        userIds: data.userIds ?? [],
        remark: data.remark,
      });
    },
  });
</script>

<template>
  <Modal title="审批配置" class="w-2/5">
    <Form class="mx-4" />
  </Modal>
</template>