feat: 小程序配置

src/pages/database/InitDataBase.jsx

@@ -501,7 +501,7 @@ const InitDataBase = props => {
                     ))}
                 </Select>
               </Form.Item>
-              <Form.Item>
+              <Form.Item wrapperCol={{ offset: 3 }}>
                 <div className={styles.tCenter}>
                   <Space size="large" className={styles.btnBox}>
                     <Space>

src/pages/database/InitDataBase.less

@@ -13,5 +13,5 @@
 }
 .btnBox {
   display: flex !important;
-  justify-content: space-around;
+  justify-content: space-between;
 }
\ No newline at end of file

src/pages/mobileConfig/SiteConfig.jsx

@@ -22,7 +22,7 @@ const SiteConfig = props => {
   const layout = {
     layout: 'horizontal',
     labelCol: { span: 7 },
-    wrapperCol: { span: 6 },
+    wrapperCol: { span: 8 },
   };
   useEffect(() => {
     console.log(miniTitle, 'miniTitle');
@@ -37,8 +37,9 @@ const SiteConfig = props => {
     })
       .then(res => {
         setLoading(false);
-        let obj = { ...form.getFieldsValue() };
-        let arr = Object.keys({ ...form.getFieldsValue() });
+        console.log(res.shortcutIcon);
+        let obj = {};
+        let arr = Object.keys(form.getFieldsValue());
         arr.map(k => {
           obj[k] = res[k];
         });
@@ -88,7 +89,7 @@ const SiteConfig = props => {
   };
   return (
     <Spin spinning={loading} tip="loading...">
-      <div style={{ minHeight: 'calc(100vh  - 172px)', marginTop: '20px' }}>
+      <div style={{ minHeight: 'calc(100vh  - 192px)', marginTop: '20px' }}>
         <Form form={form} {...layout}>
           <Item
             label="应用名称："
@@ -102,7 +103,6 @@ const SiteConfig = props => {
           >
             <Input placeholder="请输入应用名称" allowClear />
           </Item>
-
           <Item
             label="系统图标："
             name="shortcutIcon"
@@ -115,10 +115,10 @@ const SiteConfig = props => {
           >
             <Input placeholder="请输入系统图标名称" allowClear />
           </Item>
-
-          <Item label="系统图标预览：">
+          <Item label="系统图标预览：" name="shortcutIcon">
             <PicturesWall />
           </Item>
+
           <Item
             label="登陆页面："
             name="loginTemplate"

src/pages/mobileConfig/index.js

@@ -29,11 +29,11 @@ const MobileConfigPage = props => {
     });
   }, [flag]);
   useEffect(() => {
-    getMiniAppModuleTree({
-      userMode: 'super',
-    }).then(res => {
-      console.log(res);
-    });
+    // getMiniAppModuleTree({
+    //   userMode: 'super',
+    // }).then(res => {
+    //   console.log(res);
+    // });
   }, []);
   // 修改选中的tab
   const handleChange = key => {

src/pages/mobileConfig/menuconfig/AddForm.jsx

 import React, { useState } from 'react';
-import { Form, Input } from 'antd';
+import { Form, Input, Button, Row, Col } from 'antd';
+import styles from './addForm.less';
+import PicturesWall from '@/components/Upload/index';
 
 const { Item } = Form;
 const AddForm = props => {
-  const {} = props;
+  const { submitCallback, nodeType, nodeObj, addType } = props;
+  // const [type, setType] = useState(2);
   const [form] = Form.useForm();
+  const [otherForm] = Form.useForm();
+
   const layout = {
-    layout: '',
+    layout: 'horizontal',
+    labelCol: { span: 4, offset: 1 },
+    wrapperCol: { span: 16 },
+  };
+  const submit = () => {
+    if (addType === 1 || addType === 2) {
+      let obj = form.getFieldsValue();
+      submitCallback(obj, nodeObj);
+    }
+    if (addType === 3 || addType === 4) {
+      let obj = otherForm.getFieldsValue();
+      submitCallback(obj, nodeObj);
+    }
   };
   return (
-    <Form form={form} {...layout}>
-      <Item label="分组名称">
-        <Input />
-      </Item>
-      <Item label="分组别名">
-        <Input />
-      </Item>
-      <Item label="在线图标">
-        <Input />
-      </Item>
-      <Item label="离线图标">
-        <Input />
-      </Item>
-      <Item label="功能参数">
-        <Input />
-      </Item>
-    </Form>
+    <div>
+      {(addType === 1 || addType === 2) && (
+        <Form form={form} {...layout} className={styles.formStyle}>
+          <Item label="分组名称" name="menuName">
+            <Input />
+          </Item>
+          <Item label="分组别名" name="shortName">
+            <Input />
+          </Item>
+          {addType === 1 && (
+            <Item label="在线图标" name="imageUrl">
+              <PicturesWall />
+            </Item>
+          )}
+          {addType === 1 && (
+            <Item label="离线图标" name="offlineImgUrl">
+              <PicturesWall />
+            </Item>
+          )}
+
+          {addType === 2 && (
+            <Item label="分组图标" name="imageUrl">
+              <PicturesWall />
+            </Item>
+          )}
+          <Item label="功能参数" name="funParam">
+            <Input />
+          </Item>
+          <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
+            <Button type="primary" onClick={() => submit()}>
+              提交
+            </Button>
+          </Item>
+        </Form>
+      )}
+
+      {(addType === 3 || addType === 4) && (
+        <Form form={otherForm} {...layout} className={styles.formStyle}>
+          <Item label="菜单名称" name="menuName">
+            <Input />
+          </Item>
+          <Item label="菜单别名" name="shortName">
+            <Input />
+          </Item>
+          {addType === 3 && (
+            <Item label="在线图标" name="imageUrl">
+              <PicturesWall />
+            </Item>
+          )}
+          {addType === 3 && (
+            <Item label="离线图标" name="offlineImgUrl">
+              {/* {otherForm.getFieldsValue().offlineImgUrl && <PicturesWall />} */}
+              <PicturesWall />
+            </Item>
+          )}
+          {addType === 4 && (
+            <Item label="菜单图标" name="imageUrl">
+              <PicturesWall />
+            </Item>
+          )}
+          <Item label="功能路径" name="pageUrl">
+            <Input />
+          </Item>
+          <Item label="功能参数" name="funParam">
+            <Input />
+          </Item>
+          <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
+            <Button type="primary" onClick={() => submit()}>
+              提交
+            </Button>
+          </Item>
+        </Form>
+      )}
+    </div>
   );
 };
 export default AddForm;

src/pages/mobileConfig/menuconfig/LeftPart.less

-.contentContainer{
-    // min-height: calc(100vh - 48px);
-    overflow-x: auto;
-    display: flex;
-    .menuContainer{
-        min-width: 300px;
-        border:2px solid #eee;
-        min-height:calc(100vh - 172px);
-        overflow-y:auto;
-        .ant-tree-list{
-            padding: 10px;
-            height:calc(100vh - 330px);
-            .ant-tree-switcher{
-                line-height: 1;
-                color:#1890FF;
-            }
-            .ant-tree-iconEle{
-                line-height: 1.2;
-                color:#1890FF;
-            }
-        }
-    }
-    .editContainer{
-        margin-left: 12px;
-        flex: 1;
-        padding: 16px;
-        float: left;
-        min-width: 500px;
-        border:2px solid #eee;
-        .ant-table-pagination-right{
-            padding-right: 12px;
-        }
-    }
-    .previewContainer{
-        margin-left: 12px;
-        // flex: 1;
-        float: left;
-        min-width: 700px;
-        border:2px solid #eee;
-        .ant-table-pagination-right{
-            padding-right: 12px;
-        }
-    }
-    .ant-tree-treenode{
-        width: 100% !important;
-        .ant-tree-node-content-wrapper{
-            display: inline-block;
-            width: 100%;
-        }
-    
-        .iconWraper1{
-            float: right;
-            span{
-                display: none;   
-            }
-        }
-    }  
-    .ant-tree-treenode:hover{
-        .iconWraper1>span{
-            margin-left: 12px;
-            font-size: 18px;
-            display: inline-block;   
-        }  
-    }  
-}
-.redText{
-    color: red;
-    cursor: pointer;
-}
\ No newline at end of file

src/pages/mobileConfig/menuconfig/MenuConfig.jsx

 import React, { useState, useEffect } from 'react';
 import ProCard from '@ant-design/pro-card';
-import AddForm from './AddForm';
-import LeftPart from './LeftPart';
+import MiniMenu from './miniMenu';
 
 const MenuConfig = props => {
   const [flag, setFlag] = useState(1);
   return (
     <div split="vertical">
-      <LeftPart />
-      {/* <ProCard><AddForm /></ProCard> */}
+      <MiniMenu />
     </div>
   );
 };

src/pages/mobileConfig/menuconfig/addForm.less

+.formStyle{
+  margin-bottom: 40px;
+}
\ No newline at end of file

src/pages/mobileConfig/menuconfig/editForm.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Row, Col } from 'antd';
+import styles from './addForm.less';
+import PicturesWall from '@/components/Upload/index';
+
+const { Item } = Form;
+const EditForm = props => {
+  const { submitCallback, nodeType, info } = props;
+  const [form] = Form.useForm();
+  const [otherForm] = Form.useForm();
+  console.log(info);
+  const layout = {
+    layout: 'horizontal',
+    labelCol: { span: 4, offset: 1 },
+    wrapperCol: { span: 16 },
+  };
+  // 回显表单
+  useEffect(() => {
+    form.resetFields();
+    otherForm.resetFields();
+  }, [info]);
+  useEffect(() => {
+    if (nodeType === 1 || nodeType === 2) {
+      let arr = Object.keys(form.getFieldsValue());
+      let obj = {};
+      arr.map(i => {
+        obj[i] = info[i];
+      });
+      form.setFieldsValue({ ...obj, shortName: info.menuShortName });
+    }
+    if (nodeType === 3 || nodeType === 4) {
+      let arr = Object.keys(otherForm.getFieldsValue());
+      let obj = {};
+      arr.map(i => {
+        obj[i] = info[i];
+      });
+      otherForm.setFieldsValue({ ...obj, shortName: info.menuShortName });
+    }
+  }, [info]);
+
+  const submit = () => {
+    if (nodeType === 1 || nodeType === 2) {
+      let obj = form.getFieldsValue();
+      console.log(obj, '1,2');
+      submitCallback(obj);
+    }
+    if (nodeType === 3 || nodeType === 4) {
+      let obj = otherForm.getFieldsValue();
+      console.log(obj, '3,4');
+      submitCallback(obj);
+    }
+  };
+  return (
+    <div>
+      {(nodeType === 1 || nodeType === 2) && (
+        <Form form={form} {...layout} className={styles.formStyle}>
+          <Item label="分组名称" name="menuName">
+            <Input />
+          </Item>
+          <Item label="分组别名" name="shortName">
+            <Input />
+          </Item>
+          {nodeType === 1 && (
+            <Item label="在线图标" name="imageUrl">
+              <PicturesWall />
+            </Item>
+          )}
+          {nodeType === 1 && (
+            <Item label="离线图标" name="offlineImgUrl">
+              <PicturesWall />
+            </Item>
+          )}
+
+          {nodeType === 2 && (
+            <Item label="分组图标" name="imageUrl">
+              <PicturesWall />
+            </Item>
+          )}
+          <Item label="功能参数" name="funParam">
+            <Input />
+          </Item>
+          <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
+            <Button type="primary" onClick={() => submit()}>
+              提交
+            </Button>
+          </Item>
+        </Form>
+      )}
+
+      {(nodeType === 3 || nodeType === 4) && (
+        <Form form={otherForm} {...layout} className={styles.formStyle}>
+          <Item label="菜单名称" name="menuName">
+            <Input />
+          </Item>
+          <Item label="菜单别名" name="shortName">
+            <Input />
+          </Item>
+          {nodeType === 3 && (
+            <Item label="在线图标" name="imageUrl">
+              <PicturesWall />
+            </Item>
+          )}
+          {nodeType === 3 && (
+            <Item label="离线图标" name="offlineImgUrl">
+              {/* {otherForm.getFieldsValue().offlineImgUrl && <PicturesWall />} */}
+              <PicturesWall />
+            </Item>
+          )}
+          {nodeType === 4 && (
+            <Item label="菜单图标" name="imageUrl">
+              <PicturesWall />
+            </Item>
+          )}
+          <Item label="功能路径" name="pageUrl">
+            <Input />
+          </Item>
+          <Item label="功能参数" name="funParam">
+            <Input />
+          </Item>
+          <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
+            <Button type="primary" onClick={() => submit()}>
+              提交
+            </Button>
+          </Item>
+        </Form>
+      )}
+    </div>
+  );
+};
+export default EditForm;

src/pages/mobileConfig/menuconfig/miniMenu.less

+.box{
+  min-height: calc( 100vh - 172px);
+
+  display: flex;
+}
+.left{
+  min-width: 300px;
+  width: 300px;
+  min-height: 100%;
+  border: 1px solid #eee;
+  padding: 10px;
+  .ant-tree-node-content-wrapper{
+    display: flex;
+    align-items: center;
+    .ant-tree-iconEle{
+      display: flex;
+      align-items: center;
+    }
+    .ant-tree-title{
+      width: 100%;
+    }
+  }
+  .leftTop{
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    justify-content: space-between;
+    .tRight{
+      display: flex;
+      align-items: center;
+      .icon1{
+        font-size: 20px;
+        margin-right: 10px;
+      }
+      .icon2{
+        font-size: 18px;
+        margin-right: 5px;
+      }
+      .icon:hover{
+        cursor: pointer;
+      }
+    }
+  }
+}
+.middle{
+  min-width: 500px;
+  width: 500px;
+  min-height: 100%;
+  border: 1px solid #eee;
+  padding: 10px;
+  margin: 0 10px;
+}
+.title{
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.tip{
+  display: none;
+}
+.title:hover{
+  .tip{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+  }
+}
+.fs{
+  font-size: 18px;
+  margin-left: 10px;
+}
\ No newline at end of file

src/pages/userCenter/roleManage/RoleManage.jsx

@@ -29,6 +29,7 @@ import ListCard, {
 } from '@/components/CheckGroup';
 // import ListCard from '@/pages/orgnazation/ListCard';
 import qs from 'qs';
+import classnames from 'classnames';
 import styles from '@/pages/userCenter/roleManage/RoleManage.less';
 import AddModal from './AddModal';
 import DelModal from './DelModal';
@@ -38,6 +39,7 @@ import userStyles from '../UserManage.less';
 
 const { Search } = Input;
 const placeholder = '请输入功能名称';
+
 const SiteManage = () => {
   const [treeData, setTreeData] = useState([]);
   const [searchWord, setSearchWord] = useState('');
@@ -313,63 +315,85 @@ const SiteManage = () => {
   };
   return (
     <PageContainer>
-      <Row gutter={0}>
-        <Col span={mulu ? 4 : 0}>
-          <Card className={styles.cardBox}>
-            <Spin
-              tip="loading...."
-              spinning={spinLoading}
-              style={{ margin: '20px auto ', display: 'block' }}
-            >
-              <div className={userStyles.siteTitle}>
-                <span>选择角色：</span>
-              </div>
-              {treeData && treeData.length > 0 && (
-                <Tree
-                  // showLine={{ showLeafIcon: false }}
-                  showIcon
-                  onSelect={handleTreeSelect}
-                  autoExpandParent
-                  expandedKeys={currentSelectId}
-                  treeData={treeData}
-                  selectedKeys={currentSelectId}
-                  blockNode
-                />
-              )}
-            </Spin>
-            <AddModal
-              visible={modalVisible}
-              onCancel={() => setModalVisible(false)}
-              itemObj={itemObj}
-              confirmModal={confirmModal}
-            />
-            <DelModal
-              visible={delVisible}
-              itemObj={itemObj}
-              onCancel={() => setDelVisible(false)}
-              confirmModal={delModal}
-            />
-            <EditModal
-              visible={editVisible}
-              itemObj={itemObj}
-              onCancel={() => setEditVisible(false)}
-              confirmModal={editModal}
-            />
-            <EditGroup
-              visible={groupVisible}
-              itemObj={itemObj}
-              onCancel={() => setGroupVisible(false)}
-              confirmModal={groupModal}
-            />
-          </Card>
-          {/* <div>
+      {/* <Row gutter={0}>
+        <Col span={mulu ? 4 : 0}> */}
+      <div
+        className={classnames({
+          [styles.content]: true,
+        })}
+      >
+        <Card
+          className={classnames({
+            [styles.cardBox]: true,
+            [styles.hideBox]: !mulu,
+          })}
+        >
+          <Spin
+            tip="loading...."
+            spinning={spinLoading}
+            style={{ margin: '20px auto ', display: 'block' }}
+          >
+            <div className={userStyles.siteTitle}>
+              <span>选择角色：</span>
+            </div>
+            {treeData && treeData.length > 0 && (
+              <Tree
+                // showLine={{ showLeafIcon: false }}
+                showIcon
+                onSelect={handleTreeSelect}
+                autoExpandParent
+                expandedKeys={currentSelectId}
+                treeData={treeData}
+                selectedKeys={currentSelectId}
+                blockNode
+              />
+            )}
+          </Spin>
+          <AddModal
+            visible={modalVisible}
+            onCancel={() => setModalVisible(false)}
+            itemObj={itemObj}
+            confirmModal={confirmModal}
+          />
+          <DelModal
+            visible={delVisible}
+            itemObj={itemObj}
+            onCancel={() => setDelVisible(false)}
+            confirmModal={delModal}
+          />
+          <EditModal
+            visible={editVisible}
+            itemObj={itemObj}
+            onCancel={() => setEditVisible(false)}
+            confirmModal={editModal}
+          />
+          <EditGroup
+            visible={groupVisible}
+            itemObj={itemObj}
+            onCancel={() => setGroupVisible(false)}
+            confirmModal={groupModal}
+          />
+          <div>
+            {mulu && (
+              <Tooltip title="隐藏角色栏" className={styles.hide}>
+                <DoubleLeftOutlined onClick={() => handleHide()} />
+              </Tooltip>
+            )}
+            {!mulu && (
+              <Tooltip title="显示角色栏" className={styles.hide}>
+                <DoubleRightOutlined onClick={() => handleHide()} />
+              </Tooltip>
+            )}
+          </div>
+        </Card>
+        {/* <div>
             {mulu && (
               <Tooltip title="隐藏角色栏" className={styles.hide}>
                 <DoubleLeftOutlined onClick={() => handleHide()} />
               </Tooltip>
             )}
           </div> */}
-        </Col>
+        {/* </Col> */}
         {/* <Col span={mulu ? 0 : 1}>
           {mulu && (
             <Tooltip title="隐藏角色栏" className={styles.hide}>
@@ -382,8 +406,19 @@ const SiteManage = () => {
             </Tooltip>
           )}
         </Col> */}
-        <Col span={mulu ? 20 : 23}>
-          <Card style={{ marginBottom: '10px', minWidth: '870px' }}>
+        {/* <Col span={mulu ? 20 : 23}> */}
+        <div
+          className={classnames({
+            [styles.boxR]: true,
+            [styles.boxH]: mulu,
+          })}
+        >
+          <Card
+            className={classnames({
+              [styles.cardBoxTop]: true,
+              [styles.boxH]: mulu,
+            })}
+          >
             <Row align="middle">
               <Col span={1}>搜索</Col>
               <Col span={8}>
@@ -438,7 +473,12 @@ const SiteManage = () => {
               </Col>
             </Row>
           </Card>
-          <Card className={styles.cardBoxR}>
+          <Card
+            className={classnames({
+              [styles.boxH]: mulu,
+              [styles.cardBoxR]: true,
+            })}
+          >
             {roleID && (
               <ListCard
                 loading={loading}
@@ -451,8 +491,10 @@ const SiteManage = () => {
               />
             )}
           </Card>
-        </Col>
-      </Row>
+        </div>
+        {/* </Col>
+      </Row> */}
+      </div>
     </PageContainer>
   );
 };

src/pages/userCenter/roleManage/RoleManage.less

 .cardBox{
   min-height: calc(100vh - 74px);
   max-height: calc(100vh - 74px);
-  overflow-y: scroll;
-  margin-right: 20px;
+  // overflow-y: scroll;
+  overflow: auto;
+  width: 260px;
+  left: 0;
+  top: 0;
+  margin-right: 10px;
+  position: relative;
+  // transition: left,width 10s;
+  transition-property:width,left;
+  transition-duration: 0.5s;
+  white-space: nowrap;
   .ant-tree-node-content-wrapper{
     display: flex;
     align-items: center;
@@ -12,6 +21,15 @@
     }
   }
 }
+.hideBox{
+  left: 0px;
+  top: 0;
+  width: 20px;
+}
+.hideH{
+  width: 100%;
+}
+
 .ant-tree-node-content-wrapper-open{
   display: flex;
   align-items: center;
@@ -35,16 +53,16 @@
   align-items: center;
 }
 .cardBoxR{
-  min-width: 870px;
   min-height: calc(100vh - 158px);
   max-height: calc(100vh - 158px);
+  min-width: 870px;
   overflow-y: scroll;
 }
 :global{
   .ant-tree-switcher{
     display: flex;
     align-items: center;
-    color:#1890FF;
+    // color:#1890FF;
     .ant-tree-switcher-line-icon{
       margin-left: 5px;
   }
@@ -62,10 +80,18 @@
   z-index: 2;
 }
 
-.anticon-unordered-list{
-  vertical-align: 0.125em;
-  color:#1890FF;
-}
-.ant-card-body {
-  padding: 20px 10px;
+
+.boxR{
+  width: 100%;
+  position: relative;
+  transition: width 2s;
 }
+// .anticon-unordered-list{
+//   vertical-align: 0.125em;
+//   color:#1890FF;
+// }
+.content{
+  width: 100%;
+  display: flex;
+  position: relative;
+}
\ No newline at end of file

src/pages/userCenter/siteManage/SiteManage.jsx

@@ -236,42 +236,56 @@ const SiteManage = () => {
 
   return (
     <PageContainer>
-      <Row>
-        <Col span={mulu ? 4 : 0}>
-          <Card
-            className={classnames({
-              [styles.cardBox]: true,
-            })}
+      {/* <Row>
+        <Col span={mulu ? 4 : 0}> */}
+      <div className={styles.content}>
+        <Card
+          className={classnames({
+            [styles.cardBox]: true,
+            [styles.hideBox]: !mulu,
+          })}
+        >
+          <Spin
+            tip="loading...."
+            spinning={spinLoading}
+            style={{ marginTop: '20px' }}
           >
-            <Spin
-              tip="loading...."
-              spinning={spinLoading}
-              style={{ marginTop: '20px' }}
-            >
-              <div className={userStyles.siteTitle}>
-                <span>选择站点：</span>
-              </div>
-              <List>{renderListItem(treeData)}</List>
-            </Spin>
-            <AddModal
-              visible={modalVisible}
-              onCancel={() => setModalVisible(false)}
-              confirmModal={confirmModal}
-            />
-            <DelModal
-              visible={delVisible}
-              stationId={currentStation.stationID}
-              onCancel={() => setDelVisible(false)}
-              confirmModal={delModal}
-            />
-            <EditModal
-              visible={editVisible}
-              stationObj={currentStation}
-              onCancel={() => setEditVisible(false)}
-              confirmModal={editModal}
-            />
-          </Card>
-          {/* <div>
+            <div className={userStyles.siteTitle}>
+              <span>选择站点：</span>
+            </div>
+            <List>{renderListItem(treeData)}</List>
+          </Spin>
+          <AddModal
+            visible={modalVisible}
+            onCancel={() => setModalVisible(false)}
+            confirmModal={confirmModal}
+          />
+          <DelModal
+            visible={delVisible}
+            stationId={currentStation.stationID}
+            onCancel={() => setDelVisible(false)}
+            confirmModal={delModal}
+          />
+          <EditModal
+            visible={editVisible}
+            stationObj={currentStation}
+            onCancel={() => setEditVisible(false)}
+            confirmModal={editModal}
+          />
+          <div>
+            {mulu && (
+              <Tooltip title="隐藏站点" className={styles.hide}>
+                <DoubleLeftOutlined onClick={() => handleHide()} />
+              </Tooltip>
+            )}
+            {!mulu && (
+              <Tooltip title="显示站点" className={styles.hide}>
+                <DoubleRightOutlined onClick={() => handleHide()} />
+              </Tooltip>
+            )}
+          </div>
+        </Card>
+        {/* <div>
             {mulu && (
               <Tooltip title="隐藏站点" className={styles.hide}>
                 <DoubleLeftOutlined onClick={() => handleHide()} />
@@ -283,7 +297,7 @@ const SiteManage = () => {
               </Tooltip>
             )}
           </div> */}
-        </Col>
+        {/* </Col> */}
         {/* <Col span={mulu ? 0 : 1}>
           {mulu && (
             <Tooltip title="隐藏站点" className={styles.hide}>
@@ -296,8 +310,19 @@ const SiteManage = () => {
             </Tooltip>
           )}
         </Col> */}
-        <Col span={mulu ? 20 : 23}>
-          <Card style={{ marginBottom: '10px', minWidth: '600px' }}>
+        {/* <Col span={mulu ? 20 : 23}> */}
+        <div
+          className={classnames({
+            [styles.boxR]: true,
+            [styles.boxH]: mulu,
+          })}
+        >
+          <Card
+            className={classnames({
+              [styles.cardBoxTop]: true,
+              [styles.boxH]: mulu,
+            })}
+          >
             <Row align="middle">
               <Col span={1}>搜索</Col>
               <Col span={8}>
@@ -343,7 +368,12 @@ const SiteManage = () => {
               </Col>
             </Row>
           </Card>
-          <Card className={styles.cardBoxR}>
+          <Card
+            className={classnames({
+              [styles.boxH]: mulu,
+              [styles.cardBoxR]: true,
+            })}
+          >
             {currentStation.stationID && (
               <ListCard
                 loading={loading}
@@ -355,8 +385,10 @@ const SiteManage = () => {
               />
             )}
           </Card>
-        </Col>
-      </Row>
+        </div>
+      </div>
+      {/* </Col>
+      </Row> */}
     </PageContainer>
   );
 };

src/pages/userCenter/siteManage/SiteManage.less

 .cardBox{
-  min-height: calc(100vh - 74px);
-  max-height: calc(100vh - 74px);
+  min-height: calc(100vh - 75px);
+  max-height: calc(100vh - 75px);
   overflow: auto;
+  width: 260px;
+  left: 0;
+  top: 0;
   margin-right: 10px;
+  position: relative;
+  // transition: left,width 10s;
+  transition-property:width,left;
+  transition-duration: 0.5s;
+  white-space: nowrap
+}
+.hideBox{
+  left: 0px;
+  top: 0;
+  width: 20px;
+}
+.hideH{
+  width: 100%;
 }
 .siteTitle{
   font-size: 16px;
@@ -17,6 +33,11 @@
   min-width: 600px;
   overflow-y: scroll;
 }
+.cardBoxTop{
+  // max-width: calc( 100% - 450px);
+  // margin-bottom: 10px;
+
+}
 .ant-tree-node-content-wrapper-open{
   display: flex;
   align-items: center;
@@ -64,4 +85,14 @@
 }
 // .hide{
 //   left: 0;
-// }
\ No newline at end of file
+// }
+.content{
+  width: 100%;
+  display: flex;
+  position: relative;
+}
+.boxR{
+  width: 100%;
+  position: relative;
+  transition: width 2s;
+}
\ No newline at end of file

src/services/mobileConfig/api.js

@@ -46,3 +46,41 @@ export const editWebsite = (params, options) => {
  */
 export const getMiniAppModuleTree = params =>
   get(`${PUBLISH_SERVICE}/PlatformCenter/MiniAppModuleTree`, params);
+
+/**
+ *
+ * @新增功能菜单组
+ * @请求参数 {*}{
+ * version: 9999
+    _dc: 1606203896370
+    parentID: -1
+    subSystemValue: miniapp
+    menuName: 分组名称
+    imageUrl: assets/images/appMenu/小程序tab/enterprise_select.png
+    offlineImgUrl: assets/images/appMenu/小程序tab/enterprise_unselect.png
+    shortName: 分组别名
+    pageUrl: //功能路径
+    funParam: 测试功能参数
+    relatedRoleList： //角色数组
+  }
+ */
+export const addMenu = params =>
+  get('/Cityinterface/rest/services/OMS.svc/MiniApp_AddMenu', params);
+
+// 获取菜单详情
+/**
+ * {
+ * menuID:''
+ * }
+ */
+export const getMenuInfo = params =>
+  get('/Cityinterface/rest/services/OMS.svc/Mini_GetMenuInfo', params);
+
+// 编辑菜单
+export const editMenu = params =>
+  get('/Cityinterface/rest/services/OMS.svc/MiniApp_EditMenu', params);
+
+// 删除菜单
+
+export const deleteMenu = params =>
+  get('/Cityinterface/rest/services/OMS.svc/MiniApp_DeleteMenu', params);