feat: '设备巡检配置新增搜索'

src/pages/bsmanager/patrolMaintenance/maintenance/maintenance.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable camelcase */
 import React, { useState, createContext, useEffect, useMemo, useReducer, useRef } from 'react';
-import { Space, Table, Popconfirm, Tooltip, Button, notification, Tag, message } from 'antd';
+import { Space, Table, Popconfirm, Tooltip, Button, notification, Tag, message, Input } from 'antd';
 import {
   CM_XWBPlan_DataList,
   NewCM_XWBPlan_DataList,
@@ -42,10 +42,13 @@ const maintenance = () => {
   const [flag, setFlag] = useState(0);
   const [sortVisible, setSortVisible] = useState(false);
   const [tableData, setTableData] = useState([]);
+  const [filterTableData, setFilterTableData] = useState([]);
   const [keepTableData, setKeepTableData] = useState([]);
   const [activeName, setActiveName] = useState('project');
   const [selectColor, setSelectColor] = useState({});
+  const [searchWord, setSearchWord] = useState(''); // 关键字
   const QRCodeDesignRef = useRef(null)
+  const { Search } = Input;
 
   const setRowClassName = nodeID => {
     return nodeID == selectColor ? styles.clickRowStyle : '';
@@ -60,6 +63,7 @@ const maintenance = () => {
     } else {
       getConfigList();
     }
+    setSearchWord('')
   }, [flag, activeName]);
 
   const getDataList = () => {
@@ -67,6 +71,7 @@ const maintenance = () => {
       setTreeLoading(false);
       if (res.code === 0) {
         setTableData(res.data);
+        setFilterTableData(res.data)
         let list = [];
         res.data.map(i => {
           list.push(i.businessName);
@@ -74,6 +79,7 @@ const maintenance = () => {
         setKeepTableData(list);
       } else {
         setTableData([]);
+        setFilterTableData([])
         notification.error({
           message: '提示',
           duration: 3,
@@ -88,6 +94,7 @@ const maintenance = () => {
       setTreeLoading(false);
       if (res.code === 0) {
         setTableData(res.data);
+        setFilterTableData(res.data)
         let list = [];
         res.data.map(i => {
           list.push(i.businessName);
@@ -95,6 +102,7 @@ const maintenance = () => {
         setKeepTableData(list);
       } else {
         setTableData([]);
+        setFilterTableData([])
         notification.error({
           message: '提示',
           duration: 3,
@@ -109,8 +117,10 @@ const maintenance = () => {
       setTreeLoading(false);
       if (res.code === 0) {
         setTableData(res.data);
+        setFilterTableData(res.data)
       } else {
         setTableData([]);
+        setFilterTableData([])
         notification.error({
           message: '提示',
           duration: 3,
@@ -861,6 +871,19 @@ const maintenance = () => {
     }
   };
 
+  // 过滤人员
+  const searchDevice = (e) => {
+    setFilterTableData(tableData.filter(item => (item.accountName || item.AccountName).includes(searchWord)))
+  }
+
+  // 获取搜索框的值
+  const handleSearch = e => {
+    setSearchWord(e.target.value);
+    if(!e.target.value) {
+      setFilterTableData(tableData)
+    }
+  };
+
   return (
     <Context.Provider value={{ state, dispatch }}>
       <div className={styles.maintenanceContainer}>
@@ -881,6 +904,15 @@ const maintenance = () => {
               >
                 设备库配置
               </div>
+              <Search
+                style={{ width: 260, marginRight: '15px' }}
+                placeholder="搜索设备名"
+                onSearch={e => searchDevice(e)}
+                onChange={e => handleSearch(e)}
+                enterButton
+                value={searchWord}
+                allowClear
+              />
               {/* <div
                 className={activeName === 'template' ? styles.active : ''}
                 onClick={() => {
@@ -935,7 +967,7 @@ const maintenance = () => {
               editEventType={editEventType}
               setSelectColor={setSelectColor}
               columns={columns}
-              dataSource={tableData}
+              dataSource={filterTableData}
               scroll={{ y: 'calc(100vh - 215px)', x: 'max-content' }}
               pagination={{
                 showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
@@ -962,7 +994,7 @@ const maintenance = () => {
                 }, // 双击
               })}
               columns={columns}
-              dataSource={tableData}
+              dataSource={filterTableData}
               scroll={{ y: 'calc(100vh - 215px)', x: 'max-content' }}
               pagination={{
                 showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
@@ -1003,7 +1035,7 @@ const maintenance = () => {
           <SortModal
             title="调整顺序"
             visible={sortVisible}
-            sortData={tableData}
+            sortData={filterTableData}
             onCancel={() => setSortVisible(false)}
             callBackSubmit={onOK}
           />