feat: 网站配置

src/pages/webConfig/components/siteConfigDrawer.js

@@ -37,7 +37,10 @@ export default props => {
             });
             return;
           }
-          values.alarmWays = values.alarmWays?.join(',') || '';
+          values.alarmWays =
+            typeof values.alarmWays === 'string'
+              ? values.alarmWays
+              : values.alarmWays.join(',') || '';
           // eslint-disable-next-line no-unused-expressions
           onOk && onOk(values);
         }}

src/pages/webConfig/index.js

@@ -7,6 +7,7 @@ import {
   postEditWebConfig,
   postAddWebSite,
   deleteWebsite,
+  getAllConfigName,
 } from '@/services/webConfig/api';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import Modal from 'antd/lib/modal/Modal';
@@ -28,6 +29,7 @@ const WebConfigPage = props => {
   const [toEdit, setToEdit] = useState(null); // 编辑展示用的配置
   const [isEdit, setIsEdit] = useState(true);
   const [submitting, setSubmitting] = useState(false);
+  const [configFiles, setConfigFiles] = useState([]);
 
   const hasIntegerate = () =>
     webs.some(w => w.id.startsWith(webMode.integration));
@@ -36,6 +38,9 @@ const WebConfigPage = props => {
     let canceled = { cancel: false };
     setLoading(true);
     updateModuleTree(userMode || 'super', canceled);
+    getAllConfigName().then(res => {
+      if (!canceled.cancel) setConfigFiles(res);
+    });
     return () => {
       canceled.cancel = true;
     };
@@ -58,8 +63,20 @@ const WebConfigPage = props => {
       const websArr = [
         res.data
           .filter(d => d.id === 'Web4IntegrateStation')
-          .map(r => r.children),
-        res.data.filter(d => d.id === 'Web4SingleStation').map(r => r.children),
+          .map(r =>
+            r.children.map(c => ({
+              ...c,
+              subSystemValue: c.id.split(webMode.integration)[1],
+            })),
+          ),
+        res.data
+          .filter(d => d.id === 'Web4SingleStation')
+          .map(r =>
+            r.children.map(c => ({
+              ...c,
+              subSystemValue: c.id.split(webMode.single)[1],
+            })),
+          ),
       ].flat(2);
       if (!canceled.cancel) {
         setWebs(websArr);
@@ -202,23 +219,32 @@ const WebConfigPage = props => {
     updateModuleTree(userMode || 'super');
   };
 
+  const updateMenuTree = (type, menuNode) => {
+    updateModuleTree(userMode || 'super');
+  };
+
   const renderTabPane = tabPaneItem => (
     <TabPane key={tabPaneItem.id} tab={tabPaneItem.text}>
       <>
-        <span
-          className={styles.link}
-          onClick={() => {
-            setToEdit({ ...configObj });
-            setConfigVisible(true);
-            setIsEdit(true);
-          }}
-        >
-          查看/编辑网站配置
-        </span>
-        <ProCard>
+        <ProCard className={styles.webConfigTabcontent}>
+          <span
+            className={styles.link}
+            onClick={() => {
+              setToEdit({ ...configObj });
+              setConfigVisible(true);
+              setIsEdit(true);
+            }}
+          >
+            查看/编辑网站配置
+          </span>
           <MenuConfig
-            menu={curWeb?.children.find(w => w.menuType === 'Web4MenuRoot')}
+            menu={tabPaneItem?.children.find(
+              w => w.menuType === 'Web4MenuRoot',
+            )}
             onUpdate={handleUpdateOnMenuChange}
+            configFiles={configFiles}
+            updateMenuTree={updateMenuTree}
+            subSystemValue={tabPaneItem?.subSystemValue}
           />
         </ProCard>
       </>

src/pages/webConfig/index.less

@@ -13,6 +13,10 @@
     width: 100%;
     height: calc(100% - 40px);
   }
+  .webConfigTabcontent{
+    background: #fff;
+    height: calc(100vh - 128px) !important;
+  }
 }
 
 .webConfigContainer > .ant-tabs-card .ant-tabs-content {

src/pages/webConfig/menuconfig/AddForm.jsx

-import React, { useState } from 'react';
-import { Form, Input, Button, Row, Col } from 'antd';
+import React from 'react';
+import { Form, Input, Button, Select } from 'antd';
 import styles from './addForm.less';
 import PicturesWall from '@/components/Upload/index';
+import EditeConfigWrapper from './editConfigFileWrapper';
 
 const { Item } = Form;
 const AddForm = props => {
-  const { submitCallback, nodeType, nodeObj, addType, submitLoading } = props;
+  const {
+    submitCallback,
+    nodeObj,
+    addType,
+    submitLoading,
+    configFiles,
+  } = props;
   const [form] = Form.useForm();
   const [otherForm] = Form.useForm();
-  console.log(nodeObj, 'nodeObj');
   const layout = {
     layout: 'horizontal',
     labelCol: { span: 4, offset: 1 },
@@ -65,9 +71,27 @@ const AddForm = props => {
           >
             <PicturesWall />
           </Item>
-          <Item label="功能参数" name="funParam">
+          <Item label="功能路径" name="pageUrl">
             <Input />
           </Item>
+          <Item label="配置文件" name="config">
+            <EditeConfigWrapper>
+              <Select
+                allowClear
+                showSearch
+                filterOption={(input, option) =>
+                  option.children.toLowerCase().indexOf(input.toLowerCase()) >=
+                  0
+                }
+              >
+                {configFiles.map(c => (
+                  <Select.Option key={c.text} value={c.value}>
+                    {c.text}
+                  </Select.Option>
+                ))}
+              </Select>
+            </EditeConfigWrapper>
+          </Item>
           <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
             <Button type="primary" htmlType="submit" loading={submitLoading}>
               提交

src/pages/webConfig/menuconfig/MenuConfig.jsx

 import React, { useState, useEffect } from 'react';
 import ProCard from '@ant-design/pro-card';
+import { Empty } from 'antd';
 import WebMenu from './webMenu';
 
 const MenuConfig = props => {
   const { menu } = props;
   return (
     <>
-      {menu && (
+      {menu ? (
         <div split="vertical">
           <WebMenu {...props} />
         </div>
+      ) : (
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
       )}
     </>
   );

src/pages/webConfig/menuconfig/checkBox.jsx

@@ -42,7 +42,7 @@ const CheckList = props => {
   };
   return (
     <div>
-      {nodeType === 3 || nodeType === 4 ? (
+      {nodeType === 1 ? (
         <div className={styles.box}>
           {/* <Checkbox>全选/反选</Checkbox> */}
 

src/pages/webConfig/menuconfig/editConfigFileWrapper.js

+import { getConfigContent, saveConfigContent } from '@/services/webConfig/api';
+import { Button, Input, Modal, notification } from 'antd';
+import React, { Children, useState } from 'react';
+
+const ConfigWrapper = props => {
+  const { value, children, ...rest } = props;
+  const [text, setText] = useState('');
+  const [visible, setVisible] = useState(false);
+
+  const showModal = () => {
+    if (!value) {
+      notification.warning({
+        message: '请先填写配置文件名称',
+        duration: 3,
+      });
+      return;
+    }
+    getConfigContent(value)
+      .then(res => {
+        if (res.success) {
+          setText(res.message);
+        }
+      })
+      .catch(e => {
+        console.error(e);
+      });
+    setVisible(true);
+  };
+
+  const handleOk = () => {
+    let content;
+    let err = false;
+    try {
+      content = JSON.parse(text);
+    } catch (error) {
+      notification.error({
+        message: '编辑内容必须是json格式',
+        duration: 5,
+      });
+      err = true;
+    }
+    if (!err) {
+      saveConfigContent(JSON.stringify(JSON.parse(text), null, 4))
+        .then(res => {
+          if (res.success) {
+            notification.success({
+              message: '保存成功',
+              duration: 3,
+            });
+          }
+        })
+        .catch(error => {
+          console.error(error);
+        });
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex' }}>
+      {Children.map(children, child => React.cloneElement(child, { ...rest }))}
+      {<Button onClick={showModal}>编辑</Button>}
+      <Modal
+        title="编辑配置"
+        visible={visible}
+        onOk={handleOk}
+        maskClosable={false}
+        onCancel={() => setVisible(false)}
+      >
+        <Input.TextArea
+          value={text}
+          onChange={e => {
+            setText(e.target.value);
+          }}
+          rows={5}
+        />
+      </Modal>
+    </div>
+  );
+};
+export default ConfigWrapper;

src/pages/webConfig/menuconfig/editForm.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Row, Col } from 'antd';
+import { Form, Input, Button, Row, Col, Select } from 'antd';
 import styles from './addForm.less';
 import PicturesWall from '@/components/Upload/index';
+import EditeConfigWrapper from './editConfigFileWrapper';
 
 const { Item } = Form;
 const EditForm = props => {
-  const { submitCallback, nodeType, info } = props;
+  const { submitCallback, nodeType, info, configFiles } = props;
   const [form] = Form.useForm();
   const [otherForm] = Form.useForm();
   console.log(info);
@@ -75,9 +76,27 @@ const EditForm = props => {
           >
             <PicturesWall />
           </Item>
-          <Item label="功能路径" name="funParam">
+          <Item label="功能路径" name="pageUrl">
             <Input />
           </Item>
+          <Item label="配置文件" name="config">
+            <EditeConfigWrapper>
+              <Select
+                allowClear
+                showSearch
+                filterOption={(input, option) =>
+                  option.children.toLowerCase().indexOf(input.toLowerCase()) >=
+                  0
+                }
+              >
+                {configFiles.map(c => (
+                  <Select.Option key={c.text} value={c.value}>
+                    {c.text}
+                  </Select.Option>
+                ))}
+              </Select>
+            </EditeConfigWrapper>
+          </Item>
           <Item wrapperCol={{ offset: 5 }} style={{ marginTop: '40px' }}>
             <Button type="primary" htmlType="submit">
               提交

src/pages/webConfig/menuconfig/webMenu.jsx

 import React, { useEffect, useState } from 'react';
-import {
-  message,
-  notification,
-  Popconfirm,
-  Form,
-  Tree,
-  Tooltip,
-  Modal,
-  Input,
-  Button,
-  Spin,
-} from 'antd';
+import { notification, Tree, Tooltip, Modal, Spin } from 'antd';
 import {
   FileAddTwoTone,
   FolderAddTwoTone,
@@ -18,28 +7,23 @@ import {
   FileOutlined,
   DeleteTwoTone,
 } from '@ant-design/icons';
-import PicturesWall from '@/components/Upload/index';
 import classnames from 'classnames';
-import {
-  miniAppSiteTree,
-  getMiniAppModuleTree,
-  addMenu,
-  getMenuInfo,
-  deleteMenu,
-  editMenu,
-} from '@/services/mobileConfig/api';
-import styles from './miniMenu.less';
+import styles from './webMenu.less';
 import AddForm from './AddForm';
 import EditForm from './editForm';
 import CheckList from './checkBox';
+import {
+  addWebMenu, // 增
+  deleteWebMenu, // 删
+  editWebMenu, // 改
+  getWebMenuInfo, // 查
+} from '@/services/webConfig/api';
 
 const MiniMenu = props => {
-  const { menu } = props;
+  const { menu, configFiles, subSystemValue, updateMenuTree } = props;
   const [flag, setFlag] = useState(1); // 刷新标志
-  const [treeFlage, setTreeFlag] = useState(true);
   const [loading, setLoading] = useState(false); // 加载
   const [menuID, setMenuID] = useState(''); // 选中的树ID
-  const [saveID, setSaveID] = useState(''); // 保存选择的树id
   const [nodeType, setNodeType] = useState(''); // 选中的节点类型
   const [info, setInfo] = useState({});
   const [addVisible, setAddVisible] = useState(false); // 新增弹窗
@@ -69,19 +53,19 @@ const MiniMenu = props => {
         <div className={styles.title}>
           <div>{obj.text}</div>
           <div className={styles.tip}>
-            {obj.menuType === 'MiniAppMenuGroup' && (
+            {obj.menuType === 'Web4MenuGroup' && (
               <Tooltip title="新增菜单组" className={styles.fs}>
-                <FolderAddTwoTone onClick={() => addMenuGroupTip(obj)} />
+                <FolderAddTwoTone onClick={e => addMenuGroupTip(obj, e)} />
               </Tooltip>
             )}
-            {obj.menuType === 'MiniAppMenuGroupTwo' && (
+            {obj.menuType === 'Web4MenuGroup' && (
               <Tooltip title="新增功能菜单" className={styles.fs}>
-                <FileAddTwoTone onClick={() => addMenuTip(obj)} />
+                <FileAddTwoTone onClick={e => addMenuTip(obj, e)} />
               </Tooltip>
             )}
 
             <Tooltip title="删除菜单" className={styles.fs}>
-              <DeleteTwoTone onClick={() => deleteMenuTip(obj)} />
+              <DeleteTwoTone onClick={e => deleteMenuTip(obj, e)} />
             </Tooltip>
           </div>
         </div>
@@ -116,9 +100,6 @@ const MiniMenu = props => {
     }
     if (prop[0]) {
       setMenuID(prop[0]);
-      setSaveID(prop[0]);
-    } else {
-      setMenuID(saveID);
     }
   };
 
@@ -127,9 +108,8 @@ const MiniMenu = props => {
       return;
     }
     setLoading(true);
-    getMenuInfo({
+    getWebMenuInfo({
       menuID,
-      _version: 9999,
       _dc: Date.now(),
     })
       .then(res => {
@@ -151,7 +131,8 @@ const MiniMenu = props => {
       });
   };
   // 删除的回调
-  const deleteMenuTip = val => {
+  const deleteMenuTip = (val, e) => {
+    e.stopPropagation();
     console.log(val, 'val');
     setModalTitle(val.text);
     setNodeObj(val);
@@ -159,10 +140,9 @@ const MiniMenu = props => {
   };
   const delMenu = () => {
     setModalLoading(true);
-    deleteMenu({
+    deleteWebMenu({
       menuID: nodeObj.menuID,
       _dc: Date.now(),
-      _version: 9999,
     })
       .then(res => {
         setModalLoading(false);
@@ -171,6 +151,7 @@ const MiniMenu = props => {
           setFlag(flag + 1);
           setNodeType('');
           setNodeObj('');
+          updateMenuTree('delete', nodeObj);
           notification.success({
             message: '提示',
             duration: 3,
@@ -190,44 +171,42 @@ const MiniMenu = props => {
       });
   };
   // 新增菜单组
-  const addMenuGroupTip = val => {
-    console.log(val, 'addgroup');
+  const addMenuGroupTip = (val, e) => {
+    e.stopPropagation();
     setModalTitle(val.text);
     setNodeObj(val);
+    setAddType(2);
     setAddVisible(true);
   };
   const rootAddGroup = () => {
     setNodeObj('');
-    setNodeType(1);
     setModalTitle('最上级列表');
-    setAddType(1);
+    setAddType(2);
     setAddVisible(true);
   };
   // 新增功能菜单
-  const addMenuTip = val => {
-    console.log(val, 'add');
+  const addMenuTip = (val, e) => {
+    e.stopPropagation();
     setNodeObj(val);
     setModalTitle(val.text);
+    setAddType(1);
     setAddTwoVisible(true);
   };
   const rootAdd = () => {
     setModalTitle('最上级列表');
     setNodeObj('');
-    setNodeType(3);
-    setAddType(3);
+    setAddType(1);
     setAddTwoVisible(true);
   };
   // 新增提交的回调
   const submitCallback = (prop, item) => {
     setSubmitLoading(true);
-    console.log(prop, item);
     let obj = { ...prop };
     const parentID = item.menuID ? item.menuID : -1;
-    addMenu({
+    addWebMenu({
       _dc: Date.now(),
       parentID,
-      subSystemValue: 'miniapp',
-      _version: 9999,
+      subSystemValue,
       ...obj,
     })
       .then(res => {
@@ -236,6 +215,7 @@ const MiniMenu = props => {
           setAddVisible(false);
           setAddTwoVisible(false);
           setFlag(flag + 1);
+          updateMenuTree('add', item);
           notification.success({
             message: '提示',
             description: '新增成功',
@@ -258,16 +238,14 @@ const MiniMenu = props => {
   // 编辑的回调
   const editSubmitCallback = prop => {
     setLoading(true);
-    console.log(prop);
     let obj = { ...prop };
-    if (nodeType === 3 || nodeType === 4) {
+    if (nodeType === 1) {
       obj.relatedRoleList = String(roleList) || '';
     }
-    editMenu({
+    editWebMenu({
       _dc: Date.now(),
       menuID,
-      subSystemValue: 'miniapp',
-      _version: 9999,
+      subSystemValue,
       ...obj,
     })
       .then(res => {
@@ -275,6 +253,7 @@ const MiniMenu = props => {
 
         if (res.success) {
           setFlag(flag + 1);
+          updateMenuTree('edit');
           notification.success({
             message: '提示',
             duration: 3,
@@ -287,9 +266,9 @@ const MiniMenu = props => {
             description: res.message || '编辑失败',
           });
         }
-        console.log(res, 'resres');
       })
       .catch(err => {
+        // eslint-disable-next-line no-console
         console.error(err);
         setLoading(false);
       });
@@ -369,9 +348,9 @@ const MiniMenu = props => {
           }}
         >
           <AddForm
-            nodeType={nodeType}
             nodeObj={nodeObj}
             addType={addType}
+            configFiles={configFiles}
             submitCallback={submitCallback}
             submitLoading={submitLoading}
           />
@@ -390,8 +369,8 @@ const MiniMenu = props => {
         >
           <AddForm
             submitLoading={submitLoading}
-            nodeType={nodeType}
             nodeObj={nodeObj}
+            configFiles={configFiles}
             addType={addType}
             submitCallback={submitCallback}
           />
@@ -420,6 +399,7 @@ const MiniMenu = props => {
             <EditForm
               nodeType={nodeType}
               info={info}
+              configFiles={configFiles}
               submitCallback={editSubmitCallback}
             />
           )}

src/pages/webConfig/menuconfig/miniMenu.less → src/pages/webConfig/menuconfig/webMenu.less

 .box{
-  min-height: calc( 100vh - 172px);
+  min-height: calc( 100vh - 198px);
   display: flex;
 }
 .left{

src/pages/webConfig/utils.js

@@ -276,6 +276,19 @@ export const getDefaultGetWebconfig = ({
       if (k === 'alarmWays') {
         config[k].initialValue = config[k].initialValue.split(',');
       }
+      if (k === 'mode' && initialValues.mode) {
+        config[k].options = [
+          {
+            value: webMode.single,
+            children: '一般网站',
+          },
+          {
+            value: webMode.integration,
+            children: '集成网站',
+          },
+        ];
+        config[k].initialValue = initialValues.mode;
+      }
     });
   }
   return config;

src/services/webConfig/api.js

@@ -69,3 +69,41 @@ export const postAddWebSite = config => postEditWebConfig(config, true);
 
 export const deleteWebsite = client =>
   get(`${CITY_SERVICE}/OMS.svc/W4_DeleteWebsite?_version=9999`, { client });
+
+/**
+ * 获取配置文件下拉选项
+ */
+export const getAllConfigName = () =>
+  get(`${CITY_SERVICE}/OMS.svc/W4_GetAllConfigName?_version=9999`);
+
+export const addWebMenu = param => {
+  const defaultConfig = { pageUrl: '' };
+  // eslint-disable-next-line no-return-assign
+  Object.keys(param).forEach(k => (defaultConfig[k] = param[k]));
+  return get(`${CITY_SERVICE}/OMS.svc/W4_AddMenu?_version=9999`, defaultConfig);
+};
+
+export const editWebMenu = param =>
+  get(`${CITY_SERVICE}/OMS.svc/W4_EditMenu?_version=9999`, param);
+
+export const deleteWebMenu = param =>
+  get(`${CITY_SERVICE}/OMS.svc/W4_DeleteMenu?_version=9999`, param);
+
+export const getWebMenuInfo = param =>
+  get(`${CITY_SERVICE}/OMS.svc/P_GetMenuInfo?_version=9999`, param);
+
+export const saveConfigContent = content =>
+  post(
+    `${CITY_SERVICE}/OMS.svc/W4_SaveConfigContent?_version=9999`,
+    qs.stringify({ web4ConfigContent: content }),
+    {
+      headers: {
+        'content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+      },
+    },
+  );
+
+export const getConfigContent = name =>
+  get(`${CITY_SERVICE}/OMS.svc/W4_GetConfigContent?_version=9999`, {
+    fileName: name,
+  });