feat(/page/database/dataconfig): a new feat

src/pages/database/CurrentSolution.less

@@ -6,7 +6,7 @@
   min-height: 200px;
 }
 .btnBox{
-  margin-top: 70px;
+  margin-top: 40px;
   display: flex;
   justify-content: center;
 }

src/pages/database/InitDataBase.jsx

@@ -177,11 +177,6 @@ const InitDataBase = props => {
       .catch(err => {
         setCardLoading(false);
         console.log(err);
-        notification.error({
-          message: '提示',
-          duration: 3,
-          description: err || '保存失败',
-        });
       });
   };
   // 测试连接

src/pages/database/databaseConfig/AddSQLServer.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Input, Select, notification } from 'antd';
+import {
+  addSQLServerConnString,
+  editSQLServerConnString,
+} from '@/services/database/api';
+import { duration } from 'moment';
+
+const { Item } = Form;
+const { Option } = Select;
+const AddModal = props => {
+  console.log(props);
+  const { callBackSubmit = () => {}, type, formObj, visible } = props;
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+  // 提交
+  const onSubmit = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        setLoading(true);
+        let obj = form.getFieldsValue();
+        if (type === 'add') {
+          addSQLServerConnString({
+            _version: 9999,
+            _dc: Date.now(),
+            ...obj,
+          })
+            .then(res => {
+              setLoading(false);
+              if (res.success) {
+                form.resetFields();
+                callBackSubmit();
+                notification.success({
+                  message: '提示',
+                  duration: 3,
+                  description: res.message || '新增成功',
+                });
+              } else {
+                notification.error({
+                  message: '提示',
+                  duration: 3,
+                  description: res.message || '新增失败',
+                });
+              }
+            })
+            .catch(err => {
+              setLoading(false);
+              console.error(err);
+            });
+        } else if (type === 'edit') {
+          handleEdit();
+        }
+      }
+    });
+  };
+  const handleEdit = () => {
+    let obj = form.getFieldsValue();
+    editSQLServerConnString({
+      _version: 9999,
+      _dc: Date.now(),
+      ...obj,
+      oldName: formObj.name,
+    })
+      .then(res => {
+        setLoading(false);
+        if (res.success) {
+          form.resetFields();
+          callBackSubmit();
+          notification.success({
+            message: '提示',
+            duration: 3,
+            description: res.message || '编辑成功',
+          });
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: res.message || '编辑失败',
+          });
+        }
+      })
+      .catch(err => setLoading(false));
+  };
+  const onFinish = value => {
+    console.log(value, 'value');
+  };
+  useEffect(() => {
+    console.log(type);
+    switch (type) {
+      case 'add':
+        break;
+      case 'edit':
+        form.setFieldsValue({ ...formObj });
+        break;
+      default:
+        break;
+    }
+  }, [visible]);
+  const layout = {
+    layout: 'horizontal',
+    labelCol: {
+      span: 4,
+    },
+    wrapperCol: {
+      span: 16,
+    },
+  };
+  return (
+    <Modal
+      title="添加运维数据库配置连接"
+      bodyStyle={{ width: '100%', minHeight: '100px' }}
+      style={{ top: '150px' }}
+      width="700px"
+      destroyOnClose
+      maskClosable={false}
+      cancelText="取消"
+      okText="确认"
+      {...props}
+      onOk={() => onSubmit()}
+      confirmLoading={loading}
+    >
+      {visible && (
+        <Form form={form} {...layout} onFinish={onFinish}>
+          <Item
+            label="标签"
+            name="name"
+            rules={[{ required: true, message: '请输入标签' }]}
+          >
+            {/* <Select>
+            <Option value={item.value}>{item.title}</Option>
+          </Select> */}
+            <Input placeholder="请输入标签" allowClear />
+          </Item>
+          <Item
+            label="IP"
+            name="ip"
+            rules={[{ required: true, message: '请输入IP' }]}
+          >
+            <Input placeholder="请输入IP" allowClear />
+          </Item>
+          <Item
+            label="数据库名"
+            name="dbName"
+            rules={[{ required: true, message: '请输入数据库名' }]}
+          >
+            <Input placeholder="请输入数据库名" allowClear />
+          </Item>
+          <Item
+            label="用户名"
+            name="userName"
+            rules={[{ required: true, message: '请输入用户名' }]}
+          >
+            <Input placeholder="请输入用户名" allowClear />
+          </Item>
+          <Item
+            label="密码"
+            name="password"
+            rules={[{ required: true, message: '请输入密码' }]}
+          >
+            <Input placeholder="请输入密码" allowClear />
+          </Item>
+        </Form>
+      )}
+    </Modal>
+  );
+};
+export default AddModal;

src/pages/database/databaseConfig/DatabaseConfig.jsx

+import React, { useState } from 'react';
+import { Card, Tabs } from 'antd';
+import { PageContainer } from '@ant-design/pro-layout';
+import SQLServerTable from './SQLServerTable';
+
+const { TabPane } = Tabs;
+const dataArr = [
+  {
+    title: 'SQLServer数据库连接',
+    key: '0',
+    component: <SQLServerTable />,
+  },
+  {
+    title: 'Oracle数据库连接',
+    key: '1',
+    component: <SQLServerTable />,
+  },
+  {
+    title: 'MongoDB数据库连接',
+    key: '2',
+    component: <SQLServerTable />,
+  },
+  {
+    title: 'MySQL数据库连接',
+    key: '3',
+    component: <SQLServerTable />,
+  },
+];
+const DatabaseConnectConfig = props => {
+  const [flag, setFlag] = useState(false);
+  return (
+    <PageContainer>
+      <Card>
+        <Tabs defaultValue="0">
+          {dataArr.map(item => (
+            <TabPane tab={item.title} key={item.key}>
+              {item.component}
+            </TabPane>
+          ))}
+        </Tabs>
+      </Card>
+    </PageContainer>
+  );
+};
+
+export default DatabaseConnectConfig;

src/pages/database/databaseConfig/SQLServerTable.jsx

+import React, { useEffect, useState } from 'react';
+import ProTable from '@ant-design/pro-table';
+import { Button, Tag, Popconfirm, notification } from 'antd';
+import {
+  getSQLServerConnString,
+  deleteConnString,
+  getSQLServerConnectionTest,
+} from '@/services/database/api';
+import AddModal from './AddSQLServer';
+const SQLServerTable = props => {
+  const [flag, setFlag] = useState(1);
+  const [dataList, setDataList] = useState([]); // table数据
+  const [visible, setVisible] = useState(false); // 弹窗
+  const [tableLoading, setTableLoading] = useState(false); // tableLoading
+  const [type, setType] = useState('add'); // 弹窗类型
+  const [formObj, setFormObj] = useState({});
+
+  useEffect(() => {
+    setTableLoading(true);
+    getSQLServerConnString({
+      _version: 9999,
+      _dc: Date.now(),
+    })
+      .then(res => {
+        setTableLoading(false);
+        if (res) {
+          setDataList(res);
+        }
+      })
+      .catch(err => {
+        setTableLoading(false);
+      });
+  }, [flag]);
+  // 新增
+  const handleAdd = (val, item) => {
+    setType('add');
+    setVisible(true);
+  };
+  // 测试连接
+  const handleCon = (val, item) => {
+    setTableLoading(true);
+    getSQLServerConnectionTest({
+      name: item.name,
+      _version: 9999,
+      _dc: Date.now(),
+    })
+      .then(res => {
+        setTableLoading(false);
+        if (res.success) {
+          notification.success({
+            message: '通知',
+            description: res.message || '连接成功',
+            duration: 3,
+          });
+        } else {
+          notification.error({
+            message: '通知',
+            description: res.message || '连接失败',
+            duration: 3,
+          });
+        }
+      })
+      .catch(err => {
+        setTableLoading(false);
+        console.error(err);
+      });
+  };
+  // 删除
+  const handleDel = (val, item) => {
+    const { name = '' } = item;
+    deleteConnString({
+      name,
+      _version: 9999,
+      _dc: Date.now(),
+    })
+      .then(res => {
+        setFlag(flag + 1);
+        if (res.success) {
+          notification.success({
+            message: '提示',
+            duration: 3,
+            description: res.message || '删除成功',
+          });
+        } else {
+          notification.error({
+            message: '提示',
+            duration: 3,
+            description: res.message || '删除失败',
+          });
+        }
+      })
+      .catch(err => console.error(err));
+  };
+  // 编辑
+  const handleEdit = (val, item) => {
+    setType('edit');
+    setFormObj(item);
+    setVisible(true);
+  };
+  const onSubmit = prop => {
+    console.log(prop);
+    setVisible(false);
+    setFlag(flag + 1);
+  };
+  const columns = [
+    {
+      title: '标签',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: 'ip',
+      dataIndex: 'ip',
+      key: 'ip',
+    },
+    {
+      title: '数据库名',
+      dataIndex: 'dbName',
+      key: 'dbName',
+    },
+    {
+      title: '用户名',
+      dataIndex: 'userName',
+      key: 'userName',
+    },
+    {
+      title: '密码',
+      dataIndex: 'password',
+      key: 'password',
+    },
+    {
+      title: '操作',
+      dataIndex: 'options',
+      key: 'options',
+      width: 300,
+      render: (val, item) => [
+        <Tag color="#2db7f5" onClick={() => handleCon(val, item)}>
+          测试连接
+        </Tag>,
+        <Tag color="gold" onClick={() => handleEdit(val, item)}>
+          编辑
+        </Tag>,
+        <Popconfirm
+          title={`是否删除连接${item.name}`}
+          cancelText="取消"
+          okText="确认"
+          // placement="right"
+          onConfirm={() => handleDel(val, item)}
+        >
+          <Tag color="#f50">删除</Tag>
+        </Popconfirm>,
+      ],
+    },
+  ];
+  return (
+    <>
+      <ProTable
+        headerTitle="SQL数据库"
+        rowKey="key"
+        search={false}
+        columns={columns}
+        bordered
+        loading={tableLoading}
+        dataSource={dataList}
+        options={{ reload: false, fullScreen: false }}
+        toolBarRender={() => [
+          <Button
+            type="primary"
+            onClick={() => {
+              handleAdd();
+            }}
+          >
+            添加SQL数据库连接
+          </Button>,
+        ]}
+      />
+      <AddModal
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        callBackSubmit={onSubmit}
+        type={type}
+        formObj={formObj}
+      />
+    </>
+  );
+};
+
+export default SQLServerTable;

src/pages/mobileConfig/SiteConfig.jsx

@@ -38,7 +38,7 @@ const SiteConfig = props => {
     getWebsite({
       _version: 9999,
       _dc: Date.now(),
-      title: '新运维测试小程序222',
+      title: '熊猫掌天下小程序',
     }).then(res => {
       let obj = { ...form.getFieldsValue() };
       let arr = Object.keys({ ...form.getFieldsValue() });

src/routes/config.js

@@ -17,6 +17,7 @@ import Welcome from '../pages/Welcome';
 import RequestTest from '../pages/testPages/request';
 import InitDataBase from '../pages/database/InitDataBase';
 import ManagementDataBase from '../pages/database/ManagementDataBase';
+import DatabaseConnectConfig from '@/pages/database/databaseConfig/DatabaseConfig';
 import CurrentSolution from '@/pages/database/CurrentSolution';
 import UserManage from '../pages/userCenter/UserManage';
 import RoleManage from '@/pages/userCenter/roleManage/RoleManage';
@@ -88,6 +89,12 @@ export default {
               authority: superAuthority,
               component: ManagementDataBase,
             },
+            {
+              path: '/dbm/connectConfig',
+              name: '数据库连接配置',
+              authority: superAuthority,
+              component: DatabaseConnectConfig,
+            },
           ],
         },
         {

src/services/database/api.js

@@ -26,3 +26,25 @@ export const updateDateBase = params =>
     '/Cityinterface/rest/services/OMS.svc/DatabaseStandard_UpdateDateBase',
     params,
   );
+// SQL数据库连接
+export const getSQLServerConnString = params =>
+  get('/Cityinterface/rest/services/OMS.svc/S_GetSQLServerConnString', params);
+
+/**
+ * @数据库连接配置
+ */
+// 新增SQLServer数据库连接
+export const addSQLServerConnString = params =>
+  get('/Cityinterface/rest/services/OMS.svc/S_AddSQLServerConnString', params);
+// 删除SQLServer数据库连接
+export const deleteConnString = params =>
+  get('/Cityinterface/rest/services/OMS.svc/S_DeleteConnString', params);
+// 删除SQL连接
+export const editSQLServerConnString = params =>
+  get('/Cityinterface/rest/services/OMS.svc/S_EditSQLServerConnString', params);
+// 测试连接
+export const getSQLServerConnectionTest = params =>
+  get(
+    '/Cityinterface/rest/services/OMS.svc/S_GetSQLServerConnectionTest',
+    params,
+  );