@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/process-healthcheck/HealthcheckChart.vue

@@ -0,0 +1,529 @@
+<template>
+  <div class="process-healthcheck" v-loading="loading">
+    <div class="process-healthcheck__toolbar">
+      <div class="process-healthcheck__info">
+        <div v-if="processName" class="process-healthcheck__title">{{ processName }}</div>
+        <div class="process-healthcheck__summary">
+          <span>扫描在途实例：<b>{{ scannedInstanceCount }}</b></span>
+          <span>异常业务数据：<b :class="{ 'is-danger': totalRows > 0 }">{{ totalRows }}</b></span>
+          <span>异常节点：<b :class="{ 'is-danger': errorNodeIds.length > 0 }">{{ errorNodeIds.length }}</b></span>
+          <span v-if="healthLoaded && errorNodeIds.length === 0" class="is-success">未检测到异常节点</span>
+        </div>
+      </div>
+      <div class="process-healthcheck__actions">
+        <el-button-group>
+          <el-button size="small" icon="el-icon-zoom-out" @click="zoomOut" />
+          <el-button size="small" icon="el-icon-zoom-in" @click="zoomIn" />
+          <el-button size="small" icon="el-icon-full-screen" @click="fitViewport" />
+        </el-button-group>
+        <el-button type="primary" size="small" icon="el-icon-refresh" @click="runHealthCheck">重新检测</el-button>
+      </div>
+    </div>
+
+    <div class="process-healthcheck__canvas" ref="canvas"></div>
+
+    <el-dialog
+      class="dialog"
+      custom-class="phc-dialog"
+      :title="dialogTitle"
+      v-model="dialogVisible"
+      width="920px"
+      append-to-body
+    >
+      <el-table :data="activeRows" border size="small" max-height="500" :row-key="getRowKey" default-expand-all>
+        <el-table-column type="expand">
+          <template v-slot="scope">
+            <div class="phc-issues">
+              <div v-for="(item, i) in scope.row.__items" :key="i" class="phc-issue">
+                <el-tag size="small" :type="checkTypeTag(item.checkType)" class="phc-issue__tag">{{ item.checkTypeDesc || item.checkType }}</el-tag>
+                <div class="phc-issue__body">
+                  <div class="phc-issue__detail">{{ item.detail || '-' }}</div>
+                  <div v-if="affectedUserNames(item)" class="phc-issue__users">受影响用户：{{ affectedUserNames(item) }}</div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="申请人" prop="applyUserName" min-width="160" show-overflow-tooltip />
+        <el-table-column label="业务主键" min-width="180">
+          <template v-slot="scope">
+            <span>{{ scope.row.businessKey || '-' }}</span>
+            <i
+              v-if="scope.row.businessKey"
+              class="el-icon-tickets phc-audit"
+              title="流程审核记录"
+              @click="openAuditHistory(scope.row)"
+            ></i>
+          </template>
+        </el-table-column>
+        <el-table-column label="当前节点" prop="currentNodeName" min-width="120" show-overflow-tooltip />
+        <el-table-column label="启动时间" min-width="150">
+          <template v-slot="scope">{{ formatTime(scope.row.startTime) }}</template>
+        </el-table-column>
+        <el-table-column label="异常项" width="100" align="center">
+          <template v-slot="scope">
+            <el-tag size="small" type="danger">{{ (scope.row.__items || []).length }} 项</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <el-dialog
+      class="dialog"
+      custom-class="phc-dialog"
+      title="流程审核记录"
+      v-model="auditDialogVisible"
+      width="1000px"
+      append-to-body
+      destroy-on-close
+    >
+      <epx-check-history
+        v-if="auditDialogVisible"
+        :meta-id="auditMetaId"
+        :form-data="auditFormData"
+        :comp-configs="{ type: 'table' }"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+
+const CHECK_TYPE_TAG = {
+  PERM_AUDIT_NO_DATA: 'danger',
+  PERM_AUDIT_NO_API: 'warning',
+  NO_OUTGOING_MATCH: 'danger',
+  EMPTY_AUDITOR: 'warning'
+}
+
+export default {
+  name: 'epx-process-healthcheck-chart',
+  mixins: [component],
+  // 配置点默认值（后台配置面板覆盖）
+  processId: '', // 渲染流程定义图的模型ID（ACT_RE_MODEL.ID）
+  processCode: '', // 健康检查的流程编号（流程定义 key）
+  processInstanceId: '', // 单实例诊断模式（可选）
+  checkTypes: null, // 启用的检查项 code 列表（可选，不传则全部）
+  healthcheckParams: null, // 健康检查额外参数（如 startTime/endTime）
+  minZoom: 0.8, // 流程图自适应后的最小缩放比例，避免大图被压得过小
+  data () {
+    return {
+      viewer: null,
+      viewerReady: false,
+      healthLoaded: false,
+      loading: false,
+      markedNodeIds: [],
+      rows: [],
+      errorNodeMap: {},
+      scannedInstanceCount: 0,
+      totalRows: 0,
+      dialogVisible: false,
+      activeNodeId: '',
+      derivedProcessCode: '',
+      processName: '',
+      modelKey: '',
+      auditDialogVisible: false,
+      auditMetaId: '',
+      auditFormData: {},
+      // 提供给弹窗内 check-history 的"假 upPage"，让它按所选业务数据查审核记录
+      auditUpPage: { $query: {} }
+    }
+  },
+  provide () {
+    return { upPage: this.auditUpPage }
+  },
+  computed: {
+    processIdValue () {
+      // object 类型配置点：可能是对象({ID})或直接是ID字符串
+      const p = this.$configs.processId
+      if (p && typeof p === 'object') return p.ID || p.id || ''
+      return p || this.$query.id
+    },
+    processCodeValue () {
+      // 流程编号优先取配置/URL，其次取模型KEY，最后由加载的流程图自动推导
+      return this.$configs.processCode || this.modelKey || this.derivedProcessCode || this.$query.processCode
+    },
+    processInstanceIdValue () {
+      return this.$configs.processInstanceId || this.$query.processInstanceId
+    },
+    errorNodeIds () {
+      return Object.keys(this.errorNodeMap)
+    },
+    activeNode () {
+      return this.errorNodeMap[this.activeNodeId] || {}
+    },
+    activeRows () {
+      return this.activeNode.rows || []
+    },
+    dialogTitle () {
+      return `${this.activeNode.nodeName || '异常节点'} - 异常业务数据（${this.activeRows.length}）`
+    },
+    minZoom () {
+      return this.$configs.minZoom || 0.8
+    }
+  },
+  methods: {
+    initViewer ({ BpmnViewer, camundaModdleDescriptor, customTranslate, HealthcheckRenderer }) {
+      window.BPMN_CURRENT_LANGUAGE = this.$util.getCurrentLanguage()
+      window.BPMN_TRANSLATE = this.$t
+      this.viewer = new BpmnViewer({
+        container: this.$refs.canvas,
+        additionalModules: [
+          { translate: ['value', customTranslate] },
+          // 还原 i18n 节点名称，否则图上看不出是哪个节点
+          { __init__: ['healthcheckRenderer'], healthcheckRenderer: ['type', HealthcheckRenderer] }
+        ],
+        moddleExtensions: { camunda: camundaModdleDescriptor }
+      })
+      this.loadProcessInfo()
+      this.loadXml()
+    },
+    loadProcessInfo () {
+      if (!this.processIdValue) return
+      this.$http.get({ entityId: 'ACT_RE_MODEL', id: this.processIdValue })
+        .then(res => {
+          // 兼容拦截器是否已剥壳两种返回
+          const rec = (res && res.data && typeof res.data === 'object') ? res.data : (res || {})
+          this.processName = rec.NAME || ''
+          if (rec.KEY) this.modelKey = rec.KEY
+        })
+        .catch(() => {})
+    },
+    getProcessCode () {
+      // 流程定义 key = bpmn:Process 元素的 id，即接口所需的 processCode
+      try {
+        const defs = this.viewer.getDefinitions()
+        const proc = (defs.rootElements || []).find(el => el.$type === 'bpmn:Process')
+        return proc ? proc.id : ''
+      } catch (e) {
+        return ''
+      }
+    },
+    loadXml () {
+      if (!this.processIdValue) {
+        this.$message.warning('未配置流程ID（processId）')
+        return
+      }
+      this.$http.$request({
+        action: 'getModelEditorXml',
+        entityId: 'ACT_RE_MODEL',
+        modelId: this.processIdValue
+      })
+        .then(data => {
+          this.viewer.importXML(data.xml, (err) => {
+            if (err) {
+              this.$message.error('流程图加载失败')
+              return
+            }
+            this.fitViewport()
+            this.derivedProcessCode = this.getProcessCode()
+            this.viewer.get('eventBus').on('element.click', this.onElementClick)
+            this.viewerReady = true
+            this.applyMarkers()
+            // 流程图就绪并拿到 processCode 后再发起健康检查
+            this.runHealthCheck()
+          })
+        })
+    },
+    runHealthCheck () {
+      if (!this.processCodeValue && !this.processInstanceIdValue) {
+        this.$message.warning('未配置流程编号（processCode）')
+        return
+      }
+      const body = { entityId: 'ACT_RE_MODEL', action: 'healthcheck' }
+      if (this.processCodeValue) body.processCode = this.processCodeValue
+      if (this.processInstanceIdValue) body.processInstanceId = this.processInstanceIdValue
+      const { checkTypes, healthcheckParams } = this.$configs
+      if (checkTypes && checkTypes.length) body.checkTypes = checkTypes
+      let extraParams = healthcheckParams
+      if (typeof extraParams === 'string') {
+        try { extraParams = JSON.parse(extraParams) } catch (e) { extraParams = null }
+      }
+      if (extraParams && typeof extraParams === 'object') Object.assign(body, extraParams)
+      this.loading = true
+      this.$http.$post(body)
+        .then(data => {
+          const result = data || {}
+          this.scannedInstanceCount = result.scannedInstanceCount || 0
+          this.totalRows = result.totalRows || 0
+          this.rows = result.rows || []
+          this.buildErrorMap()
+          this.healthLoaded = true
+          this.applyMarkers()
+        })
+        .catch(err => {
+          this.$message.error((err && err.message) || '异常检测失败')
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    buildErrorMap () {
+      const map = {}
+      for (const row of this.rows) {
+        for (const group of (row.nodeIssues || [])) {
+          if (!group.nodeId) continue
+          if (!map[group.nodeId]) {
+            map[group.nodeId] = {
+              nodeId: group.nodeId,
+              nodeName: group.nodeName,
+              current: group.current,
+              rows: []
+            }
+          }
+          map[group.nodeId].rows.push({ ...row, __items: group.items || [] })
+        }
+      }
+      this.errorNodeMap = map
+    },
+    applyMarkers () {
+      if (!this.viewerReady || !this.viewer) return
+      const canvas = this.viewer.get('canvas')
+      const registry = this.viewer.get('elementRegistry')
+      const overlays = this.viewer.get('overlays')
+      // 清除上一次的标记与角标
+      this.markedNodeIds.forEach(id => {
+        try { canvas.removeMarker(id, 'process-healthcheck-error') } catch (e) {}
+      })
+      this.markedNodeIds = []
+      try { overlays.clear() } catch (e) {}
+      this.errorNodeIds.forEach(nodeId => {
+        if (!registry.get(nodeId)) return
+        try {
+          canvas.addMarker(nodeId, 'process-healthcheck-error')
+          this.markedNodeIds.push(nodeId)
+          // 在异常节点上直接展示异常业务数据条数
+          const count = (this.errorNodeMap[nodeId].rows || []).length
+          overlays.add(nodeId, 'phc-badge', {
+            position: { top: -10, right: 10 },
+            html: `<div class="phc-node-badge" title="异常业务数据 ${count} 条">${count}</div>`
+          })
+        } catch (e) {}
+      })
+    },
+    fitViewport () {
+      if (!this.viewer) return
+      const canvas = this.viewer.get('canvas')
+      try {
+        canvas.zoom('fit-viewport', 'auto')
+        // 大图被压得过小时给一个下限，配合拖拽平移查看
+        if (canvas.zoom() < this.minZoom) canvas.zoom(this.minZoom)
+      } catch (e) {}
+    },
+    setZoom (delta) {
+      if (!this.viewer) return
+      const canvas = this.viewer.get('canvas')
+      const next = Math.max(0.2, Math.min(4, canvas.zoom() + delta))
+      canvas.zoom(next)
+    },
+    zoomIn () {
+      this.setZoom(0.1)
+    },
+    zoomOut () {
+      this.setZoom(-0.1)
+    },
+    onElementClick (e) {
+      const element = e && e.element
+      if (!element || !this.errorNodeMap[element.id]) return
+      this.activeNodeId = element.id
+      this.dialogVisible = true
+    },
+    checkTypeTag (code) {
+      return CHECK_TYPE_TAG[code] || 'info'
+    },
+    getRowKey (row) {
+      return row.processInstanceId || row.businessKey
+    },
+    // 受影响用户默认显示用户名（affectedUserNames 为名称展示值），无则回退到 ID
+    affectedUserNames (item) {
+      const names = item.affectedUserNames
+      if (names) return Array.isArray(names) ? names.join('、') : names
+      return (item.affectedUserIds || []).join('、')
+    },
+    // 打开该业务数据的流程审核记录
+    async openAuditHistory (row) {
+      if (!row || !row.businessKey) return
+      this.auditMetaId = row.metaId || this.$metaId
+      let metaKey = 'ID'
+      if (this.auditMetaId) {
+        let meta = this.getMeta(this.auditMetaId)
+        if (!meta) {
+          await this.$store.dispatch({ type: 'ADD_META', metaId: this.auditMetaId })
+          meta = this.getMeta(this.auditMetaId)
+        }
+        metaKey = (meta && meta.getKey && meta.getKey()) || 'ID'
+      }
+      // check-history 优先取 upPage.$query.id，这里直接喂业务数据id；
+      // formData 双键作为兜底（$metaKey 解析成 ID 或真实主键都能命中）
+      this.auditUpPage.$query = { id: row.businessKey }
+      this.auditFormData = { ID: row.businessKey, [metaKey]: row.businessKey }
+      this.auditDialogVisible = true
+    },
+    formatTime (ts) {
+      return ts ? this.$moment(ts).format('YYYY-MM-DD HH:mm') : '-'
+    }
+  },
+  mounted () {
+    require.ensure([], () => {
+      const BpmnViewer = require('bpmn-js/lib/NavigatedViewer').default
+      const camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda')
+      const customTranslate = require('@/assets/customTranslate/customTranslate').default
+      const HealthcheckRenderer = require('./HealthcheckRenderer').default
+      this.initViewer({ BpmnViewer, camundaModdleDescriptor, customTranslate, HealthcheckRenderer })
+    }, () => {
+      this.$message.error('插件初始化失败，请重新打开页面')
+    }, 'bpmn')
+  },
+  beforeUnmount () {
+    if (this.viewer) {
+      try { this.viewer.destroy() } catch (e) {}
+      this.viewer = null
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.process-healthcheck {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 700px;
+  background: #fff;
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid #E3E3E3;
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 24px;
+    min-width: 0;
+  }
+
+  &__title {
+    font-size: $--font-size-large;
+    font-weight: 600;
+    color: var(--color-text-title);
+  }
+
+  &__summary {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    font-size: $--font-size-base;
+    color: var(--color-text-secondary);
+
+    b {
+      margin-left: 4px;
+      color: var(--color-text-title);
+    }
+
+    .is-danger {
+      color: #F56C6C;
+    }
+
+    .is-success {
+      color: #67C23A;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__canvas {
+    position: relative;
+    flex: 1;
+    width: 100%;
+    min-height: 600px;
+    overflow: hidden;
+    cursor: move;
+  }
+
+  // bpmn-js 动态注入的节点 DOM 无 scoped data-v 属性，必须用 :deep() 命中
+  &__canvas :deep(.djs-element.process-healthcheck-error) {
+    cursor: pointer;
+
+    .djs-visual > :nth-child(1) {
+      stroke: #F56C6C !important;
+      fill: #FEF0F0 !important;
+    }
+  }
+
+  // 异常节点角标（bpmn overlays 注入的 HTML，需 :deep()）
+  &__canvas :deep(.phc-node-badge) {
+    box-sizing: border-box;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 9px;
+    background: #F56C6C;
+    color: #fff;
+    font-size: 12px;
+    line-height: 18px;
+    text-align: center;
+    box-shadow: 0 0 0 2px #fff;
+    pointer-events: none;
+  }
+}
+</style>
+
+<!-- 弹窗内容因 append-to-body 脱离了 scoped 作用域，单独用 phc-dialog 命名空间的全局样式 -->
+<style lang="scss">
+.phc-dialog {
+  .phc-audit {
+    margin-left: 6px;
+    cursor: pointer;
+    @include font_color_primary;
+  }
+
+  .phc-issues {
+    padding: 4px 12px;
+  }
+
+  .phc-issue {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 6px 0;
+
+    & + .phc-issue {
+      border-top: 1px dashed #EBEEF5;
+    }
+
+    &__tag {
+      flex: 0 0 auto;
+      margin-top: 2px;
+    }
+
+    &__body {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &__detail {
+      line-height: 1.6;
+      color: var(--color-text-primary);
+      white-space: pre-wrap; // 异常详情允许换行展示
+      word-break: break-word;
+    }
+
+    &__users {
+      margin-top: 2px;
+      font-size: $--font-size-extra-small;
+      color: var(--color-text-secondary);
+    }
+  }
+}
+</style>

package/src/components/process-healthcheck/HealthcheckRenderer.js

@@ -0,0 +1,41 @@
+import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'
+
+const HIGH_PRIORITY = 1500
+
+// 平台节点名称以 camunda:name.i18n 形式存储，纯 Viewer 不会解析导致图上无名称。
+// 这里在绘制前按当前语言把 businessObject.name 还原出来（逻辑对齐 custom-bpmn/CustomRenderer）。
+export default class HealthcheckRenderer extends BaseRenderer {
+  constructor (eventBus, bpmnRenderer) {
+    super(eventBus, HIGH_PRIORITY)
+    this.bpmnRenderer = bpmnRenderer
+  }
+
+  canRender () {
+    return true
+  }
+
+  applyI18nName (element) {
+    try {
+      const { $attrs } = element.businessObject || {}
+      if (window.BPMN_CURRENT_LANGUAGE && $attrs && $attrs['camunda:name.i18n']) {
+        const nameI18n = JSON.parse($attrs['camunda:name.i18n'])
+        element.businessObject.name = nameI18n[window.BPMN_CURRENT_LANGUAGE] || element.businessObject.name
+      }
+    } catch (e) {}
+  }
+
+  drawShape (parentNode, element) {
+    this.applyI18nName(element)
+    return this.bpmnRenderer.drawShape(parentNode, element)
+  }
+
+  drawConnection (parentNode, element) {
+    return this.bpmnRenderer.drawConnection(parentNode, element)
+  }
+
+  getShapePath (shape) {
+    return this.bpmnRenderer.getShapePath(shape)
+  }
+}
+
+HealthcheckRenderer.$inject = ['eventBus', 'bpmnRenderer']

package/src/components/process-healthcheck/index.js

@@ -0,0 +1,8 @@
+import HealthcheckChart from './HealthcheckChart.vue'
+
+/* istanbul ignore next */
+HealthcheckChart.install = function install (Vue) {
+  Vue.component(HealthcheckChart.name, HealthcheckChart)
+}
+
+export default HealthcheckChart