chore: 代码格式调整、表格高度配置测试

src/views/demo/tools/online/form/components/DatabaseSchemaTable.vue

@@ -48,8 +48,10 @@
     const databaseSchemaTableOptions = reactive<BasicTableProps>({
         id: id.value,
         // FIXME: 修复表格高度自适应问题
-        // height: 'auto',
+        height: 'auto',
+        maxHeight: 430,
         autoResize: true,
+        scrollY: { enabled: true, gt: 30 },
         stripe: false,
         keepSource: true,
         showOverflow: true,
@@ -57,7 +59,7 @@
         checkboxConfig: { checkMethod: ({ row }) => !row.disabled },
         columns: getDatabaseSchemaColumns(change),
         data: props.data,
-        editConfig: { trigger: 'click', mode: 'cell', showStatus: false, beforeEditMethod: ({ row }) => !row.disabled },
+        editConfig: { trigger: 'click', mode: 'cell', showStatus: false, activeMethod: ({ row }) => !row.disabled },
         editRules: {
             field: [{ required: true, message: '请输入字段名称' }],
             comment: [{ required: true, message: '请输入字段备注' }],
@@ -131,12 +133,12 @@
         },
     })
 
-    const onDatabaseSchemaCheckboxChange = () => {
+    function onDatabaseSchemaCheckboxChange() {
         const checkedRecords = databaseSchemaTable.value?.getCheckboxRecords()
         databaseSchemaTableOptions.toolbarConfig.buttons[1].buttonRender.props.disabled = !checkedRecords?.length
     }
 
-    const createDatabaseSchemaTableActions = (record: DatabaseSchema) => {
+    function createDatabaseSchemaTableActions(record: DatabaseSchema) {
         const actions: ActionItem[] = [
             {
                 icon: 'carbon:arrow-up',

src/views/demo/tools/online/form/edit.vue

 <script lang="ts" setup>
-    import { TabPane, Tabs } from 'ant-design-vue'
+    import { Spin, TabPane, Tabs } from 'ant-design-vue'
     import type { DatabaseSchema, TableType } from './data'
     import { databaseTypeOptions, getDefaultSchemaFieldDataSourcesByType } from './data'
     import DatabaseSchemaTable from './components/DatabaseSchemaTable.vue'
@@ -80,7 +80,7 @@
     const databaseSchemaTableData = computed(() => {
         return getDefaultSchemaFieldDataSourcesByType(tableType.value)
     })
-    const databaseSchemaTableDataChange = (data: DatabaseSchema[]) => {
+    function databaseSchemaTableDataChange(data: DatabaseSchema[]) {
         model.schemas = toRaw(data)
     }
 
@@ -89,17 +89,15 @@
             return item.field && item.field !== 'id' && (item.field.endsWith('_id') || item.field.endsWith('Id'))
         })
     })
-    const databaseForeignKeyTableDataChange = (data: DatabaseSchema[]) => {
+    function databaseForeignKeyTableDataChange(data: DatabaseSchema[]) {
         model.foreignKeys = toRaw(data)
     }
 </script>
 
 <template>
     <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose defaultFullscreen :canFullscreen="false">
-        <div class="pr-20px">
+        <Spin wrapper-class-name="p-6" :spinning="false">
             <BasicForm @register="registerEditForm" />
-        </div>
-        <div class="p-20px">
             <Tabs>
                 <TabPane key="db-schema">
                     <template #tab>
@@ -154,7 +152,7 @@
                     规则校验
                 </TabPane>
             </Tabs>
-        </div>
+        </Spin>
     </BasicModal>
 </template>
 

src/views/demo/tools/online/form/index.vue

@@ -31,7 +31,7 @@
         },
     })
 
-    const createActions = (record: EditRecordRow): ActionItem[] => {
+    function createActions(record: EditRecordRow): ActionItem[] {
         return [
             {
                 label: '编辑',
@@ -39,7 +39,7 @@
             },
         ]
     }
-    const createDropDownActions = (record: EditRecordRow): ActionItem[] => {
+    function createDropDownActions(record: EditRecordRow): ActionItem[] {
         return [
             {
                 label: '同步数据库',
@@ -171,9 +171,9 @@
     const [registerEditModal, { openModal, setModalProps }] = useModal()
 
     // 新增/编辑打开窗口
-    const editHandler = (data?: Recordable) => {
+    function editHandler(data?: Recordable) {
         setModalProps({ title: data ? '编辑' : '新增' })
-        openModal(true, data || {})
+        openModal(true, data ?? {})
     }
 </script>