n20-common-lib 2.22.32 → 2.22.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.22.32",
+  "version": "2.22.33",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/ApprovalRecord/approvalImgPro/index.vue

@@ -27,9 +27,10 @@
         :step="step"
         :format-tooltip="$options.filters.zoomFormat"
         style="width: 200px"
+        @input="applyZoom"
       />
       <el-button type="text" icon="el-icon-zoom-in" style="font-size: 18px" @click="scaleAdd" />
-      <span class="m-l-s m-r-s" style="display: inline-block; width: 38px; line-height: 38px">{{
+      <span class="m-l-s m-r-s" style="display: inline-block; width: 42px; line-height: 38px">{{
         zoomValue | zoomFormat
       }}</span>
       <svg
@@ -54,7 +55,7 @@
         ></path>
       </svg>
     </div>
-    <el-popover ref="title-pop" v-model="msgV" trigger="hover" placement="top">
+    <el-popover ref="title-pop" v-model="popoverVisible" trigger="hover" placement="top">
       <div class="activiti-msg">
         <div v-if="assigneeEnd" class="m-t-ss m-b-ss">
           <div class="flex-box flex-r">
@@ -84,7 +85,7 @@
         </div>
       </div>
     </el-popover>
-    <el-popover ref="addTask-pop" v-model="addTaskV" trigger="manual" placement="bottom">
+    <el-popover ref="addTask-pop" v-model="addTaskVisible" trigger="manual" placement="bottom">
       <div @click.stop>
         <div class="m-b el-dialog__title">{{ '加签流程' | $lc }}</div>
         <div class="p-a" style="text-align: center">
@@ -117,8 +118,8 @@
                 }"
                 :data-element-id="item.addTaskDefId"
                 :transform="`matrix(1 0 0 1 ${1 + i * 160} 1)`"
-                @mouseenter="(ev) => addElIn(item.addTaskDefId, ev)"
-                @mouseleave="msgV = false"
+                @mouseenter="(ev) => showTaskPopover(item.addTaskDefId, ev)"
+                @mouseleave="popoverVisible = false"
               >
                 <rect
                   x="0"
@@ -151,8 +152,14 @@
       </div>
     </el-popover>
 
-    <el-popover ref="child-pop" v-model="childV" popper-class="n20-approval-child" trigger="manual" placement="bottom">
-      <div v-if="childV" v-click-outside="clickOut">
+    <el-popover
+      ref="child-pop"
+      v-model="childVisible"
+      popper-class="n20-approval-child"
+      trigger="manual"
+      placement="bottom"
+    >
+      <div v-if="childVisible" v-click-outside="clickOut">
         <div>{{ childTitle }}</div>
         <child :data-pro="childDataPro" />
       </div>
@@ -181,8 +188,8 @@ export default {
     }
   },
   data() {
-    this.svgW = undefined
-    this.svgC = undefined
+    this.svgWrap = undefined
+    this.svgElement = undefined
     return {
       assignee: undefined,
       assigneeEnd: undefined,
@@ -192,21 +199,16 @@ export default {
       step: 0.1,
       zoomValue: 1,
       markerId: '',
-      msgV: false,
-      addTaskV: false,
+      popoverVisible: false,
+      addTaskVisible: false,
       addTaskList: [],
-      childV: false,
+      childVisible: false,
       childTitle: '',
       childDataPro: undefined
     }
   },
-  watch: {
-    zoomValue() {
-      this.scaleSvg()
-    }
-  },
   async mounted() {
-    this.svgW = this.$refs['activiti-svg-wrap']
+    this.svgWrap = this.$refs['activiti-svg-wrap']
     let {
       flowString,
       seqRecords,
@@ -226,82 +228,85 @@ export default {
     }
     this.setSvgAttrs(flowSvg)
     this.setPendingUserInfo(unApplayUserTaskCandidate)
-    try {
-      for (let k in addTask) {
-        let line = this.svgW.querySelector(`[data-element-id="${k}"] path`)
-        if (line) {
-          this.addNode(k, line, addTask[k])
-        }
-      }
-      for (let k in addTaskPre) {
-        let g = this.svgW.querySelector(`[data-element-id="${k}"]`)
-        if (g) {
-          this.addNode(k, g, addTaskPre[k], 'addTaskPre')
-        }
-      }
-
-      seqRecords.forEach((obj) => {
-        this.setTaskRecord(obj)
-      })
-
-      // 非加签节点添加事件
-      currentActivityIdList.forEach((currentActivityId) => {
-        let assignee = currAssMap[currentActivityId]
-        let assigneeEnd = taskDefIdMap[currentActivityId]
-        let task = this.svgW.querySelector(`[data-element-id="${currentActivityId}"]`)
-        if (task) {
-          task.classList.add('activiti-node-at')
-          if (!currentActivityId.includes('@addTaskType')) {
-            this.addEvent(task, { assignee, assigneeEnd }, 'pending')
-          }
-        }
-      })
-      for (let k in taskDefIdMap) {
-        if (!currentActivityIdList.includes(k)) {
-          let taskK = this.svgW.querySelector(`[data-element-id="${k}"]`)
-          if (taskK) {
-            if (!k.includes('@addTaskType')) {
-              this.addEvent(taskK, taskDefIdMap[k])
-              this.addChildEvent(taskK, taskDefIdMap[k])
-            }
-          }
-        }
-      }
-    } catch (error) {
-      console.warn('setTaskErr:', error)
-    }
-
-    let { default: panzoom } = await importG('panzoom', () => import(/*webpackChunkName: "panzoom"*/ 'panzoom'))
-
-    this.svgPanzoom = panzoom(this.svgC, {
-      maxZoom: this.max,
-      minZoom: this.min,
-      bounds: true,
-      boundsPadding: 0.1,
-      beforeWheel: function (e) {
-        return !e.ctrlKey
-      }
-    })
-    this.svgPanzoom.on('zoom', (e) => {
-      let { scale } = e.getTransform()
-      this.zoomValue = scale
-    })
-
+    this.bindTaskEvents({ currentActivityIdList, currAssMap, taskDefIdMap, addTask, addTaskPre, seqRecords })
+    await this.initPanzoom()
     document.body.addEventListener('click', this.addTaskFn)
   },
 
   deactivated() {
-    this.msgV = false
-    this.childV = false
-    this.addTaskV = false
+    this.popoverVisible = false
+    this.childVisible = false
+    this.addTaskVisible = false
   },
   beforeDestroy() {
-    this.msgV = false
-    this.childV = false
+    this.popoverVisible = false
+    this.childVisible = false
     this.svgPanzoom && this.svgPanzoom.dispose()
     document.body.removeEventListener('click', this.addTaskFn)
   },
   methods: {
+    bindTaskEvents({ currentActivityIdList, currAssMap, taskDefIdMap, addTask, addTaskPre, seqRecords }) {
+      try {
+        for (let k in addTask) {
+          let line = this.svgWrap.querySelector(`[data-element-id="${k}"] path`)
+          if (line) {
+            this.addNode(k, line, addTask[k])
+          }
+        }
+        for (let k in addTaskPre) {
+          let g = this.svgWrap.querySelector(`[data-element-id="${k}"]`)
+          if (g) {
+            this.addNode(k, g, addTaskPre[k], 'addTaskPre')
+          }
+        }
+
+        seqRecords.forEach((obj) => {
+          this.setTaskRecord(obj)
+        })
+
+        currentActivityIdList.forEach((currentActivityId) => {
+          let assignee = currAssMap[currentActivityId]
+          let assigneeEnd = taskDefIdMap[currentActivityId]
+          let task = this.svgWrap.querySelector(`[data-element-id="${currentActivityId}"]`)
+          if (task) {
+            task.classList.add('activiti-node-at')
+            if (!currentActivityId.includes('@addTaskType')) {
+              this.addEvent(task, { assignee, assigneeEnd }, 'pending')
+            }
+          }
+        })
+        for (let k in taskDefIdMap) {
+          if (!currentActivityIdList.includes(k)) {
+            let taskK = this.svgWrap.querySelector(`[data-element-id="${k}"]`)
+            if (taskK) {
+              if (!k.includes('@addTaskType')) {
+                this.addEvent(taskK, taskDefIdMap[k])
+                this.addChildEvent(taskK, taskDefIdMap[k])
+              }
+            }
+          }
+        }
+      } catch (error) {
+        console.warn('setTaskErr:', error)
+      }
+    },
+    async initPanzoom() {
+      let { default: panzoom } = await importG('panzoom', () => import(/*webpackChunkName: "panzoom"*/ 'panzoom'))
+
+      this.svgPanzoom = panzoom(this.svgElement, {
+        maxZoom: this.max,
+        minZoom: this.min,
+        bounds: true,
+        boundsPadding: 0.1,
+        beforeWheel: function (e) {
+          return !e.ctrlKey
+        }
+      })
+      this.svgPanzoom.on('zoom', (e) => {
+        let { scale } = e.getTransform()
+        this.zoomValue = scale
+      })
+    },
     // 导出
     uploadList(assigneeEnd) {
       axios
@@ -328,12 +333,12 @@ export default {
         })
     },
     addTaskFn() {
-      this.addTaskV = false
+      this.addTaskVisible = false
     },
     setPendingUserInfo(data) {
       if (data) {
         Object.keys(data).forEach((id) => {
-          let task = this.svgW.querySelector(`[data-element-id="${id}"]`)
+          let task = this.svgWrap.querySelector(`[data-element-id="${id}"]`)
           if (task) {
             this.addEvent(task, { taskCandidate: data[id] }, 'unApply')
           }
@@ -341,31 +346,31 @@ export default {
       }
     },
     setSvgAttrs(str) {
-      this.svgW.innerHTML = str
-      this.svgC = this.svgW.querySelector('svg')
-      let width = this.svgC.getAttribute('width')
-      let height = this.svgC.getAttribute('height')
-      let viewBox = this.svgC.getAttribute('viewBox').split(' ')
+      this.svgWrap.innerHTML = str
+      this.svgElement = this.svgWrap.querySelector('svg')
+      let width = this.svgElement.getAttribute('width')
+      let height = this.svgElement.getAttribute('height')
+      let viewBox = this.svgElement.getAttribute('viewBox').split(' ')
       viewBox = [Number(viewBox[0]) - 16, Number(viewBox[1]) - 16, Number(viewBox[2]) + 32, Number(viewBox[3]) + 32]
       viewBox = viewBox.join(' ')
 
-      this.svgC.setAttribute('width', Number(width) + 32)
-      this.svgC.setAttribute('height', Number(height) + 32)
-      this.svgC.setAttribute('viewBox', viewBox)
+      this.svgElement.setAttribute('width', Number(width) + 32)
+      this.svgElement.setAttribute('height', Number(height) + 32)
+      this.svgElement.setAttribute('viewBox', viewBox)
 
-      let marker = this.svgC.querySelector('defs marker')
+      let marker = this.svgElement.querySelector('defs marker')
       marker && (this.markerId = marker.getAttribute('id'))
     },
     setTaskRecord(obj) {
       let { resouceTaskDefId: from, targetTaskDefId: to, seqDefid: line, type: type } = obj
       if (type === '0') {
-        this.svgW.querySelector(`[data-element-id="${from}"]`).classList.add('activiti-node-achieve')
-        this.svgW.querySelector(`[data-element-id="${to}"]`).classList.add('activiti-node-achieve')
-        this.svgW.querySelector(`[data-element-id="${line}"]`).classList.add('activiti-line-achieve')
+        this.svgWrap.querySelector(`[data-element-id="${from}"]`).classList.add('activiti-node-achieve')
+        this.svgWrap.querySelector(`[data-element-id="${to}"]`).classList.add('activiti-node-achieve')
+        this.svgWrap.querySelector(`[data-element-id="${line}"]`).classList.add('activiti-line-achieve')
       } else {
-        this.svgW.querySelector(`[data-element-id="${from}"]`).classList.add('activiti-node-reject')
+        this.svgWrap.querySelector(`[data-element-id="${from}"]`).classList.add('activiti-node-reject')
         if (type === '1') {
-          this.svgW.querySelector(`[data-element-id="${to}"]`).classList.add('activiti-node-reject')
+          this.svgWrap.querySelector(`[data-element-id="${to}"]`).classList.add('activiti-node-reject')
           this.setRejectLink(from, to, $lc('驳回至申请人'))
         } else if (type === '2') {
           this.setRejectLink(from, to, $lc('驳回至上一步'))
@@ -400,30 +405,14 @@ export default {
       path.setAttribute('class', 'activiti-line-reject')
       path.setAttribute('d', d)
       path.style.markerEnd = `url('#${this.markerId}')`
-      this.svgC.appendChild(path)
+      this.svgElement.appendChild(path)
 
       if (msg) {
-        let text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
-        text.setAttribute('class', 'activiti-text-reject')
         if (fromXC !== toXC) {
-          text.setAttribute('x', (fromXC + toXC) / 2)
-          text.setAttribute('y', oTop + 6)
+          this.addSvgLabel('activiti-text-reject', (fromXC + toXC) / 2, oTop + 6, msg, false)
         } else {
-          text.setAttribute('y', (fromYC + toYC) / 2)
-          text.setAttribute('x', oRight + 8)
-          text.setAttribute('writing-mode', 'tb')
+          this.addSvgLabel('activiti-text-reject', oRight + 8, (fromYC + toYC) / 2, msg, true)
         }
-        text.textContent = msg
-        this.svgC.appendChild(text)
-
-        let textO = text.getBBox()
-        let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
-        rect.setAttribute('class', 'activiti-text-bg-reject')
-        rect.setAttribute('x', textO.x)
-        rect.setAttribute('y', textO.y)
-        rect.setAttribute('width', textO.width)
-        rect.setAttribute('height', textO.height)
-        this.svgC.insertBefore(rect, text)
       }
     },
     setPropelLink(from, to, msg) {
@@ -448,34 +437,38 @@ export default {
       path.setAttribute('class', 'activiti-line-propel')
       path.setAttribute('d', d)
       path.style.markerEnd = `url('#${this.markerId}')`
-      this.svgC.appendChild(path)
+      this.svgElement.appendChild(path)
 
       if (msg) {
-        let text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
-        text.setAttribute('class', 'activiti-text-propel')
         if (fromXC !== toXC) {
-          text.setAttribute('x', (fromXC + toXC) / 2)
-          text.setAttribute('y', oBottom + 6)
+          this.addSvgLabel('activiti-text-propel', (fromXC + toXC) / 2, oBottom + 6, msg, false)
         } else {
-          text.setAttribute('y', (fromYC + toYC) / 2)
-          text.setAttribute('x', oLeft + 8)
-          text.setAttribute('writing-mode', 'tb')
+          this.addSvgLabel('activiti-text-propel', oLeft + 8, (fromYC + toYC) / 2, msg, true)
         }
-        text.textContent = msg
-        this.svgC.appendChild(text)
-
-        let textO = text.getBBox()
-        let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
-        rect.setAttribute('class', 'activiti-text-bg-reject')
-        rect.setAttribute('x', textO.x)
-        rect.setAttribute('y', textO.y)
-        rect.setAttribute('width', textO.width)
-        rect.setAttribute('height', textO.height)
-        this.svgC.insertBefore(rect, text)
       }
     },
+    addSvgLabel(textClass, x, y, msg, vertical) {
+      let text = document.createElementNS('http://www.w3.org/2000/svg', 'text')
+      text.setAttribute('class', textClass)
+      text.setAttribute('x', x)
+      text.setAttribute('y', y)
+      if (vertical) {
+        text.setAttribute('writing-mode', 'tb')
+      }
+      text.textContent = msg
+      this.svgElement.appendChild(text)
+
+      let textO = text.getBBox()
+      let rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
+      rect.setAttribute('class', 'activiti-text-bg-reject')
+      rect.setAttribute('x', textO.x)
+      rect.setAttribute('y', textO.y)
+      rect.setAttribute('width', textO.width)
+      rect.setAttribute('height', textO.height)
+      this.svgElement.insertBefore(rect, text)
+    },
     getElRect(id) {
-      let g = this.svgW.querySelector(`[data-element-id="${id}"]`)
+      let g = this.svgWrap.querySelector(`[data-element-id="${id}"]`)
       let rect = {
         with: 100,
         height: 80,
@@ -556,7 +549,7 @@ export default {
         }" stroke-width="1" stroke="#666" fill="none"></line>
  `
         circleG.innerHTML = cEl
-        this.svgC.appendChild(circleG)
+        this.svgElement.appendChild(circleG)
 
         circleG.addEventListener('click', (el) => {
           if (el.currentTarget.getAttribute('class').includes('activiti-node-reject')) {
@@ -572,17 +565,17 @@ export default {
           })
 
           this.addTaskList = _list
-          this.addTaskV = false
+          this.addTaskVisible = false
           this.$nextTick(() => {
             this.$refs['addTask-pop'].doDestroy()
             this.$refs['addTask-pop'].referenceElm = circleG
-            this.addTaskV = true
+            this.addTaskVisible = true
           })
           el.stopPropagation()
         })
       }
     },
-    addElIn(id, ev) {
+    showTaskPopover(id, ev) {
       if (this.dataPro.currentActivityIdList.some((cId) => cId === id) /*待审批*/) {
         this.assignee = this.dataPro.currAssMap[id]
         this.assigneeEnd = this.dataPro.taskDefIdMap[id]
@@ -590,7 +583,7 @@ export default {
         this.$nextTick(() => {
           this.$refs['title-pop'].doDestroy()
           this.$refs['title-pop'].referenceElm = ev.currentTarget
-          this.msgV = true
+          this.popoverVisible = true
         })
       } else if (this.dataPro.taskDefIdMap[id] /*已审批*/) {
         this.assigneeEnd = this.dataPro.taskDefIdMap[id]
@@ -600,7 +593,7 @@ export default {
           })
           this.$refs['title-pop'].doDestroy()
           this.$refs['title-pop'].referenceElm = ev.currentTarget
-          this.msgV = true
+          this.popoverVisible = true
         })
       }
     },
@@ -625,11 +618,11 @@ export default {
           })
           this.$refs['title-pop'].doDestroy()
           this.$refs['title-pop'].referenceElm = task
-          this.msgV = true
+          this.popoverVisible = true
         })
       })
       task.addEventListener('mouseleave', () => {
-        this.msgV = false
+        this.popoverVisible = false
       })
     },
     addChildEvent(task, list) {
@@ -647,7 +640,7 @@ export default {
       })
 
       if (elPoppers.length === 1) {
-        this.childV = !this.childV
+        this.childVisible = !this.childVisible
       }
     },
     getFlowData(procInstId, task) {
@@ -675,129 +668,28 @@ export default {
             res.data['addTaskPre'] = addTaskPre
           }
           this.childDataPro = res.data
-          this.childV = !this.childV
+          this.childVisible = !this.childVisible
           this.$refs['child-pop'].doDestroy()
           this.$refs['child-pop'].referenceElm = task
         })
     },
     scaleMinus() {
-      let newVal = this.zoomValue - this.step
-      if (this.min <= newVal) {
-        this.zoomValue = newVal
-      } else {
-        this.zoomValue = this.min
-      }
+      this.zoomValue = Math.max(this.min, this.zoomValue - this.step)
+      this.applyZoom()
     },
     scaleAdd() {
-      let newVal = this.zoomValue + this.step
-      if (newVal < this.max) {
-        this.zoomValue = newVal
-      } else {
-        this.zoomValue = this.max
-      }
+      this.zoomValue = Math.min(this.max, this.zoomValue + this.step)
+      this.applyZoom()
     },
     scaleReset() {
       this.zoomValue = 1
-      this.scaleSvg()
+      this.applyZoom()
     },
-    scaleSvg() {
+    applyZoom() {
       this.svgPanzoom && this.svgPanzoom.zoomAbs(0, 0, this.zoomValue)
     }
   }
 }
-
-/*
-setRejectLink(from, to) {
-  console.log(this.getElRect(from), 444)
-  console.log(this.getElRect(to), 444)
-  const fromO = this.getElRect(from)
-  const toO = this.getElRect(to)
-  let direction = undefined
-  if (fromO.left + fromO.with < toO.left) {
-    if (fromO.top + fromO.height < toO.top) {
-      direction = '↘'
-    } else if (fromO.top > toO.top + toO.height) {
-      direction = '↗'
-    } else {
-      direction = '→'
-    }
-  } else if (fromO.left - fromO.with > toO.left) {
-    if (fromO.top + fromO.height < toO.top) {
-      direction = '↙'
-    } else if (fromO.top > toO.top + toO.height) {
-      direction = '↖'
-    } else {
-      direction = '←'
-    }
-  } else {
-    if (fromO.top < toO.top) {
-      direction = '↓'
-    } else {
-      direction = '↑'
-    }
-  }
-  console.log(direction)
-  let d = ''
-  switch (direction) {
-    case '↘':
-      d = `M${fromO.left + fromO.with / 2},${fromO.top + fromO.height}
-      L${fromO.left + fromO.with / 2},${(fromO.top + fromO.height + toO.top) / 2}
-      L${toO.left + toO.with / 2},${(fromO.top + fromO.height + toO.top) / 2}
-      L${toO.left + toO.with / 2},${toO.top}`
-      break
-    case '↗':
-      d = `M${fromO.left + fromO.with / 2},${fromO.top}
-      L${fromO.left + fromO.with / 2},${(fromO.top + toO.top + toO.height) / 2}
-      L${toO.left + toO.with / 2},${(fromO.top + toO.top + toO.height) / 2}
-      L${toO.left + toO.with / 2},${toO.top + toO.height}`
-      break
-    case '→':
-      d = `M${fromO.left + fromO.with},${fromO.top + fromO.height / 2}
-      L${(fromO.left + fromO.with + toO.left) / 2},${fromO.top + fromO.height / 2}
-      L${(fromO.left + fromO.with + toO.left) / 2},${toO.top + toO.height / 2}
-      L${toO.left},${toO.top + toO.height / 2}`
-      break
-    case '↙':
-      d = `M${fromO.left + fromO.with / 2},${fromO.top + fromO.height}
-      L${fromO.left + fromO.with / 2},${(fromO.top + fromO.height + toO.top) / 2}
-      L${toO.left + toO.with / 2},${(fromO.top + fromO.height + toO.top) / 2}
-      L${toO.left + toO.with / 2},${toO.top}`
-      break
-    case '↖':
-      d = `M${fromO.left + fromO.with / 2},${fromO.top}
-      L${fromO.left + fromO.with / 2},${(fromO.top + toO.top + toO.height) / 2}
-      L${toO.left + toO.with / 2},${(fromO.top + toO.top + toO.height) / 2}
-      L${toO.left + toO.with / 2},${toO.top + toO.height}`
-      break
-    case '←':
-      d = `M${fromO.left},${fromO.top + fromO.height / 2}
-      L${(fromO.left + toO.left + toO.with) / 2},${fromO.top + fromO.height / 2}
-      L${(fromO.left + toO.left + toO.with) / 2},${toO.top + toO.height / 2}
-      L${toO.left + toO.with},${toO.top + toO.height / 2}`
-      break
-    case '↓':
-      d = `M${fromO.left + fromO.with / 2},${fromO.top + fromO.height}
-      L${fromO.left + fromO.with / 2},${(fromO.top + fromO.height + toO.top) / 2}
-      L${toO.left + toO.with / 2},${(fromO.top + fromO.height + toO.top) / 2}
-      L${toO.left + toO.with / 2},${toO.top}`
-      break
-    case '↑':
-      d = `M${fromO.left + fromO.with / 2},${fromO.top}
-      L${fromO.left + fromO.with / 2},${(fromO.top + toO.top + toO.height) / 2}
-      L${toO.left + toO.with / 2},${(fromO.top + toO.top + toO.height) / 2}
-      L${toO.left + toO.with / 2},${toO.top + toO.height}`
-      break
-  }
-  d = d.replace(/[\s\n]+/g, ' ')
-
-  // = `M ${fromO.left},${fromO.top}L${toO.left},${toO.top}`
-
-  let path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
-  path.setAttribute('class', 'activiti-line-reject')
-  path.setAttribute('d', d)
-  this.svgC.appendChild(path)
-},
-*/
 </script>
 
 <style>