CaiYuanYiTiHua/src/views/demo/workflow/task/process/look.vue

<template>
  <PageWrapper :class="prefixCls">
    <!-- <div class="btn-box">
      <a-button
        type="primary"
        @click="closePage"
        class="ml-2"
        danger
        >关闭
      </a-button>
    </div> -->
    <a-layout>
      <a-layout>
        <a-layout-content>
          <a-tabs v-model:activeKey="activeName" @change="changeActive">
            <a-tab-pane
              key="form"
              :tab="
                designerData.formCurrentNode.formTitle
                  ? designerData.formCurrentNode.formTitle
                  : '表单信息'
              "
              v-if="formVisble"
            >
              <FormViewer
                ref="formBoxRef"
                :formConfig="formConfig"
                :processId="designerData.process.id"
                :formVerison="designerData.formCurrentNode.formVerison"
                :formRelationId="designerData.formCurrentNode.formRelationId"
                :instanceInfo="designerData.process.instanceInfo"
                :issueId="designerData.formCurrentNode.issueId"
                v-if="formVisble"
              />
            </a-tab-pane>
            <a-tab-pane key="flow" tab="流程信息" force-render>
              <div class="process-design" :style="'display: flex; height:' + designerData.height">
                <process-viewer
                  v-if="processVisble"
                  :key="`designer-${id}`"
                  :events="['element.click']"
                  @element-click="elementClick"
                  :xml="flowContent"
                  :flowViewer="flowViewer"
                />
              </div>
            </a-tab-pane>
            <a-tab-pane key="record" tab="流转记录" force-render>
              <a-timeline>
                <a-timeline-item
                  v-for="(item, index) in designerData.logs"
                  :key="index"
                  :color="item.type"
                >
                  <div class="title">{{ item.time }}</div>
                  <a-card hoverable size="small">
                    <div class="type-title">{{ item.name }}</div>
                    <div class="content">
                      <span
                        class="link"
                        v-for="(userName, index2) in item.userNames"
                        :key="index2"
                        >{{ userName }}</span
                      >
                      {{ item.des }}
                    </div>
                  </a-card>
                </a-timeline-item>
              </a-timeline>
            </a-tab-pane>
          </a-tabs>
        </a-layout-content>
        <a-layout-sider v-if="designerData.userLogs.length > 0">
          <a-tabs v-model:activeKey="auditName">
            <a-tab-pane key="audit" tab="审批信息">
              <div class="approval-info">
                <auditInfo :data="designerData.userLogs" />
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-layout-sider>
      </a-layout>
    </a-layout>

    <!-- 节点记录信息 -->
    <div class="info-box" v-if="designerData.nodeLogs.length > 0">
      <a-drawer v-model:open="infoOpen" class="custom-class" title="记录信息" placement="right">
        <a-timeline>
          <a-timeline-item
            v-for="(item, index) in designerData.nodeLogs"
            :key="index"
            :color="item.type"
          >
            <div class="title">{{ item.time }}</div>
            <a-card hoverable size="small">
              <div class="type-title">{{ item.name }}</div>
              <div class="content">
                <span class="link" v-for="(userName, index2) in item.userNames" :key="index2">{{
                  userName
                }}</span>
                {{ item.des }}
              </div>
            </a-card>
          </a-timeline-item>
        </a-timeline>
      </a-drawer>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, reactive, onBeforeMount } from 'vue';
  import { FormViewer } from '@/components/FormViewer';
  import { ProcessViewer } from '@/components/ProcessViewer';
  import { PageWrapper } from '@/components/Page';
  import { getBPMN } from '@/api/sys/WFProcess';
  import { IFormConfig } from '@/views/demo/form-design/typings/v-form-component';
  import { dateFormat } from '@/utils/base';
  import { designerDataType, logsType } from './processModel';
  import { auditInfo } from './page';

  const props = defineProps({
    processId: String,
  });
  const prefixCls = 'preview-box';
  const flowContent = ref('');
  const flowViewer = ref({});
  const infoOpen = ref(true);
  const formBoxRef = ref<any>();
  const formVisble = ref(false);
  const processVisble = ref(false);
  // 表单数据
  const formConfig = ref<IFormConfig>({
    // 表单配置
    schemas: [],
    layout: 'horizontal',
    labelLayout: 'flex',
    labelWidth: 100,
    labelCol: {},
    wrapperCol: {},
    currentItem: {
      component: '',
      componentProps: {},
    },
    activeKey: 1,
  });
  const designerData: designerDataType = reactive({
    loading: false,
    xmlString: '',
    height: document.documentElement.clientHeight - 200.5 + 'px;',
    midVisible: false,
    isCustmerTitle: false,
    nodeUsers: [],
    selectUsersVisible: false,
    selectTUserVisible: false,
    tUserType: 1, // 1 转移 2 加签,
    isDraft: false,
    delegateUsers: [],
    task: {},
    process: {},
    logs: [], // 流程日志信息
    nodeMap: {}, // 需要处理的任务
    userLogs: [], // 人员日志信息
    nodeLogs: [],
    taskBtns: [],
    currentNode: {},
    stampList: [],
    currentBtn: {
      code: '',
      name: '',
      isNextAuditor: false,
    },
    wfData: [],
    selectRejectNodeVisible: false,
    selectSignVisible: false,
    formCurrentNode: {},
  });
  const activeName = ref('form');
  const auditName = ref('audit');
  function changeActive(activeKey) {
    if (activeKey == 'flow') {
      processVisble.value = true;
    } else {
      processVisble.value = false;
    }
  }
  function elementClick(element: { id: string | number }) {
    if (element) {
      designerData.nodeLogs = designerData.nodeMap[element.id] || [];
      infoOpen.value = true;
    } else {
      designerData.nodeLogs = [];
    }
  }
  async function getDetailInfo() {
    let query: any = {
      id: props.processId,
    };
    let data = await getBPMN(query);
    flowContent.value = data.flowContent;
    flowViewer.value = data.flowViewer;
    designerData.process = data.process;
    designerData.task = data.task;
    let content = JSON.parse(data.scheme.content);
    let wfData = content.wfData;
    const currentNode = wfData.find((t) => t.type == 'bpmn:StartEvent');
    if (currentNode.authFields.length > 0) {
      formVisble.value = true;
    } else {
      activeName.value = 'flow';
      processVisble.value = true;
    }
    designerData.formCurrentNode = currentNode;
    formConfig.value = currentNode.authFields;
    setLogsAndTasks(data.logs, data.tasks);
    // getBtns();
  }

  function setLogsAndTasks(logs: any[], tasks: any[]) {
    const res: logsType[] = [];
    const taskMap = {};
    const nodeMap = {};
    const userLogs: any[] = [];

    tasks.forEach(
      (task: {
        unitId: string | number;
        unitName: any;
        createDate: any;
        type: number;
        userId: any;
        userName: any;
      }) => {
        nodeMap[task.unitId] = nodeMap[task.unitId] || [
          {
            unitId: task.unitId,
            name: task.unitName,
            userIds: [],
            userNames: [],
            des: '正在审核',
            time: `当前-创建时间:${dateFormat(task.createDate)}`,
            type: 'blue',
            isFinish: false,
          },
        ];

        if (task.type == 2) {
          taskMap[task.unitId + task.type] = taskMap[task.unitId + task.type] || {
            unitId: task.unitId,
            name: task.unitName,
            userIds: [],
            userNames: [],
            des: '正在查阅',
            time: `当前-创建时间:${dateFormat(task.createDate)}`,
            type: 'blue',
          };
          taskMap[task.unitId + task.type].userIds.push(task.userId);
          taskMap[task.unitId + task.type].userNames.push(task.userName);

          if (nodeMap[task.unitId].length == 1) {
            nodeMap[task.unitId].push({
              unitId: task.unitId,
              name: task.unitName,
              userIds: [],
              userNames: [],
              des: '正在查阅',
              time: `当前-创建时间:${dateFormat(task.createDate)}`,
              type: 'blue',
              isFinish: true,
            });
          }
          nodeMap[task.unitId][1].userIds.push(task.userId);
          nodeMap[task.unitId][1].userNames.push(task.userName);
        } else {
          taskMap[task.unitId] = taskMap[task.unitId] || {
            unitId: task.unitId,
            name: task.unitName,
            userIds: [],
            userNames: [],
            des: '正在审核',
            time: `当前-创建时间:${dateFormat(task.createDate)}`,
            type: 'blue',
          };
          taskMap[task.unitId].userIds.push(task.userId);
          nodeMap[task.unitId][0].userIds.push(task.userId);
          taskMap[task.unitId].userNames.push(task.userName);
          nodeMap[task.unitId][0].userNames.push(task.userName);
        }
      },
    );

    for (let key in taskMap) {
      res.push(taskMap[key]);
    }

    for (let key in nodeMap) {
      nodeMap[key] = nodeMap[key].filter((t: { userIds: string | any[] }) => t.userIds.length > 0);
    }

    logs.forEach(
      (log: {
        unitId: string;
        unitName: any;
        userId: string;
        userName: string;
        des: string;
        operationName: string;
        createDate: any;
        taskType: number;
        operationCode: string;
        stampImg: any;
      }) => {
        res.push({
          unitId: log.unitId,
          name: log.unitName,
          userIds: [log.userId],
          userNames: [log.userName],
          des: log.des ? log.des : log.operationName,
          time: dateFormat(log.createDate),
          type: 'gray',
        });

        nodeMap[log.unitId] = nodeMap[log.unitId] || [];
        nodeMap[log.unitId].push({
          unitId: log.unitId,
          name: log.unitName,
          userIds: [log.userId],
          userNames: [log.userName],
          time: dateFormat(log.createDate),
          des: log.des ? log.des : log.operationName,
          type: 'gray',
          isFinish: true,
        });
        if (log.taskType == 1 && !['sign'].includes(log.operationCode)) {
          // 右侧显示审核记录
          // const userLogIndex = userLogs.findIndex((t) => t.id == log.unitId);
          // if (userLogIndex == -1) {
          userLogs.push({
            id: log.unitId,
            name: log.unitName,
            user: log.userName,
            time: dateFormat(log.createDate),
            des: log.des,
            img: log.stampImg,
          });
          // }
        }
      },
    );

    designerData.logs = res;
    designerData.nodeMap = nodeMap;
    designerData.userLogs = userLogs.sort(function (a, b) {
      return a.time < b.time ? -1 : 1;
    });
  }
  // function closePage() {
  //   tabStore.closeTabByKey('/dashboard/task_look_preview/detail?processId=' + processId, router);
  // }

  onBeforeMount(() => {
    getDetailInfo();
  });
</script>
<style lang="less" scoped>
  ::v-deep .ant-tabs-nav-wrap {
    padding-left: 10px;
  }
  ::v-deep .ant-layout {
    height: 100%;
    background-color: @component-background;
  }
  ::v-deep .ant-layout-sider-children {
    border-left: 1px solid rgba(5, 5, 5, 0.06);
  }
  ::v-deep .ant-divider-vertical {
    height: 100%;
  }
  .info-box {
    display: inline-block;
    width: 300px;
    position: absolute;
    right: 0;
    margin-top: 40px;
  }

  .ant-timeline-item-content {
    .title {
      color: #909399;
      line-height: 1;
      margin-bottom: 8px;
      font-size: 13px;
    }

    .type-title {
      font-size: 12px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .link {
      color: #409eff;
    }
  }

  .preview-box {
    height: 100%;

    .btn-box {
      padding: 10px;
      justify-content: flex-end;
      display: flex;
    }
  }
  ::v-deep .vben-page-wrapper-content {
    height: 100%;
    margin: 0 0 0 16px;
  }
  .form-box {
    width: 480px;
  }

  .approval-column {
    padding: 10px;
  }
  ::v-deep .ant-layout .ant-layout-sider {
    padding-left: 10px;
    background-color: @component-background;
    flex: 0 0 360px !important;
    max-width: 360px !important;
    min-width: 360px !important;
    width: 360px !important;
  }
  ::v-deep .vben-page-wrapper .vben-page-wrapper-content {
    height: 98%;
  }
  .l-task-btns {
    .ant-btn {
      margin: 0;
      margin-top: 8px;
      margin-right: 8px;
    }
  }
</style>