数据源连接页面

src/views/dataSourceManage/connect/DataRelativeModal.vue

+<template>
+  <BasicModal  width="50%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+      <BasicTable @register="registerTable"></BasicTable>
+      <!-- 新增/编辑 弹窗 -->
+      <DriverModal @register="registerDriverModal" @success="handleSuccess"/>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import { BasicModal, useModalInner } from '@/components/Modal';
+import { BasicForm, useForm } from '@/components/Form';
+import {reactive, unref, onDeactivated, onMounted, ref, computed} from 'vue';
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { useMessage } from '@/hooks/web/useMessage';
+import { useModal } from '@/components/Modal';
+import {columns, driveFormSchema, searchSchema} from '@/views/dataSourceManage/driveManage/drive.data.ts';
+import { driveListData } from '@/views/dataSourceManage/driveManage/driveData.ts';
+import DriverModal from "@/views/dataSourceManage/driveManage/DriveModal.vue";
+import {dataSourceRelativeData} from "@/views/dataSourceManage/connect/connectData";
+import {dataRelativeColumns} from "@/views/dataSourceManage/connect/connect.data";
+
+
+defineOptions({ name: 'AccountManagement' });
+const { createMessage } = useMessage();
+const [registerDriverModal, { openModal: openDriverModal }] = useModal();
+const searchInfo = reactive<Recordable>({});
+const emit = defineEmits(['success', 'register']);
+const tableData = ref([])
+const getTitle = computed(() => ('数据源关联'));
+const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
+  title: '',
+  api: async (params) => {
+    const response = {
+      pageNu: "1",
+      pageSize: "10",
+      pages: "1",
+      total: dataSourceRelativeData.length,
+      code:'',
+      message:'',
+      data: dataSourceRelativeData,
+    };
+    return { ...response, data: dataSourceRelativeData };
+  },
+  columns:dataRelativeColumns,
+  rowSelection: false,
+  useSearchForm: false,
+  showTableSetting: false,
+  showIndexColumn: true,
+  bordered: true,
+});
+
+//初始化弹框
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  setModalProps({ confirmLoading: false,showOkBtn: false,showCancelBtn: false });
+});
+
+
+/** 新增 按钮 */
+async function handleAddButton(record: Recordable) {
+  openDriverModal(true, {
+    isUpdate: false
+  });
+}
+
+
+/** 删除 按钮 */
+async function handleDelete(record: Recordable) {
+  createMessage.success('删除成功!');
+}
+
+/** 编辑 按钮 */
+function handleEdit(record: Recordable) {
+  openDriverModal(true, {
+    isUpdate: true,
+    record: record,
+  });
+}
+
+onMounted(() => {
+
+});
+</script>

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

@@ -13,7 +13,7 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
 
-// 表头参数
+// 表头列表头
 export const columns: BasicColumn[any] = [
   {
     title: '连接名称',
@@ -197,7 +197,7 @@ export const formSchema: FormSchema[any] = [
     },
   },
 ]
-// 重命名表头
+// 重命名表单
 export const resetNameFormSchema: FormSchema[any] = [
   {
     field: 'connectName',
@@ -207,7 +207,7 @@ export const resetNameFormSchema: FormSchema[any] = [
   },
 ]
 
-// Kbrt表头
+// Kbrt表单
 export const kbr5FormSchema: FormSchema[any] = [
   {
     field: 'path',
@@ -227,3 +227,32 @@ export const kbr5FormSchema: FormSchema[any] = [
     labelWidth: 150,
   },
 ]
+
+// 数据源关联列表头
+export const dataRelativeColumns: BasicColumn[any] = [
+  {
+    title: '数据源ID',
+    dataIndex: 'dataSourceId',
+    width: 150,
+  },
+  {
+    title: '数据源名称',
+    dataIndex: 'dataSourceName',
+    width: 150,
+  },
+  {
+    title: '认证类型',
+    dataIndex: 'authType',
+    width: 150,
+  },
+  {
+    title: '拥有者',
+    dataIndex: 'holder',
+    width: 150,
+  },
+  {
+    title: '所属工作区',
+    dataIndex: 'areaName',
+    width: 150,
+  },
+];

src/views/dataSourceManage/connect/connectData.ts

@@ -97,6 +97,7 @@ export const connectListData: any[] = [
   }
 ];
 
+//树数据
 export const dataSourceTreeData: any[] = [
   {
     "delFlag" : "0",
@@ -235,3 +236,14 @@ export const dataSourceTreeData: any[] = [
     icon:'ant-design:api-twotone'
   },
 ];
+
+//数据源关联列表数据
+export const dataSourceRelativeData: any[] = [
+  {
+    "dataSourceId" :'bcf39ad7sda789gf87sd8ads89',
+    "dataSourceName":'Kundb',
+    "authType":'PASSWORD',
+    "holder":'admin',
+    "areaName":'共享工作区',
+  },
+];

src/views/dataSourceManage/connect/dataSourceTree.vue

@@ -11,8 +11,6 @@
       :treeData="treeData"
       :fieldNames="{ key: 'businessId', title: 'fileName' }"
       @select="handleSelect"
-      :beforeRightClick="getRightMenuList"
-      :actionList="actionList"
     />
   </div>
 </template>
@@ -78,86 +76,6 @@ onMounted(() => {
   fetch();
 });
 
-// 树的操作列表
-const actionList = [
-  {
-    //全部操作按钮
-    render: (node) => {
-      return h(EllipsisOutlined, {
-        class: 'ml-2',
-        onClick: () => {
-          getRightMenuList(node)
-        },
-      });
-    },
-  },
-];
-
-
-function getRightMenuList(node: EventDataNode): Promise<ContextMenuItem[]> {
-  const menu = [
-    {
-      label: '打开',
-      handler: () => {
-        handleOpen(node)
-      },
-      icon: 'ant-design:eye-outlined',
-    },
-    {
-      label: '重命名',
-      handler: () => {
-        handleResetName(node)
-      },
-      icon: 'ant-design:edit-outlined',
-    },
-    {
-      label: '新建任务流',
-      handler: () => {
-        createTaskButton()
-      },
-      icon: 'bi:plus',
-    },
-    {
-      label: '新建文件夹',
-      handler: () => {
-        createFileButton()
-      },
-      icon: 'bi:plus',
-    },
-    {
-      label: '复制',
-      handler: () => {
-        copyButton()
-      },
-      icon: 'ant-design:snippets-outlined',
-    },
-    {
-      label: '粘贴',
-      handler: () => {
-        stickButton()
-      },
-      icon: 'ant-design:snippets-twotone',
-    },
-    {
-      label: '删除',
-      handler: () => {
-        deleteButton()
-      },
-      icon: 'ant-design:rest-outlined',
-    },
-    {
-      label: '移动',
-      handler: () => {
-        handleMove(node)
-      },
-      icon: 'bx:bxs-folder-open',
-    },
-  ];
-  return new Promise((resolve) => {
-    resolve(menu);
-  });
-}
-
 /**打开*/
 function handleOpen(data){
   router.push({

src/views/dataSourceManage/connect/index.vue

@@ -17,6 +17,11 @@
                 // label: '重命名',
                 onClick: handleRename.bind(null, record),
               },
+              {
+                icon: 'ion:layers-outline',
+                // label: '数据源关联',
+                onClick: handleRelation.bind(null, record),
+              },
               {
                 icon: 'clarity:note-edit-line',
                 // label: '编辑',
@@ -62,6 +67,8 @@
     <ResetNameModal @register="registerResetNameModal" @success="handleSuccess"/>
     <!-- Krb5 弹窗 -->
     <krb5Modal @register="registerKrb5Modal" @success="handleSuccess"/>
+    <!-- 数据源关联 弹窗 -->
+    <DataRelativeModal @register="registerDataRelativeModal" @success="handleSuccess"/>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -81,6 +88,7 @@
   import ConnectModal from "@/views/dataSourceManage/connect/ConnectModal.vue";
   import ResetNameModal from "@/views/dataSourceManage/connect/resetNameModal.vue";
   import Krb5Modal from "@/views/dataSourceManage/connect/Krb5Modal.vue";
+  import DataRelativeModal from "@/views/dataSourceManage/connect/DataRelativeModal.vue";
 
   defineOptions({ name: 'AccountManagement' });
   const { createMessage } = useMessage();
@@ -92,6 +100,7 @@
   const [registerResetNameModal, {openModal: openResetNameModal}] = useModal();
   const [registerConnectModal, {openModal: openConnectModal}] = useModal();
   const [registerKrb5Modal, {openModal: openKrb5Modal}] = useModal();
+  const [registerDataRelativeModal, {openModal: openDataRelativeModal}] = useModal();
   const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
     title: '',
     api: async (params) => {
@@ -165,6 +174,13 @@
     });
   }
 
+  /**数据源关联*/
+  function handleRelation(record: Recordable) {
+    openDataRelativeModal(true, {
+      record
+    });
+  }
+
   /** 编辑 按钮 */
   function handleEdit(record: Recordable) {
     openConnectModal(true, {

src/views/dataSourceManage/driveManage/TableModal.vue

@@ -33,7 +33,7 @@
 <script lang="ts" setup>
 import { BasicModal, useModalInner } from '@/components/Modal';
 import { BasicForm, useForm } from '@/components/Form';
-import { reactive,unref,onDeactivated,onMounted,ref } from 'vue';
+import {reactive, unref, onDeactivated, onMounted, ref, computed} from 'vue';
 import { BasicTable, useTable, TableAction } from '@/components/Table';
 import { useMessage } from '@/hooks/web/useMessage';
 import { useModal } from '@/components/Modal';
@@ -48,6 +48,7 @@ const [registerDriverModal, { openModal: openDriverModal }] = useModal();
 const searchInfo = reactive<Recordable>({});
 const emit = defineEmits(['success', 'register']);
 const tableData = ref([])
+const getTitle = computed(() => ('驱动管理'));
 const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
   title: '驱动列表',
   api: async (params) => {