Просмотр исходного кода

refactor(EasyProcess): 重构节点配置抽屉组件

将原有的BaseDrawer组件替换为新的DrawerWrap组件,简化节点配置逻辑
移除不再使用的tempNodeId和相关方法,直接使用nodeId进行校验
zhanghaijun месяцев назад: 11
Родитель
Сommit
6fd57cb14e

+ 9 - 22
src/components/business/EasyProcess/node/base/BaseNode.vue

@@ -9,7 +9,7 @@
       </div>
       </div>
       <!-- body -->
       <!-- body -->
       <div class="ep-node-body" @click="showNodeDrawer">
       <div class="ep-node-body" @click="showNodeDrawer">
-        <component ref="node" :is="nodeComponents[props.node.nodeType]" :tempNodeId="tempNodeId" :node="props.node" />
+        <component ref="node" :is="nodeComponents[props.node.nodeType as keyof typeof nodeComponents]" :node="props.node" />
       </div>
       </div>
       <!-- 校验错误提示 -->
       <!-- 校验错误提示 -->
       <div class="ep-node-error-msg" v-if="isError">
       <div class="ep-node-error-msg" v-if="isError">
@@ -22,16 +22,16 @@
     <NodeAdd :node="props.node" />
     <NodeAdd :node="props.node" />
 
 
     <!-- 节点配置Drawer -->
     <!-- 节点配置Drawer -->
-    <BaseDrawer ref="nodeDrawer" @updateConfig="updateConfig" @cancelUpdateConfig="cancelUpdateConfig" />
+    <!-- <BaseDrawer ref="nodeDrawer" @updateConfig="updateConfig" @cancelUpdateConfig="cancelUpdateConfig" /> -->
+    <DrawerWrap ref="drawerWrap" />
   </div>
   </div>
 </template>
 </template>
 
 
 <script setup lang="ts" name="BaseNode">
 <script setup lang="ts" name="BaseNode">
-  import { ref, shallowRef, getCurrentInstance, watch, computed, onUnmounted, inject } from 'vue'
-  import BaseDrawer from './BaseDrawer.vue'
+  import { ref, shallowRef, watch, computed, onUnmounted, inject } from 'vue'
+  import DrawerWrap from './drawer-wrap.vue'
   import NodeAdd from './node_add.vue'
   import NodeAdd from './node_add.vue'
   import { nodeConfigData, ProcessConstant } from '../../common/process.data'
   import { nodeConfigData, ProcessConstant } from '../../common/process.data'
-  import { getUUID } from '../../common/common.util'
   import { EasyProcess } from '../../common/process.type'
   import { EasyProcess } from '../../common/process.type'
   import { Validator } from '../../common/validator.util'
   import { Validator } from '../../common/validator.util'
   import { ProcessHelper } from '../../common/process.helper'
   import { ProcessHelper } from '../../common/process.helper'
@@ -68,11 +68,11 @@
   const errorTips = ref<boolean>(false)
   const errorTips = ref<boolean>(false)
   const showErrorTips = (flag: boolean) => (errorTips.value = flag)
   const showErrorTips = (flag: boolean) => (errorTips.value = flag)
   const errorMessage = computed<string>(() => {
   const errorMessage = computed<string>(() => {
-    let result = validator?.getResult(tempNodeId)
+    let result = validator?.getResult(props.node.nodeId)
     return result ? (result.message ?? '') : ''
     return result ? (result.message ?? '') : ''
   })
   })
   const isError = computed<boolean>(() => {
   const isError = computed<boolean>(() => {
-    let result = validator?.getResult(tempNodeId)
+    let result = validator?.getResult(props.node.nodeId)
     return result ? !result.valid : false
     return result ? !result.valid : false
   })
   })
   // ---------- 节点数据校验 --------- end
   // ---------- 节点数据校验 --------- end
@@ -81,31 +81,18 @@
   // 节点是否可以被移除
   // 节点是否可以被移除
   const canRemoved = computed(() => config.value.canRemoved)
   const canRemoved = computed(() => config.value.canRemoved)
 
 
-  const { proxy } = getCurrentInstance()
-
-  // 生成临时节点ID
-  const tempNodeId = getUUID()
-
   onUnmounted(async () => {
   onUnmounted(async () => {
     validator?.remove(props.node.nodeId)
     validator?.remove(props.node.nodeId)
     validator?.validate()
     validator?.validate()
   })
   })
 
 
   // 显示节点配置组件
   // 显示节点配置组件
+  const drawerWrap = ref()
   const showNodeDrawer = () => {
   const showNodeDrawer = () => {
     if (config.value.hasDrawer) {
     if (config.value.hasDrawer) {
-      proxy.$refs.nodeDrawer.show(props.node)
+      drawerWrap.value.show(props.node)
     }
     }
   }
   }
-
-  // 更新节点配置属性
-  const updateConfig = (data: EasyProcess.NodeConfig) => {
-    props.node = data
-    validator?.validate()
-  }
-
-  // 取消更新节点配置属性
-  const cancelUpdateConfig = () => validator?.validate()
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>

+ 20 - 0
src/components/business/EasyProcess/node/base/drawer-wrap.vue

@@ -0,0 +1,20 @@
+<template>
+  <Dialog>
+    <div>节点配置</div> <div>{{ record?.nodeName }}</div></Dialog
+  >
+</template>
+<script setup lang="tsx">
+  import { useDialog } from '@/components/dialog'
+  import { EasyProcess } from '../../common/process.type'
+  const record = ref<EasyProcess.NodeConfig>()
+
+  const [Dialog, dialogApi] = useDialog({ width: '30%', dialogType: 'drawer', modal: true })
+  defineExpose({
+    show(data: EasyProcess.NodeConfig) {
+      record.value = data
+      dialogApi.setState({ title: data.nodeName || '节点配置' })
+      dialogApi.open()
+    }
+  })
+</script>
+<style lang="scss" scoped></style>