feat: codegen table

src/views/infra/codegen/components/CloumInfoForm.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="step2">
     <div class="step2-form">
-      <BasicForm @register="register" />
+      <BasicTable :dataSource="columnsInfo" @register="registerTable" @row-click="handleEdit" />
     </div>
     <Divider />
+    <a-button @click="customResetFunc">上一步</a-button>
+    <a-button @click="customSubmitFunc">下一步</a-button>
     <h3>说明</h3>
     <h4>转账到支付宝账户</h4>
     <p>
@@ -17,26 +19,26 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { BasicForm, useForm } from '@/components/Form'
-import { basicInfoSchemas } from './data'
+import { BasicTable, EditRecordRow, useTable } from '@/components/Table'
+import { columns } from './data'
 import { Divider } from 'ant-design-vue'
+import { CodegenColumnVO } from '@/api/infra/codegen/types'
 
 const emit = defineEmits(['next', 'prev'])
 
-const [register, { validate }] = useForm({
-  labelWidth: 120,
-  schemas: basicInfoSchemas,
-  actionColOptions: {
-    span: 14
-  },
-  resetButtonOptions: {
-    text: '上一步'
-  },
-  submitButtonOptions: {
-    text: '下一步'
-  },
-  resetFunc: customResetFunc,
-  submitFunc: customSubmitFunc
+defineProps({
+  columnsInfo: {
+    type: Array as PropType<CodegenColumnVO[]>,
+    default: () => null
+  }
+})
+
+const [registerTable] = useTable({
+  columns,
+  pagination: false,
+  useSearchForm: false,
+  showTableSetting: false,
+  showIndexColumn: false
 })
 
 async function customResetFunc() {
@@ -45,15 +47,18 @@ async function customResetFunc() {
 
 async function customSubmitFunc() {
   try {
-    const values = await validate()
-    emit('next', values)
+    emit('next', null)
   } catch (error) {}
 }
+
+function handleEdit(record: EditRecordRow) {
+  record.onEdit?.(true)
+}
 </script>
 <style lang="less" scoped>
 .step2 {
   &-form {
-    width: 450px;
+    width: 100%;
     margin: 0 auto;
   }
 

src/views/infra/codegen/components/data.ts

@@ -1,5 +1,7 @@
+import { listSimpleDictType } from '@/api/system/dict/type'
 import { listSimpleMenus } from '@/api/system/menu'
 import { FormSchema } from '@/components/Form'
+import { BasicColumn } from '@/components/Table'
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 
 export const basicInfoSchemas: FormSchema[] = [
@@ -128,3 +130,188 @@ export const basicInfoSchemas: FormSchema[] = [
     colProps: { span: 24 }
   }
 ]
+
+export const columns: BasicColumn[] = [
+  {
+    title: '字段列名',
+    dataIndex: 'columnName',
+    width: 60
+  },
+  {
+    title: '基础属性',
+    children: [
+      {
+        title: '物理类型',
+        dataIndex: 'dataType',
+        editComponent: 'Select',
+        width: 50
+      },
+      {
+        title: '字段描述',
+        dataIndex: 'columnComment',
+        editRow: true,
+        editComponent: 'Input',
+        width: 50
+      },
+      {
+        title: 'Java类型',
+        dataIndex: 'javaType',
+        editRow: true,
+        editComponent: 'Select',
+        editComponentProps: {
+          options: [
+            {
+              label: 'Long',
+              value: 'Long'
+            },
+            {
+              label: 'String',
+              value: 'String'
+            },
+            {
+              label: 'Integer',
+              value: 'Integer'
+            },
+            {
+              label: 'Double',
+              value: 'Double'
+            },
+            {
+              label: 'BigDecimal',
+              value: 'BigDecimal'
+            },
+            {
+              label: 'LocalDateTime',
+              value: 'LocalDateTime'
+            },
+            {
+              label: 'Boolean',
+              value: 'Boolean'
+            }
+          ]
+        },
+        width: 50
+      },
+      {
+        title: 'java属性',
+        dataIndex: 'javaField',
+        editRow: true,
+        editComponent: 'Input',
+        width: 50
+      }
+    ]
+  },
+  {
+    title: '增删改查',
+    children: [
+      {
+        title: '插入',
+        dataIndex: 'createOperation',
+        editRow: true,
+        editComponent: 'Checkbox',
+        editValueMap: (value) => {
+          return value ? '是' : '否'
+        },
+        width: 40
+      },
+      {
+        title: '编辑',
+        dataIndex: 'updateOperation',
+        editRow: true,
+        editComponent: 'Checkbox',
+        editValueMap: (value) => {
+          return value ? '是' : '否'
+        },
+        width: 40
+      },
+      {
+        title: '列表',
+        dataIndex: 'listOperationResult',
+        editRow: true,
+        editComponent: 'Checkbox',
+        editValueMap: (value) => {
+          return value ? '是' : '否'
+        },
+        width: 40
+      },
+      {
+        title: '查询',
+        dataIndex: 'listOperation',
+        editRow: true,
+        editComponent: 'Checkbox',
+        editValueMap: (value) => {
+          return value ? '是' : '否'
+        },
+        width: 40
+      },
+      {
+        title: '查询方式',
+        dataIndex: 'listOperationCondition',
+        editRow: true,
+        editComponent: 'Checkbox',
+        editComponentProps: {
+          options: [
+            { label: '=', value: '=' },
+            { label: '!=', value: '!=' },
+            { label: '>', value: '>' },
+            { label: '>=', value: '>=' },
+            { label: '<', value: '<' },
+            { label: '<=', value: '<=' },
+            { label: 'LIKE', value: 'LIKE' },
+            { label: 'BETWEEN', value: 'BETWEEN' }
+          ]
+        },
+        width: 60
+      },
+      {
+        title: '允许空',
+        dataIndex: 'nullable',
+        editRow: true,
+        editComponent: 'Checkbox',
+        editValueMap: (value) => {
+          return value ? '是' : '否'
+        },
+        width: 40
+      },
+      {
+        title: '显示类型',
+        dataIndex: 'htmlType',
+        editRow: true,
+        editComponent: 'Select',
+        editComponentProps: {
+          options: [
+            { label: '文本框', value: 'input' },
+            { label: '文本域', value: 'textarea' },
+            { label: '下拉框', value: 'select' },
+            { label: '单选框', value: 'radio' },
+            { label: '复选框', value: 'checkbox' },
+            { label: '日期控件', value: 'datetime' },
+            { label: '图片上传', value: 'imageUpload' },
+            { label: '文件上传', value: 'fileUpload' },
+            { label: '富文本控件', value: 'editor' }
+          ]
+        },
+        width: 60
+      },
+      {
+        title: '字典类型',
+        dataIndex: 'dictType',
+        editRow: true,
+        editComponent: 'ApiSelect',
+        editComponentProps: {
+          api: () => listSimpleDictType(),
+          labelField: 'name',
+          valueField: 'type'
+        },
+        width: 100
+      },
+      {
+        title: '示例',
+        dataIndex: 'example',
+        editRow: true,
+        editComponent: 'Input',
+        width: 60
+      }
+    ]
+  }
+]