workflow-editor 0.9.68-dw → 0.9.68

package/packages/workflow-editor/src/main/tache-history-tooltip.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="tooltip">
+    <!--使用v-html是为了实现</br>换行-->
+    <div v-html="content" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TacheHistoryTooltip',
+  props: {
+    content: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tooltip{
+    position: absolute;
+    background: #fff;
+    min-width: 150px;
+    border-radius: 4px;
+    border: 1px solid #ebeef5;
+    padding: 12px;
+    z-index: 2000;
+    color: #606266;
+    line-height: 1.4;
+    text-align: justify;
+    font-size: 14px;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+    word-break: break-all;
+}
+</style>

package/packages/workflow-editor/src/main/tache-name-input.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-if="area" :style="'position:absolute;x:{{area.x}};y:{{area.y}};width:{{area.width}};height:{{area.height}}'">
+    <textarea />
+  </div>
+</template>
+<script>
+export default {
+  name: 'TacheNameInput',
+  props: {
+    area: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>

package/packages/workflow-editor/src/main/tache-subprocess-history-dialog.vue

@@ -0,0 +1,35 @@
+<template>
+  <el-dialog
+    visible
+    :title="$t('workflowEditorPublicModel.subprocessTitle')"
+    :close-on-click-modal="false"
+    append-to-body
+    width="90%"
+    top="5vh"
+    @open="$emit('open')"
+    @opend="$emit('opend')"
+    @close="$emit('close')"
+    @closed="$emit('closed')"
+  >
+    <iframe id="_subprocess-content" :src="'#/show-sub-wf-history?workflowId='+workflowId" name="_subprocess-content" title="Subprocess Content" frameborder="0" />
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'TacheSubprocessHistoryDialog',
+  props: {
+    // 当前子流程最新流程实例id
+    workflowId: {
+      type: Number,
+      default: null
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+#_subprocess-content{
+  width: 100%;
+  height: calc(100vh - 200px);
+}
+</style>

package/packages/workflow-editor/src/main/toolbox.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <h3>{{ $t('workflowEditor.main.tacheType') }}</h3>
+    <el-button
+      v-for="component in componentList"
+      :key="component.name"
+      :type="component.type"
+      size="medium"
+      :round="component.round"
+      @mousedown.native="select(component.name)"
+    >
+      <icon-svg :icon="component.icon" />
+      {{ component.label }}
+    </el-button>
+  </div>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import IconSvg from './icon-svg'
+import { getComponentList } from '../util.js'
+export default {
+  name: 'Toolbox',
+  components: {
+    IconSvg
+  },
+  data() {
+    return {
+      componentList: getComponentList()
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', ['componentToDraw'])
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setComponentToDraw'
+    ]),
+    select(name) {
+      this.setComponentToDraw(name)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  h3{
+    color: #999999;
+    margin:0;
+    padding:0;
+    font-weight:bold;
+    font-size:18px
+  }
+  .el-button{
+    margin: 6px 0;
+    min-width: 110px;
+    padding:9px 15px;
+    i{
+      padding-right: 4px;
+    }
+  }
+</style>

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

@@ -0,0 +1,304 @@
+<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"
+      />
+    </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 'imatrix-ui/src/utils/workflow-util'
+import { getLanguageWithLocale } from 'imatrix-ui/src/utils/util'
+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>