workflow-editor 0.9.66-dw → 0.9.66-pv3

package/packages/workflow-editor/src/store/workflow-editor.js

@@ -0,0 +1,128 @@
+import getters from './getters'
+const wfEditor = {
+  namespaced: true,
+  state: {
+    taches: [],
+    transitions: [],
+    startJoint: null,
+    endJoint: null,
+    isMovingTache: false,
+    mouseDownPosition: null,
+    isDrawingRegion: false,
+    isMovingRegion: false,
+    selectedTaches: [],
+    selectedTransition: null,
+    resizerToMove: null,
+    draggerToMove: null,
+    propertiesEditorFor: '',
+    componentToDraw: '',
+    controlPointToMove: null,
+    formFields: [],
+    formFieldsWithSub: [],
+    contextMenuVisible: false,
+    formCode: null,
+    systemCode: null,
+    processCode: null,
+    processI18n: null,
+    subtableConditionMap: null,
+    propSettingKeyList: null
+  },
+  getters,
+  mutations: {
+    setTaches(state, taches) {
+      state.taches = taches
+    },
+    setTransitions(state, transitions) {
+      state.transitions = transitions
+    },
+    clearCanvas(state) {
+      state.taches = []
+      state.transitions = []
+    },
+    resetState(state) {
+      state.isMovingTache = false
+      state.startJoint = null
+      state.endJoint = null
+      state.isDrawingRegion = false
+      state.isMovingRegion = false
+      state.resizerToMove = null
+      state.draggerToMove = null
+      state.controlPointToMove = null
+    },
+    stopDrawingLine(state) {
+      state.startJoint = null
+      state.endJoint = null
+    },
+    setStartJoint(state, startJoint) {
+      state.startJoint = startJoint
+    },
+    setEndJoint(state, endJoint) {
+      state.endJoint = endJoint
+    },
+    setMovingTache(state, isMovingTache) {
+      state.isMovingTache = isMovingTache
+    },
+    setMouseDownPosition(state, mouseDownPosition) {
+      state.mouseDownPosition = mouseDownPosition
+    },
+    setDrawingRegion(state, isDrawingRegion) {
+      state.isDrawingRegion = isDrawingRegion
+    },
+    setMovingRegion(state, isMovingRegion) {
+      state.isMovingRegion = isMovingRegion
+    },
+    setSelectedTaches(state, selectedTaches) {
+      state.selectedTaches = selectedTaches
+    },
+    setSelectedTransition(state, selectedTransition) {
+      state.selectedTransition = selectedTransition
+    },
+    setResizerToMove(state, resizer) {
+      state.resizerToMove = resizer
+    },
+    setDraggerToMove(state, transition) {
+      state.draggerToMove = transition
+    },
+    setPropertiesEditorFor(state, propertiesEditorFor) {
+      state.propertiesEditorFor = propertiesEditorFor
+    },
+    setComponentToDraw(state, componentToDraw) {
+      state.componentToDraw = componentToDraw
+    },
+    setControlPointToMove(state, controlPointToMove) {
+      state.controlPointToMove = controlPointToMove
+    },
+    setFormFields(state, formFields) {
+      state.formFields = formFields
+    },
+    setFormCode(state, formCode) {
+      state.formCode = formCode
+    },
+    setFormFieldsWithSub(state, formFieldsWithSub) {
+      state.formFieldsWithSub = formFieldsWithSub
+    },
+    setContextMenuVisible(state, contextMenuVisible) {
+      state.contextMenuVisible = contextMenuVisible
+    },
+    setSystemCode(state, systemCode) {
+      state.systemCode = systemCode
+    },
+    setProcessCode(state, processCode) {
+      state.processCode = processCode
+    },
+    setProcessI18n(state, processI18n) {
+      state.processI18n = processI18n
+    },
+    setSubtableConditionMap(state, subtableConditionMap) {
+      state.subtableConditionMap = subtableConditionMap
+    },
+    setPropSettingKeyList(state, propSettingKeyList) {
+      state.propSettingKeyList = propSettingKeyList
+    },
+    setSystemVersion(state, systemVersion) {
+      state.systemVersion = systemVersion
+    }
+  }
+}
+
+export default wfEditor

package/packages/workflow-editor/src/taches/common-methods.js

@@ -0,0 +1,21 @@
+import { startDragTache, endDragTache } from '../util'
+export default {
+  startDrag(event) {
+    console.log(this.model.name + ' mousedown')
+    this.setContextMenuVisible(false)
+    startDragTache(event, this)
+  },
+  endDrag() {
+    console.log(this.model.name + ' mouseup')
+    endDragTache()
+  },
+  showJoints() {
+    if (this.$parent.showHistory) return
+    this.jointPoints = [
+      'up', 'right', 'down', 'left'
+    ]
+  },
+  hideJoints() {
+    this.jointPoints = []
+  }
+}

package/packages/workflow-editor/src/taches/copy-task.vue

@@ -0,0 +1,99 @@
+<template>
+  <g
+    @mousedown.stop="startDrag"
+    @mouseup="endDrag"
+    @mouseenter="showJoints"
+    @mouseleave="hideJoints"
+    @dblclick.stop="setPropertiesEditorFor('CopyTask')"
+  >
+    <rect
+      ref="tache"
+      :width="model.width"
+      :height="model.height"
+      :class="{'draggable':true,'task-tache':true, 'selected':model.isSelected}"
+      :x="model.x"
+      :y="model.y"
+      rx="6"
+      ry="6"
+    />
+    <text
+      :x="text.x"
+      :y="text.y"
+      text-anchor="middle"
+      class="draggable"
+    >
+      {{ name }}
+    </text>
+    <joint
+      v-for="position in jointPoints"
+      :key="position"
+      :parent="model"
+      :position="position"
+    />
+    <tache-resizer
+      v-for="position in resizers"
+      :key="position"
+      :owner="model"
+      :position="position"
+    />
+  </g>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import Joint from './joint'
+import TacheResizer from './tache-resizer'
+import tacheMethods from './common-methods'
+import { watchShowName } from '../util'
+export default {
+  name: 'CopyTask',
+  components: {
+    Joint,
+    TacheResizer
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 一个tache有上右下左四个连接点，这四个连接点的坐标根据tache的位置和大小计算出来
+      jointPoints: [],
+      resizers: ['NW', 'NE', 'SW', 'SE'],
+      name: this.model.name
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'selectedTaches',
+      'processI18n'
+    ]),
+    text() {
+      return {
+        x: this.model.x + this.model.width / 2,
+        y: this.model.y + this.model.height / 2
+      }
+    }
+  },
+  created() {
+    this.name = watchShowName(this, this.name)
+  },
+  mounted() {
+    this.$watch('model.name', function(newVal) {
+      this.name = watchShowName(this, newVal)
+    })
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setPropertiesEditorFor',
+      'setContextMenuVisible'
+    ]),
+    ...tacheMethods
+  }
+}
+</script>
+<style>
+
+</style>
+

package/packages/workflow-editor/src/taches/custom-task.vue

@@ -0,0 +1,88 @@
+<template>
+  <g
+    @mousedown.stop="startDrag"
+    @mouseup="endDrag"
+    @mouseenter="showJoints"
+    @mouseleave="hideJoints"
+    @dblclick.stop="setPropertiesEditorFor('HumanTask')"
+  >
+    <rect
+      ref="tache"
+      :width="model.width"
+      :height="model.height"
+      :class="{'draggable':true,'task-tache':true, 'selected':model.isSelected}"
+      :x="model.x"
+      :y="model.y"
+      rx="6"
+      ry="6"
+    />
+    <text
+      :x="text.x"
+      :y="text.y"
+      text-anchor="middle"
+      class="draggable"
+    >
+      {{ model.name }}
+    </text>
+    <joint
+      v-for="position in jointPoints"
+      :key="position"
+      :parent="model"
+      :position="position"
+    />
+    <tache-resizer
+      v-for="position in resizers"
+      :key="position"
+      :owner="model"
+      :position="position"
+    />
+  </g>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import Joint from './joint'
+import TacheResizer from './tache-resizer'
+import tacheMethods from './common-methods'
+export default {
+  name: 'CustomTask',
+  components: {
+    Joint,
+    TacheResizer
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 一个tache有上右下左四个连接点，这四个连接点的坐标根据tache的位置和大小计算出来
+      jointPoints: [],
+      resizers: ['NW', 'NE', 'SW', 'SE']
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'selectedTaches'
+    ]),
+    text() {
+      return {
+        x: this.model.x + this.model.width / 2,
+        y: this.model.y + this.model.height / 2
+      }
+    }
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setPropertiesEditorFor',
+      'setContextMenuVisible'
+    ]),
+    ...tacheMethods
+  }
+}
+</script>
+<style>
+
+</style>
+

package/packages/workflow-editor/src/taches/decision.vue

@@ -0,0 +1,102 @@
+<template>
+  <g
+    @mousedown.stop="startDrag"
+    @mouseup="endDrag"
+    @mouseenter="showJoints"
+    @mouseleave="hideJoints"
+    @dblclick.stop="setPropertiesEditorFor('Decision')"
+  >
+    <rect
+      :width="model.width"
+      :height="model.height"
+      :class="{'draggable':true,'decision':!model.isSelected, 'selected':model.isSelected}"
+      :x="model.x"
+      :y="model.y"
+      rx="6"
+      ry="6"
+    />
+    <use
+      xlink:href="#icon-decision"
+      :x="model.x"
+      :y="model.y"
+      :width="model.width"
+      :height="model.height"
+      fill="#999"
+      class="draggable"
+    />
+    <text
+      :x="text.x"
+      :y="text.y"
+      text-anchor="middle"
+      class="draggable"
+    >
+      {{ name }}
+    </text>
+    <joint
+      v-for="position in jointPoints"
+      :key="position"
+      :parent="model"
+      :position="position"
+    />
+  </g>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import Joint from './joint'
+import tacheMethods from './common-methods'
+import { watchShowName } from '../util'
+export default {
+  name: 'Decision',
+  components: {
+    Joint
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 一个tache有上右下左四个连接点，这四个连接点的坐标根据tache的位置和大小计算出来
+      jointPoints: [],
+      name: this.model.name
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'selectedTaches',
+      'processI18n'
+    ]),
+    text() {
+      return {
+        x: this.model.x + this.model.width / 2,
+        // TODO: 12应该是字体大小加上一点空隙，换成变量值表示
+        y: this.model.y + this.model.height + 12
+      }
+    }
+  },
+  created() {
+    this.name = watchShowName(this, this.name)
+  },
+  mounted() {
+    this.$watch('model.name', function(newVal) {
+      this.name = watchShowName(this, newVal)
+    })
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setPropertiesEditorFor',
+      'setContextMenuVisible'
+    ]),
+    ...tacheMethods
+  }
+}
+</script>
+<style>
+  .decision{
+    stroke-width: 0;
+    fill:#fff;
+  }
+</style>
+

package/packages/workflow-editor/src/taches/end.vue

@@ -0,0 +1,76 @@
+<template>
+  <g
+    @mousedown.stop="startDrag"
+    @mouseup="endDrag"
+    @mouseenter="showJoints"
+    @mouseleave="hideJoints"
+    @dblclick.stop="setPropertiesEditorFor('')"
+  >
+    <rect
+      :width="model.width"
+      :height="model.height"
+      :class="{'draggable':true,'end':!model.isSelected, 'selected':model.isSelected}"
+      :x="model.x"
+      :y="model.y"
+      rx="6"
+      ry="6"
+    />
+    <use
+      xlink:href="#icon-end"
+      :x="model.x"
+      :y="model.y"
+      :width="model.width"
+      :height="model.height"
+      fill="#F56C6C"
+      class="draggable"
+    />
+    <joint
+      v-for="position in jointPoints"
+      :key="position"
+      :parent="model"
+      :position="position"
+    />
+  </g>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import Joint from './joint'
+import tacheMethods from './common-methods'
+export default {
+  name: 'End',
+  components: {
+    Joint
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 一个tache有上右下左四个连接点，这四个连接点的坐标根据tache的位置和大小计算出来
+      jointPoints: []
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'selectedTaches'
+    ])
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setPropertiesEditorFor',
+      'setContextMenuVisible'
+    ]),
+    ...tacheMethods
+  }
+}
+</script>
+<style>
+  .end{
+    stroke-width: 0;
+    fill:#fff;
+  }
+</style>
+

package/packages/workflow-editor/src/taches/fork.vue

@@ -0,0 +1,102 @@
+<template>
+  <g
+    @mousedown.stop="startDrag"
+    @mouseup="endDrag"
+    @mouseenter="showJoints"
+    @mouseleave="hideJoints"
+    @dblclick.stop="setPropertiesEditorFor('Fork')"
+  >
+    <rect
+      :width="model.width"
+      :height="model.height"
+      :class="{'draggable':true,'decision':!model.isSelected, 'selected':model.isSelected}"
+      :x="model.x"
+      :y="model.y"
+      rx="6"
+      ry="6"
+    />
+    <use
+      xlink:href="#icon-fork"
+      :x="model.x"
+      :y="model.y"
+      :width="model.width"
+      :height="model.height"
+      fill="#999"
+      class="draggable"
+    />
+    <text
+      :x="text.x"
+      :y="text.y"
+      text-anchor="middle"
+      class="draggable"
+    >
+      {{ name }}
+    </text>
+    <joint
+      v-for="position in jointPoints"
+      :key="position"
+      :parent="model"
+      :position="position"
+    />
+  </g>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import Joint from './joint'
+import tacheMethods from './common-methods'
+import { watchShowName } from '../util'
+export default {
+  name: 'Fork',
+  components: {
+    Joint
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 一个tache有上右下左四个连接点，这四个连接点的坐标根据tache的位置和大小计算出来
+      jointPoints: [],
+      name: this.model.name
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'selectedTaches',
+      'processI18n'
+    ]),
+    text() {
+      return {
+        x: this.model.x + this.model.width / 2,
+        // TODO: 12应该是字体大小加上一点空隙，换成变量值表示
+        y: this.model.y + this.model.height + 12
+      }
+    }
+  },
+  created() {
+    this.name = watchShowName(this, this.name)
+  },
+  mounted() {
+    this.$watch('model.name', function(newVal) {
+      this.name = watchShowName(this, newVal)
+    })
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setPropertiesEditorFor',
+      'setContextMenuVisible'
+    ]),
+    ...tacheMethods
+  }
+}
+</script>
+<style>
+  .decision{
+    stroke-width: 0;
+    fill:#fff;
+  }
+</style>
+