fix: 'moblie菜单课导入导出'

src/pages/productCenter/mobileConfig/menuconfig/ImportOrExport.jsx

+import React, { useEffect, useState } from 'react';
+import { Modal, Upload, Button, Form, Input, message, Popconfirm } from 'antd';
+
+import { UploadOutlined, DownloadOutlined } from '@ant-design/icons';
+import { UpLoadWebModuleTree, DownLoadWebModuleTree } from '@/services/webConfig/api';
+
+const ImportOrExport = props => {
+  const { visible, onFinish, onCancel, nodeObj, subSystemValue } = props;
+  const [form] = Form.useForm();
+  const [uploading, setUploading] = useState(false); // 文件是否上传成功
+  const [file, setFile] = useState(); // 上传文件信息
+  useEffect(() => {
+    console.log(subSystemValue);
+    if (visible) {
+      form.setFieldsValue({ fileName: '' });
+    }
+  }, [visible]);
+
+  // 本地上传文件
+  const beforeUpload = val => {
+    console.log(val);
+    form.setFieldsValue({ fileName: val.name });
+    setFile(val);
+    return false;
+  };
+  // 导出菜单
+  const hadelExport = () => {
+    window.location.href = DownLoadWebModuleTree({
+      nodeId: nodeObj ? nodeObj.menuID : '-1',
+      sysName: subSystemValue,
+    });
+  };
+  // 提交上传文件
+  const handleUpload = type => {
+    if (!form.getFieldValue('fileName')) {
+      message.info('请上传文件');
+      return;
+    }
+    const formData = new FormData();
+    formData.append('_files', file);
+    formData.append('type', type);
+    formData.append('nodeId', nodeObj ? nodeObj.menuID : '-1');
+    formData.append('visible', subSystemValue);
+    UpLoadWebModuleTree(formData)
+      .then(res => {
+        console.log(res);
+        if (res.code === 0) {
+          message.success('上传成功');
+          onCancel();
+        } else {
+          message.error(res.msg);
+        }
+      })
+      .catch(() => {
+        message.error('网络异常，请稍后再试');
+      });
+  };
+
+  return (
+    <>
+      <Modal
+        title="菜单组导入导出"
+        visible={visible}
+        onOk={onFinish}
+        width="550px"
+        onCancel={onCancel}
+        maskClosable={false}
+        destroyOnClose
+        centered
+        footer={null}
+      >
+        <div style={{ paddingBottom: '15px' }}>
+          <Form name="form" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} form={form}>
+            <Form.Item label="本地导出">
+              <Button type="primary" onClick={hadelExport} icon={<DownloadOutlined />}>
+                导出菜单配置
+              </Button>
+            </Form.Item>
+            <Form.Item label="本地导入">
+              <div style={{ display: 'flex' }}>
+                <Form.Item name="fileName" style={{ marginBottom: '0' }}>
+                  <Input disabled />
+                </Form.Item>
+                <Upload beforeUpload={beforeUpload} showUploadList={false} accept=".json">
+                  <Button
+                    type="primary"
+                    style={{ marginLeft: '10px' }}
+                    icon={<UploadOutlined />}
+                    shape="circle"
+                  />
+                </Upload>
+                <Popconfirm
+                  title={
+                    <span>
+                      导入操作会覆盖所有菜单配置并且使
+                      <br />
+                      角色菜单权限失效是否继续导入？
+                    </span>
+                  }
+                  onConfirm={() => handleUpload(1)}
+                  onVisibleChange={() => console.log('visible change')}
+                >
+                  <Button
+                    type="primary"
+                    style={{
+                      marginLeft: '10px',
+                      display: nodeObj ? 'none' : 'block',
+                    }}
+                  >
+                    覆盖导入
+                  </Button>
+                </Popconfirm>
+
+                <Button
+                  type="primary"
+                  onClick={() => handleUpload(2)}
+                  loading={uploading}
+                  style={{
+                    marginLeft: '10px',
+                    display: nodeObj ? 'none' : 'block',
+                  }}
+                >
+                  增量导入
+                </Button>
+                <Button
+                  type="primary"
+                  onClick={() => handleUpload(2)}
+                  loading={uploading}
+                  style={{
+                    marginLeft: '10px',
+                    display: nodeObj ? 'block' : 'none',
+                  }}
+                >
+                  开始导入
+                </Button>
+              </div>
+            </Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default ImportOrExport;

src/pages/productCenter/mobileConfig/menuconfig/miniMenu.jsx

@@ -6,6 +6,7 @@ import {
   FolderFilled,
   FileOutlined,
   DeleteTwoTone,
+  DeliveredProcedureOutlined,
 } from '@ant-design/icons';
 import classnames from 'classnames';
 import {
@@ -23,6 +24,7 @@ import { appConnector } from '@/containers/App/store';
 import Tree from '@/components/ExpendableTree';
 import AddForm from './AddForm';
 import EditForm from './editForm';
+import ImportOrExport from './ImportOrExport';
 import CheckList from './checkBox';
 import { setIn } from 'immutable';
 
@@ -53,6 +55,7 @@ const MiniMenu = props => {
   const [keepType, setKeepType] = useState('');
   const [inf, setInf] = useState({});
   const [checkList, setCheckList] = useState([]);
+  const [importOrExportVisible, setImportOrExportVisible] = useState(false); // 导入导出弹窗
 
   // 获取菜单树
   useEffect(() => {
@@ -180,6 +183,22 @@ const MiniMenu = props => {
         <div className={styles.title}>
           <div>{obj.text}</div>
           <div className={styles.tip}>
+            {obj.menuType === 'MiniAppMenuGroup' && (
+              <Tooltip title="导入导出菜单组" className={styles.fs}>
+                <DeliveredProcedureOutlined
+                  style={{ color: '#178BF7' }}
+                  onClick={e => importAndExport(obj, e)}
+                />
+              </Tooltip>
+            )}
+            {obj.menuType === 'MiniAppMenuGroupTwo' && (
+              <Tooltip title="导入导出菜单组" className={styles.fs}>
+                <DeliveredProcedureOutlined
+                  style={{ color: '#178BF7' }}
+                  onClick={e => importAndExport(obj, e)}
+                />
+              </Tooltip>
+            )}
             {obj.menuType === 'MiniAppMenuGroup' && (
               <Tooltip title="新增菜单组" className={styles.fsize}>
                 <FolderAddTwoTone onClick={e => addMenuGroupTip(obj, e)} />
@@ -353,6 +372,12 @@ const MiniMenu = props => {
         console.log(err);
       });
   };
+  // 导入导出菜单组
+  const importAndExport = (val, e) => {
+    e.stopPropagation();
+    setNodeObj(val);
+    setImportOrExportVisible(true);
+  };
   // 新增菜单组
   const addMenuGroupTip = (val, e) => {
     e.stopPropagation();
@@ -664,6 +689,15 @@ const MiniMenu = props => {
                 [styles.tRight]: true,
               })}
             >
+              <Tooltip title="导入导出菜单组" className={styles.fs}>
+                <DeliveredProcedureOutlined
+                  style={{ color: '#178BF7', marginRight: '10px' }}
+                  onClick={() => {
+                    setNodeObj('');
+                    setImportOrExportVisible(true);
+                  }}
+                />
+              </Tooltip>
               <Tooltip title="新增最上级菜单组">
                 <FolderAddTwoTone
                   className={`${styles.icon1} ${styles.icon}`}
@@ -799,6 +833,15 @@ const MiniMenu = props => {
             <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前未选中菜单" />
           )}
         </div>
+        <ImportOrExport
+          visible={importOrExportVisible}
+          onCancel={() => {
+            setImportOrExportVisible(false);
+            updateTrees();
+          }}
+          subSystemValue={clientName}
+          nodeObj={nodeObj}
+        />
       </div>
     </Spin>
   );

src/pages/productCenter/mobileConfig/menuconfig/miniMenu.less

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