feat: '1.关联角色权限新增搜索'

src/pages/userCenter/userManage/RelateRoleModal.jsx

 import React, { useState, useCallback, useEffect } from 'react';
-import { Modal, Spin, Tabs, notification, message, Checkbox, Divider } from 'antd';
+import { Modal, Spin, Tabs, notification, message, Checkbox, Divider, Input } from 'antd';
 import { SetUserRelationList, setUserRelation, setUserRelations } from '@/services/userManage/api';
 import ListCardItem from './components/listCardItem';
 const CheckboxGroup = Checkbox.Group;
+const { Search } = Input;
 
 const RelateRoleModal = props => {
   const {
@@ -26,6 +27,9 @@ const RelateRoleModal = props => {
   const [stationValueList, setStationValueList] = useState({}); // 勾选的站点列表
   const authority = localStorage.getItem('panda-oms-authority');
   const [activeKey, setActiveKey] = useState('1');
+  const [searchWord, setSearchWord] = useState(''); // 关键字
+  const [keyWord, setKeyWord] = useState(''); // 保存关键字
+  const [filterRoleList, setFilterRoleList] = useState(rolelist); // 过滤人员
 
   const getRoleValueCallback = useCallback((value, index) => {
     console.log(value);
@@ -123,7 +127,32 @@ const RelateRoleModal = props => {
         message.error(err);
       });
   };
-  const onChangeList = () => {};
+  // 获取搜索框的值
+  const handleSearch = e => {
+    setSearchWord(e.target.value);
+  };
+
+  // 过滤人员
+  const searchUser = (e) => {
+    setKeyWord(searchWord);
+    console.log(searchWord, filterRoleList, 'filterRoleList');
+    // setFilterRoleList(rolelist.map(item => {
+    //   // 使用filter来创建一个新数组，只包含符合条件的元素
+    //   return {
+    //     ...item, // 保留item的其他属性
+    //     roleList: item.roleList.filter(ele => ele.roleName.includes(searchWord))
+    //   };
+    // }).filter(item => item.roleList.length > 0)); // 过滤掉那些roleList为空的项目
+    // console.log(rolelist.map(item => {
+    //   // 使用filter来创建一个新数组，只包含符合条件的元素
+    //   return {
+    //     ...item, // 保留item的其他属性
+    //     roleList: item.roleList.filter(ele => ele.roleName.includes(searchWord))
+    //   };
+    // }).filter(item => item.roleList.length > 0),'8888888888888888');
+
+  }
+  const onChangeList = () => { };
   const title = (
     <span>
       <span style={{ marginRight: '20px' }}>批量关联角色</span>
@@ -155,12 +184,20 @@ const RelateRoleModal = props => {
         onCancel={onCancel}
         okText="确认"
         cancelText="取消"
-        width="600px"
+        width="650px"
       >
         <Spin spinning={loading} tip="loading">
           <Tabs activeKey={activeKey} onChange={onChange} style={{ marginTop: '-16px' }}>
             <TabPane tab="角色" key="1">
               <div style={{ height: '500px', overflowY: 'scroll' }}>
+                <Search
+                  style={{ width: 260, marginRight: '15px' }}
+                  placeholder="搜索角色名"
+                  onSearch={e => searchUser(e)}
+                  onChange={e => handleSearch(e)}
+                  enterButton
+                  value={searchWord}
+                />
                 {visible &&
                   rolelist.map((role, index) => (
                     <ListCardItem
@@ -170,6 +207,7 @@ const RelateRoleModal = props => {
                       userList={role.roleList}
                       multiRoleList={multiRoleList}
                       mult={mult}
+                      searchWord={searchWord}
                       OUName={role.visibleTitle}
                       getValueCallback={getRoleValueCallback}
                     />
@@ -206,11 +244,19 @@ const RelateRoleModal = props => {
       maskClosable={false}
       okText="确认"
       cancelText="取消"
-      width="600px"
+      width="650px"
     >
       <Spin spinning={loading} tip="loading">
         <Tabs activeKey={activeKey} onChange={onChange} style={{ marginTop: '-16px' }}>
           <TabPane tab="角色" key="1">
+            <Search
+              style={{ width: 260, marginRight: '15px' }}
+              placeholder="搜索角色名"
+              onSearch={e => searchUser(e)}
+              onChange={e => handleSearch(e)}
+              enterButton
+              value={searchWord}
+            />
             <div style={{ height: '500px', overflowY: 'scroll' }}>
               {visible &&
                 rolelist.map((role, index) => (
@@ -219,6 +265,7 @@ const RelateRoleModal = props => {
                     key={`item${index}key`}
                     userList={role.roleList}
                     mult={mult}
+                    searchWord={searchWord}
                     OUName={role.visibleTitle}
                     getValueCallback={getRoleValueCallback}
                     tab="roles"

src/pages/userCenter/userManage/components/listCardItem.jsx

@@ -30,8 +30,8 @@ const ListCardItem = props => {
     userList.map((item, index) => {
       let obj = { ...item };
       obj.label = (
-        <span className={searchWord && obj.userName.includes(searchWord) ? styles.isSearch : ''}>
-          {obj.userName || obj.roleName || obj.stationName}
+        <span className={searchWord && obj.roleName.includes(searchWord) ? styles.isSearch : ''}>
+          {obj.roleName || obj.roleName || obj.stationName}
         </span>
       );
       obj.value = obj.userID || obj.roleID || obj.stationID;

src/routes/config.js

@@ -374,7 +374,7 @@ export default {
             },
             {
               path: '/biz/patrolMaintenance',
-              name: '巡检维保',
+              name: '巡检配置',
               component: BlankLayout,
               routes: [
                 {