perf(pages/database): 页面优化

src/pages/database/InitDataBase.jsx

@@ -6,10 +6,11 @@ import {
   Button,
   Select,
   Table,
-  Tag,
   Space,
   notification,
-  Modal
+  Modal,
+  Row,
+  Col
 } from 'antd';
 import { PageContainer } from '@ant-design/pro-layout';
 import { connect } from 'react-redux';
@@ -25,8 +26,7 @@ const formLables = {
 };
 const InitDataBase = props => {
   const [form] = Form.useForm();
-  const onFinish = e => {};
-  const [tableLoading, setTableLoading] = useState(false);
+  const [tableLoading, setTableLoading] = useState(false);//连接记录
   const [dbForm, setDbForm] = useState({
     ip: '',
     dbName: '',
@@ -35,7 +35,9 @@ const InitDataBase = props => {
     inUse: '',
   });
   const [data, setData] = useState([]); //数据库链接记录
+  const [upData,setUpData] = useState(1);//列表刷新标记
   const [option, setOption] = useState([]); //下拉列表数据
+  const [desc, setDesc] = useState('');//修改描述
   const [modalVisible, setModalVisible] = useState(false)
   console.log(window.location.host);
   //获取数据库链接记录
@@ -59,7 +61,7 @@ const InitDataBase = props => {
         setTableLoading(false);
         console.error(err);
       });
-  }, []);
+  }, [upData]);
   //获取数据库配置信息
   useEffect(() => {
     get(`/Cityinterface/rest/services/OMS.svc/S_GetDataBaseConfig`, {
@@ -67,7 +69,7 @@ const InitDataBase = props => {
       dc: 1603334559186,
     })
       .then(res => {
-        console.log(res);
+        console.log(res,'69res');
         if (res.success) {
           let obj = {};
           for (let k in dbForm) {
@@ -93,10 +95,75 @@ const InitDataBase = props => {
       dbName: value,
     });
   };
+  //保存连接
+  const onFinish = values => {
+    const obj = values
+    get('/Cityinterface/rest/services/OMS.svc/S_SaveConnection',{
+      _version:9999,
+      _dc:new Date().getTime(),
+      ip:obj.ip,
+      dbName:obj.dbName,
+      userName:obj.userName,
+      password:obj.password
+    }).then(res =>{
+      if(res.GetMe===true){
+        setUpData(upData+1)
+        notification.success({
+          message: '通知',
+          duration: 3,
+          description: '保存成功',
+        });
+      }else{
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.Say.Message||'保存失败',
+        });
+      }
+    }).catch(err =>{
+      console.log(err)
+      notification.error({
+        message: '提示',
+        duration: 3,
+        description: err||'保存失败',
+      });
+    })
+  };
   const onCheck = e => {
+    //测试连接
     console.log(dbForm);
     console.log(form.getFieldValue());
     console.log(form.getFieldsValue());
+    const obj = form.getFieldsValue()
+    get('/Cityinterface/rest/services/OMS.svc/S_GetConnectionTest',{
+      _version:9999,
+      _dc:new Date().getTime(),
+      ip:obj.ip,
+      dbName:obj.dbName,
+      userName:obj.userName,
+      password:obj.password
+    }).then(res =>{
+      if(res.GetMe===true){
+        notification.success({
+          message: '通知',
+          duration: 3,
+          description: '连接成功',
+        });
+      }else{
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.Say.Message||'连接失败',
+        });
+      }
+    }).catch(err =>{
+      console.log(err)
+      notification.error({
+        message: '提示',
+        duration: 3,
+        description: err||'连接失败',
+      });
+    })
   };
   const selectFocus = e => {
     setOption([]);
@@ -133,9 +200,35 @@ const InitDataBase = props => {
     }
     form.setFieldsValue(obj);
   };
-  //修改描述
+  //展示修改描述
   const changeDesc = () => {
     setModalVisible(true)
+    setDesc('')
+  }
+  const descChange = (e) =>{
+    const { value } = e.target
+    setDesc(value)
+  }
+  //弹窗确认回调
+  const modalOkCallback = () =>{
+    console.log(form.getFieldsValue());
+    const obj = form.getFieldsValue()
+    get('/Cityinterface/rest/services/OMS.svc/S_UpdateConnDesc',{
+      _version:9999,
+      _dc:new Date().getTime(),
+      ip:obj.ip,
+      dbName:obj.dbName,
+      userName:obj.userName,
+      password:obj.password,
+      desc
+    }).then(res =>{
+      console.log(res)
+      setModalVisible(false)
+      setUpData(upData+1)
+    }).catch(err =>{
+      console.error(err)
+      setModalVisible(false)
+    })
   }
   const columns = [
     {
@@ -235,7 +328,7 @@ const InitDataBase = props => {
               <div className={styles.tCenter}>
                 <Space size="large">
                   <Button  onClick={onCheck}>测试连接</Button>
-                  <Button type='primary' htmlType="submit">保存连接</Button>
+                  <Button type='primary' htmlType="submit" loading={tableLoading}>保存连接</Button>
                   <Button type='primary' danger htmlType="reset" onClick={()=>{initClick()}}>
                     数据库初始化
                   </Button>
@@ -264,20 +357,26 @@ const InitDataBase = props => {
           />
         </Card>
         <Modal
-          title='修改描述链接'
+          title='修改链接描述'
           visible={modalVisible}
           maskClosable
-          onOk={() => setModalVisible(false)}
+          onOk={() =>  modalOkCallback() }
           onCancel={() => setModalVisible(false)}
           width="1000px"
           bodyStyle={{
             minHeight:'100px'
           }}
-          footer={
-            <Button type='primary' onClick={() => setModalVisible(false)}>关闭窗口</Button>
-          }
+          cancelText='取消'
+          okText='确认修改'
+          destroyOnClose={true}
         >
-          <div>测试</div>
+          <Row >
+            <Col span={1} className={styles.decsBox}>描述:</Col>
+            <Col span={11} >
+              <Input placeholder='请输入描述' onChange={(value)=>{
+              descChange(value)
+            }}></Input></Col>
+          </Row>
         </Modal>
       </PageContainer>
     </>

src/pages/database/InitDataBase.less

@@ -6,4 +6,8 @@
 }
 .tCenter{
   text-align: center;
+}
+.decsBox{
+  height: 32px;
+  line-height: 32px;
 }
\ No newline at end of file

src/pages/database/ManagementDataBase.jsx

@@ -8,6 +8,7 @@ const ManagementDataBase = () => {
   const [autoCheckList, setAutoCheckList] = useState([]);
   const [checkList, setCheckList] = useState([]);
   const [logList, setLogList] = useState([]);
+  const [checkFlag, setCheckFlag] = useState(1)
   const [checkLoading, setCheckLoading] = useState(false);
   const [logLoading, setLogLoading] = useState(false);
   const [modalVisible, setModalVisible] = useState(false); // 弹窗
@@ -43,7 +44,7 @@ const ManagementDataBase = () => {
         setCheckLoading(false);
         console.error(err);
       });
-  }, []);
+  }, [checkFlag]);
   //获取数据库升级记录
   useEffect(() => {
     setLogLoading(true);
@@ -69,8 +70,7 @@ const ManagementDataBase = () => {
       });
   }, []);
   const handleCheck = () => {
-    console.log('check DB');
-    alert('check DB')
+    setCheckFlag(checkFlag+1)
   };
   const handleUpdate = () => {
     alert('updatedb')
@@ -181,10 +181,11 @@ const ManagementDataBase = () => {
             dataSource={autoCheckList}
             bordered
             loading={checkLoading}
+            scroll={{y:400}}
           />
           <div className={ styles.tCenter}>
           <Space>
-            <Button  type='primary' onClick={handleCheck}>检查</Button>
+            <Button  type='primary' onClick={handleCheck} loading={checkLoading}>检查</Button>
             <Button danger type='primary' onClick={handleUpdate}>升级</Button>
           </Space>
           </div>
@@ -200,6 +201,7 @@ const ManagementDataBase = () => {
             dataSource={checkList}
             bordered
             loading={checkLoading}
+            scroll={{y:400}}
           />
         </Card>
         <Card className={styles.mgTop20}>
@@ -210,6 +212,7 @@ const ManagementDataBase = () => {
             dataSource={logList}
             bordered
             loading={logLoading}
+            scroll={{y:400}}
           />
         </Card>
       </PageContainer>

src/pages/orgnazation/DefaultComponent.jsx

@@ -15,6 +15,7 @@ import TestModal from './ModalComponent';
 import ListCard from './ListCard';
 import { get, post } from '../../services';
 import { orgGet,orgTest } from '../../services/orgnazation/api'
+import styles from './DefaultComponent.less'
 const { Search } = Input
 const { TreeNode } = TreeSelect;
 // const treeData = [
@@ -92,7 +93,8 @@ const DefaultComponent = ()=> {
     {
       title:'微信账户',
       dataIndex:'wxid',
-      key:'wxid'
+      key:'wxid',
+      ellipsis: true,
     }
   ]
   useEffect( ()=>{
@@ -237,14 +239,16 @@ const DefaultComponent = ()=> {
             <ListCard optionsList ={testPeoList}></ListCard>
           </TestModal>
         </Card>
-        <Card>
-          <div>一般用户的用户列表</div>
-          <Table 
+        <Card className={styles.mgTop20}>
+          <div classNam={styles.tableTitle}>一般用户的用户列表</div>
+          <Table
+          className={styles.mgTop20}
           rowSelection={rowSelection} 
           columns={columns} 
           dataSource ={tableData} 
           bordered
           rowKey='userID'
+          scroll={{y:400}}
           ></Table>
         </Card>
       </PageContainer>

src/pages/orgnazation/DefaultComponent.less

+.tableTitle{
+  font-size: 16px;
+}
+.mgTop20{
+  margin-top: 20px !important;
+}