perf: 小程序配置中心

src/pages/mobileConfig/SiteConfig.jsx

 import React, { useState, useEffect } from 'react';
 import { Form, Select, Input, Button, Radio, notification, Spin } from 'antd';
-import { editWebsite, getWebsite } from '@/services/mobileConfig/api';
+import {
+  editWebsite,
+  getWebsite,
+  addWebsite,
+} from '@/services/mobileConfig/api';
 import PicturesWall from '@/components/Upload/index';
 
 const { Item } = Form;
 const { Option } = Select;
 const SiteConfig = props => {
-  const { miniTitle, submitCallback } = props;
+  const { miniTitle, submitCallback, subType } = props;
+  console.log(subType, 'ubType');
   const [config, setConfig] = useState(''); // 网站配置信息
   const [loginList, setLoginList] = useState([
     { text: '默认界面', value: 'default' },
@@ -58,9 +63,39 @@ const SiteConfig = props => {
         setLoading(true);
         const obj = { ...form.getFieldsValue() };
         let params = { ...obj, mode: 'single', client: 'miniapp' };
+        if (subType === 'add') {
+          addWebsite(params, {
+            headers: {
+              'content-type':
+                'application/x-www-form-urlencggoded;charset=UTF-8',
+            },
+          })
+            .then(res => {
+              setLoading(false);
+              if (res.success) {
+                submitCallback();
+                notification.success({
+                  message: '提示',
+                  duration: 3,
+                  description: '新增成功',
+                });
+              } else {
+                notification.error({
+                  message: '提示',
+                  duration: 10,
+                  description: res.message || '新增失败',
+                });
+              }
+              console.log(res, 'res');
+            })
+            .catch(err => {
+              setLoading(false);
+            });
+        } else {
           editWebsite(params, {
             headers: {
-            'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
+              'content-type':
+                'application/x-www-form-urlencggoded;charset=UTF-8',
             },
           })
             .then(res => {
@@ -85,6 +120,7 @@ const SiteConfig = props => {
               setLoading(false);
             });
         }
+      }
     });
   };
   return (

src/pages/mobileConfig/index.js

-import React, { useState, useEffect } from 'react';
-import { Card, Tabs } from 'antd';
+import React, { useState, useEffect, useMemo } from 'react';
+import { Card, Tabs, Button, Popconfirm, notification, Spin } from 'antd';
 import ProCard from '@ant-design/pro-card';
 import PageContainer from '@/components/BasePageContainer';
 import {
   miniAppSiteTree,
   getMiniAppModuleTree,
+  deleteWebsite,
 } from '@/services/mobileConfig/api';
 import SiteConfig from './SiteConfig';
 import MenuConfig from './menuconfig/MenuConfig';
@@ -13,6 +14,10 @@ const MobileConfigPage = props => {
   const [activeKey, setActiveKey] = useState('0'); // tabs活动页
   const [miniTitle, setMiniTitle] = useState('');
   const [flag, setFlag] = useState(1);
+  const [showConfig, setShowConfig] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [position, setPosition] = useState([]);
+  const [subType, setSubType] = useState('');
   useEffect(() => {
     // miniAppSiteTree({
     //   userMode: 'admin',
@@ -21,18 +26,30 @@ const MobileConfigPage = props => {
     //   _dc: new Date().getTime(),
     //   node: -2,
     // })
+    setLoading(true);
     getMiniAppModuleTree({
       userMode: 'admin',
     }).then(res => {
+      setLoading(false);
       console.log(res, 'res');
       if (res.code === 0) {
         const { data } = res;
+        if (data[0].children.length > 0) {
           const title = data[0].children[0].text || '熊猫掌天下小程序';
+          setShowConfig(true);
           setMiniTitle(title);
+          setPosition(['right']);
+        } else {
+          setPosition(['left']);
+          setShowConfig(false);
+        }
+      } else {
+        setShowConfig(false);
       }
       console.log(res);
     });
   }, [flag]);
+
   useEffect(() => {
     // getMiniAppModuleTree({
     //   userMode: 'super',
@@ -46,13 +63,74 @@ const MobileConfigPage = props => {
   };
   const submitCallback = () => {
     setFlag(flag + 1);
+    setSubType('');
   };
+  // 删除小程序
+  const delMini = () => {
+    deleteWebsite({
+      client: 'miniapp',
+      _version: 9999,
+      _dc: Date.now(),
+    }).then(res => {
+      if (res.success) {
+        setFlag(flag + 1);
+        notification.success({
+          message: '提示',
+          duration: 3,
+          description: '删除成功',
+        });
+      } else {
+        notification.success({
+          message: '提示',
+          duration: 3,
+          description: res.message || '删除失败',
+        });
+      }
+    });
+  };
+  const addMini = () => {
+    setShowConfig(true);
+    setSubType('add');
+  };
+
+  const options = {
+    left: (
+      <Button type="primary" onClick={addMini}>
+        新增小程序
+      </Button>
+    ),
+    right: (
+      <Popconfirm
+        title="是否删除小程序网站,及相关联的角色和菜单"
+        okText="确认"
+        cancelText="取消"
+        placement="left"
+        onConfirm={delMini}
+      >
+        <Button type="primary" danger>
+          删除小程序
+        </Button>
+      </Popconfirm>
+    ),
+  };
+  const slot = useMemo(() => {
+    if (position.length === 0) return null;
+
+    return position.reduce((acc, direction) => {
+      console.log(acc, direction);
+      return { ...acc, [direction]: options[direction] };
+    }, {});
+  }, [position]);
   const tabArr = [
     {
       title: '网站配置',
       key: '0',
       component: (
-        <SiteConfig miniTitle={miniTitle} submitCallback={submitCallback} />
+        <SiteConfig
+          miniTitle={miniTitle}
+          submitCallback={submitCallback}
+          subType={subType}
+        />
       ),
     },
     {
@@ -64,14 +142,22 @@ const MobileConfigPage = props => {
   return (
     <PageContainer>
       <ProCard>
-        <Tabs activeKey={activeKey} type="card" onChange={handleChange}>
-          {tabArr?.length > 0 &&
+        <Spin tip="loading..." spinning={loading}>
+          <Tabs
+            activeKey={activeKey}
+            type="card"
+            onChange={handleChange}
+            tabBarExtraContent={slot}
+          >
+            {showConfig &&
+              tabArr?.length > 0 &&
               tabArr.map(item => (
                 <TabPane tab={item.title} key={item.key}>
                   {activeKey === item.key && item.component}
                 </TabPane>
               ))}
           </Tabs>
+        </Spin>
       </ProCard>
     </PageContainer>
   );

src/pages/mobileConfig/menuconfig/AddForm.jsx

-import React, { useState } from 'react';
+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';
+import CheckList from './checkBox';
+import checkStyles from './checkBox';
 
 const { Item } = Form;
 const AddForm = props => {
-  const { submitCallback, nodeType, nodeObj, addType, submitLoading } = props;
+  const {
+    submitCallback,
+    nodeType,
+    nodeObj,
+    addType,
+    submitLoading,
+    valueCallback,
+    addList,
+  } = props;
   const [form] = Form.useForm();
   const [otherForm] = Form.useForm();
   console.log(nodeObj, 'nodeObj');
@@ -27,6 +37,7 @@ const AddForm = props => {
   const finish = () => {
     submit();
   };
+  useEffect(() => {}, [nodeObj, addType]);
   return (
     <div>
       {(addType === 1 || addType === 2) && (
@@ -186,6 +197,11 @@ const AddForm = props => {
           <Item label="功能参数" name="funParam">
             <Input />
           </Item>
+          {/* <CheckList
+            nodeType={addType}
+            valueCallback={valueCallback}
+            addList={addList}
+          /> */}
           <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
             <Button type="primary" htmlType="submit" loading={submitLoading}>
               提交

src/pages/mobileConfig/menuconfig/checkBox.jsx

@@ -2,12 +2,10 @@ import React, { useState, useEffect } from 'react';
 import { Checkbox, Empty } from 'antd';
 import styles from './checkBox.less';
 const CheckList = props => {
-  const { info, valueCallback, nodeType } = props;
+  const { info = {}, valueCallback = () => {}, nodeType = '', addList } = props;
   console.log(info, 'info');
   const [list, setList] = useState([]);
-  const [checkList, setCheckList] = useState([]);
-  const [flag, setFlag] = useState(false);
-  const a = 'a';
+  const [addRoleList, setAddRoleList] = useState([]);
   useEffect(() => {
     if (info.pageUrl) {
       let arr = [...info.relatedRoleList];
@@ -17,21 +15,15 @@ const CheckList = props => {
           arr2.push(item.relatedRoleCode);
         }
       });
-      console.log(arr2, 'arr2');
-
-      setCheckList(arr2);
       setList(arr);
-      setFlag(true);
     }
-    return () => {
-      setFlag(false);
-      setCheckList([]);
-    };
   }, [info]);
-
+  useEffect(() => {
+    if (addList && addList.length > 0) {
+      setAddRoleList([...addList]);
+    }
+  }, [addList]);
   const handleSelect = (e, val) => {
-    console.log(e.target, 'e', val);
-    let arr = [];
     list.forEach(item => {
       if (item.relatedRoleCode === val) {
         item.related = e.target.checked;
@@ -40,6 +32,15 @@ const CheckList = props => {
     setList([...list]);
     valueCallback(list);
   };
+  const handleRoleSelect = (e, val) => {
+    addRoleList.forEach(item => {
+      if (item.roleCode === val) {
+        item.related = e.target.checked;
+      }
+    });
+    setAddRoleList([...addRoleList]);
+    valueCallback(addRoleList);
+  };
   return (
     <div>
       {nodeType === 3 || nodeType === 4 ? (
@@ -64,6 +65,25 @@ const CheckList = props => {
       ) : (
         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
       )}
+
+      {/* {
+        <div className={styles.box}>
+          {addRoleList &&
+            addRoleList.length > 0 &&
+            addRoleList.map(item => (
+              <div key={item.roleCode} className={styles.check}>
+                <Checkbox
+                  checked={item.related}
+                  onChange={e => {
+                    handleRoleSelect(e, item.roleCode);
+                  }}
+                >
+                  {item.roleName}
+                </Checkbox>
+              </div>
+            ))}
+        </div>
+      } */}
     </div>
   );
 };

src/pages/mobileConfig/menuconfig/checkBox.less

@@ -3,6 +3,7 @@
   padding: 10px;
   margin-top: 10px;
   flex-wrap: wrap;
+  border: 1px solid gray;
 }
 .check{
   flex-shrink: 0;

src/pages/mobileConfig/menuconfig/editForm.jsx

@@ -180,7 +180,6 @@ const EditForm = props => {
                 },
               ]}
             >
-              {/* {otherForm.getFieldsValue().offlineImgUrl && <PicturesWall />} */}
               <PicturesWall />
             </Item>
           )}

src/pages/mobileConfig/menuconfig/miniMenu.jsx

@@ -2,8 +2,6 @@ import React, { useEffect, useState } from 'react';
 import {
   message,
   notification,
-  Popconfirm,
-  Form,
   Tree,
   Tooltip,
   Modal,
@@ -18,7 +16,6 @@ import {
   FileOutlined,
   DeleteTwoTone,
 } from '@ant-design/icons';
-import PicturesWall from '@/components/Upload/index';
 import classnames from 'classnames';
 import {
   miniAppSiteTree,
@@ -27,6 +24,7 @@ import {
   getMenuInfo,
   deleteMenu,
   editMenu,
+  getRoleListPlain,
 } from '@/services/mobileConfig/api';
 import styles from './miniMenu.less';
 import AddForm from './AddForm';
@@ -35,7 +33,7 @@ import CheckList from './checkBox';
 
 const MiniMenu = props => {
   const [flag, setFlag] = useState(1); // 刷新标志
-  const [treeFlage, setTreeFlag] = useState(true);
+  const [treeFlag, setTreeFlag] = useState(true);
   const [treeData, setTreeData] = useState([]); // 树的数据
   const [loading, setLoading] = useState(false); // 加载
   const [menuID, setMenuID] = useState(''); // 选中的树ID
@@ -45,18 +43,28 @@ const MiniMenu = props => {
   const [addVisible, setAddVisible] = useState(false); // 新增弹窗
   const [addTwoVisible, setAddTwoVisible] = useState(false); // 编辑弹窗
   const [delVisible, setDelVisible] = useState(false); // 删除弹窗
-  const [addFlag, setAddFlag] = useState('root'); // 设置新增标志
   const [nodeObj, setNodeObj] = useState({});
   const [addType, setAddType] = useState(''); // 添加下级类型
   const [modalTitle, setModalTitle] = useState('');
   const [roleList, setRoleList] = useState([]); // 复选框选中的值
   const [modalLoading, setModalLoading] = useState(false);
   const [submitLoading, setSubmitLoading] = useState(false);
+  const [addList, setAddList] = useState([]);
   // 获取菜单树
   useEffect(() => {
     updateTrees();
   }, [flag]);
-
+  useEffect(() => {
+    getRoleListPlain({
+      subSystemValue: 'miniapp',
+      _dc: Date.now(),
+      _version: 9999,
+    }).then(res => {
+      if (res.success) {
+        setAddList(res.list);
+      }
+    });
+  }, [flag]);
   // 获取菜单信息
   useEffect(() => {
     getInfo();
@@ -84,7 +92,7 @@ const MiniMenu = props => {
           setTreeData(result);
           console.log(result);
           // 第一次加载，默认选择第一个组织
-          // if (treeFlage) {
+          // if (treeFlag) {
           //   handleSelect([result[0].menuID], false);
           //   setTreeFlag(false);
           // }
@@ -111,17 +119,17 @@ const MiniMenu = props => {
           <div>{obj.text}</div>
           <div className={styles.tip}>
             {obj.menuType === 'MiniAppMenuGroup' && (
-              <Tooltip title="新增菜单组" className={styles.fs}>
+              <Tooltip title="新增菜单组" className={styles.fsize}>
                 <FolderAddTwoTone onClick={() => addMenuGroupTip(obj)} />
               </Tooltip>
             )}
             {obj.menuType === 'MiniAppMenuGroupTwo' && (
-              <Tooltip title="新增功能菜单" className={styles.fs}>
+              <Tooltip title="新增功能菜单" className={styles.fsize}>
                 <FileAddTwoTone onClick={() => addMenuTip(obj)} />
               </Tooltip>
             )}
 
-            <Tooltip title="删除菜单" className={styles.fs}>
+            <Tooltip title="删除菜单" className={styles.fsize}>
               <DeleteTwoTone onClick={() => deleteMenuTip(obj)} />
             </Tooltip>
           </div>
@@ -276,7 +284,12 @@ const MiniMenu = props => {
   const submitCallback = (prop, item) => {
     setSubmitLoading(true);
     console.log(prop, item);
+    console.log(roleList);
     let obj = { ...prop };
+    // if (addType === 3 || addType === 4) {
+    //   obj.relatedRoleList = String(roleList) || '';
+    // }
+    console.log(obj);
     const parentID = item.menuID ? item.menuID : -1;
     addMenu({
       _dc: Date.now(),
@@ -303,7 +316,6 @@ const MiniMenu = props => {
             duration: 10,
           });
         }
-        console.log(res, 'resadd');
       })
       .catch(err => {
         setSubmitLoading(false);
@@ -350,7 +362,8 @@ const MiniMenu = props => {
       });
   };
   const valueCallback = val => {
-    console.log(val);
+    console.log(val, 'val');
+    // relatedRoleCode
     let arr = [...val];
     let arr2 = [];
     arr.map(item => {
@@ -420,9 +433,6 @@ const MiniMenu = props => {
           cancelText="取消"
           okText="确认"
           onCancel={() => setAddVisible(false)}
-          onConfirm={() => {
-            submitCallback();
-          }}
         >
           <AddForm
             nodeType={nodeType}
@@ -430,12 +440,19 @@ const MiniMenu = props => {
             addType={addType}
             submitCallback={submitCallback}
             submitLoading={submitLoading}
+            valueCallback={valueCallback}
+            addList={addList}
           />
         </Modal>
         <Modal
           visible={addTwoVisible}
           title={`在${modalTitle}下新增功能菜单`}
-          bodyStyle={{ width: '100%', minHeight: '100px' }}
+          bodyStyle={{
+            width: '100%',
+            minHeight: '100px',
+            maxHeight: '700px',
+            overflowY: 'scroll',
+          }}
           style={{ top: 80 }}
           width="600px"
           destroyOnClose
@@ -449,7 +466,9 @@ const MiniMenu = props => {
             nodeType={nodeType}
             nodeObj={nodeObj}
             addType={addType}
+            addList={addList}
             submitCallback={submitCallback}
+            valueCallback={valueCallback}
           />
         </Modal>
         <Modal

src/pages/mobileConfig/menuconfig/miniMenu.less

@@ -65,7 +65,7 @@
     width: 100%;
   }
 }
-.fs{
+.fsize{
   font-size: 18px;
   margin-left: 10px;
 }

src/pages/userCenter/roleManage/RoleManage.less

@@ -3,7 +3,7 @@
   max-height: calc(100vh - 74px);
   // overflow-y: scroll;
   overflow: auto;
-  width: 260px;
+  width: 300px;
   left: 0;
   top: 0;
   margin-right: 10px;

src/pages/userCenter/siteManage/SiteManage.less

@@ -2,7 +2,7 @@
   min-height: calc(100vh - 75px);
   max-height: calc(100vh - 75px);
   overflow: auto;
-  width: 260px;
+  width: 300px;
   left: 0;
   top: 0;
   margin-right: 10px;

src/services/mobileConfig/api.js

@@ -81,6 +81,23 @@ 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);
+
+// 获取角色列表
+export const getRoleListPlain = params =>
+  get('/Cityinterface/rest/services/OMS.svc/P_GetRoleListPlain', params);
+
+// 删除小程序
+export const deleteWebsite = params =>
+  get('/Cityinterface/rest/services/OMS.svc/MiniApp_DeleteWebsite', params);
+// 新增小程序
+export const addWebsite = (params, options) => {
+  let strParams = JSON.stringify(params);
+  let qsParams = qs.stringify({ config: strParams });
+  return post(
+    '/Cityinterface/rest/services/OMS.svc/MiniApp_AddWebsite?_version=9999',
+    qsParams,
+    options,
+  );
+};