代码优化, bug 修复

src/components/SimpleProcessDesignerV2/src/node.ts

@@ -90,6 +90,55 @@ export function useFormFieldsPermission(defaultPermission: FieldPermissionType)
     getNodeConfigFormFields
   }
 }
+/**
+ * @description 获取表单的字段
+ */
+export function useFormFields() {
+  // 解析后的表单字段
+  const formFields = inject<Ref<string[]>>('formFields') // 流程表单字段
+  const parseFormFields = () => {
+    const parsedFormFields: Array<Record<string, string>> = []
+    if (formFields) {
+      formFields.value.forEach((fieldStr: string) => {
+        parseField(JSON.parse(fieldStr), parsedFormFields)
+      })
+    }
+    return parsedFormFields
+  }
+  // 解析字段。
+  const parseField = (
+    rule: Record<string, any>,
+    parsedFormFields: Array<Record<string, string>>,
+    parentTitle: string = ''
+  ) => {
+    const { field, title: tempTitle, children, type } = rule
+    if (field && tempTitle) {
+      let title = tempTitle
+      if (parentTitle) {
+        title = `${parentTitle}.${tempTitle}`
+      }
+      parsedFormFields.push({
+        field,
+        title,
+        type
+      })
+      // TODO 子表单 需要处理子表单字段
+      // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
+      //   // 解析子表单的字段
+      //   rule.props.rule.forEach((item) => {
+      //     parseFieldsSetDefaultPermission(item, fieldsPermission, title)
+      //   })
+      // }
+    }
+    if (children && Array.isArray(children)) {
+      children.forEach((rule) => {
+        parseField(rule, parsedFormFields)
+      })
+    }
+  }
+
+  return parseFormFields()
+}
 
 export type UserTaskFormType = {
   //candidateParamArray: any[]
@@ -408,3 +457,22 @@ export function useNodeName(nodeType: NodeType) {
     blurEvent
   }
 }
+
+export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
+  // 显示节点名称输入框
+  const showInput = ref(false)
+  // 节点名称输入框失去焦点
+  const blurEvent = () => {
+    showInput.value = false
+    node.value.name = node.value.name || (NODE_DEFAULT_NAME.get(nodeType) as string)
+  }
+  // 点击节点标题进行输入
+  const clickTitle = () => {
+    showInput.value = true
+  }
+  return {
+    showInput,
+    clickTitle,
+    blurEvent
+  }
+}

src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue

@@ -13,7 +13,7 @@
             v-model="currentNode.name"
             :placeholder="currentNode.name"
           />
-          <div v-else class="node-title" @click="clickEvent">
+          <div v-else class="node-title" @click="clickTitle">
             {{ currentNode.name }}
           </div>
         </div>
@@ -40,8 +40,9 @@
   </div>
 </template>
 <script setup lang="ts">
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
 import NodeHandler from '../NodeHandler.vue'
+import { useNodeName2, useWatchNode } from '../node'
 import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue'
 defineOptions({
   name: 'CopyTaskNode'
@@ -56,27 +57,12 @@ const props = defineProps({
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined]
 }>()
-const currentNode = ref<SimpleFlowNode>(props.flowNode)
 
-// 监控当前节点的变化
-watch(
-  () => props.flowNode,
-  (newValue) => {
-    currentNode.value = newValue
-  }
-)
-// 显示节点名称输入框
-const showInput = ref(false)
-// 节点名称输入框失去焦点
-const blurEvent = () => {
-  showInput.value = false
-  currentNode.value.name =
-    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
-}
-// 点击节点标题进行输入
-const clickEvent = () => {
-  showInput.value = true
-}
+// 监控节点的变化
+const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.COPY_TASK_NODE)
+
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {

src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue

@@ -15,7 +15,7 @@
             v-model="currentNode.name"
             :placeholder="currentNode.name"
           />
-          <div v-else class="node-title" @click="clickEvent">
+          <div v-else class="node-title" @click="clickTitle">
             {{ currentNode.name }}
           </div>
         </div>
@@ -37,8 +37,8 @@
 </template>
 <script setup lang="ts">
 import NodeHandler from '../NodeHandler.vue'
-import { useWatchNode } from '../node'
-import { SimpleFlowNode, NODE_DEFAULT_NAME, NODE_DEFAULT_TEXT, NodeType } from '../consts'
+import { useWatchNode, useNodeName2 } from '../node'
+import { SimpleFlowNode, NODE_DEFAULT_TEXT, NodeType } from '../consts'
 import StartUserNodeConfig from '../nodes-config/StartUserNodeConfig.vue'
 defineOptions({
   name: 'StartEventNode'
@@ -53,21 +53,11 @@ const props = defineProps({
 const emits = defineEmits<{
   'update:modelValue': [node: SimpleFlowNode | undefined]
 }>()
-
+// 监控节点变化
 const currentNode = useWatchNode(props)
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 
-// 显示节点名称输入框
-const showInput = ref(false)
-// 节点名称输入框失去焦点
-const blurEvent = () => {
-  showInput.value = false
-  currentNode.value.name =
-    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.START_USER_NODE) as string)
-}
-// 点击节点标题进行输入
-const clickEvent = () => {
-  showInput.value = true
-}
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {

src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue

@@ -13,7 +13,7 @@
             v-model="currentNode.name"
             :placeholder="currentNode.name"
           />
-          <div v-else class="node-title" @click="clickEvent">
+          <div v-else class="node-title" @click="clickTitle">
             {{ currentNode.name }}
           </div>
         </div>
@@ -44,8 +44,8 @@
   />
 </template>
 <script setup lang="ts">
-import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT, NODE_DEFAULT_NAME } from '../consts'
-import { useWatchNode } from '../node'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { useWatchNode, useNodeName2 } from '../node'
 import NodeHandler from '../NodeHandler.vue'
 import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue'
 defineOptions({
@@ -61,9 +61,10 @@ const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined]
   'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: NodeType]
 }>()
-
+// 监控节点变化
 const currentNode = useWatchNode(props)
-
+// 节点名称编辑
+const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
@@ -72,19 +73,6 @@ const openNodeConfig = () => {
   nodeSetting.value.openDrawer()
 }
 
-// 显示节点名称输入框
-const showInput = ref(false)
-// 节点名称输入框失去焦点
-const blurEvent = () => {
-  showInput.value = false
-  currentNode.value.name =
-    currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
-}
-// 点击节点标题进行输入
-const clickEvent = () => {
-  showInput.value = true
-}
-
 const deleteNode = () => {
   emits('update:flowNode', currentNode.value.childNode)
 }

src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss

@@ -119,6 +119,9 @@
             &.copy-task {
               color: #3296fa;
             }
+            &.start-user {
+              color: #676565;
+            }
           }
 
           .node-title {
@@ -669,9 +672,9 @@
 @font-face {
   font-family: 'iconfont'; /* Project id 4495938 */
   src:
-    url('iconfont.woff2?t=1712392083512') format('woff2'),
-    url('iconfont.woff?t=1712392083512') format('woff'),
-    url('iconfont.ttf?t=1712392083512') format('truetype');
+    url('iconfont.woff2?t=1724339470412') format('woff2'),
+    url('iconfont.woff?t=1724339470412') format('woff'),
+    url('iconfont.ttf?t=1724339470412') format('truetype');
 }
 
 .iconfont {
@@ -682,7 +685,11 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-Inclusive:before {
+.icon-start-user:before {
+  content: '\e679';
+}
+
+.icon-inclusive:before {
   content: '\e602';
 }