😎调整库表格管理页面
This commit is contained in:
zuohuaijun
parent
261ef806cb
commit
2c04c899f4
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
|
||||
<el-row :gutter="35">
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="列名" prop="dbColumnName" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
|
||||
<el-input v-model="state.ruleForm.dbColumnName" placeholder="列名称" clearable />
|
||||
@ -72,10 +72,11 @@
|
||||
<script lang="ts" setup name="sysAddColumn">
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
import { dataTypeList, yesNoSelect } from '../database';
|
||||
|
||||
import { getAPI } from '/@/utils/axios-utils';
|
||||
import { SysDatabaseApi } from '/@/api-services/api';
|
||||
import { DbColumnInput } from '/@/api-services/models';
|
||||
import { dataTypeList, yesNoSelect } from '../database';
|
||||
|
||||
const emits = defineEmits(['handleQueryColumn']);
|
||||
const ruleFormRef = ref();
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="sys-dbTable-container">
|
||||
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="1400px">
|
||||
<el-dialog v-model="state.visible" :z-index="2008" draggable :close-on-click-modal="false" width="70vw">
|
||||
<template #header>
|
||||
<div style="color: #fff">
|
||||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
|
||||
<span> 增加表 </span>
|
||||
</div>
|
||||
</template>
|
||||
<el-divider content-position="left">数据表信息</el-divider>
|
||||
<el-divider content-position="left" style="margin: 10px 0 18px 0">数据表信息</el-divider>
|
||||
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
|
||||
<el-row :gutter="35">
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="表名称" prop="tableName" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
|
||||
<el-input v-model="state.ruleForm.tableName" placeholder="表名称" clearable />
|
||||
@ -22,69 +22,21 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-divider content-position="left">数据列信息</el-divider>
|
||||
<el-table :data="state.tableData" style="width: 100%" max-height="400">
|
||||
<el-table-column prop="dbColumnName" label="字段名" width="220" fixed>
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.dbColumnName" autocomplete="off" />
|
||||
<el-divider content-position="left" style="margin: 10px 0 18px 0">数据列信息</el-divider>
|
||||
<div style="height: calc(90vh - 252px)">
|
||||
<vxe-grid ref="xGrid" class="xGrid-table-style" v-bind="options">
|
||||
<template #toolbar_buttons>
|
||||
<el-button icon="ele-Plus" @click="addPrimaryColumn">新增主键字段</el-button>
|
||||
<el-button icon="ele-Plus" @click="addColumn">新增普通字段</el-button>
|
||||
<el-button icon="ele-Plus" @click="addTenantColumn">新增租户字段</el-button>
|
||||
<el-button icon="ele-Plus" @click="addBaseColumn">新增基础字段</el-button>
|
||||
<el-button icon="ele-Delete" type="danger" @click="deleteSelected">删除选中</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="columnDescription" label="描述" width="220">
|
||||
<template #default="scope">
|
||||
<el-input v-model="scope.row.columnDescription" autocomplete="off" />
|
||||
<template #toolbar_tools> </template>
|
||||
<template #empty>
|
||||
<el-empty :image-size="200" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isPrimarykey" label="主键" width="100">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.isPrimarykey" class="m-2" placeholder="Select">
|
||||
<el-option v-for="item in yesNoSelect" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isIdentity" label="自增" width="100">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.isIdentity" class="m-2" placeholder="Select">
|
||||
<el-option v-for="item in yesNoSelect" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="dataType" label="类型" width="150">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.dataType" class="m-2" placeholder="Select">
|
||||
<el-option v-for="item in dataTypeList" :key="item.value" :label="item.value" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isNullable" label="可空" width="100">
|
||||
<template #default="scope">
|
||||
<el-select v-model="scope.row.isNullable" class="m-2" placeholder="Select">
|
||||
<el-option v-for="item in yesNoSelect" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="length" label="长度" width="100">
|
||||
<template #default="scope">
|
||||
<el-input-number v-model="scope.row.length" controls-position="right" class="w100" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="decimalDigits" label="小数位" width="100">
|
||||
<template #default="scope">
|
||||
<el-input-number v-model="scope.row.decimalDigits" controls-position="right" class="w100" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="200" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" icon="el-icon-delete" @click.prevent="handleColDelete(scope.$index)">删除</el-button>
|
||||
<el-button v-if="state.tableData.length > 1" link type="primary" icon="ele-Top" @click.prevent="handleColUp(scope.row, scope.$index)">上移</el-button>
|
||||
<el-button v-if="state.tableData.length > 1" link type="primary" icon="ele-Bottom" @click.prevent="handleColDown(scope.row, scope.$index)">下移</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="text-align: left; margin-top: 10px">
|
||||
<el-button icon="ele-Plus" @click="addPrimaryColumn">新增主键字段</el-button>
|
||||
<el-button icon="ele-Plus" @click="addColumn">新增普通字段</el-button>
|
||||
<el-button icon="ele-Plus" @click="addTenantColumn">新增租户字段</el-button>
|
||||
<el-button icon="ele-Plus" @click="addBaseColumn">新增基础字段</el-button>
|
||||
</vxe-grid>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
@ -97,56 +49,251 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="sysAddTable">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
<script lang="tsx" setup name="sysAddTable">
|
||||
import { nextTick, reactive, ref } from 'vue';
|
||||
import { ElMessage, dayjs } from 'element-plus';
|
||||
import { VxeGridInstance, VxeGridProps } from 'vxe-table';
|
||||
import { Rank } from '@element-plus/icons-vue';
|
||||
import Sortable from 'sortablejs';
|
||||
import { dataTypeList } from '../database';
|
||||
|
||||
import { getAPI } from '/@/utils/axios-utils';
|
||||
import { SysDatabaseApi } from '/@/api-services/api';
|
||||
import { UpdateDbTableInput } from '/@/api-services/models';
|
||||
import { dataTypeList, EditRecordRow, yesNoSelect } from '../database';
|
||||
|
||||
var colIndex = 0;
|
||||
const xGrid = ref<VxeGridInstance>();
|
||||
let initTime: any;
|
||||
const emits = defineEmits(['addTableSubmitted']);
|
||||
const ruleFormRef = ref();
|
||||
const state = reactive({
|
||||
isShowDialog: false,
|
||||
visible: false,
|
||||
ruleForm: {} as UpdateDbTableInput,
|
||||
tableData: [] as any,
|
||||
sortable: undefined as any,
|
||||
});
|
||||
|
||||
// 表格参数配置
|
||||
const options = reactive<VxeGridProps>({
|
||||
id: 'sysAddTable',
|
||||
height: 'auto',
|
||||
autoResize: true,
|
||||
size: 'mini',
|
||||
loading: false,
|
||||
align: 'center', // 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）
|
||||
data: [] as Array<any>,
|
||||
rowConfig: { useKey: true },
|
||||
seqConfig: { seqMethod: ({ row }) => row.orderNo },
|
||||
columns: [
|
||||
{
|
||||
width: 80,
|
||||
slots: {
|
||||
default: () => (
|
||||
<span class="drag-btn">
|
||||
<el-icon>
|
||||
<Rank />
|
||||
</el-icon>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
},
|
||||
{ type: 'seq', title: '序号', width: 50 },
|
||||
{ type: 'checkbox', width: 40 },
|
||||
{
|
||||
field: 'dbColumnName',
|
||||
title: '字段名',
|
||||
minWidth: 160,
|
||||
showOverflow: 'tooltip',
|
||||
editRender: { name: '$input', props: { clearable: true, placeholder: '请输入字段名' } },
|
||||
},
|
||||
{
|
||||
field: 'columnDescription',
|
||||
title: '描述',
|
||||
minWidth: 220,
|
||||
showOverflow: 'tooltip',
|
||||
editRender: { name: '$input', props: { clearable: true, placeholder: '请输入描述' } },
|
||||
},
|
||||
{
|
||||
field: 'isPrimarykey',
|
||||
title: '主键',
|
||||
minWidth: 100,
|
||||
editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否' } },
|
||||
slots: {
|
||||
default: (scope) => <vxe-switch vModel={scope.row.isPrimarykey} open-label="是" close-label="否" openValue={1} closeValue={0}></vxe-switch>,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'isIdentity',
|
||||
title: '自增',
|
||||
minWidth: 100,
|
||||
editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否' } },
|
||||
slots: {
|
||||
default: (scope) => <vxe-switch vModel={scope.row.isIdentity} open-label="是" close-label="否" openValue={1} closeValue={0}></vxe-switch>,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'dataType',
|
||||
title: '类型',
|
||||
minWidth: 100,
|
||||
editRender: {
|
||||
name: '$select',
|
||||
options: dataTypeList,
|
||||
optionProps: { value: 'value', label: 'value' },
|
||||
props: { optionProps: { value: 'value', label: 'value' }, placeholder: '请选择类型', popupClassName: 'zIndex2023' },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'isNullable',
|
||||
title: '可空',
|
||||
minWidth: 100,
|
||||
editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否' } },
|
||||
slots: {
|
||||
default: (scope) => <vxe-switch vModel={scope.row.isNullable} open-label="是" close-label="否" openValue={1} closeValue={0}></vxe-switch>,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'length',
|
||||
title: '长度',
|
||||
minWidth: 100,
|
||||
showOverflow: 'tooltip',
|
||||
editRender: { name: '$input', props: { type: 'integer', clearable: true, placeholder: '请输入长度' } },
|
||||
},
|
||||
{
|
||||
field: 'decimalDigits',
|
||||
title: '小数位',
|
||||
minWidth: 100,
|
||||
showOverflow: 'tooltip',
|
||||
editRender: { name: '$input', props: { type: 'integer', clearable: true, placeholder: '请输入小数位' } },
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 80,
|
||||
showOverflow: true,
|
||||
fixed: 'right',
|
||||
slots: {
|
||||
default: (scope) => <el-button icon="ele-Delete" text type="danger" onClick={() => deleteRow(scope.row)}></el-button>,
|
||||
},
|
||||
},
|
||||
],
|
||||
editRules: {
|
||||
dbColumnName: [{ required: true, message: '字段名必填' }],
|
||||
dataType: [{ required: true, message: '类型必填' }],
|
||||
},
|
||||
toolbarConfig: {
|
||||
size: 'small',
|
||||
slots: { buttons: 'toolbar_buttons', tools: 'toolbar_tools' },
|
||||
refresh: false,
|
||||
export: true,
|
||||
print: true,
|
||||
zoom: true,
|
||||
custom: false,
|
||||
},
|
||||
checkboxConfig: { range: true },
|
||||
sortConfig: {
|
||||
trigger: 'cell',
|
||||
remote: false,
|
||||
},
|
||||
editConfig: { trigger: 'click', mode: 'row', showStatus: true },
|
||||
exportConfig: {
|
||||
remote: false, //设置使用服务端导出
|
||||
filename: `数据列信息导出_${dayjs().format('YYMMDDHHmmss')}`,
|
||||
exportMethod: ({ options }) => handleExport(options), //服务器导出方法
|
||||
},
|
||||
printConfig: { sheetName: '' },
|
||||
proxyConfig: {
|
||||
props: {
|
||||
list: 'data.result.items', //不分页时
|
||||
// result: 'data.result.items', //分页时
|
||||
total: 'data.result.total',
|
||||
message: 'data.message',
|
||||
},
|
||||
ajax: {
|
||||
query: () => Promise.resolve(), //不加会报错
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (row: any) => {
|
||||
state.ruleForm = row;
|
||||
state.isShowDialog = true;
|
||||
state.visible = true;
|
||||
ruleFormRef.value?.resetFields();
|
||||
nextTick(() => {
|
||||
rowDrop();
|
||||
});
|
||||
};
|
||||
|
||||
const rowDrop = () => {
|
||||
const el = document.querySelector('.xGrid-table-style .vxe-table--body tbody') as HTMLElement;
|
||||
state.sortable = Sortable.create(el, {
|
||||
animation: 300,
|
||||
handle: '.drag-btn',
|
||||
onEnd: (sortableEvent: any) => {
|
||||
const fullData = xGrid.value?.getTableData().fullData;
|
||||
const newIndex = sortableEvent.newIndex as number;
|
||||
const oldIndex = sortableEvent.oldIndex as number;
|
||||
// 往前移动
|
||||
if (oldIndex > newIndex) {
|
||||
const moveRow = fullData?.find((e) => e.orderNo == oldIndex + 1);
|
||||
for (let i = oldIndex; i > newIndex; i--) {
|
||||
const row = fullData?.find((e) => e.orderNo == i);
|
||||
row.orderNo += 1;
|
||||
}
|
||||
moveRow.orderNo = newIndex + 1;
|
||||
} else {
|
||||
// 往后移动
|
||||
const moveRow = fullData?.find((e) => e.orderNo == oldIndex + 1);
|
||||
for (let i = oldIndex; i < newIndex; i++) {
|
||||
const row = fullData?.find((e) => e.orderNo == i + 2);
|
||||
row.orderNo -= 1;
|
||||
}
|
||||
moveRow.orderNo = newIndex + 1;
|
||||
}
|
||||
xGrid.value?.updateData();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
emits('addTableSubmitted', state.ruleForm.tableName ?? '');
|
||||
state.tableData = [];
|
||||
state.isShowDialog = false;
|
||||
cancel();
|
||||
};
|
||||
|
||||
// 取消
|
||||
const cancel = () => {
|
||||
state.isShowDialog = false;
|
||||
xGrid.value?.loadData([]);
|
||||
state.visible = false;
|
||||
clearTimeout(initTime);
|
||||
if (state.sortable) {
|
||||
state.sortable.destroy();
|
||||
}
|
||||
};
|
||||
|
||||
// 导出日志(服务端导出)
|
||||
const handleExport = async (opts: any) => {
|
||||
console.log(opts);
|
||||
options.loading = true;
|
||||
// var res = await getAPI(SysLogExApi).apiSysLogExExportPost(state.queryParams as any, { responseType: 'blob' });
|
||||
options.loading = false;
|
||||
// VXETable.saveFile({ filename: getFileName(res.headers), type: 'xlsx', content: res.data as any });
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
// 提交
|
||||
const submit = () => {
|
||||
ruleFormRef.value.validate(async (valid: boolean) => {
|
||||
if (!valid) return;
|
||||
if (state.tableData.length === 0) {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: `请添加列!`,
|
||||
});
|
||||
const tableData = xGrid.value?.getTableData().fullData ?? [];
|
||||
if (tableData.length === 0) {
|
||||
ElMessage({ type: 'error', message: `请添加列!` });
|
||||
return;
|
||||
}
|
||||
const rowValid = await xGrid.value?.validate(true);
|
||||
if (rowValid) {
|
||||
ElMessage.error('校验不通过');
|
||||
return;
|
||||
}
|
||||
const params: any = {
|
||||
dbColumnInfoList: state.tableData,
|
||||
dbColumnInfoList: tableData,
|
||||
...state.ruleForm,
|
||||
};
|
||||
await getAPI(SysDatabaseApi).apiSysDatabaseAddTablePost(params);
|
||||
@ -155,164 +302,146 @@ const submit = () => {
|
||||
};
|
||||
|
||||
// 增加主键列
|
||||
function addPrimaryColumn() {
|
||||
state.tableData.push({
|
||||
columnDescription: '主键Id',
|
||||
dataType: 'bigint',
|
||||
dbColumnName: 'Id',
|
||||
decimalDigits: 0,
|
||||
isIdentity: 0,
|
||||
isNullable: 0,
|
||||
isPrimarykey: 1,
|
||||
length: 0,
|
||||
key: colIndex,
|
||||
editable: true,
|
||||
isNew: true,
|
||||
});
|
||||
colIndex++;
|
||||
}
|
||||
|
||||
// 增加普通列
|
||||
function addColumn() {
|
||||
state.tableData.push({
|
||||
columnDescription: '',
|
||||
dataType: 'varchar',
|
||||
dbColumnName: '',
|
||||
decimalDigits: 0,
|
||||
isIdentity: 0,
|
||||
isNullable: 1,
|
||||
isPrimarykey: 0,
|
||||
length: 32,
|
||||
key: colIndex,
|
||||
editable: true,
|
||||
isNew: true,
|
||||
});
|
||||
colIndex++;
|
||||
}
|
||||
|
||||
// 增加租户列
|
||||
function addTenantColumn() {
|
||||
state.tableData.push({
|
||||
columnDescription: '租户Id',
|
||||
dataType: 'bigint',
|
||||
dbColumnName: 'TenantId',
|
||||
decimalDigits: 0,
|
||||
isIdentity: 0,
|
||||
isNullable: 1,
|
||||
isPrimarykey: 0,
|
||||
length: 0,
|
||||
key: colIndex,
|
||||
editable: true,
|
||||
isNew: true,
|
||||
});
|
||||
colIndex++;
|
||||
}
|
||||
|
||||
// 增加通用基础列
|
||||
function addBaseColumn() {
|
||||
const fileds = [
|
||||
{
|
||||
dataType: 'datetime',
|
||||
name: 'CreateTime',
|
||||
desc: '创建时间',
|
||||
},
|
||||
{
|
||||
dataType: 'datetime',
|
||||
name: 'UpdateTime',
|
||||
desc: '更新时间',
|
||||
},
|
||||
const addPrimaryColumn = async () => {
|
||||
const fullData = xGrid.value?.getTableData().fullData;
|
||||
const colIndex = (fullData?.length ?? 0) + 1;
|
||||
const temp = await xGrid.value?.insertAt(
|
||||
{
|
||||
columnDescription: '主键Id',
|
||||
dataType: 'bigint',
|
||||
name: 'CreateUserId',
|
||||
desc: '创建者Id',
|
||||
},
|
||||
{
|
||||
dataType: 'varchar',
|
||||
name: 'CreateUserName',
|
||||
desc: '创建者姓名',
|
||||
length: 64,
|
||||
},
|
||||
{
|
||||
dataType: 'bigint',
|
||||
name: 'UpdateUserId',
|
||||
desc: '修改者Id',
|
||||
},
|
||||
{
|
||||
dataType: 'varchar',
|
||||
name: 'UpdateUserName',
|
||||
desc: '修改者姓名',
|
||||
length: 64,
|
||||
},
|
||||
{
|
||||
dataType: 'bigint',
|
||||
name: 'CreateOrgId',
|
||||
desc: '创建者部门Id',
|
||||
},
|
||||
{
|
||||
dataType: 'varchar',
|
||||
name: 'CreateOrgName',
|
||||
desc: '创建者部门名称',
|
||||
length: 64,
|
||||
},
|
||||
{
|
||||
dataType: 'bit',
|
||||
name: 'IsDelete',
|
||||
desc: '软删除',
|
||||
isNullable: 0,
|
||||
},
|
||||
];
|
||||
|
||||
fileds.forEach((m: any) => {
|
||||
state.tableData.push({
|
||||
columnDescription: m.desc,
|
||||
dataType: m.dataType,
|
||||
dbColumnName: m.name,
|
||||
dbColumnName: 'Id',
|
||||
decimalDigits: 0,
|
||||
isIdentity: 0,
|
||||
isNullable: m.isNullable === 0 ? 0 : 1,
|
||||
isPrimarykey: 0,
|
||||
length: m.length || 0,
|
||||
key: colIndex,
|
||||
isNullable: 0,
|
||||
isPrimarykey: 1,
|
||||
length: 0,
|
||||
orderNo: colIndex,
|
||||
editable: true,
|
||||
isNew: true,
|
||||
});
|
||||
},
|
||||
-1
|
||||
);
|
||||
if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
|
||||
};
|
||||
|
||||
// 增加普通列
|
||||
const addColumn = async () => {
|
||||
const fullData = xGrid.value?.getTableData().fullData;
|
||||
const colIndex = (fullData?.length ?? 0) + 1;
|
||||
const temp = await xGrid.value?.insertAt(
|
||||
{
|
||||
columnDescription: '',
|
||||
dataType: 'varchar',
|
||||
dbColumnName: '',
|
||||
decimalDigits: 0,
|
||||
isIdentity: 0,
|
||||
isNullable: 1,
|
||||
isPrimarykey: 0,
|
||||
length: 32,
|
||||
orderNo: colIndex,
|
||||
editable: true,
|
||||
isNew: true,
|
||||
},
|
||||
-1
|
||||
);
|
||||
if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
|
||||
};
|
||||
|
||||
// 增加租户列
|
||||
const addTenantColumn = async () => {
|
||||
const fullData = xGrid.value?.getTableData().fullData;
|
||||
const colIndex = (fullData?.length ?? 0) + 1;
|
||||
const temp = await xGrid.value?.insertAt(
|
||||
{
|
||||
columnDescription: '租户Id',
|
||||
dataType: 'bigint',
|
||||
dbColumnName: 'TenantId',
|
||||
decimalDigits: 0,
|
||||
isIdentity: 0,
|
||||
isNullable: 1,
|
||||
isPrimarykey: 0,
|
||||
length: 0,
|
||||
orderNo: colIndex,
|
||||
editable: true,
|
||||
isNew: true,
|
||||
},
|
||||
-1
|
||||
);
|
||||
if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
|
||||
};
|
||||
|
||||
// 增加通用基础列
|
||||
const addBaseColumn = async () => {
|
||||
const fileds = [
|
||||
{ dataType: 'datetime', name: 'CreateTime', desc: '创建时间' },
|
||||
{ dataType: 'datetime', name: 'UpdateTime', desc: '更新时间' },
|
||||
{ dataType: 'bigint', name: 'CreateUserId', desc: '创建者Id' },
|
||||
{ dataType: 'varchar', name: 'CreateUserName', desc: '创建者姓名', length: 64 },
|
||||
{ dataType: 'bigint', name: 'UpdateUserId', desc: '修改者Id' },
|
||||
{ dataType: 'varchar', name: 'UpdateUserName', desc: '修改者姓名', length: 64 },
|
||||
{ dataType: 'bigint', name: 'CreateOrgId', desc: '创建者部门Id' },
|
||||
{ dataType: 'varchar', name: 'CreateOrgName', desc: '创建者部门名称', length: 64 },
|
||||
{ dataType: 'bit', name: 'IsDelete', desc: '软删除', isNullable: 0 },
|
||||
];
|
||||
let temp = {} as any;
|
||||
const fullData = xGrid.value?.getTableData().fullData;
|
||||
let colIndex = (fullData?.length ?? 0) + 1;
|
||||
for (let i = 0; i < fileds.length; i++) {
|
||||
temp = await xGrid.value?.insertAt(
|
||||
{
|
||||
columnDescription: fileds[i].desc,
|
||||
dataType: fileds[i].dataType,
|
||||
dbColumnName: fileds[i].name,
|
||||
decimalDigits: 0,
|
||||
isIdentity: 0,
|
||||
isNullable: fileds[i].isNullable === 0 ? 0 : 1,
|
||||
isPrimarykey: 0,
|
||||
length: (fileds[i] as any).length || 0,
|
||||
orderNo: colIndex,
|
||||
editable: true,
|
||||
isNew: true,
|
||||
},
|
||||
-1
|
||||
);
|
||||
colIndex++;
|
||||
});
|
||||
}
|
||||
|
||||
function handleColDelete(index: number) {
|
||||
state.tableData.splice(index, 1);
|
||||
}
|
||||
|
||||
// 上移
|
||||
function handleColUp(record: EditRecordRow, index: number) {
|
||||
if (record.isNew) {
|
||||
var data1 = ChangeExForArray(index, index - 1, state.tableData);
|
||||
return data1;
|
||||
}
|
||||
}
|
||||
if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
|
||||
};
|
||||
|
||||
// 下移
|
||||
function handleColDown(record: EditRecordRow, index: number) {
|
||||
if (record.isNew) {
|
||||
return ChangeExForArray(index, index + 1, state.tableData);
|
||||
}
|
||||
}
|
||||
// 删除行
|
||||
const deleteRow = (row: any) => {
|
||||
const fullData = xGrid.value?.getTableData().fullData;
|
||||
fullData?.filter((e: any) => e.orderNo > row.orderNo)?.forEach((e: any) => (e.orderNo = e.orderNo - 1));
|
||||
xGrid.value?.remove(row);
|
||||
};
|
||||
|
||||
function ChangeExForArray(index1: number, index2: number, array: Array<EditRecordRow>) {
|
||||
let maxIndex = state.tableData.length - 1; //最大索引
|
||||
if (index2 > maxIndex) {
|
||||
index2 = 0;
|
||||
// 删除选中行
|
||||
const deleteSelected = () => {
|
||||
const selected = xGrid.value?.getCheckboxRecords();
|
||||
const fullData = xGrid.value?.getTableData().fullData;
|
||||
// 更新序号
|
||||
for (let i = 0; i < selected!.length; i++) {
|
||||
fullData?.filter((e: any) => e.orderNo > selected![i].orderNo)?.forEach((e: any) => (e.orderNo = e.orderNo - 1));
|
||||
}
|
||||
if (index2 < 0) {
|
||||
index2 = maxIndex;
|
||||
}
|
||||
let temp = array[index1];
|
||||
array[index1] = array[index2];
|
||||
array[index2] = temp;
|
||||
return array;
|
||||
}
|
||||
// 移除选中
|
||||
xGrid.value?.removeCheckboxRow();
|
||||
};
|
||||
|
||||
// 导出对象
|
||||
defineExpose({ openDialog });
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sys-dbTable-container :deep(.el-dialog__body) {
|
||||
height: 90vh;
|
||||
max-height: 90vh;
|
||||
}
|
||||
.xGrid-table-style .drag-btn {
|
||||
cursor: move;
|
||||
font-size: 20px;
|
||||
}
|
||||
.xGrid-table-style .vxe-body--row.sortable-ghost,
|
||||
.xGrid-table-style .vxe-body--row.sortable-chosen {
|
||||
background-color: #e40000 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
|
||||
<el-row :gutter="35">
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="列名称" prop="columnName" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
|
||||
<el-input v-model="state.ruleForm.columnName" placeholder="列名称" clearable />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="sys-dbTable-container">
|
||||
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px">
|
||||
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="500px">
|
||||
<template #header>
|
||||
<div style="color: #fff">
|
||||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
|
||||
<el-row :gutter="35">
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="表名称" prop="tableName" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
|
||||
<el-input v-model="state.ruleForm.tableName" placeholder="表名称" clearable />
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
|
||||
<el-row :gutter="35">
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="表名" prop="tableName" :rules="[{ required: true, message: '表名不能为空', trigger: 'blur' }]">
|
||||
<el-input disabled v-model="state.ruleForm.tableName" placeholder="表名" clearable />
|
||||
@ -49,6 +49,7 @@
|
||||
<script lang="ts" setup name="sysGenEntity">
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { camelCase, upperFirst } from 'lodash-es';
|
||||
|
||||
import { getAPI } from '/@/utils/axios-utils';
|
||||
import { SysDatabaseApi, SysDictTypeApi } from '/@/api-services/api';
|
||||
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
<template #header>
|
||||
<div style="color: #fff">
|
||||
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Cpu /> </el-icon>
|
||||
<span> 生成种子数据 </span>
|
||||
<span> 生成种子数据【生成实体后必须重启服务才生效】</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto" :rules="state.rules">
|
||||
<el-row :gutter="35">
|
||||
<el-row :gutter="10">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="表名" prop="tableName" :rules="[{ required: true, message: '表名不能为空', trigger: 'blur' }]">
|
||||
<el-input disabled v-model="state.ruleForm.tableName" placeholder="表名" clearable />
|
||||
@ -46,7 +46,6 @@ import { getAPI } from '/@/utils/axios-utils';
|
||||
import { SysDatabaseApi, SysDictTypeApi } from '/@/api-services/api';
|
||||
|
||||
const emits = defineEmits(['handleQueryColumn']);
|
||||
|
||||
const props = defineProps({
|
||||
applicationNamespaces: { type: Array },
|
||||
});
|
||||
|
||||
@ -1,74 +1,73 @@
|
||||
<template>
|
||||
<div class="sys-database-container">
|
||||
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
|
||||
<el-form :model="state.queryParams" ref="queryForm" :inline="true" v-loading="state.loading">
|
||||
<el-form-item label="库名">
|
||||
<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-form-item label="表名">
|
||||
<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 + ']'" :value="item.name" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button-group>
|
||||
<el-button icon="ele-Plus" type="primary" @click="openAddTable"> 增加表 </el-button>
|
||||
<el-button icon="ele-Edit" @click="openEditTable"> 编辑表 </el-button>
|
||||
<el-button icon="ele-Delete" type="danger" @click="delTable" disabled> 删除表 </el-button>
|
||||
<el-button icon="ele-View" @click="visualTable"> 可视化 </el-button>
|
||||
</el-button-group>
|
||||
<el-button-group style="padding-left: 10px">
|
||||
<el-button icon="ele-Plus" @click="openAddColumn"> 增加列 </el-button>
|
||||
<el-button icon="ele-Plus" @click="openGenDialog"> 生成实体 </el-button>
|
||||
<el-button icon="ele-Plus" @click="openGenSeedDataDialog"> 生成种子 </el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
<div class="sys-database-container" v-loading="options.loading">
|
||||
<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="'60px'" 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">
|
||||
<el-table :data="state.columnData" style="width: 100%" v-loading="state.loading1" border>
|
||||
<el-table-column type="index" label="序号" width="55" align="center" />
|
||||
<el-table-column prop="dbColumnName" label="字段名" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="dataType" label="数据类型" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="isPrimarykey" label="主键" width="70" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.isPrimarykey === true">是</el-tag>
|
||||
<el-tag type="info" v-else>否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isIdentity" label="自增" width="70" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.isIdentity === true">是</el-tag>
|
||||
<el-tag type="info" v-else>否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isNullable" label="可空" width="70" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.isNullable === true">是</el-tag>
|
||||
<el-tag type="info" v-else>否</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="length" label="长度" width="70" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="decimalDigits" label="精度" width="70" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="defaultValue" label="默认值" align="center" show-overflow-tooltip />
|
||||
<el-table-column prop="columnDescription" label="描述" header-align="center" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="145" fixed="right" align="center" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditColumn(scope.row)"> 编辑 </el-button>
|
||||
<el-button icon="ele-Delete" size="small" text type="danger" @click="delColumn(scope.row)"> 删除 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<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-button icon="ele-Plus" @click="showGenSeedDataDialog"> 生成种子 </el-button>
|
||||
</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" @handleQueryColumn="handleQueryColumn" :application-namespaces="state.appNamespaces" />
|
||||
<GenEntity ref="genEntityRef" @handleQueryColumn="handleQueryColumn" />
|
||||
<GenSeedData ref="genSeedDataRef" :application-namespaces="state.appNamespaces" />
|
||||
</div>
|
||||
</template>
|
||||
@ -77,6 +76,9 @@
|
||||
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/vxeTableOptionsHook';
|
||||
|
||||
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';
|
||||
@ -88,6 +90,7 @@ 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>>();
|
||||
@ -97,72 +100,97 @@ const genSeedDataRef = ref<InstanceType<typeof GenSeedData>>();
|
||||
const router = useRouter();
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
loading1: false,
|
||||
dbData: [] as any,
|
||||
configId: '',
|
||||
tableData: [] as Array<DbTableInfo>,
|
||||
tableName: '',
|
||||
columnData: [] as Array<DbColumnOutput>,
|
||||
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' } },
|
||||
],
|
||||
enableExport: true,
|
||||
searchCallback: () => handleQueryColumn(),
|
||||
queryAllCallback: () => fetchData({ pageSize: 99999 }),
|
||||
});
|
||||
|
||||
// 页面初始化
|
||||
onMounted(async () => {
|
||||
state.loading = true;
|
||||
options.loading = true;
|
||||
var res = await getAPI(SysDatabaseApi).apiSysDatabaseListGet();
|
||||
state.dbData = res.data.result;
|
||||
state.loading = false;
|
||||
|
||||
options.loading = false;
|
||||
let appNamesRes = await getAPI(SysCodeGenApi).apiSysCodeGenApplicationNamespacesGet();
|
||||
state.appNamespaces = appNamesRes.data.result as Array<string>;
|
||||
});
|
||||
|
||||
// 查询操作
|
||||
const handleQueryColumn = async () => {
|
||||
if (state.tableName == '' || typeof state.tableName == 'undefined') {
|
||||
await xGrid.value?.loadData([]);
|
||||
options.loading = false;
|
||||
return;
|
||||
}
|
||||
options.loading = true;
|
||||
var res = await fetchData();
|
||||
await xGrid.value?.loadData(res.data.result ?? []);
|
||||
options.loading = false;
|
||||
};
|
||||
|
||||
// 获取数据
|
||||
const fetchData = async (tableParams?: any) => {
|
||||
return getAPI(SysDatabaseApi).apiSysDatabaseColumnListTableNameConfigIdGet(state.tableName, state.configId);
|
||||
};
|
||||
|
||||
// 增加表
|
||||
const addTableSubmitted = (e: any) => {
|
||||
handleQueryTable();
|
||||
const addTableSubmitted = async (e: any) => {
|
||||
await handleQueryTable();
|
||||
state.tableName = e;
|
||||
handleQueryColumn();
|
||||
await handleQueryColumn();
|
||||
};
|
||||
|
||||
// 表查询操作
|
||||
const handleQueryTable = async () => {
|
||||
state.tableName = '';
|
||||
state.columnData = [];
|
||||
state.loading = true;
|
||||
|
||||
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_开头的表
|
||||
// 排除zero_开头的表
|
||||
if (!element.name.startsWith('zero_')) {
|
||||
state.tableData.push(element);
|
||||
}
|
||||
});
|
||||
state.loading = false;
|
||||
};
|
||||
|
||||
// 列查询操作
|
||||
const handleQueryColumn = async () => {
|
||||
state.columnData = [];
|
||||
if (state.tableName == '' || typeof state.tableName == 'undefined') return;
|
||||
|
||||
state.loading1 = true;
|
||||
var res = await getAPI(SysDatabaseApi).apiSysDatabaseColumnListTableNameConfigIdGet(state.tableName, state.configId);
|
||||
state.columnData = res.data.result ?? [];
|
||||
state.loading1 = false;
|
||||
options.loading = false;
|
||||
};
|
||||
|
||||
// 打开表编辑页面
|
||||
const openEditTable = () => {
|
||||
const showEditTable = () => {
|
||||
if (state.configId == '' || state.tableName == '') {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: `请选择库名和表名!`,
|
||||
});
|
||||
ElMessage({ type: 'error', message: `请选择库名和表名!` });
|
||||
return;
|
||||
}
|
||||
var res = state.tableData.filter((u: any) => u.name == state.tableName);
|
||||
@ -176,12 +204,9 @@ const openEditTable = () => {
|
||||
};
|
||||
|
||||
// 打开实体生成页面
|
||||
const openGenDialog = () => {
|
||||
const showGenDialog = () => {
|
||||
if (state.configId == '' || state.tableName == '') {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: `请选择库名和表名!`,
|
||||
});
|
||||
ElMessage({ type: 'error', message: `请选择库名和表名!` });
|
||||
return;
|
||||
}
|
||||
// var res = state.tableData.filter((u: any) => u.name == state.tableName);
|
||||
@ -194,12 +219,9 @@ const openGenDialog = () => {
|
||||
};
|
||||
|
||||
// 生成种子数据页面
|
||||
const openGenSeedDataDialog = () => {
|
||||
const showGenSeedDataDialog = () => {
|
||||
if (state.configId == '' || state.tableName == '') {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: `请选择库名和表名!`,
|
||||
});
|
||||
ElMessage({ type: 'error', message: `请选择库名和表名!` });
|
||||
return;
|
||||
}
|
||||
var table: any = {
|
||||
@ -211,12 +233,9 @@ const openGenSeedDataDialog = () => {
|
||||
};
|
||||
|
||||
// 打开表增加页面
|
||||
const openAddTable = () => {
|
||||
const handleAddTable = () => {
|
||||
if (state.configId == '') {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: `请选择库名!`,
|
||||
});
|
||||
ElMessage({ type: 'error', message: `请选择库名!` });
|
||||
return;
|
||||
}
|
||||
var table: any = {
|
||||
@ -229,7 +248,7 @@ const openAddTable = () => {
|
||||
};
|
||||
|
||||
// 打开列编辑页面
|
||||
const openEditColumn = (row: any) => {
|
||||
const showEditColumn = (row: any) => {
|
||||
var column: any = {
|
||||
configId: state.configId,
|
||||
tableName: row.tableName,
|
||||
@ -241,12 +260,9 @@ const openEditColumn = (row: any) => {
|
||||
};
|
||||
|
||||
// 打开列增加页面
|
||||
const openAddColumn = () => {
|
||||
const showAddColumn = () => {
|
||||
if (state.configId == '' || state.tableName == '') {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: `请选择库名和表名!`,
|
||||
});
|
||||
ElMessage({ type: 'error', message: `请选择库名和表名!` });
|
||||
return;
|
||||
}
|
||||
const addRow: DbColumnInput = {
|
||||
@ -268,12 +284,9 @@ const openAddColumn = () => {
|
||||
};
|
||||
|
||||
// 删除表
|
||||
const delTable = () => {
|
||||
const handleDeleteTable = () => {
|
||||
if (state.tableName == '') {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: `请选择表名!`,
|
||||
});
|
||||
ElMessage({ type: 'error', message: `请选择表名!` });
|
||||
return;
|
||||
}
|
||||
ElMessageBox.confirm(`确定删除表：【${state.tableName}】?`, '提示', {
|
||||
@ -287,14 +300,14 @@ const delTable = () => {
|
||||
tableName: state.tableName,
|
||||
};
|
||||
await getAPI(SysDatabaseApi).apiSysDatabaseDeleteTablePost(deleteDbTableInput);
|
||||
handleQueryTable();
|
||||
await handleQueryTable();
|
||||
ElMessage.success('表删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
// 删除列
|
||||
const delColumn = (row: any) => {
|
||||
const handleDeleteColumn = (row: any) => {
|
||||
ElMessageBox.confirm(`确定删除列：【${row.dbColumnName}】?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
@ -307,7 +320,7 @@ const delColumn = (row: any) => {
|
||||
dbColumnName: row.dbColumnName,
|
||||
};
|
||||
await getAPI(SysDatabaseApi).apiSysDatabaseDeleteColumnPost(eleteDbColumnInput);
|
||||
handleQueryTable();
|
||||
await handleQueryTable();
|
||||
ElMessage.success('列删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
@ -316,10 +329,7 @@ const delColumn = (row: any) => {
|
||||
// 可视化表
|
||||
const visualTable = () => {
|
||||
if (state.configId == '') {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: `请选择库名!`,
|
||||
});
|
||||
ElMessage({ type: 'error', message: `请选择库名!` });
|
||||
return;
|
||||
}
|
||||
router.push(`/develop/database/visual?configId=${state.configId}`);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user