up

src/pages/D_storeManage/D1storage/D1Loc/index.tsx

@@ -1,37 +1,20 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
-import { Button, Checkbox, Input, Tree, TreeDataNode } from 'antd'
+import { Button, Checkbox } from 'antd'
 import MyTable from '@/components/MyTable'
 import { D1tableC } from '@/utils/tableData'
-import { D1_APIgetSiteList, D1_APIgetTree } from '@/store/action/D1storage'
-import { filterTreeByName } from '@/utils/history'
-import { TypeZ1dict } from '@/pages/Z_system/Z1dict/type'
 import { D1siteListType } from '../type'
+import { D1_APIgetSiteList } from '@/store/action/D1storage'
 
 type Props = {
   lookFu: (val: string[]) => void
+  TreeDom: React.ReactNode
+  tableId: number
 }
 
-function D1Loc({ lookFu }: Props) {
-  const [loding, setLoding] = useState(false)
-
+function D1Loc({ lookFu, TreeDom, tableId }: Props) {
   const [isNull, setIsNull] = useState(false)
 
-  const [dictList, setDictList] = useState<TypeZ1dict[]>([])
-
-  const getTreeFu = useCallback(async () => {
-    const res = await D1_APIgetTree()
-    if (res.code === 0) {
-      setDictList(res.data)
-      setLoding(true)
-      if (res.data && res.data.length) setAcShu(res.data[0].id)
-    }
-  }, [])
-
-  useEffect(() => {
-    getTreeFu()
-  }, [getTreeFu])
-
   const tableLastBtn = useMemo(() => {
     return [
       {
@@ -47,68 +30,9 @@ function D1Loc({ lookFu }: Props) {
     ]
   }, [lookFu])
 
-  const [value, setValue] = useState('')
-  const [value2, setValue2] = useState('')
-
-  const timeRef = useRef(-1)
-  const valueChange = useCallback((val: string) => {
-    setValue(val.trim())
-    clearTimeout(timeRef.current)
-    timeRef.current = window.setTimeout(() => {
-      setValue2(val.trim())
-    }, 500)
-  }, [])
-
-  // value变化的时候获取所有dom 设置隐藏
-  const treeDataTemp = useMemo(() => {
-    if (value2) {
-      return filterTreeByName(dictList, value2)
-    } else return dictList
-  }, [dictList, value2])
-
-  // 搜索高亮
-  const treeData = useMemo(() => {
-    const loop = (dataTemp: any[]): TreeDataNode[] => {
-      const data = dataTemp || []
-
-      return data.map(item => {
-        const strTitle = ((item.num ? item.num + ' - ' : '') + item.name) as string
-
-        const index = strTitle.indexOf(value)
-
-        const beforeStr = strTitle.substring(0, index)
-        const afterStr = strTitle.slice(index + value.length)
-        const title =
-          index > -1 ? (
-            <span key={item.id}>
-              {beforeStr}
-              <span className='site-tree-search-value'>{value}</span>
-              {afterStr}
-            </span>
-          ) : (
-            <span key={item.id} className='hiddenTree'>
-              {strTitle}
-            </span>
-          )
-        if (item.children) {
-          return { title, key: item.id, children: loop(item.children) }
-        }
-        return {
-          title,
-          key: item.id
-        }
-      })
-    }
-
-    return loop(treeDataTemp)
-  }, [treeDataTemp, value])
-
   // 右边表格
   const [table, setTable] = useState<D1siteListType[]>([])
 
-  // 当前选中的树节点ID
-  const [acShu, setAcShu] = useState(0)
-
   const getTableList = useCallback(async (id: number) => {
     const res = await D1_APIgetSiteList(id)
     if (res.code === 0) {
@@ -117,14 +41,8 @@ function D1Loc({ lookFu }: Props) {
   }, [])
 
   useEffect(() => {
-    if (acShu) getTableList(acShu)
-  }, [acShu, getTableList])
-
-  // 点击树节点
-  const onSelect = (id: any) => {
-    // console.log('点击树节点', id)
-    if (id[0]) setAcShu(id[0])
-  }
+    if (tableId) getTableList(tableId)
+  }, [tableId, getTableList])
 
   return (
     <div className={styles.D1Loc}>
@@ -136,36 +54,7 @@ function D1Loc({ lookFu }: Props) {
       </div>
 
       <div className='D1Lmain'>
-        <div className='D1Lmainll'>
-          <div className='D1Lmainll1'>
-            <Input
-              style={{ width: 300 }}
-              placeholder='请输入需要搜索仓库或区域名称'
-              maxLength={30}
-              value={value}
-              onChange={e => valueChange(e.target.value)}
-            />
-          </div>
-
-          {treeDataTemp && treeDataTemp.length ? (
-            <div className='D1Lmainll2'>
-              <Tree
-                // 默认全部展开
-                defaultExpandAll={true}
-                // 数据
-                treeData={treeData}
-                // 自定义字段
-                // fieldNames={{ title: 'name', key: 'id', children: 'children' }}
-                // 选中
-                selectedKeys={[acShu]}
-                // 点击
-                onSelect={onSelect}
-              />
-            </div>
-          ) : null}
-
-          {loding && treeDataTemp.length === 0 ? <div className='D1null'>暂无数据</div> : null}
-        </div>
+        {TreeDom}
         <div className='D1Lmainrr'>
           {/* 表格 */}
           <MyTable

src/pages/D_storeManage/D1storage/index.tsx

@@ -134,7 +134,7 @@ function D1storage() {
         {loding && treeDataTemp.length === 0 ? <div className='D1null'>暂无数据</div> : null}
       </div>
     )
-  }, [])
+  }, [acShu, loding, treeData, treeDataTemp, value, valueChange])
 
   return (
     <div className={styles.D1storage}>
@@ -161,6 +161,8 @@ function D1storage() {
               lookData.current = val
               setTopAc('按藏品查看')
             }}
+            TreeDom={TreeDom}
+            tableId={acShu}
           />
         ) : null}
         {topAc === '按藏品查看' ? <D1goods lookData={lookData.current} /> : null}