sqlserver数据源注册、元数据、查询、执行

dlink-core/src/main/java/com/dlink/config/Dialect.java

@@ -11,7 +11,7 @@ import com.dlink.assertion.Asserts;
 public enum  Dialect {
 
     FLINKSQL("FlinkSql"),FLINKSQLENV("FlinkSqlEnv"),SQL("Sql"),JAVA("Java"),
-    MYSQL("Mysql"),ORACLE("Oracle"),POSTGRESQL("PostGreSql"),CLICKHOUSE("ClickHouse"),
+    MYSQL("Mysql"),ORACLE("Oracle"),SQLSERVER("SqlServer"),POSTGRESQL("PostGreSql"),CLICKHOUSE("ClickHouse"),
     DORIS("Doris");
 
     private String value;
@@ -42,7 +42,7 @@ public enum  Dialect {
     public static boolean isSql(String value){
         Dialect dialect = Dialect.get(value);
         switch (dialect){
-            case SQL:case MYSQL:case ORACLE:case POSTGRESQL:case CLICKHOUSE:case DORIS:
+            case SQL:case MYSQL:case ORACLE:case SQLSERVER:case POSTGRESQL:case CLICKHOUSE:case DORIS:
                 return true;
             default:
                 return false;

dlink-web/src/components/Studio/StudioTree/components/SimpleTaskForm.tsx

@@ -51,15 +51,16 @@ const SimpleTaskForm: React.FC<UpdateFormProps> = (props) => {
           tooltip='指定作业类型，默认为 FlinkSql'
         >
           <Select defaultValue={DIALECT.FLINKSQL} value={DIALECT.FLINKSQL}>
-            <Option value={DIALECT.FLINKSQL}>FlinkSql</Option>
-            <Option value={DIALECT.FLINKSQLENV}>FlinkSql 环境</Option>
-            <Option value={DIALECT.MYSQL}>Mysql</Option>
-            <Option value={DIALECT.ORACLE}>Oracle</Option>
-            <Option value={DIALECT.POSTGRESQL}>PostGreSql</Option>
-            <Option value={DIALECT.CLICKHOUSE}>ClickHouse</Option>
-            <Option value={DIALECT.DORIS}>Doris</Option>
-            <Option value={DIALECT.JAVA}>Java</Option>
-            <Option value={DIALECT.SQL}>Sql</Option>
+            <Option value={DIALECT.FLINKSQL}>{DIALECT.FLINKSQL}</Option>
+            <Option value={DIALECT.FLINKSQLENV}>{DIALECT.FLINKSQLENV}</Option>
+            <Option value={DIALECT.MYSQL}>{DIALECT.MYSQL}</Option>
+            <Option value={DIALECT.ORACLE}>{DIALECT.ORACLE}</Option>
+            <Option value={DIALECT.SQLSERVER}>{DIALECT.SQLSERVER}</Option>
+            <Option value={DIALECT.POSTGRESQL}>{DIALECT.POSTGRESQL}</Option>
+            <Option value={DIALECT.CLICKHOUSE}>{DIALECT.CLICKHOUSE}</Option>
+            <Option value={DIALECT.DORIS}>{DIALECT.DORIS}</Option>
+            <Option value={DIALECT.JAVA}>{DIALECT.JAVA}</Option>
+            <Option value={DIALECT.SQL}>{DIALECT.SQL}</Option>
           </Select>
         </Form.Item>):undefined}
         <Form.Item

dlink-web/src/components/Studio/conf.ts

@@ -14,6 +14,7 @@ export const DIALECT = {
   SQL:'Sql',
   MYSQL:'Mysql',
   ORACLE:'Oracle',
+  SQLSERVER:'SqlServer',
   POSTGRESQL:'PostGreSql',
   CLICKHOUSE:'ClickHouse',
   DORIS:'Doris',
@@ -31,6 +32,7 @@ export const isSql = (dialect: string)=>{
     case DIALECT.SQL:
     case DIALECT.MYSQL:
     case DIALECT.ORACLE:
+    case DIALECT.SQLSERVER:
     case DIALECT.POSTGRESQL:
     case DIALECT.CLICKHOUSE:
     case DIALECT.DORIS:

dlink-web/src/pages/DataBase/DB.ts

@@ -14,6 +14,9 @@ export function getDBImage(type:string) {
     case 'clickhouse':
       imageUrl += 'clickhouse.png';
       break;
+    case 'sqlserver':
+      imageUrl += 'sqlserver.jpg';
+      break;
     default:
       imageUrl += 'db.jpg';
   }

dlink-web/src/pages/DataBase/components/DBForm.tsx

@@ -6,8 +6,8 @@ import {connect} from "umi";
 import {StateType} from "@/pages/FlinkSqlStudio/model";
 import {getDBImage} from "@/pages/DataBase/DB";
 import MysqlForm from "@/pages/DataBase/components/MySqlForm";
+import SqlServerForm from "@/pages/DataBase/components/SqlServerForm";
 import ClickHouseForm from "@/pages/DataBase/components/ClickHouseForm";
-import {handleAddOrUpdate, handleOption, postAll} from "@/components/Common/crud";
 import {createOrModifyDatabase, testDatabaseConnect} from "@/pages/DataBase/service";
 
 export type UpdateFormProps = {
@@ -30,6 +30,9 @@ const data:any = [
   {
     type: 'ClickHouse',
   },
+  {
+    type: 'SqlServer',
+  },
 ];
 
 const DBForm: React.FC<UpdateFormProps> = (props) => {
@@ -44,10 +47,10 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
   const [dbType, setDbType] = useState<string>();
 
   const chooseOne = (item:DataBaseItem)=>{
-     if((item.type!='ClickHouse')&&(item.type !='MySql')){
+     /*if((item.type!='ClickHouse')&&(item.type !='MySql')){
       message.success('敬请期待');
       return;
-    }
+    }*/
     setDbType(item.type);
   };
 
@@ -114,6 +117,17 @@ const DBForm: React.FC<UpdateFormProps> = (props) => {
           onTest(value);
         }}
       />
+      <SqlServerForm
+        onCancel={() => setDbType(undefined)}
+        modalVisible={dbType=='SqlServer'||values.type=='SqlServer'}
+        values={values}
+        onSubmit={(value) => {
+          onSubmit(value);
+        }}
+        onTest={(value) => {
+          onTest(value);
+        }}
+      />
       <ClickHouseForm
         onCancel={() => setDbType(undefined)}
         modalVisible={dbType=='ClickHouse'||values.type=='ClickHouse'}

dlink-web/src/pages/DataBase/components/SqlServerForm.tsx

+import React, {useEffect, useState} from 'react';
+import {Form, Button, Input, Space, Select} from 'antd';
+
+import Switch from "antd/es/switch";
+import TextArea from "antd/es/input/TextArea";
+import {DataBaseItem} from "@/pages/DataBase/data";
+
+
+export type SqlServerFormProps = {
+  onCancel: (flag?: boolean, formVals?: Partial<DataBaseItem>) => void;
+  onSubmit: (values: Partial<DataBaseItem>) => void;
+  onTest: (values: Partial<DataBaseItem>) => void;
+  modalVisible: boolean;
+  values: Partial<DataBaseItem>;
+};
+const Option = Select.Option;
+
+const formLayout = {
+  labelCol: {span: 7},
+  wrapperCol: {span: 13},
+};
+
+const SqlServerForm: React.FC<SqlServerFormProps> = (props) => {
+  const [formVals, setFormVals] = useState<Partial<DataBaseItem>>({
+    id: props.values.id,
+    name: props.values.name,
+    alias: props.values.alias,
+    type: "SqlServer",
+    groupName: props.values.groupName,
+    url: props.values.url,
+    username: props.values.username,
+    password: props.values.password,
+    dbVersion: props.values.dbVersion,
+    note: props.values.note,
+    enabled: props.values.enabled,
+  });
+
+  const [form] = Form.useForm();
+  const {
+    onSubmit: handleUpdate,
+    onTest: handleTest,
+    onCancel: handleModalVisible,
+    modalVisible,
+    values,
+  } = props;
+
+  const submitForm = async () => {
+    const fieldsValue = await form.validateFields();
+    setFormVals({...formVals, ...fieldsValue});
+    handleUpdate({...formVals, ...fieldsValue});
+  };
+
+  const testForm = async () => {
+    const fieldsValue = await form.validateFields();
+    setFormVals({...formVals, ...fieldsValue});
+    handleTest({...formVals, ...fieldsValue});
+  };
+
+  const onReset = () => {
+    form.resetFields();
+  };
+
+  const renderContent = (formVals) => {
+    return (
+      <>
+        <Form.Item
+          name="name"
+          label="名称"
+          rules={[{required: true, message: '请输入名称！'}]}>
+          <Input placeholder="请输入唯一英文标识"/>
+        </Form.Item>
+        <Form.Item
+          name="alias"
+          label="别名"
+        >
+          <Input placeholder="请输入别名"/>
+        </Form.Item>
+        <Form.Item
+          name="groupName"
+          label="分组类型"
+        >
+          <Select >
+            <Option value="来源">来源</Option>
+            <Option value="数仓">数仓</Option>
+            <Option value="应用">应用</Option>
+            <Option value="备份">备份</Option>
+            <Option value="其他">其他</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name="url"
+          label="url"
+        >
+          <TextArea placeholder="jdbc:sqlserver://{host}:{port};DatabaseName={database}" allowClear
+                    autoSize={{minRows: 3, maxRows: 10}}/>
+        </Form.Item>
+        <Form.Item
+          name="username"
+          label="用户名"
+        >
+          <Input/>
+        </Form.Item>
+        <Form.Item
+          name="password"
+          label="密码"
+        >
+          <Input.Password/>
+        </Form.Item>
+        <Form.Item
+          name="note"
+          label="注释"
+        >
+          <Input placeholder="请输入"/>
+        </Form.Item>
+        <Form.Item
+          name="enabled"
+          label="是否启用"
+          >
+          <Switch checkedChildren="启用" unCheckedChildren="禁用"
+                  defaultChecked={formVals.enabled}/>
+        </Form.Item>
+      </>
+    );
+  };
+
+  return (
+    <>{
+        modalVisible && (
+          <>
+            <Form
+              {...formLayout}
+              form={form}
+              initialValues={{
+                id: formVals.id,
+                name: formVals.name,
+                alias: formVals.alias,
+                type: formVals.type,
+                groupName: formVals.groupName,
+                url: formVals.url,
+                username: formVals.username,
+                password: formVals.password,
+                note: formVals.note,
+                enabled: formVals.enabled,
+              }}
+            >
+              {renderContent(formVals)}
+              <Form.Item wrapperCol={{offset: 8, span: 16}}>
+                <Space>
+                  <Button htmlType="button" onClick={()=>{
+                    handleModalVisible(false)
+                  }}>
+                    返回
+                  </Button>
+                  <Button htmlType="button" onClick={onReset}>
+                    重置
+                  </Button>
+                  <Button type="primary" htmlType="button" onClick={testForm}>
+                    测试
+                  </Button>
+                  <Button type="primary" htmlType="button" onClick={submitForm}>
+                    保存
+                  </Button>
+                </Space>
+              </Form.Item>
+            </Form>
+          </>
+        )
+      }</>
+  );
+};
+
+export default SqlServerForm;