feat: web配置保存

src/pages/webConfig/components/siteConfigDrawer.js

 import React from 'react';
-import { Drawer } from 'antd';
+import { Drawer, notification } from 'antd';
 import WebConfigForm from './webConfigForm';
+import { postEditWebConfig } from '@/services/webConfig/api';
 
 export default props => {
-  const { visible, onClose, config, hasIntegerate, isEdit } = props;
+  const {
+    visible,
+    onClose,
+    config,
+    hasIntegerate,
+    isEdit,
+    onOk,
+    submitting,
+  } = props;
 
   return (
     <Drawer
@@ -19,8 +28,18 @@ export default props => {
         isEdit={isEdit}
         config={config}
         onCancel={onClose}
+        submitting={submitting}
         onOk={values => {
-          console.log(values);
+          if (!values.homePage && values.hideMap) {
+            notification.error({
+              message: '在按需加载地图的模式下，请配置主页路径',
+              duration: '3',
+            });
+            return;
+          }
+          values.alarmWays = values.alarmWays.join(',');
+          // eslint-disable-next-line no-unused-expressions
+          onOk && onOk(values);
         }}
       />
     </Drawer>

src/pages/webConfig/components/webConfigForm.js

@@ -9,7 +9,15 @@ import { Row, Col } from 'antd';
 import { getDefaultGetWebconfig, singleStyleData } from '../utils';
 
 const WebConfigForm = props => {
-  const { hasIntegerate, config, onCancel, onSubmit, onOk, isEdit } = props;
+  const {
+    hasIntegerate,
+    config,
+    onCancel,
+    onSubmit,
+    onOk,
+    isEdit,
+    submitting,
+  } = props;
   const [webThemes, setWebThemes] = useState([]);
   const [mapConfigs, setMapConfigs] = useState([]);
   const [loginPages, setLoginPages] = useState([]);
@@ -45,6 +53,7 @@ const WebConfigForm = props => {
 
   const itemsMap = getDefaultGetWebconfig({
     initialValues: config,
+    submitting,
     hasIntegerate,
     webThemes,
     onGetThemes,
@@ -76,6 +85,7 @@ const WebConfigForm = props => {
         htmlType: 'submit',
         type: 'primary',
         size: 'middle',
+        loading: submitting,
         style: {
           marginLeft: '10px',
         },

src/pages/webConfig/index.js

 import React, { useEffect, useState } from 'react';
 import PageContainer from '@/components/BasePageContainer';
-import { Tabs } from 'antd';
+import { notification, Spin, Tabs } from 'antd';
 import {
   getWebModuleTree,
-  getWebConfigByName,
   getWebconfig,
+  postEditWebConfig,
 } from '@/services/webConfig/api';
+import { cancelled } from 'redux-saga/effects';
 import styles from './index.less';
 import SiteConfig from './components/siteConfigDrawer';
 import { appConnector } from '@/containers/App/store';
@@ -20,47 +21,65 @@ const WebConfigPage = props => {
   const [configObj, setConfigObj] = useState({}); // 获取当前的web的配置
   const [toEdit, setToEdit] = useState(null); // 编辑展示用的配置
   const [isEdit, setIsEdit] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
 
   const hasIntegerate = () => webs.some(w => w.mode === 'integrate');
 
   useEffect(() => {
-    let canceled = false;
-    getWebModuleTree(userMode || 'super').then(res => {
+    let canceled = { cancel: false };
+    setLoading(true);
+    updateModuleTree(userMode || 'super', canceled);
+    return () => {
+      canceled.cancel = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    let canceled = { cancel: false };
+    if (!curWeb) return;
+    const title = curWeb.text;
+    updateWebconfig(title, canceled);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      canceled.cancel = true;
+    };
+  }, [curWeb]);
+
+  const updateModuleTree = (userModePrama, canceled = { cancel: false }) => {
+    getWebModuleTree(userModePrama).then(res => {
       const websArr = [
         res.data
           .filter(d => d.id === 'Web4IntegrateStation')
           .map(r => r.children),
         res.data.filter(d => d.id === 'Web4SingleStation').map(r => r.children),
       ].flat(2);
-      if (!canceled) {
+      if (!canceled.cancel) {
         setWebs(websArr);
-        setCurWeb(websArr[0]);
+        if (!curWeb) setCurWeb(websArr[0]);
         setLoading(false);
       }
     });
-    return () => {
-      canceled = true;
   };
-  }, []);
 
-  useEffect(() => {
-    let canceled = false;
-    if (!curWeb) return;
-    const title = curWeb.text;
-    // eslint-disable-next-line no-unused-expressions
-    getWebconfig(curWeb.text).then(res => {
-      if (!canceled) {
+  const updateWebconfig = (webTitle, canceled = { cancel: false }) => {
+    setLoading(true);
+    return getWebconfig(webTitle)
+      .then(res => {
+        setLoading(false);
+        if (!canceled.cancel) {
           setConfigObj(res);
-        if (title === curWeb.text) {
+          if (webTitle === curWeb.text) {
             setToEdit(res);
           }
         }
+      })
+      .catch(err => {
+        setLoading(false);
+        // eslint-disable-next-line no-console
+        console.error(err);
       });
-    // eslint-disable-next-line consistent-return
-    return () => {
-      canceled = true;
   };
-  }, [curWeb]);
 
   const renderTabPane = tabPaneItem => (
     <TabPane key={tabPaneItem.text} tab={tabPaneItem.text}>
@@ -101,9 +120,42 @@ const WebConfigPage = props => {
     setCurWeb(webs.find(w => w.text === v));
   };
 
+  const handleSubmit = values => {
+    setSubmitting(true);
+    if (isEdit) {
+      postEditWebConfig(values)
+        .then(res => {
+          setSubmitting(false);
+          if (res.success) {
+            setCurWeb({ ...curWeb, text: values.title });
+            notification.success({
+              message: '保存成功!',
+              duration: 3,
+            });
+            updateModuleTree(userMode || 'super');
+          } else {
+            notification.warning({
+              message: res.message || '编辑失败！',
+              duration: 5,
+            });
+          }
+        })
+        .catch(err => {
+          notification.success({
+            message: '编辑失败！',
+            duration: 5,
+          });
+          // eslint-disable-next-line no-console
+          console.error(err);
+          setSubmitting(false);
+        });
+    }
+  };
+
   return (
-    <PageContainer loading={loading}>
+    <PageContainer>
       <div className={styles.webConfigContainer}>
+        <Spin spinning={loading || submitting}>
           <Tabs type="editable-card" onEdit={onEdit} onChange={handleTabChange}>
             {webs.map(renderTabPane)}
           </Tabs>
@@ -112,8 +164,11 @@ const WebConfigPage = props => {
             visible={configVisible}
             onClose={onDrawerClose}
             config={toEdit}
+            onOk={handleSubmit}
+            submitting={submitting}
             hasIntegerate={hasIntegerate()}
           />
+        </Spin>
       </div>
     </PageContainer>
   );

src/pages/webConfig/utils.js

@@ -263,6 +263,9 @@ export const getDefaultGetWebconfig = ({
     Object.keys(config).forEach(k => {
       config[k].initialValue =
         typeof initialValues[k] !== 'undefined' ? initialValues[k] : '';
+      if (k === 'alarmWays') {
+        config[k].initialValue = config[k].initialValue.split(',');
+      }
     });
   }
   return config;

src/services/webConfig/api.js

 import qs from 'qs';
-import { CITY_SERVICE, get, PUBLISH_SERVICE } from '../index';
+import { CITY_SERVICE, get, PUBLISH_SERVICE, post, postForm } from '../index';
 
 export const getWebModuleTree = userMode =>
   get(
@@ -25,3 +25,14 @@ export const getMapCofigs = () =>
 
 export const getWebconfig = title =>
   get(`${CITY_SERVICE}/OMS.svc/W4_GetWebsite`, { title });
+
+export const postEditWebConfig = config =>
+  post(
+    `${CITY_SERVICE}/OMS.svc/W4_EditWebsite?_version=9999`,
+    qs.stringify({ config: JSON.stringify(config) }),
+    {
+      headers: {
+        'content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+      },
+    },
+  );