fix: 调整审批流程图中添加员工为树选择并优化Map存储方案

src/components/Flow/src/components/Drawer/index.tsx

@@ -1,20 +1,14 @@
-import { useRef, useState, useMemo, useEffect, useContext } from 'react'
-import { Button, Drawer, Radio, Select, Spin, Tag } from 'antd'
+import { useState, useEffect, useContext } from 'react'
+import { Button, Drawer, Radio, Tag } from 'antd'
 import { Actions, FlowContext } from '../../context'
-import debounce from 'lodash/debounce'
 import type { RadioChangeEvent } from 'antd'
-import { queryAcountList } from '@/services/api/institution'
-import consts from '@/utils/consts'
 import { ApprovalMethod, ApprovalType } from '../../enum'
 import TreeNodeSelect from '@/pages/Project/Management/components/TreeNodeSelect'
-const debounceTimeout = 800
 
 const FlowDrawer = () => {
   const { flowState, dispatch } = useContext(FlowContext)
   const { drawerConfig } = flowState
 
-  const fetchRef = useRef(0)
-
   const [state, setState] = useState({
     approvalType: ApprovalType.TARGET,
     fetching: false,
@@ -23,7 +17,7 @@ const FlowDrawer = () => {
   })
   useEffect(() => {
     if (drawerConfig.nodeId && drawerConfig.visible) {
-      const defaultStaffIds = flowState.flowData.get(drawerConfig.nodeId)?.staffOptions || []
+      const defaultStaffIds = flowState.flowData.get(drawerConfig.nodeId)?.approvalAccounts || []
       setState({ ...state, staffOptions: defaultStaffIds })
     }
   }, [drawerConfig])
@@ -44,42 +38,14 @@ const FlowDrawer = () => {
       setState({ ...state, approvalType: target.value })
     }
   }
-  const fetchOptions = async params => {
-    const { code = -1, data = {} } = await queryAcountList({
-      ...params,
-      current: 1,
-      pageSize: 100,
-      dataID: 'e01b8695-c43b-4d2d-8169-a021aa6b69ae'
-    })
-    if (code === consts.RET_CODE.SUCCESS) {
-      return data.items.map(item => ({ label: item.name, value: item.ID }))
-    }
-    return []
-  }
-
-  const debounceFetcher = useMemo(() => {
-    const loadOptions = params => {
-      fetchRef.current += 1
-      const fetchId = fetchRef.current
-      setState({ ...state, options: [], fetching: true })
-
-      fetchOptions(params).then(newOptions => {
-        if (fetchId !== fetchRef.current) {
-          // for fetch callback order
-          return
-        }
-
-        setState({ ...state, options: newOptions, fetching: false })
-      })
-    }
-
-    return debounce(loadOptions, debounceTimeout)
-  }, [fetchOptions, debounceTimeout])
 
   const staffIds = state.staffOptions.map(i => i.value)
   const triggerChange = (val, option) => {
     if (!staffIds.includes(val)) {
-      setState({ ...state, staffOptions: [...state.staffOptions, option] })
+      setState({
+        ...state,
+        staffOptions: [option].map(item => ({ ID: item.value, name: item.label }))
+      })
     }
   }
 
@@ -88,7 +54,7 @@ const FlowDrawer = () => {
       id: drawerConfig.nodeId,
       node: {
         approvalType: state.approvalType,
-        approvalAccounts: state.staffOptions.map(item => ({ ID: item.value, name: item.label })),
+        approvalAccounts: state.staffOptions,
         approvalMethod: ApprovalMethod.ORDER
       }
     }
@@ -113,7 +79,8 @@ const FlowDrawer = () => {
         </div>
       }
       title={<span className="font-medium">设置审批人</span>}
-      width="30%">
+      width="30%"
+    >
       <div>
         <Radio.Group
           options={plainOptions}
@@ -125,12 +92,8 @@ const FlowDrawer = () => {
             <span className="font-medium mr-1 text-14px">添加员工</span>
             {/* <span className="text-hex-000000 text-opacity-45">不得超过20人</span> */}
           </div>
-          {/* <TreeNodeSelect
-            showSearch
-            onChange={triggerChange}
-            treeData={state.options?.filter(item => !staffIds.includes(item.value))}
-          /> */}
-          <Select
+          <TreeNodeSelect onChange={triggerChange} />
+          {/* <Select
             showSearch
             disabled={state.staffOptions.length}
             value={null}
@@ -139,10 +102,10 @@ const FlowDrawer = () => {
             onSearch={v => debounceFetcher({ search: v })}
             notFoundContent={state.fetching ? <Spin size="small" /> : null}
             options={state.options?.filter(item => !staffIds.includes(item.value))}
-          />
+          /> */}
           <div className="mt-4">
             {state.staffOptions.map(item => (
-              <Tag key={item.value}>{item.label}</Tag>
+              <Tag key={item.ID}>{item.name}</Tag>
             ))}
           </div>
         </div>

src/pages/Project/Management/components/Detail.tsx

@@ -2,7 +2,6 @@ import { connect, useRequest } from 'umi'
 import { useEffect, useRef, useState } from 'react'
 import { message, Tabs, Form } from 'antd'
 import { getApprovalList, setApproval } from '@/services/api/project'
-import { queryAcountInstitutionList } from '@/services/api/institution'
 import { delay } from '@/utils/util'
 import FormRender, { useForm } from 'form-render'
 import { BaseMenuEnum } from '@/pages/Schema/Base'
@@ -45,12 +44,6 @@ const DetailModal: React.FC<ProjectModalProps> = ({
     approvalList: [],
     activeKey: ''
   })
-  const { run: tryAcountInstitutionList } = useRequest(() => queryAcountInstitutionList(), {
-    manual: true,
-    onSuccess: result => {
-      setState({ ...state, acountInstitutionList: result })
-    }
-  })
 
   const { run: tryApprovalList } = useRequest(() => getApprovalList(), {
     manual: true,
@@ -107,9 +100,9 @@ const DetailModal: React.FC<ProjectModalProps> = ({
   const onChange = key => {
     setState({ ...state, activeKey: key })
     if (key === '2') {
-      if (!state.acountInstitutionList?.length) {
-        tryAcountInstitutionList()
-      }
+      // if (!state.acountInstitutionList?.length) {
+      //   tryAcountInstitutionList()
+      // }
       if (!state.approvalList?.length) {
         tryApprovalList()
       }
@@ -131,12 +124,10 @@ const DetailModal: React.FC<ProjectModalProps> = ({
         <ProForm
           formRef={ref}
           submitter={{ resetButtonProps: { style: { display: 'none' } } }}
-          onFinish={onFinish}>
+          onFinish={onFinish}
+        >
           <Form.Item label="上报人" name="accountID">
-            <TreeNodeSelect
-              treeData={state.acountInstitutionList}
-              // onChange={onChange}
-            />
+            <TreeNodeSelect />
             {/* <TreeSelect
               style={{ width: '100%' }}
               placeholder="请选择上报人"

src/pages/Project/Management/components/TreeNodeSelect.tsx

@@ -1,36 +1,54 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { TreeSelect } from 'antd'
+import { useRequest } from 'umi'
+import { queryAcountInstitutionList } from '@/services/api/institution'
 
 const { TreeNode } = TreeSelect
 
-const TreeNodeSelect = ({ treeData = [], onChange, value, placeholder = '请选择' }) => {
-  const onNodeChange = values => {
-    onChange(values)
+const TreeNodeSelect = ({ onChange, placeholder = '请选择', ...otherProps }) => {
+  const [list, setList] = useState([])
+  const { run: tryAcountInstitutionList } = useRequest(() => queryAcountInstitutionList(), {
+    manual: true,
+    onSuccess: result => {
+      setList(result)
+    }
+  })
+
+  useEffect(() => {
+    tryAcountInstitutionList()
+  }, [])
+  const onNodeChange = (value, labelList) => {
+    console.log('labelList', labelList)
+
+    onChange(value, { value, label: labelList[0] })
   }
   const renderTreeNodes = data =>
     data.map(item => {
       if (item.children) {
         item.disabled = true
         return (
-          <TreeNode key={item.key} title={item.title} value={item.value} disabled={item.disabled}>
+          <TreeNode {...item} disabled={item.disabled}>
             {renderTreeNodes(item.children)}
           </TreeNode>
         )
       }
-      return <TreeNode {...item} key={item.key} title={item.title} value={item.value} />
+      return <TreeNode {...item} />
     })
   return (
-    <TreeSelect
-      showSearch
-      style={{ width: '100%' }}
-      value={value}
-      placeholder={placeholder}
-      treeNodeFilterProp="label"
-      allowClear
-      treeDefaultExpandAll
-      onChange={values => onNodeChange(values)}>
-      {renderTreeNodes(treeData)}
-    </TreeSelect>
+    list?.length && (
+      <TreeSelect
+        {...otherProps}
+        showSearch
+        style={{ width: '100%' }}
+        placeholder={placeholder}
+        treeNodeFilterProp="label"
+        allowClear
+        treeDefaultExpandAll
+        onChange={(value, labelList, extra) => onNodeChange(value, labelList, extra)}
+      >
+        {renderTreeNodes(list)}
+      </TreeSelect>
+    )
   )
 }
 

src/pages/Project/Management/index.tsx

@@ -61,7 +61,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
       dataIndex: 'name',
       title: '项目名称',
       render: (text, record) => (
-        <div
+        <span
           className="text-primary cursor-pointer hover:text-hex-967bbd"
           onClick={() => {
             setState({
@@ -77,9 +77,10 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
                 // approvalID: record.approval.ID
               }
             })
-          }}>
+          }}
+        >
           {text}
-        </div>
+        </span>
       )
     },
     {
@@ -137,14 +138,16 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
                   // projectTypeID: record.projectType.ID
                 }
               })
-            }}>
+            }}
+          >
             编辑
           </div>
           <Popconfirm
             title="确认删除吗？"
             okText="确认"
             cancelText="取消"
-            onConfirm={() => tryDelProject({ ID: record.ID })}>
+            onConfirm={() => tryDelProject({ ID: record.ID })}
+          >
             <div className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-e7026e">
               <DeleteOutlined />
             </div>
@@ -182,7 +185,8 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
               type="primary"
               onClick={() =>
                 setState({ ...state, visibles: true, currentModalType: ModalType.ADD })
-              }>
+              }
+            >
               新建项目
             </Button>
           ]
@@ -192,7 +196,8 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
 
       <AnimateContent
         visible={state.visibles}
-        onVisibleChange={visibles => setState({ ...state, visibles })}>
+        onVisibleChange={visibles => setState({ ...state, visibles })}
+      >
         <ProjectModal
           type={state.currentModalType}
           defaultFormData={state.defaultFormData}
@@ -205,7 +210,8 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
 
       <AnimateContent
         visible={state.visible}
-        onVisibleChange={visible => setState({ ...state, visible })}>
+        onVisibleChange={visible => setState({ ...state, visible })}
+      >
         <Detail
           defaultFormData={state.defaultFormData}
           pTypeList={pTypeList}