fix: '修改tree组件'

src/components/ExpendableTree/index.jsx

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-03-04 18:33:24
+ * @LastEditTime: 2022-03-14 15:06:43
+ * @LastEditors: leizhe
+ */
 import { Tree } from 'antd';
 import { uniq, remove } from 'lodash';
 import React, { useState, useEffect } from 'react';
@@ -8,7 +15,7 @@ const getChildKeys = tree => {
 };
 
 export default props => {
-  const { expandedKeys, onExpand, onSelect, selectedKeys, ...rest } = props;
+  const { expandedKeys, onExpand, onSelect, selectedKeys, keepTree, ...rest } = props;
   const [epKeys, setEpKeys] = useState([expandedKeys]);
   useEffect(() => {
     console.log(expandedKeys, 'expandedKeys');
@@ -16,32 +23,43 @@ export default props => {
   }, [expandedKeys]);
 
   const handleExpand = (keys, { expanded, node }) => {
-    if (!expanded) {
-      let childKeys = getChildKeys(node);
-      remove(keys, k => childKeys.includes(k));
+    if (keepTree && keepTree.indexOf(node.key) != -1 && epKeys.indexOf(node.key) == -1) {
+      setEpKeys([node.key]);
+    } else {
+      if (!expanded) {
+        let childKeys = getChildKeys(node);
+        remove(keys, k => childKeys.includes(k));
+      }
+      setEpKeys(keys);
     }
-    setEpKeys(keys);
   };
 
   const handleSelect = (keys, e) => {
-    let result = [];
-    if (keys.length > 0 && epKeys.includes(keys[0])) {
-      remove(epKeys, k => keys.includes(k));
-      result = [...epKeys];
-    } else if (keys[0]) {
-      result = [...epKeys, keys[0]];
+    console.log(keys);
+    console.log(e);
+    console.log(epKeys);
+    if (keepTree && keepTree.indexOf(keys[0]) != -1 && epKeys.indexOf(keys[0]) == -1) {
+      setEpKeys(keys);
     } else {
-      if (epKeys.includes(e.node.key)) {
-        remove(epKeys, k => k === e.node.key);
+      let result = [];
+      if (keys.length > 0 && epKeys.includes(keys[0])) {
+        remove(epKeys, k => keys.includes(k));
+        result = [...epKeys];
+      } else if (keys[0]) {
+        result = [...epKeys, keys[0]];
       } else {
-        epKeys.push(e.node.key);
+        if (epKeys.includes(e.node.key)) {
+          remove(epKeys, k => k === e.node.key);
+        } else {
+          epKeys.push(e.node.key);
+        }
+        result = [...epKeys];
       }
-      result = [...epKeys];
+      console.log(result, 'result');
+      setEpKeys(result);
     }
     // eslint-disable-next-line no-unused-expressions
     onSelect && onSelect(keys, e);
-    console.log(result, 'result');
-    setEpKeys(result);
   };
 
   return (

src/pages/userCenter/roleManage/RoleManage.jsx

@@ -843,6 +843,7 @@ const SiteManage = () => {
               <Col span={8}>
                 {flagSearch == 1 ? (
                   <Search
+                    style={{ width: 260 }}
                     allowClear
                     placeholder={placeholder}
                     // onSearch={handleSearch}

src/pages/userCenter/siteManage/AddChildModal.jsx

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-01-13 17:26:14
+ * @LastEditTime: 2022-03-14 17:27:07
+ * @LastEditors: leizhe
+ */
 import React, { useState } from 'react';
 import { Form, Input, notification } from 'antd';
 import SiteModal from '@/components/Modal/SiteModa';
 import { addStation, addChildSiteNode } from '@/services/siteManage/api';
 const { Item } = Form;
 const AddChildModal = props => {
-    const [form] = Form.useForm();
-    const [formLayout, setFormLayout] = useState('horizontal');
-    const [loading, setLoading] = useState(false);
-    const { confirmModal } = props;
-    const onSubmit = () => {
-        form
-            .validateFields()
-            .then(res => {
-                console.log(res, 'res');
-                setLoading(true);
-                addChildSiteNode({
-                    pid: props.pid,
-                    nodeName: res.stationName,
-                    description: res.description,
-                })
-                    .then(res => {
-                        setLoading(false);
-                        if (res.code === 0) {
-                            form.resetFields();
-                            notification.success({
-                                message: '通知',
-                                duration: 3,
-                                description: '新增成功',
-                            });
-                            confirmModal();
-                        } else {
-                            notification.error({
-                                message: '提示',
-                                duration: 3,
-                                description: res.message,
-                            });
-                        }
-                    })
-                    .catch(err => {
-                        setLoading(false);
-                        notification.error({
-                            message: '提示',
-                            duration: 3,
-                            description: err,
-                        });
-                    });
-            })
-            .catch(err => {
-                console.error(err);
+  const [form] = Form.useForm();
+  const [formLayout, setFormLayout] = useState('horizontal');
+  const [loading, setLoading] = useState(false);
+  const { confirmModal } = props;
+  const onSubmit = () => {
+    form
+      .validateFields()
+      .then(res => {
+        console.log(res, 'res');
+        setLoading(true);
+        addChildSiteNode({
+          pid: props.pid,
+          nodeName: res.stationName,
+          description: res.description,
+        })
+          .then(res => {
+            setLoading(false);
+            if (res.code === 0) {
+              form.resetFields();
+              notification.success({
+                message: '通知',
+                duration: 3,
+                description: '新增成功',
+              });
+              confirmModal();
+            } else {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: res.message,
+              });
+            }
+          })
+          .catch(err => {
+            setLoading(false);
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: err,
             });
-    };
+          });
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  };
 
-    const onFinish = value => { };
-    return (
-        <SiteModal
-            {...props}
-            title="新增子站点"
-            bodyStyle={{ width: '100%', minHeight: '100px' }}
-            style={{ top: 200, borderRadius: '20px' }}
-            width="600px"
-            destroyOnClose
-            cancelText="取消"
-            okText="确认"
-            onOk={() => onSubmit()}
-            confirmLoading={loading}
+  const onFinish = value => {};
+  return (
+    <SiteModal
+      {...props}
+      title="新增子站点"
+      bodyStyle={{ width: '100%', minHeight: '100px' }}
+      style={{ top: 200, borderRadius: '20px' }}
+      width="600px"
+      destroyOnClose
+      maskClosable={false}
+      cancelText="取消"
+      okText="确认"
+      onOk={() => onSubmit()}
+      confirmLoading={loading}
+    >
+      <Form form={form} layout={formLayout} onFinish={onFinish} labelCol={{ span: 4 }}>
+        <Item
+          label="站点名称"
+          name="stationName"
+          rules={[
+            {
+              required: true,
+              message: '请输入站点名称',
+            },
+          ]}
         >
-            <Form
-                form={form}
-                layout={formLayout}
-                onFinish={onFinish}
-                labelCol={{ span: 4 }}
-            >
-                <Item
-                    label="站点名称"
-                    name="stationName"
-                    rules={[
-                        {
-                            required: true,
-                            message: '请输入站点名称',
-                        },
-                    ]}
-                >
-                    <Input placeholder="请输入站点名称" />
-                </Item>
-                {/* <Item label="站点类别">all</Item> */}
-                <Item label="站点描述" name="description">
-                    <Input placeholder="请输入站点描述" />
-                </Item>
-            </Form>
-        </SiteModal>
-    );
+          <Input placeholder="请输入站点名称" style={{ width: '95%' }} maxLength="32" />
+        </Item>
+        {/* <Item label="站点类别">all</Item> */}
+        <Item label="站点描述" name="description">
+          <Input placeholder="请输入站点描述" style={{ width: '95%' }} maxLength="64" />
+        </Item>
+      </Form>
+    </SiteModal>
+  );
 };
 
 export default AddChildModal;

src/pages/userCenter/siteManage/AddModal.jsx

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-01-13 17:26:14
+ * @LastEditTime: 2022-03-14 17:26:53
+ * @LastEditors: leizhe
+ */
 import React, { useState } from 'react';
 import { Form, Input, notification } from 'antd';
 import SiteModal from '@/components/Modal/SiteModa';
@@ -20,7 +27,7 @@ const AddModal = props => {
         })
           .then(res => {
             setLoading(false);
-            if (res.msg==='') {
+            if (res.msg === '') {
               form.resetFields();
               notification.success({
                 message: '通知',
@@ -59,17 +66,13 @@ const AddModal = props => {
       style={{ top: 200, borderRadius: '20px' }}
       width="600px"
       destroyOnClose
+      maskClosable={false}
       cancelText="取消"
       okText="确认"
       onOk={() => onSubmit()}
       confirmLoading={loading}
     >
-      <Form
-        form={form}
-        layout={formLayout}
-        onFinish={onFinish}
-        labelCol={{ span: 4 }}
-      >
+      <Form form={form} layout={formLayout} onFinish={onFinish} labelCol={{ span: 4 }}>
         <Item
           label="站点名称"
           name="stationName"
@@ -80,11 +83,11 @@ const AddModal = props => {
             },
           ]}
         >
-          <Input placeholder="请输入站点名称" />
+          <Input placeholder="请输入站点名称" style={{ width: '95%' }} maxLength="32" />
         </Item>
         {/* <Item label="站点类别">all</Item> */}
         <Item label="站点描述" name="description">
-          <Input placeholder="请输入站点描述" />
+          <Input placeholder="请输入站点描述" style={{ width: '95%' }} maxLength="64" />
         </Item>
       </Form>
     </SiteModal>

src/pages/userCenter/siteManage/DelModal.jsx

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-01-13 17:26:14
+ * @LastEditTime: 2022-03-14 17:10:52
+ * @LastEditors: leizhe
+ */
 import React, { useState } from 'react';
 import { notification } from 'antd';
 import SiteModal from '@/components/Modal/SiteModa';
@@ -12,7 +19,7 @@ const DelModal = props => {
     })
       .then(res => {
         setLoading(false);
-        if (res.msg==='') {
+        if (res.msg === '') {
           notification.success({
             message: '通知',
             duration: 3,
@@ -44,6 +51,7 @@ const DelModal = props => {
       style={{ top: 200 }}
       width="400px"
       destroyOnClose
+      maskClosable={false}
       cancelText="取消"
       okText="确认"
       onOk={() => onSubmit()}

src/pages/userCenter/siteManage/EditModal.jsx

+/*
+ * @Description:
+ * @Author: leizhe
+ * @Date: 2022-01-13 17:26:14
+ * @LastEditTime: 2022-03-14 17:26:26
+ * @LastEditors: leizhe
+ */
 import React, { useState, useEffect, useRef } from 'react';
 import { Form, Input, notification } from 'antd';
 import SiteModal from '@/components/Modal/SiteModa';
@@ -22,7 +29,7 @@ const EditModal = props => {
         })
           .then(res => {
             setLoading(false);
-            if (res.msg==='') {
+            if (res.msg === '') {
               form.resetFields();
               notification.success({
                 message: '通知',
@@ -64,6 +71,7 @@ const EditModal = props => {
       bodyStyle={{ width: '100%', minHeight: '100px' }}
       style={{ top: 200, borderRadius: '20px' }}
       width="600px"
+      maskClosable={false}
       destroyOnClose
       cancelText="取消"
       okText="确认"
@@ -81,10 +89,10 @@ const EditModal = props => {
             },
           ]}
         >
-          <Input placeholder="请输入站点名称" />
+          <Input placeholder="请输入站点名称" style={{ width: '95%' }} maxLength="32" />
         </Item>
         <Item label="站点描述" name="description">
-          <Input placeholder="请输入站点描述" />
+          <Input placeholder="请输入站点描述" style={{ width: '95%' }} maxLength="64" />
         </Item>
       </Form>
     </SiteModal>

src/pages/userCenter/siteManage/SiteManage.jsx

@@ -744,22 +744,17 @@ const SiteManageV2 = () => {
                 [styles.boxH]: treeVisible,
               })}
             >
-              <Row align="middle">
-                <Col span={1}>搜索</Col>
-                <Col span={8}>
-                  <Search
-                    allowClear
-                    placeholder={placeholder}
-                    onSearch={handleSearch}
-                    value={name}
-                    onChange={e => handleChange(e)}
-                    enterButton
-                  />
-                </Col>
-                <Col span={3}>
-                  <Button onClick={restButton}>重置</Button>
-                </Col>
-              </Row>
+              <Search
+                style={{ width: 260 }}
+                allowClear
+                placeholder={placeholder}
+                onSearch={handleSearch}
+                value={name}
+                onChange={e => handleChange(e)}
+                enterButton
+              />
+
+              <Button onClick={restButton}>重置</Button>
             </Card>
             <div style={{ background: '#fff' }}>
               <Card

src/pages/userCenter/siteManage/SiteManage.less

@@ -334,8 +334,8 @@
     li {
       height: 35px;
       line-height: 35px;
-      background: rgba(24, 144, 255, 0.16)
-        url('../../../assets/images/icons/close.png') no-repeat 170px;
+      background: rgba(24, 144, 255, 0.16) url('../../../assets/images/icons/close.png') no-repeat
+        170px;
       background-size: 20px;
       background-position: center right;
       margin: 0 10px 10px 0;
@@ -352,11 +352,12 @@
 }
 
 .siteBtn {
-  width: 98%;
+  width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: center;
+  margin-top: 10px;
+  justify-content: flex-end;
 }
 
 .ant-modal-root {
@@ -395,7 +396,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    width: 100%;
+    width: 40%;
   }
 }
 .titleText {

src/pages/userCenter/userManage/UserManage.jsx

@@ -153,6 +153,8 @@ const UserManage = () => {
   const [id, setId] = useState('');
   const { Search } = Input;
   const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引
+  const [expandedKeys, setExpandedKeys] = useState(''); // 展开的树
+  const [keepTree, setKeepTree] = useState([]);
   const setRowClassName = record =>
     record.userID === selectColor.userID ? styles.clickRowStyle : '';
   // 用户表列名
@@ -491,9 +493,16 @@ const UserManage = () => {
           setTreeLoading(false);
           setTreeData(res);
           setTreeDataCopy(res);
+          let aa = [];
+          res.forEach(i => {
+            console.log(i.id);
+            aa.push(i.id);
+          });
+          setKeepTree(aa);
           // 第一次加载，默认选择第一个组织
           if (treeState) {
-            onSelect([res[0].id], false);
+            console.log(111223);
+            onSelect([res[0].id]);
             setTreeState(false);
           }
         } else {
@@ -527,19 +536,16 @@ const UserManage = () => {
 
   // 点击树节点，获取当前机构下所有用户
   const onSelect = (props, e) => {
-    console.log(e);
-    console.log(props);
-    console.log(props[0]);
-    console.log(props[0].id);
-    if (props[0].id !== undefined) {
-      props[0] = props[0].id;
+    if (e) {
+      props[0] = e.node.key;
+    } else {
+      props[0] = props.toString();
     }
     setKeep1(props);
-    console.log(keep1);
     setTableLoading(true);
-    if (e) {
-      setOrgTitle(e.node.title.props.children[0].props.children);
-    }
+    // if (e) {
+    //   setOrgTitle(e.node.title.props.children[0].props.children);
+    // }
     if (!props[0]) {
       setCurrentSelectOrg(currentSelectOrg);
       setCurrentSelectOrg1(currentSelectOrg);
@@ -1432,6 +1438,7 @@ const UserManage = () => {
                     treeData={treeData.map(t => mapTree(t))}
                     draggable
                     onDrop={handleDrop}
+                    keepTree={keepTree}
                   />
                 </div>
               )}