fix: '数据库多数据源主站配置'

src/pages/dataCenter/dictionary/AppDic.jsx

@@ -13,18 +13,8 @@ import {
   message,
 } from 'antd';
 import { get, CITY_SERVICE, PUBLISH_SERVICE } from '@/services';
-import {
-  GetKeyValue,
-  EditKeyValue,
-  DeleteKeyValue,
-  AddKeyValue,
-} from '@/services/dataCenter/api';
-import {
-  EditTwoTone,
-  DeleteOutlined,
-  PlusSquareOutlined,
-  SyncOutlined,
-} from '@ant-design/icons';
+import { GetKeyValue, EditKeyValue, DeleteKeyValue, AddKeyValue } from '@/services/dataCenter/api';
+import { EditTwoTone, DeleteOutlined, PlusSquareOutlined, SyncOutlined } from '@ant-design/icons';
 import styles from './AppDic.less';
 
 const AppDic = () => {
@@ -414,25 +404,13 @@ const AppDic = () => {
         cancelText="取消"
       >
         <Form form={addForm} labelCol={{ span: 3 }}>
-          <Form.Item
-            name="label"
-            label="名称"
-            rules={[{ required: true, message: '不能为空' }]}
-          >
+          <Form.Item name="label" label="名称" rules={[{ required: true, message: '不能为空' }]}>
             <Input placeholder="请输入名称" />
           </Form.Item>
-          <Form.Item
-            name="key"
-            label="键名"
-            rules={[{ required: true, message: '不能为空' }]}
-          >
+          <Form.Item name="key" label="键名" rules={[{ required: true, message: '不能为空' }]}>
             <Input placeholder="请输入键名" />
           </Form.Item>
-          <Form.Item
-            name="value"
-            label="值"
-            rules={[{ required: true, message: '不能为空' }]}
-          >
+          <Form.Item name="value" label="值" rules={[{ required: true, message: '不能为空' }]}>
             <Input placeholder="请输入值" />
           </Form.Item>
           <Form.Item name="description" label="描述">
@@ -452,21 +430,13 @@ const AppDic = () => {
         cancelText="取消"
       >
         <Form form={editForm} labelCol={{ span: 3 }}>
-          <Form.Item
-            name="label"
-            label="名称"
-            rules={[{ required: true, message: '不能为空' }]}
-          >
+          <Form.Item name="label" label="名称" rules={[{ required: true, message: '不能为空' }]}>
             <Input placeholder="请输入名称" />
           </Form.Item>
           <Form.Item name="key" label="键名">
             <Input placeholder="请输入键名" />
           </Form.Item>
-          <Form.Item
-            name="value"
-            label="值"
-            rules={[{ required: true, message: '不能为空' }]}
-          >
+          <Form.Item name="value" label="值" rules={[{ required: true, message: '不能为空' }]}>
             <Input placeholder="请输入值" />
           </Form.Item>
           <Form.Item name="description" label="描述">

src/pages/dataCenter/dictionary/WebDic.jsx

@@ -890,7 +890,6 @@ const WebDic = () => {
       <span style={{ color: 'rgb(24, 144, 255)' }}>（{name}）</span>
     </>
   );
-
   return (
     <div className={styles.WebDic}>
       <Spin spinning={loading} tip="loading...">

src/pages/database/databaseConfig/DatabaseConfig.jsx

@@ -7,6 +7,7 @@ import SQLServerTable from './sqlServer/SQLServerTable';
 import OracleTable from './oracle/OracleTable';
 import MongDBTable from './mongDB/MongDBTable';
 import MySQLTable from './mysqltable/MySQLTable';
+import MasterTable from './master/MasterTable';
 
 const { TabPane } = Tabs;
 const dataArr = [
@@ -107,45 +108,8 @@ const DatabaseConnectConfig = props => {
         <MongDBTable />
 
         <MySQLTable />
-        {/* 主站配置 */}
 
-        <div
-          style={{
-            fontWeight: 'bold',
-            fontSize: '16px',
-            marginLeft: '30x',
-            marginBottom: '10px',
-          }}
-        >
-          主站配置
-        </div>
-        <Form form={form} labelCol={{ span: 1 }} wrapperCol={{ span: 23 }} onFinish={onFinish}>
-          <Form.Item label="Url地址" required>
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-              <Form.Item
-                name="url"
-                rules={[
-                  { required: true, message: '请输入url地址' },
-                  { type: 'url', message: '请输入完整url' },
-                ]}
-                style={{ marginBottom: '0', width: '100%' }}
-              >
-                <Input placeholder={`如：${window.location.origin}`} />
-              </Form.Item>
-              {/* {isLink ? (
-                <CheckOutlined style={{ margin: '12px 10px 0 10px' }} />
-              ) : (
-                <CloseOutlined style={{ margin: '12px 10px 0 10px' }} />
-              )} */}
-              <Button type="primary" htmlType="submit" style={{ margin: '0 10px' }}>
-                提交
-              </Button>
-              <Button type="primary" onClick={deleteConfig}>
-                删除
-              </Button>
-            </div>
-          </Form.Item>
-        </Form>
+        <MasterTable />
       </Card>
     </PageContainer>
   );

src/pages/database/databaseConfig/master/AddModal.jsx

+/* eslint-disable prefer-promise-reject-errors */
+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Input, Select, notification } from 'antd';
+import { AddConnString, EditConnString, SaveMainServer } from '@/services/database/api';
+
+const { Item } = Form;
+const { Option } = Select;
+const AddModal = props => {
+  const { callBackSubmit = () => {}, type, formObj, visible, keepName } = 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') {
+          SaveMainServer({
+            ...obj,
+          })
+            .then(res => {
+              setLoading(false);
+              if (res.code == 0) {
+                form.resetFields();
+                callBackSubmit();
+                notification.success({
+                  message: '提示',
+                  duration: 3,
+                  description: '新增成功',
+                });
+              } else {
+                notification.error({
+                  message: '提示',
+                  duration: 3,
+                  description: res.msg,
+                });
+              }
+            })
+            .catch(err => {
+              setLoading(false);
+              console.error(err);
+            });
+        } else if (type === 'edit') {
+          handleEdit();
+        }
+      }
+    });
+  };
+  const handleEdit = () => {
+    let obj = form.getFieldsValue();
+    SaveMainServer({
+      ...obj,
+    })
+      .then(res => {
+        setLoading(false);
+        if (res.code == 0) {
+          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 => {};
+  useEffect(() => {
+    if (visible) {
+      switch (type) {
+        case 'add':
+          if (keepName.indexOf('mainserver') == -1) {
+            form.setFieldsValue({ name: 'mainserver' });
+          }
+          break;
+        case 'edit':
+          form.setFieldsValue({ ...formObj });
+          break;
+        default:
+          break;
+      }
+    } else {
+      form.resetFields();
+    }
+  }, [visible]);
+  const layout = {
+    layout: 'horizontal',
+    labelCol: {
+      span: 4,
+    },
+    wrapperCol: {
+      span: 19,
+    },
+  };
+  return (
+    <Modal
+      title={`${type === 'add' ? '添加' : '编辑'}主站配置连接`}
+      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}>
+          {type === 'add' ? (
+            <Item
+              label="标签"
+              name="name"
+              rules={[
+                { required: true, message: '请输入标签' },
+                {
+                  validator: (rule, value) => {
+                    if (keepName.indexOf(form.getFieldValue().name) != -1) {
+                      return Promise.reject('标签名已存在');
+                    }
+                    return Promise.resolve();
+                  },
+                },
+                {
+                  validator: (rule, value) => {
+                    let aa = form.getFieldValue().name.substr(0, 1);
+                    var regPos = /^[0-9]+.?[0-9]*/; //判断是否是数字。
+                    if (regPos.test(aa)) {
+                      return Promise.reject('标签名不能以数字开头');
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}
+            >
+              <Input placeholder="请输入标签" allowClear />
+            </Item>
+          ) : (
+            <Item label="标签" name="name" rules={[{ required: true, message: '请输入标签' }]}>
+              <Input placeholder="请输入标签" allowClear disabled />
+            </Item>
+          )}
+          <Item
+            label="Url地址"
+            name="url"
+            rules={[
+              { required: true, message: '请输入url地址' },
+              { type: 'url', message: '请输入完整url' },
+            ]}
+            style={{ width: '100%' }}
+          >
+            <Input placeholder={`如：${window.location.origin}`} />
+          </Item>
+        </Form>
+      )}
+    </Modal>
+  );
+};
+export default AddModal;

src/pages/database/databaseConfig/master/MasterTable.jsx

+import React, { useEffect, useState } from 'react';
+// import ProTable from '@ant-design/pro-table';
+import { Button, Tag, Popconfirm, notification, Table } from 'antd';
+import {
+  GetConnString,
+  DeleteConnString,
+  GetConnTest,
+  GetUrlConnectionTest,
+  GetMainServer,
+  DeleteMainServer,
+} from '@/services/database/api';
+import AddModal from './AddModal';
+const MasterTable = 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({});
+  const [keepName, setKeepName] = useState([]);
+
+  useEffect(() => {
+    setTableLoading(true);
+    GetMainServer()
+      .then(res => {
+        setTableLoading(false);
+        if (res.code == 0) {
+          setDataList(res.data);
+          let aa = [];
+          res.data.map(i => {
+            aa.push(i.name);
+          });
+          setKeepName(aa);
+        }
+      })
+      .catch(err => {
+        setTableLoading(false);
+      });
+  }, [flag]);
+  // 新增
+  const handleAdd = (val, item) => {
+    setType('add');
+    setVisible(true);
+  };
+  // 测试连接
+  const handleCon = (val, item) => {
+    setTableLoading(true);
+    GetUrlConnectionTest({
+      name: item.name,
+    })
+      .then(res => {
+        setTableLoading(false);
+        if (res.code == 0) {
+          notification.success({
+            message: '提示',
+            description: '连接成功',
+            duration: 3,
+          });
+        } else {
+          notification.error({
+            message: '提示',
+            description: res.msg || '连接失败',
+            duration: 3,
+          });
+        }
+      })
+      .catch(err => {
+        setTableLoading(false);
+        console.error(err);
+      });
+  };
+  // 删除
+  const handleDel = (val, item) => {
+    const { name = '' } = item;
+    console.log(name);
+    DeleteMainServer({
+      name,
+    }).then(res => {
+      setFlag(flag + 1);
+      if (res.code == 0) {
+        notification.success({
+          message: '提示',
+          duration: 3,
+          description: res.msg || '删除成功',
+        });
+      } else {
+        notification.error({
+          message: '提示',
+          duration: 3,
+          description: res.msg || '删除失败',
+        });
+      }
+    });
+  };
+  // 编辑
+  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',
+      ellipsis: true,
+    },
+    {
+      title: 'URL地址',
+      dataIndex: 'url',
+      key: 'url',
+      ellipsis: true,
+    },
+    {
+      title: '操作',
+      dataIndex: 'options',
+      key: 'options',
+      render: (val, item) => [
+        <Button size="small" type="primary" onClick={() => handleCon(val, item)}>
+          测试连接
+        </Button>,
+        <Button
+          style={{
+            margin: '0 10px',
+            backgroundColor: '#fffbe6',
+            color: '#faad14',
+            borderColor: '#ffe58f',
+          }}
+          size="small"
+          onClick={() => handleEdit(val, item)}
+        >
+          编辑
+        </Button>,
+        <Popconfirm
+          title={`是否删除连接${item.name}`}
+          cancelText="取消"
+          okText="确认"
+          // placement="right"
+          onConfirm={() => handleDel(val, item)}
+        >
+          <Button size="small" danger>
+            删除
+          </Button>
+        </Popconfirm>,
+      ],
+    },
+  ];
+  return (
+    <>
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
+        <div
+          style={{ fontWeight: 'bold', fontSize: '16px', marginLeft: '30x', marginBottom: '10px' }}
+        >
+          主站点Url地址
+        </div>
+        <Button
+          type="primary"
+          onClick={() => {
+            handleAdd();
+          }}
+        >
+          添加连接
+        </Button>
+      </div>
+      <Table
+        rowKey="key"
+        columns={columns}
+        bordered
+        loading={tableLoading}
+        dataSource={dataList}
+        scroll={{ x: 'max-content', y: '400px' }}
+      />
+      <AddModal
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        callBackSubmit={onSubmit}
+        type={type}
+        formObj={formObj}
+        keepName={keepName}
+      />
+    </>
+  );
+};
+
+export default MasterTable;

src/services/database/api.js

@@ -206,4 +206,7 @@ export const SaveMainServer = params => get(`${PUBLISH_SERVICE}/DBManager/SaveMa
 export const GetMainServer = params => get(`${PUBLISH_SERVICE}/DBManager/GetMainServer`, params);
 // 删除主站配置
 export const DeleteMainServer = params =>
-  post(`${PUBLISH_SERVICE}/DBManager/DeleteMainServer`, params);
+  get(`${PUBLISH_SERVICE}/DBManager/DeleteMainServer`, params);
+// 测试主站连接
+export const GetUrlConnectionTest = params =>
+  get(`${PUBLISH_SERVICE}/DBManager/GetUrlConnectionTest`, params);