Skip to content

B
bigDataSystem
Commit b8469bbb authored by ZhangKai's avatar ZhangKai
Browse files
Options

1.数据源-连接 页面初版代码提交

parent d72b1fa3
Hide whitespace changes
Inline Side-by-side
Showing with 1281 additions and 0 deletions
src/api/system/connect/connect.ts 0 → 100644
View file @ b8469bbb
import {connectListData} from "@/views/dataSourceManage/connect/connectData";
/** 获取数据源-连接列表信息*/
export const getConnectListByPage = (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: connectListData.length, // 总记录数
code: 200, // 假设 0 表示成功
message: 'success', // 成功的消息
data: connectListData.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 addConnect = (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 updateConnect = (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毫秒
});
};
src/api/system/driveManage/driveManage.ts 0 → 100644
View file @ b8469bbb
import {driveListData} from "@/views/dataSourceManage/driveManage/driveData";
/** 获取数据源-连接-驱动管理列表信息*/
export const getDriveListByPage = (params?: any) => {
return new Promise((resolve) => {
setTimeout(() => {
if (params && params.page && params.pageSize) {
const start = (params.page - 1) * params.pageSize
const end = start + params.pageSize
const response = {
pageNum: params.page, // 页码
pageSize: params.pageSize, // 每页大小
pages: 1, // 总页数
total: driveListData.length, // 总记录数
code: 200, // 假设 0 表示成功
message: 'success', // 成功的消息
data: driveListData.slice(start, end) // 模拟分页，只取前10条数据
};
resolve(response); // 解析 Promise
} else {
const response = {
pageNum: 1,
pageSize: driveListData.length,
pages: 1, // 总页数
total: driveListData.length, // 总记录数
code: 200, // 假设 0 表示成功
message: 'success', // 成功的消息
data: driveListData
};
resolve(response); // 解析 Promise
}
}, Math.floor(Math.random() * 1000) + 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 addDrive = (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 updateDrive = (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毫秒
});
};
src/views/dataSourceManage/connect/ConnectDrawer.vue 0 → 100644
View file @ b8469bbb
<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/connect/connect.data";
import {addConnect, updateConnect} from "@/api/system/connect/connect";
defineOptions({ name: 'ConnectDrawer' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const connectId = ref(null);
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
labelWidth: 90,
baseColProps: { span: 24 },
schemas: formSchema,
showActionButtonGroup: false,
});
// 初始化抽屉
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
resetFields();
setDrawerProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
setFieldsValue({
...data?.record,
});
});
const getTitle = computed(() => (!unref(isUpdate) ? '新增连接' : '编辑连接'));
/** 确认按钮 */
async function handleSubmit() {
try {
const formData = await validate();
setDrawerProps({ confirmLoading: true });
// 编辑
if(unref(isUpdate)) {
formData.id = connectId.value
updateConnect(formData).then(res => {
if(res.code === 200){
createMessage.success('编辑成功');
closeDrawer();
emit('success', { isUpdate: unref(isUpdate), values: { ...formData, id: connectId.value } });
}
})
}else {
//新增
const paramsAdd = {
id: formData.id,
connectName: formData.connectName,
connectString: formData.connectString,
connectType: formData.connectType,
authStatus: formData.authStatus,
foundDataSource: formData.foundDataSource,
executionState: formData.executionState,
collectionType: formData.collectionType,
isPeriodicCheck: formData.isPeriodicCheck,
driveVersion: formData.driveVersion,
delFlag: formData.delFlag,
flag: formData.flag,
createBy: formData.createBy,
createDate: formData.createDate,
updateBy: formData.updateBy,
updateDate: formData.updateDate,
}
addConnect(paramsAdd).then(res => {
if(res.code === 200){
createMessage.success('新增成功');
closeDrawer();
emit('success', { isUpdate: unref(isUpdate), values: { ...formData, id: connectId.value } });
}
})
}
} finally {
setDrawerProps({ confirmLoading: false });
}
}
</script>
src/views/dataSourceManage/connect/connect.data.ts 0 → 100644
View file @ b8469bbb
import {BasicColumn, FormSchema} from "@/components/Table";
import {getDriveListByPage} from "@/api/system/driveManage/driveManage";
// 搜索栏参数
export const searchFormSchema: FormSchema[] = [
{
field: 'connectName',
component: 'Input',
componentProps: {
placeholder: '输入关键字搜索',
},
colProps: { span: 7 },
},
];
// 表头参数
export const columns: BasicColumn[any] = [
{
title: '连接名称',
dataIndex: 'connectName',
width: 150,
},
{
title: '连接字符串',
dataIndex: 'connectString',
width: 150,
},
{
title: '连接类型',
dataIndex: 'connectType',
width: 150,
},
{
title: '认证状态',
dataIndex: 'authStatus',
width: 150,
},
{
title: '已创建数据源',
dataIndex: 'foundDataSource',
width: 150,
},
{
title: '执行状态',
dataIndex: 'executionState',
width: 150,
},
{
title: '采集类型',
dataIndex: 'collectionType',
width: 150,
},
{
title: '最近采集时间',
dataIndex: 'updateDate',
width: 150,
},
];
// 表单表头
export const formSchema: FormSchema[] = [
{
field: 'connectName',
label: '连接名称',
component: 'Input',
required: true,
},
{
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: 'collectionType',
label: '采集类型',
component: 'Select',
required: true,
componentProps: {
options: [
{ label: '在线采集', value: '0' },
{ label: '离线采集', value: '1' },
{ label: '不采集', value: '2' },
],
defaultValue: '0',
},
},
{
field: 'driveVersion',
label: '驱动版本',
component: 'Select',
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' },
],
defaultValue: 'hive',
},
},
{
field: 'connectString',
label: '连接字符串',
component: 'Input',
required: true,
componentProps: {
placeholder: "jdbc:hive2://<ip>:10000/default",
},
},
{
field: 'isPeriodicCheck',
label: '周期探活',
component: 'RadioGroup',
required: true,
componentProps: {
options: [
{ label: '开启', value: '0' },
{ label: '关闭', value: '1' },
],
defaultValue: '0',
},
},
{
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',
},
},
{
field: 'hdfsMap',
label: 'HDFS映射',
component: 'Select',
required: true,
componentProps: {
options: [
{ label: 'hive', value: 'hive' },
],
},
},
]
src/views/dataSourceManage/connect/connectData.ts 0 → 100644
View file @ b8469bbb
// 数据源-连接 列表数据
export const connectListData: any[] = [
{
"id": 0,
"connectName": "Inceptor",
"connectString": "jdbc:inceptor://172.26.0.85:2181/default",
"connectType": "INCEPTOR",
"authStatus": "可连接",
"foundDataSource": 3,
"executionState": "执行成功",
"collectionType": "详细元数据",
"isPeriodicCheck": "0",
"driveVersion": "Inceptor",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-10-24 10:04:04",
"updateBy": "admin",
"updateDate": "2024-10-24 10:04:04"
},
{
"id": 1,
"connectName": "hive",
"connectString": "jdbc:hive2://172.26.0.84:10000/default",
"connectType": "HIVE",
"authStatus": "可连接",
"foundDataSource": 7,
"executionState": "执行成功",
"collectionType": "详细元数据",
"isPeriodicCheck": "0",
"driveVersion": "hive",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-10-24 10:04:04",
"updateBy": "admin",
"updateDate": "2024-10-24 10:04:04"
},
{
"id": 2,
"connectName": "mysql",
"connectString": "jdbc:mysql://172.26.0.85:3306/testdb",
"connectType": "MYSQL",
"authStatus": "未认证",
"foundDataSource": 12,
"executionState": "执行成功",
"collectionType": "不采集",
"isPeriodicCheck": "0",
"driveVersion": "mysql8",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-10-25 11:05:05",
"updateBy": "admin",
"updateDate": "2024-10-25 11:05:05"
},
{
"id": 3,
"connectName": "postgresql",
"connectString": "jdbc:postgresql://172.26.0.86:5432/postgres",
"connectType": "POSTGRESQL",
"authStatus": "可连接",
"foundDataSource": 5,
"executionState": "执行成功",
"collectionType": "详细元数据",
"isPeriodicCheck": "0",
"driveVersion": "postgresql42",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-10-26 12:06:06",
"updateBy": "admin",
"updateDate": "2024-10-26 12:06:06"
},
{
"id": 4,
"connectName": "oracle",
"connectString": "jdbc:oracle:thin:@172.26.0.87:1521:orcl",
"connectType": "ORACLE",
"authStatus": "未认证",
"foundDataSource": 10,
"executionState": "执行失败",
"collectionType": "不采集",
"isPeriodicCheck": "0",
"driveVersion": "oracle11",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-10-27 13:07:07",
"updateBy": "admin",
"updateDate": "2024-10-27 13:07:07"
},
{
"id": 5,
"connectName": "sqlserver",
"connectString": "jdbc:sqlserver://172.26.0.88:1433;databaseName=master",
"connectType": "SQLSERVER",
"authStatus": "可连接",
"foundDataSource": 8,
"executionState": "执行成功",
"collectionType": "详细元数据",
"isPeriodicCheck": "0",
"driveVersion": "sqlserver4",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-10-28 14:08:08",
"updateBy": "admin",
"updateDate": "2024-10-28 14:08:08"
},
{
"id": 6,
"connectName": "sqlite",
"connectString": "jdbc:sqlite:/var/lib/sqlite3/test.db",
"connectType": "SQLITE",
"authStatus": "未认证",
"foundDataSource": 3,
"executionState": "执行成功",
"collectionType": "不采集",
"isPeriodicCheck": "0",
"driveVersion": "sqlite3",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-10-29 15:09:09",
"updateBy": "admin",
"updateDate": "2024-10-29 15:09:09"
},
{
"id": 7,
"connectName": "mongodb",
"connectString": "mongodb://172.26.0.89:27017/test",
"connectType": "MONGODB",
"authStatus": "可连接",
"foundDataSource": 4,
"executionState": "执行成功",
"collectionType": "详细元数据",
"isPeriodicCheck": "0",
"driveVersion": "mongodb",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-10-30 16:10:10",
"updateBy": "admin",
"updateDate": "2024-10-30 16:10:10"
},
{
"id": 8,
"connectName": "redis",
"connectString": "redis://172.26.0.90:6379/0",
"connectType": "REDIS",
"authStatus": "未认证",
"foundDataSource": 2,
"executionState": "执行成功",
"collectionType": "不采集",
"isPeriodicCheck": "0",
"driveVersion": "redis",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-10-31 17:11:11",
"updateBy": "admin",
"updateDate": "2024-10-31 17:11:11"
},
{
"id": 9,
"connectName": "elasticsearch",
"connectString": "http://172.26.0.91:9200",
"connectType": "ELASTICSEARCH",
"authStatus": "可连接",
"foundDataSource": 6,
"executionState": "执行成功",
"collectionType": "详细元数据",
"isPeriodicCheck": "0",
"driveVersion": "elasticsearch",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-11-01 18:12:12",
"updateBy": "admin",
"updateDate": "2024-11-01 18:12:12"
},
{
"id": 10,
"connectName": "cassandra",
"connectString": "cassandra://172.26.0.92:9042/system",
"connectType": "CASSANDRA",
"authStatus": "未认证",
"foundDataSource": 9,
"executionState": "执行失败",
"collectionType": "不采集",
"isPeriodicCheck": "0",
"driveVersion": "cassandra",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-11-02 19:13:13",
"updateBy": "admin",
"updateDate": "2024-11-02 19:13:13"
},
{
"id": 11,
"connectName": "derby",
"connectString": "jdbc:derby://172.26.0.93:1527/sample",
"connectType": "DERBY",
"authStatus": "可连接",
"foundDataSource": 11,
"executionState": "执行成功",
"collectionType": "详细元数据",
"isPeriodicCheck": "0",
"driveVersion": "derby",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-11-03 20:14:14",
"updateBy": "admin",
"updateDate": "2024-11-03 20:14:14"
},
{
"id": 12,
"connectName": "cockroachdb",
"connectString": "jdbc:postgresql://172.26.0.94:26257?sslmode=disable",
"connectType": "COCKROACHDB",
"authStatus": "未认证",
"foundDataSource": 15,
"executionState": "执行成功",
"collectionType": "不采集",
"isPeriodicCheck": "0",
"driveVersion": "postgresql42",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-11-04 21:15:15",
"updateBy": "admin",
"updateDate": "2024-11-04 21:15:15"
},
{
"id": 13,
"connectName": "neo4j",
"connectString": "bolt://172.26.0.95:7687",
"connectType": "NEO4J",
"authStatus": "可连接",
"foundDataSource": 13,
"executionState": "执行成功",
"collectionType": "详细元数据",
"isPeriodicCheck": "0",
"driveVersion": "neo4j",
"delFlag": "0",
"flag": "1",
"createBy": "admin",
"createDate": "2024-11-05 22:16:16",
"updateBy": "admin",
"updateDate": "2024-11-05 22:16:16"
}
];
src/views/dataSourceManage/connect/index.vue 0 → 100644
View file @ b8469bbb
<template>
<!-- 数据源管理-连接 -->
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleKrbFiveManage">Krb5管理</a-button>
<a-button type="primary" @click="handleDriverManage">驱动管理</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: 'clarity:note-edit-line',
// label: '编辑',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
// label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
{
icon: 'ant-design:caret-right-filled',
// label: '执行',
onClick: handleConnect.bind(null, record),
},
{
icon: 'ant-design:step-forward-filled',
// label: '停止',
onClick: handleStopConnect.bind(null, record),
},
{
icon: 'clarity:info-standard-line',
// label: '采集详情',
onClick: handleDetails.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
</PageWrapper>
<!-- Krb5管理 弹窗 -->
<KrbFiveModal @register="registerKrbFiveModal" @success="handleSuccess"/>
<!-- 驱动管理 弹窗 -->
<DriveModal @register="registerDriveModal"/>
<!-- 数据源-连接-新增或修改 抽屉 -->
<ConnectDrawer @register="registerConnectDrawer" @success="handleSuccess"/>
</template>
<script lang="ts" setup>
import {reactive, unref, onDeactivated, onMounted, 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";
import {getConnectListByPage, deleteById} from "@/api/system/connect/connect";
import ConnectDrawer from "@/views/dataSourceManage/connect/ConnectDrawer.vue";
const [registerKrbFiveModal, {openModal: openKrbFiveModal}] = useModal();
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,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
});
/** Krb5管理 按钮 */
function handleKrbFiveManage() {
// openModal(true, {
// isPermiss: true,
// record,
// });
}
/** 驱动管理 按钮 */
function handleDriverManage() {
openDriveModal(true, {});
}
/** 刷新 按钮 */
function handleReload() {
reload();
}
/** 新增 按钮 */
function handleAdd() {
openConnectDrawer(true, {
isUpdate: false,
});
}
/** 重命名 按钮 */
function handleRename(record: Recordable) {
// openDrawer(true, {
// record,
// isUpdate: true,
// });
}
/** 编辑 按钮 */
function handleEdit(record: Recordable) {
openConnectDrawer(true, {
isUpdate: true,
record
});
}
/** 删除 按钮 */
async function handleDelete(record: Recordable) {
await deleteById(record.id);
await reload();
}
/** 连接 按钮 */
function handleConnect(record: Recordable) {
// openDrawer(true, {
// record,
// isUpdate: true,
// });
}
/** 终止连接 按钮 */
function handleStopConnect(record: Recordable) {
// openDrawer(true, {
// record,
// isUpdate: true,
// });
}
/** 查看详情 按钮 */
function handleDetails(record: Recordable) {
// openDrawer(true, {
// record,
// isUpdate: true,
// });
}
/** 成功时返回的方法 */
function handleSuccess() {
reload();
}
</script>
src/views/dataSourceManage/dataSource/index.vue 0 → 100644
View file @ b8469bbb
<template>
<div>数据源管理-数据源</div>
</template>
<script lang="ts" setup>
</script>
src/views/dataSourceManage/driveManage/AddAndUpdateModal.vue 0 → 100644
View file @ b8469bbb
<template>
<!-- 驱动管理-添加或修改 弹窗 -->
<BasicModal
v-bind="$attrs"
width="45%"
height="500"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script setup lang="ts">
import { useModalInner } from '@/components/Modal';
import BasicModal from '@/components/Modal/src/BasicModal.vue';
import { ref, computed, unref } from 'vue';
import {formSchema} from "@/views/dataSourceManage/driveManage/drive.data";
import { BasicForm, useForm } from '@/components/Form';
import { useMessage } from '@/hooks/web/useMessage';
import {addDrive, updateDrive} from "@/api/system/driveManage/driveManage";
defineOptions({ name: 'AddAndUpdateModel' });
const { createMessage } = useMessage();
const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const driveId = ref(null);
const getTitle = computed(() => (!unref(isUpdate) ? '新增连接' : '编辑连接'));
const [registerModal, { closeModal,setModalProps }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
setFieldsValue({
...data?.record,
});
});
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate,getFieldsValue }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
});
/**确认按钮*/
async function handleSubmit() {
try {
const formData = await validate();
setModalProps({ confirmLoading: true });
// 编辑
if(unref(isUpdate)) {
formData.id = driveId.value
updateDrive(formData).then(res => {
if(res.code === 200){
createMessage.success('编辑成功');
closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...formData, id: driveId.value } });
}
})
} else {
//新增
const paramsAdd = {
id: formData.id,
driveType: formData.driveType,
driveVersion: formData.driveVersion,
driveClass: formData.driveClass,
driveFile: formData.driveFile,
delFlag: formData.delFlag,
flag: formData.flag,
createBy: formData.createBy,
createDate: formData.createDate,
updateBy: formData.updateBy,
updateDate: formData.updateDate,
}
addDrive(paramsAdd).then(res => {
if(res.code === 200){
createMessage.success('新增成功');
closeModal();
emit('success', { isUpdate: unref(isUpdate), values: { ...formData, id: driveId.value } });
}
})
}
} finally {
setModalProps({ confirmLoading: false });
}
}
</script>
<style scoped lang="less">
.modal-content {
display: flex;
height: 100%; // 可以根据需要调整高度
.table-container, .form-container {
flex: 1; // 每个容器占据一半的空间
overflow: auto; // 如果内容超出容器高度，则显示滚动条
}
.table-container {
border-right: 1px solid #e9ecef; // 可选：在表格和表单之间添加分隔线
}
}
</style>
src/views/dataSourceManage/driveManage/DriveModal.vue 0 → 100644
View file @ b8469bbb
<template>
<!-- 驱动管理 -->
<BasicModal
v-bind="$attrs"
width="60%"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleDriverAdd">新增驱动</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
// label: '编辑',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
// label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
</template>
</template>
</BasicTable>
</PageWrapper>
</BasicModal>
<!-- 驱动管理 新增或修改 弹窗 -->
<AddAndUpdateModal @register="registerAddAndUpdateModal"/>
</template>
<script setup lang="ts">
import {BasicTable, useTable} from '@/components/Table';
import {useModal, useModalInner} from '@/components/Modal';
import {PageWrapper} from '@/components/Page';
import BasicModal from '@/components/Modal/src/BasicModal.vue';
import {ref} from 'vue';
import {columns} from "@/views/dataSourceManage/driveManage/drive.data";
import {useMessage} from '@/hooks/web/useMessage';
import AddAndUpdateModal from "@/views/dataSourceManage/driveManage/AddAndUpdateModal.vue";
import {getDriveListByPage} from "@/api/system/driveManage/driveManage";
defineOptions({name: 'DriveModal'});
const [registerAddAndUpdateModal, {openModal}] = useModal();
const getTitle = ref('驱动管理');
const {createMessage} = useMessage();
const emit = defineEmits(['success', 'register']);
const formData = ref({});
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,
title: '操作',
dataIndex: 'action',
},
});
const [registerModal, {closeModal, setModalProps}] = useModalInner(async (data) => {
setModalProps({confirmLoading: false});
});
/** 新增驱动 */
function handleDriverAdd() {
openModal(true, {
isUpdate: false,
});
}
/** 编辑按钮 */
function handleEdit(record: Recordable) {
openModal(true, {
isUpdate: true,
record
});
}
/** 删除按钮 */
function handleDelete(record: Recordable) {
reload()
}
/** 确认按钮 */
function handleSubmit() {
closeModal()
}
</script>
<style scoped lang="less">
.modal-content {
display: flex;
height: 100%; // 可以根据需要调整高度
.table-container, .form-container {
flex: 1; // 每个容器占据一半的空间
overflow: auto; // 如果内容超出容器高度，则显示滚动条
}
.table-container {
border-right: 1px solid #e9ecef; // 可选：在表格和表单之间添加分隔线
}
}
</style>
src/views/dataSourceManage/driveManage/KrbFiveModal.vue 0 → 100644
View file @ b8469bbb
<template>
<!-- Krb5管理 -->
<BasicModal
v-bind="$attrs"
width="45%"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<div class="modal-content">
</div>
</BasicModal>
</template>
<script setup lang="ts">
import BasicModal from '@/components/Modal/src/BasicModal.vue';
import {ref, unref} from 'vue';
import {useMessage} from '@/hooks/web/useMessage';
import {useModalInner} from "@/components/Modal";
defineOptions({name: 'KrbFiveModal'});
const loadingRef = ref(false);
const getTitle = ref('Krb5管理');
const {createMessage} = useMessage();
const emit = defineEmits(['success', 'register']);
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
});
/**确认按钮*/
function handleSubmit() {
}
</script>
<style scoped lang="less">
.modal-content {
display: flex;
height: 100%; // 可以根据需要调整高度
.table-container, .form-container {
flex: 1; // 每个容器占据一半的空间
overflow: auto; // 如果内容超出容器高度，则显示滚动条
}
.table-container {
border-right: 1px solid #e9ecef; // 可选：在表格和表单之间添加分隔线
}
}
</style>
src/views/dataSourceManage/driveManage/drive.data.ts 0 → 100644
View file @ b8469bbb
import {BasicColumn, FormSchema} from "@/components/Table";
// 表头参数
export const columns: BasicColumn[any] = [
{
title: '驱动类型',
dataIndex: 'driveType',
width: 150,
},
{
title: '驱动版本',
dataIndex: 'driveVersion',
width: 150,
},
{
title: '驱动类名',
dataIndex: 'driveClass',
width: 150,
},
{
title: '驱动文件',
dataIndex: 'driveFile',
width: 150,
},
]
// 表单
export const formSchema: FormSchema[] = [
{
field: 'driveType',
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: 'driveVersion',
label: '驱动版本',
component: 'Input',
required: true,
},
{
field: 'driveClass',
label: '驱动类名',
component: 'Input',
required: true,
},
{
field: 'driveFile',
label: '驱动文件',
component: 'Input',
required: true,
},
]
src/views/dataSourceManage/driveManage/driveData.ts 0 → 100644
View file @ b8469bbb
// 数据源-连接-驱动管理 列表数据
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"],
},
{
"driveType": "MySQL",
"driveVersion": "mysql8",
"driveClass": "com.mysql.cj.jdbc.Driver",
"driveFile": ["mysql-connector-java-8.0.23.jar"],
},
{
"driveType": "PostgreSQL",
"driveVersion": "postgresql42",
"driveClass": "org.postgresql.Driver",
"driveFile": ["postgresql-42.2.5.jar"],
},
{
"driveType": "SQLServer",
"driveVersion": "sqlserver4",
"driveClass": "com.microsoft.sqlserver.jdbc.SQLServerDriver",
"driveFile": ["mssql-jdbc-7.4.1.jre8.jar"],
},
{
"driveType": "SQLite",
"driveVersion": "sqlite3",
"driveClass": "org.sqlite.JDBC",
"driveFile": ["sqlite-jdbc-3.34.0.jar"],
}
];
// 数据源-连接-Krb5管理 数据
export const krbFiveData: any = {
"defaultPath": "krb5.conf",
"fileName": "configFile",
}
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