添加操作权限

src/views/flowDesign/hooks/useNode.ts

@@ -69,7 +69,14 @@ const useNode = (node: FlowNode) => {
             multi: 'sequential',
             choice: false,
             self: false,
-            nobody: 'reject'
+            nobody: 'reject',
+            operations: {
+                complete: true,
+                refuse: true,
+                transfer: false,
+                addMulti: false,
+                minusMulti: false
+            }
         } as ApprovalNode
         if (child) {
             child.pid = id

src/views/flowDesign/nodes/Approval/index.ts

@@ -17,4 +17,17 @@ export interface ApprovalNode extends FlowNode {
     multi: "sequential" | "joint" | "single"
     // 审批人为空时处理方式：reject-驳回，admin-管理员，pass-通过
     nobody: 'reject' | 'pass'
+    // 操作权限
+    operations: {
+        // 同意
+        complete: boolean
+        // 拒绝
+        refuse: boolean
+        // 转办
+        transfer: boolean
+        // 加签
+        addMulti: boolean
+        // 减签
+        minusMulti: boolean
+    }
 }

src/views/flowDesign/nodes/Node/index.vue

@@ -12,6 +12,7 @@ export interface NodeProps {
   color?: string
   readOnly?: boolean
   close?: boolean
+  arrow?: boolean
 }
 
 const icons: Record<string, Component> = {
@@ -23,7 +24,8 @@ const icons: Record<string, Component> = {
 
 const $props = withDefaults(defineProps<NodeProps>(), {
   readOnly: false,
-  close: true
+  close: true,
+  arrow: true
 })
 const $emits = defineEmits<{
   (e: 'update:node', title: string): void
@@ -168,5 +170,19 @@ const onClickOutside = () => {
       }
     }
   }
+  .arrow{
+   /* &:before{
+      content: '';
+      position: absolute;
+      top: -13px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      border-style: solid;
+      border-width: 8px 6px 0;
+      border-color: var(--el-border-color) transparent transparent;
+      background-color: var(--el-bg-color);
+    }*/
+  }
 }
 </style>

src/views/flowDesign/nodes/Start/index.vue

@@ -13,6 +13,7 @@ withDefaults(defineProps<StartProps>(), {})
 <template>
   <div class="start-box">
     <Node icon="List"
+          :arrow="false"
           :close="false"
           color="#8c7cf3"
           :node="node">

src/views/flowDesign/penal/ApprovalAttr.vue

@@ -3,6 +3,7 @@ import Segmented from '~/components/Segmented'
 import {useVModels} from '@vueuse/core'
 import {ApprovalNode} from '../nodes/Approval/index'
 import {ref} from "vue";
+import {CircleCheck, CircleClose,Switch,Plus,Minus} from "@element-plus/icons-vue";
 
 const activeName = ref('properties')
 
@@ -89,7 +90,106 @@ const {node} = useVModels($props, $emits)
       待添加...
     </el-tab-pane>
     <el-tab-pane label="操作权限" name="operationPermissions">
-      待添加...
+      <div class="flow-opt-item">
+        <el-icon :size="32" class="flow-opt-item__icon">
+          <CircleCheck/>
+        </el-icon>
+        <div class="flow-opt-item__content">
+          <el-text tag="b">
+            同意
+          </el-text>
+          <div class="flow-opt-item__second">
+            同意描述、同意描述、同意描述、同意描述、同意描述、同意描述
+          </div>
+        </div>
+        <el-switch
+            v-model="node.operations.complete"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+        />
+      </div>
+      <el-divider/>
+      <div class="flow-opt-item">
+        <el-icon :size="32" class="flow-opt-item__icon">
+          <CircleClose/>
+        </el-icon>
+        <div class="flow-opt-item__content">
+          <el-text tag="b">
+            拒绝
+          </el-text>
+          <div class="flow-opt-item__second">
+            拒绝描述、拒绝描述、拒绝描述、拒绝描述、拒绝描述、拒绝描述
+          </div>
+        </div>
+        <el-switch
+            v-model="node.operations.refuse"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+        />
+      </div>
+      <el-divider/>
+      <div class="flow-opt-item">
+        <el-icon :size="32" class="flow-opt-item__icon">
+          <Switch/>
+        </el-icon>
+        <div class="flow-opt-item__content">
+          <el-text tag="b">
+            转办
+          </el-text>
+          <div class="flow-opt-item__second">
+            转办描述、转办描述、转办描述、转办描述、转办描述、转办描述
+          </div>
+        </div>
+        <el-switch
+            v-model="node.operations.transfer"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+        />
+      </div>
+      <el-divider/>
+      <div class="flow-opt-item">
+        <el-icon :size="32" class="flow-opt-item__icon">
+          <Plus/>
+        </el-icon>
+        <div class="flow-opt-item__content">
+          <el-text tag="b">
+            加签
+          </el-text>
+          <div class="flow-opt-item__second">
+            加签描述、加签描述、加签描述、加签描述、加签描述、加签描述
+          </div>
+        </div>
+        <el-switch
+            v-model="node.operations.addMulti"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+        />
+      </div>
+      <el-divider/>
+      <div class="flow-opt-item">
+        <el-icon :size="32" class="flow-opt-item__icon">
+          <Minus/>
+        </el-icon>
+        <div class="flow-opt-item__content">
+          <el-text tag="b">
+            减签
+          </el-text>
+          <div class="flow-opt-item__second">
+            减签描述、减签描述、减签描述、减签描述、减签描述、减签描述
+          </div>
+        </div>
+        <el-switch
+            v-model="node.operations.minusMulti"
+            inline-prompt
+            active-text="开"
+            inactive-text="关"
+        />
+      </div>
+      <el-divider/>
     </el-tab-pane>
   </segmented>
 </template>
@@ -100,4 +200,28 @@ const {node} = useVModels($props, $emits)
   align-items: flex-start !important;
   flex-direction: column !important;
 }
+.flow-opt-item {
+  display: flex;
+  align-items: center;
+
+  .flow-opt-item__icon {
+    background: var(--el-color-primary);
+    color: #fff;
+    border-radius: 7px;
+    padding: 3px;
+  }
+
+  .flow-opt-item__content {
+    box-sizing: border-box;
+    flex: 1;
+    margin-left: 20px;
+    font-size: 14px;
+
+    .flow-opt-item__second {
+      margin-top: 3px;
+      font-size: 12px;
+      color: var(--el-text-color-placeholder);
+    }
+  }
+}
 </style>