init

src/views/workflow/process/common/InsertButton.vue

@@ -0,0 +1,117 @@
+<template>
+  <el-popover :visible="visible" placement="bottom-start" title="添加流程节点" width="350">
+    <div class="node-select">
+      <div @click="addApprovalNode">
+        <el-icon style="color:rgb(255, 148, 62);">
+          <Coordinate/>
+        </el-icon>
+        <span>审批人</span>
+      </div>
+      <div @click="addCcNode">
+        <el-icon style="color:rgb(50, 150, 250);">
+          <Promotion/>
+        </el-icon>
+        <span>抄送人</span>
+      </div>
+      <div @click="addConditionsNode">
+        <el-icon style="color:rgb(21, 188, 131);">
+          <Share/>
+        </el-icon>
+        <span>条件分支</span>
+      </div>
+      <div @click="addConcurrentsNode">
+        <el-icon style="color:#718dff;">
+          <Operation/>
+        </el-icon>
+        <span>并行分支</span>
+      </div>
+      <div @click="addDelayNode">
+        <el-icon style="color:#f25643;">
+          <Clock/>
+        </el-icon>
+        <span>延迟等待</span>
+      </div>
+      <div @click="addTriggerNode">
+        <el-icon style="color:#15BC83;">
+          <SetUp/>
+        </el-icon>
+        <span>触发器</span>
+      </div>
+    </div>
+    <template #reference>
+      <el-button :icon="Plus" slot="reference" type="primary" @click="visible = !visible" size="small" circle></el-button>
+    </template>
+  </el-popover>
+</template>
+
+<script setup>
+import {Plus } from '@element-plus/icons-vue'
+
+const emit = defineEmits(['insertNode'])
+const visible = ref(false)
+
+
+const addApprovalNode = () => {
+  emit('insertNode', "APPROVAL")
+  disVisible()
+}
+
+const addCcNode = () => {
+  emit('insertNode', "CC")
+  disVisible()
+}
+const addDelayNode = () => {
+  emit('insertNode', "DELAY")
+  disVisible()
+}
+const addConditionsNode = () => {
+  emit('insertNode', "CONDITIONS")
+  disVisible()
+}
+const addConcurrentsNode = () => {
+  emit('insertNode', "CONCURRENTS")
+  disVisible()
+}
+const addTriggerNode = () => {
+  emit('insertNode', "TRIGGER")
+  disVisible()
+}
+
+const disVisible = () =>{
+  visible.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.node-select {
+  div {
+    display: inline-block;
+    margin: 5px 5px;
+    cursor: pointer;
+    padding: 10px 15px;
+    border: 1px solid #F8F9F9;
+    background-color: #F8F9F9;
+    border-radius: 10px;
+    width: 130px;
+    position: relative;
+
+    span {
+      position: absolute;
+      left: 65px;
+      top: 18px;
+    }
+
+    &:hover {
+      background-color: #fff;
+      box-shadow: 0 0 8px 2px #d6d6d6;
+    }
+
+    i {
+      font-size: 25px;
+      padding: 5px;
+      border: 1px solid #dedfdf;
+      border-radius: 14px;
+    }
+  }
+}
+</style>