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

117
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,16 +34,34 @@
<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>
</template>
<template #footer>
<vxe-button @click="cancel">取 消</vxe-button>
<vxe-button status="primary" @click="submit">确 定</vxe-button>
</template>
</vxe-modal>
</div> </div>
</template> </template>
@ -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",
}, },
}, },
], ],
@ -307,7 +327,7 @@ const addPrimaryColumn = async () => {
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,
@ -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,
@ -373,14 +393,17 @@ const addTenantColumn = async () => {
// 增加通用基础列 // 增加通用基础列
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;
@ -432,16 +455,16 @@ 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-ghost,
.xGrid-table-style .vxe-body--row.sortable-chosen { .xGrid-table-style .vxe-body--row.sortable-chosen {
background-color: #e40000 !important; background-color: #e40000 !important;
} }
</style> </style>