349 lines
12 KiB
Vue
349 lines
12 KiB
Vue
<template>
|
||
<div class="sys-database-container">
|
||
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }">
|
||
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
|
||
<el-row :gutter="10">
|
||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||
<el-form-item label="库名" prop="configId">
|
||
<el-select v-model="state.configId" placeholder="库名" filterable @change="handleQueryTable">
|
||
<el-option v-for="item in state.dbData" :key="item" :label="item" :value="item" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
|
||
<el-form-item label="表名" prop="tableName">
|
||
<el-select v-model="state.tableName" placeholder="表名" filterable clearable @change="handleQueryColumn">
|
||
<el-option v-for="item in state.tableData" :key="item.name" :label="`${item.name}${item.description ? '[' + item.description + ']' : ''}`" :value="item.name" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</el-card>
|
||
|
||
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
|
||
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options">
|
||
<template #toolbar_buttons>
|
||
<el-button-group>
|
||
<el-button icon="ele-Plus" type="primary" @click="handleAddTable"> 增加表 </el-button>
|
||
<el-button icon="ele-Edit" type="primary" @click="showEditTable"> 编辑表 </el-button>
|
||
<el-button icon="ele-Delete" type="danger" @click="handleDeleteTable"> 删除表 </el-button>
|
||
</el-button-group>
|
||
<el-button-group style="padding-left: 12px; padding-right: 12px">
|
||
<el-button icon="ele-Plus" @click="showAddColumn"> 增加列 </el-button>
|
||
<el-button icon="ele-Plus" @click="showGenDialog"> 生成实体 </el-button>
|
||
<el-popover placement="bottom" title="🔔提示" :width="220" trigger="hover" content="如果是刚刚生成的实体，请重启后台服务后再生成种子。">
|
||
<template #reference>
|
||
<el-button icon="ele-Plus" @click="showGenSeedDataDialog"> 生成种子 </el-button>
|
||
</template>
|
||
</el-popover>
|
||
</el-button-group>
|
||
<el-button icon="ele-View" type="primary" @click="visualTable" plain> 可视化 </el-button>
|
||
</template>
|
||
<template #toolbar_tools> </template>
|
||
<template #empty>
|
||
<el-empty :image-size="200" />
|
||
</template>
|
||
<template #row_isPrimarykey="{ row }">
|
||
<el-tag type="success" v-if="row.isPrimarykey === true">是</el-tag>
|
||
<el-tag type="info" v-else>否</el-tag>
|
||
</template>
|
||
<template #row_isIdentity="{ row }">
|
||
<el-tag type="success" v-if="row.isIdentity === true">是</el-tag>
|
||
<el-tag type="info" v-else>否</el-tag>
|
||
</template>
|
||
<template #row_isNullable="{ row }">
|
||
<el-tag v-if="row.isNullable === true">是</el-tag>
|
||
<el-tag type="info" v-else>否</el-tag>
|
||
</template>
|
||
<template #row_buttons="{ row }">
|
||
<el-tooltip content="编辑" placement="top">
|
||
<el-button icon="ele-Edit" text type="primary" @click="showEditColumn(row)"> </el-button>
|
||
</el-tooltip>
|
||
<el-tooltip content="删除" placement="top">
|
||
<el-button icon="ele-Delete" text type="danger" @click="handleDeleteColumn(row)"> </el-button>
|
||
</el-tooltip>
|
||
</template>
|
||
</vxe-grid>
|
||
</el-card>
|
||
|
||
<EditTable ref="editTableRef" @handleQueryTable="handleQueryTable" />
|
||
<EditColumn ref="editColumnRef" @handleQueryColumn="handleQueryColumn" />
|
||
<AddTable ref="addTableRef" @addTableSubmitted="addTableSubmitted" />
|
||
<AddColumn ref="addColumnRef" @handleQueryColumn="handleQueryColumn" />
|
||
<GenEntity ref="genEntityRef" :application-namespaces="state.appNamespaces" />
|
||
<GenSeedData ref="genSeedDataRef" :application-namespaces="state.appNamespaces" />
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup name="sysDatabase">
|
||
import { onMounted, reactive, ref } from 'vue';
|
||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||
import { useRouter } from 'vue-router';
|
||
import { VxeGridInstance } from 'vxe-table';
|
||
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
|
||
|
||
import EditTable from '/@/views/system/database/component/editTable.vue';
|
||
import EditColumn from '/@/views/system/database/component/editColumn.vue';
|
||
import AddTable from '/@/views/system/database/component/addTable.vue';
|
||
import AddColumn from '/@/views/system/database/component/addColumn.vue';
|
||
import GenEntity from '/@/views/system/database/component/genEntity.vue';
|
||
import GenSeedData from '/@/views/system/database/component/genSeedData.vue';
|
||
|
||
import { getAPI } from '/@/utils/axios-utils';
|
||
import { SysDatabaseApi, SysCodeGenApi } from '/@/api-services/api';
|
||
import { DbColumnOutput, DbTableInfo, DbColumnInput, DeleteDbTableInput, DeleteDbColumnInput } from '/@/api-services/models';
|
||
|
||
const xGrid = ref<VxeGridInstance>();
|
||
const editTableRef = ref<InstanceType<typeof EditTable>>();
|
||
const editColumnRef = ref<InstanceType<typeof EditColumn>>();
|
||
const addTableRef = ref<InstanceType<typeof AddTable>>();
|
||
const addColumnRef = ref<InstanceType<typeof AddColumn>>();
|
||
const genEntityRef = ref<InstanceType<typeof GenEntity>>();
|
||
const genSeedDataRef = ref<InstanceType<typeof GenSeedData>>();
|
||
const router = useRouter();
|
||
const state = reactive({
|
||
loading: false,
|
||
dbData: [] as any,
|
||
configId: '',
|
||
tableData: [] as Array<DbTableInfo>,
|
||
tableName: '',
|
||
queryParams: {
|
||
name: undefined,
|
||
code: undefined,
|
||
},
|
||
visible: false,
|
||
title: '',
|
||
appNamespaces: [] as Array<String>, // 存储位置
|
||
});
|
||
|
||
// 表格参数配置
|
||
const options = useVxeTable<DbColumnOutput>(
|
||
{
|
||
id: 'sysDatabase',
|
||
name: '库表信息',
|
||
columns: [
|
||
// { type: 'checkbox', width: 40, fixed: 'left' },
|
||
{ type: 'seq', title: '序号', width: 50, fixed: 'left' },
|
||
{ field: 'dbColumnName', title: '字段名', minWidth: 200, showOverflow: 'tooltip' },
|
||
{ field: 'dataType', title: '数据类型', minWidth: 120, showOverflow: 'tooltip' },
|
||
{ field: 'isPrimarykey', title: '主键', minWidth: 70, slots: { default: 'row_isPrimarykey' } },
|
||
{ field: 'isIdentity', title: '自增', minWidth: 70, slots: { default: 'row_isIdentity' } },
|
||
{ field: 'isNullable', title: '可空', minWidth: 70, slots: { default: 'row_isNullable' } },
|
||
{ field: 'length', title: '长度', minWidth: 80, showOverflow: 'tooltip' },
|
||
{ field: 'decimalDigits', title: '精度', minWidth: 80, showOverflow: 'tooltip' },
|
||
{ field: 'defaultValue', title: '默认值', minWidth: 80, showOverflow: 'tooltip' },
|
||
{ field: 'columnDescription', title: '描述', minWidth: 200, showOverflow: 'tooltip' },
|
||
{ title: '操作', fixed: 'right', width: 100, showOverflow: true, slots: { default: 'row_buttons' } },
|
||
],
|
||
},
|
||
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
|
||
{
|
||
// 代理配置
|
||
proxyConfig: { autoLoad: true, ajax: { query: () => handleQueryColumnApi() } },
|
||
// 分页配置
|
||
pagerConfig: { enabled: false },
|
||
// 工具栏配置
|
||
toolbarConfig: { export: true },
|
||
}
|
||
);
|
||
|
||
// 页面初始化
|
||
onMounted(async () => {
|
||
options.loading = true;
|
||
let res = await getAPI(SysDatabaseApi).apiSysDatabaseListGet();
|
||
state.dbData = res.data.result;
|
||
|
||
let appNamesRes = await getAPI(SysCodeGenApi).apiSysCodeGenApplicationNamespacesGet();
|
||
state.appNamespaces = appNamesRes.data.result as Array<string>;
|
||
options.loading = false;
|
||
});
|
||
|
||
// 查询列api
|
||
const handleQueryColumnApi = async () => {
|
||
if (state.tableName == '' || typeof state.tableName == 'undefined') {
|
||
return;
|
||
}
|
||
return getAPI(SysDatabaseApi).apiSysDatabaseColumnListTableNameConfigIdGet(state.tableName, state.configId);
|
||
};
|
||
|
||
// 查询列操作
|
||
const handleQueryColumn = async () => {
|
||
options.loading = true;
|
||
await xGrid.value?.commitProxy('query');
|
||
options.loading = false;
|
||
};
|
||
|
||
// 增加表
|
||
const addTableSubmitted = async (e: any) => {
|
||
await handleQueryTable();
|
||
state.tableName = e;
|
||
await handleQueryColumn();
|
||
};
|
||
|
||
// 表查询操作
|
||
const handleQueryTable = async () => {
|
||
state.tableName = '';
|
||
xGrid.value?.loadData([]);
|
||
options.loading = true;
|
||
var res = await getAPI(SysDatabaseApi).apiSysDatabaseTableListConfigIdGet(state.configId);
|
||
let tableData = res.data.result ?? [];
|
||
state.tableData = [];
|
||
tableData.forEach((element: any) => {
|
||
// 排除zero_开头的表
|
||
if (!element.name.startsWith('zero_')) {
|
||
state.tableData.push(element);
|
||
}
|
||
});
|
||
options.loading = false;
|
||
};
|
||
|
||
// 打开表编辑页面
|
||
const showEditTable = () => {
|
||
if (state.configId == '' || state.tableName == '') {
|
||
ElMessage({ type: 'error', message: `请选择库名和表名!` });
|
||
return;
|
||
}
|
||
var res = state.tableData.filter((u: any) => u.name == state.tableName);
|
||
var table: any = {
|
||
configId: state.configId,
|
||
tableName: state.tableName,
|
||
oldTableName: state.tableName,
|
||
description: res[0].description,
|
||
};
|
||
editTableRef.value?.openDialog(table);
|
||
};
|
||
|
||
// 打开实体生成页面
|
||
const showGenDialog = () => {
|
||
if (state.configId == '' || state.tableName == '') {
|
||
ElMessage({ type: 'error', message: `请选择库名和表名!` });
|
||
return;
|
||
}
|
||
// var res = state.tableData.filter((u: any) => u.name == state.tableName);
|
||
var table: any = {
|
||
configId: state.configId,
|
||
tableName: state.tableName,
|
||
position: state.appNamespaces[0],
|
||
};
|
||
genEntityRef.value?.openDialog(table);
|
||
};
|
||
|
||
// 生成种子数据页面
|
||
const showGenSeedDataDialog = () => {
|
||
if (state.configId == '' || state.tableName == '') {
|
||
ElMessage({ type: 'error', message: `请选择库名和表名!` });
|
||
return;
|
||
}
|
||
var table: any = {
|
||
configId: state.configId,
|
||
tableName: state.tableName,
|
||
position: state.appNamespaces[0],
|
||
};
|
||
genSeedDataRef.value?.openDialog(table);
|
||
};
|
||
|
||
// 打开表增加页面
|
||
const handleAddTable = () => {
|
||
if (state.configId == '') {
|
||
ElMessage({ type: 'error', message: `请选择库名!` });
|
||
return;
|
||
}
|
||
var table: any = {
|
||
configId: state.configId,
|
||
tableName: '',
|
||
oldTableName: '',
|
||
description: '',
|
||
};
|
||
addTableRef.value?.openDialog(table);
|
||
};
|
||
|
||
// 打开列编辑页面
|
||
const showEditColumn = (row: any) => {
|
||
var column: any = {
|
||
configId: state.configId,
|
||
tableName: row.tableName,
|
||
columnName: row.dbColumnName,
|
||
oldColumnName: row.dbColumnName,
|
||
description: row.columnDescription,
|
||
};
|
||
editColumnRef.value?.openDialog(column);
|
||
};
|
||
|
||
// 打开列增加页面
|
||
const showAddColumn = () => {
|
||
if (state.configId == '' || state.tableName == '') {
|
||
ElMessage({ type: 'error', message: `请选择库名和表名!` });
|
||
return;
|
||
}
|
||
const addRow: DbColumnInput = {
|
||
configId: state.configId,
|
||
tableName: state.tableName,
|
||
columnDescription: '',
|
||
dataType: '',
|
||
dbColumnName: '',
|
||
decimalDigits: 0,
|
||
isIdentity: 0,
|
||
isNullable: 0,
|
||
isPrimarykey: 0,
|
||
length: 0,
|
||
// key: 0,
|
||
// editable: true,
|
||
// isNew: true,
|
||
};
|
||
addColumnRef.value?.openDialog(addRow);
|
||
};
|
||
|
||
// 删除表
|
||
const handleDeleteTable = () => {
|
||
if (state.tableName == '') {
|
||
ElMessage({ type: 'error', message: `请选择表名!` });
|
||
return;
|
||
}
|
||
ElMessageBox.confirm(`确定删除表：【${state.tableName}】?`, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
.then(async () => {
|
||
const deleteDbTableInput: DeleteDbTableInput = {
|
||
configId: state.configId,
|
||
tableName: state.tableName,
|
||
};
|
||
await getAPI(SysDatabaseApi).apiSysDatabaseDeleteTablePost(deleteDbTableInput);
|
||
await handleQueryTable();
|
||
ElMessage.success('表删除成功');
|
||
})
|
||
.catch(() => {});
|
||
};
|
||
|
||
// 删除列
|
||
const handleDeleteColumn = (row: any) => {
|
||
ElMessageBox.confirm(`确定删除列：【${row.dbColumnName}】?`, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
.then(async () => {
|
||
const eleteDbColumnInput: DeleteDbColumnInput = {
|
||
configId: state.configId,
|
||
tableName: state.tableName,
|
||
dbColumnName: row.dbColumnName,
|
||
};
|
||
await getAPI(SysDatabaseApi).apiSysDatabaseDeleteColumnPost(eleteDbColumnInput);
|
||
await handleQueryTable();
|
||
ElMessage.success('列删除成功');
|
||
})
|
||
.catch(() => {});
|
||
};
|
||
|
||
// 可视化表
|
||
const visualTable = () => {
|
||
if (state.configId == '') {
|
||
ElMessage({ type: 'error', message: `请选择库名!` });
|
||
return;
|
||
}
|
||
router.push(`/develop/database/visual?configId=${state.configId}`);
|
||
};
|
||
</script>
|