Explorar el Código

fix: 步骤配置条件节点逻辑bug

lanjianrong hace 3 años
padre
commit
4a4e99aced

+ 1 - 1
src/components/Flow/src/shared/transformer.ts

@@ -224,7 +224,7 @@ export function transformElements<T>(
         // TODO: 加多一个条件时,索引发生变化 数据如何变化?
         return generateElements(
           node?.children?.map(item => {
-            const newItem = { ...item, data: { ...item.data, parentId: node.data.parentId } }
+            const newItem = { ...item, data: { ...item.data, parentId: node.id, root: node.data.parentId } }
             if (item.type === NodeType.CONDITION) {
               newItem.data.priority = node.data.priority
             }

+ 0 - 1
src/pages/Business/Condition/index.tsx

@@ -59,7 +59,6 @@ const ConditionSetting: React.FC<ConditionSettingProps> = ({ dispatch, condition
     }
     return schema
   }, [state.activeKey, conditionSchema])
-  console.log('currentSchema', currentSchema)
 
   const renderForm = () => {
     const normalForm = createForm({

+ 0 - 1
src/pages/Business/Step/components/Flow/components/Edge/SmoothStepEdge.tsx

@@ -168,7 +168,6 @@ export default memo(
             currentOffset > resizeYOffset && (resizeYOffset = currentOffset)
           }
         })
-        console.log(relationalNodes, currentNode, resizeYOffset)
       }
       return resizeYOffset
     }

+ 14 - 14
src/pages/Business/Step/components/Flow/components/Node/ConditionNode.tsx

@@ -7,7 +7,7 @@ import { Select, ArrayItems, FormItem, Space } from '@formily/antd'
 import { connect, request } from '@umijs/max'
 import classNames from 'classnames'
 import { memo, useContext, useMemo } from 'react'
-import { Handle, isEdge, NodeProps } from 'react-flow-renderer'
+import { Handle, NodeProps } from 'react-flow-renderer'
 import { FlowContext } from '../../context'
 import Condition from '../Drawer/Condition'
 import { prettySchema } from '../Drawer/Condition/schema'
@@ -24,14 +24,15 @@ const SchemaField = createSchemaField({
 })
 type NodeConditionData = {
   parentId: string
-  priority: number
+  priority: number | 'default'
+  root: string
 }
 
 export const ConditionNode = connect(({ business }: { business: BusinessModelState }) => ({
   conditionSchema: business.conditionSchema
 }))(
   memo(({ id, data, conditionSchema }: NodeProps<NodeConditionData>) => {
-    const { parentId, priority, conditions } = data
+    const { parentId, priority, conditions, root } = data
     const { flowStore, dispatch } = useContext(FlowContext)
 
     const removeNode = () => {
@@ -41,14 +42,11 @@ export const ConditionNode = connect(({ business }: { business: BusinessModelSta
         const parentNode = findNodeById(flowStore.process, parentId)
         if (parentNode.children?.length <= 2) {
           // 要查找它👴👵🈶️多少个👦👧,如果小于等于2则删除👴👵节点,否则删除当前的👨👩节点
-          const grandparentNode = findNodeById(
-            flowStore.process,
-            flowStore.elements.filter(isEdge).find(element => element.target === id)?.source
-          )
+          const grandparentNode = findNodeById(flowStore.process, root)
           if (grandparentNode?.children?.length <= 2) {
             updatedProcess = delNode(flowStore.process, grandparentNode.id)
           } else {
-            updatedProcess = delNode(flowStore.process, parentNode?.parentId)
+            updatedProcess = delNode(flowStore.process, parentId)
           }
         } else {
           updatedProcess = delNode(flowStore.process, id)
@@ -56,7 +54,6 @@ export const ConditionNode = connect(({ business }: { business: BusinessModelSta
       } else {
         updatedProcess = delNode(flowStore.process, id)
       }
-
       dispatch({
         type: 'set_flow_process',
         payload: updatedProcess
@@ -139,17 +136,20 @@ export const ConditionNode = connect(({ business }: { business: BusinessModelSta
         }
       })
     }, [conditions])
+
     return (
       <>
         <Handle type="target" position="top" />
         <div className="shadow-card cursor-default p-1 bg-white rounded-lg node-content w-200px max-h-86px">
           <div className="relative text-hex-52C41A p-1 flex justify-start items-center ">
             <div>{priority === 'default' ? '默认' : `条件${priority + 1}`}</div>
-            <div
-              className="remove-node w-24px h-24px bg-hex-ff4d4f align-middle text-white"
-              onClick={removeNode}>
-              <CloseOutlined size={12} />
-            </div>
+            {priority !== 'default' ? (
+              <div
+                className="remove-node w-24px h-24px bg-hex-ff4d4f align-middle text-white"
+                onClick={removeNode}>
+                <CloseOutlined size={12} />
+              </div>
+            ) : null}
           </div>
           <div
             className={classNames(

+ 0 - 2
src/pages/Business/Step/index.tsx

@@ -119,8 +119,6 @@ const Step: React.FC<StepProps> = ({ executorMap, matterMap, conditionSchema, di
   ]
 
   const customBackHandler = () => {
-    console.log(stepChanged)
-
     if (stepChanged) {
       return Modal.confirm({
         okText: '确定',

+ 24 - 29
src/pages/Schema/Option/index.tsx

@@ -1,7 +1,7 @@
 import { Button, message, Tooltip } from 'antd'
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc'
 import { arrayMoveImmutable } from 'array-move'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useRequest } from '@umijs/max'
 import { updateDataSourceItem } from '@/services/api/schema'
 import { CopyOutlined, MenuOutlined, PlusOutlined } from '@ant-design/icons'
@@ -25,15 +25,11 @@ const SortableBody = SortableContainer((props: React.HTMLAttributes<HTMLTableSec
 
 type iState = {
   activeID: Nullable<string>
-  menuDataItems?: API.DataSourceItem[]
 }
 const Option = () => {
   const [modal, ModalDOM] = useModal()
   const { query, refresh, menuData, addOrEdit } = useRowScript(modal)
-  const [state, setState] = useState<iState>({
-    activeID: null,
-    menuDataItems: []
-  })
+  const [state, setState] = useState<iState>({ activeID: null })
   const { run: tryUpdateDataSourceItem } = useRequest(
     (params: API.DataSourceItem) => updateDataSourceItem(params),
     {
@@ -44,8 +40,8 @@ const Option = () => {
     }
   )
 
-  const onSelect = (key: string, node) => {
-    setState({ ...state, activeID: key, menuDataItems: node.node.items })
+  const handleOnSelect = (key: string) => {
+    setState({ ...state, activeID: key })
   }
 
   const columns: ColumnsType<API.DataSourceItem> = [
@@ -123,13 +119,7 @@ const Option = () => {
         activeID: menuData[0].ID
       })
     }
-    if (state.activeID) {
-      setState({
-        ...state,
-        menuDataItems: menuData.find(item => item.ID === state.activeID)?.items
-      })
-    }
-  }, [state.activeID, menuData])
+  }, [menuData])
 
   const DraggableBodyRow = ({ ...restProps }) => {
     if (state.menuDataItems?.length) {
@@ -141,16 +131,25 @@ const Option = () => {
 
   const wrapHeight = document.querySelector('.ant-pro-page-container-warp')?.clientHeight || 0
 
+  const currentMenuData = useMemo(() => {
+    if (!state?.activeID) return []
+
+    return menuData.find(item => item.ID === state.activeID)
+  }, [state.activeID])
+
   return (
     <PageContainer title={false}>
       <div className="h-full w-full flex flex-row">
-        <LeftMenu
-          onSelect={onSelect}
-          defaultActiveID={state.activeID}
-          showDelIcon={!state.menuDataItems?.length}
-          options={menuData}
-          initFn={() => query()}
-        />
+        {state?.activeID ? (
+          <LeftMenu
+            onSelect={handleOnSelect}
+            defaultActiveID={state?.activeID}
+            showDelIcon={!currentMenuData?.items?.length}
+            options={menuData}
+            initFn={() => query()}
+          />
+        ) : null}
+
         <div className="w-6/7 ml-8 bg-white p-4 rounded-20px shadow-hex-3e2c5a relative">
           {menuData.length ? (
             <ProTable<API.DataSourceItem>
@@ -159,24 +158,20 @@ const Option = () => {
               scroll={{
                 y: document.body.clientHeight - (287 + wrapHeight)
               }}
-              dataSource={state.menuDataItems || []}
+              dataSource={currentMenuData?.items || []}
               rowKey="index"
               toolbar={
                 state.activeID
                   ? {
                       title: (
                         <div className="max-w-400px truncate">
-                          {menuData.find(i => i.ID === state.activeID)?.name +
-                            `:` +
-                            `/api/form/v1/ds/items?name=${menuData.find(i => i.ID === state.activeID)?.name}`}
+                          {`${currentMenuData?.name}:  /api/form/v1/ds/items?name=${currentMenuData?.name}`}
                         </div>
                       ),
                       subTitle: (
                         <CopyToClipboard
                           onCopy={() => message.success('复制成功')}
-                          text={`/api/form/v1/ds/items?name=${
-                            menuData.find(i => i.ID === state.activeID)?.name
-                          }`}>
+                          text={`/api/form/v1/ds/items?name=${encodeURIComponent(currentMenuData?.name)}`}>
                           <Tooltip placement="right" title="复制" className="ml-5px">
                             <CopyOutlined />
                           </Tooltip>