Skip to content

B
bigDataSystem
Commit 1516e003 authored by liwei's avatar liwei
Browse files
Options

数据源连接页面

parent 2b1a2ec8
Show whitespace changes
Inline Side-by-side
Showing with 348 additions and 479 deletions
src/views/dataSourceManage/connect/ConnectModal.vue
View file @ 1516e003
......@@ -12,7 +12,7 @@
</BasicModal>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import {computed, ref, unref} from 'vue';
import {BasicForm, useForm} from '@/components/Form';
import {useModalInner} from '@/components/Modal';
import BasicModal from '@/components/Modal/src/BasicModal.vue';
......@@ -22,11 +22,13 @@ import {formSchema} from "@/views/dataSourceManage/connect/connect.data";
defineOptions({name: 'ConnectDrawer'});
const emit = defineEmits(['success', 'register']);
const {createMessage} = useMessage();
const isUpdate = ref(false)
// 初始化弹窗
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
resetFields();
setModalProps({loading: false, confirmLoading: false});
isUpdate.value = !!data?.isUpdate;
setFieldsValue({
...data.record
});
......@@ -39,10 +41,18 @@ const [registerForm, {resetFields, setFieldsValue, validate, setProps}] = useFor
showActionButtonGroup: false,
});
const getTitle = ref('查看连接');
const getTitle = computed(() => (!unref(isUpdate) ? '新增连接' : '编辑连接'));
/** 确认按钮 */
function handleSubmit() {
async function handleSubmit() {
const values = await validate();
if (unref(isUpdate)) {
createMessage.success('修改成功');
closeModal()
} else {
createMessage.success('新增成功');
closeModal()
}
closeModal()
}
</script>
src/views/dataSourceManage/connect/Krb5Modal.vue
View file @ 1516e003
......@@ -39,10 +39,12 @@ const [registerForm, {resetFields, setFieldsValue, validate, setProps}] = useFor
showActionButtonGroup: false,
});
const getTitle = ref('查看连接');
const getTitle = ref('Krb5管理');
/** 确认按钮 */
function handleSubmit() {
async function handleSubmit() {
const values = await validate();
createMessage.success('新增成功！')
closeModal()
}
</script>
src/views/dataSourceManage/connect/connect.data.ts
View file @ 1516e003
......@@ -220,7 +220,7 @@ export const kbr5FormSchema: FormSchema[any] = [
field: 'file',
component: 'Upload',
label: 'Kbr5文件',
rules: [{ required: true, message: '请选择上传文件' }],
rules: [{ required: false, message: '请选择上传文件' }],
componentProps: {
api: uploadApi,
},
......
src/views/dataSourceManage/connect/connectData.ts
View file @ 1516e003
......@@ -57,25 +57,6 @@ export const connectListData: any[] = [
"updateDate": "2024-10-25 11:05:05",
"hdfsMap":"hive"
},
{
"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",
"hdfsMap":"hive"
},
{
"id": 4,
"connectName": "oracle",
......@@ -113,176 +94,144 @@ export const connectListData: any[] = [
"updateBy": "admin",
"updateDate": "2024-10-28 14:08:08",
"hdfsMap":"hive"
},
}
];
export const dataSourceTreeData: any[] = [
{
"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",
"hdfsMap":"hive"
"delFlag" : "0",
"flag" : "1",
"businessId" : 100,
"fileName" : "全部数据源",
"anotherName" : "全部数据源",
"parentId" : 0,
"code:": "001",
"ancestors" : "0",
"orderNum" : 0,
"selectType" : null,
"location":"/任务流",
"holder":"admin",
"createDate": "2024-10-24 10:04:04",
"updateDate": "2024-10-24 10:04:04",
icon:'ant-design:partition-outlined'
},
{
"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",
"hdfsMap":"hive"
"delFlag" : "0",
"flag" : "1",
"businessId" : 101,
"fileName" : "共享工作区",
"anotherName" : "共享工作区",
"parentId" : 100,
"code:": "002",
"ancestors" : "0,100",
"orderNum" : 1,
"selectType" : null,
"location":"/任务流/典型案例",
"holder":"admin",
"createDate": "2024-10-24 10:04:04",
"updateDate": "2024-10-24 10:04:04",
icon:'ant-design:team-outlined'
},
{
"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",
"hdfsMap":"hive"
"delFlag" : "0",
"flag" : "1",
"businessId" : 107,
"fileName" : "个人工作区",
"anotherName" : "个人工作区",
"parentId" : 100,
"code:": "003",
"ancestors" : "0,100",
"orderNum" : 2,
"selectType" : null,
"location":"/任务流/个人体验",
"holder":"admin",
"createDate": "2024-10-24 10:04:04",
"updateDate": "2024-10-24 10:04:04",
icon:'ant-design:team-outlined'
},
{
"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",
"hdfsMap":"hive"
"delFlag" : "0",
"flag" : "1",
"businessId" : 201,
"fileName" : "Inceptor",
"anotherName" : "Inceptor",
"parentId" : 101,
"code:": "005",
"ancestors" : "0,100,101",
"orderNum" : 2,
"selectType" : null,
"location":"/任务流/典型案例/总-智慧财务总体流程",
"holder":"admin",
"createDate": "2024-10-22 8:04:04",
"updateDate": "2024-10-22 8:04:04",
icon:'ant-design:api-twotone'
},
{
"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",
"hdfsMap":"hive"
"delFlag" : "0",
"flag" : "1",
"businessId" : 202,
"fileName" : "hive",
"anotherName" : "hive",
"parentId" : 101,
"code:": "006",
"ancestors" : "0,100,101",
"orderNum" : 3,
"selectType" : null,
"location":"/任务流/典型案例/分-落地区",
"holder":"admin",
"createDate": "2024-10-21 9:04:04",
"updateDate": "2024-10-21 9:04:04",
icon:'ant-design:api-twotone'
},
{
"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",
"hdfsMap":"hive"
"delFlag" : "0",
"flag" : "1",
"businessId" : 203,
"fileName" : "mysql",
"anotherName" : "mysql",
"parentId" : 101,
"code:": "008",
"ancestors" : "0,100,101",
"orderNum" : 5,
"selectType" : null,
"location":"/任务流/典型案例/分-改良区",
"holder":"admin",
"createDate": "2024-10-23 12:04:04",
"updateDate": "2024-10-23 12:04:04",
icon:'ant-design:api-twotone'
},
{
"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",
"hdfsMap":"hive"
"delFlag" : "0",
"flag" : "1",
"businessId" : 204,
"fileName" : "oracle",
"anotherName" : "oracle",
"parentId" : 107,
"code:": "009",
"ancestors" : "0,100,107",
"orderNum" : 1,
"selectType" : null,
"location":"/任务流/典型案例/分-个人体验1",
"holder":"admin",
"createDate": "2024-10-24 13:04:04",
"updateDate": "2024-10-24 13:04:04",
icon:'ant-design:api-twotone'
},
{
"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",
"hdfsMap":"hive"
"delFlag" : "0",
"flag" : "0",
"businessId" : 205,
"fileName" : "sqlserver",
"anotherName" : "sqlserver",
"parentId" : 107,
"code:": "010",
"ancestors" : "0,100,107",
"orderNum" : 2,
"selectType" : null,
"location":"/任务流/典型案例/分-个人体验2",
"holder":"admin",
"createDate": "2024-10-24 14:04:04",
"updateDate": "2024-10-25 14:04:04",
icon:'ant-design:api-twotone'
},
{
"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",
"hdfsMap":"hive"
}
];
src/views/dataSourceManage/connect/dataSourceTree.vue
View file @ 1516e003
......@@ -20,7 +20,7 @@
import {h, nextTick, onMounted, ref, unref} from 'vue';
import {BasicTree, ContextMenuItem, TreeActionType, TreeItem} from '@/components/Tree';
import {Nullable} from "@vben/types";
import { TreeData } from "@/views/commonFile/commonFileData";
import { dataSourceTreeData } from "@/views/dataSourceManage/connect/connectData";
import {EventDataNode} from "ant-design-vue/es/vc-tree/interface";
import {PlusOutlined,EllipsisOutlined} from "@ant-design/icons-vue";
import {useMessage} from "@/hooks/web/useMessage";
......@@ -43,7 +43,7 @@ function getTree() {
}
async function fetch() {
const data = TreeData
const data = dataSourceTreeData
treeData.value = handleTree(data, 'businessId',undefined,undefined,undefined)
await nextTick(() => {
getTree().expandAll(true)
......
src/views/dataSourceManage/connect/index.vue
View file @ 1516e003
......@@ -77,7 +77,7 @@
import {fileData, TreeData} from "@/views/commonFile/commonFileData";
import {connectListData} from "@/views/dataSourceManage/connect/connectData";
import KrbFiveModal from "@/views/dataSourceManage/driveManage/KrbFiveModal.vue";
import DriveModal from "@/views/dataSourceManage/driveManage/DriveModal.vue";
import DriveModal from "@/views/dataSourceManage/driveManage/TableModal.vue";
import ConnectModal from "@/views/dataSourceManage/connect/ConnectModal.vue";
import ResetNameModal from "@/views/dataSourceManage/connect/resetNameModal.vue";
import Krb5Modal from "@/views/dataSourceManage/connect/Krb5Modal.vue";
......@@ -146,6 +146,7 @@
/** 刷新 按钮 */
function handleReload() {
createMessage.success('刷新成功！')
reload();
}
......@@ -174,7 +175,7 @@
/** 删除 按钮 */
async function handleDelete(record: Recordable) {
createMessage.success('删除成功!');
}
/** 连接 按钮 */
......
src/views/dataSourceManage/connect/index1.vue deleted 100644 → 0
View file @ 2b1a2ec8
<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 {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 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 [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',
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) {
openConnectDrawer(true, {
isUpdate: true,
record
});
}
/** 编辑 按钮 */
function handleEdit(record: Recordable) {
openConnectDrawer(true, {
isUpdate: true,
record
});
}
/** 删除 按钮 */
async function handleDelete(record: Recordable) {
await deleteById(record.id);
await reload();
}
/** 连接 按钮 */
function handleConnect(record: Recordable) {
const connectName = record.connectName
createMessage.info('正在尝试连接：' + connectName);
setTimeout(() => {
createMessage.success(connectName + '测试连接成功');
}, Math.floor(Math.random() * 2000) + 100)
}
/** 终止连接 按钮 */
function handleStopConnect(record: Recordable) {
const connectName = record.connectName
createMessage.info('正在终止连接：' + connectName);
setTimeout(() => {
createMessage.success(connectName + '连接已终止');
}, Math.floor(Math.random() * 1500) + 100)
}
/** 查看详情 按钮 */
function handleDetails(record: Recordable) {
// openDrawer(true, {
// record,
// isUpdate: true,
// });
}
/** 成功时返回的方法 */
function handleSuccess() {
reload();
}
</script>
src/views/dataSourceManage/driveManage/DriveModal.vue
View file @ 1516e003
<template>
<!-- 驱动管理 -->
<!-- 数据源-连接-新增或修改 弹窗 -->
<BasicModal
v-bind="$attrs"
width="60%"
@register="registerModal"
showFooter
:title="getTitle"
width="35%"
@ok="handleSubmit"
>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleDriverAdd">新增驱动</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'actions'">
<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>
<BasicForm @register="registerForm"/>
</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';
<script lang="ts" setup>
import {computed, ref, unref} from 'vue';
import {BasicForm, useForm} from '@/components/Form';
import {useModalInner} from '@/components/Modal';
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";
import {driveListData} from "@/views/dataSourceManage/driveManage/driveData";
import {useMessage} from "@/hooks/web/useMessage";
import {formSchema} from "@/views/dataSourceManage/connect/connect.data";
import {driveFormSchema, searchSchema} from "@/views/dataSourceManage/driveManage/drive.data";
defineOptions({name: 'DriveModal'});
const [registerAddAndUpdateModal, {openModal}] = useModal();
const getTitle = ref('驱动管理');
const {createMessage} = useMessage();
defineOptions({name: 'ConnectDrawer'});
const emit = defineEmits(['success', 'register']);
const formData = ref({});
const [registerTable, {reload, getForm}] = useTable({
title: '驱动管理',
api: async (params) => {
//过滤掉tableData.value中，businessId等于100的
var data = [];
data = driveListData
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: data.length,
code:'',
message:'',
data: [],
};
//过滤data中的数据，取出等于params.deptId的数据
return { ...response,data: data };
},
columns,
useSearchForm: false,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 150,
title: '操作',
dataIndex: 'actions',
fixed: undefined,
},
const {createMessage} = useMessage();
const isUpdate = ref(false)
// 初始化弹窗
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
resetFields();
setModalProps({loading: false, confirmLoading: false});
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
setFieldsValue({
...data.record
});
}
});
const [registerModal, {closeModal, setModalProps}] = useModalInner(async (data) => {
setModalProps({confirmLoading: false});
const [registerForm, {resetFields, setFieldsValue, validate, setProps}] = useForm({
labelWidth: 90,
baseColProps: {span: 24},
schemas: driveFormSchema,
showActionButtonGroup: false,
});
/** 新增驱动 */
function handleDriverAdd() {
openModal(true, {
isUpdate: false,
});
}
/** 编辑按钮 */
function handleEdit(record: Recordable) {
openModal(true, {
isUpdate: true,
record
});
}
/** 删除按钮 */
function handleDelete(record: Recordable) {
reload()
}
const getTitle = computed(() => (!unref(isUpdate) ? '新增驱动' : '编辑驱动'));
/** 确认按钮 */
function handleSubmit() {
async function handleSubmit() {
const values = await validate();
if (unref(isUpdate)) {
createMessage.success('修改成功');
closeModal()
} else {
createMessage.success('新增成功');
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>
</script>
src/views/dataSourceManage/driveManage/TableModal.vue 0 → 100644
View file @ 1516e003
<template>
<BasicModal width="50%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleAddButton">新增驱动</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
label: '删除',
color: 'error',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
{
label: '编辑',
onClick: handleEdit.bind(null, record),
},
]"
/>
</template>
</template>
</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 } 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";
defineOptions({ name: 'AccountManagement' });
const { createMessage } = useMessage();
const [registerDriverModal, { openModal: openDriverModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const emit = defineEmits(['success', 'register']);
const tableData = ref([])
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '驱动列表',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: driveListData.length,
code:'',
message:'',
data: driveListData,
};
return { ...response, data: driveListData };
},
columns,
rowSelection: false,
formConfig: {
labelWidth: 100,
schemas: searchSchema,
autoSubmitOnEnter: false,
},
useSearchForm: true,
showTableSetting: false,
showIndexColumn: true,
bordered: true,
actionColumn: {
width: 100,
title: '操作',
dataIndex: 'action',
},
});
//初始化弹框
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/driveManage/drive.data.ts
View file @ 1516e003
import {BasicColumn, FormSchema} from "@/components/Table";
import {uploadApi} from "@/api/sys/upload";
// 表头参数
export const columns: BasicColumn[any] = [
......@@ -24,6 +25,18 @@ export const columns: BasicColumn[any] = [
},
]
// 表头参数
export const searchSchema: BasicColumn[any] = [
{
field: 'driveType',
component: 'Input',
componentProps: {
placeholder: '输入驱动类型',
},
colProps: {span: 7},
},
]
// 表单
export const formSchema: FormSchema[] = [
{
......@@ -83,6 +96,41 @@ export const formSchema: FormSchema[] = [
field: 'driveFile',
label: '驱动文件',
component: 'Input',
required: false,
},
]
// 添加/修改驱动 表头
export const driveFormSchema: FormSchema[any] = [
{
field: 'driveType',
label: '驱动类型',
component: 'Input',
required: true,
labelWidth: 150,
},
{
field: 'driveVersion',
label: '驱动版本',
component: 'Input',
required: true,
labelWidth: 150,
},
{
field: 'driveClass',
label: '驱动类名',
component: 'Input',
required: true,
labelWidth: 150,
},
{
field: 'driveFile',
component: 'Upload',
label: '驱动文件',
rules: [{ required: false, message: '请选择上传文件' }],
componentProps: {
api: uploadApi,
},
labelWidth: 150,
},
]
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