fix: 网站配置回显

src/pages/webConfig/components/siteConfigDrawer.js

@@ -3,12 +3,12 @@ import { Drawer } from 'antd';
 import WebConfigForm from './webConfigForm';
 
 export default props => {
-  const { visible, onClose, config, hasIntegerate } = props;
+  const { visible, onClose, config, hasIntegerate, isEdit } = props;
 
   return (
     <Drawer
-      title={config ? '编辑网站' : '添加网站'}
-      width={520}
+      title={isEdit ? '查看/编辑网站配置' : '新增网站'}
+      width={620}
       closable
       onClose={onClose}
       visible={visible}
@@ -16,6 +16,7 @@ export default props => {
     >
       <WebConfigForm
         hasIntegerate={hasIntegerate}
+        isEdit={isEdit}
         config={config}
         onCancel={onClose}
         onOk={values => {

src/pages/webConfig/components/webConfigForm.js

@@ -9,11 +9,10 @@ import { Row, Col } from 'antd';
 import { getDefaultGetWebconfig, singleStyleData } from '../utils';
 
 const WebConfigForm = props => {
-  const { hasIntegerate, config, onCancel, onSubmit, onOk } = props;
+  const { hasIntegerate, config, onCancel, onSubmit, onOk, isEdit } = props;
   const [webThemes, setWebThemes] = useState([]);
   const [mapConfigs, setMapConfigs] = useState([]);
   const [loginPages, setLoginPages] = useState([]);
-  const [webType, setWebType] = useState();
   const [form, setForm] = useState(null);
 
   const getForm = f => {
@@ -48,12 +47,12 @@ const WebConfigForm = props => {
     initialValues: config,
     hasIntegerate,
     webThemes,
-    webType,
     onGetThemes,
     loginPages,
     mapConfigs,
     onGetLoginPages,
     onGetMapConfig,
+    isEdit,
   });
 
   const formConfig = {
@@ -97,13 +96,10 @@ const WebConfigForm = props => {
       labelCol={{ span: 6 }}
       wrapperCol={{ span: 14 }}
       onValuesChange={v => {
-        if (v.type) {
-          setWebType(v.type);
-          if (form) {
-            const sty = form.getFieldValue('style');
-            if (!singleStyleData[sty]) {
-              form.setFieldsValue([{ name: 'style', value: 'platform' }]);
-            }
+        if (form && v.mode === 'single') {
+          const sty = form.getFieldValue('style');
+          if (!singleStyleData[sty]) {
+            form.setFieldsValue([{ name: 'style', value: 'platform' }]);
           }
         }
       }}

src/pages/webConfig/index.js

@@ -19,47 +19,61 @@ const WebConfigPage = props => {
   const [curWeb, setCurWeb] = useState(null); // 当前展示的web
   const [configObj, setConfigObj] = useState({}); // 获取当前的web的配置
   const [toEdit, setToEdit] = useState(null); // 编辑展示用的配置
+  const [isEdit, setIsEdit] = useState(true);
 
-  const hasIntegerate = () => webs.some(w => w.webType === 'integrate');
+  const hasIntegerate = () => webs.some(w => w.mode === 'integrate');
 
   useEffect(() => {
+    let canceled = false;
     getWebModuleTree(userMode || 'super').then(res => {
       const websArr = [
         res.data
           .filter(d => d.id === 'Web4IntegrateStation')
-          .map(r => r.children.map(i => ({ ...i, webType: 'integrate' }))),
-        res.data
-          .filter(d => d.id === 'Web4SingleStation')
-          .map(r => r.children.map(i => ({ ...i, webType: 'single' }))),
+          .map(r => r.children),
+        res.data.filter(d => d.id === 'Web4SingleStation').map(r => r.children),
       ].flat(2);
-      setWebs(websArr);
-      setCurWeb(websArr[0]);
-      setLoading(false);
+      if (!canceled) {
+        setWebs(websArr);
+        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 => {
-      setConfigObj(res);
-      if (title === curWeb.text) {
-        setToEdit(res);
+      if (!canceled) {
+        setConfigObj(res);
+        if (title === curWeb.text) {
+          setToEdit(res);
+        }
       }
     });
+    // eslint-disable-next-line consistent-return
+    return () => {
+      canceled = true;
+    };
   }, [curWeb]);
 
   const renderTabPane = tabPaneItem => (
     <TabPane key={tabPaneItem.text} tab={tabPaneItem.text}>
       <>
         <span
+          className={styles.link}
           onClick={() => {
-            setToEdit(configObj);
+            setToEdit({ ...configObj });
             setConfigVisible(true);
+            setIsEdit(true);
           }}
         >
-          查看配置
+          查看/编辑网站配置
         </span>
       </>
     </TabPane>
@@ -69,6 +83,8 @@ const WebConfigPage = props => {
     // console.log(targetKey, action); // action: add|remove
     switch (action) {
       case 'add':
+        setIsEdit(false);
+        setToEdit({});
         setConfigVisible(true);
         break;
       case 'remove':
@@ -92,6 +108,7 @@ const WebConfigPage = props => {
           {webs.map(renderTabPane)}
         </Tabs>
         <SiteConfig
+          isEdit={isEdit}
           visible={configVisible}
           onClose={onDrawerClose}
           config={toEdit}

src/pages/webConfig/index.less

@@ -2,6 +2,12 @@
   position: absolute;
   width: 100%;
   height: 100%;
+  .link{
+    color: #2f54eb;
+    cursor: pointer;
+    user-select: none;
+    border-bottom: 1px solid #2f54eb;
+  }
   .ant-tabs-content-holder>.ant-tabs-content.ant-tabs-content-top{
     position: absolute;
     width: 100%;

src/pages/webConfig/utils.js

@@ -6,7 +6,7 @@ const typeContent = hasIntegerate => {
   }
   return [
     {
-      value: 'a',
+      value: 'integrate',
       children: '集成网站',
     },
   ];
@@ -29,6 +29,7 @@ export const menuStyle = {
   'banner-big': '标题栏-大',
   table: '左侧',
   dock: '底部',
+  'banner-left-noShrink': '标题栏-左-不收',
 };
 export const MDILabel = {
   MDI: '多标签模式',
@@ -39,23 +40,25 @@ export const notificationTypes = {
   MQTT: 'MQTT消息',
 };
 
-const isIntegerate = (webType, hasIntegerate) => {
-  if (typeof webType !== 'undefined') {
-    return webType === 'a';
+const isIntegerate = (mode, hasIntegerate) => {
+  if (typeof mode !== 'undefined') {
+    return mode === 'single';
   }
   return hasIntegerate;
 };
 
+export const defaultWebConfigObj = {};
+
 export const getDefaultGetWebconfig = ({
   initialValues = {},
   hasIntegerate,
   webThemes,
   onGetThemes,
-  webType,
   loginPages,
   onGetLoginPages,
   mapConfigs,
   onGetMapConfig,
+  isEdit,
 }) => {
   const config = {
     title: {
@@ -75,13 +78,14 @@ export const getDefaultGetWebconfig = ({
       formType: ITEM_TYPE.INPUT,
       allowClear: true,
     },
-    type: {
+    mode: {
       label: '网站类型',
       formType: ITEM_TYPE.SINGLE_RADIO,
-      initialValue: 'b',
+      initialValue: 'single',
+      disabled: isEdit,
       options: [
         {
-          value: 'b',
+          value: 'single',
           children: '一般网站',
         },
       ].concat(typeContent(hasIntegerate)),
@@ -106,7 +110,7 @@ export const getDefaultGetWebconfig = ({
         },
       ],
     },
-    bannerlogo: {
+    bannerLogo: {
       label: '标题logo',
       formType: ITEM_TYPE.IMGSHOP,
       rules: [
@@ -119,6 +123,7 @@ export const getDefaultGetWebconfig = ({
     client: {
       label: '虚拟目录',
       formType: ITEM_TYPE.INPUT,
+      disabled: isEdit,
       allowClear: true,
       size: 'small',
       rules: [
@@ -169,7 +174,7 @@ export const getDefaultGetWebconfig = ({
       formType: ITEM_TYPE.SELECT,
       initialValue: '',
       options: Object.keys(
-        isIntegerate(webType, hasIntegerate)
+        isIntegerate(initialValues.mode, hasIntegerate)
           ? integrateStyleData
           : singleStyleData,
       ).map(k => ({
@@ -223,6 +228,7 @@ export const getDefaultGetWebconfig = ({
     hideMap: {
       label: '按需加载地图',
       formType: ITEM_TYPE.SINGLE_RADIO,
+      optionType: 'button',
       options: [
         {
           value: true,
@@ -255,9 +261,8 @@ export const getDefaultGetWebconfig = ({
   };
   if (initialValues) {
     Object.keys(config).forEach(k => {
-      if (initialValues[k]) {
-        config[k].initialValue = initialValues[k];
-      }
+      config[k].initialValue =
+        typeof initialValues[k] !== 'undefined' ? initialValues[k] : '';
     });
   }
   return config;