fix: '达梦数据库'

src/pages/database/InitDataBase/InitDataBase.jsx

@@ -59,43 +59,28 @@ const InitDataBase = props => {
     dbName: '',
     password: '',
     userName: '',
+    providerType: '',
     inUse: '',
   });
   const [data, setData] = useState([]); // 数据库链接记录
-  const [upData, setUpData] = useState(1); // 列表刷新标记
   const [option, setOption] = useState([]); // 下拉列表数据
   const [desc, setDesc] = useState(''); // 修改描述
-  const [allSqlDir, setAllSqulDir] = useState([]); // 修改产品方案
-  const [defaultSqlDir, setDefaultSqlDir] = useState(''); // 修改产品方案默认值
   const [modalVisible, setModalVisible] = useState({
     describeVisible: false, // 描述弹窗
     versionVisible: false, // 检查版本弹窗
     initVisible: false, // 初始化选择产品弹窗
   }); // 修改弹窗
-  const [initVisible, setInitVisible] = useState(false); // 数据库初始化弹窗
-  const [initContent, setInitContent] = useState(''); // 数据库初始化内容
+
   const [cardLoading, setCardLoading] = useState(false); // 初始化card Loading
-  const [finish, setFinish] = useState(false);
-  const [initLoading, setInitLoading] = useState(false);
-  const [initList, setInitList] = useState([]); // 数据库初始化产品数据
-  const [dbExists, setDbExists] = useState(false); // 数据库是否存在
-  const [visibleModel, setVisibleModel] = useState(false);
-  const [keepDb, setKeepDb] = useState([]);
-  const [keepProduct, setKeepProduct] = useState([]);
-  const scroll = useRef(null);
-  const [keep, setKeep] = useState([]);
   const [flag, setFlag] = useState(0);
   const [keepData, setKeepData] = useState({});
   const chooseDb = useRef({});
   const key = CryptoJS.enc.Utf8.parse('1p2a3n4d5a6o7m8s9a10n1e2t3c4o5re'); //十六位十六进制数作为密钥
   const iv = CryptoJS.enc.Utf8.parse('1234567890000000');
+  const [pickItem, setPickItem] = useState();
 
   // 获取数据库配置信息
   useEffect(() => {
-    // setTimeout(() => {
-    //   document.getElementById('pwd').removeAttribute('value');
-    // }, 0);
-
     setCardLoading(true);
     // 数据库连接记录初始化
     getConnRecordData();
@@ -111,14 +96,6 @@ const InitDataBase = props => {
         });
         form.setFieldsValue({ ...obj });
         setDbForm(val => ({ ...val, ...obj }));
-        setAllSqulDir(res.allSqlDir);
-        if (res.allSqlDir.some(item => item === inUse)) {
-          setDefaultSqlDir(res.tableSQLDirName);
-        } else {
-          // 默认切换到第一个产品方案
-          handeleChangeSQLDirName(res.allSqlDir[0]);
-          setDefaultSqlDir(res.allSqlDir[0]);
-        }
       }
     });
     return () => {
@@ -174,72 +151,9 @@ const InitDataBase = props => {
       })
       .catch(err => {
         setTableLoading(false);
-        console.error(err);
-      });
-  };
-  // 获取日志
-  const doInitLog = () => {
-    setInitLoading(true);
-    getInitDBLogNew()
-      .then(res => {
-        if (res.code === 0) {
-          if (res.data.content) {
-            setInitLoading(false);
-            let arr = [];
-            arr.push(
-              res.data.content.split(/(\r\n)|(\n)/).map((item, index) => (
-                // eslint-disable-next-line react/no-danger
-                <p key={index} dangerouslySetInnerHTML={{ __html: item }} />
-              )),
-            );
-            console.log(arr);
-            setInitContent(arr);
-            scroll.current.scrollTop = scroll.current.scrollHeight;
-          }
-          if (!res.data.finish) {
-            time = setTimeout(() => {
-              doInitLog();
-            }, 600);
-          } else {
-            setInitLoading(false);
-            if (time) {
-              clearTimeout(time);
-              time = null;
-            }
-          }
-        }
-      })
-      .catch(err => {
-        setFinish(true);
-      });
-  };
-  // 数据库初始化
-  const initClick = () => {
-    setInitContent('');
-    setCardLoading(true);
-    setInitVisible(true);
-    let obj = form.getFieldsValue();
-    doInitLog();
-    initDBv4new({
-      ...obj,
-    })
-      .then(res => {
-        setCardLoading(false);
-        if (res.code == 0) {
-          console.log(res);
-        } else {
-          notification.error({
-            message: '提示',
-            duration: 15,
-            description: res.msg || '初始化失败',
-          });
-        }
-      })
-      .catch(err => {
-        setCardLoading(false);
-        console.log(err);
       });
   };
+
   const onValuesChange = (value, b) => {
     form.setFieldsValue(value);
   };
@@ -262,6 +176,7 @@ const InitDataBase = props => {
       dbName: obj.dbName,
       userName: obj.userName,
       password: pwd,
+      providerType: obj.providerType,
       desc: chooseDb.current.desc,
     })
       .then(resnew => {
@@ -291,7 +206,11 @@ const InitDataBase = props => {
       })
       .catch(err => {
         setCardLoading(false);
-        console.log(err);
+        notification.error({
+          message: '提示',
+          duration: 15,
+          description: err,
+        });
       });
   };
   // 测试连接
@@ -306,6 +225,7 @@ const InitDataBase = props => {
       ip: obj.ip,
       dbName: obj.dbName,
       userName: obj.userName,
+      providerType: obj.providerType,
       password: pwd,
     })
       .then(res => {
@@ -340,6 +260,7 @@ const InitDataBase = props => {
       userName: params.userName || '',
       password: pwd || '',
       ip: params.ip || '',
+      providerType: params.providerType || '',
     })
       .then(res => {
         if (res.code == 0) {
@@ -366,33 +287,7 @@ const InitDataBase = props => {
     chooseDb.current = item;
     form.setFieldsValue({ ...obj });
   };
-  // 产品方案选择框回调
-  const handleSelect = value => {
-    handeleChangeSQLDirName(value);
-  };
-  const handeleChangeSQLDirName = val => {
-    setTableSQLDirName({
-      dirName: val,
-    })
-      .then(res => {
-        if (res.code === 0) {
-          notification.success({
-            message: '提示',
-            duration: 3,
-            description: `已切换初始化脚本为:${val}`,
-          });
-        } else {
-          notification.error({
-            message: '提示',
-            duration: 15,
-            description: res.message,
-          });
-        }
-      })
-      .catch(err => {
-        console.error(err);
-      });
-  };
+
   // 展示修改描述
   const changeDesc = val => {
     setDesc(val);
@@ -402,300 +297,35 @@ const InitDataBase = props => {
     const { value } = e.target;
     setDesc(value);
   };
-  // 关闭弹窗
-  const handleClick = () => {
-    setInitVisible(false);
-    setInitContent('');
-    setFinish(false);
-    // deleteInitDBLog({
-    //   _version: 9999,
-    //   _dc: Date.now(),
-    // });
-    deleteInitDBLogNew();
-  };
+
   // 弹窗确认回调
   const modalOkCallback = () => {
-    const obj = form.getFieldsValue();
     // 更新描述
     updateConnDescNew({
-      ip: obj.ip,
-      dbName: obj.dbName,
-      userName: obj.userName,
-      password: obj.password,
+      ip: pickItem.ip,
+      dbName: pickItem.dbName,
+      userName: pickItem.userName,
+      password: pickItem.password,
+      providerType: pickItem.providerType,
       desc,
     })
       .then(res => {
-        handleShowModal('describeVisible', false);
-        // setUpData(upData + 1);
-        getConnRecordData();
-      })
-      .catch(err => {
-        console.error(err);
-        handleShowModal('describeVisible', false);
-      });
-  };
-  // 删除数据库连接记录
-  const delConfirm = value => {
-    const { key = '' } = value;
-    setTableLoading(true);
-    deleteConnNew({
-      rowIndex: key,
-    })
-      .then(res => {
-        setTableLoading(false);
         if (res.code === 0) {
-          // setUpData(upData + 1);
+          handleShowModal('describeVisible', false);
           getConnRecordData();
-          notification.success({
-            message: '提示',
-            duration: 3,
-            description: '操作成功',
-          });
         } else {
           notification.error({
             message: '提示',
-            duration: 15,
+            duration: 5,
             description: res.msg,
           });
         }
       })
       .catch(err => {
-        setTableLoading(false);
-        console.error(err);
+        handleShowModal('describeVisible', false);
       });
   };
 
-  const GetDb = () => {
-    let obj = form.getFieldsValue();
-    GetDbProduct({ ...obj }).then(res => {
-      if (res.code === 0) {
-        console.log(res.data);
-        if (res.data.Product) {
-          console.log(res.data.Product);
-          let aa = [];
-          res.data.Product.map(i => {
-            aa.push(i.name);
-          });
-          console.log(aa);
-          setKeep(res.data.IsAuthorize);
-          setKeepProduct(aa);
-        }
-        setDbExists(res.data.DBExists);
-        setKeepDb(res.data);
-        if (!res.data.DBExists) {
-          setVisibleModel(true);
-        } else if (res.data.DBExists && res.data.Product.length > 0) {
-          setVisibleModel(true);
-        } else {
-          notification.warning({
-            message: '提示',
-            duration: 15,
-            description: '当前数据库不可初始化',
-          });
-        }
-      } else {
-        notification.warning({
-          message: '提示',
-          duration: 15,
-          description: res.msg,
-        });
-      }
-    });
-  };
-  // 获取数据库初始化回显列表
-  const getInitList = () => {
-    setInitList([]);
-    handleShowModal('initVisible', true);
-    setInitLoading(true);
-    let obj = form.getFieldsValue();
-    let req1 = GetProductList();
-    let req2 = GetDbProduct({ ...obj });
-    Promise.all([req1, req2])
-      .then(res => {
-        if (res[1].code !== 0 || res[0].code !== 0) {
-          setInitLoading(false);
-          notification.error({
-            message: '提示',
-            duration: 3,
-            description: '连接失败',
-          });
-          return;
-        }
-        setDbExists(res[1].data.DBExists);
-        let fileList = res[0].data ? res[0].data : [];
-        let dataList = res[1].data.Product ? res[1].data.Product : [];
-        // 没有库或者dataList为[]直接用fileList作为回显
-        if (!res[1].data.DBExists || dataList.length === 0) {
-          setInitList(fileList);
-          setInitLoading(false);
-          return;
-        }
-        let mapList = new Map();
-        // 通过map给数据库中中的节点中的key的值当作key，checkVersion当作value进行存储
-        dataList.forEach(element => {
-          // 存入一级目录是否有选中项的key
-          mapList.set(element.key, element.check);
-          element.modularSolutions.forEach(item => {
-            // 存入二级目录对应的选中的checkVersion跟check
-            mapList.set(item.key, {
-              checkVersion: item.checkVersion,
-              check: item.check,
-            });
-            item.functionrSolutions.forEach(val => {
-              // 存入三级目录对应的选中的checkVersion跟check
-              mapList.set(val.key, val.isCheck);
-            });
-          });
-        });
-        console.log(mapList, 'mapList');
-        fileList.forEach(element => {
-          // 根据key来获取第一级目录tab的check
-          let tabKey = mapList.get(element.key);
-          element.check = tabKey === undefined ? null : tabKey;
-          element.modularSolutions.forEach(item => {
-            let mapCheckVersion = mapList.get(item.key);
-            if (mapCheckVersion === undefined) {
-              mapCheckVersion = { checkVersion: null, check: null };
-            }
-            // 根据key值去匹配对应的checkVersion
-            item.checkVersion =
-              mapCheckVersion.checkVersion === undefined ? null : mapCheckVersion.checkVersion;
-            // 根据key值去匹配对应的二级目录的check
-            item.check = mapCheckVersion.check === undefined ? null : mapCheckVersion.check;
-            if (item.check) {
-              item.hasCheck = true;
-            }
-            item.functionrSolutions.forEach(val => {
-              // 根据三级目录对应的选中key匹配isCheck
-              let isCheck = mapList.get(val.key);
-              val.isCheck = isCheck === undefined ? null : isCheck;
-              // 版本号低于当前版本号禁止选用
-              if (item.checkVersion && val.version < item.checkVersion) {
-                val.disabled = true;
-              } else {
-                val.disabled = false;
-              }
-            });
-          });
-        });
-        setInitList(fileList);
-        setInitLoading(false);
-      })
-      .catch(err => {
-        console.log(err, 'err');
-        notification.error({
-          message: '提示',
-          duration: 3,
-          description: '连接失败',
-        });
-        setInitLoading(false);
-      });
-  };
-  // 初始化产品列表渲染
-  const renderInitListItem = (tabItem, index) => (
-    <TabPane tab={tabItem.productName} key={index}>
-      <div className={styles.tabContainer}>
-        {tabItem.modularSolutions.map((item, num) => (
-          <React.Fragment key={item.key}>
-            {item.functionrSolutions.length > 0 ? (
-              <RadioBox
-                radioTitle={item.modularName}
-                radioOptions={item.functionrSolutions}
-                currentVal={item.checkVersion}
-                currentIndex={{ tabIndex: index, radioIndex: num }}
-                callBack={radioChange}
-              />
-            ) : null}
-          </React.Fragment>
-        ))}
-      </div>
-    </TabPane>
-  );
-  // 单选选后的回调，改变数据
-  const radioChange = (index, value) => {
-    setInitList(val => {
-      const list = JSON.parse(JSON.stringify(val));
-      const secondList = list[index.tabIndex].modularSolutions[index.radioIndex];
-      // 取消功能 一开始未选中的才能取消
-      if (value === secondList.checkVersion && !secondList.hasCheck) {
-        secondList.checkVersion = null;
-        value = null;
-        secondList.check = false;
-      } else {
-        // 修改选中的checkVersion值
-        secondList.checkVersion = value;
-        // 修改二级菜单的check字段
-        secondList.check = true;
-      }
-      // 修改一级菜单的check字段
-      list[index.tabIndex].check = !list[index.tabIndex].modularSolutions.every(
-        version => version.checkVersion === null,
-      );
-      // 修改单选isCheck字段
-      secondList.functionrSolutions.forEach(item => {
-        if (item.version === value) {
-          item.isCheck = true;
-        } else {
-          item.isCheck = false;
-        }
-      });
-      return list;
-    });
-  };
-  const onOK = (arr, code) => {
-    initDatabasePro(arr, code);
-  };
-  // 数据库初始化
-  const initDatabasePro = (e, j) => {
-    let productSetting = e;
-    let obj = form.getFieldsValue();
-    // 数据库存在调用编辑接口否则调用新增接口
-    setInitLoading(true);
-    setVisibleModel(false);
-    handleShowModal('initVisible', false);
-    setInitVisible(true);
-    doInitLog();
-    if (dbExists) {
-      InitEditDataBase({
-        ...obj,
-        productSetting,
-        license: j,
-        password: obj.password,
-      }).then(res => {
-        setInitLoading(false);
-        if (res.code === 0) {
-          notification.success({
-            message: '提示',
-            duration: 3,
-            description: '数据库初始化成功',
-          });
-        } else {
-          notification.error({
-            message: '提示',
-            duration: 5,
-            description: res.msg,
-          });
-        }
-      });
-      return;
-    }
-    InitAddDataBase({ ...obj, productSetting, license: j }).then(res => {
-      setInitLoading(false);
-      if (res.code === 0) {
-        notification.success({
-          message: '提示',
-          duration: 3,
-          description: '数据库初始化成功',
-        });
-      } else {
-        notification.error({
-          message: '提示',
-          duration: 5,
-          description: res.msg,
-        });
-      }
-    });
-  };
   const columns = [
     {
       title: '服务器名或IP地址',
@@ -703,6 +333,7 @@ const InitDataBase = props => {
       key: 'ip',
       width: 180,
       ellipsis: true,
+      align: 'center',
     },
     {
       title: '数据库名称',
@@ -710,6 +341,7 @@ const InitDataBase = props => {
       key: 'dbName',
       width: 180,
       ellipsis: true,
+      align: 'center',
     },
     {
       title: '数据库用户名称',
@@ -717,6 +349,7 @@ const InitDataBase = props => {
       key: 'userName',
       width: 180,
       ellipsis: true,
+      align: 'center',
     },
     {
       title: '保存时间',
@@ -724,12 +357,22 @@ const InitDataBase = props => {
       key: 'saveTime',
       width: 180,
       ellipsis: true,
+      align: 'center',
+    },
+    {
+      title: '数据库类型',
+      dataIndex: 'providerType',
+      key: 'providerType',
+      width: 180,
+      ellipsis: true,
+      align: 'center',
     },
     {
       title: '描述',
       dataIndex: 'desc',
       key: 'desc',
       ellipsis: true,
+      align: 'center',
     },
     {
       title: '操作',
@@ -737,64 +380,33 @@ const InitDataBase = props => {
       key: 'action',
       width: 250,
       ellipsis: true,
+      align: 'center',
       render: (text, record) => (
         <Space>
           <Button
             type="primary"
             size="small"
-            onClick={() => {
+            onClick={e => {
+              e.stopPropagation();
               changeDesc(record.desc);
+              setPickItem(record);
             }}
           >
             修改描述
           </Button>
-          {/* <div onClick={e => e.stopPropagation()}>
-            <Popconfirm
-              title="是否删除该连接的历史记录？"
-              okText="确认"
-              cancelText="取消"
-              onConfirm={() => {
-                delConfirm(record);
-              }}
-            >
-              <Button size="small" danger>
-                删除
-              </Button>
-            </Popconfirm>
-          </div> */}
         </Space>
       ),
     },
   ];
 
-  const flagChange = () => {
-    const obj = form.getFieldsValue();
-    console.log(keepData);
-    console.log(obj);
-    if (
-      keepData.ip == obj.ip &&
-      keepData.dbName == obj.dbName &&
-      keepData.userName == obj.userName &&
-      keepData.password == obj.password
-    ) {
-      GetDb();
-      deleteInitDBLogNew();
-    } else {
-      notification.warning({
-        message: '提示',
-        duration: 15,
-        description: '请先保存连接',
-      });
-    }
-  };
   return (
     <>
       <PageContainer className={styles.InitDataBaseContainer}>
-        <Card>
+        <Card className={styles.cardTop}>
           <Spin tip="loading..." spinning={cardLoading}>
             {/* <div className={styles.tableTitle}>数据库初始化</div> */}
             <Form
-              className={styles.mgTop20}
+              className={styles.cardBottom}
               layout="horizontal"
               labelAlign="left"
               labelCol={{ span: 3 }}
@@ -803,6 +415,25 @@ const InitDataBase = props => {
               onValuesChange={onValuesChange}
               autoComplete="off"
             >
+              <Form.Item
+                label="数据库类型"
+                name="providerType"
+                rules={[
+                  {
+                    validator: (rule, value) => {
+                      if (form.getFieldValue().providerType == '') {
+                        return Promise.reject('ip必填');
+                      }
+                      return Promise.resolve();
+                    },
+                  },
+                ]}
+              >
+                <Select placeholder="请选择数据库类型">
+                  <Select.Option value="SqlServer">SqlServer</Select.Option>
+                  <Select.Option value="Dm">Dm</Select.Option>
+                </Select>
+              </Form.Item>
               <Form.Item
                 label={`${formLables.ip}：`}
                 name="ip"
@@ -863,7 +494,6 @@ const InitDataBase = props => {
                 rules={[
                   {
                     validator: (rule, value) => {
-                      console.log(form.getFieldValue().dbName);
                       if (
                         form.getFieldValue().dbName == '' ||
                         form.getFieldValue().dbName == undefined
@@ -888,7 +518,6 @@ const InitDataBase = props => {
                   }}
                   // eslint-disable-next-line no-shadow
                   filterOption={(input, option) => {
-                    console.log(option);
                     return (
                       option.children &&
                       option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
@@ -913,20 +542,6 @@ const InitDataBase = props => {
                         保存连接
                       </Button>
                     </Space>
-                    <Space>
-                      {/* <Button
-                        type="primary"
-                        // onClick={() => {
-                        //   getInitList();
-                        //   deleteInitDBLogNew();
-                        // }}
-                        onClick={() => {
-                          flagChange();
-                        }}
-                      >
-                        数据库初始化
-                      </Button> */}
-                    </Space>
                   </Space>
                 </div>
               </Form.Item>
@@ -934,7 +549,7 @@ const InitDataBase = props => {
           </Spin>
         </Card>
 
-        <Card className={styles.mgTop20}>
+        <Card className={styles.cardBottom}>
           <div className={styles.recordBox}>
             <div className={styles.tableTitle}>近期保存的数据库连接</div>
             <Table
@@ -955,54 +570,6 @@ const InitDataBase = props => {
             />
           </div>
         </Card>
-        <Modal
-          title="初始化数据库"
-          visible={initVisible}
-          onCancel={() => {
-            setInitVisible(false);
-            setInitContent('');
-            // deleteInitDBLog({
-            //   _version: 9999,
-            //   _dc: Date.now(),
-            // });
-            deleteInitDBLogNew();
-          }}
-          width={800}
-          maskClosable={false}
-          bodyStyle={{
-            height: '500px',
-            // overflowY: 'auto',
-          }}
-          footer={[
-            <Button
-              onClick={() => {
-                handleClick();
-              }}
-              key="back"
-              type="primary"
-            >
-              关闭窗口
-            </Button>,
-          ]}
-        >
-          <div
-            ref={scroll}
-            style={{
-              maxHeight: '470px',
-              overflowY: 'auto',
-              marginRight: ' -24px',
-            }}
-          >
-            {initContent || (
-              <Spin
-                spinning={initLoading}
-                tip="loading..."
-                style={{ width: '100%', marginTop: '40px' }}
-              />
-            )}
-          </div>
-        </Modal>
-
         <Modal
           title="修改链接描述"
           visible={modalVisible.describeVisible}
@@ -1033,47 +600,6 @@ const InitDataBase = props => {
             </Col>
           </Row>
         </Modal>
-        <InitModal
-          visible={visibleModel}
-          onCancel={() => setVisibleModel(false)}
-          keepDb={keepDb}
-          callBackSubmit={onOK}
-          keepProduct={keepProduct}
-          keep={keep}
-        />
-        {/* 初始化选择产品弹窗 */}
-        <Modal
-          title="初始化"
-          maskClosable={false}
-          visible={modalVisible.initVisible}
-          onCancel={() => handleShowModal('initVisible', false)}
-          footer={[
-            <Button key="back" onClick={() => handleShowModal('initVisible', false)}>
-              取消
-            </Button>,
-            <Popconfirm
-              placement="topLeft"
-              title="是否确认初始化"
-              onConfirm={initDatabasePro}
-              okText="确认"
-              key="submit"
-              cancelText="取消"
-            >
-              <Button type="primary" loading={initLoading}>
-                确认
-              </Button>
-            </Popconfirm>,
-          ]}
-          width={900}
-        >
-          <Spin spinning={initLoading}>
-            <div className={styles.cardContainer}>
-              <Tabs defaultActiveKey="1" type="card" tabBarGutter={-1}>
-                {initList.map((item, index) => renderInitListItem(item, index))}
-              </Tabs>
-            </div>
-          </Spin>
-        </Modal>
       </PageContainer>
     </>
   );

src/pages/database/InitDataBase/InitDataBase.less

@@ -21,12 +21,19 @@
 }
 
 .InitDataBaseContainer {
+  width: 100%;
+  height: 100%;
+
   .ant-card-body {
     padding-bottom: 0px !important;
   }
 
-  .mgTop20 {
-    margin-top: 20px;
+  .cardTop {
+    height: 350px;
+    width: 100%;
+  }
+
+  .cardBottom {
     height: calc(100% - 350px);
   }
 

src/pages/database/databaseConfig/DatabaseConfig.jsx

-import React, { useState, useEffect } from 'react';
-import { Card, Tabs, Form, Input, Button, notification } from 'antd';
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
-import { SaveMainServer, GetMainServer, DeleteMainServer } from '@/services/database/api';
+import React, { useEffect } from 'react';
+import { Card, notification } from 'antd';
 import PageContainer from '@/components/BasePageContainer';
 import SQLServerTable from './sqlServer/SQLServerTable';
+import DmTable from './dm/DmTable';
 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 = [
-  {
-    title: 'SQLServer数据库连接',
-    key: '0',
-    component: <SQLServerTable />,
-  },
-  {
-    title: 'Oracle数据库连接',
-    key: '1',
-    component: <OracleTable />,
-  },
-  {
-    title: 'MongoDB数据库连接',
-    key: '2',
-    component: <MongDBTable />,
-  },
-  {
-    title: 'MySQL数据库连接',
-    key: '3',
-    component: <MySQLTable />,
-  },
-];
-const Hr = () => <hr style={{ width: 'calc( 100% - 40px)' }} />;
 const DatabaseConnectConfig = props => {
-  const [form] = Form.useForm();
-  const [flag, setFlag] = useState(false);
-  const [active, setActive] = useState('0');
-  const [isLink, setIsLink] = useState(false); //主站配置是否连接
-  useEffect(() => {
-    getData();
-  }, []);
-
-  const handleChange = e => {
-    setActive(e);
-  };
-  const getData = () => {
-    GetMainServer().then(res => {
-      if (res.code === 0) {
-        form.setFieldsValue({ url: res.data });
-        // if (res.data) {
-        //   setIsLink(true);
-        //   form.setFieldsValue({ url: res.data });
-        // } else {
-        //   setIsLink(false);
-        //   form.setFieldsValue({ url: window.location.origin });
-        // }
-      }
-    });
-  };
-  const deleteConfig = () => {
-    DeleteMainServer().then(res => {
-      if (res.code === 0) {
-        notification.success({ message: '提示', duration: 3, description: '删除成功' });
-        getData();
-      } else {
-        notification.error({ message: '提示', duration: 3, description: res.msg });
-      }
-    });
-  };
-  // 提交主站配置
-  const onFinish = values => {
-    console.log('Success:', values);
-    SaveMainServer(values).then(res => {
-      if (res.code === 0) {
-        notification.success({
-          message: '提示',
-          duration: 3,
-          description: '保存成功',
-        });
-        getData();
-      } else {
-        notification.error({
-          message: '提示',
-          duration: 3,
-          description: res.msg,
-        });
-      }
-    });
-  };
-
   return (
     <PageContainer>
       <div style={{ width: '100%', height: '100%', overflowY: 'scroll' }}>
         <Card>
-          {/* <Tabs activeKey={active} onChange={e => handleChange(e)}>
-          {dataArr.map(item => (
-            <TabPane tab={item.title} key={item.key}>
-              {active === item.key && item.component}
-            </TabPane>
-          ))}
-        </Tabs> */}
           <div style={{ marginBottom: '15px' }}>
             <SQLServerTable />
           </div>
+          <div style={{ marginBottom: '15px' }}>
+            <DmTable />
+          </div>
           <div style={{ marginBottom: '15px' }}>
             <OracleTable />
           </div>

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

+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Input, Select, notification } from 'antd';
+import { AddConnString, EditConnString } from '@/services/database/api';
+import CryptoJS from 'crypto-js';
+
+const { Item } = Form;
+const { Option } = Select;
+const AddModal = props => {
+  const { callBackSubmit = () => {}, type, formObj, visible } = props;
+  const [loading, setLoading] = useState(false);
+  const [form] = Form.useForm();
+
+  const key = CryptoJS.enc.Utf8.parse('1p2a3n4d5a6o7m8s9a10n1e2t3c4o5re'); // 十六位十六进制数作为密钥
+  const iv = CryptoJS.enc.Utf8.parse('1234567890000000');
+
+  // 解密
+  const Decrypt = word => {
+    let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
+    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
+    let decrypt = CryptoJS.AES.decrypt(srcs, key, {
+      iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+    return decryptedStr.toString();
+  };
+
+  // 加密
+  const Encrypt = word => {
+    let srcs = CryptoJS.enc.Utf8.parse(word);
+    let encrypted = CryptoJS.AES.encrypt(srcs, key, {
+      iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    return encrypted.ciphertext.toString().toUpperCase();
+  };
+  // 提交
+  const onSubmit = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        setLoading(true);
+        let obj = form.getFieldsValue();
+        let pwd =
+          Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+            ? Encrypt(obj.password)
+            : obj.password;
+        if (type === 'add') {
+          AddConnString({
+            ...obj,
+            type: 'dm',
+            password: pwd,
+          })
+            .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();
+    let pwd =
+      Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+        ? Encrypt(obj.password)
+        : obj.password;
+    EditConnString({
+      ...obj,
+      oldName: formObj.name,
+      type: 'dm',
+      password: pwd,
+    })
+      .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(() => {
+    switch (type) {
+      case 'add':
+        form.resetFields();
+        break;
+      case 'edit':
+        form.setFieldsValue({ ...formObj, password: formObj.password });
+        break;
+      default:
+        break;
+    }
+  }, [visible]);
+  const layout = {
+    layout: 'horizontal',
+    labelCol: {
+      span: 4,
+    },
+    wrapperCol: {
+      span: 19,
+    },
+  };
+  return (
+    <Modal
+      title={`${type === 'add' ? '添加' : '编辑'}SQL数据库配置连接`}
+      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.Password placeholder="请输入密码" allowClear />
+          </Item>
+        </Form>
+      )}
+    </Modal>
+  );
+};
+export default AddModal;

src/pages/database/databaseConfig/dm/DmTable.jsx

+import React, { useEffect, useState } from 'react';
+// import ProTable from '@ant-design/pro-table';
+import { Button, Popconfirm, notification, Table } from 'antd';
+import { GetConnString, DeleteConnString, GetConnTest } from '@/services/database/api';
+import AddModal from './AddModal';
+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);
+
+    GetConnString({
+      Type: 'Dm',
+    })
+      .then(resnew => {
+        setTableLoading(false);
+        if (resnew.code == 0) {
+          let res = resnew.data;
+          setDataList(res);
+        }
+      })
+      .catch(err => {
+        setTableLoading(false);
+      });
+  }, [flag]);
+  // 新增
+  const handleAdd = (val, item) => {
+    setType('add');
+    setVisible(true);
+  };
+  // 测试连接
+  const handleCon = (val, item) => {
+    setTableLoading(true);
+    GetConnTest({
+      Type: 'Dm',
+      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;
+    DeleteConnString({
+      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 => {
+    setVisible(false);
+    setFlag(flag + 1);
+  };
+  const columns = [
+    {
+      title: '标签',
+      dataIndex: 'name',
+      key: 'name',
+      ellipsis: true,
+    },
+    {
+      title: 'ip',
+      dataIndex: 'ip',
+      key: 'ip',
+      ellipsis: true,
+    },
+    {
+      title: '数据库名',
+      dataIndex: 'dbName',
+      key: 'dbName',
+      ellipsis: true,
+    },
+    {
+      title: '用户名',
+      dataIndex: 'userName',
+      key: 'userName',
+      ellipsis: true,
+    },
+    {
+      title: '操作',
+      dataIndex: 'options',
+      key: 'options',
+      align: 'center',
+      render: (val, item) => [
+        <Button size="small" type="primary" onClick={() => handleCon(val, item)} key="testLink">
+          测试连接
+        </Button>,
+        <Button
+          style={{
+            margin: '0 10px',
+            backgroundColor: '#fffbe6',
+            color: '#faad14',
+            borderColor: '#ffe58f',
+          }}
+          key="bntEdit"
+          size="small"
+          onClick={() => handleEdit(val, item)}
+        >
+          编辑
+        </Button>,
+        <Popconfirm
+          key="btnDelete"
+          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' }}
+        >
+          Dm数据库
+        </div>
+        <Button
+          type="primary"
+          onClick={() => {
+            handleAdd();
+          }}
+        >
+          添加连接
+        </Button>
+      </div>
+      <Table
+        rowKey="name"
+        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}
+      />
+    </>
+  );
+};
+
+export default SQLServerTable;

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

@@ -42,11 +42,15 @@ const AddModal = props => {
       if (validate) {
         setLoading(true);
         let obj = form.getFieldsValue();
+        let pwd =
+          Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+            ? Encrypt(obj.password)
+            : obj.password;
         if (type === 'add') {
           AddConnString({
             type: 'mysql',
             ...obj,
-            password: Encrypt(obj.password),
+            password: pwd,
           })
             .then(res => {
               setLoading(false);
@@ -78,11 +82,15 @@ const AddModal = props => {
   };
   const handleEdit = () => {
     let obj = form.getFieldsValue();
+    let pwd =
+      Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+        ? Encrypt(obj.password)
+        : obj.password;
     EditConnString({
       type: 'mysql',
       ...obj,
       oldName: formObj.name,
-      password: Encrypt(obj.password),
+      password: pwd,
     })
       .then(res => {
         setLoading(false);
@@ -112,7 +120,7 @@ const AddModal = props => {
           form.setFieldsValue({ port: 3306 });
           break;
         case 'edit':
-          form.setFieldsValue({ ...formObj, password: Decrypt(formObj.password) });
+          form.setFieldsValue({ ...formObj, password: formObj.password });
           if (!formObj.port) {
             form.setFieldsValue({ port: 3306 });
           }

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

@@ -42,11 +42,15 @@ const AddModal = props => {
       if (validate) {
         setLoading(true);
         let obj = form.getFieldsValue();
+        let pwd =
+          Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+            ? Encrypt(obj.password)
+            : obj.password;
         if (type === 'add') {
           AddConnString({
             ...obj,
             type: 'oracle',
-            password: Encrypt(obj.password),
+            password: pwd,
           })
             .then(res => {
               setLoading(false);
@@ -78,11 +82,15 @@ const AddModal = props => {
   };
   const handleEdit = () => {
     let obj = form.getFieldsValue();
+    let pwd =
+      Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+        ? Encrypt(obj.password)
+        : obj.password;
     EditConnString({
       type: 'oracle',
       ...obj,
       oldName: formObj.name,
-      password: Encrypt(obj.password),
+      password: pwd,
     })
       .then(res => {
         setLoading(false);
@@ -111,7 +119,7 @@ const AddModal = props => {
         form.resetFields();
         break;
       case 'edit':
-        form.setFieldsValue({ ...formObj, password: Decrypt(formObj.password) });
+        form.setFieldsValue({ ...formObj, password: formObj.password });
         break;
       default:
         break;

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

@@ -42,11 +42,15 @@ const AddModal = props => {
       if (validate) {
         setLoading(true);
         let obj = form.getFieldsValue();
+        let pwd =
+          Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+            ? Encrypt(obj.password)
+            : obj.password;
         if (type === 'add') {
           AddConnString({
             ...obj,
             type: 'sqlserver',
-            password: Encrypt(obj.password),
+            password: pwd,
           })
             .then(res => {
               setLoading(false);
@@ -78,11 +82,15 @@ const AddModal = props => {
   };
   const handleEdit = () => {
     let obj = form.getFieldsValue();
+    let pwd =
+      Decrypt(obj.password) === '' || Decrypt(obj.password).indexOf('\u0004') !== -1
+        ? Encrypt(obj.password)
+        : obj.password;
     EditConnString({
       ...obj,
       oldName: formObj.name,
       type: 'sqlserver',
-      password: Encrypt(obj.password),
+      password: pwd,
     })
       .then(res => {
         setLoading(false);
@@ -111,7 +119,7 @@ const AddModal = props => {
         form.resetFields();
         break;
       case 'edit':
-        form.setFieldsValue({ ...formObj, password: Decrypt(formObj.password) });
+        form.setFieldsValue({ ...formObj, password: formObj.password });
         break;
       default:
         break;