数据源 页面初版代码提交

src/api/system/dataSource/dataSource.ts

+import {dataSourceListData} from "@/views/dataSourceManage/dataSource/dataSourceData";
+import {connectListData} from "@/views/dataSourceManage/connect/connectData";
+
+/** 获取数据源列表信息*/
+export const getDataSourceListByPage = (params?: any) => {
+  console.log("数据源-连接列表查询参数:", params)
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const start = (params.page - 1) * params.pageSize
+      const end = start + params.pageSize
+      const response = {
+        pageNum: params.page, // 页码
+        pageSize: params.pageSize, // 每页大小
+        pages: 1, // 总页数
+        total: dataSourceListData.length, // 总记录数
+        code: 200, // 假设 0 表示成功
+        message: 'success', // 成功的消息
+        data: dataSourceListData.slice(start, end) // 模拟分页，只取前10条数据
+      };
+      resolve(response); // 解析 Promise
+    }, Math.floor(Math.random() * 1500) + 1); // 随机延迟1到1500毫秒
+  });
+};
+
+/** 根据 数据源id 删除*/
+export const deleteById = (params?: any) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const response = {
+        code: 200, // 假设 0 表示成功
+        message: 'success', // 成功的消息
+        data: []
+      };
+      resolve(response); // 解析 Promise
+    }, Math.floor(Math.random() * 1000) + 1); // 随机延迟1到1500毫秒
+  });
+};
+
+
+/** 新增 数据源 */
+export const addDataSource = (params?: any) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const response = {
+        code: 200, // 假设 0 表示成功
+        message: 'success', // 成功的消息
+        data: []
+      };
+      resolve(response); // 解析 Promise
+    }, Math.floor(Math.random() * 1000) + 1); // 随机延迟1到1500毫秒
+  });
+};
+
+/** 修改 数据源 */
+export const updateDataSource = (params?: any) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const response = {
+        code: 200, // 假设 0 表示成功
+        message: 'success', // 成功的消息
+        data: []
+      };
+      resolve(response); // 解析 Promise
+    }, Math.floor(Math.random() * 1000) + 1); // 随机延迟1到1500毫秒
+  });
+};
+
+/** 根据数据源连接类型查找对应的连接 */
+export const findConnectByDataSource = (params?: any) => {
+  return new Promise((resolve) => {
+    const connectInfo = connectListData.find(item => item.connectType === params?.connectType);
+    setTimeout(() => {
+      const response = {
+        code: 200, // 假设 0 表示成功
+        message: 'success', // 成功的消息
+        data: connectInfo
+      };
+      resolve(response); // 解析 Promise
+    }, Math.floor(Math.random() * 1000) + 1); // 随机延迟1到1500毫秒
+  });
+};

src/views/dataSourceManage/connect/ConnectModal.vue

+<template>
+  <!-- 数据源-连接-新增或修改 抽屉 -->
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    showFooter
+    :title="getTitle"
+    width="500px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm"/>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {ref} from 'vue';
+import {BasicForm, useForm} from '@/components/Form';
+import {useModalInner} from '@/components/Modal';
+import BasicModal from '@/components/Modal/src/BasicModal.vue';
+import {useMessage} from "@/hooks/web/useMessage";
+import {formSchema} from "@/views/dataSourceManage/connect/connect.data";
+import {findConnectByDataSource} from "@/api/system/dataSource/dataSource";
+
+defineOptions({name: 'ConnectDrawer'});
+const emit = defineEmits(['success', 'register']);
+const {createMessage} = useMessage();
+const handleType = ref('view')
+
+// 初始化弹窗
+const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+  handleType.value = data?.handleType
+  resetFields();
+  setModalProps({loading: true, confirmLoading: true});
+  const connectInfo = await findConnectByDataSource(data?.record)
+  setModalProps({loading: false, confirmLoading: false});
+  setFieldsValue({
+    ...connectInfo?.data, hdfsMap: 'hdfs'
+  });
+  // 更新表单的 disabled 属性
+  setProps({disabled: data?.handleType === 'view'})
+});
+
+const [registerForm, {resetFields, setFieldsValue, validate, setProps}] = useForm({
+  labelWidth: 90,
+  baseColProps: {span: 24},
+  schemas: formSchema,
+  showActionButtonGroup: false,
+  disabled: handleType.value === 'view',
+});
+
+const getTitle = ref('查看连接');
+
+/** 确认按钮 */
+function handleSubmit() {
+  closeModal()
+}
+</script>

src/views/dataSourceManage/connect/connect.data.ts

 import {BasicColumn, FormSchema} from "@/components/Table";
-import {getDriveListByPage} from "@/api/system/driveManage/driveManage";
 
 // 搜索栏参数
 export const searchFormSchema: FormSchema[] = [
@@ -9,7 +8,7 @@ export const searchFormSchema: FormSchema[] = [
     componentProps: {
       placeholder: '输入关键字搜索',
     },
-    colProps: { span: 7 },
+    colProps: {span: 7},
   },
 ];
 
@@ -58,12 +57,13 @@ export const columns: BasicColumn[any] = [
 ];
 
 // 表单表头
-export const formSchema: FormSchema[] = [
+export const formSchema: FormSchema[any] = [
   {
     field: 'connectName',
     label: '连接名称',
     component: 'Input',
     required: true,
+    disabled: ({ mergeDynamicData }) => mergeDynamicData.idDisabled,
   },
   {
     field: 'connectType',
@@ -72,36 +72,36 @@ export const formSchema: FormSchema[] = [
     required: true,
     componentProps: {
       options: [
-        { label: 'Inceptor', value: '0' },
-        { label: 'Teradata', value: '1' },
-        { label: 'ArgoDB', value: '2' },
-        { label: 'Mysql', value: '3' },
-        { label: 'Oracle', value: '4' },
-        { label: 'HDFS', value: '5' },
-        { label: 'Hbase', value: '6' },
-        { label: 'Hyperbase', value: '7' },
-        { label: 'Impala', value: '8' },
-        { label: 'DB2', value: '9' },
-        { label: 'SQLServer', value: '10' },
-        { label: 'Hive', value: '11' },
-        { label: 'KunDB', value: '12' },
-        { label: '达梦', value: '13' },
-        { label: 'HANA', value: '14' },
-        { label: 'Postgres', value: '15' },
-        { label: 'FTP', value: '16' },
-        { label: 'SFTP', value: '17' },
-        { label: 'Kingbase', value: '18' },
-        { label: 'Gbase', value: '19' },
-        { label: 'Greenplum', value: '20' },
-        { label: 'Trino', value: '21' },
-        { label: 'MongoDB', value: '22' },
-        { label: 'OceanBase', value: '23' },
-        { label: 'AS400', value: '23' },
-        { label: '自定义', value: '24' },
-        { label: 'Kafka', value: '25' },
-        { label: 'Clickhouse', value: '26' },
-        { label: 'S3', value: '27' },
-        { label: 'Timelyre', value: '28' },
+        {label: 'Inceptor', value: '0'},
+        {label: 'Teradata', value: '1'},
+        {label: 'ArgoDB', value: '2'},
+        {label: 'Mysql', value: '3'},
+        {label: 'Oracle', value: '4'},
+        {label: 'HDFS', value: '5'},
+        {label: 'Hbase', value: '6'},
+        {label: 'Hyperbase', value: '7'},
+        {label: 'Impala', value: '8'},
+        {label: 'DB2', value: '9'},
+        {label: 'SQLServer', value: '10'},
+        {label: 'Hive', value: '11'},
+        {label: 'KunDB', value: '12'},
+        {label: '达梦', value: '13'},
+        {label: 'HANA', value: '14'},
+        {label: 'Postgres', value: '15'},
+        {label: 'FTP', value: '16'},
+        {label: 'SFTP', value: '17'},
+        {label: 'Kingbase', value: '18'},
+        {label: 'Gbase', value: '19'},
+        {label: 'Greenplum', value: '20'},
+        {label: 'Trino', value: '21'},
+        {label: 'MongoDB', value: '22'},
+        {label: 'OceanBase', value: '23'},
+        {label: 'AS400', value: '23'},
+        {label: '自定义', value: '24'},
+        {label: 'Kafka', value: '25'},
+        {label: 'Clickhouse', value: '26'},
+        {label: 'S3', value: '27'},
+        {label: 'Timelyre', value: '28'},
       ],
       defaultValue: '0',
     },
@@ -113,9 +113,9 @@ export const formSchema: FormSchema[] = [
     required: true,
     componentProps: {
       options: [
-        { label: '在线采集', value: '0' },
-        { label: '离线采集', value: '1' },
-        { label: '不采集', value: '2' },
+        {label: '在线采集', value: '0'},
+        {label: '离线采集', value: '1'},
+        {label: '不采集', value: '2'},
       ],
       defaultValue: '0',
     },
@@ -127,18 +127,18 @@ export const formSchema: FormSchema[] = [
     required: true,
     componentProps: {
       options: [
-        { label: 'oracle11', value: 'oracle11' },
-        { label: 'mysql8', value: 'mysql8' },
-        { label: 'postgresql42', value: 'postgresql42' },
-        { label: 'sqlserver4', value: 'sqlserver4' },
-        { label: 'sqlite3', value: 'sqlite3' },
-        { label: 'hive', value: 'hive' },
-        { label: 'mongodb', value: 'mongodb' },
-        { label: 'redis', value: 'redis' },
-        { label: 'elasticsearch', value: 'elasticsearch' },
-        { label: 'cassandra', value: 'cassandra' },
-        { label: 'derby', value: 'derby' },
-        { label: 'neo4j', value: 'neo4j' },
+        {label: 'oracle11', value: 'oracle11'},
+        {label: 'mysql8', value: 'mysql8'},
+        {label: 'postgresql42', value: 'postgresql42'},
+        {label: 'sqlserver4', value: 'sqlserver4'},
+        {label: 'sqlite3', value: 'sqlite3'},
+        {label: 'hive', value: 'hive'},
+        {label: 'mongodb', value: 'mongodb'},
+        {label: 'redis', value: 'redis'},
+        {label: 'elasticsearch', value: 'elasticsearch'},
+        {label: 'cassandra', value: 'cassandra'},
+        {label: 'derby', value: 'derby'},
+        {label: 'neo4j', value: 'neo4j'},
       ],
       defaultValue: 'hive',
     },
@@ -159,8 +159,8 @@ export const formSchema: FormSchema[] = [
     required: true,
     componentProps: {
       options: [
-        { label: '开启', value: '0' },
-        { label: '关闭', value: '1' },
+        {label: '开启', value: '0'},
+        {label: '关闭', value: '1'},
       ],
       defaultValue: '0',
     },
@@ -172,11 +172,11 @@ export const formSchema: FormSchema[] = [
     required: true,
     componentProps: {
       options: [
-        { label: 'None', value: 'None' },
-        { label: 'Kerberos', value: 'Kerberos' },
-        { label: 'LDAP', value: 'LDAP' },
-        { label: 'Access Token', value: 'AccessToken' },
-        { label: 'Password', value: 'Password' },
+        {label: 'None', value: 'None'},
+        {label: 'Kerberos', value: 'Kerberos'},
+        {label: 'LDAP', value: 'LDAP'},
+        {label: 'Access Token', value: 'AccessToken'},
+        {label: 'Password', value: 'Password'},
       ],
       defaultValue: 'None',
     },
@@ -188,8 +188,14 @@ export const formSchema: FormSchema[] = [
     required: true,
     componentProps: {
       options: [
-        { label: 'hive', value: 'hive' },
+        {label: 'hive', value: 'hive'},
       ],
     },
   },
+  // {
+  //   field: 'authString',
+  //   label: '系统库权限提示',
+  //   component: 'Input',
+  //   required: true,
+  // },
 ]

src/views/dataSourceManage/connect/connectData.ts

@@ -251,5 +251,23 @@ export const connectListData: any[] = [
     "createDate": "2024-11-05 22:16:16",
     "updateBy": "admin",
     "updateDate": "2024-11-05 22:16:16"
+  },
+  {
+    "id": 16,
+    "connectName": "kundb",
+    "connectString": "jdbc:kun://172.26.0.96:5432/kundb",
+    "connectType": "KUNDB",
+    "authStatus": "可连接",
+    "foundDataSource": 4,
+    "executionState": "执行成功",
+    "collectionType": "详细元数据",
+    "isPeriodicCheck": "0",
+    "driveVersion": "kun",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-11-06 14:30:00",
+    "updateBy": "admin",
+    "updateDate": "2024-11-06 14:30:00"
   }
 ];

src/views/dataSourceManage/connect/index.vue

@@ -61,16 +61,12 @@
   <ConnectDrawer @register="registerConnectDrawer" @success="handleSuccess"/>
 </template>
 <script lang="ts" setup>
-import {reactive, unref, onDeactivated, onMounted, ref} from 'vue';
+import {ref} from 'vue';
 import {PageWrapper} from '@/components/Page';
 import {BasicTable, useTable, TableAction} from '@/components/Table';
 import {useMessage} from '@/hooks/web/useMessage';
 import {useModal} from '@/components/Modal';
 import {useDrawer} from '@/components/Drawer';
-import {useGo} from '@/hooks/web/usePage';
-import {useRoute, onBeforeRouteLeave} from 'vue-router';
-import {useFilterStore} from '@/store/modules/filterData';
-import {useUserStore} from "@/store/modules/user";
 import KrbFiveModal from "@/views/dataSourceManage/driveManage/KrbFiveModal.vue";
 import DriveModal from "@/views/dataSourceManage/driveManage/DriveModal.vue";
 import {columns, searchFormSchema} from "@/views/dataSourceManage/connect/connect.data";
@@ -82,9 +78,6 @@ const [registerDriveModal, {openModal: openDriveModal}] = useModal();
 const [registerConnectDrawer, {openDrawer: openConnectDrawer}] = useDrawer();
 const {createMessage} = useMessage();
 const isUpdate = ref(true);
-const filterStore = useFilterStore();
-const route = useRoute();
-const go = useGo();
 
 const [registerTable, {reload, getForm}] = useTable({
   api: getConnectListByPage,
@@ -101,7 +94,6 @@ const [registerTable, {reload, getForm}] = useTable({
     width: 200,
     title: '操作',
     dataIndex: 'action',
-    // slots: { customRender: 'action' },
     fixed: undefined,
   },
 });
@@ -133,10 +125,10 @@ function handleAdd() {
 
 /** 重命名 按钮 */
 function handleRename(record: Recordable) {
-  // openDrawer(true, {
-  //   record,
-  //   isUpdate: true,
-  // });
+  openConnectDrawer(true, {
+    isUpdate: true,
+    record
+  });
 }
 
 /** 编辑 按钮 */
@@ -155,18 +147,20 @@ async function handleDelete(record: Recordable) {
 
 /** 连接 按钮 */
 function handleConnect(record: Recordable) {
-  // openDrawer(true, {
-  //   record,
-  //   isUpdate: true,
-  // });
+  const connectName = record.connectName
+  createMessage.info('正在尝试连接：' + connectName);
+  setTimeout(() => {
+    createMessage.success(connectName + '测试连接成功');
+  }, Math.floor(Math.random() * 2000) + 100)
 }
 
 /** 终止连接 按钮 */
 function handleStopConnect(record: Recordable) {
-  // openDrawer(true, {
-  //   record,
-  //   isUpdate: true,
-  // });
+  const connectName = record.connectName
+  createMessage.info('正在终止连接：' + connectName);
+  setTimeout(() => {
+    createMessage.success(connectName + '连接已终止');
+  }, Math.floor(Math.random() * 1500) + 100)
 }
 
 /** 查看详情 按钮 */

src/views/dataSourceManage/dataSource/DataSourceDrawer.vue

+<template>
+  <!-- 数据源-连接-新增或修改 抽屉 -->
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="500px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm"/>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+import {ref, computed, unref} from 'vue';
+import {BasicForm, useForm} from '@/components/Form';
+import {BasicDrawer, useDrawerInner} from '@/components/Drawer';
+import {useMessage} from "@/hooks/web/useMessage";
+import {formSchema} from "@/views/dataSourceManage/dataSource/dataSource.data";
+import {addDataSource, updateDataSource} from "@/api/system/dataSource/dataSource";
+
+defineOptions({name: 'DataSourceDrawer'});
+const emit = defineEmits(['success', 'register']);
+const {createMessage} = useMessage();
+const handleType = ref('view');
+const connectId = ref(null);
+
+// 初始化抽屉
+const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
+  resetFields();
+  setDrawerProps({confirmLoading: false});
+  handleType.value = data?.handleType;
+  setFieldsValue({
+    ...data?.record,
+  });
+  // 更新表单的 disabled 属性
+  setProps({disabled: data?.handleType === 'view'})
+});
+
+const [registerForm, {resetFields, setFieldsValue, validate, setProps}] = useForm({
+  labelWidth: 90,
+  baseColProps: {span: 24},
+  schemas: formSchema,
+  showActionButtonGroup: false,
+  disabled: handleType.value === 'view',
+});
+
+const getTitle = computed(() => {
+  // TODO: please clear this log
+  console.log(`handleType.value`, handleType.value)
+  switch (handleType.value) {
+    case 'view':
+      return '查看数据源';
+    case 'edit':
+      return '编辑数据源';
+    case 'rename':
+      return '重命名数据源';
+    case 'add':
+      return '新增数据源';
+    default:
+      return '';
+  }
+});
+
+/** 确认按钮 */
+async function handleSubmit() {
+  try {
+    const formData = await validate();
+    setDrawerProps({confirmLoading: true});
+    // 编辑
+    if (unref(handleType)) {
+      formData.id = connectId.value
+      updateDataSource(formData).then(res => {
+        if (res.code === 200) {
+          createMessage.success('编辑成功');
+          closeDrawer();
+          emit('success', {
+            handleType: unref(handleType),
+            values: {...formData, id: connectId.value}
+          });
+        }
+      })
+    } else {
+      //新增
+      const paramsAdd = {
+        id: formData.id,
+        delFlag: formData.delFlag,
+        flag: formData.flag,
+        createBy: formData.createBy,
+        createDate: formData.createDate,
+        updateBy: formData.updateBy,
+        updateDate: formData.updateDate,
+      }
+      addDataSource(paramsAdd).then(res => {
+        if (res.code === 200) {
+          createMessage.success('新增成功');
+          closeDrawer();
+          emit('success', {
+            handleType: unref(handleType),
+            values: {...formData, id: connectId.value}
+          });
+        }
+      })
+    }
+  } finally {
+    setDrawerProps({confirmLoading: false});
+  }
+}
+</script>

src/views/dataSourceManage/dataSource/dataSource.data.ts

+import {FormSchema} from "@/components/Form";
+import {BasicColumn} from "@/components/Table";
+
+// 搜索栏参数
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'dataSourceName',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入关键字搜索',
+    },
+    colProps: { span: 7 },
+  },
+];
+
+// 表头参数
+export const columns: BasicColumn[any] = [
+  {
+    title: '数据源名称',
+    dataIndex: 'dataSourceName',
+    width: 150,
+  },
+  {
+    title: '连接名称',
+    dataIndex: 'connectName',
+    width: 150,
+  },
+  {
+    title: '类型',
+    dataIndex: 'connectType',
+    width: 150,
+  },
+  {
+    title: '认证状态',
+    dataIndex: 'authStatus',
+    width: 150,
+  },
+  {
+    title: '数据源ID',
+    dataIndex: 'dataSourceID',
+    width: 150,
+  },
+  {
+    title: '权属工作组',
+    dataIndex: 'workingGroup',
+    width: 150,
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'createBy',
+    width: 150,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createDate',
+    width: 150,
+  },
+  {
+    title: '是否在元数据管理中展示',
+    dataIndex: 'isShow',
+    width: 150,
+  },
+];
+
+// 表单表头
+export const formSchema: FormSchema[] = [
+  {
+    field: 'connectType',
+    label: '数据源类型',
+    component: 'Select',
+    required: true,
+    componentProps: {
+      options: [
+        { label: 'Inceptor', value: '0' },
+        { label: 'Teradata', value: '1' },
+        { label: 'ArgoDB', value: '2' },
+        { label: 'Mysql', value: '3' },
+        { label: 'Oracle', value: '4' },
+        { label: 'HDFS', value: '5' },
+        { label: 'Hbase', value: '6' },
+        { label: 'Hyperbase', value: '7' },
+        { label: 'Impala', value: '8' },
+        { label: 'DB2', value: '9' },
+        { label: 'SQLServer', value: '10' },
+        { label: 'Hive', value: '11' },
+        { label: 'KunDB', value: '12' },
+        { label: '达梦', value: '13' },
+        { label: 'HANA', value: '14' },
+        { label: 'Postgres', value: '15' },
+        { label: 'FTP', value: '16' },
+        { label: 'SFTP', value: '17' },
+        { label: 'Kingbase', value: '18' },
+        { label: 'Gbase', value: '19' },
+        { label: 'Greenplum', value: '20' },
+        { label: 'Trino', value: '21' },
+        { label: 'MongoDB', value: '22' },
+        { label: 'OceanBase', value: '23' },
+        { label: 'AS400', value: '23' },
+        { label: '自定义', value: '24' },
+        { label: 'Kafka', value: '25' },
+        { label: 'Clickhouse', value: '26' },
+        { label: 'S3', value: '27' },
+        { label: 'Timelyre', value: '28' },
+      ],
+      defaultValue: '0',
+    },
+  },
+  {
+    field: 'dataSourceName',
+    label: '名称',
+    component: 'Input',
+    required: true,
+  },
+  {
+    field: 'dataSourceDescription',
+    label: '描述',
+    component: 'InputTextArea',
+    required: false,
+  },
+  {
+    field: 'divider-basic',
+    component: 'Divider',
+    label: '连接信息',
+    colProps: {
+      span: 24,
+    },
+  },
+  {
+    field: 'collectionType',
+    label: '连接',
+    component: 'Select',
+    required: true,
+    componentProps: {
+      options: [
+        { label: 'Inceptor', value: '0' },
+        { label: 'hive', value: '1' },
+        { label: 'mysql', value: '2' },
+        { label: 'postgresql', value: '3' },
+        { label: 'oracle', value: '4' },
+        { label: 'sqlserver', value: '5' },
+        { label: 'sqlite', value: '6' },
+        { label: 'mongodb', value: '7' },
+        { label: 'redis', value: '8' },
+        { label: 'elasticsearch', value: '9' },
+        { label: 'cassandra', value: '10' },
+        { label: 'derby', value: '11' },
+        { label: 'cockroachdb', value: '12' },
+        { label: 'neo4j', value: '13' },
+      ],
+      defaultValue: '0',
+    },
+  },
+  {
+    field: 'defaultConnect',
+    label: '默认连接库',
+    component: 'Input',
+    required: false,
+  },
+  {
+    field: 'connectParams',
+    label: '连接参数',
+    component: 'Input',
+    required: false,
+  },
+  {
+    field: 'authMode',
+    label: '认证模式',
+    component: 'Select',
+    required: true,
+    componentProps: {
+      options: [
+        { label: 'None', value: 'None' },
+        { label: 'Kerberos', value: 'Kerberos' },
+        { label: 'LDAP', value: 'LDAP' },
+        { label: 'Access Token', value: 'AccessToken' },
+        { label: 'Password', value: 'Password' },
+      ],
+      defaultValue: 'None',
+    },
+  },
+]

src/views/dataSourceManage/dataSource/dataSourceData.ts

+// 数据源 列表数据
+export const dataSourceListData: any[] = [
+  {
+    "id": 0,
+    "dataSourceName": "Inceptor",
+    "connectName": "Inceptor",
+    "connectType": "INCEPTOR",
+    "authStatus": "可连接",
+    "dataSourceID": "eff1daef6bac8a249531ed973d2e02a5",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "Inceptor描述",
+    "collectionType": "0",
+    "defaultConnect": "inceptor1",
+    "connectParams": "inceptor1",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-10-24 10:04:04",
+    "updateBy": "admin",
+    "updateDate": "2024-10-24 10:04:04"
+  },
+  {
+    "id": 1,
+    "dataSourceName": "oracle",
+    "connectName": "oracle",
+    "connectType": "ORACLE",
+    "authStatus": "可连接",
+    "dataSourceID": "cd4f179df58a62a67c0e5778d8248341",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "oracle描述",
+    "collectionType": "0",
+    "defaultConnect": "oracle1",
+    "connectParams": "oracle1",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-10-24 11:24:44",
+    "updateBy": "admin",
+    "updateDate": "2024-10-24 11:24:44"
+  },
+  {
+    "id": 2,
+    "dataSourceName": "oracle2",
+    "connectName": "oracle2",
+    "connectType": "ORACLE",
+    "authStatus": "可连接",
+    "dataSourceID": "e05ef05ae23288ad9ce26d17c2604be9",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "Oracle描述",
+    "collectionType": "0",
+    "defaultConnect": "oracle2",
+    "connectParams": "oracle2",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-10-25 07:39:58",
+    "updateBy": "admin",
+    "updateDate": "2024-10-25 07:39:58"
+  },
+  {
+    "id": 3,
+    "dataSourceName": "kundb",
+    "connectName": "kundb2",
+    "connectType": "KUNDB",
+    "authStatus": "不可连接",
+    "dataSourceID": "25a9b97cbd3cd41db0bbc796a9d21808",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "Kundb描述",
+    "collectionType": "0",
+    "defaultConnect": "kundb2",
+    "connectParams": "kundb2",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-10-20 17:21:36",
+    "updateBy": "admin",
+    "updateDate": "2024-10-20 17:21:36"
+  },
+  {
+    "id": 4,
+    "dataSourceName": "mysql",
+    "connectName": "mysql2",
+    "connectType": "MYSQL",
+    "authStatus": "可连接",
+    "dataSourceID": "12b1d3c4d5791a089ad417c87c100154",
+    "workingGroup": "-",
+    "isShow": "否",
+    "dataSourceDescription": "mysql描述",
+    "collectionType": "0",
+    "defaultConnect": "mysql2",
+    "connectParams": "mysql2",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-10-29 13:29:06",
+    "updateBy": "admin",
+    "updateDate": "2024-10-29 13:29:06"
+  },
+  {
+    "id": 5,
+    "dataSourceName": "postgresql",
+    "connectName": "postgresql",
+    "connectType": "POSTGRESQL",
+    "authStatus": "可连接",
+    "dataSourceID": "78e5f9c8b91e54f0e2d89c0a7e6f8345",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "PostgreSql描述",
+    "collectionType": "0",
+    "defaultConnect": "postgresql1",
+    "connectParams": "postgresql1",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-10-30 14:45:22",
+    "updateBy": "admin",
+    "updateDate": "2024-10-30 14:45:22"
+  },
+  {
+    "id": 6,
+    "dataSourceName": "sqlserver",
+    "connectName": "sqlserver",
+    "connectType": "SQLSERVER",
+    "authStatus": "可连接",
+    "dataSourceID": "9a7b8c9d0e1f2g3h4i5j6k7l8m9n0o1p",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "sqlserver描述",
+    "collectionType": "0",
+    "defaultConnect": "sqlserver1",
+    "connectParams": "sqlserver1",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-10-31 09:10:34",
+    "updateBy": "admin",
+    "updateDate": "2024-10-31 09:10:34"
+  },
+  {
+    "id": 7,
+    "dataSourceName": "mongodb",
+    "connectName": "mongodb",
+    "connectType": "MONGODB",
+    "authStatus": "可连接",
+    "dataSourceID": "abcd1234efgh5678ijkl90mn",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "mongodb描述",
+    "collectionType": "0",
+    "defaultConnect": "mongodb1",
+    "connectParams": "mongodb1",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-11-01 11:22:33",
+    "updateBy": "admin",
+    "updateDate": "2024-11-01 11:22:33"
+  },
+  {
+    "id": 8,
+    "dataSourceName": "redis",
+    "connectName": "redis",
+    "connectType": "REDIS",
+    "authStatus": "不可连接",
+    "dataSourceID": "zxyw1234vuts5678rqpo90mn",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "redis描述",
+    "collectionType": "0",
+    "defaultConnect": "redis1",
+    "connectParams": "redis1",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-11-02 12:34:56",
+    "updateBy": "admin",
+    "updateDate": "2024-11-02 12:34:56"
+  },
+  {
+    "id": 9,
+    "dataSourceName": "elasticsearch",
+    "connectName": "elasticsearch",
+    "connectType": "ELASTICSEARCH",
+    "authStatus": "可连接",
+    "dataSourceID": "poiuytrewqasdcfvghb",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "elasticsearch描述",
+    "collectionType": "0",
+    "defaultConnect": "elasticsearch1",
+    "connectParams": "elasticsearch1",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-11-03 13:45:21",
+    "updateBy": "admin",
+    "updateDate": "2024-11-03 13:45:21"
+  },
+  {
+    "id": 10,
+    "dataSourceName": "hive",
+    "connectName": "hive",
+    "connectType": "HIVE",
+    "authStatus": "可连接",
+    "dataSourceID": "lkjhgfdsaqwertyuip",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "hive描述",
+    "collectionType": "0",
+    "defaultConnect": "hive1",
+    "connectParams": "hive1",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-11-04 14:56:32",
+    "updateBy": "admin",
+    "updateDate": "2024-11-04 14:56:32"
+  },
+  {
+    "id": 11,
+    "dataSourceName": "hbase",
+    "connectName": "hbase",
+    "connectType": "HBASE",
+    "authStatus": "不可连接",
+    "dataSourceID": "mnbvcxzlkjhgfdsa",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "hbase描述",
+    "collectionType": "0",
+    "defaultConnect": "hbase1",
+    "connectParams": "hbase1",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-11-05 15:23:45",
+    "updateBy": "admin",
+    "updateDate": "2024-11-05 15:23:45"
+  },
+  {
+    "id": 12,
+    "dataSourceName": "cassandra",
+    "connectName": "cassandra",
+    "connectType": "CASSANDRA",
+    "authStatus": "可连接",
+    "dataSourceID": "poiuytrewqlkjhgfdsa",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "cassandra描述",
+    "collectionType": "0",
+    "defaultConnect": "cassandra1",
+    "connectParams": "cassandra1",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-11-06 16:34:50",
+    "updateBy": "admin",
+    "updateDate": "2024-11-06 16:34:50"
+  },
+  {
+    "id": 13,
+    "dataSourceName": "sqlite",
+    "connectName": "sqlite",
+    "connectType": "SQLITE",
+    "authStatus": "可连接",
+    "dataSourceID": "zxcvbnmlkjhgfdsa",
+    "workingGroup": "-",
+    "isShow": "否",
+    "dataSourceDescription": "sqlite描述",
+    "collectionType": "0",
+    "defaultConnect": "sqlite1",
+    "connectParams": "sqlite1",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-11-07 17:45:01",
+    "updateBy": "admin",
+    "updateDate": "2024-11-07 17:45:01"
+  },
+  {
+    "id": 14,
+    "dataSourceName": "derby",
+    "connectName": "derby",
+    "connectType": "DERBY",
+    "authStatus": "可连接",
+    "dataSourceID": "poiuytrewqasdfghjkl",
+    "workingGroup": "-",
+    "isShow": "是",
+    "dataSourceDescription": "derby描述",
+    "collectionType": "0",
+    "defaultConnect": "derby1",
+    "connectParams": "derby1",
+    "delFlag": "0",
+    "flag": "1",
+    "createBy": "admin",
+    "createDate": "2024-11-08 18:56:12",
+    "updateBy": "admin",
+    "updateDate": "2024-11-08 18:56:12"
+  }
+]

src/views/dataSourceManage/dataSource/index.vue

 <template>
-  <div>数据源管理-数据源</div>
+  <!-- 数据源管理-数据源 -->
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleDataSourceReplace">数据源替换</a-button>
+        <a-button type="primary" @click="handleReload">刷新</a-button>
+        <a-button type="primary" @click="handleAdd">新增</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'ant-design:signature-outlined',
+                // label: '重命名',
+                onClick: handleRename.bind(null, record),
+              },
+              {
+                icon: 'ant-design:api-outlined',
+                // label: '查看连接',
+                onClick: handleViewConnect.bind(null, record),
+              },
+              {
+                icon: 'clarity:note-edit-line',
+                // label: '编辑数据源',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'clarity:info-standard-line',
+                // label: '查看详情',
+                onClick: handleViewDetails.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                // label: '删除',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+  </PageWrapper>
+  <DataSourceDrawer @register="registerDataSourceDrawer"/>
+  <ConnectModal @register="registerConnectModal"/>
 </template>
 <script lang="ts" setup>
+import {ref} from 'vue';
+import {PageWrapper} from '@/components/Page';
+import {BasicTable, useTable, TableAction} from '@/components/Table';
+import {useMessage} from '@/hooks/web/useMessage';
+import {useModal} from '@/components/Modal';
+import {useDrawer} from '@/components/Drawer';
+import {columns, searchFormSchema} from "@/views/dataSourceManage/dataSource/dataSource.data";
+import {
+  getDataSourceListByPage,
+  deleteById
+} from "@/api/system/dataSource/dataSource";
+import DataSourceDrawer from "@/views/dataSourceManage/dataSource/DataSourceDrawer.vue";
+import ConnectModal from "@/views/dataSourceManage/connect/ConnectModal.vue";
 
+const {createMessage} = useMessage();
+const [registerDataSourceDrawer, {openDrawer: openDataSourceDrawer}] = useDrawer();
+const [registerConnectModal, {openModal: openConnectModal}] = useModal();
+
+const [registerTable, {reload, getForm}] = useTable({
+  api: getDataSourceListByPage,
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+  },
+  useSearchForm: true,
+  showTableSetting: false,
+  bordered: true,
+  showIndexColumn: false,
+  actionColumn: {
+    width: 200,
+    title: '操作',
+    dataIndex: 'action',
+    fixed: undefined,
+  },
+});
+
+/** 数据源替换 按钮 */
+function handleDataSourceReplace() {
+  createMessage.info('正在进行数据源替换');
+  setTimeout(() => {
+    createMessage.success('数据源替换成功');
+    reload();
+  }, Math.floor(Math.random() * 2000) + 100)
+}
+
+/** 刷新 按钮 */
+function handleReload() {
+  reload();
+}
+
+/** 新增 按钮 */
+function handleAdd() {
+  openDataSourceDrawer(true, {
+    handleType: 'add',
+  })
+}
+
+/** 重命名 按钮 */
+function handleRename(record: Recordable) {
+  openDataSourceDrawer(true, {
+    handleType: 'rename',
+    record
+  })
+}
+
+/** 查看连接 按钮 */
+function handleViewConnect(record: Recordable) {
+  openConnectModal(true, {
+    handleType: 'view',
+    record
+  })
+}
+
+/** 编辑数据源 按钮 */
+function handleEdit(record: Recordable) {
+  openDataSourceDrawer(true, {
+    handleType: 'edit',
+    record
+  })
+}
+
+/** 查看详情 按钮 */
+function handleViewDetails(record: Recordable) {
+  openDataSourceDrawer(true, {
+    handleType: 'view',
+    record
+  })
+}
+
+/** 删除 按钮 */
+async function handleDelete(record: Recordable) {
+  await deleteById(record.id);
+  await reload();
+}
+
+/** 成功时返回的方法 */
+function handleSuccess() {
+  reload();
+}
 </script>

src/views/dataSourceManage/driveManage/DriveModal.vue

@@ -63,17 +63,15 @@ const [registerTable, {reload, getForm}] = useTable({
   title: '驱动管理',
   api: getDriveListByPage,
   columns,
-  rowSelection: false,
   useSearchForm: false,
   showTableSetting: false,
   bordered: true,
-  isTreeTable: true,
-  pagination: true,
   showIndexColumn: false,
   actionColumn: {
-    width: 50,
+    width: 80,
     title: '操作',
     dataIndex: 'action',
+    fixed: undefined,
   },
 });
 

src/views/dataSourceManage/driveManage/driveData.ts

@@ -4,31 +4,31 @@ export const driveListData: any[] = [
     "driveType": "Oracle",
     "driveVersion": "oracle11",
     "driveClass": "oracle.jdbc.driver.OracleDriver",
-    "driveFile": ["oracle-driver-ojdbc6-12.1.0.1.jar", "ojdbc6-11.2.0.3.jar"],
+    "driveFile": "oracle-driver-ojdbc6-12.1.0.1.jar",
   },
   {
     "driveType": "MySQL",
     "driveVersion": "mysql8",
     "driveClass": "com.mysql.cj.jdbc.Driver",
-    "driveFile": ["mysql-connector-java-8.0.23.jar"],
+    "driveFile": "mysql-connector-java-8.0.23.jar",
   },
   {
     "driveType": "PostgreSQL",
     "driveVersion": "postgresql42",
     "driveClass": "org.postgresql.Driver",
-    "driveFile": ["postgresql-42.2.5.jar"],
+    "driveFile": "postgresql-42.2.5.jar",
   },
   {
     "driveType": "SQLServer",
     "driveVersion": "sqlserver4",
     "driveClass": "com.microsoft.sqlserver.jdbc.SQLServerDriver",
-    "driveFile": ["mssql-jdbc-7.4.1.jre8.jar"],
+    "driveFile": "mssql-jdbc-7.4.1.jre8.jar",
   },
   {
     "driveType": "SQLite",
     "driveVersion": "sqlite3",
     "driveClass": "org.sqlite.JDBC",
-    "driveFile": ["sqlite-jdbc-3.34.0.jar"],
+    "driveFile": "sqlite-jdbc-3.34.0.jar",
   }
 ];