feat: 站点管理

src/containers/App/store/index.js

 import { connect } from 'react-redux';
-import { push } from 'connected-react-router';
 import * as actionCreators from './actions';
 import * as constants from './constants';
 import reducer from './reducer';

src/pages/userCenter/siteManage/SiteManage.jsx

@@ -2,14 +2,14 @@ import React, { useState, useEffect } from 'react';
 import {
   Row,
   Col,
-  Tree,
   Card,
   Input,
   Tooltip,
   Button,
   notification,
   Spin,
-  Tabs,
+  List,
+  Space,
 } from 'antd';
 import { FileAddTwoTone, EditTwoTone, DeleteTwoTone } from '@ant-design/icons';
 import { PageContainer, GridContent } from '@ant-design/pro-layout';
@@ -20,38 +20,25 @@ import {
 import ListCard from '@/pages/orgnazation/ListCard';
 import styles from '@/pages/userCenter/siteManage/SiteManage.less';
 import qs from 'qs';
+import classnames from 'classnames';
 import AddModal from './AddModal';
 import DelModal from './DelModal';
 import EditModal from './EditModal';
 
 const { Search } = Input;
-const { TabPane } = Tabs;
 const placeholder = '请输入人员姓名';
 const SiteManage = () => {
   const [treeData, setTreeData] = useState([]); // 树结构数据
+  const [currentStation, setCurrentStation] = useState({}); // 当前选中站点
   const [searchWord, setSearchWord] = useState(''); // 关键字
-  const [ouid, setOuid] = useState(''); // 站点id
-  const [saveTreeId, setSaveTreeId] = useState(''); // 保存点击回调的id
   const [modalVisible, setModalVisible] = useState(false); // 新增弹窗
   const [flag, setFlag] = useState(1);
-  const [stationId, setStationId] = useState(''); // 选择的站点
-  const [stationObj, setStationObj] = useState({}); // 选择的站点
   const [delVisible, setDelVisible] = useState(false); // 删除弹窗
   const [editVisible, setEditVisible] = useState(false); // 修改弹窗
   const [subList, setSubList] = useState([]); // 选中的数组
   const [spinLoading, setSpinLoading] = useState(false);
   const now = new Date().getTime();
-  // 点击树的回调
-  const handleTreeSelect = (e, info) => {
-    console.log(e, info);
-    let id = e[0];
-    if (id) {
-      setSaveTreeId(id);
-      setOuid(id);
-    } else {
-      setOuid(saveTreeId);
-    }
-  };
+
   useEffect(() => {
     setSpinLoading(true);
     getWebModuleTree({
@@ -66,16 +53,21 @@ const SiteManage = () => {
         let arr = [];
         if (res) {
           arr.push(res.find(item => item.id === 'Web4StationRoot'));
-          console.log(arr, 'arr');
         }
-        let arr2 = transTree(arr);
-        setTreeData(arr2);
+        if (arr[0]) {
+          const stations = arr[0].children;
+          setTreeData(stations);
+          if (!currentStation.stationID) {
+            setCurrentStation(stations[0]);
+          }
+        }
       })
       .catch(err => {
         setSpinLoading(false);
         console.error(err);
       });
   }, [flag]);
+
   const Title = props => {
     const { text } = props;
     return (
@@ -113,12 +105,10 @@ const SiteManage = () => {
   };
   // 站点删除
   const handleDel = e => {
-    setStationId(e);
     setDelVisible(true);
   };
   // 编辑站点
   const handleEdit = e => {
-    setStationObj(e);
     setEditVisible(true);
   };
   // 树形数据转换
@@ -164,7 +154,7 @@ const SiteManage = () => {
     chooseUserToStation(
       qs.stringify({
         userList: String(arr.flat()),
-        stationID: ouid,
+        stationID: currentStation.stationID,
       }),
       {
         headers: {
@@ -195,28 +185,29 @@ const SiteManage = () => {
     <PageContainer>
       <GridContent>
         <Row gutter={12}>
-          <Col lg={6}>
+          <Col lg={6} sm={6}>
             <Card className={styles.cardBox}>
               <Spin
                 tip="loading...."
                 spinning={spinLoading}
                 style={{ marginTop: '20px' }}
               >
-                {/* <Tabs
-                  tabPosition="left"
-                  defaultValue="0"
-                  type="card"
-                  style={{ width: '100%' }}
-                >
-                  <TabPane key="0" tab="tab1" />
-                  <TabPane key="1" tab="tab2" />
-                </Tabs> */}
-                <Tree
-                  showLine={{ showLeafIcon: false }}
-                  showIcon
-                  onSelect={e => handleTreeSelect(e)}
-                  treeData={treeData}
-                />
+                <List>
+                  {treeData.map(t => (
+                    <List.Item
+                      onClick={() => {
+                        setCurrentStation(t);
+                      }}
+                      key={t.id}
+                      className={classnames({
+                        [styles.listItem]: true,
+                        [styles.selected]: currentStation.id === t.id,
+                      })}
+                    >
+                      {t.text}
+                    </List.Item>
+                  ))}
+                </List>
               </Spin>
               <AddModal
                 visible={modalVisible}
@@ -225,19 +216,19 @@ const SiteManage = () => {
               />
               <DelModal
                 visible={delVisible}
-                stationId={stationId}
+                stationId={currentStation.stationID}
                 onCancel={() => setDelVisible(false)}
                 confirmModal={delModal}
               />
               <EditModal
                 visible={editVisible}
-                stationObj={stationObj}
+                stationObj={currentStation}
                 onCancel={() => setEditVisible(false)}
                 confirmModal={editModal}
               />
             </Card>
           </Col>
-          <Col lg={18}>
+          <Col lg={18} sm={18}>
             <Card style={{ marginBottom: '10px' }}>
               <Row align="middle">
                 <Col span={1}>搜索</Col>
@@ -251,44 +242,42 @@ const SiteManage = () => {
                   />
                 </Col>
                 <Col span={3} />
-                {/* <Col span={2}>
-                  <Button
-                    type="primary"
-                    onClick={() => {
-                      handleAdd();
-                    }}
-                  >
-                    新增
-                  </Button>
-                </Col>
-                <Col span={2}>
-                  <Button
-                    type="primary"
-                    onClick={() => {
-                      handleEdit();
-                    }}
-                    disabled={!ouid}
-                  >
-                    编辑
-                  </Button>
+                <Col span={8}>
+                  <Space>
+                    <Button
+                      type="primary"
+                      onClick={() => {
+                        handleAdd();
+                      }}
+                    >
+                      新增
+                    </Button>
+                    <Button
+                      type="primary"
+                      onClick={() => {
+                        handleEdit();
+                      }}
+                      disabled={!currentStation.stationID}
+                    >
+                      编辑
+                    </Button>
+                    <Button
+                      danger
+                      onClick={() => {
+                        handleDel(currentStation.stationID);
+                      }}
+                      disabled={!currentStation.stationID}
+                    >
+                      删除
+                    </Button>
+                  </Space>
                 </Col>
-                <Col span={2}>
-                  <Button
-                    danger
-                    onClick={() => {
-                      handleDel(ouid);
-                    }}
-                    disabled={!ouid}
-                  >
-                    删除
-                  </Button>
-                </Col> */}
               </Row>
             </Card>
             <Card className={styles.cardBoxR}>
-              {ouid && (
+              {currentStation.stationID && (
                 <ListCard
-                  ouid={ouid}
+                  ouid={currentStation.stationID}
                   searchWord={searchWord}
                   valueCallback={valueCallback}
                   onCommit={handleCommit}

src/pages/userCenter/siteManage/SiteManage.less

@@ -26,3 +26,9 @@
   justify-content: space-around;
   align-items: center;
 }
+.listItem{
+  padding-left: 5px;
+}
+.selected{
+  background-color: #bae7ff;
+}
\ No newline at end of file