n20-common-lib 1.3.41 → 1.3.44

package/src/components/ApprovalRecord/approvalImgPro.vue

@@ -0,0 +1,425 @@
+<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>
+
+    <div ref="msgEl" class="activiti-msg">
+      <div>
+        <span class="color-primary">待审批: </span>{{ daishengpi.toString() }}
+      </div>
+      <div>
+        <span class="color-success">已审批: </span>{{ yishengpi.toString() }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { tipShow, tipHide } from '../../directives/VTitle/index.js'
+export default {
+  filters: {
+    zoomFormat(val) {
+      return parseInt(val * 10) + '0%'
+    }
+  },
+  data() {
+    this.svgW = undefined
+    this.svgC = undefined
+    return {
+      daishengpi: [],
+      yishengpi: [],
+      min: 0.4,
+      max: 2,
+      step: 0.1,
+      zoomValue: 1
+    }
+  },
+  watch: {
+    zoomValue() {
+      this.scaleSvg()
+    }
+  },
+  async mounted() {
+    this.svgW = this.$refs['activiti-svg-wrap']
+
+    let { flowString, seqRecords, taskDefIdMap } = await this.$axios.get(
+      '/server-assets/approvalImgDate.json'
+    )
+    this.setSvgAttrs(flowString)
+    seqRecords.forEach((obj) => {
+      this.setTaskRecord(obj)
+    })
+    taskDefIdMap.forEach((obj) => {
+      this.addEvent(obj)
+    })
+    let panzoom = window._g_panzoom
+    if (!panzoom) {
+      const _module = await import(/*webpackChunkName: "g_panzoom"*/ 'panzoom')
+      panzoom = window._g_panzoom = _module.default
+    }
+
+    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
+    })
+  },
+  beforeDestroy() {
+    this.svgPanzoom && this.svgPanzoom.dispose()
+  },
+  methods: {
+    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]) - 10,
+        Number(viewBox[1]) - 10,
+        Number(viewBox[2]) + 10,
+        Number(viewBox[3]) + 10
+      ]
+      viewBox = viewBox.join(' ')
+
+      this.svgC.setAttribute('width', Number(width) + 10)
+      this.svgC.setAttribute('height', Number(height) + 10)
+      this.svgC.setAttribute('viewBox', viewBox)
+    },
+    setTaskRecord(obj) {
+      let {
+        resouceTaskDefId: from,
+        targetTaskDefId: to,
+        flowLine: line,
+        type: type,
+        suggestion: msg
+      } = 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')
+        this.svgW
+          .querySelector(`[data-element-id="${to}"]`)
+          .classList.add('activiti-node-reject')
+        this.setRejectLink(from, to, msg)
+      }
+    },
+    setRejectLink(from, to, msg) {
+      const fromO = this.getElRect(from)
+      const toO = this.getElRect(to)
+      let oTop = Math.min(fromO.top, toO.top) - 12
+      let d = `M${fromO.left + fromO.with / 2},${fromO.top} L${
+        fromO.left + fromO.with / 2
+      },${oTop} L${toO.left + toO.with / 2},${oTop} L${
+        toO.left + toO.with / 2
+      },${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)
+
+      if (msg) {
+        let text = document.createElementNS(
+          'http://www.w3.org/2000/svg',
+          'text'
+        )
+        text.setAttribute('class', 'activiti-text-reject')
+        text.setAttribute(
+          'x',
+          (fromO.left + fromO.with / 2 + toO.left + toO.with / 2) / 2
+        )
+        text.setAttribute('y', oTop + 6)
+        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 (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])
+      }
+      return rect
+    },
+    addEvent(obj) {
+      let { taskDefId, daishengpi, yishengpi } = obj
+      let task = this.svgW.querySelector(`[data-element-id="${taskDefId}"]`)
+      task.addEventListener('mouseenter', () => {
+        this.daishengpi = daishengpi
+        this.yishengpi = yishengpi
+        this.$nextTick(() => {
+          tipShow(task, this.$refs['msgEl'])
+        })
+      })
+      task.addEventListener('mouseleave', () => {
+        tipHide(task)
+      })
+    },
+    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)
+    }
+  }
+}
+
+/*
+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>
+.n20-approval-img-por {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.activiti-svg-wrap {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.n20-approval-img-por .activiti-msg {
+  display: none;
+}
+.activiti-svg-zoom {
+  position: absolute;
+  z-index: 9;
+  right: 0;
+  bottom: 0;
+}
+
+.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-line-achieve path {
+  stroke: var(--color-primary) !important;
+}
+.activiti-node-reject circle,
+.activiti-node-reject rect {
+  stroke: var(--color-danger) !important;
+}
+.activiti-line-reject {
+  fill: none;
+  stroke-width: 1px;
+  stroke: var(--color-danger) !important;
+  stroke-linejoin: round;
+  marker-end: url('#sequenceflow-end-white-black-3aw0mc6w8vg7jarca1qf355gu');
+}
+.activiti-text-reject {
+  fill: var(--color-danger) !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/flowDialog.vue

@@ -1,47 +1,47 @@
-<template>
-  <div>
-    <el-button plain size="mini" :disabled="false" @click="imgV = true"
-      >流程图查看</el-button
-    >
-    <el-dialog
-      title="查看流程"
-      :visible.sync="imgV"
-      width="65%"
-      class="p-a-0"
-      append-to-body
-      top="10vh"
-    >
-      <approvalImg
-        :proc-inst-id="procInstId"
-        class="text-c p-a"
-        style="height: 70vh; overflow: auto"
-      />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import approvalImg from './approvalImg.vue'
-export default {
-  name: 'FlowDialog',
-  components: {
-    approvalImg
-  },
-  props: {
-    procInstId: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      imgV: false
-    }
-  },
-  methods: {
-    close() {
-      this.imgV = false
-    }
-  }
-}
-</script>
+<template>
+  <div>
+    <el-button plain size="mini" :disabled="false" @click="imgV = true"
+      >流程图查看</el-button
+    >
+    <el-dialog
+      title="查看流程"
+      :visible.sync="imgV"
+      width="65%"
+      class="p-a-0"
+      append-to-body
+      top="10vh"
+    >
+      <approvalImg
+        :proc-inst-id="procInstId"
+        class="text-c p-a"
+        style="height: 70vh; overflow: auto"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import approvalImg from './approvalImg.vue'
+export default {
+  name: 'FlowDialog',
+  components: {
+    approvalImg
+  },
+  props: {
+    procInstId: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      imgV: false
+    }
+  },
+  methods: {
+    close() {
+      this.imgV = false
+    }
+  }
+}
+</script>

package/src/components/ApprovalRecord/index.vue

@@ -1,63 +1,63 @@
-/* 审批记录 */
-<template>
-  <div>
-    <expandableWrap title="审批记录" :show-expand="false">
-      <template slot="tips">
-        <el-button plain size="mini" :disabled="false" @click="cardV = true"
-          >审批进度查看</el-button
-        >
-        <el-button plain size="mini" :disabled="false" @click="imgV = true"
-          >流程图查看</el-button
-        >
-      </template>
-    </expandableWrap>
-    <el-dialog
-      title="审批记录"
-      :visible.sync="cardV"
-      width="700"
-      class="p-a-0"
-      append-to-body
-      top="10vh"
-    >
-      <approvalCard
-        class="p-a"
-        :proc-inst-id="$route.query.processInstanceId"
-        style="height: 70vh; overflow: auto"
-      />
-    </el-dialog>
-    <el-dialog
-      title="查看流程"
-      :visible.sync="imgV"
-      width="65%"
-      class="p-a-0"
-      append-to-body
-      top="10vh"
-    >
-      <approvalImg
-        class="text-c p-a"
-        :proc-inst-id="$route.query.processInstanceId"
-        style="height: 70vh; overflow: auto"
-      />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import expandableWrap from '../Expandable/main.vue'
-import approvalCard from '../ApprovalCard/index.vue'
-import approvalImg from './approvalImg.vue'
-export default {
-  name: 'ApprovalRecord',
-  components: {
-    expandableWrap,
-    approvalCard,
-    approvalImg
-  },
-  data() {
-    return {
-      cardV: false,
-      imgV: false
-    }
-  }
-}
-</script>
+/* 审批记录 */
+<template>
+  <div>
+    <expandableWrap title="审批记录" :show-expand="false">
+      <template slot="tips">
+        <el-button plain size="mini" :disabled="false" @click="cardV = true"
+          >审批进度查看</el-button
+        >
+        <el-button plain size="mini" :disabled="false" @click="imgV = true"
+          >流程图查看</el-button
+        >
+      </template>
+    </expandableWrap>
+    <el-dialog
+      title="审批记录"
+      :visible.sync="cardV"
+      width="700"
+      class="p-a-0"
+      append-to-body
+      top="10vh"
+    >
+      <approvalCard
+        class="p-a"
+        :proc-inst-id="$route.query.processInstanceId"
+        style="height: 70vh; overflow: auto"
+      />
+    </el-dialog>
+    <el-dialog
+      title="查看流程"
+      :visible.sync="imgV"
+      width="65%"
+      class="p-a-0"
+      append-to-body
+      top="10vh"
+    >
+      <approvalImg
+        class="text-c p-a"
+        :proc-inst-id="$route.query.processInstanceId"
+        style="height: 70vh; overflow: auto"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import expandableWrap from '../Expandable/main.vue'
+import approvalCard from '../ApprovalCard/index.vue'
+import approvalImg from './approvalImg.vue'
+export default {
+  name: 'ApprovalRecord',
+  components: {
+    expandableWrap,
+    approvalCard,
+    approvalImg
+  },
+  data() {
+    return {
+      cardV: false,
+      imgV: false
+    }
+  }
+}
+</script>