fix:tree组件

src/components/TabTree/index.tsx

-import React, { useState, ReactText, useImperativeHandle } from 'react'
+import React, { useState, ReactText, useImperativeHandle, useEffect, useRef } from 'react'
 import { Tree, Space, Tooltip, Button } from 'antd'
 import { findItemAndDelete, findTreeKeys } from '@/utils'
 import './index.less'
@@ -10,6 +10,7 @@ import { EventDataNode } from 'rc-tree/lib/interface'
 import { useSelections } from '@umijs/hooks'
 
 export interface TabTreeActions {
+  selected: ReactText[],
   getExpandedKeys: () => ReactText[],
   getSelectKey: () => ReactText,
   getSelectKeys: () => ReactText[],
@@ -33,7 +34,8 @@ export interface TabTreeProps extends TreeProps {
   customKey?: string | number,
   customTitle?: string | number,
   handleSelect?: (key: ReactText, node: EventDataNode) => void | Promise<any>,
-  toolsRender?: toolsRenderProps
+  toolsRender?: toolsRenderProps,
+  getMenuSelectData?(): Promise<any>
 }
 
 export interface InnermostTreeNodeProps {
@@ -45,12 +47,22 @@ export interface RenderIconsProps {
   toolsRender?: toolsRenderProps
 }
 
-export const useTreeActions = (): TabTreeActions => {
+export const useTreeActions = (action?): TabTreeActions => {
+  const actionRef = useRef<any>(null)
+  actionRef.current = actionRef.current || {}
+  
+  return actionRef.current
+}
+
+export const createTreeActions = () => {
   const actions: TabTreeActions = {
+    selected: [],
     getExpandedKeys(){ return [] },
     getSelectKey(){ return '' },
     getSelectKeys(){ return [] },
-    setSelectKey(){},
+    setSelectKey(){
+      console.log(222)
+    },
     setSelectKeys(){},
     setExpandedKeys(){},
   }
@@ -113,7 +125,8 @@ function transformSingleTitle(data, nowKey, checkable, disabled, toolsRender, cu
         </div>
       </span>
       // 使选中样式受控
-      data[item].className= cx('god-tabtree-select', nowKey === data[item].key ? 'show' : 'hide')
+
+      data[item].className= cx('god-tabtree-select', Number(nowKey) === Number(data[item].key) ? 'show' : 'hide')
       if (disabled) {
         data[item].disableCheckbox = disabled
       }
@@ -135,21 +148,32 @@ const TabTree:React.FC<TabTreeProps> = (props) => {
     customKey,
     customTitle,
     toolsRender,
-    disabled
+    disabled,
+    getMenuSelectData
   } = props
 
+  // const selfActions = useTreeActions(actions)
+
   // 需展开的key
   const [expandkeys, setExpandkeys] = useState<ReactText[]>([])
   // 当前选中的node
   const [selectKey, setSelectKey] = useState<string | number>('')
-  const data = transformSingleTitle(deepClone(treeData), selectKey, checkable, disabled, toolsRender, customKey, customTitle)
 
+  const data = transformSingleTitle(deepClone(treeData), selectKey, checkable, disabled, toolsRender, customKey, customTitle)
   // 重写选择方法, 只有在开启多选的时候才会启用
-  const checkedKeys = findTreeKeys(treeData)
+  const checkedKeys = findTreeKeys(treeData, customKey)
   const { selected, select,setSelected, unSelect, allSelected, unSelectAll, selectAll } = useSelections(
     checkedKeys,
     []
   );
+  useEffect(() => {
+    if (getMenuSelectData) {
+      getMenuSelectData().then(res => {
+        const { ids } = res.data
+        setSelected(ids)
+      })
+    }
+  }, [])
 
   const toggleSelectAll = () => {
     if (allSelected) {
@@ -163,6 +187,7 @@ const TabTree:React.FC<TabTreeProps> = (props) => {
     actions.getExpandedKeys = () => expandkeys
     actions.getSelectKey = () => selectKey
     actions.getSelectKeys = () => selected
+    actions.selected = selected
     actions.setSelectKeys = (keys: ReactText[]) => {
       setSelected(keys)
     }
@@ -173,7 +198,6 @@ const TabTree:React.FC<TabTreeProps> = (props) => {
       setSelectKey(key)
     }
   }
-
   const batchSelect = (items: any[]) => {
     items.forEach(v => select(v))
   }
@@ -196,14 +220,14 @@ const TabTree:React.FC<TabTreeProps> = (props) => {
         expandedKeys={expandkeys}
         onCheck={(keys, nodes) => {
           const { node, checked, checkedNodes } = nodes
-          checked ? batchSelect(keys as any) : setSelected(checkedNodes)
+          checked ? batchSelect(keys as any) : setSelected(checkedNodes.map(v => v.key))
         }}
         onSelect={(keys, e) => {
           // 控制点击node时可以展开
           const { node, selected } = e
           // 用户自定义的选择后触发事件
           if (props.handleSelect) {
-            const result:any = props.handleSelect(node.key, node)
+            const result = props.handleSelect(node.key, node)
             // 存在返回值则不执行选中事件, 一般用于切换node时，不希望离开当前页面
             if (result) {
               result.then(() => {

src/pages/classAndProperty/class/index.tsx

@@ -6,7 +6,7 @@ import {
   LinkOutlined, 
 } from '@ant-design/icons';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import TabTree, { useTreeActions } from '@/components/TabTree';
+import TabTree, { useTreeActions, createTreeActions } from '@/components/TabTree';
 import SchemaForm, { createFormActions, LifeCycleTypes, FormEffectHooks, FormButtonGroup } from '@formily/antd';
 import { classSchema } from './schema'
 import { PublicApi } from '@/services/api';
@@ -23,7 +23,6 @@ enum FormState {
 }
 
 const formActions = createFormActions()
-const plateformTreeActions = useTreeActions()
 
 const fetchClassTreeData = async (params?) => { // 商品品类树
   const res = await PublicApi.getProductCustomerGetCustomerCategoryTree()
@@ -38,6 +37,7 @@ const fetchPlatformTreeData = async (params?) => { // 平台后台树
 const ClassProperty: React.FC<{}> = () => {
   const [plateformVisible, setPlateformVisible] = useState(false)
   const [plateformSelectNode, setPlateformSelectNode] = useState<any>()
+  const plateformTreeActions = useTreeActions()
 
   /* 选择品类树 */
   const {
@@ -129,18 +129,21 @@ const ClassProperty: React.FC<{}> = () => {
     setPlateformVisible(false)
     // setSelectLinkKeys(undefined)
     // setSelectLinkRow({})
+    plateformTreeActions.setExpandedKeys && plateformTreeActions.setExpandedKeys([])
   }
 
   const handlePlateformSelect = (key, node) => {
     setPlateformSelectNode({id: key*1, name: node._title})
-    console.log(key, node, 'plateform')
   }
 
   const handleConnectCategroyBtn = () => {
-    // 设置tree回显 action
-    console.log(nodeRecord, '点击关联回显选中项')
+    console.log(formInitValue, '点击关联回显选中项')
     setPlateformVisible(true)
-    // plateformTreeActions.setSelectKey()
+    if(formInitValue?.category?.id) {
+      let arr = [formInitValue.category.parentId + '', formInitValue.category.id + '']
+      plateformTreeActions.setExpandedKeys && plateformTreeActions.setExpandedKeys(arr)
+      plateformTreeActions.setSelectKey && plateformTreeActions.setSelectKey(formInitValue?.category?.id)
+    }
   }
 
   // 关联平台品类input
@@ -210,8 +213,9 @@ const ClassProperty: React.FC<{}> = () => {
         onCancel={handleSelectCancel}
         okText="确认"
         cancelText="取消"
-        className="useTreeModalWrapper"
-        destroyOnClose={true}
+        forceRender
+        getContainer='#root'
+        // destroyOnClose={true}
       >
         <TabTree
           fetchData = {params => fetchPlatformTreeData(params)}

src/pages/classAndProperty/propertyValue/addPropertyValue.tsx

@@ -6,7 +6,7 @@ import { history } from 'umi';
 import ReutrnEle from '@/components/ReturnEle';
 import { PropertyValueApi } from '@/services/classAndProperty/propertyValue/API'
 import { PublicApi } from '@/services/api';
-import TabTree from '@/components/TabTree';
+import TabTree, { useTreeActions, createTreeActions } from '@/components/TabTree';
 import { useTreeTabs } from '@/hooks/useTreeTabs';
 
 const layout = {
@@ -24,6 +24,8 @@ const tailLayout = {
   },
 }
 
+const plateformActions = createTreeActions()
+
 const fetchPlatformTreeData = async (params?) => { // 平台后台树
   const res = await PublicApi.getProductPlatformGetAttributeValueTree()
   return res
@@ -100,7 +102,7 @@ const AddPropertyValue: React.FC<{}> = () => {
   }
 
   const handlePlateformSelect = (key, node) => {
-    setSelectKey(key[key.length-1]*1)
+    setSelectKey(key[key.length-1]*1)  // .................
     setSelectRow(node)
   }
 
@@ -227,6 +229,7 @@ const AddPropertyValue: React.FC<{}> = () => {
           treeData={treeData}
           handleSelect={(key, node) => handlePlateformSelect(key, node)}
           customKey="id"
+          actions={plateformActions}
         />
       </Modal>
     </Card>

src/pages/classAndProperty/propertyValue/index.tsx

@@ -53,7 +53,7 @@ const PropertyValue: React.FC<{}> = () => {
 
   const onHandleSelect = (key, node) => {
     if(key){
-      setSelectKey(key[key.length-1])
+      setSelectKey(key[key.length-1]) // ...............................
       setSelectNode(node)
     }
   }

src/pages/commodity/goods/addGoods.tsx

@@ -62,7 +62,6 @@ const AddGoods = () => {
   }, [])
 
   const handleBrandSearch = (value:any) => {  // end value
-    console.log(value, 'handleBrandSearch')
     if (value) {
       PublicApi.getProductSelectGetSelectBrand({name: value}).then(res=>{
         if(res.code === 1000)
@@ -74,12 +73,10 @@ const AddGoods = () => {
   }
   const handleBrandChange = (value:any) => {
     setBrandValue(value)
-    console.log(value, 'handleBrandChange')
     // let obj = {...filterParams, brandId: value}
     // setFilterParams(obj)
   }
   const handleClassSearch = (value:any) => {
-    console.log(value, 'handleClassSearch')
     if (value) {
       PublicApi.getProductSelectGetSelectCustomerCategory({name: value}).then(res=>{
         if(res.code === 1000)
@@ -93,10 +90,8 @@ const AddGoods = () => {
     setClassValue(value)
     // let obj = {...filterParams, customerCategoryId: value}
     // setFilterParams(obj)
-    console.log(value, 'handleClassChange')
   }
   const handleUnitSearch = (value:any) => {
-    console.log(value, 'handleClassSearch')
     if (value) {
       PublicApi.getProductSelectGetSelectCnUnit({name: value}).then(res=>{
         if(res.code === 1000)
@@ -110,7 +105,6 @@ const AddGoods = () => {
     setUnitValue(value)
     // let obj = {...filterParams, customerCategoryId: value}
     // setFilterParams(obj)
-    console.log(value, 'handleClassChange')
   }
 
   const onFinish = (values:any) => {

src/pages/trademark/addBrand.tsx

@@ -140,7 +140,7 @@ const AddBrand: React.FC<{}> = () => {
 
   const handleApplyCheck = () => {
     //@ts-ignore
-    PublicApi.getProductBrandApplyCheckBrand({id: responseId}).then(res=>{
+    PublicApi.postProductBrandApplyCheckBrand({id: responseId}).then(res=>{
         setCurrentStep(1)
     })
   }

src/utils/index.ts

+import { ReactText } from 'react';
 import moment from 'moment';
 import deepClone from 'clone'
 
@@ -128,12 +129,12 @@ export const findItemAndDelete = (arr: any[], target) => {
 }
 
 // 遍历树拿到所有key的集合
-export const findTreeKeys = (arr: any[], keyword?: string) => {
+export const findTreeKeys = (arr: any[], keyword?: ReactText) => {
   const copyArr: any[] = deepClone(arr)
   const results: any[] = []
   while(copyArr.length > 0) {
     const item = copyArr.shift()
-    results.push(keyword ? item[keyword] : item.key)
+    results.push(Number(keyword ? item[keyword] : item.key))
     if (item.children) {
       copyArr.push(...item.children)
     }