企企通产品部V6

Appearance

On this page

审批模块使用 ​

审批页面通用配置 ​

需要在菜单路由中进行配置，将当前详情页面设置为审批页面，并配置相应的页面类型（businessType）和页面模块地址，

页面模块地址说明：比如详情查询接口：/enquiry/purchaseEnquiryHead/queryById，取前缀。

需要对应的在详情页面，添加setPageOption方法（已有忽略）

js
import { useGlobalStoreWithDefaultValue } from "@/use/useGlobalStore";
const { setPageOption } = useGlobalStoreWithDefaultValue();
// ...省略其他代码
const options = {
  // ...省略其他代码
};
setPageOption(options);

image-20240423170108382

审批页面跳转方法说明 ​

在审批页面中，实现跳转到审批详情页面的方法如下：

tsx
// 引用GlobalListPageLayoutTypes类型定义，此处省略引用代码
const jumpDetail: (
  payload: GlobalListPageLayoutTypes.ListOptionsEventParams,
  listLayoutRef: any,
  useLocalButton?: boolean,
  cb?: () => void
) => void;

当审批按钮被点击时，执行以下代码：

js
// 引用useJumpDetailHook和GlobalListPageLayoutTypes类型定义，此处省略引用代码
const { jumpDetail } = useJumpDetailHook();
const handleDetail = (
  payload: GlobalListPageLayoutTypes.ListOptionsEventParams,
  listLayoutRef
) => {
  // payload 包含当前选中行的信息，listLayoutRef为当前列表的引用，false表示不使用本地按钮
  jumpDetail(payload, listLayoutRef, false);
};

若需在本地设置按钮组，请将useLocalButton参数设置为true：

js
// 引用useJumpDetailHook、useGlobalStoreWithDefaultValue及相关按钮配置，此处省略引用代码
import { useGlobalStoreWithDefaultValue } from "@/use/useGlobalStore";
import {
  BUTTON_AUDIT_FLOW_IMAGE,
  BUTTON_AUDIT_APPROVAL_COMMENT,
  GlobalListPageLayoutTypes,
} from "@qqt-product/ui";
const { jumpDetail } = useJumpDetailHook();
const { setAuditPageButton } = useGlobalStoreWithDefaultValue();
const handleDetail = (
  payload: GlobalListPageLayoutTypes.ListOptionsEventParams,
  listLayoutRef
) => {
  // 定义按钮组
  const buttons: GlobalPageLayoutTypes.PageButton[] = [
    { ...BUTTON_AUDIT_FLOW_IMAGE, dropdown: false },
    { ...BUTTON_AUDIT_APPROVAL_COMMENT, dropdown: false },
  ];
  // 设置按钮组并跳转到详情页面，使用本地按钮
  setAuditPageButton(buttons);
  jumpDetail(payload, listLayoutRef, true);
};

请确保在实现跳转方法时遵循项目的类型定义和编码规范，以保证代码的清晰性和一致性。

审批按钮自定义说明 ​

审批页面的按钮组中，当前产品已实现的业务按钮包括：审批通过、传阅、转办、退回、预览、特事特办、流程图、临时会签、前加签、后加签、审批意见、打印、临时节点添加历史等，这些均为标准功能。若现有按钮功能无法满足业务需求，可进行自定义，具体方法如下：

第一步：找到目标审批页面及对应方法 找到具体的审批页面（通常复用详情页面），在该页面中找到 setPageOption(options)方法。当前该方法返回的 options 对象中，pageButtons 属性即为审批页面的按钮组。

第二步：替换需要修改业务逻辑的按钮

js
setPageOption(options);
// 具体业务在setPageOption下面写
// 当前页面为审批页面
if (currentRow._isAudit === "1") {
  const customAgreeButton = {
    ...BUTTON_CUSTOM,
    title: srmI18n("", "审批通过"),
    authorityCode: "",
    emit: true,
    emitKey: "customAgree",
  };
  if (options.pageButtons) {
    // 比如 审批通过按钮
    const auditAgreeIndex = options.pageButtons.findIndex(
      (button) => button.key === "AUDIT_AGREE"
    );

    if (auditAgreeIndex !== -1) {
      // 在原来的位置替换按钮，保持按钮顺序
      options.pageButtons.splice(auditAgreeIndex, 1, customAgreeButton);
    } else {
      // 如果找不到 AUDIT_AGREE 按钮，则添加到数组末尾
      options.pageButtons.push(customAgreeButton);
    }
  }
}
//省略相关代码， 使用方法 和 pageButtons配置的按钮一样
function handleCustomAgree() {
  console.log("customAgree================");
}

特殊模板处理说明 ​

在文档中，请注意，部分模板具备独特性，如待办审批分为发布前审批、结果审批或其他自定义审批类型。对于发布前审批和结果审批，它们共享相同的businessType（菜单唯一标识）。因此，前端需要进行映射处理，映射文件位于@/utils/auditMap路径下。 例如，对于现场考察单的发布审批，返回的businessType为siteInspectionAudi，但在实际菜单中并不存在该businessType。映射配置示例代码如下：

js
export default {
  // 现场考察单发布审批
  siteInspectionAudi: {
    alias: "siteInspection", // 映射至菜单的 businessType
  },
  // 其他映射配置...
};

对于需要调整的审批页面接口，应配置tempateUrl。例如，预算管理的配置如下：

js
export default {
  // 预算管理
  budgetAdjustment: {
    alias: "budgetManage",
    tempateUrl: "/budget/budgetAdjustment/", // 接口模板路径
  },
  // 其他映射配置...
};

对于无需详情页面，而需要自定义页面的审批类型，应配置path。例如，招标结果审批和招标变更单审批的配置如下：

js
export default {
  // 招标结果审批
  resultBidding: {
    path: "/srm/customAuditPage/instructAudit", // 自定义页面路径
  },
  // 招标变更单审批
  changeBidding: {
    path: "/srm/customAuditPage/tenderAudit", // 自定义页面路径
  },
  // 其他映射配置...
};