gaoxing/UNIVPLMDataIntegration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎈 perf(database): 优化addTable，解决ts类型报错

Browse Source
This commit is contained in:
hans 2024-10-31 15:01:12 +08:00
parent 515664118b
commit fc65b1d4e2
1 changed files with 362 additions and 339 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
Web/src/views/system/database/component/addTable.vue
View File

@ -1,29 +1,27 @@
<template> <template>
<div class="sys-dbTable-container"> <div class="sys-dbTable-container">
<el-dialog v-model="state.visible" :z-index="2008" draggable :close-on-click-modal="false" width="70vw"> <vxe-modal v-model="state.visible" title="增加表" :width="800" :height="350" resize show-footer show-confirm-button
<template #header> show-cancel-button show-zoom fullscreen @close="cancel">
<div style="color: #fff"> <template #default>
<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" style="margin: 10px 0 18px 0">数据表信息</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-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
<el-row :gutter="10"> <el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> <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-form-item label="表名称" prop="tableName"
<el-input v-model="state.ruleForm.tableName" placeholder="表名称" clearable /> :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
<el-input v-model.lazy.trim="state.ruleForm.tableName" placeholder="表名称" clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="描述" prop="description" :rules="[{ required: true, message: '描述不能为空', trigger: 'blur' }]"> <el-form-item label="描述" prop="description"
<el-input v-model="state.ruleForm.description" placeholder="描述" clearable type="textarea" /> :rules="[{ required: true, message: '描述不能为空', trigger: 'blur' }]">
<el-input v-model.lazy.trim="state.ruleForm.description" placeholder="描述" clearable type="textarea" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<el-divider content-position="left" style="margin: 10px 0 18px 0">数据列信息</el-divider> <el-divider content-position="left" style="margin: 10px 0 18px 0">数据列信息</el-divider>
<div style="height: calc(90vh - 252px)"> <div style="height: calc(100vh - 300px)">
<vxe-grid ref="xGrid" class="xGrid-table-style" v-bind="options"> <vxe-grid ref="xGrid" class="xGrid-table-style" v-bind="options">
<template #toolbar_buttons> <template #toolbar_buttons>
<el-button icon="ele-Plus" @click="addPrimaryColumn">新增主键字段</el-button> <el-button icon="ele-Plus" @click="addPrimaryColumn">新增主键字段</el-button>
@ -36,43 +34,61 @@
<template #empty> <template #empty>
<el-empty :image-size="200" /> <el-empty :image-size="200" />
</template> </template>
</vxe-grid> <template #drag_default="{}">
</div> <span class="drag-btn">
<i class="fa fa-arrows"></i>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span> </span>
</template> </template>
</el-dialog> <template #isPrimarykey="{ row }">
<vxe-switch readonly v-model="row.isPrimarykey" open-label="是" close-label="否" :openValue="1"
:closeValue="0"></vxe-switch>
</template>
<template #isIdentity="{ row }">
<vxe-switch readonly v-model="row.isIdentity" open-label="是" close-label="否" :openValue="1"
:closeValue="0"></vxe-switch>
</template>
<template #isNullable="{ row }">
<vxe-switch readonly v-model="row.isNullable" open-label="是" close-label="否" :openValue="1"
:closeValue="0"></vxe-switch>
</template>
<template #operate="{ row }">
<vxe-button mode="text" status="error" icon="vxe-icon-delete" @click="deleteRow(row)" />
</template>
</vxe-grid>
</div> </div>
</template> </template>
<template #footer>
<vxe-button @click="cancel">取 消</vxe-button>
<vxe-button status="primary" @click="submit">确 定</vxe-button>
</template>
</vxe-modal>
</div>
</template>
<script lang="tsx" setup name="sysAddTable"> <script lang="tsx" setup name="sysAddTable">
import { nextTick, reactive, ref } from 'vue'; import { nextTick, reactive, ref } from 'vue';
import { ElMessage, dayjs } from 'element-plus'; import { ElMessage, dayjs } from 'element-plus';
import { VxeGridInstance, VxeGridProps } from 'vxe-table'; import { VxeGridInstance, VxeGridProps } from 'vxe-table';
import { Rank } from '@element-plus/icons-vue'; import { Rank } from '@element-plus/icons-vue';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
import { dataTypeList } from '../database'; import { dataTypeList } from '../database';
import { getAPI } from '/@/utils/axios-utils'; import { getAPI } from '/@/utils/axios-utils';
import { SysDatabaseApi } from '/@/api-services/api'; import { SysDatabaseApi } from '/@/api-services/api';
import { UpdateDbTableInput } from '/@/api-services/models'; import { UpdateDbTableInput } from '/@/api-services/models';
const xGrid = ref<VxeGridInstance>(); const xGrid = ref<VxeGridInstance>();
let initTime: any; let initTime: any;
const emits = defineEmits(['addTableSubmitted']); const emits = defineEmits(['addTableSubmitted']);
const ruleFormRef = ref(); const ruleFormRef = ref();
const state = reactive({ const state = reactive({
visible: false, visible: false,
ruleForm: {} as UpdateDbTableInput, ruleForm: {} as UpdateDbTableInput,
sortable: undefined as any, sortable: undefined as any,
}); });
// 表格参数配置 // 表格参数配置
const options = reactive<VxeGridProps>({ const options = reactive<VxeGridProps>({
id: 'sysAddTable', id: 'sysAddTable',
height: 'auto', height: 'auto',
autoResize: true, autoResize: true,
@ -81,21 +97,25 @@ const options = reactive<VxeGridProps>({
align: 'center', // 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到） align: 'center', // 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）
data: [] as Array<any>, data: [] as Array<any>,
rowConfig: { useKey: true }, rowConfig: { useKey: true },
mouseConfig: {
selected: true,
},
keyboardConfig: {
isArrow: true,
isDel: true,
isEnter: true,
isTab: true,
isEdit: true,
},
seqConfig: { seqMethod: ({ row }) => row.orderNo }, seqConfig: { seqMethod: ({ row }) => row.orderNo },
columns: [ columns: [
{ {
width: 80, width: 80,
slots: { slots: {
default: () => ( default: 'drag_default',
<span class="drag-btn">
<el-icon>
<Rank />
</el-icon>
</span>
),
}, },
}, },
{ type: 'seq', title: '序号', width: 50 }, { type: 'seq', title: '序号', width: 60 },
{ type: 'checkbox', width: 40 }, { type: 'checkbox', width: 40 },
{ {
field: 'dbColumnName', field: 'dbColumnName',
@ -115,9 +135,9 @@ const options = reactive<VxeGridProps>({
field: 'isPrimarykey', field: 'isPrimarykey',
title: '主键', title: '主键',
minWidth: 100, minWidth: 100,
editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否' } }, editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否', immediate: true } },
slots: { slots: {
default: (scope) => <vxe-switch vModel={scope.row.isPrimarykey} open-label="是" close-label="否" openValue={1} closeValue={0}></vxe-switch>, default: "isPrimarykey"
}, },
}, },
{ {
@ -126,7 +146,7 @@ const options = reactive<VxeGridProps>({
minWidth: 100, minWidth: 100,
editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否' } }, editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否' } },
slots: { slots: {
default: (scope) => <vxe-switch vModel={scope.row.isIdentity} open-label="是" close-label="否" openValue={1} closeValue={0}></vxe-switch>, default: "isIdentity"
}, },
}, },
{ {
@ -146,7 +166,7 @@ const options = reactive<VxeGridProps>({
minWidth: 100, minWidth: 100,
editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否' } }, editRender: { name: '$switch', props: { openValue: 1, closeValue: 0, openLabel: '是', closeLabel: '否' } },
slots: { slots: {
default: (scope) => <vxe-switch vModel={scope.row.isNullable} open-label="是" close-label="否" openValue={1} closeValue={0}></vxe-switch>, default: "isNullable"
}, },
}, },
{ {
@ -169,7 +189,7 @@ const options = reactive<VxeGridProps>({
showOverflow: true, showOverflow: true,
fixed: 'right', fixed: 'right',
slots: { slots: {
default: (scope) => <el-button icon="ele-Delete" text type="danger" onClick={() => deleteRow(scope.row)}></el-button>, default: "operate",
}, },
}, },
], ],
@ -209,19 +229,19 @@ const options = reactive<VxeGridProps>({
query: () => Promise.resolve(), //不加会报错 query: () => Promise.resolve(), //不加会报错
}, },
}, },
}); });
// 打开弹窗 // 打开弹窗
const openDialog = (row: any) => { const openDialog = (row: any) => {
state.ruleForm = row; state.ruleForm = row;
state.visible = true; state.visible = true;
ruleFormRef.value?.resetFields(); ruleFormRef.value?.resetFields();
nextTick(() => { nextTick(() => {
rowDrop(); rowDrop();
}); });
}; };
const rowDrop = () => { const rowDrop = () => {
const el = document.querySelector('.xGrid-table-style .vxe-table--body tbody') as HTMLElement; const el = document.querySelector('.xGrid-table-style .vxe-table--body tbody') as HTMLElement;
state.sortable = Sortable.create(el, { state.sortable = Sortable.create(el, {
animation: 300, animation: 300,
@ -250,36 +270,36 @@ const rowDrop = () => {
xGrid.value?.updateData(); xGrid.value?.updateData();
}, },
}); });
}; };
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
emits('addTableSubmitted', state.ruleForm.tableName ?? ''); emits('addTableSubmitted', state.ruleForm.tableName ?? '');
cancel(); cancel();
}; };
// 取消 // 取消
const cancel = () => { const cancel = () => {
xGrid.value?.loadData([]); xGrid.value?.loadData([]);
state.visible = false; state.visible = false;
clearTimeout(initTime); clearTimeout(initTime);
if (state.sortable) { if (state.sortable) {
state.sortable.destroy(); state.sortable.destroy();
} }
}; };
// 导出日志(服务端导出) // 导出日志(服务端导出)
const handleExport = async (opts: any) => { const handleExport = async (opts: any) => {
console.log(opts); console.log(opts);
options.loading = true; options.loading = true;
// var res = await getAPI(SysLogExApi).apiSysLogExExportPost(state.queryParams as any, { responseType: 'blob' }); // var res = await getAPI(SysLogExApi).apiSysLogExExportPost(state.queryParams as any, { responseType: 'blob' });
options.loading = false; options.loading = false;
// VXETable.saveFile({ filename: getFileName(res.headers), type: 'xlsx', content: res.data as any }); // VXETable.saveFile({ filename: getFileName(res.headers), type: 'xlsx', content: res.data as any });
return Promise.resolve(); return Promise.resolve();
}; };
// 提交 // 提交
const submit = () => { const submit = () => {
ruleFormRef.value.validate(async (valid: boolean) => { ruleFormRef.value.validate(async (valid: boolean) => {
if (!valid) return; if (!valid) return;
const tableData = xGrid.value?.getTableData().fullData ?? []; const tableData = xGrid.value?.getTableData().fullData ?? [];
@ -299,15 +319,15 @@ const submit = () => {
await getAPI(SysDatabaseApi).apiSysDatabaseAddTablePost(params); await getAPI(SysDatabaseApi).apiSysDatabaseAddTablePost(params);
closeDialog(); closeDialog();
}); });
}; };
// 增加主键列 // 增加主键列
const addPrimaryColumn = async () => { const addPrimaryColumn = async () => {
const fullData = xGrid.value?.getTableData().fullData; const fullData = xGrid.value?.getTableData().fullData;
const colIndex = (fullData?.length ?? 0) + 1; const colIndex = (fullData?.length ?? 0) + 1;
const temp = await xGrid.value?.insertAt( const temp = await xGrid.value?.insertAt(
{ {
columnDescription: '主键Id', columnDescription: '主键ID',
dataType: 'bigint', dataType: 'bigint',
dbColumnName: 'Id', dbColumnName: 'Id',
decimalDigits: 0, decimalDigits: 0,
@ -322,10 +342,10 @@ const addPrimaryColumn = async () => {
-1 -1
); );
if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName'); if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
}; };
// 增加普通列 // 增加普通列
const addColumn = async () => { const addColumn = async () => {
const fullData = xGrid.value?.getTableData().fullData; const fullData = xGrid.value?.getTableData().fullData;
const colIndex = (fullData?.length ?? 0) + 1; const colIndex = (fullData?.length ?? 0) + 1;
const temp = await xGrid.value?.insertAt( const temp = await xGrid.value?.insertAt(
@ -337,7 +357,7 @@ const addColumn = async () => {
isIdentity: 0, isIdentity: 0,
isNullable: 1, isNullable: 1,
isPrimarykey: 0, isPrimarykey: 0,
length: 32, length: 64,
orderNo: colIndex, orderNo: colIndex,
editable: true, editable: true,
isNew: true, isNew: true,
@ -345,10 +365,10 @@ const addColumn = async () => {
-1 -1
); );
if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName'); if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
}; };
// 增加租户列 // 增加租户列
const addTenantColumn = async () => { const addTenantColumn = async () => {
const fullData = xGrid.value?.getTableData().fullData; const fullData = xGrid.value?.getTableData().fullData;
const colIndex = (fullData?.length ?? 0) + 1; const colIndex = (fullData?.length ?? 0) + 1;
const temp = await xGrid.value?.insertAt( const temp = await xGrid.value?.insertAt(
@ -368,19 +388,22 @@ const addTenantColumn = async () => {
-1 -1
); );
if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName'); if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
}; };
// 增加通用基础列 // 增加通用基础列
const addBaseColumn = async () => { const addBaseColumn = async () => {
const fileds = [ const fileds = [
{ dataType: 'varchar', name: 'Code', desc: '编码', length: 64 },
{ dataType: 'varchar', name: 'Name', desc: '名称', length: 64 },
{ dataType: 'varchar', name: 'Description', desc: '描述', length: 500 },
{ dataType: 'datetime', name: 'CreateTime', desc: '创建时间' }, { dataType: 'datetime', name: 'CreateTime', desc: '创建时间' },
{ dataType: 'datetime', name: 'UpdateTime', desc: '更新时间' }, { dataType: 'bigint', name: 'CreateUserId', desc: '创建人Id' },
{ dataType: 'bigint', name: 'CreateUserId', desc: '创建者Id' }, { dataType: 'varchar', name: 'CreateUserName', desc: '创建人', length: 64 },
{ dataType: 'varchar', name: 'CreateUserName', desc: '创建者姓名', length: 64 }, { dataType: 'datetime', name: 'UpdateTime', desc: '修改时间' },
{ dataType: 'bigint', name: 'UpdateUserId', desc: '修改者Id' }, { dataType: 'bigint', name: 'UpdateUserId', desc: '修改人Id' },
{ dataType: 'varchar', name: 'UpdateUserName', desc: '修改者姓名', length: 64 }, { dataType: 'varchar', name: 'UpdateUserName', desc: '修改人', length: 64 },
{ dataType: 'bigint', name: 'CreateOrgId', desc: '创建者部门Id' }, { dataType: 'bigint', name: 'CreateOrgId', desc: '创建者机构Id' },
{ dataType: 'varchar', name: 'CreateOrgName', desc: '创建者部门名称', length: 64 }, { dataType: 'varchar', name: 'CreateOrgName', desc: '创建者机构名称', length: 64 },
{ dataType: 'bit', name: 'IsDelete', desc: '软删除', isNullable: 0 }, { dataType: 'bit', name: 'IsDelete', desc: '软删除', isNullable: 0 },
]; ];
let temp = {} as any; let temp = {} as any;
@ -406,17 +429,17 @@ const addBaseColumn = async () => {
colIndex++; colIndex++;
} }
if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName'); if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
}; };
// 删除行 // 删除行
const deleteRow = (row: any) => { const deleteRow = (row: any) => {
const fullData = xGrid.value?.getTableData().fullData; const fullData = xGrid.value?.getTableData().fullData;
fullData?.filter((e: any) => e.orderNo > row.orderNo)?.forEach((e: any) => (e.orderNo = e.orderNo - 1)); fullData?.filter((e: any) => e.orderNo > row.orderNo)?.forEach((e: any) => (e.orderNo = e.orderNo - 1));
xGrid.value?.remove(row); xGrid.value?.remove(row);
}; };
// 删除选中行 // 删除选中行
const deleteSelected = () => { const deleteSelected = () => {
const selected = xGrid.value?.getCheckboxRecords(); const selected = xGrid.value?.getCheckboxRecords();
const fullData = xGrid.value?.getTableData().fullData; const fullData = xGrid.value?.getTableData().fullData;
// 更新序号 // 更新序号
@ -425,23 +448,23 @@ const deleteSelected = () => {
} }
// 移除选中 // 移除选中
xGrid.value?.removeCheckboxRow(); xGrid.value?.removeCheckboxRow();
}; };
// 导出对象 // 导出对象
defineExpose({ openDialog }); defineExpose({ openDialog });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.sys-dbTable-container :deep(.el-dialog__body) { .sys-dbTable-container :deep(.el-dialog__body) {}
height: 90vh;
max-height: 90vh; .xGrid-table-style .drag-btn {
}
.xGrid-table-style .drag-btn {
cursor: move; cursor: move;
font-size: 20px; font-size: 20px;
} }
.xGrid-table-style .vxe-body--row.sortable-ghost,
.xGrid-table-style .vxe-body--row.sortable-chosen { .xGrid-table-style .vxe-body--row.sortable-ghost,
.xGrid-table-style .vxe-body--row.sortable-chosen {
background-color: #e40000 !important; background-color: #e40000 !important;
} }
</style> </style>