Commit 5f687ba8 authored by liwei's avatar liwei

数据源连接页面

parent 975ff5e7
<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>
......@@ -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,
},
];
......@@ -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":'共享工作区',
},
];
......@@ -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({
......
......@@ -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, {
......
......@@ -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) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment