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>