fix: '角色管理提出关联用户'

src/pages/bsmanager/base/tablemanager/filedConfig/fieldEditor.jsx

@@ -200,7 +200,8 @@ const AddModal = props => {
 
   useEffect(() => {
     console.log(isVisible);
-    if (keepTreeFirst.indexOf(itemData.name) != -1) {
+    // 用于判断分组名与字段名重复时提示当前未选中字段
+    if (keepTreeFirst.indexOf(itemData.name) != -1 && itemData.children) {
       setShow('none');
     } else {
       setShow('block');
@@ -524,10 +525,8 @@ const AddModal = props => {
       setCurrentSelectOrg(e.ID);
     }
     if (e.node && keepTreeFirst.indexOf(e.node.org.name) != -1 && e.node.children.length > 0) {
-      console.log(111);
       setShow('none');
     } else {
-      console.log(222);
       setShow('block');
     }
     if (isType != '') {

src/pages/bsmanager/workOrder/incident/AddFlowsModal.jsx

@@ -32,6 +32,7 @@ import {
 import styles from './incident.less';
 
 const { Option } = Select;
+const { TextArea } = Input;
 const AddFlowsModal = props => {
   const {
     callBackSubmit = () => {},
@@ -413,8 +414,8 @@ const AddFlowsModal = props => {
           </Col>
           <Col span={24}>
             <Item label="受理权限" name="Roles" labelCol={{ span: 4 }}>
-              <div className={styles.filed_listItem}>
-                <Input
+              <div style={{ display: 'flex', alignContent: 'flex-start' }}>
+                <TextArea
                   style={{ width: '83%' }}
                   placeholder="请选择受理权限"
                   onChange={e => changeText(e, 'Roles')}
@@ -425,7 +426,7 @@ const AddFlowsModal = props => {
                   type="dashed"
                   onClick={() => pickFiled1('Roles')}
                   icon={<PlusOutlined style={{ marginTop: '5px' }} />}
-                  style={{ marginLeft: '5px', width: '58px' }}
+                  style={{ marginLeft: '5px', width: '58px', height: '54px' }}
                 />
               </div>
             </Item>

src/pages/dataCenter/dictionary/WebDic.jsx

@@ -359,12 +359,14 @@ const WebDic = () => {
         if (value === null || value === '-1') {
           console.log(123);
           setData(res);
+          console.log(first);
           // 是否首次加载
           if (first) {
             setSelect(res[0]); // 默认当前选中一级条目第一条
             setSelectColor(res[0].nodeID);
             setSelectID(res[0].nodeID); // 设置选中的一级条目ID，用于添加二级条目
             setFirst(false);
+            console.log(res[0].nodeName);
             setName(res[0].nodeName);
             getData(res[0].nodeID); // 拿到nodeID再次调用接口就回直接进入下面的循环，靠nodeID获取子节点二级条目
           } else {
@@ -856,6 +858,7 @@ const WebDic = () => {
   };
 
   const onImportSubmit = () => {
+    setFirst(true);
     setImportVisible(false);
     setFlag(flag + 1);
   };

src/pages/dataCenter/dictionary/importModal.jsx

@@ -3,11 +3,22 @@
  * @Description:
  * @Author: leizhe
  * @Date: 2022-04-11 18:12:39
- * @LastEditTime: 2022-04-24 15:52:05
+ * @LastEditTime: 2022-05-19 16:41:38
  * @LastEditors: leizhe
  */
 import React, { useEffect, useState } from 'react';
-import { Modal, Form, Input, notification, message, Button, Col, Row, Upload } from 'antd';
+import {
+  Modal,
+  Form,
+  Input,
+  notification,
+  message,
+  Button,
+  Col,
+  Row,
+  Upload,
+  Popconfirm,
+} from 'antd';
 import { ImportDataDictionary } from '@/services/dataCenter/api';
 
 const importModal = props => {
@@ -56,19 +67,41 @@ const importModal = props => {
       }
     });
   };
+
+  const title1 = (
+    <>
+      <span>导入数据</span>
+      <span style={{ color: 'rgb(24, 144, 255)' }}>（覆盖导入）</span>
+    </>
+  );
   return (
     <Modal
-      title="导入数据"
+      title={title1}
       visible={visible}
       onCancel={onCancel}
       destroyOnClose
-      onOk={importData}
+      // onOk={importData}
       afterClose={() => {
         addForm.resetFields();
       }}
       maskClosable={false}
-      okText="确认"
-      cancelText="取消"
+      footer={[
+        <Button key="back" onClick={onCancel}>
+          取消
+        </Button>,
+        <Popconfirm
+          placement="topLeft"
+          title="将覆盖原有数据是否继续导入"
+          onConfirm={importData}
+          okText="确认"
+          key="submit"
+          cancelText="取消"
+        >
+          <Button type="primary">确认</Button>
+        </Popconfirm>,
+      ]}
+      // okText="确认"
+      // cancelText="取消"
     >
       <Form form={addForm} labelCol={{ span: 5 }}>
         <Row>

src/pages/database/InitDataBase/InitDataBase.jsx

@@ -673,7 +673,7 @@ const InitDataBase = props => {
       <PageContainer className={styles.InitDataBaseContainer}>
         <Card>
           <Spin tip="loading..." spinning={cardLoading}>
-            <div className={styles.tableTitle}>数据库初始化</div>
+            {/* <div className={styles.tableTitle}>数据库初始化</div> */}
             <Form
               className={styles.mgTop20}
               layout="horizontal"
@@ -753,7 +753,7 @@ const InitDataBase = props => {
           <div className={styles.tableTitle}>近期保存的数据库连接</div>
           <Table
             style={{ marginTop: '20px' }}
-            scroll={{ x: 'max-content', y: 'calc(100vh - 580px)' }}
+            scroll={{ x: 'max-content', y: 'calc(100vh - 550px)' }}
             columns={columns}
             dataSource={data}
             pagination={false}

src/pages/platformCenter/baseFrameContainer/modelFileManage/ModelFileManage.jsx

@@ -3,7 +3,7 @@
  * @Description:
  * @Author: leizhe
  * @Date: 2022-04-06 11:39:53
- * @LastEditTime: 2022-04-19 17:24:27
+ * @LastEditTime: 2022-05-18 14:36:11
  * @LastEditors: leizhe
  */
 import React, { useState, useEffect } from 'react';
@@ -74,6 +74,25 @@ const ModelFileManage = () => {
     setSelectedRowKeys([]);
     setTableLoading(true);
     List({ version: '全部', pageIndex: 1, pageSize: 20 }).then(res => {
+      setTableLoading(false);
+      if (res.say.statusCode === '0000') {
+        console.log(res.getMe);
+        setTableData(res.getMe);
+        setTotal(res.totalRcdNum);
+        // let aa = [];
+        // if (res.getMe.length > 0) {
+        //   res.getMe.map(i => {
+        //     aa.push(i.id);
+        //   });
+        // }
+        // console.log(aa);
+        // setKeepId(aa);
+      }
+    });
+  }, [flag]);
+
+  useEffect(() => {
+    List({ version: '全部' }).then(res => {
       setTableLoading(false);
       if (res.say.statusCode === '0000') {
         console.log(res.getMe);
@@ -89,7 +108,7 @@ const ModelFileManage = () => {
         setKeepId(aa);
       }
     });
-  }, [flag]);
+  }, []);
 
   const columns = [
     {

src/pages/platformCenter/gis/schemeConfig/SchemeConfig.less

@@ -122,6 +122,7 @@
 .solutionContainer {
   .ant-table-body {
     height: calc(100vh - 250px) !important;
+    border-bottom: 1px solid #f0f0f0;
   }
 }
 // .solutionConfig {

src/pages/platformCenter/gis/schemeConfig/projectMessage/components/card.jsx

@@ -170,7 +170,7 @@ const CardData = props => {
         style={{ width: 300 }}
       >
         <p>
-          <span className={styles.schemeName}>矢量</span> {props.item.servicename}
+          <span className={styles.schemeName}>管网</span> {props.item.servicename}
         </p>
         {/* <div>
           <span className={styles.schemeName}>范围</span>
@@ -182,7 +182,7 @@ const CardData = props => {
           </Button>
         </div> */}
         <div className={styles.schemeItem}>
-          <span className={styles.schemeName}>瓦片</span>
+          <span className={styles.schemeName}>底图</span>
           <Button className={styles.schemeBtn} onClick={() => addTile(props.item)}>
             {' '}
             <PlusOutlined />

src/pages/platformCenter/gis/schemeConfig/solutionConfig/RoleModal.jsx

 import React, { useEffect, useState } from 'react';
-import { Modal, Checkbox } from 'antd';
+import { Modal, Checkbox, Spin } from 'antd';
 import { RoleGroupList } from '@/services/messagemanage/messagemanage';
 import styles from './RoleModal.less';
 const CheckboxGroup = Checkbox.Group;
@@ -7,11 +7,14 @@ const CheckboxGroup = Checkbox.Group;
 const RoleModal = porps => {
   const { visible, rolCallBack, onCancel, selectValue } = porps;
   const [roleList, setRoleList] = useState([]); // 角色列表
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     if (visible) {
+      setIsLoading(true);
       let hasCheckList = selectValue ? selectValue.split(',') : [];
       RoleGroupList().then(res => {
+        setIsLoading(false);
         if (res.code === 0) {
           let roleListData = res.data.roleList;
           // 给子角色分类放到外面来
@@ -127,34 +130,36 @@ const RoleModal = porps => {
         destroyOnClose
         centered
       >
-        <div className={styles.checkContainer}>
-          {roleList.map((item, index) => (
-            <div className={styles.checkContent} key={item.visibleTitle}>
-              <div className={styles.topCheckbox}>
-                <Checkbox
-                  indeterminate={item.indeterminate}
-                  onChange={e => onCheckAllChange(e, index)}
-                  checked={item.checkAll}
-                >
-                  {item.visibleTitle}
-                </Checkbox>
+        <Spin spinning={isLoading}>
+          <div className={styles.checkContainer}>
+            {roleList.map((item, index) => (
+              <div className={styles.checkContent} key={item.visibleTitle}>
+                <div className={styles.topCheckbox}>
+                  <Checkbox
+                    indeterminate={item.indeterminate}
+                    onChange={e => onCheckAllChange(e, index)}
+                    checked={item.checkAll}
+                  >
+                    {item.visibleTitle}
+                  </Checkbox>
+                </div>
+                <div className={styles.bottomCheckbox}>
+                  <CheckboxGroup
+                    value={item.checkedList}
+                    onChange={list => onChange(list, index)}
+                    style={{ display: 'flex', flexWrap: 'wrap' }}
+                  >
+                    {item.options.map(val => (
+                      <Checkbox key={val} value={val}>
+                        {val}
+                      </Checkbox>
+                    ))}
+                  </CheckboxGroup>
+                </div>
               </div>
-              <div className={styles.bottomCheckbox}>
-                <CheckboxGroup
-                  value={item.checkedList}
-                  onChange={list => onChange(list, index)}
-                  style={{ display: 'flex', flexWrap: 'wrap' }}
-                >
-                  {item.options.map(val => (
-                    <Checkbox key={val} value={val}>
-                      {val}
-                    </Checkbox>
-                  ))}
-                </CheckboxGroup>
-              </div>
-            </div>
-          ))}
-        </div>
+            ))}
+          </div>
+        </Spin>
       </Modal>
     </div>
   );

src/pages/platformCenter/gis/schemeConfig/solutionConfig/solutionConfig.jsx

@@ -669,20 +669,14 @@ const VectorData = props => {
             dataSource={webData}
             bordered
             // style={{ height: 'calc(100vh - 610px)' }}
-            pagination={{
-              showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
-              defaultPageSize: 8,
-              onChange: value => {
-                setWebCurrent(value - 1);
-              },
-            }}
+            pagination={false}
             rowKey="schemename"
-            scroll={{ y: 210 }}
+            scroll={{ y: 250 }}
           />
 
           <Divider orientation="left">
             <div className={styles.divider}>
-              手持{' '}
+              Moblie{' '}
               <PlusOutlined
                 onClick={() => {
                   addType('addHand');
@@ -696,15 +690,9 @@ const VectorData = props => {
             dataSource={handData}
             bordered
             rowKey="schemename"
-            scroll={{ y: 210 }}
+            scroll={{ y: 250 }}
             // style={{ height: 'calc(100vh - 610px)' }}
-            pagination={{
-              showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
-              defaultPageSize: 8,
-              onChange: value => {
-                setHandCurrent(value - 1);
-              },
-            }}
+            pagination={false}
           />
         </div>
       </Spin>

src/pages/userCenter/roleManage/RoleManage.jsx

@@ -11,6 +11,7 @@ import {
   Space,
   Empty,
   message,
+  Tabs,
 } from 'antd';
 import Tree from '@/components/ExpendableTree';
 import PageContainer from '@/components/BasePageContainer';
@@ -46,12 +47,13 @@ import EditModal from './EditModal';
 import EditGroup from './EditGroup';
 import userStyles from '@/pages/userCenter/userManage/UserManage.less';
 import iconStyles from '@/assets/font/omsfont/iconfont.css';
-import UserModal from './UserModal';
 import SelectUser from './SelectUser/SelectUser';
+import NewSelectUser from './SelectUser/NewSelectUser';
 import { data } from '@/pages/platformCenter/messageManage/projectManage/components/Mock';
 
 const { Search } = Input;
 const placeholder = '请输入功能名称';
+const { TabPane } = Tabs;
 
 const SiteManage = () => {
   const [treeData, setTreeData] = useState([]);
@@ -70,6 +72,7 @@ const SiteManage = () => {
   const [saveCurId, setSaveCurId] = useState([]); // 树节点ID
   const [groupVisible, setGroupVisible] = useState(false); // 分组编辑弹窗
   const [userVisible, setUserVisible] = useState(false); // 用户关联弹窗
+  const [userNewVisible, setUserNewVisible] = useState(false); // 用户关联弹窗
   const [hasData, setHasData] = useState(false);
   const [valueList, setValueList] = useState([]);
   const [dataList, setdataList] = useState([]);
@@ -81,20 +84,24 @@ const SiteManage = () => {
   const [chileID, setChildID] = useState([]);
   const [descrip, setDescrip] = useState('当前未选中角色');
   const [keepTree, setKeepTree] = useState([]);
+  const [keyValue, setKeyValue] = useState('0');
   // const [childData, setChildData] = useState({visibleValue:''})
 
   // 点击树的回调
   const handleTreeSelect = (e, treenode) => {
+    setSearchWord('');
     console.log(e);
     console.log(treenode);
     if (treenode) {
       const { node } = treenode;
       const { roleID: id } = node;
+      console.log(node);
       setItemObj(node);
+      setUserNewVisible(true);
       console.log(id);
       if (id) {
         setSaveTreeId(id);
-        if (node.BuiltInRole === true) {
+        if (node.BuiltInRole === true && keyValue == '1') {
           setRoleID('');
           setDescrip('内置角色不可配置菜单权限');
           setFlagSearch(0);
@@ -283,12 +290,12 @@ const SiteManage = () => {
                             onClick={e => deletesUser(e, i)}
                           />
                         </Tooltip>
-                        <Tooltip title="关联用户" className={styles.fs}>
+                        {/* <Tooltip title="关联用户" className={styles.fs}>
                           <UserAddOutlined
                             style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                             onClick={e => relevancyUser(e, i)}
                           />
-                        </Tooltip>
+                        </Tooltip> */}
                       </>
                     )}
                     {!i.roleID && (
@@ -358,12 +365,12 @@ const SiteManage = () => {
                         onClick={e => deletesUser(e, itemRole)}
                       />
                     </Tooltip>
-                    <Tooltip title="关联用户" className={styles.fs}>
+                    {/* <Tooltip title="关联用户" className={styles.fs}>
                       <UserAddOutlined
                         style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                         onClick={e => relevancyUser(e, itemRole)}
                       />
-                    </Tooltip>
+                    </Tooltip> */}
                   </>
                 )}
                 {!itemRole.roleID && (
@@ -407,12 +414,12 @@ const SiteManage = () => {
                     onClick={e => deletesUser(e, item)}
                   />
                 </Tooltip>
-                <Tooltip title="关联用户" className={styles.fs}>
+                {/* <Tooltip title="关联用户" className={styles.fs}>
                   <UserAddOutlined
                     style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
                     onClick={e => relevancyUser(e, item)}
                   />
-                </Tooltip>
+                </Tooltip> */}
               </>
             )}
             {!item.roleID && (
@@ -530,6 +537,13 @@ const SiteManage = () => {
     setItemObj('');
     handleTreeSelect(saveCurId);
   };
+  const userNewModal = () => {
+    setUserNewVisible(false);
+    // setFlag(flag + 1);
+    // getRoleGroup();
+    // setItemObj('');
+    handleTreeSelect(saveCurId);
+  };
   const valueCallback = valueObj => {
     setSubList(valueObj);
   };
@@ -718,6 +732,26 @@ const SiteManage = () => {
     });
     console.log(dragList, 'dragList');
   };
+
+  const handleParChange = key => {
+    setKeyValue(key);
+    const { roleID: id } = itemObj;
+    console.log(key);
+    if (id) {
+      if (itemObj.BuiltInRole === true && key == '1') {
+        setRoleID('');
+        setDescrip('内置角色不可配置菜单权限');
+        setFlagSearch(0);
+      } else {
+        setRoleID(id);
+        setFlagSearch(1);
+      }
+    } else {
+      setRoleID('');
+      setDescrip('当前未选中角色');
+      setFlagSearch(0);
+    }
+  };
   return (
     <PageContainer>
       <div
@@ -821,18 +855,30 @@ const SiteManage = () => {
             [styles.boxH]: mulu,
           })}
         >
-          <Card
-            className={classnames({
-              [styles.cardBoxTop]: true,
-              [styles.boxH]: mulu,
-            })}
-          >
-            <Row align="middle">
-              <Col span={8}>
+          <Card>
+            <Tabs style={{ marginTop: '-14px' }} activeKey={keyValue} onChange={handleParChange}>
+              <TabPane tab="关联用户" key="0">
+                {roleID ? (
+                  <div className={styles.cardBoxRNew}>
+                    <NewSelectUser
+                      visible={userNewVisible}
+                      itemObj={itemObj}
+                      onCancel={() => setUserNewVisible(false)}
+                      confirmModal={userNewModal}
+                    />
+                  </div>
+                ) : (
+                  <div className={styles.cardBoxH}>
+                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} />
+                  </div>
+                )}
+              </TabPane>
+              <TabPane tab="菜单权限" key="1">
                 {flagSearch == 1 ? (
                   <Search
                     style={{ width: 260 }}
                     allowClear
+                    value={searchWord}
                     placeholder={placeholder}
                     // onSearch={handleSearch}
                     onChange={handleChange}
@@ -841,29 +887,26 @@ const SiteManage = () => {
                 ) : (
                   <span />
                 )}
-              </Col>
-              <Col span={3} />
-            </Row>
-          </Card>
-          <Card>
-            {roleID ? (
-              <div className={styles.cardBoxR}>
-                <ListCard
-                  roleID={roleID}
-                  loading={loading}
-                  checkList={valueList}
-                  dataList={dataList}
-                  searchWord={searchWord}
-                  onCommit={handleCommit}
-                  btnLoading={btnLoading}
-                  hasData={hasData}
-                />
-              </div>
-            ) : (
-              <div className={styles.cardBoxH}>
-                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} />
-              </div>
-            )}
+                {roleID ? (
+                  <div className={styles.cardBoxR}>
+                    <ListCard
+                      roleID={roleID}
+                      loading={loading}
+                      checkList={valueList}
+                      dataList={dataList}
+                      searchWord={searchWord}
+                      onCommit={handleCommit}
+                      btnLoading={btnLoading}
+                      hasData={hasData}
+                    />
+                  </div>
+                ) : (
+                  <div className={styles.cardBoxH}>
+                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} />
+                  </div>
+                )}
+              </TabPane>
+            </Tabs>
           </Card>
         </div>
       </div>

src/pages/userCenter/roleManage/RoleManage.less

@@ -65,7 +65,12 @@
   align-items: center;
 }
 .cardBoxR {
-  height: calc(100vh - 182px);
+  height: calc(100vh - 192px);
+  min-width: 870px;
+  overflow-y: scroll;
+}
+.cardBoxRNew {
+  height: calc(100vh - 160px);
   min-width: 870px;
   overflow-y: scroll;
 }

src/pages/userCenter/roleManage/SelectUser/NewSelectUser.jsx

+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Modal, Input, Button, message, Spin, Pagination, Table, Tooltip, Space } from 'antd';
+import { GetGroupUserTree } from '@/services/messagemanage/messagemanage';
+import { getStationUsers, chooseUserToStation } from '@/services/siteManage/api';
+import { DeleteOutlined } from '@ant-design/icons';
+import styles from './SelectUser.less';
+import CardCheck from './CardCheck';
+
+const NewSelectUser = props => {
+  const { confirmModal, onCancel, visible, itemObj } = props;
+  const [allList, setAllist] = useState([]); // 用于展示得数据
+  const [checkList, setCheckList] = useState([]); // 选中得数据集合
+  const [loading, setLoading] = useState(false);
+  const [total, setTotal] = useState();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchName, setSearchName] = useState();
+  const [deleKey, setDeleKey] = useState(); // 删除用户的key值
+  const [delFlag, setDelFlag] = useState(0); // 删除标识每次删除后加一
+  useEffect(() => {
+    console.log(itemObj);
+    console.log(visible);
+    setCheckList([]);
+    setSearchName('');
+    setCurrentPage(1);
+    getInitialData();
+    // getData(searchName, 1, pageSize);
+  }, [itemObj]);
+  // 选中后得回调函数
+  const checkCallBack = useCallback(newCheckList => {
+    if (newCheckList) {
+      setCheckList(newCheckList);
+    }
+  });
+
+  // 监听分页
+  const paginationChange = (page, pageSizes) => {
+    setCurrentPage(page);
+    setPageSize(pageSizes);
+    getData(searchName, page, pageSizes);
+  };
+  // 获取初始数据
+  const getInitialData = () => {
+    let p1 = getStationUsers({ stationId: itemObj.roleID });
+    let p2 = GetGroupUserTree({
+      key: '',
+      pageSize: 10,
+      PageIndex: 1,
+    });
+    setLoading(true);
+    Promise.all([p1, p2]).then(res => {
+      setLoading(false);
+      if (res[0].code === 0 && res[1].code === 0) {
+        setTotal(res[1].data.count);
+        let listCheck = res[0].data.map(item => ({
+          label: item.userName,
+          value: item.userID,
+          groupName: item.OUName,
+        }));
+
+        setCheckList(listCheck);
+        // 数据处理成checkbox组件需要得形式
+        let list = res[1].data.data.map(item => {
+          let indeterminate = false;
+          let checkedList = [];
+          let checkAll = false;
+          let options = item.users.map(val => {
+            listCheck.forEach(ele => {
+              if (val.userId === ele.value) {
+                checkedList.push(ele.value);
+              }
+            });
+            return {
+              label: val.userName,
+              value: val.userId,
+              groupName: item.groupName,
+            };
+          });
+          if (checkedList.length === options.length && checkedList.length > 0) {
+            checkAll = true;
+          }
+          if (checkedList.length < options.length && checkedList.length > 0) {
+            indeterminate = true;
+          }
+          return {
+            groupName: item.groupName,
+            groupId: item.groupId,
+            indeterminate,
+            checkAll,
+            checkedList,
+            plainOptions: options,
+          };
+        });
+        setAllist(list);
+      } else if (res[0].code !== 0) {
+        message.error(res[0].msg);
+      } else {
+        message.error(res[1].msg);
+      }
+    });
+  };
+  // 提交勾选人员
+  const onFinish = () => {
+    chooseUserToStation({
+      userList: String(checkList.map(item => item.value)),
+      stationID: itemObj.roleID,
+    })
+      .then(res => {
+        if (res.code === 0) {
+          // confirmModal();
+          message.success('关联成功');
+        } else {
+          message.error(res.msg);
+        }
+      })
+      .catch(() => {
+        message.error('网络异常，请稍后再试');
+      });
+  };
+  // 搜索
+  const onSearch = () => {
+    setCurrentPage(1);
+    getData(searchName, 1, pageSize);
+  };
+  // 重置
+  const onReset = () => {
+    setCurrentPage(1);
+    getData('', 1, pageSize);
+    setSearchName('');
+  };
+  // 搜索框监听
+  const searchChange = e => {
+    setSearchName(e.target.value);
+  };
+  // 获取数据
+  const getData = (username, page, pageSizes) => {
+    setLoading(true);
+    GetGroupUserTree({
+      key: username,
+      pageSize: pageSizes,
+      PageIndex: page,
+    })
+      .then(res => {
+        setLoading(false);
+        if (res.code === 0) {
+          setTotal(res.data.count);
+          // 数据处理成checkbox组件需要得形式
+          let list = res.data.data.map(item => {
+            let indeterminate = false;
+            let checkedList = [];
+            let checkAll = false;
+            let options = item.users.map(val => {
+              checkList.forEach(ele => {
+                if (val.userId === ele.value) {
+                  checkedList.push(ele.value);
+                }
+              });
+              return {
+                label: val.userName,
+                value: val.userId,
+                groupName: item.groupName,
+              };
+            });
+            if (checkedList.length === options.length && checkedList.length > 0) {
+              checkAll = true;
+            }
+            if (checkedList.length < options.length && checkedList.length > 0) {
+              indeterminate = true;
+            }
+            return {
+              groupName: item.groupName,
+              groupId: item.groupId,
+              indeterminate,
+              checkAll,
+              checkedList,
+              plainOptions: options,
+            };
+          });
+          setAllist(list);
+        } else {
+          message.error(res.msg);
+        }
+      })
+      .catch(() => {
+        setLoading(false);
+        message.error('网络异常，请稍后再试');
+      });
+  };
+  // 删除角色
+  const deleteRol = key => {
+    const dataSource = [...checkList];
+    setCheckList(dataSource.filter(item => item.value !== key));
+    setDeleKey(key);
+    setDelFlag(delFlag + 1);
+  };
+  const columns = [
+    {
+      title: '已选用户',
+      dataIndex: 'label',
+      key: 'label',
+      width: 220,
+      ellipsis: {
+        showTitle: true,
+      },
+      render: (text, record) => (
+        <span>
+          <Tooltip placement="topLeft" title={`${record.label}(${record.groupName})`}>
+            {record.label}({record.groupName})
+          </Tooltip>
+        </span>
+      ),
+    },
+    {
+      title: '操作',
+      align: 'center',
+      ellipsis: true,
+      width: 80,
+      render: record => (
+        <>
+          <Space>
+            <Tooltip title="清除关联用户">
+              <DeleteOutlined
+                onClick={() => deleteRol(record.value)}
+                style={{ fontSize: '16px', color: '#e86060' }}
+              />
+            </Tooltip>
+          </Space>
+        </>
+      ),
+    },
+  ];
+  console.log(allList, 'allList');
+  return (
+    <>
+      {/* <Modal
+        title="关联用户"
+        visible={visible}
+        onOk={onFinish}
+        width="900px"
+        onCancel={onCancel}
+        maskClosable={false}
+        destroyOnClose
+        centered
+      > */}
+      <div className={styles.pushTestContent}>
+        <div className={styles.leftContent}>
+          {/* 头部搜索框 */}
+          <div className={styles.searchHeader}>
+            <Input.Search
+              value={searchName}
+              placeholder="请输入部门或用户"
+              onChange={searchChange}
+              onSearch={onSearch}
+              enterButton
+              style={{ width: '300px', marginRight: '15px' }}
+            />
+            <Button type="primary" htmlType="submit" onClick={onReset}>
+              重置
+            </Button>
+          </div>
+          {/* 复选框模块 */}
+          <Spin spinning={loading}>
+            <div className={styles.checkContainer}>
+              {allList.map((item, index) => (
+                <div className={styles.checkBoxContent} key={item.groupId}>
+                  <CardCheck
+                    cardMsg={item}
+                    cardIndex={index}
+                    callback={(val, newCheckList) => checkCallBack(val, newCheckList)}
+                    checkList={checkList}
+                    deleKey={deleKey}
+                    delFlag={delFlag}
+                  />
+                </div>
+              ))}
+            </div>
+          </Spin>
+        </div>
+        <div className={styles.tableRight}>
+          <Table
+            bordered
+            style={{ width: '400px', overflowX: 'hidden' }}
+            rowKey={record => record.value}
+            columns={columns}
+            dataSource={checkList}
+            pagination={false}
+            size="small"
+            scroll={{ y: 'cala(100vh - 257px)' }}
+          />
+        </div>
+      </div>
+      {/* 分页 */}
+      <Pagination
+        total={total}
+        showTotal={(totals, range) => `第${range[0]}-${range[1]} 条/共 ${totals} 条`}
+        defaultPageSize={pageSize}
+        defaultCurrent={1}
+        current={currentPage}
+        onChange={paginationChange}
+        style={{ marginBottom: '10px' }}
+        size="small"
+        showQuickJumper
+      />
+      <Button onClick={onFinish} type="primary" htmlType="submit" style={{ float: 'right' }}>
+        提交
+      </Button>
+      {/* </Modal> */}
+    </>
+  );
+};
+
+export default NewSelectUser;

src/pages/userCenter/roleManage/SelectUser/SelectUser.less

@@ -4,8 +4,8 @@
     display: flex;
   }
   .checkContainer {
-    height: 500px;
-    width: 500px;
+    height: calc(100vh - 300px);
+    width: 100%;
     overflow-y: scroll;
     margin: 20px 0;
     padding-right: 5px;
@@ -48,7 +48,13 @@
       }
     }
   }
+  .leftContent {
+    width: 70%;
+  }
   .tableRight {
     margin-left: 10px;
   }
+  .ant-table-body {
+    height: calc(100vh - 290px);
+  }
 }