完善字典 组织 标签

src/pages/Eculture/E1tag/index.module.scss

@@ -4,7 +4,8 @@
   padding: 24px;
   :global {
     .E1top {
-      text-align: right;
+      display: flex;
+      justify-content: space-between;
     }
 
     .E1main {

src/pages/Eculture/E1tag/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { Button, Input, Tree, TreeDataNode } from 'antd'
 import { useDispatch, useSelector } from 'react-redux'
@@ -6,7 +6,7 @@ import { RootState } from '@/store'
 import MyPopconfirm from '@/components/MyPopconfirm'
 import { MessageFu } from '@/utils/message'
 import { E1_APIdel, E1_APIgetTree } from '@/store/action/Eculture/E1tag'
-import { treeResIdFu } from '@/pages/Isystem/I2dict/data'
+import { filterTreeByName, treeResIdFu } from '@/pages/Isystem/I2dict/data'
 import { I5AddInfoType, TypeI5Tree } from '@/pages/Isystem/I5organization/data'
 import E1add from './E1add'
 
@@ -15,16 +15,37 @@ function E1tag() {
 
   const [loding, setLoding] = useState(false)
 
+  const getInfoFu = useCallback(
+    (flag: boolean) => {
+      dispatch(
+        E1_APIgetTree(data => {
+          setLoding(true)
+
+          if (flag && data && data.length) setAcShu(data[0].id)
+        })
+      )
+    },
+    [dispatch]
+  )
+
   useEffect(() => {
-    dispatch(
-      E1_APIgetTree(data => {
-        setLoding(true)
-        if (data && data.length) setAcShu(data[0].id)
-      })
-    )
-  }, [dispatch])
+    getInfoFu(true)
+  }, [getInfoFu])
+
+  const { treeData: dictAll } = useSelector((state: RootState) => state.E1tag)
 
-  const { treeData: treeDataTemp } = useSelector((state: RootState) => state.E1tag)
+  // 点击重置
+  const resetFu = useCallback(
+    (flag: boolean) => {
+      // 重置 flag为true
+      // 新增和编辑 为false
+      getInfoFu(flag)
+
+      setValue('')
+      setValue2('')
+    },
+    [getInfoFu]
+  )
 
   // 当前选中的树节点ID
   const [acShu, setAcShu] = useState('')
@@ -36,6 +57,23 @@ function E1tag() {
 
   // 搜索高亮
   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(dictAll, value2)
+    } else return dictAll
+  }, [dictAll, value2])
 
   const treeData = useMemo(() => {
     const loop = (dataTemp: any[]): TreeDataNode[] => {
@@ -44,7 +82,10 @@ function E1tag() {
       return data.map(item => {
         const strTitle = ((item.num ? item.num + ' ' : '') + item.name) as string
 
-        const index = strTitle.indexOf(value)
+        const strTitleD = strTitle.toUpperCase()
+
+        const valueD = value.toUpperCase()
+        const index = strTitleD.indexOf(valueD)
 
         const beforeStr = strTitle.substring(0, index)
         const afterStr = strTitle.slice(index + value.length)
@@ -86,10 +127,10 @@ function E1tag() {
       const res = await E1_APIdel(id)
       if (res.code === 0) {
         MessageFu.success('删除成功!')
-        dispatch(E1_APIgetTree())
+        resetFu(true)
       }
     },
-    [dispatch]
+    [resetFu]
   )
 
   // 点击新增和编辑
@@ -110,7 +151,15 @@ function E1tag() {
     <div className={styles.E1tag}>
       <div className='pageTitle'>标签管理</div>
       <div className='E1top'>
-        <Input value={value} onChange={e => setValue(e.target.value)} hidden />
+        <Input
+          style={{ width: 300 }}
+          placeholder='请输入标签名称'
+          maxLength={30}
+          showCount
+          value={value}
+          onChange={e => valueChange(e.target.value)}
+          allowClear
+        />
         <Button
           type='primary'
           onClick={() => setAddInfo({ id: '-1', txt: '新增', acInfo: rightData })}
@@ -188,7 +237,7 @@ function E1tag() {
       {addInfo.id ? (
         <E1add
           addInfo={addInfo}
-          addFu={() => dispatch(E1_APIgetTree())}
+          addFu={() => resetFu(false)}
           closeFu={() => setAddInfo({} as I5AddInfoType)}
         />
       ) : null}

src/pages/Isystem/I2dict/I2add.tsx

@@ -6,8 +6,9 @@ import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 import { MessageFu } from '@/utils/message'
 import TextArea from 'antd/es/input/TextArea'
-import { I2AddInfoType, TypeI2dict } from './data'
+import { I2AddInfoType } from './data'
 import { I2_APIgetInfo, I2_APIsave } from '@/store/action/Isystem/I2dict'
+import { TypeI5Tree } from '../I5organization/data'
 
 type Props = {
   addInfo: I2AddInfoType
@@ -19,7 +20,7 @@ function I2add({ addInfo, addFu, closeFu }: Props) {
   const treeData = useSelector((state: RootState) => state.I2dict.dictAll)
 
   // 级联选择器改变的时候 筛选当前级联的 信息出来
-  const [acCardInfo, setAcCardInfo] = useState({} as TypeI2dict)
+  const [acCardInfo, setAcCardInfo] = useState({} as TypeI5Tree)
   const [parentIdArr, setParentIdArr] = useState<string[] | null>(null)
 
   useEffect(() => {
@@ -43,7 +44,7 @@ function I2add({ addInfo, addFu, closeFu }: Props) {
     setParentIdArr(aa)
 
     if (bb && bb.length) setAcCardInfo(bb[bb.length - 1])
-    else setAcCardInfo({} as TypeI2dict)
+    else setAcCardInfo({} as TypeI5Tree)
   }, [])
 
   const getInfoFu = useCallback(async (id: string) => {

src/pages/Isystem/I2dict/data.ts

@@ -1,21 +1,9 @@
-export type TypeI2dict = {
-  id: string
-  parentId: string
-  sort: number
-  name: string
-  num: string
-  intro: any
-  ancestor: string
-  level: number
-  children?: TypeI2dict[]
-
-  __keep?: boolean
-}
+import { TypeI5Tree } from '../I5organization/data'
 
 export type I2AddInfoType = {
   id: string
   txt: '新增' | '编辑'
-  acInfo: TypeI2dict
+  acInfo: TypeI5Tree
 }
 
 // 通过id获取 树的obj
@@ -39,12 +27,12 @@ export const treeResIdFu = (list: any, id: string) => {
 }
 
 // -------------------树结构的搜索过滤-------------------
-export const filterTreeByName = (tree: TypeI2dict[], searchTemp: string): TypeI2dict[] => {
+export const filterTreeByName = (tree: TypeI5Tree[], searchTemp: string): TypeI5Tree[] => {
   const searchKey = searchTemp.toUpperCase()
 
-  const dfs = (node: TypeI2dict): TypeI2dict | null => {
+  const dfs = (node: TypeI5Tree): TypeI5Tree | null => {
     // 先递归处理子节点（深度优先）
-    const filteredChildren = (node.children?.map(dfs).filter(Boolean) as TypeI2dict[]) || []
+    const filteredChildren = (node.children?.map(dfs).filter(Boolean) as TypeI5Tree[]) || []
 
     // 判断当前节点是否匹配或子节点有匹配项
 
@@ -65,5 +53,5 @@ export const filterTreeByName = (tree: TypeI2dict[], searchTemp: string): TypeI2
     return null
   }
 
-  return tree.map(dfs).filter(Boolean) as TypeI2dict[]
+  return tree.map(dfs).filter(Boolean) as TypeI5Tree[]
 }

src/pages/Isystem/I2dict/index.tsx

@@ -6,25 +6,30 @@ import { Button, Input, Tree, TreeDataNode } from 'antd'
 import MyPopconfirm from '@/components/MyPopconfirm'
 import { MessageFu } from '@/utils/message'
 import { I2_APIdel, I2_APIgetDict } from '@/store/action/Isystem/I2dict'
-import { filterTreeByName, I2AddInfoType, treeResIdFu, TypeI2dict } from './data'
+import { filterTreeByName, I2AddInfoType, treeResIdFu } from './data'
 import I2add from './I2add'
+import { TypeI5Tree } from '../I5organization/data'
 
 function I2dict() {
   const [loding, setLoding] = useState(false)
 
   const dispatch = useDispatch()
 
-  const getInfoFu = useCallback(() => {
-    dispatch(
-      I2_APIgetDict(data => {
-        setLoding(true)
-        if (data && data.length) setAcShu(data[0].id)
-      })
-    )
-  }, [dispatch])
+  const getInfoFu = useCallback(
+    (flag: boolean) => {
+      // 默认选中第一个为true
+      dispatch(
+        I2_APIgetDict(data => {
+          setLoding(true)
+          if (flag && data && data.length) setAcShu(data[0].id)
+        })
+      )
+    },
+    [dispatch]
+  )
 
   useEffect(() => {
-    getInfoFu()
+    getInfoFu(true)
   }, [getInfoFu])
 
   const { dictAll } = useSelector((state: RootState) => state.I2dict)
@@ -34,7 +39,7 @@ function I2dict() {
     (flag: boolean) => {
       // 重置 flag为true
       // 新增和编辑 为false
-      getInfoFu()
+      getInfoFu(flag)
 
       setValue('')
       setValue2('')
@@ -109,7 +114,7 @@ function I2dict() {
 
   // 右侧信息
   const rightData = useMemo(() => {
-    let obj = {} as TypeI2dict
+    let obj = {} as TypeI5Tree
     if (treeDataTemp && treeDataTemp.length && acShu) obj = treeResIdFu(treeDataTemp, acShu)
 
     return obj || {}
@@ -135,7 +140,7 @@ function I2dict() {
       const res = await I2_APIdel(id)
       if (res.code === 0) {
         MessageFu.success('删除成功!')
-        resetFu(false)
+        resetFu(true)
       }
     },
     [resetFu]

src/pages/Isystem/I5organization/data.ts

@@ -3,6 +3,8 @@ export type TypeI5Tree = {
   parentId: string
   sort: number
   name: string
+  num: string
+  intro: string
   ancestor: string
   level: number
   description: string

src/pages/Isystem/I5organization/index.module.scss

@@ -4,7 +4,8 @@
   padding: 24px;
   :global {
     .I5top {
-      text-align: right;
+      display: flex;
+      justify-content: space-between;
     }
 
     .I5main {

src/pages/Isystem/I5organization/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { Button, Input, Tree, TreeDataNode } from 'antd'
 import { useDispatch, useSelector } from 'react-redux'
@@ -7,23 +7,44 @@ import MyPopconfirm from '@/components/MyPopconfirm'
 import { MessageFu } from '@/utils/message'
 import { I5_APIdel, I5_APIgetTree, I5_APIgetUserById } from '@/store/action/Isystem/I5organization'
 import { I5AddInfoType, TypeI5Tree, TypeI5UserList } from './data'
-import { treeResIdFu } from '../I2dict/data'
+import { filterTreeByName, treeResIdFu } from '../I2dict/data'
 import I5add from './I5add'
 function I5organization() {
   const dispatch = useDispatch()
 
   const [loding, setLoding] = useState(false)
 
+  const getInfoFu = useCallback(
+    (flag: boolean) => {
+      dispatch(
+        I5_APIgetTree(data => {
+          setLoding(true)
+
+          if (flag && data && data.length) setAcShu(data[0].id)
+        })
+      )
+    },
+    [dispatch]
+  )
+
   useEffect(() => {
-    dispatch(
-      I5_APIgetTree(data => {
-        setLoding(true)
-        if (data && data.length) setAcShu(data[0].id)
-      })
-    )
-  }, [dispatch])
+    getInfoFu(true)
+  }, [getInfoFu])
+
+  const { treeData: dictAll } = useSelector((state: RootState) => state.I5organization)
+
+  // 点击重置
+  const resetFu = useCallback(
+    (flag: boolean) => {
+      // 重置 flag为true
+      // 新增和编辑 为false
+      getInfoFu(flag)
 
-  const { treeData: treeDataTemp } = useSelector((state: RootState) => state.I5organization)
+      setValue('')
+      setValue2('')
+    },
+    [getInfoFu]
+  )
 
   // 当前选中的树节点ID
   const [acShu, setAcShu] = useState('')
@@ -49,6 +70,23 @@ function I5organization() {
 
   // 搜索高亮
   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(dictAll, value2)
+    } else return dictAll
+  }, [dictAll, value2])
 
   const treeData = useMemo(() => {
     const loop = (dataTemp: any[]): TreeDataNode[] => {
@@ -57,7 +95,10 @@ function I5organization() {
       return data.map(item => {
         const strTitle = ((item.num ? item.num + ' ' : '') + item.name) as string
 
-        const index = strTitle.indexOf(value)
+        const strTitleD = strTitle.toUpperCase()
+
+        const valueD = value.toUpperCase()
+        const index = strTitleD.indexOf(valueD)
 
         const beforeStr = strTitle.substring(0, index)
         const afterStr = strTitle.slice(index + value.length)
@@ -99,10 +140,10 @@ function I5organization() {
       const res = await I5_APIdel(id)
       if (res.code === 0) {
         MessageFu.success('删除成功!')
-        dispatch(I5_APIgetTree())
+        resetFu(true)
       }
     },
-    [dispatch]
+    [resetFu]
   )
 
   // 点击新增和编辑
@@ -123,7 +164,15 @@ function I5organization() {
     <div className={styles.I5organization}>
       <div className='pageTitle'>组织管理</div>
       <div className='I5top'>
-        <Input value={value} onChange={e => setValue(e.target.value)} hidden />
+        <Input
+          style={{ width: 300 }}
+          placeholder='请输入部门名称'
+          maxLength={30}
+          showCount
+          value={value}
+          onChange={e => valueChange(e.target.value)}
+          allowClear
+        />
         <Button
           type='primary'
           onClick={() => setAddInfo({ id: '-1', txt: '新增', acInfo: rightData })}
@@ -216,7 +265,7 @@ function I5organization() {
       {addInfo.id ? (
         <I5add
           addInfo={addInfo}
-          addFu={() => dispatch(I5_APIgetTree())}
+          addFu={() => resetFu(false)}
           closeFu={() => setAddInfo({} as I5AddInfoType)}
         />
       ) : null}

src/store/action/Isystem/I2dict.ts

@@ -1,10 +1,10 @@
-import { TypeI2dict } from '@/pages/Isystem/I2dict/data'
+import { TypeI5Tree } from '@/pages/Isystem/I5organization/data'
 import { AppDispatch } from '@/store'
 import http from '@/utils/http'
 /**
  * 获取对应表格列表(传id就是列表，从第三级开始)
  */
-export const I2_APIgetDict = (backFu?: (data: TypeI2dict[]) => void): any => {
+export const I2_APIgetDict = (backFu?: (data: TypeI5Tree[]) => void): any => {
   return async (dispatch: AppDispatch) => {
     let url = 'cms/dict/getTree'
     const res = await http.get(url)

src/store/reducer/Isystem/I2dict.ts

@@ -1,15 +1,15 @@
-import { TypeI2dict } from '@/pages/Isystem/I2dict/data'
+import { TypeI5Tree } from '@/pages/Isystem/I5organization/data'
 
 // 初始化状态
 const initState = {
   // 所有字典数据
-  dictAll: [] as TypeI2dict[]
+  dictAll: [] as TypeI5Tree[]
 }
 
 // 定义 action 类型
 type Props = {
   type: 'I2/getDictAll'
-  payload: TypeI2dict[]
+  payload: TypeI5Tree[]
 }
 
 // reducer