feat(web): 增加编辑侧边栏关闭时保存节点数据

service-web/client/src/pages/Test.tsx

@@ -1,4 +1,4 @@
-import {DeleteFilled, EditFilled, FolderFilled, PlusCircleFilled, SaveFilled} from '@ant-design/icons'
+import {DeleteFilled, EditFilled, PlusCircleFilled, SaveFilled} from '@ant-design/icons'
 import {
   addEdge,
   applyEdgeChanges,
@@ -34,6 +34,14 @@ const FlowableDiv = styled.div`
         z-index: 999;
         position: absolute;
     }
+
+    .node-card {
+        cursor: grab;
+
+        .card-container {
+            cursor: default;
+        }
+    }
 `
 
 type AmisNodeType = 'normal' | 'start' | 'end'
@@ -46,15 +54,17 @@ const AmisNode = (
   columnSchema?: Schema[],
 ) => {
   const {id, data} = props
-  const {removeNode, editNode} = data
+  const {getDataById, removeNode, editNode} = data
   return (
     <div className="p-1 w-64">
       <Card
+        className="node-card"
         title={name}
         size="small"
         hoverable
       >
         <Dropdown
+          className="card-container"
           trigger={['contextMenu']}
           menu={{
             items: [
@@ -80,7 +90,7 @@ const AmisNode = (
                   removeNode(id)
                   break
               }
-            }
+            },
           }}
         >
           <div className="card-description p-2 text-secondary text-sm">
@@ -258,7 +268,7 @@ const useFlowStore = create<{
   addNode: node => set({nodes: get().nodes.concat(node)}),
   removeNode: id => {
     set({
-      nodes: filter(get().nodes, node => !isEqual(node.id, id))
+      nodes: filter(get().nodes, node => !isEqual(node.id, id)),
     })
   },
   setNodes: nodes => set({nodes}),
@@ -302,7 +312,6 @@ function Test() {
     },
   ])
   const [open, setOpen] = useState(false)
-  const onClose = () => setOpen(false)
 
   const {getData, getDataById, setDataById} = useStore()
   const {
@@ -323,28 +332,70 @@ function Test() {
       setCurrentNodeForm(
         amisRender(
           {
-            debug: commonInfo.debug,
-            title: name,
-            type: 'form',
-            wrapWithPanel: false,
-            onEvent: {
-              change: {
-                actions: [
+            type: 'wrapper',
+            size: 'none',
+            body: [
+              {
+                type: 'tpl',
+                className: 'text-secondary',
+                tpl: description,
+              },
+              {
+                debug: commonInfo.debug,
+                title: name,
+                type: 'form',
+                wrapWithPanel: false,
+                onEvent: {
+                  submitSucc: {
+                    actions: [
+                      {
+                        actionType: 'custom',
+                        // @ts-ignore
+                        script: (context, action, event) => {
+                          setDataById(id, context.props.data)
+                          setOpen(false)
+                        },
+                      },
+                    ],
+                  },
+                },
+                body: [
+                  ...(columnSchema ?? []),
                   {
-                    actionType: 'custom',
-                    // @ts-ignore
-                    script: (context, action, event) => {
-                      console.log(id, context.props.data)
-                      setDataById(id, context.props.data)
-                    },
-                  }
-                ]
-              }
-            },
-            body: columnSchema,
+                    type: 'wrapper',
+                    size: 'none',
+                    className: 'space-x-1 float-right',
+                    body: [
+                      {
+                        type: 'action',
+                        label: '取消',
+                        onEvent: {
+                          click: {
+                            actions: [
+                              {
+                                actionType: 'custom',
+                                // @ts-ignore
+                                script: (context, action, event) => {
+                                  setOpen(false)
+                                },
+                              },
+                            ],
+                          },
+                        },
+                      },
+                      {
+                        type: 'submit',
+                        label: '保存',
+                        level: 'primary',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ]
           },
           getDataById(id),
-        )
+        ),
       )
       setOpen(true)
     }
@@ -407,7 +458,8 @@ function Test() {
       <Drawer
         title="节点编辑"
         open={open}
-        onClose={onClose}
+        closeIcon={false}
+        maskClosable={false}
         destroyOnHidden
       >
         {currentNodeForm}