init

src/views/workflow/process/nodes/ConcurrentNode.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="node">
+    <!-- 并行分支选择后右侧出现操作面板,占时不需要   <div class="node-body" @click="emit('selected')">-->
+    <div v-if="designState" class="node-body" @click="emit('selected')">
+      <div class="node-body-left" @click.stop="emit('leftMove')" v-if="level > 1">
+        <el-icon>
+          <ArrowLeftBold/>
+        </el-icon>
+      </div>
+      <div class="node-body-main">
+        <div class="node-body-main-header">
+          <span class="title">
+            <el-icon :size="15">
+              <Operation/>
+            </el-icon>
+            <ellipsis class="name" hover-tip :content="config.name ? config.name:('并行任务' + level)"/>
+          </span>
+          <span class="option">
+            <el-tooltip effect="dark" content="复制分支" placement="top">
+              <el-icon @click.stop="emit('copy')" :size="20">
+                <CopyDocument/>
+              </el-icon>
+            </el-tooltip>
+            <el-icon @click.stop="emit('delNode')" :size="20">
+                <CloseBold/>
+              </el-icon>
+          </span>
+        </div>
+        <div class="node-body-main-content">
+          <span>并行任务（同时进行）</span>
+        </div>
+      </div>
+      <div class="node-body-right" @click.stop="emit('rightMove')" v-if="level < size && designState ">
+        <el-icon>
+          <ArrowRightBold/>
+        </el-icon>
+      </div>
+    </div>
+    <div class="node-footer">
+      <div class="btn" :style="(designState ? '' : 'height:0px')">
+        <insert-button v-if="designState" @insertNode="type => emit('insertNode', type)"></insert-button>
+      </div>
+    </div>
+  </div>
+</template>
+<!--并行节点-->
+<script setup>
+import InsertButton from '../common/InsertButton.vue'
+import {Operation, ArrowRightBold, ArrowLeftBold, CopyDocument, CloseBold, Warning} from '@element-plus/icons-vue'
+import Ellipsis from '../common/Ellipsis.vue'
+import {defineProps, defineEmits} from "vue";
+
+const emit = defineEmits(['insertNode'])
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  level: {
+    type: Number,
+    default: 1
+  },
+  //条件数
+  size: {
+    type: Number,
+    default: 0
+  },
+  mode: {
+    type: String,
+    default: 'design'
+  }
+})
+const designState = computed(()=>{
+  return props.mode === 'design'
+})
+const designStart = () => {
+  // return this.$store.state.diagramMode === 'design'
+  return true;
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+
+
+.node {
+  padding: 30px 55px 0;
+  //width: 220px;
+  width: 320px;
+
+  .node-body {
+    overflow: hidden;
+    cursor: pointer;
+    min-height: 80px;
+    max-height: 120px;
+    position: relative;
+    border-radius: 5px;
+    background-color: white;
+    box-shadow: 0px 0px 5px 0px #d8d8d8;
+
+    &:hover {
+      .node-body-left, .node-body-right {
+        i {
+          display: block !important;
+        }
+      }
+
+      .node-body-main {
+        .option {
+          display: inline-block !important;
+        }
+      }
+
+      box-shadow: 0px 0px 3px 0px;
+    }
+
+    .node-body-left, .node-body-right {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      height: 100%;
+
+      i {
+        display: none;
+      }
+
+      &:hover {
+        background-color: #ececec;
+      }
+    }
+
+    .node-body-left {
+      color: #888888;
+      left: 0;
+    }
+
+    .node-body-right {
+      color: #888888;
+      right: 0;
+    }
+
+    .node-body-main {
+      position: absolute;
+      width: 188px;
+      left: 17px;
+      display: inline-block;
+
+      .node-body-main-header {
+        padding: 10px 0px 5px;
+        font-size: xx-small;
+        position: relative;
+
+        .title {
+          color: #718dff;
+
+          .name {
+            display: inline-block;
+            height: 14px;
+            width: 130px;
+            margin-left: 2px;
+          }
+        }
+
+        .option {
+          position: absolute;
+          right: 10px;
+          display: none;
+          font-size: medium;
+
+          i {
+            color: #888888;
+            padding: 0 3px;
+          }
+        }
+      }
+
+      .node-body-main-content {
+        padding: 6px;
+        color: #656363;
+        font-size: 14px;
+
+        i {
+          position: absolute;
+          top: 55%;
+          right: 10px;
+          font-size: medium;
+        }
+      }
+    }
+  }
+}
+</style>