Vue 3 + TypeScript + Vite

金合信息科技

金合审批流程详情组件

export const defaultProps = {
  // 审批状态
  defaultStatus: {
    type: Object as PropType<{
      发起: number | string,
      等待: number | string,
      同意: number | string,
      拒绝: number | string,
      转交: number | string,
      加签: number | string,
      退回: number | string,
      撤销: number | string,
      评论: number | string,
    }>,
    default: () => {
      return {};
    },
  },
  // 节点类型
  defaultNodeType: {
    type: Object as PropType<{
      发起人节点: number | string,
      审批节点: number | string,
      办理节点: number | string,
      抄送节点: number | string,
    }>,
    default: () => {
      return {};
    },
  },
  // 数据数组
  dataList: {
    type: Array as PropType<Array<TDefaultFile>>,
    default: () => {
      return [];
    },
  },
  // 字段映射
  defaultFieldMap: {
    type: Object as PropType<TDefaultFile>,
    default: () => {
      return {};
    },
  },
  // 退回的节点数组（将数据按照nodeId排好序之后（默认从1开始），传入【"退回至","退回节点"】。例如:[[2,6]]。多次退回须传入多个数组，例如：[[2,6],[8,9]]）
  returnNode: {
    type: Array<Array<number, number>>,
    default: () => {
      return [];
    },
  },
  //文件访问地址
  fileUrl: {
    type: String,
    default: "",
  },
}

节点字段映射

export type TDefaultFile = {
  id: string,
  // 下标（排序）
  nodeId: string,
  // 节点类型
  nodeType: string, 
  // 节点类型名称
  nodeTypeName: string,
  // 审批状态
  approveStatus: string, 
  // 审批状态名称
  approveStatusName: string,
  // 发起人
  originator: string,
  // 发起人操作时间
  operationTime: string,
  // 审批类型
  approveType: string, 
  // 审批类型名称
  approveTypeName: string, 
  // 审批类型名称
  multiExecutorTypeName: string,
  // 审批意见
  approveOpinion: string,
  // 加签的人
  countersignPer: string,
  // 附件
  attachment: attachment,
  // 附件图片
  attachmentImg: string,
  // 退回节点
  returnNode: array,
  // 退回节点名称
  returnNodeName: string,
  // 连接线类型
  lineType: string,
  // 抄送是否全部已读
  allRead: boolean,
  // 抄送已读人数
  read: number,
  // 审批人列表
  approvePersonList: approvePersonList[],
}

审批人列表字段

export type approvePersonList = {
  // 审批人id
  id: number | string,
  // 审批人名称
  name: string,
  // 当前审批人的审批状态
  approveState: number | string,
  // 审批时间
  approveTime: string,
  // 审批意见
  approveOpinion: string,
  // 头像
  userAvatar: string,
  // 抄送时是否已读
  accomplish: boolean,
}

附件字段

export type attachment = {
  id: number | string,
  // 名称
  originName: string,
  // 访问地址
  url: string,
  // 类型
  suffix: string,
  // 大小
  size: number | string,
}

数据处理请参考以下方法（如果使用中台的审批流接口，可以直接使用）

html页面
<IkingApprovalProcess
    :returnNode="state.returnNode"
    :defaultStatus="state.status"
    :defaultNodeType="state.nodeType"
    :dataList="state.data"
    :defaultFieldMap="state.filedMap"
  ></IkingApprovalProcess>
js数据处理 
axios
  .post(
    "http://192.168.2.45:6002/approve/process/preview",
    {
      formData: "",
      formId: "",
      formInstanceId: "",
    },
    {
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer iking",
      },
      timeout: 5000,
    }
  )
  .then((response) => {
    if (response.data?.data) {
      for (let item of response.data?.data?.recordNodes) {
        item.lineType = "solid";
        item.username = item.executorUsers && item.executorUsers[0].userName;
      }
      response.data?.data?.instanceNodes.forEach((element: any, index: any) => {
        element.lineType = "dashed";
        element.sortOrder = response.data?.data?.recordNodes.length + index + 1;
        element.username =
          element.executorUsers && element.executorUsers[0].userName;
        element.status = state.status.等待;
        element.statusName = "审批中";
      });

      state.data = [
        ...response.data?.data?.recordNodes,
        ...response.data?.data?.instanceNodes,
      ];
      // 将数据按照sortOrder排序
      state.data = state.data.sort(
        (a: any, b: any) => a.sortOrder - b.sortOrder
      );

      state.data.forEach((item: any) => {
        if (item.backToNodeId) {
          // 计算退回节点下标
          let obj: any = state.data.find(
            (it: any) => it.id == item.backToNodeId
          );
          item.returnNodeName = obj.name;
          let arr: any = [obj.sortOrder, item.sortOrder];
          state.returnNode.push(arr);
        }
        if (item.type == state.nodeType.抄送节点) {
          // 计算抄送时，已读未读情况
          let readList = item.executorUsers.filter((it: any) => {
            return it.accomplish;
          });
          item.read = readList.length;
          item.allRead = readList.length == item.executorUsers.length;
        }
        // 图片附件列表
        item.images = item?.images?.map((it: any) => {
          return formatUrl(it);
        });
      });
    }
  })
  .catch((error) => {
    console.error(error);
  });

const formatUrl = (str: any) => {
  let url = "";
  if (str.includes("http") || str.includes("https")) {
    url = str;
  } else {
    url = state.downloadUrl + str;
  }
  return url;
};