feat(audio): 优化部门树搜索功能并修复相关问题

- 添加部门树节点的内容包装宽度设置，提高可读性
- 在音频抽屉中增加文件上传完成的校验，提升用户体验
- 重构部门树组件，优化搜索逻辑和数据处理方式
- 为部门树节点添加 Tooltip，解决节点名称过长的问题

src/css/Tree.module.css

@@ -1,22 +1,32 @@
-.ct{
-  width: 100%;
-  height: 100%;
-  padding: 24px 16px;
-  box-sizing: border-box;
+.ct {
+    width: 100%;
+    height: 100%;
+    padding: 24px 16px;
+    box-sizing: border-box;
 }
-.title{
-  font-size: 14px;
-  margin-bottom: 8px;
+
+.title {
+    font-size: 14px;
+    margin-bottom: 8px;
 }
 
 .site-tree-search-value {
-  color: #f50;
+    color: #f50;
 }
 
 .tit {
-  height: 70px;
+    height: 70px;
 }
+
 .tree {
-  height: calc(100% - 70px);
-  overflow-y:auto;
+    height: calc(100% - 70px);
+    overflow-y: auto;
+}
+
+.title-c {
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

src/css/ant.css

@@ -11,4 +11,8 @@
   margin-right: 4px;
   color: transparent;
   content: "*";
+}
+
+.ant-tree-node-content-wrapper {
+    width: 50px;
 }

src/page/audio/drawer.tsx

@@ -164,6 +164,10 @@ const DrawerExample: React.FC = forwardRef<DrawerExampleRef, {}>((props, ref) =>
       onClose();
       return;
     }
+    if (!values.soundFileUUid) {
+      message.error({ content: '请确认文件是否上传完成' })
+      return;
+    }
     setLoading(true);
     uploadSensors(values).then((res: any) => {
       if (res.code === 200) {
@@ -211,6 +215,7 @@ const DrawerExample: React.FC = forwardRef<DrawerExampleRef, {}>((props, ref) =>
           soundSensorType: AccessType.FileUpload,
           soundFileUUid: '',
           deptUuid: res.data[0].deptID,
+          department: res.data[0].deptName,
           responsiblePerson: res.data[0].deptName
         })
       }

src/page/audio/tree.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, {useState, useEffect, useMemo} from "react";
 import styles from "../../css/Tree.module.css";
-import { SearchOutlined } from "@ant-design/icons";
-import { Input, Tree } from "antd";
+import {SearchOutlined} from "@ant-design/icons";
+import {Input, Tooltip, Tree} from "antd";
 import type {
   DepartmentNode,
   EnhancedDepartmentNode,
@@ -9,26 +9,27 @@ import type {
   TreeDataNode,
 } from "./prop.ts";
 import "../../css/ant.css";
-import type { TreeProps } from "antd";
-import { getOrganizations } from "../../api/index.ts";
+import type {TreeProps} from "antd";
+import {getOrganizations} from "../../api/index.ts";
 
 // 定义 props 类型
 interface ChildComponentProps {
   onSelectFn: (message: string) => void; // 函数类型
 }
-const TreeComponent: React.FC<ChildComponentProps> = ({ onSelectFn }) => {
+
+const TreeComponent: React.FC<ChildComponentProps> = ({onSelectFn}) => {
   const [inputValue, setInputValue] = useState("");
   const [isComposing, setIsComposing] = useState(false); // 是否处于拼音输入状态
-  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
   const [autoExpandParent, setAutoExpandParent] = useState(true);
   const [departmentData, setDepartmentData] = useState([]);
-  const [dataList, setDataList] = useState<{ deptID: React.Key; deptName: string }[]>([]);
+  const [dataList, setDataList] = useState<{ deptID: string; deptName: string }[]>([]);
 
   const generateList = (data: DepartmentNodeObj[]) => {
     for (let i = 0; i < data.length; i++) {
       const node = data[i];
-      const { deptID, deptName } = node;
-      setDataList([...dataList, { deptID, deptName }]);
+      const {deptID, deptName} = node;
+      setDataList([...dataList, {deptID, deptName}]);
       if (node.childNodes) {
         generateList(node.childNodes);
       }
@@ -55,48 +56,65 @@ const TreeComponent: React.FC<ChildComponentProps> = ({ onSelectFn }) => {
     getOrganizations().then((res) => {
       setDepartmentData(res.data ?? []);
     });
+    setAutoExpandParent(true);
   }, []);
 
   useEffect(() => {
+    setExpandedKeys([departmentData?.[0]?.deptID]);
     generateList(departmentData);
   }, [departmentData]);
 
   const treeData = useMemo(() => {
-    const loop = (data: DepartmentNode[]) =>
-      data.map((item: DepartmentNode): EnhancedDepartmentNode => {
-        const strTitle = item.deptName as string;
-        const index = strTitle.indexOf(inputValue);
-        const beforeStr = strTitle.substring(0, index);
-        const afterStr = strTitle.slice(index + inputValue.length);
-        const deptName =
-          index > -1 ? (
-            <>
-              {beforeStr}
-              <span className={styles["site-tree-search-value"]}>
-                {inputValue}
-              </span>
-              {afterStr}
-            </>
-          ) : (
-            <span key={item.deptID}>{strTitle}</span>
-          );
-        return {
-          deptName,
-          deptID: item.deptID,
-          childNodes: item.childNodes ? loop(item.childNodes) : null,
-        };
-      });
-    return loop(departmentData);
+    if (!inputValue) return departmentData;
+    const filterNode = (node) => {
+      // 如果当前节点匹配，直接保留
+      if (node.deptName.toLowerCase().includes(inputValue.toLowerCase())) {
+        return true;
+      }
+      // 递归检查子节点
+      if (node.childNodes) {
+        node.childNodes = node.childNodes.filter(filterNode);
+        return node.childNodes.length > 0; // 保留有匹配子节点的父级
+      }
+      return false;
+    };
+    const td = JSON.parse(JSON.stringify(departmentData)).filter(filterNode);
+    setExpandedKeys([td?.[0]?.deptID]);
+    return td;
+    // const loop = (data: DepartmentNode[]) => data.map((item: DepartmentNode): EnhancedDepartmentNode => {
+    //     const strTitle = item.deptName as string;
+    //     const index = strTitle.indexOf(inputValue);
+    //     const beforeStr = strTitle.substring(0, index);
+    //     const afterStr = strTitle.slice(index + inputValue.length);
+    //     const deptName =
+    //       index > -1 ? (
+    //         <>
+    //           {beforeStr}
+    //           <span className={styles["site-tree-search-value"]}>
+    //             {inputValue}
+    //           </span>
+    //           {afterStr}
+    //         </>
+    //       ) : (
+    //         <span key={item.deptID}>{strTitle}</span>
+    //       );
+    //     return {
+    //       deptName,
+    //       deptID: item.deptID,
+    //       childNodes: item.childNodes ? loop(item.childNodes) : null,
+    //     };
+    //   });
+    // return loop(departmentData);
   }, [inputValue, departmentData]);
 
-  const onExpand = (newExpandedKeys: React.Key[]) => {
+  const onExpand = (newExpandedKeys: string[]) => {
     setExpandedKeys(newExpandedKeys);
     setAutoExpandParent(false);
   };
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!isComposing) {
       // 拼音输入完成后触发
-      const { value } = e.target;
+      const {value} = e.target;
       setInputValue(value ?? "");
       const newExpandedKeys = dataList.map((item) => {
         if (item.deptName.indexOf(value) > -1) {
@@ -120,36 +138,42 @@ const TreeComponent: React.FC<ChildComponentProps> = ({ onSelectFn }) => {
     onSelectFn(selectK.length ? String(selectK[0]) : "");
   };
   return (
-    <div className={styles.ct}>
-      <div className={styles.tit}>
-        <div className={styles.title}>责任部门</div>
-        <Input
-          defaultValue={inputValue}
-          placeholder="请输入部门名称搜索"
-          allowClear
-          onChange={handleChange}
-          onCompositionStart={handleCompositionStart}
-          onCompositionEnd={handleCompositionEnd}
-          suffix={<SearchOutlined style={{ color: "#c2c8d1" }} />}
-          style={{ marginBottom: 8 }}
-        />
-      </div>
-      <div className={styles.tree}>
-        <Tree
-          blockNode={true}
-          treeData={treeData as TreeDataNode[]}
-          onExpand={onExpand}
-          expandedKeys={expandedKeys}
-          autoExpandParent={autoExpandParent}
-          fieldNames={{
-            title: "deptName",
-            key: "deptID",
-            children: "childNodes",
-          }}
-          onSelect={onSelect}
-        />
+      <div className={styles.ct}>
+        <div className={styles.tit}>
+          <div className={styles.title}>责任部门</div>
+          <Input
+              defaultValue={inputValue}
+              placeholder="请输入部门名称搜索"
+              allowClear
+              onChange={handleChange}
+              onCompositionStart={handleCompositionStart}
+              onCompositionEnd={handleCompositionEnd}
+              suffix={<SearchOutlined style={{color: "#c2c8d1"}}/>}
+              style={{marginBottom: 8}}
+          />
+        </div>
+        <div className={styles.tree}>
+          <Tree
+              blockNode={true}
+              treeData={treeData as TreeDataNode[]}
+              titleRender={(nodeData) => (
+                  <Tooltip title={nodeData.deptName}>
+                    <span className={styles['title-c']}>{nodeData.deptName}</span>
+                  </Tooltip>
+              )}
+              onExpand={onExpand}
+              expandedKeys={expandedKeys}
+              defaultExpandParent={true}
+              autoExpandParent={autoExpandParent}
+              fieldNames={{
+                title: "deptName",
+                key: "deptID",
+                children: "childNodes",
+              }}
+              onSelect={onSelect}
+          />
+        </div>
       </div>
-    </div>
   );
 };