feat: 实现切换数据库类型自动填充表单项默认值

src/views/demo/tools/database/data.ts

 import { BasicColumn, FormProps } from '@/components/Table'
 
-interface Option {
+export interface Option {
     label: string
     value: string
     property?: {
         driver?: string
         url?: string
+        username?: string
     }
     disabled?: boolean
 }
@@ -20,6 +21,7 @@ export const options: Option[] = [
         property: {
             driver: 'org.postgresql.Driver',
             url: 'jdbc:postgresql://127.0.0.1:5432/basic-boot',
+            username: 'postgres',
         },
     },
     {
@@ -28,6 +30,7 @@ export const options: Option[] = [
         property: {
             driver: 'org.h2.Driver',
             url: 'jdbc:h2:file:~/h2_basic;DB_CLOSE_ON_EXIT=FALSE',
+            username: 'sa',
         },
     },
     {
@@ -36,16 +39,13 @@ export const options: Option[] = [
         property: {
             driver: 'com.mysql.cj.jdbc.Driver',
             url: 'jdbc:mysql://127.0.0.1:3306/basic-boot?characterEncoding=UTF-8&useUnicode=true&useSSL=false&tinyInt1isBit=false&allowPublicKeyRetrieval=true&serverTimezone=Asia/Shanghai',
+            username: 'root',
         },
         disabled: true,
     },
     {
         label: '其他数据库',
         value: 'custom',
-        property: {
-            driver: '',
-            url: '',
-        },
     },
 ]
 
@@ -104,6 +104,7 @@ export function getDataSource() {
 export function getFormConfig(): Partial<FormProps> {
     return {
         layout: 'inline',
+        name: 'query',
         colon: true,
         compact: true,
         schemas: [

src/views/demo/tools/database/Modal.vue → src/views/demo/tools/database/edit.vue

@@ -3,13 +3,13 @@
     import { Icon } from '/@/components/Icon'
     import { BasicForm, useForm } from '/@/components/Form'
     import { BasicModal, useModalInner } from '/@/components/Modal'
-    import { options } from './data'
+    import { options, Option } from './data'
 
     const [registerModal] = useModalInner((data) => {
         console.log(data)
     })
 
-    const [registerEditForm] = useForm({
+    const [registerEditForm, { setFieldsValue }] = useForm({
         colon: true,
         labelWidth: 120,
         showActionButtonGroup: false,
@@ -28,6 +28,13 @@
                 component: 'Select',
                 componentProps: {
                     options,
+                    onChange: (_: string, item: Option) => {
+                        setFieldsValue({
+                            driver: item?.property?.driver ?? '',
+                            url: item?.property?.url ?? '',
+                            username: item?.property?.username ?? '',
+                        })
+                    },
                 },
                 colProps: { span: 24 },
             },

src/views/demo/tools/database/index.vue

@@ -3,7 +3,7 @@
     import { Icon } from '/@/components/Icon'
     import { useModal } from '/@/components/Modal'
     import { ActionItem, BasicColumn, BasicTable, EditRecordRow, useTable, TableAction } from '/@/components/Table'
-    import Modal from './Modal.vue'
+    import EditModal from './edit.vue'
     import { getColumns, getDataSource, getFormConfig } from './data'
 
     const [registerTable] = useTable({
@@ -40,7 +40,7 @@
         ]
     }
 
-    const [registerModal, { openModal, setModalProps }] = useModal()
+    const [registerEditModal, { openModal, setModalProps }] = useModal()
 
     // 新增/编辑打开窗口
     const editHandler = (type: '新增' | '编辑', data?: Recordable) => {
@@ -96,7 +96,7 @@
     </BasicTable>
 
     <!-- 新增/编辑弹窗 -->
-    <Modal @register="registerModal" />
+    <EditModal @register="registerEditModal" />
 </template>
 
 <style lang="less" scoped>