workflow-track.vue 9.2 KB
Newer Older
wangcong committed
1 2 3 4
<template>
  <div>
    <div class="workflow-button" :style="{top: styleTop, right: styleRight}" @click="showDrawer = true">
      <div class="icon">
5 6
        <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>
wangcong committed
7 8 9 10 11 12 13 14 15 16 17 18
        </svg>
      </div>
    </div>
    <Drawer
      :transfer="false"
      title="审批轨迹"
      :closable="true"
      v-model="showDrawer"
      :width="styleDrawerWidth"
      :inner="true"
      :mask="false"
    >
19 20
      <div v-if="useSubTableSource">
        <div v-if="stagedSteps.length == 0"></div>
wangcong committed
21
        <div
22 23 24
          class="collapse-stage"
          v-for="stageData, k in stagedSteps"
          :key="stageData.stage"
wangcong committed
25
        >
26 27 28 29
          <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>
wangcong committed
30
          </div>
31
          <WorkflowTrackInfo v-show="expandMap[k]" :data="stageData" />
wangcong committed
32 33
        </div>
      </div>
34 35 36 37 38
      <div v-else>
        <div v-if="!data || data.length == 0">暂无数据</div>
        <WorkflowTrackInfo :data="data" />
      </div>
      
wangcong committed
39 40 41 42 43
    </Drawer>
  </div>
</template>

<script>
44 45
import { APPROVAL_TRACK_TABLE } from '../../constant'
import WorkflowTrackInfo from './workflow-track-info.vue'
wangcong committed
46 47

export default {
48 49 50
  components: {
    WorkflowTrackInfo
  },
wangcong committed
51 52 53 54 55 56 57 58 59 60
  data() {
    return {
      showDrawer: false,
      data: {
        "procState": 2,
        "startTime": "2021-10-12T07:28:04Z",
        "finishTime": "2021-10-13T02:15:40Z",
        "steps": [],
        "submitter": "ylq"
      },
61 62 63
      stagedSteps: [],
      expandMap: [],
      useSubTableSource: false,
wangcong committed
64 65 66 67 68 69 70 71 72 73 74 75 76
    }
  },
  props: {
    define: {
      type: Object,
      required: true,
    },
    context: {
      type: Object,
      default: () => { }
    }
  },
  methods:{
77 78 79
    toggleDetail(index) {
      this.expandMap[index] = !this.expandMap[index]
      this.expandMap = [...this.expandMap]
wangcong committed
80
    },
81 82 83 84 85 86 87
    getStageTitle(stage) {
      const stageMap = {
        '01': '项目立项',
        '02': '年初一上一下',
        '03': '年初二上二下',
        '04': '年中一上一下',
        '05': '年中二上二下',
wangcong committed
88
      }
89
      return stageMap[stage]
wangcong committed
90 91 92
    },
  },
  mounted() {
93 94
    const { tableName, subTableSource } = this.define.config
    if (subTableSource) {
95
      this.useSubTableSource = true
96 97 98 99
      const subTable = this.context.bill.getSubData(tableName)
      if (subTable instanceof Array) {
        this.data = subTable.map((obj) => {
          const operation = obj.getValue(APPROVAL_TRACK_TABLE.OPERATION)
100
          const currNode = obj.getValue(APPROVAL_TRACK_TABLE.CURRENT_NODE)
101 102
          const createTime = obj.getValue(APPROVAL_TRACK_TABLE.CREATE_TIME)

103 104 105
          return {
            state: 2,
            result:
106 107 108 109 110 111 112 113
              currNode == 99
              ? -2
              : operation == '提交'
              ? -1
              : operation == '同意'
              ? 1
              : operation == '驳回'
              ? 3
114
              : 4,
115
            actualOwner: obj.getValue(APPROVAL_TRACK_TABLE.CREATOR_FULL_NAME),
116 117
            createTime,
            timestamp: new Date(createTime).getTime(),
118 119 120
            completeTime: obj.getValue(APPROVAL_TRACK_TABLE.CREATE_TIME),
            comments: obj.getValue(APPROVAL_TRACK_TABLE.APPROVAL_COMMENT),
            title: obj.getValue(APPROVAL_TRACK_TABLE.NODE_NAME),
121
            stage: obj.getValue(APPROVAL_TRACK_TABLE.STAGE),
122 123
          }
        })
124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149
        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
          }
        }
150 151 152
      }
      return
    }
wangcong committed
153 154 155 156 157 158 159 160 161
    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) => {
162 163
      const formatTrack = (curTrack) => {
        if (!curTrack) return []
164 165 166 167 168
        curTrack.steps = curTrack.steps.reverse()
        curTrack.steps = curTrack.steps.map((step) => {
          if (step.subTasks && step.subTasks.length) {
            let participants = []
            let actualOwnerList = []
169
            let commentList = []
170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187
            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)
                }
              }
188 189 190
              if (task.comments) {
                commentList.push(task.comments)
              }
191 192 193 194 195 196 197 198 199 200 201 202
              const curResult = task.result || 0
              resultFlag |= 1 << curResult
            }

            step.result =
              resultFlag & 8
              ? 3
              : resultFlag & 1
              ? 0
              : 1

            rejectFlag && (step.state = 2)
203
            step.comments = commentList.join(';\n')
204 205 206 207 208
            step.participants = participants
            step.actualOwner = actualOwnerList.join('、')
          }
          return step
        })
209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238
        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 || []
      }

239 240 241 242 243 244 245 246 247 248
      res = res || []
      let count = 0
      for (let o of res) {
        if (o.procState == 1) {
          ;++count
        }
      }
      if (count > 1) {
        this.$Message.error('工作流数据异常')
      }
249 250 251 252
      this.data = []
      for (let i = res.length - 1; i >= 0; --i) {
        const o = res[i]
        this.data = this.data.concat(formatTrack(o))
wangcong committed
253
      }
254 255 256 257 258
      // 去掉中间的审批结束节点
      for (let i = 1; i < this.data.length; ++i) {
        if (this.data[i].result == -2) {
          this.data.splice(i, 1)
          ;--i
wangcong committed
259 260 261 262 263 264
        }
      }
    })
  },
  computed: {
    styleTop() {
265
      return this.define.layout.top || this.define.config.topDistance || '0px'
wangcong committed
266 267
    },
    styleRight() {
268
      return this.define.layout.right || this.define.config.rightDistance || '0px'
wangcong committed
269 270
    },
    styleDrawerWidth() {
271
      return this.define.layout.drawerWidth || this.define.config.drawerWidth || '400px'
wangcong committed
272 273 274 275 276 277 278 279 280 281 282
    },
  },
  beforeDestroy() {
  },
}
</script>

<style lang="less" scoped>
.workflow-button {
  cursor: pointer;
  position: absolute;
283
  z-index: 700;
284 285 286 287 288 289
  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;
wangcong committed
290
  .icon {
291 292 293
    width: 28px;
    height: 28px;
    margin-left: 11px;
wangcong committed
294 295 296 297 298 299 300 301 302 303 304 305 306
  }
  .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);
  }
}
307 308 309 310 311 312 313 314 315 316 317 318 319 320

.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;
wangcong committed
321 322 323
    }
  }
}
324 325


wangcong committed
326
</style>