perf(page/database): fix bug

src/pages/database/CurrentSolution.jsx

@@ -5,8 +5,8 @@ import { getSolutionList, changeSolution } from '@/services/database/api';
 import styles from './CurrentSolution.less';
 const { Option } = Select;
 const CurrentSolution = () => {
-  const [currentData, setCurrentData] = useState('');
-  const [dataList, setDataList] = useState([]);
+  const [currentData, setCurrentData] = useState(''); // 解决方案的值
+  const [dataList, setDataList] = useState([]); // 下拉数组
   const [loading, setLoading] = useState(false);
   useEffect(() => {
     setLoading(true);
@@ -26,12 +26,13 @@ const CurrentSolution = () => {
         console.error(err);
       });
   }, []);
+  // 切换解决方案
   const handleSelect = e => {
     setCurrentData(e);
   };
+  // 提交配置信息
   const submit = params => {
     setLoading(true);
-    console.log(params);
     changeSolution({
       solution: currentData,
       _version: 9999,
@@ -42,14 +43,14 @@ const CurrentSolution = () => {
         if (res.success) {
           notification.success({
             message: '提示',
-            description: '切换成功',
+            description: res.message || '切换成功',
             duration: 3,
           });
         } else {
           notification.error({
             message: '提示',
-            description: res.message,
-            duration: null,
+            description: res.message || '切换失败',
+            duration: 10,
           });
         }
       })

src/pages/database/InitDataBase.jsx

@@ -12,6 +12,7 @@ import {
   Row,
   Col,
   Popconfirm,
+  Spin,
 } from 'antd';
 import { PageContainer } from '@ant-design/pro-layout';
 import { connect } from 'react-redux';
@@ -47,9 +48,11 @@ const InitDataBase = props => {
   const [desc, setDesc] = useState(''); // 修改描述
   const [allSqlDir, setAllSqulDir] = useState([]); // 修改产品方案
   const [defaultSqlDir, setDefaultSqlDir] = useState(''); // 修改产品方案默认值
-  const [modalVisible, setModalVisible] = useState(false);
-  const [initVisible, setInitVisible] = useState(false);
-  const [initContent, setInitContent] = useState('');
+  const [modalVisible, setModalVisible] = useState(false); // 修改秒速弹窗
+  const [initVisible, setInitVisible] = useState(false); // 数据库初始化弹窗
+  const [initContent, setInitContent] = useState(''); // 数据库初始化内容
+  const [initLoading, setInitLoading] = useState(false);
+  const [cardLoading, setCardLoading] = useState(false); // 初始化card Loading
   // 获取数据库链接记录
   useEffect(() => {
     setTableLoading(true);
@@ -74,11 +77,13 @@ const InitDataBase = props => {
   }, [upData]);
   // 获取数据库配置信息
   useEffect(() => {
+    setCardLoading(true);
     get(`/Cityinterface/rest/services/OMS.svc/S_GetDataBaseConfig`, {
       _version: 9999,
       dc: 1603334559186,
     })
       .then(res => {
+        setCardLoading(false);
         if (res.success) {
           let obj = {};
           Object.keys(dbForm).forEach(k => {
@@ -91,17 +96,21 @@ const InitDataBase = props => {
         }
       })
       .catch(err => {
+        setCardLoading(false);
         console.error(err);
       });
   }, []);
   // 数据库初始化
   const initClick = () => {
+    setInitLoading(true);
     let obj = form.getFieldsValue();
     initDBv4({
       _version: 9999,
       _dc: Date.now(),
       ...obj,
-    }).then(res => {
+    })
+      .then(res => {
+        setInitLoading(false);
         if (res.GetMe) {
           getInitDBLog({
             _version: 9999,
@@ -120,18 +129,25 @@ const InitDataBase = props => {
             description: res.Say.Message || '初始化失败',
           });
         }
+      })
+      .catch(err => {
+        setInitLoading(false);
+        console.log(err);
       });
   };
   const onValuesChange = (value, b) => {
     form.setFieldsValue(value);
   };
   const onChange = value => {
+    console.log(value);
+    const { length } = value;
     form.setFieldsValue({
-      dbName: value,
+      dbName: value[length - 1],
     });
   };
   // 保存连接
   const onFinish = values => {
+    setCardLoading(true);
     const obj = values;
     get('/Cityinterface/rest/services/OMS.svc/S_SaveConnection', {
       _version: 9999,
@@ -142,6 +158,7 @@ const InitDataBase = props => {
       password: obj.password,
     })
       .then(res => {
+        setCardLoading(false);
         if (res.GetMe === true) {
           setUpData(upData + 1);
           notification.success({
@@ -158,6 +175,7 @@ const InitDataBase = props => {
         }
       })
       .catch(err => {
+        setCardLoading(false);
         console.log(err);
         notification.error({
           message: '提示',
@@ -166,9 +184,10 @@ const InitDataBase = props => {
         });
       });
   };
-  const onCheck = e => {
   // 测试连接
+  const onCheck = e => {
     console.log(dbForm);
+    setCardLoading(true);
     const obj = form.getFieldsValue();
     get('/Cityinterface/rest/services/OMS.svc/S_GetConnectionTest', {
       _version: 9999,
@@ -179,6 +198,7 @@ const InitDataBase = props => {
       password: obj.password,
     })
       .then(res => {
+        setCardLoading(false);
         if (res.GetMe === true) {
           notification.success({
             message: '通知',
@@ -194,6 +214,7 @@ const InitDataBase = props => {
         }
       })
       .catch(err => {
+        setCardLoading(false);
         console.log(err);
         notification.error({
           message: '提示',
@@ -390,6 +411,7 @@ const InitDataBase = props => {
     <>
       <PageContainer>
         <Card>
+          <Spin tip="loading..." spinning={cardLoading}>
             <div className={styles.tableTitle}>数据库初始化</div>
             <Form
               className={styles.mgTop20}
@@ -412,6 +434,7 @@ const InitDataBase = props => {
               <Form.Item label={`${formLables.dbName}：`} name="dbName">
                 <Select
                   showSearch
+                  mode="tags"
                   placeholder="请选择数据库"
                   optionFilterProp="children"
                   onFocus={() => {
@@ -421,15 +444,20 @@ const InitDataBase = props => {
                     onChange(e);
                   }}
                   // eslint-disable-next-line no-shadow
-                filterOption={(input, option) =>
-                  option.children.toLowerCase().indexOf(input.toLowerCase()) >=
-                  0
-                }
+                  filterOption={(input, option) => {
+                    console.log(option);
+                    return (
+                      option.children &&
+                      option.children
+                        .toLowerCase()
+                        .indexOf(input.toLowerCase()) >= 0
+                    );
+                  }}
                 >
                   {option &&
                     option.length > 0 &&
                     option.map((item, index) => (
-                    <Option value={item.value} key={index}>
+                      <Option value={item.value} key={item.value + index}>
                         {item.value}
                       </Option>
                     ))}
@@ -457,7 +485,9 @@ const InitDataBase = props => {
                           initClick();
                         }}
                       >
-                      <Button type="primary">数据库初始化</Button>
+                        <Button type="primary" loading={initLoading}>
+                          数据库初始化
+                        </Button>
                       </Popconfirm>
                       {defaultSqlDir && (
                         <Select
@@ -481,6 +511,7 @@ const InitDataBase = props => {
                 </div>
               </Form.Item>
             </Form>
+          </Spin>
         </Card>
 
         <Card className={styles.mgTop20}>
@@ -506,7 +537,11 @@ const InitDataBase = props => {
             setInitVisible(false);
             setInitContent('');
           }}
-          width="600px"
+          width="800px"
+          bodyStyle={{
+            maxHeight: '600px',
+            overflowY: 'scroll',
+          }}
           footer={[
             <Button
               onClick={() => {

src/pages/database/ManagementDataBase.jsx

@@ -14,11 +14,12 @@ import styles from './ManagementDataBase.less';
 import { updateDateBase } from '@/services/database/api';
 
 const ManagementDataBase = () => {
-  const [autoCheckList, setAutoCheckList] = useState([]);
-  const [checkList, setCheckList] = useState([]);
-  const [logList, setLogList] = useState([]);
+  const [autoCheckList, setAutoCheckList] = useState([]); // 自动列表
+  const [checkList, setCheckList] = useState([]); // 手动列表
+  const [logList, setLogList] = useState([]); // 日志列表
   const [checkFlag, setCheckFlag] = useState(1);
-  const [checkLoading, setCheckLoading] = useState(false);
+  const [upFlag, setUpFlag] = useState(1); //
+  const [checkLoading, setCheckLoading] = useState(false); // 按钮loading
   const [logLoading, setLogLoading] = useState(false);
   const [modalVisible, setModalVisible] = useState(false); // 弹窗
   const [content, setContent] = useState(null);
@@ -63,7 +64,6 @@ const ManagementDataBase = () => {
     })
       .then(res => {
         setLogLoading(false);
-        console.log(res);
         if (res) {
           let arr = [];
           res.map((item, index) => {
@@ -77,18 +77,23 @@ const ManagementDataBase = () => {
         setLogLoading(false);
         console.error(err);
       });
-  }, []);
+  }, [upFlag]);
+  // 检查功能
   const handleCheck = () => {
     setCheckFlag(checkFlag + 1);
   };
+  // 升级功能
   const handleUpdate = () => {
+    setCheckLoading(true);
     updateDateBase({
       _version: 9999,
       _dc: Date.now(),
     })
       .then(res => {
+        setCheckLoading(false);
         setCheckFlag(checkFlag + 1);
-        if (res.sucess) {
+        setUpFlag(upFlag + 1);
+        if (res.success) {
           notification.success({
             message: '通知',
             duration: 3,
@@ -103,6 +108,7 @@ const ManagementDataBase = () => {
         }
       })
       .catch(err => {
+        setCheckLoading(false);
         console.error(err);
       });
   };
@@ -229,7 +235,7 @@ const ManagementDataBase = () => {
                   handleUpdate();
                 }}
               >
-                <Button danger type="primary">
+                <Button danger type="primary" loading={checkLoading}>
                   升级
                 </Button>
               </Popconfirm>
@@ -237,27 +243,27 @@ const ManagementDataBase = () => {
           </div>
         </Card>
         <Card className={styles.mgTop20}>
-          <div className={styles.tableTitle}>
-            表字段手动修复
-            （字段长度不统一，请手动修改差异，数据可能会截断，请谨慎操作）
-          </div>
+          <div className={styles.tableTitle}>数据库升级记录</div>
           <Table
             className={styles.mgTop20}
-            columns={checkColumns}
-            dataSource={checkList}
+            columns={logColumns}
+            dataSource={logList}
             bordered
-            loading={checkLoading}
+            loading={logLoading}
             size="small"
           />
         </Card>
         <Card className={styles.mgTop20}>
-          <div className={styles.tableTitle}>数据库升级记录</div>
+          <div className={styles.tableTitle}>
+            表字段手动修复
+            （字段长度不统一，请手动修改差异，数据可能会截断，请谨慎操作）
+          </div>
           <Table
             className={styles.mgTop20}
-            columns={logColumns}
-            dataSource={logList}
+            columns={checkColumns}
+            dataSource={checkList}
             bordered
-            loading={logLoading}
+            loading={checkLoading}
             size="small"
           />
         </Card>

src/pages/mobileConfig/SiteConfig.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Select, Input, Button, Row, Col, Radio } from 'antd';
+import {
+  Form,
+  Select,
+  Input,
+  Button,
+  Row,
+  Col,
+  Radio,
+  notification,
+} from 'antd';
 import { editWebsite, getWebsite } from '@/services/mobileConfig/api';
+import PicturesWall from '@/components/Upload/index';
 
 const { Item } = Form;
 const { Option } = Select;
 const SiteConfig = props => {
+  const { submitCallback } = props;
   const [config, setConfig] = useState(''); // 网站配置信息
   const [loginList, setLoginList] = useState([
     { text: '默认界面', value: 'default' },
@@ -22,16 +33,15 @@ const SiteConfig = props => {
     labelCol: { span: 3 },
     wrapperCol: { span: 14 },
   };
+
   useEffect(() => {
     getWebsite({
       _version: 9999,
       _dc: Date.now(),
-      title: '新运维测试小程序',
+      title: '新运维测试小程序222',
     }).then(res => {
-      console.log(res);
       let obj = { ...form.getFieldsValue() };
       let arr = Object.keys({ ...form.getFieldsValue() });
-      console.log(arr);
       arr.map(k => {
         obj[k] = res[k];
       });
@@ -42,22 +52,77 @@ const SiteConfig = props => {
   const radioChange = e => {};
   // 提交选择
   const submit = value => {
-    console.log(form.getFieldsValue());
+    form.validateFields().then(valid => {
+      if (valid) {
+        const obj = { ...form.getFieldsValue() };
+        let params = { ...obj, mode: 'single', client: 'miniapp' };
+        editWebsite(params, {
+          headers: {
+            'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
+          },
+        }).then(res => {
+          if (res.success) {
+            notification.success({
+              message: '提示',
+              duration: 3,
+              description: '编辑成功',
+            });
+            submitCallback();
+          } else {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: res.message || '编辑失败',
+            });
+          }
+          console.log(res, 'res');
+        });
+      }
+    });
   };
   return (
     <Form form={form} {...layout}>
-      <Item label="应用名称：" name="title">
+      <Item
+        label="应用名称："
+        name="title"
+        rules={[
+          {
+            required: true,
+            message: '请输入应用名称',
+          },
+        ]}
+      >
         <Input placeholder="请输入应用名称" allowClear />
       </Item>
 
-      <Item label="系统图标：" name="shortcutIcon">
+      <Item
+        label="系统图标："
+        name="shortcutIcon"
+        rules={[
+          {
+            required: true,
+            message: '请选择系统图标',
+          },
+        ]}
+      >
         <Input placeholder="请输入系统图标名称" allowClear />
       </Item>
 
       {/* <Button type="primary">按路径选择</Button> */}
 
-      <Item label="系统图标预览：" />
-      <Item label="登陆页面：" name="loginTemplate">
+      <Item label="系统图标预览：">
+        <PicturesWall maxLen={3} />
+      </Item>
+      <Item
+        label="登陆页面："
+        name="loginTemplate"
+        rules={[
+          {
+            required: true,
+            message: '请选择登陆页面',
+          },
+        ]}
+      >
         <Select placeholder="请选择登陆页面">
           {loginList &&
             loginList.map((item, index) => (
@@ -67,7 +132,16 @@ const SiteConfig = props => {
             ))}
         </Select>
       </Item>
-      <Item label="系统皮肤：" name="theme">
+      <Item
+        label="系统皮肤："
+        name="theme"
+        rules={[
+          {
+            required: true,
+            message: '请选择系统皮肤',
+          },
+        ]}
+      >
         <Select placeholder="请选择系统皮肤">
           {themeList &&
             themeList.map((item, index) => (
@@ -77,7 +151,16 @@ const SiteConfig = props => {
             ))}
         </Select>
       </Item>
-      <Item label="系统风格：" name="style">
+      <Item
+        label="系统风格："
+        name="style"
+        rules={[
+          {
+            required: true,
+            message: '请选择系统风格',
+          },
+        ]}
+      >
         <Select placeholder="请选择系统风格">
           {styleList &&
             styleList.map((item, index) => (

src/pages/mobileConfig/index.js

@@ -6,6 +6,7 @@ import SiteConfig from './SiteConfig';
 const { TabPane } = Tabs;
 const MobileConfigPage = props => {
   const [activeKey, setActiveKey] = useState('0'); // tabs活动页
+  const [flag, setFlag] = useState(1);
   useEffect(() => {
     miniAppSiteTree({
       userMode: 'admin',
@@ -16,17 +17,20 @@ const MobileConfigPage = props => {
     }).then(res => {
       console.log(res);
     });
-  }, []);
+  }, [flag]);
   // 修改选中的tab
   const handleChange = key => {
     setActiveKey(key);
   };
+  const submitCallback = val => {
+    setFlag(flag + 1);
+  };
   return (
     <PageContainer>
       <Card>
         <Tabs activeKey={activeKey} type="card" onChange={handleChange}>
           <TabPane tab="网站配置" key="0">
-            <SiteConfig />
+            <SiteConfig submitCallback={submitCallback} />
           </TabPane>
           <TabPane tab="菜单管理" key="1">
             <div>菜单管理</div>

src/pages/userCenter/siteManage/AddModal.jsx

@@ -84,7 +84,7 @@ const AddModal = props => {
         >
           <Input placeholder="请输入站点名称" />
         </Item>
-        <Item label="站点类别">all</Item>
+        {/* <Item label="站点类别">all</Item> */}
         <Item label="站点描述" name="description">
           <Input placeholder="请输入站点描述" />
         </Item>

src/pages/userCenter/siteManage/SiteManage.jsx

@@ -9,6 +9,7 @@ import {
   Button,
   notification,
   Spin,
+  Tabs,
 } from 'antd';
 import { FileAddTwoTone, EditTwoTone, DeleteTwoTone } from '@ant-design/icons';
 import { PageContainer, GridContent } from '@ant-design/pro-layout';
@@ -22,7 +23,9 @@ import qs from 'qs';
 import AddModal from './AddModal';
 import DelModal from './DelModal';
 import EditModal from './EditModal';
+
 const { Search } = Input;
+const { TabPane } = Tabs;
 const placeholder = '请输入人员姓名';
 const SiteManage = () => {
   const [treeData, setTreeData] = useState([]); // 树结构数据
@@ -39,8 +42,8 @@ const SiteManage = () => {
   const [spinLoading, setSpinLoading] = useState(false);
   const now = new Date().getTime();
   // 点击树的回调
-  const handleTreeSelect = e => {
-    console.log(e);
+  const handleTreeSelect = (e, info) => {
+    console.log(e, info);
     let id = e[0];
     if (id) {
       setSaveTreeId(id);
@@ -110,7 +113,7 @@ const SiteManage = () => {
   };
   // 站点删除
   const handleDel = e => {
-    setStationId(e.stationID);
+    setStationId(e);
     setDelVisible(true);
   };
   // 编辑站点
@@ -199,6 +202,15 @@ const SiteManage = () => {
                 spinning={spinLoading}
                 style={{ marginTop: '20px' }}
               >
+                {/* <Tabs
+                  tabPosition="left"
+                  defaultValue="0"
+                  type="card"
+                  style={{ width: '100%' }}
+                >
+                  <TabPane key="0" tab="tab1" />
+                  <TabPane key="1" tab="tab2" />
+                </Tabs> */}
                 <Tree
                   showLine={{ showLeafIcon: false }}
                   showIcon
@@ -226,7 +238,7 @@ const SiteManage = () => {
             </Card>
           </Col>
           <Col lg={18}>
-            <Card className={styles.cardBox}>
+            <Card style={{ marginBottom: '10px' }}>
               <Row align="middle">
                 <Col span={1}>搜索</Col>
                 <Col span={8}>
@@ -238,7 +250,42 @@ const SiteManage = () => {
                     enterButton
                   />
                 </Col>
+                <Col span={3} />
+                {/* <Col span={2}>
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      handleAdd();
+                    }}
+                  >
+                    新增
+                  </Button>
+                </Col>
+                <Col span={2}>
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      handleEdit();
+                    }}
+                    disabled={!ouid}
+                  >
+                    编辑
+                  </Button>
+                </Col>
+                <Col span={2}>
+                  <Button
+                    danger
+                    onClick={() => {
+                      handleDel(ouid);
+                    }}
+                    disabled={!ouid}
+                  >
+                    删除
+                  </Button>
+                </Col> */}
               </Row>
+            </Card>
+            <Card className={styles.cardBoxR}>
               {ouid && (
                 <ListCard
                   ouid={ouid}

src/pages/userCenter/siteManage/SiteManage.less

 .cardBox{
   min-height: calc(100vh - 200px);
 }
+.cardBoxR{
+  min-height: calc(100vh - 292px);
+}
 .ant-tree-node-content-wrapper-open{
   display: flex;
   align-items: center;

src/routes/config.js

@@ -4,6 +4,7 @@ import {
   UsergroupAddOutlined,
   SettingOutlined,
   HomeOutlined,
+  SolutionOutlined,
   //   AndroidOutlined,
   //   CommentOutlined,
   CopyOutlined,
@@ -55,6 +56,13 @@ export default {
       path: '/',
       component: BasicLayout,
       routes: [
+        {
+          path: '/solution',
+          name: '解决方案管理',
+          icon: <SolutionOutlined style={iconStyle} />,
+          authority: superAuthority,
+          component: CurrentSolution,
+        },
         {
           path: '/dbm',
           name: '数据库管理',
@@ -62,12 +70,12 @@ export default {
           component: BlankLayout,
           authority: adminAuthority,
           routes: [
-            {
-              path: '/dbm/solution',
-              name: '数据库解决方案',
-              authority: superAuthority,
-              component: CurrentSolution,
-            },
+            // {
+            //   path: '/dbm/solution',
+            //   name: '数据库解决方案',
+            //   authority: superAuthority,
+            //   component: CurrentSolution,
+            // },
             {
               path: '/dbm/dbInit',
               name: '数据库初始化',

src/services/database/api.js

@@ -11,7 +11,6 @@ export const setTableSQLDirName = params =>
   get('/Cityinterface/rest/services/OMS.svc/S_SetTableSQLDirName', params);
 
 // 删除数据库连接记录
-
 export const deleteConn = params =>
   get('/Cityinterface/rest/services/OMS.svc/S_DeleteConn', params);
 

src/services/mobileConfig/api.js

 import { get, post } from '@/services/index';
+import qs from 'qs';
 
 /**
  * @param {*} params
@@ -14,19 +15,25 @@ export const miniAppSiteTree = params =>
 export const getWebsite = params =>
   get('/Cityinterface/rest/services/OMS.svc/MiniApp_GetWebsite', params);
 /**
- *  编辑网站配置
+ *
  * @param {*} params
-*     title:"节水平台",
-  *   "shortcutIcon":"assets/images/icon/小程序logo/gck.png",
+ * /**
+ *  编辑小程序网站配置
+    title:"节水平台",
+    "shortcutIcon":"assets/images/icon/小程序logo/gck.png",
     "style":"default",
     "mode":"single",
     "client":"miniapp",
     "loginTemplate":"default",
     "theme":"default",
     "cloudLogin":false
-   */
-export const editWebsite = params =>
-  post(
+*/
+export const editWebsite = (params, options) => {
+  let strParams = JSON.stringify(params);
+  let qsParams = qs.stringify({ config: strParams });
+  return post(
     '/Cityinterface/rest/services/OMS.svc/MiniApp_EditWebsite?_version=9999',
-    params,
+    qsParams,
+    options,
   );
+};