feat(@gms/gms-plugin-billexpand): 审批轨迹增加分组

develop/@gms/gms-plugin-billexpand/src/constant.js

@@ -16,6 +16,7 @@ export const APPROVAL_TRACK_TABLE = {
   CURRENT_NODE: 'currnode',
   CREATOR_FULL_NAME: 'creatorfullname',
   OPERATION: 'operation',
+  STAGE: 'vinstance',
 }
 
 export const BILL_GLOBAL_PARAM = {

develop/@gms/gms-plugin-billexpand/src/control/workflow-track/workflow-track.vue

+<template>
+  <div>
+    <div class="workflow-button" :style="{top: styleTop, right: styleRight}" @click="showDrawer = true">
+      <div class="icon">
+        <svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <use xlink:href="#icon-a-28_BILLEXPAND_C_RBC_xinshenpiguiji"></use>
+        </svg>
+      </div>
+    </div>
+    <Drawer
+      :transfer="false"
+      title="审批轨迹"
+      :closable="true"
+      v-model="showDrawer"
+      :width="styleDrawerWidth"
+      :inner="true"
+      :mask="false"
+    >
+      <div v-if="useSubTableSource">
+        <div v-if="stagedSteps.length == 0"></div>
+        <div
+          class="collapse-stage"
+          v-for="stageData, k in stagedSteps"
+          :key="stageData.stage"
+        >
+          <div class="collapse-header" @click="toggleDetail(k)">
+            <Icon type="md-arrow-dropdown" v-if="expandMap[k]" />
+            <Icon type="md-arrow-dropright" v-else />
+            <div class="title">{{stageData.stageTitle}}</div>
+          </div>
+          <WorkflowTrackInfo v-show="expandMap[k]" :data="stageData" />
+        </div>
+      </div>
+      <div v-else>
+        <div v-if="!data || data.length == 0">暂无数据</div>
+        <WorkflowTrackInfo :data="data" />
+      </div>
+      
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import { APPROVAL_TRACK_TABLE } from '../../constant'
+import WorkflowTrackInfo from './workflow-track-info.vue'
+
+export default {
+  components: {
+    WorkflowTrackInfo
+  },
+  data() {
+    return {
+      showDrawer: false,
+      data: {
+        "procState": 2,
+        "startTime": "2021-10-12T07:28:04Z",
+        "finishTime": "2021-10-13T02:15:40Z",
+        "steps": [],
+        "submitter": "ylq"
+      },
+      stagedSteps: [],
+      expandMap: [],
+      useSubTableSource: false,
+    }
+  },
+  props: {
+    define: {
+      type: Object,
+      required: true,
+    },
+    context: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  methods:{
+    toggleDetail(index) {
+      this.expandMap[index] = !this.expandMap[index]
+      this.expandMap = [...this.expandMap]
+    },
+    getStageTitle(stage) {
+      const stageMap = {
+        '01': '项目立项',
+        '02': '年初一上一下',
+        '03': '年初二上二下',
+        '04': '年中一上一下',
+        '05': '年中二上二下',
+      }
+      return stageMap[stage]
+    },
+  },
+  mounted() {
+    const { tableName, subTableSource } = this.define.config
+    if (subTableSource) {
+      this.useSubTableSource = true
+      const subTable = this.context.bill.getSubData(tableName)
+      if (subTable instanceof Array) {
+        this.data = subTable.map((obj) => {
+          const operation = obj.getValue(APPROVAL_TRACK_TABLE.OPERATION)
+          const currNode = obj.getValue(APPROVAL_TRACK_TABLE.CURRENT_NODE)
+          const createTime = obj.getValue(APPROVAL_TRACK_TABLE.CREATE_TIME)
+
+          return {
+            state: 2,
+            result:
+              currNode == 99
+              ? -2
+              : operation == '提交'
+              ? -1
+              : operation == '同意'
+              ? 1
+              : operation == '驳回'
+              ? 3
+              : 4,
+            actualOwner: obj.getValue(APPROVAL_TRACK_TABLE.CREATOR_FULL_NAME),
+            createTime,
+            timestamp: new Date(createTime).getTime(),
+            completeTime: obj.getValue(APPROVAL_TRACK_TABLE.CREATE_TIME),
+            comments: obj.getValue(APPROVAL_TRACK_TABLE.APPROVAL_COMMENT),
+            title: obj.getValue(APPROVAL_TRACK_TABLE.NODE_NAME),
+            stage: obj.getValue(APPROVAL_TRACK_TABLE.STAGE),
+          }
+        })
+        this.data = this.data.sort((a, b) => a.timestamp - b.timestamp)
+        let temArray = []
+        for (let step of this.data) {
+          temArray.push(step)
+          temArray.stage = step.stage
+          temArray.stageTitle = this.getStageTitle(step.stage)
+          if (step.result == -2) {
+            temArray.finishStageFlag = true
+            this.stagedSteps.push(temArray)
+            temArray = []
+          }
+        }
+        if (temArray.length) {
+          this.stagedSteps.push(temArray)
+        }
+        
+        this.expandMap = new Array(this.stagedSteps.length)
+        if (this.stagedSteps.length == 5 && this.stagedSteps[4].finishStageFlag) {
+          this.expandMap = this.expandMap.fill(true)
+        }
+        else {
+          this.expandMap = this.expandMap.fill(false)
+          if (!this.stagedSteps[this.stagedSteps.length - 1].finishStageFlag) {
+            this.expandMap[this.expandMap.length - 1] = true
+          }
+        }
+      }
+      return
+    }
+    window.GAMS.Util.invokeServer({
+      path: 'gms/workflow/task/approved',
+      type: 'GET',
+      contentType: 'application/json',
+      params: {
+        bizName: this.context.bill.getBillDefine(),
+        bizObjId: this.context.bill.getMasterData().getValue('id'),
+      },
+    }).then((res) => {
+      const formatTrack = (curTrack) => {
+        if (!curTrack) return []
+        curTrack.steps = curTrack.steps.reverse()
+        curTrack.steps = curTrack.steps.map((step) => {
+          if (step.subTasks && step.subTasks.length) {
+            let participants = []
+            let actualOwnerList = []
+            let commentList = []
+            let resultFlag = 0
+            let rejectFlag = false
+            for (let task of step.subTasks) {
+              if (task.state == 2 && task.result == 3 || task.state == 3) {
+                rejectFlag = true
+                break
+              }
+            }
+
+            for (let task of step.subTasks) {
+              if (task.participants) {
+                participants = participants.concat(task.participants)
+              }
+              if (task.actualOwner) {
+                if (!rejectFlag || task.state == 2 && task.result == 3) {
+                  actualOwnerList.push(task.actualOwner)
+                }
+              }
+              if (task.comments) {
+                commentList.push(task.comments)
+              }
+              const curResult = task.result || 0
+              resultFlag |= 1 << curResult
+            }
+
+            step.result =
+              resultFlag & 8
+              ? 3
+              : resultFlag & 1
+              ? 0
+              : 1
+
+            rejectFlag && (step.state = 2)
+            step.comments = commentList.join(';\n')
+            step.participants = participants
+            step.actualOwner = actualOwnerList.join('、')
+          }
+          return step
+        })
+        curTrack.steps.push({
+          title: "提交申请",
+          state: 2,
+          createTime: curTrack.startTime,
+          completeTime: curTrack.startTime,
+          comments: null,
+          result: -1,
+          actualOwner: curTrack.submitter,
+        })
+        // 审批流程结束贴一个结束节点
+        if (curTrack.procState === 2) {
+          curTrack.steps.unshift({
+            state: curTrack.procState,
+            createTime: curTrack.finishTime,
+            completeTime: curTrack.finishTime,
+            result: -2,
+          })
+        }
+        // 否则从当前节点切断，
+        else {
+          for (let i = 0; i < curTrack.steps.length - 1; ++i) {
+            if (curTrack.steps[i].state === 1 && curTrack.steps[i + 1].state === 2) {
+              curTrack.steps = curTrack.steps.slice(i)
+              break
+            }
+          }
+        }
+        return curTrack.steps || []
+      }
+
+      res = res || []
+      let count = 0
+      for (let o of res) {
+        if (o.procState == 1) {
+          ;++count
+        }
+      }
+      if (count > 1) {
+        this.$Message.error('工作流数据异常')
+      }
+      this.data = []
+      for (let i = res.length - 1; i >= 0; --i) {
+        const o = res[i]
+        this.data = this.data.concat(formatTrack(o))
+      }
+      // 去掉中间的审批结束节点
+      for (let i = 1; i < this.data.length; ++i) {
+        if (this.data[i].result == -2) {
+          this.data.splice(i, 1)
+          ;--i
+        }
+      }
+    })
+  },
+  computed: {
+    styleTop() {
+      return this.define.layout.top || this.define.config.topDistance || '0px'
+    },
+    styleRight() {
+      return this.define.layout.right || this.define.config.rightDistance || '0px'
+    },
+    styleDrawerWidth() {
+      return this.define.layout.drawerWidth || this.define.config.drawerWidth || '400px'
+    },
+  },
+  beforeDestroy() {
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.workflow-button {
+  cursor: pointer;
+  position: absolute;
+  z-index: 700;
+  padding-top: 4px;
+  width: 42px;
+  height: 36px;
+  background: #005791;
+  box-shadow: 0 0 4px 0 rgba(109,109,109,0.50);
+  border-radius: 100px 0 0 100px;
+  .icon {
+    width: 28px;
+    height: 28px;
+    margin-left: 11px;
+  }
+  .text {
+    margin-top: 2px;
+    text-align: center;
+    height: 17px;
+    font-size: 12px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 17px;
+    text-shadow: 0px 1px 6px rgba(255, 169, 56, 0.8);
+  }
+}
+
+.collapse-stage {
+  margin-bottom: 5px;
+  .collapse-header {
+    background-color: #e5e5e5;
+    height: 26px;
+    font-size: 24px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    .title {
+      font-size: 14px;
+    }
+  }
+}
+
+
+</style>

develop/@gms/gms-plugin-billexpand/src/mcon.js

@@ -80,7 +80,7 @@ import DEQKD_batchEditorAction from "./query-actions/DEQKD_batchEditorAction";
 import applyDetail from './control/applyDetail';
 import linkShowDetail from './control/linkShowDetail';
 import ApprovalUserControl from './control/approval-user-control/approval-user-control.vue'
-import WorkflowTrack from './control/workflow-track.vue'
+import WorkflowTrack from './control/workflow-track/workflow-track.vue'
 import SignatureList from './control/signature-list.vue'
 import buttonGroupControl from './control/buttonGrouop'
 import rbcBasedataTree from './control/baseDataSelect/index.vue'