审批工作流中，历史审批记录查看

中文讨论区 经验分享
1

背景： 由于在审批中开启了“退回”功能，审批人填写意见退回后工作流结束；申请人根据意见修改后下次发起的审批为新流程，无法看见之前流程的审批意见等

image
image2035×999 103 KB

实现截图：

image
image1398×516 39.3 KB

实现方法：
审批流中 → 审批节点 → 审批人的操作界面 → v2版本配置 → 审批数据的处理表单 → 新增JS item
复制以下代码，需修改的地方仅有一处：ctx.request中的collectionName需替换为当前审批申请的数据表标识

const { Table, Tag, Spin, Empty } = ctx.libs.antd;
const { useState, useEffect } = ctx.libs.React;

function ApprovalTable() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        // 获取当前记录ID
        const dataKey = ctx.formValues?.id;

        if (!dataKey) {
          setLoading(false);
          return;
        }

        const { data: response } = await ctx.request({
          url: "approvals:listRelated",
          method: "get",
          params: {
            sort: ["-createdAt"],
            paginate: false,
            filter: {
              dataKey: String(dataKey),
              collectionName: "审批申请的数据表标识",
            },
          },
        });

        const rows = Array.isArray(response?.data) ? response.data : [];
        setData(rows);
      } catch (error) {
        ctx.logger.error(error, "Failed to fetch approvals");
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  const statusMap = {
    0: { label: "待处理", color: "orange" },
    1: { label: "已退回", color: "purple" },
    2: { label: "已通过", color: "green" },
    3: { label: "未处理", color: "default" },
    "-1": { label: "已拒绝", color: "red" },
    null: { label: "已分配", color: "blue" },
  };

  const columns = [
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
      width: 250,
      render: (text, record) => record.title || "-",
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 100,
      render: (val, record) => {
        // 处理 val 为 null 或 undefined 的情况
        const key = val === null || val === undefined ? "null" : val;
        const s = statusMap[key] || { label: val || "-", color: "default" };
        return <Tag color={s.color}>{ctx.t ? ctx.t(s.label) : s.label}</Tag>;
      },
    },
    {
      title: "审批人",
      dataIndex: ["user", "nickname"],
      key: "user",
      width: 120,
      render: (text, record) => record.user?.nickname || "-",
    },
    {
      title: "审批意见",
      dataIndex: "comment",
      key: "comment",
      width: 300,
      ellipsis: true,
      render: (text, record) => record.comment || "-",
    },
    {
      title: "创建时间",
      dataIndex: "createdAt",
      key: "createdAt",
      width: 180,
      render: (text, record) =>
        record.createdAt ? ctx.libs.dayjs(record.createdAt).format("YYYY-MM-DD HH:mm:ss") : "-",
    },
  ];

  if (loading) {
    return (
      <div style={{ padding: "24px", textAlign: "center" }}>
        <Spin />
      </div>
    );
  }

  // 显示全部记录，方便查看上一级审批意见
  // const renderData = data.slice(1);
  const renderData = data;

  if (!renderData.length) {
    return <Empty description={ctx.t("暂无审批记录")} />;
  }

  return (
    <div style={{ padding: "12px 0" }}>
      <h4 style={{ margin: "0 0 12px 0", fontSize: 16, fontWeight: 600, color: "#1890ff" }}>{ctx.t("历史审批记录")}</h4>
      {renderData.map((item, index) => {
        const dataSource = Array.isArray(item.records) ? item.records : [];
        return (
          <div key={item.id || index} style={{ marginBottom: "16px" }}>
            <Table
              columns={columns}
              dataSource={dataSource}
              rowKey="id"
              size="small"
              pagination={false}
              scroll={{ x: "max-content" }}
            />
          </div>
        );
      })}
    </div>
  );
}

ctx.render(<ApprovalTable />);
1 Like