Skip to content

C
CivManage
Commit 11cc6049 authored by 邓超's avatar 邓超
Browse files
Options

fix: 重构角色管理关联角色模块

parent 488362fd
Pipeline #41574 passed with stages
          in 13 minutes 8 seconds
          Show whitespace changes
          Inline Side-by-side
          Showing with 543 additions and 97 deletions
          src/pages/userCenter/roleManage/RoleManage.jsx
          View file @ 11cc6049
          import React, { useState, useEffect } from 'react';
          import {
          Row,
          Col,
          Card,
          Input,
          Spin,
          notification,
          Button,
          Tooltip,
          Space,
          Empty,
          } from 'antd';
          import { Row, Col, Card, Input, Spin, notification, Button, Tooltip, Space, Empty } from 'antd';
          import Tree from '@/components/ExpendableTree';
          import PageContainer from '@/components/BasePageContainer';
          import {
          ......@@ -34,10 +23,7 @@ import {
          DragGroup,
          getWebConfigTypes,
          } from '@/services/userCenter/roleManage/api';
          import ListCard, {
          checkChildrenByCondition,
          getId,
          } from '@/components/CheckGroup';
          import ListCard, { checkChildrenByCondition, getId } from '@/components/CheckGroup';
          // import ListCard from '@/pages/orgnazation/ListCard';
          import qs from 'qs';
          import classnames from 'classnames';
          ......@@ -49,6 +35,7 @@ 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 { data } from '@/pages/platformCenter/messageManage/projectManage/components/Mock';
          const { Search } = Input;
          ......@@ -545,8 +532,7 @@ const SiteManage = () => {
          const dropKey = infos.node.key;
          const dragKey = infos.dragNode.key;
          const dropPos = infos.node.pos.split('-');
          const dropPosition =
          infos.dropPosition - Number(dropPos[dropPos.length - 1]);
          const dropPosition = infos.dropPosition - Number(dropPos[dropPos.length - 1]);
          const datas = JSON.parse(JSON.stringify(treeData));
          console.log(dropKey, 'dropKey');
          ......@@ -633,7 +619,6 @@ const SiteManage = () => {
          }
          });
          } else {
          console.log('444444444444');
          if (!canDrop) {
          return;
          }
          ......@@ -641,13 +626,12 @@ const SiteManage = () => {
          if (dragObj.groupflag && dropObj.subSystemValue) {
          return;
          }
          console.log('55555555555');
          let ar;
          let i;
          loop(datas, dropKey, -1, (item, index, arr, parentID) => {
          ar = arr;
          i = index;
          console.log(item, 'arararararar');
          if (item.group) {
          id = item.group;
          } else {
          ......@@ -695,9 +679,7 @@ const SiteManage = () => {
          <span>选择角色：</span>
          </div>
          {treeData && treeData.length > 0 && (
          <div
          style={{ height: 'calc(100vh - 130px)', overflowY: 'scroll' }}
          >
          <div style={{ height: 'calc(100vh - 130px)', overflowY: 'scroll' }}>
          <Tree
          showIcon
          onSelect={handleTreeSelect}
          ......@@ -736,7 +718,13 @@ const SiteManage = () => {
          onCancel={() => setGroupVisible(false)}
          confirmModal={groupModal}
          />
          <UserModal
          {/* <UserModal
          visible={userVisible}
          itemObj={itemObj}
          onCancel={() => setUserVisible(false)}
          confirmModal={userModal}
          /> */}
          <SelectUser
          visible={userVisible}
          itemObj={itemObj}
          onCancel={() => setUserVisible(false)}
          ......@@ -797,10 +785,7 @@ const SiteManage = () => {
          hasData={hasData}
          />
          ) : (
          <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description="当前未选中角色"
          />
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前未选中角色" />
          )}
          </Card>
          </div>
          ......
          src/pages/userCenter/roleManage/SelectUser/CardCheck.jsx 0 → 100644
          View file @ 11cc6049
          import React, { useState, useEffect, useRef } from 'react';
          import { Checkbox } from 'antd';
          import styles from './SelectUser.less';
          const CheckboxGroup = Checkbox.Group;
          const CardCheck = props => {
          // 自定义获取改变后的值hooks
          const usePrevious = value => {
          const ref = useRef();
          useEffect(() => {
          ref.current = value;
          });
          return ref.current;
          };
          const { cardMsg, callback, checkList } = props;
          const [checkedList, setCheckedList] = useState([]); // 选中列表
          const [indeterminate, setIndeterminate] = useState(false);
          const [checkAll, setCheckAll] = useState(false);
          const [plainOptions, setPlainOptions] = useState([]);
          const prevAmount = usePrevious({ checkedList });
          useEffect(() => {
          setPlainOptions(cardMsg.plainOptions);
          setCheckedList(cardMsg.checkedList);
          setIndeterminate(cardMsg.indeterminate);
          setCheckAll(cardMsg.checkAll);
          }, []);
          useEffect(() => {
          if (prevAmount) {
          let newCheckList = [...checkList];
          // 当前选中的
          let currentArr = checkedList;
          // 上一次选中的
          let preArr = prevAmount.checkedList;
          currentArr = new Set(currentArr);
          preArr = new Set(preArr);
          // 找出相同的部分
          let someArr = [...new Set([...currentArr].filter(x => preArr.has(x)))];
          // 复选框事选中还是取消选中 add or del
          let checkType;
          if ([...currentArr].length > [...preArr].length) {
          checkType = 'add';
          } else if ([...currentArr].length < [...preArr].length) {
          checkType = 'del';
          }
          if (checkType === 'add') {
          // 添加新选中的元素
          currentArr.forEach(item => {
          if (someArr.indexOf(item) === -1) {
          let checkName = plainOptions.find(ele => ele.value === item);
          newCheckList.push(checkName);
          }
          });
          } else if (checkType === 'del') {
          // 删除取消勾选的元素
          preArr.forEach(item => {
          if (someArr.indexOf(item) === -1) {
          newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1);
          }
          });
          }
          callback(checkedList, newCheckList);
          }
          }, [checkedList]);
          // 单选监听
          const onChange = list => {
          setCheckedList(list);
          setIndeterminate(!!list.length && list.length < plainOptions.length);
          setCheckAll(list.length === plainOptions.length);
          };
          // 全选监听
          const onCheckAllChange = e => {
          setCheckedList(e.target.checked ? plainOptions.map(item => item.value) : []);
          setIndeterminate(false);
          setCheckAll(e.target.checked);
          };
          return (
          <div className={styles.checkContent}>
          <div className={styles.topCheckbox}>
          <Checkbox
          indeterminate={indeterminate}
          onChange={e => onCheckAllChange(e)}
          checked={checkAll}
          >
          {cardMsg.groupName}
          </Checkbox>
          </div>
          <div className={styles.bottomCheckbox}>
          <CheckboxGroup
          value={checkedList}
          onChange={list => onChange(list)}
          style={{ display: 'flex', flexWrap: 'wrap' }}
          >
          {plainOptions.map(item => (
          <Checkbox key={item.value} value={item.value}>
          {item.label}
          </Checkbox>
          ))}
          </CheckboxGroup>
          </div>
          </div>
          );
          };
          export default CardCheck;
          src/pages/userCenter/roleManage/SelectUser/SelectUser.jsx 0 → 100644
          View file @ 11cc6049
          import React, { useState, useEffect, useCallback } from 'react';
          import { Modal, Input, Button, message, Spin, Pagination, Table } from 'antd';
          import { GetGroupUserTree, TestPush } from '@/services/platform/messagemanage';
          import { getStationUsers, chooseUserToStation } from '@/services/userCenter/siteManage/api';
          import styles from './SelectUser.less';
          import DragTable from '@/components/DragTable/DragTable';
          import CardCheck from './CardCheck';
          const PushTest = props => {
          const { confirmModal, onCancel, visible, pushTestMsg, 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();
          useEffect(() => {
          if (visible) {
          setCurrentPage(1);
          getInitialData();
          // getData(searchName, 1, pageSize);
          } else {
          setCheckList([]);
          setAllist([]);
          setSearchName('');
          }
          }, [visible]);
          // 选中后得回调函数
          const checkCallBack = useCallback((val, newCheckList) => {
          if (val) {
          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,
          });
          Promise.all([p1, p2]).then(res => {
          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 columns = [
          {
          title: '已选用户',
          dataIndex: 'label',
          key: 'label',
          width: 300,
          render: (text, record) => (
          <span>
          {record.label}({record.groupName})
          </span>
          ),
          },
          ];
          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}
          />
          </div>
          ))}
          </div>
          </Spin>
          {/* 分页 */}
          <Pagination
          total={total}
          showTotal={(totals, range) => `第${range[0]}-${range[1]} 条/共 ${totals} 条`}
          defaultPageSize={pageSize}
          defaultCurrent={1}
          current={currentPage}
          onChange={paginationChange}
          style={{ marginBottom: '10px', width: '500px' }}
          size="small"
          showQuickJumper
          />
          </div>
          <div className={styles.tableRight}>
          <Table
          bordered
          style={{ width: '350px', overflowX: 'hidden' }}
          rowKey={record => record.value}
          columns={columns}
          dataSource={checkList}
          pagination={false}
          size="small"
          scroll={{ y: 530 }}
          />
          </div>
          </div>
          </Modal>
          </>
          );
          };
          export default PushTest;
          src/pages/userCenter/roleManage/SelectUser/SelectUser.less 0 → 100644
          View file @ 11cc6049
          .pushTestContent {
          display: flex;
          .searchHeader {
          display: flex;
          }
          .checkContainer {
          height: 500px;
          width: 500px;
          overflow-y: scroll;
          margin: 20px 0;
          padding-right: 5px;
          .checkContent {
          display: flex;
          width: 100%;
          flex-direction: column;
          border: 1px solid #c2cdfd;
          border-radius: 5px;
          margin-top: 20px;
          min-height: 50px;
          padding: 0 10px 10px 20px;
          .ant-checkbox-wrapper {
          background-color: #fff;
          }
          .topCheckbox {
          height: 20px;
          margin: -10px 0 0 0px;
          line-height: 20px;
          }
          .topCheckbox > label :hover {
          font-weight: 600;
          }
          .bottomCheckbox {
          margin-top: 10px;
          .ant-checkbox-wrapper {
          min-width: 150px;
          margin-left: 0;
          }
          // .ant-checkbox-group-item {
          // min-width: 150px !important;
          // }
          // .ant-checkbox-wrapper {
          // min-width: 150px !important;
          // }
          }
          .checkdiv {
          display: flex;
          flex-wrap: wrap;
          }
          }
          }
          .tableRight {
          margin-left: 10px;
          }
          }
          src/pages/userCenter/roleManage/UserModal.jsx
          View file @ 11cc6049
          import useModal from 'antd/lib/modal/useModal'
          import React, { useEffect, useState } from 'react'
          import useModal from 'antd/lib/modal/useModal';
          import React, { useEffect, useState } from 'react';
          import SiteModal from '@/components/Modal/SiteModa';
          import classnames from 'classnames'
          import classnames from 'classnames';
          import styles from './UserModal.less';
          import lodash, { clone } from 'lodash';
          import { Card, Empty, Pagination, Checkbox, notification, Input, Row, Col } from 'antd'
          import { Card, Empty, Pagination, Checkbox, notification, Input, Row, Col } from 'antd';
          import {
          getWebModuleTree,
          chooseUserToStation,
          ......@@ -14,43 +14,42 @@ import {
          groupUserPagingList,
          addChildSiteNode,
          getSiteTree,
          getStationUsers
          getStationUsers,
          } from '@/services/userCenter/siteManage/api';
          import {
          UserOutlined,
          } from '@ant-design/icons';
          import { UserOutlined } from '@ant-design/icons';
          import qs from 'qs';
          const { Search } = Input;
          const placeholder = '请输入机构名称';
          const UserModal = props => {
          const [dataList, setdataList] = useState([]);
          const [total, setTotal] = useState(0); // 分页总数
          const [page, setPage] = useState({ pageNum: 1, pageSize: 5 });
          const [selectList, setSelectList] = useState([]); // 选择列表数据
          const [updatePageUser, setUpdatePageUser] = useState(1);//
          const [updatePageUser, setUpdatePageUser] = useState(1); //
          const [updateCheck, setUpdateCheck] = useState(1);
          const [name, setName] = useState('');
          const { itemObj, confirmModal } = props
          const { itemObj, confirmModal, visible } = props;
          const isAllChecked = index =>
          dataList[index].Users.filter(item => item.isChecked).length ===
          dataList[index].Users.length;
          dataList[index].Users.filter(item => item.isChecked).length === dataList[index].Users.length;
          //切换站点，点击分页按钮，提交
          // 切换站点，点击分页按钮，提交
          useEffect(() => {
          if (!itemObj) return;
          getList();
          }, [updatePageUser, name]);
          //切换站点，提交时触发已勾选列表更新
          useEffect(() => {
          if (!visible) {
          setName('');
          }
          }, [visible]);
          // 切换站点，提交时触发已勾选列表更新
          useEffect(() => {
          if (!itemObj) return;
          //getAllcheckList();
          getAllCheckListNew()
          // getAllcheckList();
          getAllCheckListNew();
          }, [itemObj, updateCheck]);
          //获取当前站点可编辑用户(已勾选和未勾选)分页展示
          // 获取当前站点可编辑用户(已勾选和未勾选)分页展示
          const getList = () => {
          let params = {
          id: +itemObj.roleID || '',
          ......@@ -71,8 +70,7 @@ const UserModal = props => {
          list[index].Users[userIndex].isChecked = true;
          }
          });
          let checkedLen = list[index].Users.filter(v => v.isChecked)
          .length;
          let checkedLen = list[index].Users.filter(v => v.isChecked).length;
          if (checkedLen === list[index].Users.length) {
          list[index].isChecked = true;
          }
          ......@@ -80,24 +78,24 @@ const UserModal = props => {
          });
          });
          }
          //handleShowModal('loading', false);
          // handleShowModal('loading', false);
          setdataList(lodash.cloneDeep(list));
          setTotal(res.data.TotalCount);
          } else {
          //handleShowModal('loading', false);
          // handleShowModal('loading', false);
          setTotal(0);
          setdataList(lodash.cloneDeep([]));
          }
          });
          }
          //获取当前站点所有已经勾选的用户新接口
          };
          // 获取当前站点所有已经勾选的用户新接口
          const getAllCheckListNew = () => {
          getStationUsers({
          stationId: itemObj.roleID
          }).then(
          res => {
          let list = []
          stationId: itemObj.roleID,
          }).then(res => {
          let list = [];
          if (res.data && res.data.length > 0) {
          console.log(res.data)
          console.log(res.data);
          res.data.map((item, index) => {
          list.push({
          GroupId: +item.OUID,
          ......@@ -105,15 +103,13 @@ const UserModal = props => {
          userName: item.userName,
          userID: item.userID,
          });
          })
          });
          }
          setSelectList(lodash.cloneDeep(list));
          console.log(lodash.cloneDeep(list));
          setUpdatePageUser(updatePageUser + 1)
          }
          )
          }
          setUpdatePageUser(updatePageUser + 1);
          });
          };
          const onSubmit = () => {
          let result = [];
          let obj = {};
          ......@@ -148,12 +144,10 @@ const UserModal = props => {
          // },
          )
          .then(res => {
          if (res.code===0) {
          if (res.code === 0) {
          setSelectList([]);
          setUpdateCheck(updateCheck + 1);
          confirmModal(itemObj.roleID)
          confirmModal(itemObj.roleID);
          notification.success({
          message: '提示',
          duration: 3,
          ......@@ -170,23 +164,21 @@ const UserModal = props => {
          .catch(err => {
          console.log(err);
          });
          }
          };
          const handleChangeCollpase = (groupId, isShow) => {
          let index = dataList.findIndex(item => item.GroupId === groupId);
          if (dataList[index].children && dataList[index].children.length > 0) {
          setdataList(lodash.cloneDeep(dataList));
          return;
          }
          handleShowModal('loading', true);
          getStationUserList({ stationID: itemObj.roleID, groupId }).then(
          res => {
          // handleShowModal('loading', true);
          getStationUserList({ stationID: itemObj.roleID, groupId }).then(res => {
          if (res.code === 0 && res.data) {
          handleShowModal('loading', false);
          // handleShowModal('loading', false);
          dataList[index].children = res.data;
          setdataList(lodash.cloneDeep(dataList));
          }
          },
          );
          });
          };
          // 每组全选全不选
          const handleChangeAll = (e, index) => {
          ......@@ -246,9 +238,7 @@ const UserModal = props => {
          let { GroupId, userID } = selectList[index];
          let outerIndex = dataList.findIndex(item => item.GroupId === GroupId);
          if (outerIndex > -1) {
          let innerIndex = dataList[outerIndex].Users.findIndex(
          item => item.userID === userID,
          );
          let innerIndex = dataList[outerIndex].Users.findIndex(item => item.userID === userID);
          dataList[outerIndex].Users[innerIndex].isChecked = false;
          dataList[outerIndex].isChecked = isAllChecked(outerIndex);
          }
          ......@@ -258,8 +248,9 @@ const UserModal = props => {
          };
          // 获取搜索框的值
          const handleSearch = value => {
          setPage({ pageNum: 1, pageSize: 5 });
          setName(value);
          getList(value);
          // getList(value);
          };
          return (
          <SiteModal
          ......@@ -272,7 +263,6 @@ const UserModal = props => {
          cancelText="取消"
          okText="确认"
          onOk={() => onSubmit()}
          >
          <div style={{ background: '#fff' }}>
          <Card
          ......@@ -290,11 +280,9 @@ const UserModal = props => {
          enterButton
          />
          </Col>
          </Row>
          {dataList.length > 0 ? (
          <>
          <p className={styles.siteline}>已选择列表：</p>
          <div className={styles.siteSelectList}>
          <ul className={styles.siteSelectUl}>
          ......@@ -332,14 +320,11 @@ const UserModal = props => {
          pageSizeOptions={['5']}
          />
          </div>
          </Card>
          </div>
          </SiteModal>
          )
          }
          );
          };
          const Panels2 = React.memo(props => {
          let { index, GroupId, GroupName, Users, isChecked, isShow, color } = props;
          ......@@ -365,7 +350,6 @@ const Panels2 = React.memo(props => {
          </Checkbox>
          </div>
          <div className={styles.sitePanelCon}>
          {Users.length > 0 &&
          Users.map((v, vIndex) => (
          <CheckBoxRow
          ......
          src/pages/userCenter/siteManageV2/siteManage.jsx
          View file @ 11cc6049
          ......@@ -33,6 +33,8 @@ import {
          DownOutlined,
          PlusOutlined,
          ApartmentOutlined,
          CaretUpOutlined,
          CaretDownOutlined,
          } from '@ant-design/icons';
          import PageContainer from '@/components/BasePageContainer';
          ......@@ -73,6 +75,7 @@ const SiteManageV2 = () => {
          const [currentStationOperate, setCurrentStationOperate] = useState(false);
          const [flag, setFlag] = useState(1); // 操作标致触发界面刷新
          const [dataList, setdataList] = useState([]); // 当前站点对应的分页用户列表
          const [selectedState, setSelectedState] = useState(false); // 已选列表展开状态true为展开false为收起
          const [visibleParams, setvisibleParams] = useState({
          modalVisible: false, // 新增弹窗
          delVisible: false, // 删除弹窗
          ......@@ -744,13 +747,25 @@ const SiteManageV2 = () => {
          [styles.boxH]: treeVisible,
          [styles.cardBoxR]: true,
          })}
          >
          <div
          style={{
          display: 'flex',
          flexDirection: 'column ',
          height: 'calc(100vh - 240px)',
          }}
          >
          {/* <Checkbox className={styles.siteAll}>全选/反选</Checkbox> */}
          {dataList.length > 0 && !visibleParams.loading ? (
          <>
          <p className={styles.siteline}>已选择列表：</p>
          <div className={styles.siteSelectList}>
          <div
          className={styles.siteSelectList}
          style={{
          height: selectedState ? '1200px' : '220px',
          transition: 'height 0.5s',
          }}
          >
          <ul className={styles.siteSelectUl}>
          {selectList.map((item, index) => (
          <li
          ......@@ -762,10 +777,38 @@ const SiteManageV2 = () => {
          ))}
          </ul>
          </div>
          <div style={{ textAlign: 'center', margin: '10px 0' }}>
          <Tooltip title="收起">
          <CaretUpOutlined
          style={{
          fontSize: '20px',
          color: '#178BF6',
          display: selectedState ? 'block' : 'none',
          }}
          onClick={() => setSelectedState(false)}
          />
          </Tooltip>
          <Tooltip title="展开">
          <CaretDownOutlined
          style={{
          fontSize: '20px',
          color: '#178BF6',
          display: selectedState ? 'none' : 'block',
          }}
          onClick={() => setSelectedState(true)}
          />
          </Tooltip>
          </div>
          </>
          ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )}
          <div
          style={{
          overflowY: 'scroll',
          flexGrow: '1',
          }}
          >
          <Spin spinning={visibleParams.loading}>
          {dataList.map((item, index) => (
          <Panels
          ......@@ -778,6 +821,8 @@ const SiteManageV2 = () => {
          />
          ))}
          </Spin>
          </div>
          </div>
          </Card>
          {dataList.length > 0 && !visibleParams.loading ? (
          <div style={{ textAlign: 'right' }}>
          ......
          src/pages/userCenter/siteManageV2/siteManage.less
          View file @ 11cc6049
          ......@@ -91,8 +91,8 @@
          padding: 15px;
          }
          .ant-spin-container {
          overflow-y: scroll;
          height: calc(100vh - 410px);
          // overflow-y: scroll;
          // height: calc(100vh - 410px);
          }
          .ant-tree-treenode {
          width: 100% !important;
          ......@@ -322,10 +322,8 @@
          .siteSelectList {
          border: 1px solid #f5f5f5;
          max-height: 120px;
          overflow: auto;
          margin-bottom: 20px;
          overflow: auto;
          .siteSelectUl {
          margin: 0;
          padding: 15px;
          ......
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment