n20-common-lib 2.8.18 → 2.8.19

package/package.json

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

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

@@ -0,0 +1,678 @@
+<template>
+  <div class="n20-approval-img-por">
+    <svg v-pre style="display: none">
+      <symbol id="symbol_node_User">
+        <g transform="translate(8, 6)">
+          <path
+            d="M8.62859063,8.46867126 L8.63329414,8.24055098 C9.71745339,7.48328573 10.2442466,6.14748866 10.2442466,4.16966236 C10.2442466,2.26238871 9.05190661,1.12413909 7.0529145,1.12413909 L6.94473376,1.12413909 C4.9480934,1.12413909 3.75340165,2.26238871 3.75340165,4.16966236 C3.75340165,6.13808165 4.28489838,7.47387871 5.37846464,8.23584747 L5.37846464,8.4663195 C3.55820594,8.71090206 1.73324375,9.43524274 1.73324375,10.5429195 C1.73324375,12.0927264 3.50411558,12.8782127 6.99882412,12.8782127 C10.4935327,12.8782127 12.2644045,12.0927264 12.2644045,10.5429195 C12.2644045,9.4375945 10.4441458,8.71325383 8.62859063,8.46867126 Z"
+          />
+        </g>
+      </symbol>
+      <symbol id="symbol_node_Department">
+        <g transform="translate(8,6)">
+          <path
+            d="M7.04500001,8.5975 C7.04341917,8.43233903 7.11928944,8.27597225 7.25,8.175 C8.13981911,7.5076991 8.659503,6.45719523 8.65,5.34499999 L8.65,3.7075 C8.65,1.93500001 7.2825,0.500000006 5.59250001,0.500000006 L5.0925,0.500000006 C3.40500001,0.500000006 2.03749999,1.93500001 2.03749999,3.7075 L2.03749999,5.34499999 C2.02858505,6.45763799 2.54923878,7.50822626 3.44000001,8.175 C3.56977164,8.27648552 3.64467827,8.43277221 3.6425,8.5975 C3.64849065,8.83992543 3.4853373,9.05399926 3.25,9.1125 C1.335,9.50000001 0,10.4025 0,11.4525 C0,12.86 2.3925,14 5.3425,14 C8.29249999,14 10.6875,12.86 10.6875,11.4525 C10.6875,10.4025 9.35250001,9.5025 7.4375,9.1125 C7.20216271,9.05399926 7.03900935,8.83992543 7.04500001,8.5975 Z M11.84,5.75000001 C11.7079451,5.71733762 11.6061675,5.61208512 11.5779553,5.47900848 C11.549743,5.34593185 11.6000579,5.20843574 11.7075,5.125 C12.3007336,4.67960715 12.6476383,3.97930492 12.6425,3.2375 L12.6425,2.1375 C12.6690444,0.984062183 11.7559203,0.0272961173 10.6025,0 L10.2725,0 C9.40687566,0.0115235348 8.64254102,0.567494343 8.365,1.3875 C8.87621704,2.05264244 9.15230637,2.86860072 9.15,3.7075 L9.15,5.10250001 L9.1675,5.11749999 C9.26100971,5.18903404 9.3126331,5.30253015 9.30510153,5.42002253 C9.29756997,5.53751492 9.23187787,5.6434908 9.13,5.7025 C9.04235466,6.75161502 8.54690721,7.72455893 7.75,8.4125 C8.58510108,8.82290154 9.50732647,9.0245043 10.4375,9 C12.405,9 14,8.24999999 14,7.3025 C14,6.6025 13.11,6 11.84,5.75000001 Z"
+          />
+        </g>
+      </symbol>
+    </svg>
+    <div ref="activiti-svg-wrap" class="activiti-svg-wrap"></div>
+    <div class="flex-box activiti-svg-zoom">
+      <el-button type="text" icon="el-icon-zoom-out" style="font-size: 18px" @click="scaleMinus" />
+      <el-slider
+        v-model="zoomValue"
+        class="m-l m-r"
+        :min="min"
+        :max="max"
+        :step="step"
+        :format-tooltip="$options.filters.zoomFormat"
+        style="width: 200px"
+      />
+      <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">{{
+        zoomValue | zoomFormat
+      }}</span>
+      <el-button type="text" icon="el-icon-full-screen" style="font-size: 16px" @click="scaleReset" />
+    </div>
+    <el-popover ref="title-pop" v-model="msgV" trigger="manual" placement="top">
+      <div class="activiti-msg">
+        <div v-if="assigneeEnd" class="m-t-ss m-b-ss">
+          <table cellspacing="0" style="border-collapse: collapse; min-width: 460px">
+            <tr>
+              <td class="text-c">{{ '已审批人' | $lc }}</td>
+              <td class="text-c">{{ '审批类型' | $lc }}</td>
+              <td class="text-c">{{ '审批意见' | $lc }}</td>
+              <td class="text-c">{{ '审批时间' | $lc }}</td>
+            </tr>
+            <tr v-for="(item, i) in assigneeEnd" :key="i">
+              <td>{{ item.assignee }}</td>
+              <td class="text-c">{{ item.optResult }}</td>
+              <td>{{ item.suggestion }}</td>
+              <td>{{ item.endTime }}</td>
+            </tr>
+          </table>
+        </div>
+        <div v-if="assignee" :class="{ 'm-t-s': assigneeEnd }">{{ assignee }}</div>
+
+        <div v-if="taskCandidate" class="m-t-ss m-b-ss">
+          <div v-if="taskCandidate.cltNames.length">待审批单位：{{ taskCandidate.cltNames.join('、') }}</div>
+          <div v-if="taskCandidate.roleNames.length">待审批角色：{{ taskCandidate.roleNames.join('、') }}</div>
+          <div v-if="taskCandidate.unames.length">待审批人：{{ taskCandidate.unames.join('、') }}</div>
+        </div>
+      </div>
+    </el-popover>
+    <el-popover ref="addTask-pop" v-model="addTaskV" trigger="manual" placement="bottom">
+      <div @click.stop>
+        <div class="m-b el-dialog__title">{{ '加签流程' | $lc }}</div>
+        <div class="p-a" style="text-align: center">
+          <svg v-if="addTaskList.length" :width="addTaskList.length * 160 - 50" height="82">
+            <template v-for="(item, i) in addTaskList">
+              <g
+                v-if="i > 0"
+                :key="i + '-flow'"
+                class="djs-element djs-connection activiti-line-achieve"
+                :class="{
+                  'activiti-line-reject': item.examineType === 'reject'
+                }"
+                :data-element-id="item.addTaskDefId + '-flow'"
+                :transform="`matrix(1 0 0 1 ${i * 160 - 60} 1)`"
+              >
+                <path
+                  d="m0,40L60,40"
+                  style="fill: none; stroke-width: 1px; stroke: black; stroke-linejoin: round"
+                  :style="{
+                    'marker-end': `url(#${markerId})`
+                  }"
+                />
+              </g>
+              <g
+                :key="i"
+                class="djs-element djs-shape activiti-node-achieve"
+                :class="{
+                  'activiti-node-at': dataPro.currentActivityIdList.includes(item.addTaskDefId),
+                  'activiti-node-reject': item.examineType === 'reject'
+                }"
+                :data-element-id="item.addTaskDefId"
+                :transform="`matrix(1 0 0 1 ${1 + i * 160} 1)`"
+                @mouseenter="(ev) => addElIn(item.addTaskDefId, ev)"
+                @mouseleave="msgV = false"
+              >
+                <rect
+                  x="0"
+                  y="0"
+                  width="100"
+                  height="80"
+                  rx="10"
+                  ry="10"
+                  style="stroke: black; stroke-width: 1px; fill: white; fill-opacity: 0.95"
+                />
+                <text
+                  lineheight="1.2"
+                  class="djs-label"
+                  style="
+                    font-family: Arial, sans-serif;
+                    font-size: 12px;
+                    font-weight: normal;
+                    text-anchor: middle;
+                    fill: black;
+                  "
+                >
+                  <tspan x="50" y="43.6">{{ item.taskName.slice(0, 7) }}</tspan>
+                  <tspan x="50" y="58">{{ item.taskName.slice(7) }}</tspan>
+                </text>
+                <use xlink:href="#symbol_node_User" style="fill: rgb(102, 102, 102)" />
+              </g>
+            </template>
+          </svg>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+import { $lc } from '../../../utils/i18n/index'
+import importG from '../../../utils/importGlobal.js'
+export default {
+  filters: {
+    zoomFormat(val) {
+      return parseInt(val * 10) + '0%'
+    }
+  },
+  props: {
+    dataPro: {
+      type: Object,
+      default: undefined
+    }
+  },
+  data() {
+    this.svgW = undefined
+    this.svgC = undefined
+    return {
+      assignee: undefined,
+      assigneeEnd: undefined,
+      taskCandidate: undefined,
+      min: 0.4,
+      max: 2,
+      step: 0.1,
+      zoomValue: 1,
+      markerId: '',
+      msgV: false,
+      addTaskV: false,
+      addTaskList: []
+    }
+  },
+  watch: {
+    zoomValue() {
+      this.scaleSvg()
+    }
+  },
+  async mounted() {
+    this.svgW = this.$refs['activiti-svg-wrap']
+    let {
+      flowString,
+      seqRecords,
+      taskDefIdMap = {},
+      currAssMap = {},
+      currentActivityIdList = [],
+      addTask = {},
+      addTaskPre = {},
+      unApplayUserTaskCandidate = {}
+    } = this.dataPro
+    let flowSvg = flowString
+    if (flowString.includes('bpmn2:definitions')) {
+      let { default: bpmn2svg } = await importG('bpmn2svg', () =>
+        import(/*webpackChunkName: "bpmn2svg"*/ '../../../../bpmn2svg/bpmn2svg.umd.js')
+      )
+      flowSvg = await bpmn2svg(flowString)
+    }
+    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])
+            }
+          }
+        }
+      }
+    } 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
+    })
+
+    document.body.addEventListener('click', this.addTaskFn)
+  },
+
+  deactivated() {
+    this.msgV = false
+    this.addTaskV = false
+  },
+  beforeDestroy() {
+    this.msgV = false
+    this.svgPanzoom && this.svgPanzoom.dispose()
+    document.body.removeEventListener('click', this.addTaskFn)
+  },
+  methods: {
+    addTaskFn() {
+      this.addTaskV = false
+    },
+    setPendingUserInfo(data) {
+      if (data) {
+        Object.keys(data).forEach((id) => {
+          let task = this.svgW.querySelector(`[data-element-id="${id}"]`)
+          if (task) {
+            this.addEvent(task, { taskCandidate: data[id] }, 'unApply')
+          }
+        })
+      }
+    },
+    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(' ')
+      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)
+
+      let marker = this.svgC.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')
+      } else {
+        this.svgW.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.setRejectLink(from, to, $lc('驳回至发起人'))
+        } else if (type === '2') {
+          this.setRejectLink(from, to, $lc('驳回至上一步'))
+        } else if (type === '3') {
+          this.setRejectLink(from, to, $lc('驳回至'))
+        } else if (type === '4') {
+          this.setPropelLink(from, to, $lc('推进至'))
+        }
+      }
+    },
+    setRejectLink(from, to, msg) {
+      const fromO = this.getElRect(from)
+      const toO = this.getElRect(to)
+      let oTop = Math.min(fromO.top, toO.top) - 12
+      let fromXC = fromO.left + fromO.with / 2
+      let toXC = toO.left + toO.with / 2
+
+      let oRight = Math.max(fromO.right, toO.right) + 12
+      let fromYC = fromO.top + fromO.height / 2
+      let toYC = toO.top + toO.height / 2
+
+      let d
+      if (fromXC !== toXC) {
+        d = `M${fromXC},${fromO.top} L${fromXC},${oTop} L${toXC},${oTop} L${toXC},${toO.top}`
+      } else {
+        d = `M${fromO.right},${fromYC} L${oRight},${fromYC} L${oRight},${toYC} L${toO.right},${toYC}`
+      }
+
+      let path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      path.setAttribute('class', 'activiti-line-reject')
+      path.setAttribute('d', d)
+      path.style.markerEnd = `url('#${this.markerId}')`
+      this.svgC.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)
+        } else {
+          text.setAttribute('y', (fromYC + toYC) / 2)
+          text.setAttribute('x', oRight + 8)
+          text.setAttribute('writing-mode', 'tb')
+        }
+        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) {
+      const fromO = this.getElRect(from)
+      const toO = this.getElRect(to)
+      let oBottom = Math.min(fromO.bottom, toO.bottom) + 12
+      let fromXC = fromO.left + fromO.with / 2
+      let toXC = toO.left + toO.with / 2
+
+      let oLeft = Math.max(fromO.left, toO.left) - 12
+      let fromYC = fromO.top + fromO.height / 2
+      let toYC = toO.top + toO.height / 2
+
+      let d
+      if (fromXC !== toXC) {
+        d = `M${fromXC},${fromO.bottom} L${fromXC},${oBottom} L${toXC},${oBottom} L${toXC},${toO.bottom}`
+      } else {
+        d = `M${fromO.left},${fromYC} L${oLeft},${fromYC} L${oLeft},${toYC} L${toO.left},${toYC}`
+      }
+
+      let path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      path.setAttribute('class', 'activiti-line-propel')
+      path.setAttribute('d', d)
+      path.style.markerEnd = `url('#${this.markerId}')`
+      this.svgC.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)
+        } else {
+          text.setAttribute('y', (fromYC + toYC) / 2)
+          text.setAttribute('x', oLeft + 8)
+          text.setAttribute('writing-mode', 'tb')
+        }
+        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)
+      }
+    },
+    getElRect(id) {
+      let g = this.svgW.querySelector(`[data-element-id="${id}"]`)
+      let rect = {
+        with: 100,
+        height: 80,
+        left: undefined,
+        top: undefined
+      }
+      if (id.includes('@addTaskType')) {
+        rect = {
+          with: 20,
+          height: 20,
+          left: Number(g.getAttribute('data-element-left')),
+          top: Number(g.getAttribute('data-element-top'))
+        }
+        rect.right = rect.left + rect.with
+        rect.bottom = rect.top + rect.height
+        return rect
+      }
+
+      if (g.querySelector('circle')) {
+        rect.with = 36
+        rect.height = 36
+      }
+      let matrix = g.getAttribute('transform')
+      if (matrix) {
+        matrix = matrix.replace(/matrix\(|\)/g, '')
+        matrix = matrix.split(' ')
+        rect.left = Number(matrix[4])
+        rect.top = Number(matrix[5])
+        rect.right = rect.left + rect.with
+        rect.bottom = rect.top + rect.height
+      }
+      return rect
+    },
+    addNode(id, line, list, addType) {
+      let centreD
+
+      // 前加签,"加号"位置
+      if (addType === 'addTaskPre') {
+        let matrix = line.getAttribute('transform')
+        if (matrix) {
+          matrix = matrix.replace(/matrix\(|\)/g, '')
+          matrix = matrix.split(' ')
+          let left = Number(matrix[4])
+          let top = Number(matrix[5])
+          centreD = [left + 100, top]
+        }
+      } else {
+        let D = line.getAttribute('d')
+        let Ds = D.replace(/\s+/g, '')
+          .split(/[A-z]/)
+          .filter((d) => !!d)
+
+        if (Ds.length === 2) {
+          let Ds1 = Ds[0].split(',')
+          let Ds2 = Ds[1].split(',')
+          centreD = [(Number(Ds1[0]) + Number(Ds2[0])) / 2, (Number(Ds1[1]) + Number(Ds2[1])) / 2]
+        } else if (Ds.length > 2) {
+          let Ds2 = Ds[1].split(',')
+          centreD = [Number(Ds2[0]), Number(Ds2[1])]
+        }
+      }
+
+      if (centreD) {
+        let circleG = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+        circleG.classList.add('activiti-node-achieve')
+        circleG.setAttribute('data-element-left', centreD[0] - 10)
+        circleG.setAttribute('data-element-top', centreD[1] - 10)
+
+        circleG.setAttribute('data-element-id', list?.[0]?.addTaskDefId || '')
+        let cEl = `<circle class="add-and" r="10" cx="${centreD[0]}"  cy="${
+          centreD[1]
+        }" stroke-width="1" stroke="#666" fill="#fff"></circle>
+<line class="add-and" x1="${centreD[0] - 7}" y1="${centreD[1]}" x2="${centreD[0] + 7}" y2="${
+          centreD[1]
+        }" stroke-width="1" stroke="#666" fill="none"></line>
+<line class="add-and" x1="${centreD[0]}" y1="${centreD[1] - 7}" x2="${centreD[0]}" y2="${
+          centreD[1] + 7
+        }" stroke-width="1" stroke="#666" fill="none"></line>
+ `
+        circleG.innerHTML = cEl
+        this.svgC.appendChild(circleG)
+
+        circleG.addEventListener('click', (el) => {
+          if (el.currentTarget.getAttribute('class').includes('activiti-node-reject')) {
+            list.forEach((c) => (c.examineType = 'reject'))
+          }
+
+          // 合并驳回再次加签的节点
+          let _list = []
+          list.forEach((item) => {
+            if (!_list.some((_item) => _item.addTaskDefId === item.addTaskDefId)) {
+              _list.push(item)
+            }
+          })
+
+          this.addTaskList = _list
+          this.addTaskV = false
+          this.$nextTick(() => {
+            this.$refs['addTask-pop'].doDestroy()
+            this.$refs['addTask-pop'].referenceElm = circleG
+            this.addTaskV = true
+          })
+          el.stopPropagation()
+        })
+      }
+    },
+    addElIn(id, ev) {
+      if (this.dataPro.currentActivityIdList.some((cId) => cId === id) /*待审批*/) {
+        this.assignee = this.dataPro.currAssMap[id]
+        this.assigneeEnd = this.dataPro.taskDefIdMap[id]
+
+        this.$nextTick(() => {
+          this.$refs['title-pop'].doDestroy()
+          this.$refs['title-pop'].referenceElm = ev.currentTarget
+          this.msgV = true
+        })
+      } else if (this.dataPro.taskDefIdMap[id] /*已审批*/) {
+        this.assigneeEnd = this.dataPro.taskDefIdMap[id]
+        this.$nextTick(() => {
+          this.$refs['title-pop'].doDestroy()
+          this.$refs['title-pop'].referenceElm = ev.currentTarget
+          this.msgV = true
+        })
+      }
+    },
+    addEvent(task, list, type) {
+      task.addEventListener('mouseenter', () => {
+        if (type === 'pending') {
+          this.assignee = list.assignee
+          this.assigneeEnd = list.assigneeEnd
+          this.taskCandidate = undefined
+        } else if (type === 'unApply') {
+          this.assignee = undefined
+          this.assigneeEnd = undefined
+          this.taskCandidate = list.taskCandidate
+        } else {
+          this.assignee = undefined
+          this.assigneeEnd = list
+        }
+        this.$nextTick(() => {
+          this.$refs['title-pop'].doDestroy()
+          this.$refs['title-pop'].referenceElm = task
+          this.msgV = true
+        })
+      })
+      task.addEventListener('mouseleave', () => {
+        this.msgV = false
+      })
+    },
+    scaleMinus() {
+      let newVal = this.zoomValue - this.step
+      if (this.min <= newVal) {
+        this.zoomValue = newVal
+      } else {
+        this.zoomValue = this.min
+      }
+    },
+    scaleAdd() {
+      let newVal = this.zoomValue + this.step
+      if (newVal < this.max) {
+        this.zoomValue = newVal
+      } else {
+        this.zoomValue = this.max
+      }
+    },
+    scaleReset() {
+      this.zoomValue = 1
+    },
+    scaleSvg() {
+      this.svgPanzoom && this.svgPanzoom.zoomAbs(0, 0, this.zoomValue)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.n20-approval-img-por {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.activiti-svg-wrap {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  overflow: auto;
+}
+
+.activiti-msg th,
+.activiti-msg td {
+  padding: 6px 8px;
+  border: 1px solid var(--border-color-base);
+}
+
+.activiti-svg-zoom {
+  position: absolute;
+  z-index: 9;
+  right: 0;
+  bottom: 0;
+}
+
+.n20-approval-img-por .djs-hit,
+.n20-approval-img-por .djs-hit-all,
+.n20-approval-img-por .djs-outline {
+  display: none !important;
+}
+.n20-approval-img-por use {
+  fill: #b2b2b2 !important;
+}
+.activiti-node-achieve circle,
+.activiti-node-achieve rect,
+.activiti-node-achieve polygon,
+.activiti-node-achieve .add-and,
+.activiti-line-achieve path {
+  stroke: #3cb495 !important;
+}
+.activiti-node-achieve use {
+  fill: #3cb495 !important;
+}
+.activiti-node-reject circle,
+.activiti-node-reject rect,
+.activiti-node-reject .add-and {
+  stroke: #ea5454 !important;
+}
+.activiti-node-reject use {
+  fill: #ea5454 !important;
+}
+.activiti-node-at rect,
+.activiti-node-at .add-and {
+  stroke: #fe943c !important;
+}
+.activiti-node-at use {
+  fill: #fe943c !important;
+}
+.activiti-line-reject,
+.activiti-line-reject path {
+  fill: none;
+  stroke-width: 1px;
+  stroke: #ea5454 !important;
+  stroke-linejoin: round;
+  /* marker-end: url('#sequenceflow-end-white-black-3aw0mc6w8vg7jarca1qf355gu'); */
+}
+.activiti-text-reject {
+  fill: #ea5454 !important;
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  font-weight: normal;
+  text-anchor: middle;
+}
+.activiti-line-propel,
+.activiti-line-propel path {
+  fill: none;
+  stroke-width: 1px;
+  stroke: #3cb495 !important;
+  stroke-linejoin: round;
+  /* marker-end: url('#sequenceflow-end-white-black-3aw0mc6w8vg7jarca1qf355gu'); */
+}
+.activiti-text-propel {
+  fill: #3cb495 !important;
+  font-family: Arial, sans-serif;
+  font-size: 12px;
+  font-weight: normal;
+  text-anchor: middle;
+}
+.activiti-text-bg-reject {
+  fill: #ffffff;
+}
+</style>

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

@@ -127,13 +127,25 @@
         </div>
       </div>
     </el-popover>
+
+    <el-popover ref="child-pop" popper-class="n20-approval-child" v-model="childV" trigger="manual" placement="bottom">
+      <div v-click-outside="clickOut" v-if="childV">
+        <div>{{ childTitle }}</div>
+        <child :data-pro="childDataPro"></child>
+      </div>
+    </el-popover>
   </div>
 </template>
 
 <script>
-import { $lc } from '../../../utils/i18n/index'
-import importG from '../../../utils/importGlobal.js'
+import axios from '../../../utils/axios.js';
+import { $lc } from '../../../utils/i18n/index';
+import importG from '../../../utils/importGlobal.js';
+import child from './child.vue';
 export default {
+  components: {
+    child
+  },
   filters: {
     zoomFormat(val) {
       return parseInt(val * 10) + '0%'
@@ -159,7 +171,10 @@ export default {
       markerId: '',
       msgV: false,
       addTaskV: false,
-      addTaskList: []
+      addTaskList: [],
+      childV: false,
+      childTitle: '',
+      childDataPro: undefined
     }
   },
   watch: {
@@ -224,6 +239,7 @@ export default {
           if (taskK) {
             if (!k.includes('@addTaskType')) {
               this.addEvent(taskK, taskDefIdMap[k])
+              this.addChildEvent(taskK, taskDefIdMap[k])
             }
           }
         }
@@ -253,10 +269,12 @@ export default {
 
   deactivated() {
     this.msgV = false
+    this.childV = false
     this.addTaskV = false
   },
   beforeDestroy() {
     this.msgV = false
+    this.childV = false
     this.svgPanzoom && this.svgPanzoom.dispose()
     document.body.removeEventListener('click', this.addTaskFn)
   },
@@ -557,6 +575,54 @@ export default {
         this.msgV = false
       })
     },
+    addChildEvent(task, list) {
+      task.addEventListener('click', () => {
+        if (list[0]?.subProcInitId) {
+          this.childTitle = list[0]?.taskName
+          this.getFlowData(list[0]?.subProcInitId, task)
+        }
+      })
+    },
+    clickOut() {
+      let elPoppers = []
+      document.querySelectorAll('.el-popper.n20-approval-child').forEach((e) => {
+        e.style.display !== 'none' && elPoppers.push(e)
+      })
+
+      if (elPoppers.length === 1) {
+        this.childV = !this.childV
+      }
+    },
+    getFlowData(procInstId, task) {
+      axios
+        .get(
+          '/bems/activiti/sample/Q004_1',
+          {
+            procInstId
+          },
+          { noMsg: true, loading: false }
+        )
+        .then((res) => {
+          // 区分后加签还是前加签(addTaskPreItem)
+          if (res.data && res.data.addTask) {
+            let addTaskPre = {}
+            for (let k in res.data.addTask) {
+              let item = res.data.addTask[k]
+              let addTaskPreItem = item.filter((c) => /@2@addTaskType/.test(c.addTaskDefId))
+
+              if (addTaskPreItem.length) {
+                addTaskPre[k] = addTaskPreItem
+                delete res.data.addTask[k]
+              }
+            }
+            res.data['addTaskPre'] = addTaskPre
+          }
+          this.childDataPro = res.data
+          this.childV = !this.childV
+          this.$refs['child-pop'].doDestroy()
+          this.$refs['child-pop'].referenceElm = task
+        })
+    },
     scaleMinus() {
       let newVal = this.zoomValue - this.step
       if (this.min <= newVal) {