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

Web/src/views/system/database/component/addTable.vue

@@ -1,29 +1,27 @@
 <template>
 	<div class="sys-dbTable-container">
-		<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>
+	  <vxe-modal v-model="state.visible" title="增加表" :width="800" :height="350" resize show-footer show-confirm-button
+		show-cancel-button show-zoom fullscreen @close="cancel">
+		<template #default>
 		  <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="10">
+			<el-row>
 			  <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 />
+				<el-form-item label="表名称" prop="tableName"
+				  :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
+				  <el-input v-model.lazy.trim="state.ruleForm.tableName" placeholder="表名称" clearable />
 				</el-form-item>
 			  </el-col>
 			  <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-input v-model="state.ruleForm.description" placeholder="描述" clearable type="textarea" />
+				<el-form-item label="描述" prop="description"
+				  :rules="[{ required: true, message: '描述不能为空', trigger: 'blur' }]">
+				  <el-input v-model.lazy.trim="state.ruleForm.description" placeholder="描述" clearable type="textarea" />
 				</el-form-item>
 			  </el-col>
 			</el-row>
 		  </el-form>
 		  <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">
 			  <template #toolbar_buttons>
 				<el-button icon="ele-Plus" @click="addPrimaryColumn">新增主键字段</el-button>
@@ -36,43 +34,61 @@
 			  <template #empty>
 				<el-empty :image-size="200" />
 			  </template>
-				</vxe-grid>
-			</div>
-
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="cancel">取 消</el-button>
-					<el-button type="primary" @click="submit">确 定</el-button>
+			  <template #drag_default="{}">
+				<span class="drag-btn">
+				  <i class="fa fa-arrows"></i>
 				</span>
 			  </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>
+		<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">
-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';
+  <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 { getAPI } from '/@/utils/axios-utils';
+  import { SysDatabaseApi } from '/@/api-services/api';
+  import { UpdateDbTableInput } from '/@/api-services/models';
   
-const xGrid = ref<VxeGridInstance>();
-let initTime: any;
-const emits = defineEmits(['addTableSubmitted']);
-const ruleFormRef = ref();
-const state = reactive({
+  const xGrid = ref<VxeGridInstance>();
+  let initTime: any;
+  const emits = defineEmits(['addTableSubmitted']);
+  const ruleFormRef = ref();
+  const state = reactive({
 	visible: false,
 	ruleForm: {} as UpdateDbTableInput,
 	sortable: undefined as any,
-});
+  });
   
-// 表格参数配置
-const options = reactive<VxeGridProps>({
+  // 表格参数配置
+  const options = reactive<VxeGridProps>({
 	id: 'sysAddTable',
 	height: 'auto',
 	autoResize: true,
@@ -81,21 +97,25 @@ const options = reactive<VxeGridProps>({
 	align: 'center', // 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到）
 	data: [] as Array<any>,
 	rowConfig: { useKey: true },
+	mouseConfig: {
+	  selected: true,
+	},
+	keyboardConfig: {
+	  isArrow: true,
+	  isDel: true,
+	  isEnter: true,
+	  isTab: true,
+	  isEdit: true,
+	},
 	seqConfig: { seqMethod: ({ row }) => row.orderNo },
 	columns: [
 	  {
 		width: 80,
 		slots: {
-				default: () => (
-					<span class="drag-btn">
-						<el-icon>
-							<Rank />
-						</el-icon>
-					</span>
-				),
+		  default: 'drag_default',
 		},
 	  },
-		{ type: 'seq', title: '序号', width: 50 },
+	  { type: 'seq', title: '序号', width: 60 },
 	  { type: 'checkbox', width: 40 },
 	  {
 		field: 'dbColumnName',
@@ -115,9 +135,9 @@ const options = reactive<VxeGridProps>({
 		field: 'isPrimarykey',
 		title: '主键',
 		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: {
-				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,
 		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>,
+		  default: "isIdentity"
 		},
 	  },
 	  {
@@ -146,7 +166,7 @@ const options = reactive<VxeGridProps>({
 		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>,
+		  default: "isNullable"
 		},
 	  },
 	  {
@@ -169,7 +189,7 @@ const options = reactive<VxeGridProps>({
 		showOverflow: true,
 		fixed: 'right',
 		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(), //不加会报错
 		},
 	},
-});
+  });
   
-// 打开弹窗
-const openDialog = (row: any) => {
+  // 打开弹窗
+  const openDialog = (row: any) => {
 	state.ruleForm = row;
 	state.visible = true;
 	ruleFormRef.value?.resetFields();
 	nextTick(() => {
 	  rowDrop();
 	});
-};
+  };
   
-const rowDrop = () => {
+  const rowDrop = () => {
 	const el = document.querySelector('.xGrid-table-style .vxe-table--body tbody') as HTMLElement;
 	state.sortable = Sortable.create(el, {
 	  animation: 300,
@@ -250,36 +270,36 @@ const rowDrop = () => {
 		xGrid.value?.updateData();
 	  },
 	});
-};
+  };
   
-// 关闭弹窗
-const closeDialog = () => {
+  // 关闭弹窗
+  const closeDialog = () => {
 	emits('addTableSubmitted', state.ruleForm.tableName ?? '');
 	cancel();
-};
+  };
   
-// 取消
-const cancel = () => {
+  // 取消
+  const cancel = () => {
 	xGrid.value?.loadData([]);
 	state.visible = false;
 	clearTimeout(initTime);
 	if (state.sortable) {
 	  state.sortable.destroy();
 	}
-};
+  };
   
-// 导出日志(服务端导出)
-const handleExport = async (opts: any) => {
+  // 导出日志(服务端导出)
+  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 = () => {
+  // 提交
+  const submit = () => {
 	ruleFormRef.value.validate(async (valid: boolean) => {
 	  if (!valid) return;
 	  const tableData = xGrid.value?.getTableData().fullData ?? [];
@@ -299,15 +319,15 @@ const submit = () => {
 	  await getAPI(SysDatabaseApi).apiSysDatabaseAddTablePost(params);
 	  closeDialog();
 	});
-};
+  };
   
-// 增加主键列
-const addPrimaryColumn = async () => {
+  // 增加主键列
+  const addPrimaryColumn = async () => {
 	const fullData = xGrid.value?.getTableData().fullData;
 	const colIndex = (fullData?.length ?? 0) + 1;
 	const temp = await xGrid.value?.insertAt(
 	  {
-			columnDescription: '主键Id',
+		columnDescription: '主键ID',
 		dataType: 'bigint',
 		dbColumnName: 'Id',
 		decimalDigits: 0,
@@ -322,10 +342,10 @@ const addPrimaryColumn = async () => {
 	  -1
 	);
 	if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
-};
+  };
   
-// 增加普通列
-const addColumn = async () => {
+  // 增加普通列
+  const addColumn = async () => {
 	const fullData = xGrid.value?.getTableData().fullData;
 	const colIndex = (fullData?.length ?? 0) + 1;
 	const temp = await xGrid.value?.insertAt(
@@ -337,7 +357,7 @@ const addColumn = async () => {
 		isIdentity: 0,
 		isNullable: 1,
 		isPrimarykey: 0,
-			length: 32,
+		length: 64,
 		orderNo: colIndex,
 		editable: true,
 		isNew: true,
@@ -345,10 +365,10 @@ const addColumn = async () => {
 	  -1
 	);
 	if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
-};
+  };
   
-// 增加租户列
-const addTenantColumn = async () => {
+  // 增加租户列
+  const addTenantColumn = async () => {
 	const fullData = xGrid.value?.getTableData().fullData;
 	const colIndex = (fullData?.length ?? 0) + 1;
 	const temp = await xGrid.value?.insertAt(
@@ -368,19 +388,22 @@ const addTenantColumn = async () => {
 	  -1
 	);
 	if (temp && temp.row) await xGrid.value?.setEditCell(temp?.row, 'dbColumnName');
-};
+  };
   
-// 增加通用基础列
-const addBaseColumn = async () => {
+  // 增加通用基础列
+  const addBaseColumn = async () => {
 	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: '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: 'bigint', name: 'CreateUserId', desc: '创建人Id' },
+	  { dataType: 'varchar', name: 'CreateUserName', desc: '创建人', length: 64 },
+	  { dataType: 'datetime', name: 'UpdateTime', desc: '修改时间' },
+	  { 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;
@@ -406,17 +429,17 @@ const addBaseColumn = async () => {
 	  colIndex++;
 	}
 	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;
 	fullData?.filter((e: any) => e.orderNo > row.orderNo)?.forEach((e: any) => (e.orderNo = e.orderNo - 1));
 	xGrid.value?.remove(row);
-};
+  };
   
-// 删除选中行
-const deleteSelected = () => {
+  // 删除选中行
+  const deleteSelected = () => {
 	const selected = xGrid.value?.getCheckboxRecords();
 	const fullData = xGrid.value?.getTableData().fullData;
 	// 更新序号
@@ -425,23 +448,23 @@ const deleteSelected = () => {
 	}
 	// 移除选中
 	xGrid.value?.removeCheckboxRow();
-};
+  };
   
-// 导出对象
-defineExpose({ openDialog });
-</script>
+  // 导出对象
+  defineExpose({ openDialog });
+  </script>
   
-<style lang="scss" scoped>
-.sys-dbTable-container :deep(.el-dialog__body) {
-	height: 90vh;
-	max-height: 90vh;
-}
-.xGrid-table-style .drag-btn {
+  <style lang="scss" scoped>
+  .sys-dbTable-container :deep(.el-dialog__body) {}
+  
+  .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 {
+  }
+  
+  .xGrid-table-style .vxe-body--row.sortable-ghost,
+  .xGrid-table-style .vxe-body--row.sortable-chosen {
 	background-color: #e40000 !important;
-}
-</style>
+  }
+  </style>
+