feat: 数据源add/edit/list/delete

src/api/codeGenerate/database.ts

@@ -0,0 +1,73 @@
+import request from '@/utils/request'
+import { AxiosPromise } from 'axios'
+
+// apiUrl 数据库管理
+const api = {
+	page: '/gen/database/page',
+	create: '/gen/database/create',
+	update: '/gen/database/update',
+	delete: '/gen/database/delete',
+	listSelectOptions: '/gen/database/list-select-options',
+	get: '/gen/database/get'
+}
+
+/**
+ * 数据库管理 - 分页列表
+ */
+function databasePageApi(data: any): AxiosPromise {
+	return request({
+		url: api.page,
+		method: 'post',
+		data
+	})
+}
+
+/**
+ * 数据库管理 - 创建或更新
+ */
+function databaseAddOrEditSaveApi(data: any): AxiosPromise {
+	return request({
+		url: data.id ? api.update : api.create,
+		method: 'post',
+		data
+	})
+}
+
+/**
+ * 数据库管理 - 删除
+ */
+function databaseDeleteApi(data: any): AxiosPromise {
+	return request({
+		url: api.delete,
+		method: 'post',
+		data
+	})
+}
+
+/**
+ * 数据库管理 - 下拉选项列表
+ */
+function databaseListSelectOptionsApi(): AxiosPromise {
+	return request({
+		url: api.listSelectOptions,
+		method: 'get'
+	})
+}
+
+/**
+ * 数据库管理 - 查询 ID 信息
+ */
+function databaseGetApi(id: any): AxiosPromise {
+	return request({
+		url: `${api.get}?id=${id}`,
+		method: 'get'
+	})
+}
+
+export default {
+	databasePageApi,
+	databaseAddOrEditSaveApi,
+	databaseDeleteApi,
+	databaseListSelectOptionsApi,
+	databaseGetApi
+}

src/views/codeGenerate/database/index.vue

@@ -0,0 +1,311 @@
+<template>
+	<div class="pageWrap bgc">
+		<div class="content-warp flex-column-page-wrap">
+			<!-- 公用搜索组件 -->
+			<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"></LeSearchForm>
+
+			<!--  LeTable 组件使用  -->
+			<LeTable
+				ref="tableRef"
+				v-model:searchParams="tableOpts.searchParams"
+				v-bind="tableOpts"
+				v-model:curRow="tableOpts.curRow"
+				v-model:checked-options="checkedColumns"
+				:columns="activeColumns"
+			>
+				<template #toolLeft>
+					<el-button
+						plain
+						:icon="Plus"
+						@click="addHandler"
+						type="primary">
+						新增</el-button>
+					<el-button plain :icon="Delete" :disabled="curSelectionRows.length === 0" @click="batch_del" type="danger">删除</el-button>
+				</template>
+
+				<template #actionSlot="{ row }">
+					<div class="flex flex-align-pack-center">
+						<LeIcon
+							class="text-lg text-icon-color cursor-pointer icon-mage--edit"
+							icon-class="icon-processInfo-mage--edit"
+							@click="table_edit(row)"
+						/>
+
+						<LeIcon class="text-lg ml-2 text-rose-700 cursor-pointer" icon-class="icon-processInfo-iconoir--trash" @click="table_del(row)" />
+					</div>
+				</template>
+			</LeTable>
+		</div>
+
+		<LeFormConfigDialog
+			v-if="visible"
+			ref="dialogUserRef"
+			v-model="visible"
+			:title="`${isCreate ? '新增' : '编辑'}应用`"
+			width="600px"
+			:form-data="activeData"
+			:form-options="formOptions"
+			@submit="submitHandler"
+		/>
+	</div>
+</template>
+<script lang="tsx" setup>
+import database from '@/api/codeGenerate/database'
+import { computed, nextTick, ref, watch } from 'vue'
+import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
+import { useTablePage } from '@/hooks/useTablePage'
+import { Plus, Delete } from '@element-plus/icons-vue'
+
+const visible = ref(false) // 弹窗显示隐藏
+const isCreate = ref(true)
+const activeData = ref({})
+const formsDialog = [
+	{
+		prop: 'type',
+		label: '类型',
+		itemType: 'select',
+		options: [
+			{ label: 'PostgreSQL', value: 'pgsql' },
+			{ label: 'MySQL', value: 'mysql' },
+			{ label: 'Oracle', value: 'oracle' }
+		],
+		rules: [{ required: true, message: '请选择类型', trigger: 'change' }]
+	},
+	{
+		prop: 'alias',
+		label: '别名',
+		itemType: 'input',
+		rules: [{ required: true, message: '请输入别名', trigger: 'blur' }]
+	},
+	{
+		prop: 'host',
+		label: '主机',
+		itemType: 'input',
+		rules: [{ required: true, message: '请输入主机', trigger: 'blur' }]
+	},
+	{
+		prop: 'port',
+		label: '端口',
+		itemType: 'inputNumber',
+		rules: [{ required: true, message: '请输入端口', trigger: 'blur' }]
+	},
+	{
+		prop: 'database',
+		label: '库名称',
+		itemType: 'input',
+		rules: [{ required: true, message: '请输入库名称', trigger: 'blur' }]
+	},
+	{
+		prop: 'username',
+		label: '用户名',
+		itemType: 'input',
+		rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+	},
+	{
+		prop: 'password',
+		label: '密码',
+		itemType: 'input',
+		rules: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+	}
+]
+// 新增的表单 和 编辑的表单
+const formOptions = computed(() => {
+	return {
+		forms: formsDialog,
+		labelWidth: 120,
+		span: 30,
+		showResetBtn: true,
+		formConfig: {
+			showCancelBtn: true,
+			submitLoading: false
+		}
+	}
+})
+const groupFilterText = ref('')
+const treeRef = ref<InstanceType<typeof ElTree>>()
+
+// 表格搜索条件
+const forms = ref([
+	{
+		prop: 'alias',
+		label: '别名：',
+		itemType: 'input',
+		placeholder: '请输入别名'
+	},
+	{
+		prop: 'database',
+		label: '库名称：',
+		itemType: 'input',
+		placeholder: '请输入库名称'
+	},
+	{
+		prop: 'type',
+		label: '类型：',
+		itemType: 'select',
+		placeholder: '请选择类型',
+		options: [
+			{
+				label: 'PostgreSQL',
+				value: 'pgsql'
+			},
+			{
+				label: 'MySQL',
+				value: 'mysql'
+			},
+			{
+				label: 'Oracle',
+				value: 'oracle'
+			}
+		]
+	}
+])
+
+// table列表数据请求
+const queryList = async () => {
+	const { options, searchParams } = tableOpts
+	options.loading = true
+	try {
+		const { records: list, total } = await database.databasePageApi(searchParams)
+		tableOpts.total = total
+		tableOpts.list = list
+	} catch {
+		tableOpts.total = 0
+		tableOpts.list = []
+		options.loading = false // 更改加载中的 loading值
+	} finally {
+		options.loading = false
+	}
+}
+
+// table 参数
+const columns = [
+	{
+		prop: 'alias',
+		label: '别名'
+	},
+	{
+		prop: 'database',
+		label: '库名称',
+		minWidth: 100
+	},
+	{
+		prop: 'username',
+		label: '用户名'
+	},
+	{
+		prop: 'createTime',
+		label: '创建时间',
+		minWidth: 150
+	},
+	{
+		prop: 'action',
+		label: '操作',
+		align: 'center',
+		width: 100,
+		fixed: 'right',
+		slots: {
+			default: 'actionSlot'
+		}
+	}
+]
+
+const { searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams } = useTablePage(
+	{
+		options: {
+			showIndex: false,
+			defaultExpandAll: true
+		},
+		// 需要展示的列
+		columns,
+		// 控制列配置
+		columnsConfig: {
+			columns
+		}
+	},
+	{
+		queryList,
+		fetchImmediate: false
+	}
+)
+
+// 删除
+const deleteItem = async ids => {
+	// try {
+	await database.databaseDeleteApi(ids)
+	ElMessage.success(`删除成功~`)
+	updateParams()
+	// } catch (e) {
+	// 	console.log('删除失败')
+	// 	ElMessage.error(`删除失败~`)
+	// }
+}
+
+// 单个删除
+const table_del = (row: any) => {
+	ElMessageBox.confirm(`确认删除「${row.alias}」这条数据？`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'error'
+	}).then(async () => {
+		deleteItem([row.id])
+	})
+}
+
+//批量删除
+const batch_del = () => {
+	const ids = curSelectionRows.value.map(item => item.id) // 多选数据
+	ElMessageBox.confirm('是否删除选中数据？', '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'error',
+		buttonSize: 'default'
+	}).then(() => {
+		deleteItem(ids)
+	})
+}
+
+const table_edit = async row => {
+	isCreate.value = false
+	// 通过databaseGetApi获取
+	await database.databaseGetApi(row.id).then(res => {
+		activeData.value = res
+	})
+	visible.value = true
+}
+
+// 弹窗事件
+const submitHandler = async params => {
+	formOptions.value.formConfig.submitLoading = true
+	try {
+		params.id = activeData.value.id ? activeData.value.id : null
+		await database.databaseAddOrEditSaveApi(params)
+		ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)
+		visible.value = false
+		updateParams()
+		formOptions.value.formConfig.submitLoading = false
+	} catch (e) {
+		console.log(e)
+		formOptions.value.formConfig.submitLoading = false
+	}
+}
+
+const addHandler = () => {
+	isCreate.value = true
+	activeData.value = {}
+	visible.value = true
+}
+
+const getDataBaseOptions = async () => {
+	const { data } = await database.databaseListSelectOptionsApi()
+	console.log(data)
+}
+
+nextTick(() => {
+	getDataBaseOptions()
+	queryList()
+})
+
+watch(groupFilterText, val => {
+	treeRef.value!.filter(val)
+})
+</script>