feat: Online - Form 开发中

src/router/routes/modules/demo/tools.ts

@@ -74,6 +74,9 @@ const tools: AppRouteModule = {
                         icon: 'fluent:form-20-regular',
                     },
                     component: () => import('/@/views/demo/tools/online/form/index.vue'),
+                    tag: {
+                        content: '开发中',
+                    },
                 },
                 {
                     path: 'report',

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

@@ -85,10 +85,12 @@
             <BasicForm @register="registerEditForm" />
         </div>
         <template #insertFooter>
-            <Button type="dashed" danger @click="test" :disabled="testing">
-                <Icon icon="fluent-emoji-high-contrast:test-tube" />
-                测试连接
-            </Button>
+            <div class="inline-block absolute left-4">
+                <Button type="primary" danger @click="test" :disabled="testing">
+                    <Icon icon="fluent-emoji-high-contrast:test-tube" />
+                    测试连接
+                </Button>
+            </div>
         </template>
     </BasicModal>
 </template>

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

 <script lang="ts" setup>
+    import { Tabs, TabPane } from 'ant-design-vue'
+    import { Icon } from '@/components/Icon'
+    import { BasicForm, useForm } from '/@/components/Form'
     import { BasicModal, useModalInner } from '/@/components/Modal'
 
+    import { typeOptions } from './data'
+
     const [registerModal] = useModalInner((data) => {
         console.log(data)
+
+        // TODO:
+        // 1. 根据传递的 ID 参数，查询表配置详细信息
+        // 2. 赋值填充到表单对象中
+    })
+
+    const [registerEditForm] = useForm({
+        colon: true,
+        labelWidth: 150,
+        showActionButtonGroup: false,
+        schemas: [
+            {
+                field: 'name',
+                label: '表名',
+                required: true,
+                component: 'Input',
+                colProps: {
+                    span: 8,
+                },
+            },
+            {
+                field: 'describe',
+                label: '表描述',
+                required: true,
+                component: 'Input',
+                colProps: {
+                    span: 8,
+                },
+            },
+            {
+                field: 'type',
+                label: '表类型',
+                required: true,
+                component: 'Select',
+                componentProps: {
+                    options: typeOptions,
+                    defaultValue: typeOptions[0].value,
+                },
+                colProps: {
+                    span: 8,
+                },
+            },
+        ],
     })
 </script>
 
 <template>
-    <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose defaultFullscreen />
+    <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose defaultFullscreen>
+        <div class="pr-20px">
+            <BasicForm @register="registerEditForm" />
+        </div>
+        <div class="p-20px">
+            <Tabs>
+                <TabPane key="db-schema">
+                    <template #tab>
+                        <Icon icon="carbon:schematics" />
+                        数据表属性
+                    </template>
+                    <!--  -->
+
+                    数据表属性
+                </TabPane>
+
+                <TabPane key="db-foreign-key">
+                    <template #tab>
+                        <Icon icon="mdi:foreign-key" />
+                        外键
+                    </template>
+                    <!--  -->
+                </TabPane>
+
+                <TabPane key="db-index">
+                    <template #tab>
+                        <Icon icon="ant-design:node-index-outlined" />
+                        索引
+                    </template>
+                    <!--  -->
+                </TabPane>
+
+                <TabPane key="page-schema">
+                    <template #tab>
+                        <Icon icon="fluent-emoji-high-contrast:pager" />
+                        页面属性
+                    </template>
+                    <!--  -->
+                </TabPane>
+
+                <TabPane key="schema-rule">
+                    <template #tab>
+                        <Icon icon="material-symbols:rule" />
+                        规则校验
+                    </template>
+                    <!--  -->
+
+                    规则校验
+                </TabPane>
+            </Tabs>
+        </div>
+    </BasicModal>
 </template>
 
 <style lang="less" scoped>