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

package/packages/workflow-editor/src/main/context-menu.vue

@@ -0,0 +1,147 @@
+<template>
+  <ul class="context-menu">
+    <li v-for="menu in menus" :key="menu.name" @mousedown.stop="execute(menu.name)">
+      <icon-svg :icon="menu.icon" /><span>{{ menu.label }}</span>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import IconSvg from './icon-svg'
+export default {
+  name: 'ContextMenu',
+  components: {
+    IconSvg
+  },
+  data() {
+    return {
+      menusForTransition: [
+        { name: 'switch-line-type-StraightLine', label: this.$t('workflowEditor.main.straightLine'), icon: 'switch' },
+        { name: 'switch-line-type-CurveLine', label: this.$t('workflowEditor.main.curveLine'), icon: 'switch' },
+        { name: 'switch-line-type-BrokenLine', label: this.$t('workflowEditor.main.brokenLine'), icon: 'switch' },
+        { name: 'remove', label: this.$t('workflowEditor.common.remove'), icon: 'delete' },
+        { name: 'properties', label: this.$t('workflowEditor.common.attribute'), icon: 'properties' }
+      ],
+      menusForTache: [
+        { name: 'remove', label: this.$t('workflowEditor.common.remove'), icon: 'delete' },
+        { name: 'properties', label: this.$t('workflowEditor.common.attribute'), icon: 'properties' }        
+      ],
+      menusForProcess: [
+        { name: 'properties', label: this.$t('workflowEditor.common.attribute'), icon: 'properties' }
+      ],
+      componentsWithoutPropertiesEditor: ['Start', 'End']
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'taches',
+      'transitions',
+      'selectedTransition',
+      'selectedTaches'
+    ]),
+    menuType() {
+      let type = ''
+      if (this.selectedTransition) {
+        type = 'Transition'
+      } else if (this.selectedTaches.length === 1) {
+        type = 'Tache'
+      }
+      if (this.selectedTransition === null && this.selectedTaches.length === 0) {
+        type = 'Process'
+      }
+      return type
+    },
+    menus() {
+      if (this.menuType) {
+        return this['menusFor' + this.menuType]
+      } else {
+        return []
+      }
+    }
+  },
+  created() {
+    if(this.selectedTaches.length > 0) {
+      const tacheType = this.componentsWithoutPropertiesEditor.indexOf(this.selectedTaches[0].type) >= 0 ? '' : this.selectedTaches[0].type
+      if(this.menuType && this.menuType === 'Tache' && tacheType) {
+        // 只有环节才需要”拷贝“菜单
+        this.menusForTache.push({ name: 'copy', label: this.$t('workflowEditor.common.copy'), icon: 'fuzhi' })
+      }
+    }
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setPropertiesEditorFor',
+      'setContextMenuVisible',
+      'setSourceComponentForCopy'
+    ]),
+    switchLineType(lineType) {
+      this.selectedTransition.lineInfo.controlPoint = null
+      this.selectedTransition.lineInfo.type = lineType
+    },
+    execute(menu) {
+      console.log('menu:' + menu)
+      if (menu.indexOf('switch-line-type-') >= 0) {
+        const lineType = menu.substring(menu.lastIndexOf('-') + 1)
+        this.switchLineType(lineType)
+      }
+      if (menu === 'remove') {
+        if (this.menuType === 'Tache') {
+          this.taches.splice(this.taches.indexOf(this.selectedTaches[0]), 1)
+        } else if (this.menuType === 'Transition') {
+          this.transitions.splice(this.transitions.indexOf(this.selectedTransition), 1)
+        }
+      }
+
+      if (menu === 'properties') {
+        if (this.menuType === 'Tache') {
+          this.setPropertiesEditorFor(
+            this.componentsWithoutPropertiesEditor.indexOf(this.selectedTaches[0].type) >= 0 ? '' : this.selectedTaches[0].type
+          )
+        } else if (this.menuType === 'Transition') {
+          this.setPropertiesEditorFor('Transition')
+        } else {
+          this.setPropertiesEditorFor('Process')
+        }
+      }
+      if (menu === 'copy') {
+        this.setSourceComponentForCopy(
+          this.componentsWithoutPropertiesEditor.indexOf(this.selectedTaches[0].type) >= 0 ? '' : this.selectedTaches[0].type
+        )
+      }
+      this.setContextMenuVisible(false)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+li {
+  color: #333;
+}
+.context-menu {
+  position: fixed;
+  background: #fff;
+  z-index: 999;
+  padding:5px;
+  margin:0
+}
+.context-menu li {
+  min-width: 75px;
+  height: 28px;
+  line-height: 28px;
+  text-align: left;
+  color: #1a1a1a;
+}
+.context-menu li:hover {
+  background: #42b983;
+  color: #fff;
+}
+.context-menu {
+    border: 1px solid #eee;
+    box-shadow: 0 0.5em 1em 0 rgba(0,0,0,.1);
+    border-radius: 5px;
+}
+li {
+    list-style-type:none;
+}
+</style>

package/packages/workflow-editor/src/main/icon-svg.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg class="svg-icon" aria-hidden="true">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'IconSvg',
+  props: {
+    icon: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.icon}`
+    }
+  }
+}
+</script>
+
+<style>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

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

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

@@ -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,40 @@
+<template>
+  <el-dialog
+    model-value
+    :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
+    }
+  },
+  data(){
+    return {
+      dialogVisible: true
+    }
+  }
+}
+</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 style="height: calc(100vh - 98px);background-color: #FFFFFF">
+				<h3>{{ $t('workflowEditor.main.tacheType') }}</h3>
+				<el-button
+						v-for="component in componentList"
+						:key="component.name"
+						:type="component.type"
+						:class="component.class"
+						: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>