workflow-editor 0.0.81-up-tmp8 → 0.0.81-up-tmp10

package/packages/workflow-editor/src/main/wf-history-canvas.vue

@@ -0,0 +1,309 @@
+<template>
+  <div ref="svgContainer" style="position:relative">
+    <svg
+      id="svg"
+      width="2000"
+      height="2000"
+      @mousedown="mousedown"
+      @mousemove="mousemove"
+      @mouseup="mouseup"
+      @mouseleave="mouseleave"
+    >
+      <defs>
+        <marker id="arrow" markerWidth="10" markerHeight="10" refX="6" refY="2" orient="auto" markerUnits="strokeWidth">
+          <path d="M0,0 L0,4 L6,2 z" fill="#666" />
+        </marker>
+      </defs>
+      <component
+        :is="tache.type"
+        v-for="tache in taches"
+        :key="tache.id"
+        :model="tache"
+        :class="[getTacheClass(tache)]"
+        :display-mode="tache.displayMode"
+        @mouseenter.native="showTacheHistoryTooltip(tache,$event)"
+        @mouseleave.native="hideTacheHistoryTooltip(tache)"
+        @mousemove.native="updateTacheHistoryTooltipPosition"
+        @click.native="showSubprocessHistory(tache)"
+      />
+      <!-- <transition
+        v-for="transition in transitions"
+        :key="transition.id"
+        :model="transition"
+      /> -->
+      <!--必须这样写，否则线条不显示-->
+      <component :is="'transition'" 
+        v-for="transition in transitions"
+        :key="transition.id"
+        :model="transition"/>
+    </svg>
+    <tache-history-tooltip v-if="showHistory&&tacheHistoryInfo" :style="tooltipPosition" :content="tacheHistoryInfo" />
+    <tache-subprocess-history-dialog v-if="showSubprocessDialog" :workflow-id="subWorkflowId" @close="closeSubprocessHistory" />
+  </div>
+</template>
+
+<script>
+import Start from '../taches/start'
+import End from '../taches/end'
+import HumanTask from '../taches/human-task'
+import Decision from '../taches/decision'
+import Subprocess from '../taches/subprocess'
+import CustomTask from '../taches/custom-task'
+import Fork from '../taches/fork'
+import Join from '../taches/join'
+import HumanDecision from '../taches/human-decision'
+import CopyTask from '../taches/copy-task'
+import AutoTask from '../taches/auto-task'
+import Transition from '../transitions/transition'
+import TacheHistoryTooltip from './tache-history-tooltip'
+import { mapGetters } from 'vuex'
+import { getMousePosition } from '../util'
+import { i18nOperation } from 'agilebuilder-ui'
+import { getLanguageWithLocale } from 'agilebuilder-ui'
+import TacheSubprocessHistoryDialog from './tache-subprocess-history-dialog'
+
+export default {
+  name: 'WfHistoryCanvas',
+  components: {
+    Start,
+    End,
+    HumanTask,
+    Decision,
+    Subprocess,
+    CustomTask,
+    Fork,
+    Join,
+    HumanDecision,
+    CopyTask,
+    Transition,
+    TacheHistoryTooltip,
+    TacheSubprocessHistoryDialog,
+    AutoTask
+  },
+  props: {
+    process: {
+      type: Object,
+      default: null
+    },
+    histories: {
+      type: Array,
+      default: null
+    },
+    currentTasks: {
+      type: Array,
+      default: null
+    },
+    // 主子流程的国际化配置
+    allProcessI18n: {
+      type: Object,
+      default: null
+    }
+  },
+  data: function() {
+    return {
+      showHistory: false,
+      tooltipPosition: null,
+      tacheHistoryInfo: null,
+      showSubprocessDialog: false,
+      subWorkflowId: null // 子流程最新实例
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'taches',
+      'transitions',
+      'processI18n'
+    ])
+    // classifiedTaches() {
+    //   this.taches.map(tache => {
+    //     this.tagPassedTache(tache)
+    //     this.tagCurrentTache(tache)
+    //   })
+    //   return this.taches
+    // }
+
+  },
+  mounted: function() {
+
+  },
+  methods: {
+    getTacheClass(tache) {
+      // 先判断是否为当前节点 （流程中一个节点可能走多次，这个节点会同时出现在当前和历史节点中）
+      if (this.getCurrentTache(tache)) {
+        return 'current-tache'
+      } else {
+        const passTache = this.getPassedTache(tache)
+        if (passTache && passTache.current) {
+          // 子流程时会进入该判断
+          return 'current-tache'
+        } else if (passTache) {
+          return 'passed-tache'
+        } else {
+          return ''
+        }
+      }
+    },
+    getPassedTache(tache) {
+      let result = null
+      for (const item of this.histories) {
+        if ((item.historyType === 'PROCESS_START' && tache.ref.attr.id && tache.ref.attr.id === 'start') ||
+        (item.historyType === 'PROCESS_END' && tache.ref.attr.id && tache.ref.attr.id === 'end') ||
+        (tache.ref.attr.name && item.taskName && item.taskName === tache.ref.attr.name)) {
+          result = item
+          break
+        }
+      }
+      return result
+    },
+    // 获得当前环节的流转历史信息，多条件流转历史记录之间换行显示。因为一个环节可能会走多次
+    getPassedTacheHistories(tache) {
+      const result = []
+      for (const item of this.histories) {
+        if ((item.historyType === 'PROCESS_START' && tache.ref.attr.id && tache.ref.attr.id === 'start') ||
+        (item.historyType === 'PROCESS_END' && tache.ref.attr.id && tache.ref.attr.id === 'end') ||
+        (tache.ref.attr.name && item.taskName && item.taskName === tache.ref.attr.name)) {
+          result.push(this.i18nOperation(item))
+        }
+      }
+      return result
+    },
+    i18nOperation(item) {
+      let oneProcessI18n
+      let processNameI18n
+      const language = getLanguageWithLocale()
+      const bundleCode = item.bundleCode
+      if (bundleCode && bundleCode !== '' && this.processI18n) {
+        oneProcessI18n = this.processI18n[bundleCode]
+      }
+      if (oneProcessI18n && oneProcessI18n['processName']) {
+        processNameI18n = oneProcessI18n['processName'][language]
+      }
+      return i18nOperation(item, processNameI18n, oneProcessI18n, language)
+    },
+    getCurrentTache(tache) {
+      let result = null
+      for (const item of this.currentTasks) {
+        if (item.taskName === tache.ref.attr.name) {
+          result = item
+          break
+        }
+      }
+      return result
+    },
+    getTacheHistory(tache) {
+      let content = null
+      let historyText
+      const histories = this.getPassedTacheHistories(tache)
+      if (histories && histories.length > 0) {
+        historyText = histories.join('</br>')
+      }
+      const current = this.getCurrentTache(tache)
+      if (current) {
+        content = this.$t('workflowEditorMessage.currentHandlingPersonnel') + ': ' + current.transactionResult
+        if (historyText) {
+          content += '</br>' + historyText
+        }
+      } else {
+        content = historyText
+      }
+      return content
+    },
+    forbidSelection() {
+      return false
+    },
+    mousedown(event) {
+      console.log('mousedown')
+    },
+    mousemove(event) {
+    },
+    // 有些组件上的mouseup，会传播到canvas上来
+    mouseup(event) {
+
+    },
+    mouseleave(event) {
+
+    },
+
+    endDrag(event) {
+
+    },
+    showTacheHistoryTooltip(tache, event) {
+      this.tacheHistoryInfo = this.getTacheHistory(tache)
+      this.showHistory = true
+    },
+    hideTacheHistoryTooltip() {
+      // this.tacheHistoryInfo = null
+      this.showHistory = false
+    },
+    updateTacheHistoryTooltipPosition(event) {
+      const position = getMousePosition(event)
+      this.tooltipPosition = {
+        // 提示框的位置要偏离鼠标指针5px，防止提示框不停闪烁
+        left: position.x + 5 + 'px',
+        top: position.y + 5 + 'px'
+      }
+    },
+    // 查看子流程流转历史
+    showSubprocessHistory(tache) {
+      const history = this.getPassedTache(tache)
+      if (history && history.hasChildren !== undefined && history.hasChildren === true) {
+        if (history.children && history.children.length > 0) {
+          this.subWorkflowId = history.children[0].workflowId
+        }
+        this.showSubprocessDialog = true
+      }
+    },
+    closeSubprocessHistory() {
+      this.showSubprocessDialog = false
+    }
+  }
+}
+</script>
+<style >
+  #svg{
+    /* border:1px solid red; */
+    background: white;
+    background-image:
+        linear-gradient(rgba(242,242,242,.7) 1px, transparent 0),
+        linear-gradient(90deg, rgba(242,242,242,.7) 1px, transparent 0),
+        linear-gradient(#e5e5e5 1px, transparent 0),
+        linear-gradient(90deg,#e5e5e5 1px, transparent 0);
+    background-size:
+            15px 15px,
+            15px 15px,
+            75px 75px,
+            75px 75px;
+  }
+  g{
+    font-size: 16px;
+  }
+  g text{
+    dominant-baseline: middle;
+  }
+  .selected{
+    fill: #fff;
+    stroke: #f00;
+    stroke-width: 2;
+  }
+  .task-tache{
+    fill: #fff;
+    stroke: #666;
+    stroke-width: 2;
+  }
+  .passed-tache .task-tache{
+    fill: green;
+    stroke: green;
+    stroke-width: 2;
+  }
+  .current-tache .task-tache{
+    fill: red;
+    stroke: red;
+    stroke-width: 2;
+  }
+  .passed-tache text{
+    fill:white;
+  }
+  .current-tache text{
+    fill: white
+  }
+</style>