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="!data || data.length == 0">暂无数据</div>
      <div v-if="data && data.length" class="workflow-step-wrapper">
        <div
          class="workflow-step"
          v-for="step, k in data"
          :key="k"
        >
          <div class="step-head">
            <div class="step-icon">
              <svg :class="`step-icon ${isCurrentStep(step, k) ? 'waiting-icon' : 'finish-icon'}`" aria-hidden="true">
                <!-- 未到达 -->
                <use v-if="step.state == 1" xlink:href="#icon-a-24_BILLEXPAND_C_RBC_weidaoda"></use>
                <!-- 通过 -->
                <use v-else-if="step.result == 1" xlink:href="#icon-a-24_BILLEXPAND_C_RBC_shenpitongguo"></use>
                <!-- 提交 -->
                <use v-else-if="step.result == -1" xlink:href="#icon-a-24_BILLEXPAND_C_RBC_shenpitijiao"></use>
                <!-- 驳回 -->
                <use v-else-if="isRejectStep(step)" xlink:href="#icon-a-24_BILLEXPAND_C_RBC_shenpibohui"></use>
                <!-- 末端节点 -->
                <use v-else-if="step.result == -2" xlink:href="#icon-a-24_BILLEXPAND_C_RBC_moduanjiedian"></use>
              </svg>
            </div>
            <div :class="`step-line ${step.state === 2 ? 'finish-line' : 'waiting-line'}`" v-if="k != data.length - 1"></div>
          </div>
          <div class="step-main">
            <div class="step-main-body">
              <div :class="`${isCurrentStep(step, k) ? 'text-black' : isRejectStep(step) ? 'text-error' : 'text-grey'}`">
                <div v-if="step.result == -2">
                  <span class="result">审批结束</span>
                </div>
                <div v-else-if="step.state == 2">
                  <span v-if="step.actualOwner" class="participants">{{step.actualOwner}}&nbsp;&nbsp;</span>
                  <span class="result">{{step.result == -1 ? '提交' : step.result == 1 ? '通过' : '驳回'}}</span>
                </div>
                <div v-else>
                  <span v-if="isCurrentStep(step, k)" class="participants">等待</span>
                  <span class="participants">{{step.participants.join('、')}}</span>
                  <span class="result">&nbsp;&nbsp;审批</span>
                </div>
              </div>
              <div v-if="isCurrentStep(step, k) || step.state == 2">{{formatStepTime(step)}}</div>
              <div class="comment" v-if="step.comments">
                <div class="label">审批意见：</div>
                <div class="text">{{step.comments}}</div>
              </div>
              <div v-if="step.title" :class="isRejectStep(step) ? 'text-error' : 'text-main'">环节名称: {{step.title}}</div>
            </div>
          </div>
        </div>
      </div>
    </Drawer>
  </div>
</template>

<script>
import { APPROVAL_TRACK_TABLE } from '../constant'

export default {
  data() {
    return {
      showDrawer: false,
      data: {
        "procState": 2,
        "startTime": "2021-10-12T07:28:04Z",
        "finishTime": "2021-10-13T02:15:40Z",
        "steps": [],
        "submitter": "ylq"
      },
    }
  },
  props: {
    define: {
      type: Object,
      required: true,
    },
    context: {
      type: Object,
      default: () => { }
    }
  },
  methods:{
    isCurrentStep(step, k) {
      if (k != 0) return false
      return step.result != -2
    },
    isRejectStep(step) {
      return step.result === 3
    },
    formatDate(datetime) {
      const t = new Date(datetime)
      return t.format('yyyy-MM-dd HH:mm:ss')
    },
    /**
     * 根据节点状态返回完成时间或时间差
     * @param {object} step
     * @param {string} step.createTime - 创建时间
     * @param {string | null} step.completeTime - 结束时间
     * @param {number} step.result - 状态
     * @returns {string}
     */
    formatStepTime(step) {
      const currentTimestamp = Date.now()
      if (step.state === 1) {
        let ans = ''
        const createTimestamp = (new Date(step.createTime)).getTime()
        let seconds = (currentTimestamp - createTimestamp) / 1000
        const formatList = [
          {
            rate: 60 * 60 * 24,
            label: '天',
          },
          {
            rate: 60 * 60,
            label: '小时',
          },
          {
            rate: 60,
            label: '分钟',
          },
        ]
        // for (const o of formatList) {
        //   const num = Math.floor(seconds / o.rate)
        //   if (num > 0 || o.alwaysShow) {
        //     ans += `${num}${o.label}`
        //     seconds -= num * o.rate
        //   }
        // }
        for (let i = 0; i < formatList.length; ++i) {
          const o = formatList[i]
          const num = Math.floor(seconds / o.rate)
          if (num > 0 || (!ans && i == formatList.length - 1)) {
            ans += `${num}${o.label}`
            seconds -= num * o.rate
          }
        }
        ans = '已等待' + ans
        return ans
      }
      else {
        return this.formatDate(step.completeTime)
      }
    },
  },
  mounted() {
    const { tableName, subTableSource } = this.define.config
    if (subTableSource) {
      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)
            
          return {
            state: 2,
            result:
              currNode == 99
              ? -2
              : operation == '提交'
              ? -1
              : operation == '同意'
              ? 1
              : operation == '驳回'
              ? 3
              : -2,
            actualOwner: obj.getValue(APPROVAL_TRACK_TABLE.CREATOR_FULL_NAME),
            createTime: obj.getValue(APPROVAL_TRACK_TABLE.CREATE_TIME),
            completeTime: obj.getValue(APPROVAL_TRACK_TABLE.CREATE_TIME),
            comments: obj.getValue(APPROVAL_TRACK_TABLE.APPROVAL_COMMENT),
            title: obj.getValue(APPROVAL_TRACK_TABLE.NODE_NAME),
          }
        })
        this.data = this.data.reverse()
      }
      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>
@icon-width: 24px;
@main-color: #0DA2E6;
.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);
  }
}
.workflow-step-wrapper {
  width: 100%;
  .workflow-step {
    width: 100%;
    position: relative;
    .step-head {
      width: @icon-width;
      position: absolute;
      height: 100%;
      .step-icon {
        width: 100%;
        fill: currentColor;
        height: @icon-width;
      }
      .waiting-icon {
        color: @main-color;
      }
      .finish-icon {
        color: #888;
      }
      .step-line {
        margin-left: @icon-width / 2;
        width: 1px;
        height: calc(100% - @icon-width);
      }
      .finish-line {
        background-color: #C8C8C8;
      }
      .waiting-line {
        background-color: @main-color;
      }
    }
    .step-main {
      width: 100%;
      min-height: calc(@icon-width + 10px);
      padding-left: @icon-width;
      font-size: 12px;
      color: #888888;
      line-height: 17px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      .step-main-body {
        padding-bottom: 30px;
        padding-left: 5px;
        > div {
          margin-bottom: 5px;
        }
        .text-gray {
          color: #888888;
        }
        .text-black {
          color: #222222;
        }
        .text-main {
          color: @main-color;
        }
        .text-error {
          color: #ED664B;
        }
        .participants {
          height: 20px;
          font-size: 14px;
          line-height: 20px;
        }
        .result {
          height: 20px;
          font-size: 14px;
          line-height: 20px;
        }
        .comment {
          display: flex;
          .text {
            white-space: pre-line;
          }
        }
      }
    }
  }
}
</style>