workflow-editor 0.0.6-up → 0.0.8-up

package/packages/workflow-editor/src/main/selection-region.vue

@@ -1,66 +0,0 @@
-<template>
-  <g>
-    <rect
-      v-if="region"
-      :x="region.x"
-      :y="region.y"
-      :width="region.width"
-      :height="region.height"
-      :class="{'draggable':true,'selection-region':true,'dashed':selectedTaches.length<1}"
-      @mousedown.stop="startDrag"
-      @mouseup.stop="endDrag"
-    />
-  </g>
-</template>
-<script>
-import { mapGetters, mapMutations } from 'vuex'
-import { getMousePosition } from '../util'
-export default {
-  name: 'SelectionRegion',
-  props: {
-    region: {
-      type: Object,
-      default: null
-    }
-  },
-  computed: {
-    ...mapGetters('wfEditor', [
-      'selectedTaches'
-    ])
-  },
-  methods: {
-    ...mapMutations('wfEditor', [
-      'setDrawingRegion',
-      'setMovingRegion',
-      'setMouseDownPosition'
-    ]),
-    startDrag(event) {
-      console.log('region mousedown')
-      const mouseDownPosition = getMousePosition(event)
-      this.setMouseDownPosition(mouseDownPosition)
-      this.setMovingRegion(true)
-    },
-    endDrag(event) {
-      console.log('region mouseup')
-
-      this.setMovingRegion(false)
-      this.setMouseDownPosition(null)
-    }
-  }
-}
-</script>
-<style>
-  .selection-region{
-    stroke: blue;
-    stroke-width: 1;
-    fill: white;
-    fill-opacity: 0;
-    opacity: 1;
-    cursor: move;
-  }
-  .dashed{
-    stroke-dasharray: 10 2;
-    /* 控制region在画的过程中不响应任何事件，只有画完后才能响应 */
-    pointer-events:none;
-  }
-</style>

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

@@ -1,38 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-<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

@@ -1,60 +0,0 @@
-<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

@@ -1,304 +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"
-      />
-    </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>