feat: code gen

apps/web-antd/src/views/tool/gen/edit-steps/gen-config.vue

@@ -3,14 +3,14 @@ import type { GenInfo } from '#/api/tool/gen/model';
 
 import { inject, type Ref, unref } from 'vue';
 
-import { Space } from 'ant-design-vue';
+import { message, Space } from 'ant-design-vue';
 import { cloneDeep } from 'lodash-es';
 
 import { useVbenVxeGrid, type VxeGridProps } from '#/adapter';
 import { editSave } from '#/api/tool/gen';
 
 import { toCurrentStep } from '../mitt';
-import { vxeTableColumns } from './gen-data';
+import { validRules, vxeTableColumns } from './gen-data';
 
 /**
  * 从父组件注入
@@ -19,12 +19,19 @@ const genInfoData = inject('genInfoData') as Ref<GenInfo['info']>;
 
 const gridOptions: VxeGridProps = {
   columns: vxeTableColumns,
-  // height: 'auto',
   keepSource: true,
-  pagerConfig: {},
+  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
+  editRules: validRules,
   rowConfig: {
     isHover: true,
     keyField: 'id',
+    isCurrent: true, // 高亮当前行
+  },
+  columnConfig: {
+    resizable: true,
+  },
+  proxyConfig: {
+    enabled: true,
   },
   data: genInfoData.value.columns,
   round: true,
@@ -32,11 +39,18 @@ const gridOptions: VxeGridProps = {
   showOverflow: true,
 };
 
-const [BasicTable] = useVbenVxeGrid({ gridOptions });
+const [BasicTable, tableApi] = useVbenVxeGrid({ gridOptions });
 
 async function handleSubmit() {
   try {
+    const hasError = await tableApi.grid.validate();
+    if (hasError) {
+      message.error('校验未通过');
+      return;
+    }
     const requestData = cloneDeep(unref(genInfoData));
+    // 从表格获取最新的
+    requestData.columns = tableApi.grid.getData();
     // 树表需要添加这个参数
     if (requestData && requestData.tplCategory === 'tree') {
       const { treeCode, treeName, treeParentCode } = requestData;

apps/web-antd/src/views/tool/gen/edit-steps/gen-data.tsx

@@ -91,10 +91,12 @@ export const vxeTableColumns: VxeGridProps['columns'] = [
     field: 'columnName',
     showOverflow: 'tooltip',
     fixed: 'left',
+    width: 150,
   },
   {
     title: '字段描述',
     field: 'columnComment',
+    width: 150,
     slots: {
       edit: ({ row }) => {
         return <Input v-model:value={row.columnComment}></Input>;
@@ -105,6 +107,7 @@ export const vxeTableColumns: VxeGridProps['columns'] = [
   {
     title: 'db类型',
     field: 'columnType',
+    width: 120,
     showOverflow: 'tooltip',
   },
   {
@@ -119,6 +122,7 @@ export const vxeTableColumns: VxeGridProps['columns'] = [
         }));
         return (
           <Select
+            class="w-full"
             getPopupContainer={getPopupContainer}
             options={javaTypeOptions}
             v-model:value={row.javaType}
@@ -222,6 +226,7 @@ export const vxeTableColumns: VxeGridProps['columns'] = [
       edit: ({ row }) => {
         return (
           <Select
+            class="w-full"
             getPopupContainer={getPopupContainer}
             options={queryTypeOptions}
             v-model:value={row.queryType}
@@ -265,6 +270,7 @@ export const vxeTableColumns: VxeGridProps['columns'] = [
       edit: ({ row }) => {
         return (
           <Select
+            class="w-full"
             getPopupContainer={getPopupContainer}
             options={componentsOptions}
             v-model:value={row.htmlType}
@@ -304,6 +310,7 @@ export const vxeTableColumns: VxeGridProps['columns'] = [
         return (
           <Select
             allowClear={true}
+            class="w-full"
             disabled={disabled}
             getPopupContainer={getPopupContainer}
             onDeselect={onDeselect}