workflow-editor 0.0.81-up → 0.0.81-up-tmp2

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

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