fix: 菜单配置功能优化

src/pages/productCenter/webConfig/menuconfig/AddForm.jsx

 import React, { useState } from 'react';
+import { getConfigContent } from '@/services/webConfig/api';
 import { Form, Input, Button, Select, Radio, message } from 'antd';
 import styles from './addForm.less';
 import PicturesWall from '@/components/Upload/index';
@@ -20,6 +21,7 @@ const AddForm = props => {
   const [curretnMenu, setCurrentMenu] = useState({}); // 当前选中菜单数据
   const [form] = Form.useForm();
   const [otherForm] = Form.useForm();
+  const [configContent, setConfigContent] = useState(''); // 配置文件内容
   const layout = {
     layout: 'horizontal',
     labelCol: { span: 4, offset: 1 },
@@ -31,7 +33,10 @@ const AddForm = props => {
       let arr = obj.pageUrl.split('/'); // 用const声明常量
       const product = allProductList.find(item => item.PackageName.includes(arr[0]));
       if (product) {
-        arr.shift();
+        if (arr.length > 1) {
+          arr.shift();
+        }
+
         obj.pageUrl = arr.join('/');
       }
       console.log(product, 'product');
@@ -42,6 +47,8 @@ const AddForm = props => {
       }
       obj.codeParam = JSON.stringify(curretnMenu.param);
       obj.code = curretnMenu.code;
+      obj.configContent = configContent;
+      console.log(obj, 'obj');
       submitCallback(obj, nodeObj);
     }
     if (addType === 2) {
@@ -62,8 +69,25 @@ const AddForm = props => {
       menuName: val?.function,
       shortName: val?.shortName,
       imageUrl: val?.icon,
-      config: val?.configName,
+      configName: val?.configName,
     });
+    setConfigContent(val.configContent);
+  };
+  const wrapperFinish = val => {
+    setConfigContent(val);
+  };
+  // 选择配置文件获取到配置文件内容
+  const selectConfig = val => {
+    console.log(val);
+    getConfigContent(val)
+      .then(res => {
+        if (res.code === 0) {
+          setConfigContent(res.data);
+        }
+      })
+      .catch(e => {
+        console.error(e);
+      });
   };
   return (
     <div>
@@ -133,11 +157,12 @@ const AddForm = props => {
             {/* <Input placeholder="请输入功能路径" /> */}
             <TreeSelect menuChange={val => menuChange(val)} />
           </Item>
-          <Item label="配置文件" name="config">
-            <EditeConfigWrapper>
+          <Item label="配置文件" name="configName">
+            <EditeConfigWrapper onFinish={wrapperFinish} configContent={configContent}>
               <Select
                 allowClear
                 showSearch
+                onSelect={selectConfig}
                 filterOption={(input, option) =>
                   option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }

src/pages/productCenter/webConfig/menuconfig/ParmarsModal.jsx

 import React, { useState, useRef, useContext, useEffect } from 'react';
-import { Modal, Form, Table, Input, Button, message } from 'antd';
+import { Modal, Form, Table, Input, Button, message, Select } from 'antd';
 import { DeleteOutlined } from '@ant-design/icons';
 import styles from './ParmarsModal.less';
 const EditableContext = React.createContext(null);
@@ -67,6 +67,37 @@ const EditableCell = ({
     },
   ];
   let rules = dataIndex === 'field' ? keyNameRule : [];
+  const rendeFrom = () => {
+    if (dataIndex === 'defaultValue' && record.type === '选择型') {
+      let options = record.valueDesc
+        .split(';')
+        .map(item => ({ label: item.split(':')[1], value: item.split(':')[0] }));
+
+      return (
+        <Select
+          // showSearch
+          placeholder="选择值"
+          optionFilterProp="children"
+          optionLabelProp="value"
+          // filterOption={(input, option) =>
+          //   (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+          // }
+          options={options}
+          ref={inputRef}
+          onPressEnter={save}
+          onBlur={save}
+        />
+      );
+    }
+    return (
+      <Input
+        readOnly={record.name && dataIndex !== 'defaultValue'}
+        ref={inputRef}
+        onPressEnter={save}
+        onBlur={save}
+      />
+    );
+  };
   if (editable) {
     childNode = editing ? (
       <Form.Item
@@ -76,12 +107,7 @@ const EditableCell = ({
         name={dataIndex}
         rules={rules}
       >
-        <Input
-          readOnly={record.name && dataIndex !== 'defaultValue'}
-          ref={inputRef}
-          onPressEnter={save}
-          onBlur={save}
-        />
+        {rendeFrom()}
       </Form.Item>
     ) : (
       <div className="editable-cell-value-wrap" onClick={toggleEdit}>
@@ -173,7 +199,7 @@ const ParmarsModal = props => {
       field: item.field,
       defaultValue: item.defaultValue,
       paramDesc: item.paramDesc,
-      valueDesc: item.valueDesc,
+      name: item.name,
     }));
     if (parma) {
       parmarCallBack(`${pageUrl.split('|')[0]}|${parma}`, parmas);
@@ -202,20 +228,21 @@ const ParmarsModal = props => {
       editable: true,
     },
     {
-      title: '参数值',
-      dataIndex: 'defaultValue',
-      width: 150,
+      title: '参数名描述',
+      dataIndex: 'name',
+      width: 250,
       editable: true,
     },
     {
-      title: '参数名描述',
-      dataIndex: 'paramDesc',
-      width: 250,
+      title: '参数值',
+      dataIndex: 'defaultValue',
+      width: 150,
       editable: true,
     },
+
     {
       title: '参数值描述',
-      dataIndex: 'valueDesc',
+      dataIndex: 'paramDesc',
       width: 250,
       editable: true,
     },
@@ -246,7 +273,7 @@ const ParmarsModal = props => {
       field: '',
       defaultValue: '',
       paramDesc: '',
-      valueDesc: '',
+      name: '',
     };
     console.log(newData, 'newData');
     setDataSource([...dataSource, newData]);

src/pages/productCenter/webConfig/menuconfig/ParmarsModal.less

@@ -43,7 +43,7 @@
       // width: 180px;
       padding: 0 5px;
       background-color: #ff4d4f;
-      top: 40px;
+      top: -45px;
       left: 50%;
       transform: translateX(-50%);
       border-radius: 5px;

src/pages/productCenter/webConfig/menuconfig/TreeSelect.jsx

@@ -25,7 +25,7 @@ const TreeSelect = (props, ref) => {
         setTreeList(tree);
         setMenuWebList(
           res.data.map(item => {
-            let obj = { ...item, path: `${item.packName}/${item.path}` };
+            let obj = { ...item, path: `${item.path}` };
             if (item.code === code) {
               setCurrentMenuParmar(obj);
               initCurrentMenu(obj);

src/pages/productCenter/webConfig/menuconfig/editConfigFileWrapper.js

@@ -7,7 +7,7 @@ import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-solarized_light';
 
 const ConfigWrapper = props => {
-  const { value, children, onChange, id, ...rest } = props;
+  const { value, children, onChange, id, onFinish, configContent, ...rest } = props;
   const [text, setText] = useState('');
   const [visible, setVisible] = useState(false);
 
@@ -19,15 +19,16 @@ const ConfigWrapper = props => {
       });
       return;
     }
-    getConfigContent(value)
-      .then(res => {
-        if (res.code === 0) {
-          setText(res.data);
-        }
-      })
-      .catch(e => {
-        console.error(e);
-      });
+    setText(configContent);
+    // getConfigContent(value)
+    //   .then(res => {
+    //     if (res.code === 0) {
+    //       setText(res.data);
+    //     }
+    //   })
+    //   .catch(e => {
+    //     console.error(e);
+    //   });
     setVisible(true);
   };
 
@@ -44,19 +45,21 @@ const ConfigWrapper = props => {
       err = true;
     }
     if (!err) {
-      saveConfigContent(value, JSON.stringify(JSON.parse(text), null, 4), id)
-        .then(res => {
-          if (res.code === 0) {
-            notification.success({
-              message: '保存成功',
-              duration: 3,
-            });
-            setVisible(false);
-          }
-        })
-        .catch(error => {
-          console.error(error);
-        });
+      // saveConfigContent(value, JSON.stringify(JSON.parse(text), null, 4), id)
+      //   .then(res => {
+      //     if (res.code === 0) {
+      //       notification.success({
+      //         message: '保存成功',
+      //         duration: 3,
+      //       });
+      //       setVisible(false);
+      //     }
+      //   })
+      //   .catch(error => {
+      //     console.error(error);
+      //   });
+      onFinish(JSON.stringify(JSON.parse(text), null, 4));
+      setVisible(false);
     }
   };
 

src/pages/productCenter/webConfig/menuconfig/editForm.jsx

@@ -22,7 +22,8 @@ import {
   FolderFilled,
   FileOutlined,
 } from '@ant-design/icons';
-import { GetWebMenuInfo } from '@/services/webConfig/api';
+import { GetWebMenuInfo, getConfigContent } from '@/services/webConfig/api';
+
 import classnames from 'classnames';
 import styles from './addForm.less';
 import PicturesWall from '@/components/Upload/index';
@@ -59,6 +60,7 @@ const EditForm = props => {
   const [menuParmar, setMenuParmar] = useState([]);
   const [codeParmar, setCodeParmar] = useState([]);
   const [curretnMenu, setCurrentMenu] = useState({}); // 当前选中菜单数据
+  const [configContent, setConfigContent] = useState(''); // 配置文件内容
   const treeSelectRef = useRef();
   const layout = {
     layout: 'horizontal',
@@ -74,6 +76,7 @@ const EditForm = props => {
       setMenuParmar([]);
     }
     setCodeParmar(infoAll.codeParam ? JSON.parse(infoAll.codeParam) : []);
+    setConfigContent(infoAll.configContent);
     setCurrentMenu({});
     form.resetFields();
     otherForm.resetFields();
@@ -165,7 +168,7 @@ const EditForm = props => {
     }
     obj.codeParam = JSON.stringify(curretnMenu.param);
     obj.code = curretnMenu.code;
-
+    obj.configContent = configContent;
     submitCallback(obj);
   };
 
@@ -332,14 +335,30 @@ const EditForm = props => {
       menuName: val?.function,
       shortName: val?.shortName,
       imageUrl: val?.icon,
-      config: val?.configName,
+      configName: val?.configName,
       pageUrl: val?.pageUrl,
     });
+    setConfigContent(val.configContent);
     setCurrentMenu(val);
     setMenuParmar(val?.param);
   };
-
-  console.log(curretnMenu?.param, 'curretnMenu.param');
+  // 编辑完配置文件后回调
+  const wrapperFinish = val => {
+    setConfigContent(val);
+  };
+  // 选择配置文件获取到配置文件内容
+  const selectConfig = val => {
+    console.log(val);
+    getConfigContent(val)
+      .then(res => {
+        if (res.code === 0) {
+          setConfigContent(res.data);
+        }
+      })
+      .catch(e => {
+        console.error(e);
+      });
+  };
   return (
     <div style={{ marginTop: '10px' }}>
       {nodeType === 1 && (
@@ -426,11 +445,16 @@ const EditForm = props => {
               <Button onClick={addParama}>参数管理</Button>
             </div>
           </Item>
-          <Item label="配置文件" name="config" style={{ marginLeft: '11px' }}>
-            <EditeConfigWrapper id={infoAll.menuID}>
+          <Item label="配置文件" name="configName" style={{ marginLeft: '11px' }}>
+            <EditeConfigWrapper
+              id={infoAll.menuID}
+              configContent={configContent}
+              onFinish={wrapperFinish}
+            >
               <Select
                 allowClear
                 showSearch
+                onSelect={selectConfig}
                 filterOption={(input, option) =>
                   option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                 }