新增数据源管理

@@ -27,9 +27,8 @@ export const refreshToken = (params) => {
 
 
 export const getSystemMenu = (params) => {
 export const getSystemMenu = (params) => {
   return request({
   return request({
-    url: `${
-      import.meta.env.VITE_APP_AUTH_URL
-    }/product-menu-permission/tenant/get-product-menu?tenantGuid=${params.tenantGuid}&platformSystemGuid=32774fcfdf5e43e8b866660374d8bced`,
+    url: `${import.meta.env.VITE_APP_AUTH_URL
+      }/product-menu-permission/tenant/get-product-menu?tenantGuid=${params.tenantGuid}&platformSystemGuid=32774fcfdf5e43e8b866660374d8bced`,
     method: "get",
     method: "get",
   });
   });
 };
 };
@@ -123,7 +122,7 @@ export const getServiceTenants = (params) => request({
 })
 })
 
 
 /** 获取会员的附件模板 */
 /** 获取会员的附件模板 */
-export const getTenantAttach = (params) =>  request({
+export const getTenantAttach = (params) => request({
   url: `${import.meta.env.VITE_APP_API_BASEURL}/attachment-template/list-attachment?tenantGuid=${params}`,
   url: `${import.meta.env.VITE_APP_API_BASEURL}/attachment-template/list-attachment?tenantGuid=${params}`,
   method: 'get'
   method: 'get'
 })
 })
@@ -145,7 +144,7 @@ export const resetUserPwd = (params) => request({
 
 
 /** ----------------- 消息管理 ------------------- */
 /** ----------------- 消息管理 ------------------- */
 /** 获取所有的消息列表 */
 /** 获取所有的消息列表 */
-export const getAllMessageList = (params) =>  request({
+export const getAllMessageList = (params) => request({
   url: `${import.meta.env.VITE_API_MESSAGE}/message/data/get-message-list`,
   url: `${import.meta.env.VITE_API_MESSAGE}/message/data/get-message-list`,
   method: 'post',
   method: 'post',
   data: params
   data: params
@@ -210,3 +209,62 @@ export const exportDictionary = (params) => request({
   data: params,
   data: params,
   responseType: 'blob'
   responseType: 'blob'
 })
 })
+
+/**
+ *  数据源管理
+**/
+// 分页查询
+export const getDataSourceList = (params) => request({
+  url: `${import.meta.env.VITE_APP_DATA_SOURCE_URL}/data-source/list`,
+  method: "post",
+  data: params,
+});
+
+// 获取数据源列表
+export const getDataSource = (params) => request({
+  url: `${import.meta.env.VITE_APP_DATA_SOURCE_URL}/data-source/get-source-list`,
+  method: "post",
+  data: params,
+});
+// 新增
+export const addDataSource = (params) => request({
+  url: `${import.meta.env.VITE_APP_DATA_SOURCE_URL}/data-source/save`,
+  method: "post",
+  data: params,
+});
+// 删除
+export const deleteDataSource = (params) => request({
+  url: `${import.meta.env.VITE_APP_DATA_SOURCE_URL}/data-source/delete`,
+  method: "delete",
+  data: params,
+});
+// 修改
+export const updateDataSource = (params) => request({
+  url: `${import.meta.env.VITE_APP_DATA_SOURCE_URL}/data-source/update`,
+  method: "put",
+  data: params,
+});
+// 查看数据源详情
+export const getDataSourceDetail = (params) => request({
+  url: `${import.meta.env.VITE_APP_DATA_SOURCE_URL}/data-source/detail/${params}`,
+  method: "get",
+});
+// 连通检测
+export const checkDataSourceConnect = (params) => request({
+  url: `${import.meta.env.VITE_APP_DATA_SOURCE_URL}/data-source/check-connect`,
+  method: "post",
+  params,
+});
+// 连接测试
+export const checkDataSourceConnectTest = (params) => request({
+  url: `${import.meta.env.VITE_APP_DATA_SOURCE_URL}/data-source/check-connect-test`,
+  method: "post",
+  data: params,
+});
+
+// 获取所有参数列表
+export const getAllFlowData = (params) => request({
+  url: `${import.meta.env.VITE_APP_CONFIG_URL}/dict/data/get-by-dictType`,
+  method: 'get',
+  params
+})

@@ -282,6 +282,27 @@ const routes: RouteRecordRaw[] = [
       },
       },
     ],
     ],
   },
   },
+  {
+    path: '/data-inventory/data-source',
+    component: Layout,
+    meta: {
+      title: '数据源管理',
+      icon: 'sidebar-videos',
+    },
+    children: [
+      {
+        path: '',
+        name: 'dataSource',
+        component: () => import('@/views/data_inventory/dataSource.vue'),
+        meta: {
+          title: '数据源管理',
+          sidebar: false,
+          breadcrumb: false,
+          cache: true
+        },
+      },
+    ],
+  },
 ]
 ]
 
 
 export default routes
 export default routes

+<route lang="yaml">
+  name: dataSource
+  </route>
+
+<script lang="ts" setup name="dataSource">
+import { ref, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import TableTools from "@/components/Tools/table_tools.vue";
+
+import {
+  addDataSource,
+  getDataSourceList,
+  deleteDataSource,
+  updateDataSource,
+  getDataSourceDetail,
+  checkDataSourceConnect,
+  checkDataSourceConnectTest,
+  getAllFlowData
+} from "@/api/modules/queryService";
+
+const { proxy } = getCurrentInstance() as any;
+
+const searchItemList = ref([
+  {
+    type: "select",
+    label: "",
+    field: "systemLayer",
+    default: "",
+    placeholder: "系统分层",
+    options: [
+      { label: "业务系统", value: "业务系统" },
+      { label: "数据中心", value: "数据中心" },
+    ],
+    clearable: true,
+  },
+  {
+    type: "select",
+    label: "",
+    field: "databaseType",
+    default: "",
+    placeholder: "库类型",
+    options: [
+      { label: "mysql", value: "mysql" },
+      { label: "doris", value: "doris" },
+      { label: "oracle", value: "oracle" },
+    ],
+    clearable: true,
+  },
+  {
+    type: "select",
+    label: "",
+    field: "connectStatus",
+    default: "",
+    placeholder: "连通状态",
+    options: [
+      { label: "已连通", value: "1" },
+      { label: "连通失败", value: "2" },
+    ],
+    clearable: true,
+  },
+  {
+    type: "input",
+    label: "",
+    field: "databaseNameZh",
+    default: "",
+    placeholder: "数据源名称",
+    clearable: true,
+  },
+  {
+    type: "input",
+    label: "",
+    field: "databaseNameEn",
+    default: "",
+    placeholder: "数据库名",
+    clearable: true,
+  },
+]);
+
+const currTableData: any = ref<Object>({});
+const page = ref({
+  limit: 50,
+  curr: 1,
+  sizes: [
+    { label: "10", value: 10 },
+    { label: "50", value: 50 },
+    { label: "100", value: 100 },
+    { label: "150", value: 150 },
+    { label: "200", value: 200 },
+  ],
+  systemLayer: '',
+  databaseType: '',
+  connectStatus: '',
+  databaseNameZh: '',
+  databaseNameEn: ''
+});
+const selectRowData = ref([]);
+const tableInfo = ref({
+  id: "data-source-table",
+  multiple: true,
+  fields: [
+    { label: "序号", type: "index", width: 56, align: "center" },
+    { label: "数据源名称", field: "databaseNameZh", width: 120 },
+    { label: "系统分层", field: "systemLayer", width: 96 },
+    { label: "库类型", field: "databaseType", width: 96 },
+    { label: "数据库名", field: "databaseNameEn", width: 200 },
+    {
+      label: "连通状态",
+      field: "connectStatus",
+      type: "tag",
+      width: 96,
+      align: "center",
+    },
+    { label: "连通时间", field: "lastCheckTime", width: 172 },
+    { label: "操作人", field: "updateUserName", width: 140 },
+    { label: "更新时间", field: "updateTime", width: 172 },
+  ],
+  data: [],
+  page: {
+    type: "normal",
+    rows: 0,
+    ...page.value,
+  },
+  actionInfo: {
+    label: "操作",
+    type: "btn",
+    width: 160,
+    btns: [
+      { label: "编辑", value: "edit" },
+      { label: "连通测试", value: "test" },
+      { label: "删除", value: "delete" },
+    ],
+  },
+  loading: false,
+});
+
+const tabActiveName = ref("1");
+const tabsInfo: any = ref({
+  type: "tabs",
+  title: "",
+  style: {
+    padding: "0 24px",
+  },
+  tabsInfo: {
+    activeName: "",
+    tabs: [
+      { label: "常规", name: "常规" },
+      // { label: "SSL", name: "SSL" }, //未支持，先隐藏掉
+      // { label: "SSH", name: "SSH" },
+      // { label: "HTTP", name: "HTTP" },
+    ],
+  },
+});
+const formItems: any = ref([]);
+const formRules: any = ref({});
+const flowList: any = ref([])
+const formInfo: any = ref({
+  type: "form",
+  title: "",
+  style: {
+    padding: "0 24px",
+    overflow: 'hidden auto'
+  },
+  formInfo: {
+    id: "add-source-form",
+    items: formItems.value,
+    rules: formRules.value,
+  },
+});
+const contents: any = ref({
+  normal: {
+    items: [
+      {
+        label: "数据源名称",
+        type: "input",
+        placeholder: "请输入",
+        field: "databaseNameZh",
+        default: "",
+        clearable: true,
+        required: true,
+      },
+      {
+        label: "系统分层",
+        type: "select",
+        placeholder: "请选择",
+        field: "systemLayer",
+        default: "",
+        options: [
+          {
+            label: "业务系统",
+            value: "业务系统",
+          },
+          {
+            label: "数据中心",
+            value: "数据中心",
+          },
+        ],
+        clearable: true,
+        required: true,
+      },
+      {
+        label: "库类型",
+        type: "select",
+        placeholder: "请选择",
+        field: "databaseType",
+        default: "",
+        options: [
+          { label: "mysql", value: "mysql" },
+          { label: "doris", value: "doris" },
+          { label: "oracle", value: "oracle" },
+        ],
+        clearable: true,
+        required: true,
+      },
+      {
+        label: "业务系统",
+        type: "select",
+        placeholder: "请选择",
+        field: "bizSystem",
+        default: "",
+        options: [],
+        clearable: true,
+        required: true,
+      },
+      {
+        label: "集群信息",
+        type: "textarea-group",
+        placeholder: "请输入",
+        field: "jqxx",
+        default: "",
+        tooltipContent:
+          "格式：doris-fe-zs.doris:8030,doris-fe-zs.doris:8090 多个地址用英文半角逗号分隔",
+        children: [
+          {
+            label: "feLoadUrl",
+            type: "textarea",
+            placeholder: "请输入",
+            field: "feLoadUrl",
+            default: "",
+            clearable: true,
+            required: true,
+            block: true,
+          },
+          {
+            label: "beLoadUrl",
+            type: "textarea",
+            placeholder: "请输入",
+            field: "beLoadUrl",
+            default: "",
+            clearable: true,
+            required: true,
+            block: true,
+          },
+          {
+            label: "dorisJdbcUrl",
+            type: "textarea",
+            placeholder: "请输入",
+            field: "dorisJdbcUrl",
+            default: "",
+            clearable: true,
+            required: true,
+            block: true,
+          },
+        ],
+        block: true,
+        visible: false,
+      },
+      {
+        label: "服务器",
+        type: "input",
+        placeholder: "请输入",
+        field: "host",
+        default: "",
+        clearable: true,
+        required: true,
+      },
+      {
+        label: "端口",
+        type: "input",
+        placeholder: "请输入",
+        field: "port",
+        default: "",
+        clearable: true,
+        required: true,
+      },
+      {
+        label: "用户名",
+        type: "input",
+        placeholder: "请输入",
+        field: "logonUser",
+        default: "",
+        clearable: true,
+        required: true,
+        autocompleteSetting: {
+          autocomplete: "off",
+          readonly: true,
+        },
+      },
+      {
+        label: "密码",
+        type: "password",
+        placeholder: "请输入",
+        field: "password",
+        default: "",
+        clearable: true,
+        required: true,
+        autocompleteSetting: {
+          autocomplete: "off",
+          readonly: true,
+        },
+      },
+      {
+        label: "数据库名",
+        type: "input",
+        placeholder: "请输入",
+        field: "databaseNameEn",
+        default: "",
+        clearable: true,
+        required: true,
+      },
+      {
+        label: "连接属性",
+        type: "textarea-tips",
+        placeholder: "请输入",
+        field: "linkage",
+        default: "",
+        tips: {
+          type: "table",
+          size: 400,
+          placement: "right",
+          offset: 12,
+          tableInfo: {
+            id: "",
+            fields: [
+              { label: "数据库", field: "jsmc", width: 120 },
+              { label: "连接属性", field: "sx", width: 200 },
+            ],
+            data: [
+              {
+                jsmc: "MYSQL8.0",
+                sx: "列出支持的连接属性,并给出解释和范例,多个属性用;分割",
+                cjsj: "2022-12-12  08:12:12",
+              },
+              {
+                jsmc: "MYSQL8.0",
+                sx: "服务器的时区:serverTimezone=Asia/Shanghai;",
+                cjsj: "2022-12-12  08:12:12",
+              },
+              {
+                jsmc: "MYSQL8.0",
+                sx: "useUnicode=utf8;",
+                cjsj: "2022-12-12  08:12:12",
+              },
+              {
+                jsmc: "MYSQL8.0",
+                sx: "characterEncoding=utf8;",
+                cjsj: "2022-12-12  08:12:12",
+              },
+              {
+                jsmc: "MYSQL8.0",
+                sx: "useSSL=false",
+                cjsj: "2022-12-12  08:12:12",
+              },
+            ],
+            showPage: false,
+            tableTool: [],
+            actionInfo: {
+              show: false,
+            },
+            btn: {
+              label: "",
+              value: "QuestionFilled",
+            },
+          },
+        },
+        clearable: true,
+        required: false,
+        block: true,
+      },
+    ],
+    rules: {
+      databaseNameZh: [
+        {
+          validator: (rule: any, value: any, callback: any) => {
+            if (value === "") {
+              callback(new Error("请填写数据源名称"));
+            } else {
+              if (
+                dialogInfo.value.type == "edit" &&
+                value == currTableData.value.databaseNameZh
+              ) {
+                callback();
+                return;
+              }
+              callback();
+              // let params: any = {
+              //   dataPermissionName: value,
+              // };
+              // if (dialogInfo.value.type == 'edit') {
+              //   params.guid = currTableData.value.guid
+              // }
+              // checkPermissionDict(params)
+              //   .then((res: any) => {
+              //     if (res.code == proxy.$passCode) {
+              //       if (res.data) {
+              //         callback(new Error("该名称已存在,请填写其他名称"));
+              //       } else {
+              //         callback();
+              //       }
+              //     } else {
+              //       callback(new Error(res.msg));
+              //     }
+              //   })
+              //   .catch((xhr) => {
+              //     callback(new Error(xhr.msg));
+              //   });
+            }
+          },
+          trigger: "blur",
+        },
+      ],
+      bizSystem: [{
+        required: true,
+        message: "请选择业务系统",
+        trigger: "change",
+      }],
+      systemLayer: [
+        {
+          required: true,
+          message: "请选择系统分层",
+          trigger: "change",
+        },
+      ],
+      databaseType: [
+        {
+          required: true,
+          message: "请选择库类型",
+          trigger: "change",
+        },
+      ],
+      host: [
+        {
+          required: true,
+          message: "请填写服务器ip地址",
+          trigger: "blur",
+        },
+      ],
+      port: [
+        {
+          required: true,
+          message: "请填写端口号",
+          trigger: "blur",
+        },
+      ],
+      logonUser: [
+        {
+          required: true,
+          message: "请填写用户名",
+          trigger: "blur",
+        },
+      ],
+      password: [
+        {
+          required: true,
+          message: "请填写密码",
+          trigger: "blur",
+        },
+      ],
+      databaseNameEn: [
+        {
+          required: true,
+          message: "请填写数据库名",
+          trigger: "blur",
+        },
+      ],
+      feLoadUrl: [
+        {
+          validator: (rule: any, value: any, callback: any) => {
+            if (value === "") {
+              callback(new Error("请填写feLoadUrl"));
+            } else {
+              if (
+                dialogInfo.value.type == "edit" &&
+                value == currTableData.value.feLoadUrl
+              ) {
+                callback();
+                return;
+              }
+              callback();
+            }
+          },
+          trigger: "blur",
+        },
+      ],
+      beLoadUrl: [
+        {
+          validator: (rule: any, value: any, callback: any) => {
+            if (value === "") {
+              callback(new Error("请填写beLoadUrl"));
+            } else {
+              if (
+                dialogInfo.value.type == "edit" &&
+                value == currTableData.value.beLoadUrl
+              ) {
+                callback();
+                return;
+              }
+              callback();
+            }
+          },
+          trigger: "blur",
+        },
+      ],
+      dorisJdbcUrl: [
+        {
+          validator: (rule: any, value: any, callback: any) => {
+            if (value === "") {
+              callback(new Error("请填写dorisJdbcUrl"));
+            } else {
+              if (
+                dialogInfo.value.type == "edit" &&
+                value == currTableData.value.dorisJdbcUrl
+              ) {
+                callback();
+                return;
+              }
+              callback();
+            }
+          },
+          trigger: "blur",
+        },
+      ],
+    },
+  },
+  ssl: {
+    items: [
+      {
+        label: "",
+        type: "checkbox",
+        col: "margin_b_0",
+        placeholder: "使用SSL",
+        field: "useSsl",
+        required: false,
+        block: true,
+      },
+      {
+        label: "",
+        type: "checkbox-panel",
+        placeholder: "使用验证",
+        field: "yz",
+        children: [
+          {
+            label: "客户端秘钥",
+            type: "file-upload",
+            placeholder: "选择文件上传",
+            field: "khdmy",
+            disabled: true,
+            required: true,
+            block: true,
+          },
+          {
+            label: "客户端证书",
+            type: "file-upload",
+            placeholder: "选择文件上传",
+            field: "khdzs",
+            disabled: true,
+            required: true,
+            block: true,
+          },
+          {
+            label: "CA证书",
+            type: "file-upload",
+            placeholder: "选择文件上传",
+            field: "cazs",
+            disabled: true,
+            required: true,
+            block: true,
+          },
+          {
+            label: "指定密码检索表",
+            type: "append-empty",
+            placeholder: "请输入",
+            field: "khdzs",
+            disabled: true,
+            required: true,
+            block: true,
+          },
+        ],
+        required: false,
+        block: true,
+      },
+    ],
+    rules: {},
+  },
+  ssh: {
+    items: [
+      {
+        label: "",
+        type: "checkbox-panel",
+        placeholder: "使用SSH",
+        field: "yz",
+        children: [
+          {
+            label: "主机名或IP地址",
+            type: "input",
+            placeholder: "请输入",
+            field: "khdmy",
+            required: false,
+            disabled: true,
+          },
+          {
+            label: "端口",
+            type: "input",
+            placeholder: "请输入",
+            field: "khdzs",
+            required: false,
+            disabled: true,
+          },
+          {
+            label: "用户名",
+            type: "input",
+            placeholder: "请输入",
+            field: "cazs",
+            required: false,
+            disabled: true,
+          },
+          {
+            label: "验证方法",
+            type: "select",
+            placeholder: "请选择",
+            field: "yzfs",
+            options: [
+              { label: "密码", value: "pwd" },
+              { label: "手机号", value: "tel" },
+            ],
+            required: false,
+            disabled: true,
+          },
+          {
+            label: "密码",
+            type: "input",
+            placeholder: "请输入",
+            field: "pwd",
+            required: false,
+            disabled: true,
+          },
+          {
+            label: "",
+            type: "checkbox",
+            placeholder: "保存密码",
+            field: "savePwd",
+            required: false,
+          },
+        ],
+        required: false,
+        block: true,
+      },
+    ],
+    rules: {},
+  },
+  http: {
+    items: [
+      {
+        label: "",
+        type: "checkbox-input",
+        placeholder: "使用HTTP通道",
+        field: "tddz",
+        children: [
+          {
+            label: "",
+            type: "input",
+            placeholder: "通道地址",
+            field: "khdmy",
+            required: false,
+            disabled: true,
+          },
+        ],
+        block: true,
+      },
+      {
+        label: "",
+        type: "tabs-panel-card",
+        placeholder: "用base64编码传出查询",
+        field: "basebm",
+        tabsInfo: {
+          type: "card",
+          activeName: "yz",
+          col: "border",
+          tabs: [
+            {
+              label: "验证",
+              name: "yz",
+              pane: {
+                type: "form",
+                title: "",
+                formInfo: {
+                  id: "",
+                  items: [
+                    {
+                      label: "",
+                      type: "checkbox-panel",
+                      col: "margin_b_0 border_none col_3",
+                      placeholder: "使用密码验证",
+                      field: "mmyz",
+                      children: [
+                        {
+                          label: "",
+                          type: "input",
+                          placeholder: "用户名",
+                          field: "cazs",
+                          required: false,
+                          disabled: true,
+                        },
+                        {
+                          label: "",
+                          type: "input",
+                          placeholder: "密码",
+                          field: "pwd",
+                          required: false,
+                          disabled: true,
+                        },
+                        {
+                          label: "",
+                          type: "checkbox",
+                          placeholder: "保存密码",
+                          field: "savePwd",
+                          required: false,
+                        },
+                      ],
+                      required: false,
+                      block: true,
+                    },
+                    {
+                      label: "",
+                      type: "checkbox-panel",
+                      col: "border_none",
+                      placeholder: "使用证书验证",
+                      field: "zsyz",
+                      children: [
+                        {
+                          label: "客户端秘钥",
+                          type: "file-upload",
+                          placeholder: "选择文件上传",
+                          field: "khdmy",
+                          disabled: true,
+                          required: true,
+                          block: true,
+                        },
+                        {
+                          label: "客户端证书",
+                          type: "file-upload",
+                          placeholder: "选择文件上传",
+                          field: "khdzs",
+                          disabled: true,
+                          required: true,
+                          block: true,
+                        },
+                        {
+                          label: "CA证书",
+                          type: "file-upload",
+                          placeholder: "选择文件上传",
+                          field: "cazs",
+                          disabled: true,
+                          required: true,
+                          block: true,
+                        },
+                        {
+                          label: "密码短语",
+                          type: "append-empty",
+                          placeholder: "请输入",
+                          field: "khdzs",
+                          disabled: true,
+                          required: true,
+                          block: true,
+                        },
+                      ],
+                      required: false,
+                      block: true,
+                    },
+                  ],
+                },
+              },
+            },
+            {
+              label: "代理服务器",
+              name: "dl",
+              pane: {
+                type: "form",
+                title: "",
+                formInfo: {
+                  id: "",
+                  items: [
+                    {
+                      label: "",
+                      type: "checkbox-panel",
+                      col: "border_none",
+                      placeholder: "使用代理服务器",
+                      field: "yz",
+                      children: [
+                        {
+                          label: "主机名或IP地址",
+                          type: "input",
+                          placeholder: "请输入",
+                          field: "khdmy",
+                          required: false,
+                          disabled: true,
+                        },
+                        {
+                          label: "端口",
+                          type: "input",
+                          placeholder: "请输入",
+                          field: "khdzs",
+                          required: false,
+                          disabled: true,
+                        },
+                        {
+                          label: "用户名",
+                          type: "input",
+                          placeholder: "请输入",
+                          field: "cazs",
+                          required: false,
+                          disabled: true,
+                        },
+                        {
+                          label: "验证方法",
+                          type: "select",
+                          placeholder: "请选择",
+                          field: "yzfs",
+                          options: [
+                            { label: "密码", value: "pwd" },
+                            { label: "手机号", value: "tel" },
+                          ],
+                          required: false,
+                          disabled: true,
+                        },
+                        {
+                          label: "密码",
+                          type: "input",
+                          placeholder: "请输入",
+                          field: "pwd",
+                          required: false,
+                          disabled: true,
+                        },
+                        {
+                          label: "",
+                          type: "checkbox",
+                          placeholder: "保存密码",
+                          field: "savePwd",
+                          required: false,
+                        },
+                      ],
+                      required: false,
+                      block: true,
+                    },
+                  ],
+                },
+              },
+            },
+          ],
+        },
+        children: [
+          {
+            label: "主机名或IP地址",
+            type: "input",
+            placeholder: "请输入",
+            field: "khdmy",
+            required: false,
+          },
+          {
+            label: "端口",
+            type: "input",
+            placeholder: "请输入",
+            field: "khdzs",
+            required: false,
+          },
+          {
+            label: "用户名",
+            type: "input",
+            placeholder: "请输入",
+            field: "cazs",
+            required: false,
+          },
+          {
+            label: "验证方法",
+            type: "select",
+            placeholder: "请选择",
+            field: "yzfs",
+            default: "pwd",
+            options: [
+              { label: "密码", value: "pwd" },
+              { label: "手机号", value: "tel" },
+            ],
+            required: false,
+          },
+          {
+            label: "密码",
+            type: "input",
+            placeholder: "请输入",
+            field: "pwd",
+            required: false,
+          },
+          {
+            label: "",
+            type: "checkbox",
+            placeholder: "保存密码",
+            field: "savePwd",
+            required: false,
+          },
+        ],
+        required: false,
+        block: true,
+      },
+    ],
+    rules: {},
+  },
+});
+
+const dialogRef = ref();
+const dialogInfo = ref({
+  visible: false,
+  size: 700,
+  direction: "column",
+  height: '440px',
+  header: {
+    title: "",
+  },
+  type: "",
+  readonly: false,
+  contents: [],
+  footer: {
+    btns: [
+      { type: "default", label: "取消", value: "cancel" },
+      { type: "primary", label: "确定", value: "submit" },
+    ],
+    textBtns: [{ type: "primary", label: "连通测试", value: "connect" }],
+  },
+});
+
+const setFormItems = (name, info: any = null) => {
+  let contentFormInfo: any = {};
+  if (name == "常规") {
+    tabActiveName.value = "1";
+    contentFormInfo = contents.value["normal"];
+  } else if (name == "SSL") {
+    tabActiveName.value = "2";
+    contentFormInfo = contents.value["ssl"];
+  } else if (name == "SSH") {
+    tabActiveName.value = "3";
+    contentFormInfo = contents.value["ssh"];
+  } else if (name == "HTTP") {
+    tabActiveName.value = "4";
+    contentFormInfo = contents.value["http"];
+  }
+
+  tabsInfo.value.tabsInfo.activeName = name;
+  formItems.value = contentFormInfo.items;
+  formRules.value = contentFormInfo.rules;
+
+  if (info !== null) {
+    const type = dialogInfo.value.type;
+    formItems.value.map((item) => {
+      if (
+        item.field == "host" ||
+        item.field == "port" ||
+        item.field == "logonUser" ||
+        item.field == "password"
+      ) {
+        if (type == "edit" || type == "detail") {
+          item.default = info?.[item.field] ?? "";
+        } else {
+          item.default = info[item.field] ?? "";
+        }
+        if (item.field == "logonUser" || item.field == "password") {
+          item.autocompleteSetting.readonly = true;
+        }
+      } else if (item.field == "jqxx") {
+        item.visible = info.databaseType == "doris";
+        item.children.map((child) => {
+          if (type == 'edit' || type == 'detail') {
+            child.default = info?.[child.field] ?? "";
+          } else {
+            child.default = info[child.field] ?? "";
+          }
+        });
+      } else if (item.field == 'bizSystem') {
+        item.visible = info.systemLayer == '业务系统';
+        item.default = info[item.field] || "";
+      }
+      else {
+        item.default = info[item.field] || "";
+      }
+    });
+  } else {
+    formItems.value.map((item) => {
+      if (item.field == "logonUser" || item.field == "password") {
+        item.autocompleteSetting.readonly = true;
+      }
+    });
+  }
+
+  formInfo.value.formInfo.items = formItems.value;
+  formInfo.value.formInfo.rules = formRules.value;
+
+  const content: any = [tabsInfo.value, formInfo.value];
+  dialogInfo.value.contents = content;
+};
+
+const getFirstPageData = () => {
+  page.value.curr = 1;
+  getTableData();
+};
+onMounted(() => {
+  getAllFlowData({ dictType: "业务系统" }).then((res) => {
+    flowList.value = res.data
+    contents.value.normal.items[3].options = flowList.value
+  })
+})
+const toSearch = (val: any, clear: boolean = false) => {
+  if (clear) {
+    searchItemList.value.map((item) => (item.default = ""));
+    page.value.systemLayer = "";
+    page.value.databaseType = "";
+    page.value.connectStatus = "";
+    page.value.databaseNameZh = "";
+    page.value.databaseNameEn = "";
+  } else {
+    page.value.systemLayer = val.systemLayer;
+    page.value.databaseType = val.databaseType;
+    page.value.connectStatus = val.connectStatus;
+    page.value.databaseNameZh = val.databaseNameZh;
+    page.value.databaseNameEn = val.databaseNameEn;
+  }
+  getTableData();
+};
+
+const getTableData = () => {
+  tableInfo.value.loading = true;
+  getDataSourceList({
+    pageIndex: page.value.curr,
+    pageSize: page.value.limit,
+    systemLayer: page.value.systemLayer,
+    databaseType: page.value.databaseType,
+    connectStatus: page.value.connectStatus,
+    databaseNameZh: page.value.databaseNameZh,
+    databaseNameEn: page.value.databaseNameEn
+  })
+    .then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        const data = res.data || {};
+        tableInfo.value.data = data.records || [];
+        tableInfo.value.page.limit = data.pageSize;
+        tableInfo.value.page.curr = data.pageIndex;
+        tableInfo.value.page.rows = data.totalRows;
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+      }
+      tableInfo.value.loading = false;
+    })
+    .catch((xhr) => {
+      tableInfo.value.loading = false;
+    });
+};
+
+const tableSelectionChange = (val) => {
+  selectRowData.value = val.map((item) => item.guid);
+};
+
+const tablePageChange = (info) => {
+  page.value.curr = Number(info.curr);
+  page.value.limit = Number(info.limit);
+  getTableData();
+};
+
+const tabChange = (tabName) => {
+  // TODO.等添加了tab切换之后再保留旧值.
+  setFormItems(tabName);
+};
+
+/** 表单修改时的原始值 */
+const originValue: any = ref({});
+
+const formSelectChange = (val, row, info) => {
+  console.log(row, info)
+  if (row.field == "databaseType" || row.field == 'systemLayer') {
+    if (tabsInfo.value.tabsInfo.activeName == "常规") {
+      let newInfo = originValue.value = Object.assign(originValue.value, info);
+      setFormItems("常规", newInfo);
+    }
+  }
+};
+
+const tableBtnClick = (scope, btn) => {
+  const type = btn.value;
+  const row = scope.row;
+  currTableData.value = row;
+  if (type == "edit") {
+    dialogInfo.value.type = type;
+    dialogInfo.value.header.title = "编辑数据源";
+    const guid = row.guid;
+    getDataSourceDetail(guid).then((res: any) => {
+      if (res.code == proxy.$passCode && res.data) {
+        const data = res.data;
+        currTableData.value = data;
+        setDetailInfo();
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+      }
+    });
+  } else if (type == "test") {
+    checkConnect({});
+  } else if (type == "delete") {
+    open("此操作将永久删除, 是否继续?", "warning");
+  }
+};
+
+const open = (msg, type, isBatch = false) => {
+  ElMessageBox.confirm(msg, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: type,
+  }).then(() => {
+    let guids = [currTableData.value.guid];
+    if (isBatch) {
+      guids = selectRowData.value;
+    }
+    deleteDataSource(guids).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        getTableData();
+        ElMessage({
+          type: "success",
+          message: "删除成功",
+        });
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+      }
+    });
+  });
+};
+
+const setDetailInfo = async () => {
+  let info = Object.assign({}, currTableData.value, currTableData.value.dataConfigure || {});
+  let newInfo = originValue.value = Object.assign(originValue.value, info);
+  setFormItems("常规", newInfo);
+  dialogInfo.value.visible = true;
+};
+
+const checkConnect = (val) => {
+  let params = { guid: currTableData.value.guid };
+  checkDataSourceConnect(params).then((res: any) => {
+    if (res.code == proxy.$passCode && res.data && res.data == "1") {
+      getTableData();
+      ElMessage({
+        type: "success",
+        message: "连通成功",
+      });
+    } else {
+      getTableData();
+      ElMessage({
+        type: "error",
+        message: "连通失败",
+      });
+    }
+  });
+};
+
+const loadDialog = async () => {
+  dialogInfo.value.type = "add";
+  dialogInfo.value.header.title = "添加数据源";
+  originValue.value = {};
+  setFormItems("常规", {});
+  dialogInfo.value.visible = true;
+};
+
+const batching = (type) => {
+  if (type == "delete") {
+    if (selectRowData.value.length == 0) {
+      ElMessage({
+        type: "error",
+        message: "请选择需要删除的数据",
+      });
+      return;
+    }
+    open("此操作将永久删除, 是否继续?", "warning", true);
+  }
+};
+
+const dialogBtnClick = (btn, info) => {
+  if (btn.value == "submit") {
+    // dialogInfo.value.footer.btns.map((item: any) => item.disabled = true)
+    const params = { ...info };
+    delete params.host;
+    delete params.port;
+    delete params.logonUser;
+    delete params.password;
+    delete params.feLoadUrl;
+    delete params.beLoadUrl;
+    delete params.dorisJdbcUrl;
+    params.dataConnectionContract = tabActiveName.value;
+    if (dialogInfo.value.type == "add") {
+      params.dataConfigureAddDTO = {
+        host: info.host,
+        port: info.port,
+        logonUser: info.logonUser,
+        password: info.password,
+        feLoadUrl: info.feLoadUrl,
+        beLoadUrl: info.beLoadUrl,
+        dorisJdbcUrl: info.dorisJdbcUrl
+      };
+      addDataSource(params)
+        .then((res: any) => {
+          if (res.code == proxy.$passCode) {
+            getFirstPageData();
+            ElMessage({
+              type: "success",
+              message: "添加数据源成功",
+            });
+            dialogInfo.value.visible = false;
+          } else {
+            ElMessage({
+              type: "error",
+              message: res.msg,
+            });
+            // dialogInfo.value.footer.btns.map((item: any) => delete item.disabled)
+          }
+        })
+        .catch(() => {
+          // dialogInfo.value.footer.btns.map((item: any) => delete item.disabled)
+        });
+    } else {
+      params.dataConfigureUpdateDTO = {
+        guid: currTableData.value.dataConfigure.guid,
+        host: info.host,
+        port: info.port,
+        logonUser: info.logonUser,
+        password:
+          info.password == "******"
+            ? currTableData.value.dataConfigure.password
+            : info.password,
+        feLoadUrl: info.feLoadUrl,
+        beLoadUrl: info.beLoadUrl,
+        dorisJdbcUrl: info.dorisJdbcUrl
+      };
+      params.guid = currTableData.value.guid;
+      updateDataSource(params)
+        .then((res: any) => {
+          if (res.code == proxy.$passCode) {
+            getTableData();
+            ElMessage({
+              type: "success",
+              message: "修改数据源成功",
+            });
+            dialogInfo.value.visible = false;
+          } else {
+            ElMessage({
+              type: "error",
+              message: res.msg,
+            });
+          }
+          // dialogInfo.value.footer.btns.map((item: any) => delete item.disabled)
+        })
+        .catch(() => {
+          // dialogInfo.value.footer.btns.map((item: any) => delete item.disabled)
+        });
+    }
+  } else if (btn.value == "connect") {
+    const params = {
+      databaseType: info.databaseType,
+      databaseNameEn: info.databaseNameEn,
+      host: info.host,
+      port: info.port,
+      logonUser: info.logonUser,
+      password: info.password,
+      linkage: info.linkage,
+    };
+    checkDataSourceConnectTest(params).then((res: any) => {
+      if (res.code == proxy.$passCode) {
+        if (res.data && res.data == "1") {
+          ElMessage({
+            type: "success",
+            message: "连通成功",
+          });
+        } else {
+          ElMessage({
+            type: "error",
+            message: "连通失败",
+          });
+        }
+      } else {
+        ElMessage({
+          type: "error",
+          message: res.msg,
+        });
+      }
+    });
+  } else if (btn.value == "cancel") {
+    // dialogInfo.value.footer.btns.map((item: any) => delete item.disabled)
+    nextTick(() => {
+      dialogInfo.value.visible = false;
+    });
+  }
+};
+</script>
+
+<template>
+  <div class="container_wrap">
+    <div class="table_tool_wrap has_search">
+      <TableTools :searchItems="searchItemList" :searchId="'data-source-search'" @search="toSearch" />
+      <div class="tools_btns">
+        <el-button type="primary" @click="loadDialog" v-preReClick>新建</el-button>
+        <el-button @click="batching('delete')" v-preReClick>批量删除</el-button>
+      </div>
+    </div>
+    <div class="table_panel_wrap">
+      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange"
+        @tableSelectionChange="tableSelectionChange" />
+    </div>
+
+    <Dialog ref="dialogRef" :dialogInfo="dialogInfo" @btnClick="dialogBtnClick" @tableBtnClick="tableBtnClick"
+      @selectChange="formSelectChange" @tabChange="tabChange" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container_wrap {
+  overflow: hidden auto;
+}
+
+.table_tool_wrap {
+  width: 100%;
+  height: 84px !important;
+  padding: 0 8px;
+
+  .tools_btns {
+    padding: 8px 0 0;
+  }
+}
+
+.table_panel_wrap {
+  width: 100%;
+  height: calc(100% - 84px);
+  padding: 8px 8px 0;
+}
+</style>