fix: 搭建代码生成页面

2025-05-13 16:34:31 +08:00
parent 14d70d05a8
commit 4eb2194415
6 changed files with 325 additions and 248 deletions
--- a/apps/web-antd/src/util/json/formType.json
+++ b/apps/web-antd/src/util/json/formType.json
@@ -1,114 +1,114 @@
 [
  {
-    "label": "Input -- 输入框",
-    "value": "Input"
+    "label": "VbenInput【输入框】",
+    "value": "VbenInput"
  },
  {
-    "label": "InputGroup -- 输入框组合",
+    "label": "InputGroup【输入框组合】",
    "value": "InputGroup"
  },
  {
-    "label": "InputPassword -- 密码输入框",
+    "label": "InputPassword【密码输入框】",
    "value": "InputPassword"
  },
  {
-    "label": "InputSearch -- 搜索输入框",
+    "label": "InputSearch【搜索输入框】",
    "value": "InputSearch"
  },
  {
-    "label": "InputTextArea -- 文本域",
+    "label": "InputTextArea【文本域】",
    "value": "InputTextArea"
  },
  {
-    "label": "InputNumber -- 数字输入框",
+    "label": "InputNumber【数字输入框】",
    "value": "InputNumber"
  },
  {
-    "label": "InputCountDown -- 倒计时输入框",
+    "label": "InputCountDown【倒计时输入框】",
    "value": "InputCountDown"
  },
  {
-    "label": "Select -- 本地下拉框",
+    "label": "Select【本地下拉框】",
    "value": "Select"
  },
  {
-    "label": "ApiSelect -- 远程下拉框",
+    "label": "ApiSelect【远程下拉框】",
    "value": "ApiSelect"
  },
  {
-    "label": "TreeSelect -- 下拉树",
+    "label": "TreeSelect【下拉树】",
    "value": "TreeSelect"
  },
  {
-    "label": "RadioButtonGroup -- 单选按钮组合",
+    "label": "RadioButtonGroup【单选按钮组合】",
    "value": "RadioButtonGroup"
  },
  {
-    "label": "RadioGroup -- 单选按钮",
+    "label": "RadioGroup【单选按钮】",
    "value": "RadioGroup"
  },
  {
-    "label": "Checkbox -- 多选按钮",
+    "label": "Checkbox【多选按钮】",
    "value": "Checkbox"
  },
  {
-    "label": "AutoComplete -- 自动填充框",
+    "label": "AutoComplete【自动填充框】",
    "value": "AutoComplete"
  },
  {
-    "label": "Cascader -- 连级选择",
+    "label": "Cascader【连级选择】",
    "value": "Cascader"
  },
  {
-    "label": "DatePicker -- 日期选择",
+    "label": "DatePicker【日期选择】",
    "value": "DatePicker"
  },
  {
-    "label": "MonthPicker -- 日期月份选择",
+    "label": "MonthPicker【日期月份选择】",
    "value": "MonthPicker"
  },
  {
-    "label": "RangePicker -- 日期范围选择",
+    "label": "RangePicker【日期范围选择】",
    "value": "RangePicker"
  },
  {
-    "label": "WeekPicker -- 日期周选择",
+    "label": "WeekPicker【日期周选择】",
    "value": "WeekPicker"
  },
  {
-    "label": "TimePicker -- 日期时间选择",
+    "label": "TimePicker【日期时间选择】",
    "value": "TimePicker"
  },
  {
-    "label": "Switch -- 开关按钮",
+    "label": "Switch【开关按钮】",
    "value": "Switch"
  },
  {
-    "label": "StrengthMeter -- 组件密码强度检测",
+    "label": "StrengthMeter【组件密码强度检测】",
    "value": "StrengthMeter"
  },
  {
-    "label": "Upload -- 上传按钮",
+    "label": "Upload【上传按钮】",
    "value": "Upload"
  },
  {
-    "label": "IconPicker -- 图标选择",
+    "label": "IconPicker【图标选择】",
    "value": "IconPicker"
  },
  {
-    "label": "Render -- 组件渲染空置",
+    "label": "Render【组件渲染空置】",
    "value": "Render"
  },
  {
-    "label": "Slider -- 滑块组件",
+    "label": "Slider【滑块组件】",
    "value": "Slider"
  },
  {
-    "label": "Rate -- 评分组件",
+    "label": "Rate【评分组件】",
    "value": "Rate"
  },
  {
-    "label": "Divider -- 分割线",
+    "label": "Divider【分割线】",
    "value": "Divider"
  }
 ]
--- a/apps/web-antd/src/views/code-generation/api/index.ts
+++ b/apps/web-antd/src/views/code-generation/api/index.ts
@@ -0,0 +1,47 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'code/';
+// /**
+//  * 分页查询代码生成列表
+//  * @param data
+//  */
+// export async function getAdminList(data: any) {
+//   return requestClient.get<any>(`${prefix}list`, { params: data });
+// }
+// /**
+//  * 分页查询代码生成列表
+//  * @param data
+//  */
+// export async function getAdminAccountBalance(data: any = {}) {
+//   return requestClient.get<any>(`${prefix}my-balance`, { params: data });
+// }
+//
+// /**
+//  * 获取代码生成详情
+//  * @param id
+//  */
+// export async function getAdminInfo(id: number) {
+//   return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+// }
+
+/**
+ * 代码生成
+ * @param data
+ */
+export async function generationApi(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}generation`, data);
+}
+
+/**
+ * 下载压缩包信息
+ */
+export async function downloadInfoApi(id: any) {
+  return requestClient.get(`${prefix}download-info`, { params: { id } });
+}
+
+/**
+ * 下载压缩包
+ */
+export async function codeGenerationDownloadApi(id: any) {
+  return requestClient.download(`${prefix}download?id=${id}`);
+}
--- a/apps/web-antd/src/views/code-generation/components/fileds.vue
+++ b/apps/web-antd/src/views/code-generation/components/fileds.vue
@@ -1,64 +1,185 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue';
+
 import { Page } from '@vben/common-ui';

-import { Button, message } from 'ant-design-vue';
+import { Button, Input, Select, Switch, Table } from 'ant-design-vue';

-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-
-import { gridOptions } from '../config/table';
-
-defineOptions({
-  name: 'CodeGenerationFiledTable',
-});
+import filedType from '#/util/json/filedType.json';
+import formType from '#/util/json/formType.json';

 interface RowType {
-  category: string;
-  color: string;
-  id: string;
-  price: string;
-  productName: string;
-  releaseDate: string;
+  name: string;
+  type: string;
+  type_length: string;
+  default: string;
+  comment: string;
+  not_null: boolean;
+  formShow: boolean;
+  tableShow: boolean;
+  formType: string;
+  search: boolean;
+  searchValue: string;
 }
+const createEmptyRow = (): RowType => ({
+  name: '',
+  type: 'string',
+  type_length: '',
+  default: '',
+  comment: '',
+  not_null: true,
+  formShow: true,
+  tableShow: true,
+  formType: 'VbenInput',
+  search: true,
+  searchValue: '=',
+});

-const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });
+const tableData = ref<RowType[]>([createEmptyRow()]);
+// 暴露常量
+defineExpose({
+  tableData,
+});

-function hasEditStatus(row: RowType) {
-  return gridApi.grid?.isEditByRow(row);
-}
+// 添加行
+const addRow = () => tableData.value.push(createEmptyRow());

-function editRowEvent(row: RowType) {
-  gridApi.grid?.setEditRow(row);
-}
-
-async function saveRowEvent(row: RowType) {
-  await gridApi.grid?.clearEdit();
-
-  gridApi.setLoading(true);
-  setTimeout(() => {
-    gridApi.setLoading(false);
-    message.success({
-      content: `保存成功！category=${row.category}`,
-    });
-  }, 600);
-}
-
-const cancelRowEvent = (_row: RowType) => {
-  gridApi.grid?.clearEdit();
+// 删除行
+const deleteRow = (index: number) => {
+  if (tableData.value.length > 1) {
+    tableData.value.splice(index, 1);
+  }
 };
+
+// 表格列配置
+const columns = computed(() => [
+  { title: '字段名', dataIndex: 'name', width: 150 },
+  { title: '类型', dataIndex: 'type', width: 120 },
+  { title: '字段长度', dataIndex: 'type_length', width: 120 },
+  { title: '默认值', dataIndex: 'default', width: 120 },
+  { title: '注释', dataIndex: 'comment', width: 200 },
+  { title: '基础配置', dataIndex: 'base', width: 100 },
+  { title: '搜索配置', dataIndex: 'search', width: 120 },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 100,
+    fixed: 'right',
+  },
+]);
 </script>

 <template>
  <Page auto-content-height>
-    <Grid>
-      <template #action="{ row }">
-        <template v-if="hasEditStatus(row)">
-          <Button type="link" @click="saveRowEvent(row)">保存</Button>
-          <Button type="link" @click="cancelRowEvent(row)">取消</Button>
+    {{ tableData }}
+    <Table
+      :columns="columns"
+      :data-source="tableData"
+      :pagination="false"
+      bordered
+      row-key="index"
+    >
+      <template #bodyCell="{ column, record, index }">
+        <!-- 操作列 -->
+        <template v-if="column.dataIndex === 'action'">
+          <div class="flex gap-2">
+            <Button danger @click="deleteRow(index)">删除</Button>
+            <Button type="primary" @click="addRow"> 添加行 </Button>
+          </div>
        </template>
-        <template v-else>
-          <Button type="link" @click="editRowEvent(row)">编辑</Button>
+
+        <!-- 字段名编辑 -->
+        <template v-if="column.dataIndex === 'name'">
+          <Input v-model:value="record.name" autofocus />
+        </template>
+
+        <!-- 类型选择 -->
+        <template v-if="column.dataIndex === 'type'">
+          <Select
+            v-model:value="record.type"
+            :options="filedType"
+            show-search
+            style="width: 100%"
+            autofocus
+          />
+        </template>
+
+        <!-- 默认值编辑 -->
+        <template v-if="column.dataIndex === 'type_length'">
+          <Input v-model:value="record.type_length" autofocus />
+        </template>
+
+        <!-- 默认值编辑 -->
+        <template v-if="column.dataIndex === 'default'">
+          <Input v-model:value="record.default" autofocus />
+        </template>
+
+        <!-- 注释编辑 -->
+        <template v-if="column.dataIndex === 'comment'">
+          <Input v-model:value="record.comment" autofocus />
+        </template>
+
+        <!-- 基础配置 -->
+        <template v-if="column.dataIndex === 'base'">
+          <!-- 开关控件 -->
+          <div>可以为空： <Switch v-model:checked="record.null" /></div>
+          <div class="mt-2">
+            表单显示： <Switch v-model:checked="record.formShow" />
+          </div>
+          <div class="mt-2">
+            表格显示： <Switch v-model:checked="record.tableShow" />
+          </div>
+          <div class="mt-2">
+            开启查询： <Switch v-model:checked="record.search" />
+          </div>
+        </template>
+        <!-- 搜索配置 -->
+        <template v-if="column.dataIndex === 'search'">
+          <!-- 开关控件 -->
+          <div class="mt-2">
+            表单类型：
+            <Select
+              v-model:value="record.formType"
+              :options="formType"
+              show-search
+              style="width: 100%"
+              :disabled="!record.formShow"
+              autofocus
+            />
+          </div>
+          <div class="mt-2">
+            查询类型：
+            <Select
+              v-model:value="record.searchValue"
+              :options="[
+                {
+                  label: '绝对查询',
+                  value: '=',
+                },
+                {
+                  label: '模糊查询',
+                  value: 'like',
+                },
+              ]"
+              style="width: 100%"
+              :disabled="!record.search"
+              autofocus
+            />
+          </div>
+        </template>
+        <!-- 搜索配置 -->
+        <template v-if="column.dataIndex === 'formType'">
+          <!-- 开关控件 -->
        </template>
      </template>
-    </Grid>
+    </Table>
  </Page>
 </template>
+
+<style scoped>
+.ant-table-cell {
+  min-height: 45px;
+  padding: 8px 16px !important;
+  cursor: pointer;
+}
+</style>
--- a/apps/web-antd/src/views/code-generation/config/form.ts
+++ b/apps/web-antd/src/views/code-generation/config/form.ts
@@ -34,6 +34,17 @@ export const codeGenerationForm: VbenFormProps = {
      rules: 'required',
      formItemClass: 'col-span-6',
    },
+    {
+      component: 'IconPicker',
+      componentProps: {
+        placeholder: '请输入菜单图标',
+      },
+      fieldName: 'icon',
+      label: '菜单图标',
+      defaultValue: '',
+      rules: 'required',
+      formItemClass: 'col-span-6',
+    },
    {
      component: 'InputNumber',
      componentProps: {
--- a/apps/web-antd/src/views/code-generation/config/table.ts
+++ b/apps/web-antd/src/views/code-generation/config/table.ts
@@ -4,21 +4,7 @@ import filedType from '#/util/json/filedType.json';
 import formType from '#/util/json/formType.json';
 import { getAdminList } from '#/views/system/admin/api';

-interface RowType {
-  id: string;
-  nick_name: string;
-  email: string;
-  avatar: string;
-  roles: { name: string }[];
-  open_id: string;
-  code: string;
-  platform_id: string;
-  phone: string;
-  desc: string;
-  created_at: string;
-}
-
-export const gridOptions: VxeGridProps<RowType> = {
+export const gridOptions: VxeGridProps = {
  title: '时间字段由系统生成',
  titleHelpMessage:
    '创建时间：created_at 编辑时间：updated_at 删除时间：deleted_at',
@@ -70,19 +56,6 @@ export const gridOptions: VxeGridProps<RowType> = {
      dataIndex: 'comment',
      editRow: true,
    },
-    // {
-    //   title: '主键',
-    //   tableTitleHelp: '表中该字段是否为主键',
-    //   dataIndex: 'isKey',
-    //   width: 80,
-    //   editRow: true,
-    //   editComponent: 'Switch',
-    //   editComponentProps: {
-    //     checkedChildren: '是',
-    //     unCheckedChildren: '否',
-    //     size: 'default',
-    //   },
-    // },
    {
      title: '非空',
      tableTitleHelp: '表中字段是否为必填',
@@ -203,140 +176,3 @@ export const gridOptions: VxeGridProps<RowType> = {
  },
  showOverflow: false,
 };
-
-// const columns: BasicColumn[] = [
-//   {
-//     title: '字段名称',
-//     tableTitleHelp: '表中字段名称，为英文开头，纯小写 多个单词下划线隔开',
-//     dataIndex: 'name',
-//     editRow: true,
-//   },
-//   {
-//     title: '字段类型',
-//     tableTitleHelp: '表中字段储存类型',
-//     dataIndex: 'type',
-//     editRow: true,
-//     editComponent: 'Select',
-//     editComponentProps: {
-//       options: filedType,
-//       showSearch: true,
-//     },
-//   },
-//   {
-//     title: '字段长度',
-//     tableTitleHelp: '表中字段储存类型长度',
-//     dataIndex: 'type_number',
-//     editRow: true,
-//     width: 100,
-//   },
-//   {
-//     title: '默认值',
-//     tableTitleHelp: '表中字段的默认值',
-//     dataIndex: 'default',
-//     editRow: true,
-//     width: 100,
-//   },
-//   {
-//     title: '备注',
-//     tableTitleHelp: '表中字段备注',
-//     dataIndex: 'comment',
-//     editRow: true,
-//   },
-//   // {
-//   //   title: '主键',
-//   //   tableTitleHelp: '表中该字段是否为主键',
-//   //   dataIndex: 'isKey',
-//   //   width: 80,
-//   //   editRow: true,
-//   //   editComponent: 'Switch',
-//   //   editComponentProps: {
-//   //     checkedChildren: '是',
-//   //     unCheckedChildren: '否',
-//   //     size: 'default',
-//   //   },
-//   // },
-//   {
-//     title: '非空',
-//     tableTitleHelp: '表中字段是否为必填',
-//     dataIndex: 'null',
-//     width: 80,
-//     editRow: true,
-//     editComponent: 'Switch',
-//     editComponentProps: {
-//       checkedChildren: '是',
-//       unCheckedChildren: '否',
-//       size: 'default',
-//     },
-//   },
-//   {
-//     title: '表单',
-//     tableTitleHelp: '是否在表单中展示该字段',
-//     dataIndex: 'formShow',
-//     width: 80,
-//     editRow: true,
-//     editComponent: 'Switch',
-//     editComponentProps: {
-//       checkedChildren: '是',
-//       unCheckedChildren: '否',
-//       size: 'default',
-//     },
-//   },
-//   {
-//     title: '表格',
-//     tableTitleHelp: '是否在表格中展示该字段',
-//     dataIndex: 'tableShow',
-//     width: 80,
-//     editRow: true,
-//     editComponent: 'Switch',
-//     editComponentProps: {
-//       checkedChildren: '是',
-//       unCheckedChildren: '否',
-//       size: 'default',
-//     },
-//   },
-//   {
-//     title: '搜索',
-//     tableTitleHelp: '是否在表格中搜索该字段',
-//     dataIndex: 'search',
-//     width: 80,
-//     editRow: true,
-//     editComponent: 'Switch',
-//     editComponentProps: {
-//       checkedChildren: '是',
-//       unCheckedChildren: '否',
-//       size: 'default',
-//     },
-//   },
-//   {
-//     title: '搜索方式',
-//     tableTitleHelp: '是否在表格中搜索该字段',
-//     dataIndex: 'searchValue',
-//     editRow: true,
-//     editComponent: 'Select',
-//     editComponentProps: {
-//       options: [
-//         {
-//           label: '绝对查询',
-//           value: '=',
-//         },
-//         {
-//           label: '模糊查询',
-//           value: 'like',
-//         },
-//       ],
-//       size: 'default',
-//     },
-//   },
-//   {
-//     title: '表单类型',
-//     tableTitleHelp: '在表单中展示该字段的组件类型 如不在表单中展示则不填',
-//     dataIndex: 'formType',
-//     width: 250,
-//     editRow: true,
-//     editComponent: 'Select',
-//     editComponentProps: {
-//       options: formType,
-//       showSearch: true,
-//     },
-//   },
-// ];
--- a/apps/web-antd/src/views/code-generation/index.vue
+++ b/apps/web-antd/src/views/code-generation/index.vue
@@ -1,36 +1,98 @@
 <script setup lang="ts">
 import { ref } from 'vue';

-import { Page } from '@vben/common-ui';
+import { confirm, Page } from '@vben/common-ui';

-import { Button, Card } from 'ant-design-vue';
+import { Button, Card, Steps } from 'ant-design-vue';

 import { useVbenForm } from '#/adapter/form';
+import {
+  codeGenerationDownloadApi,
+  generationApi,
+} from '#/views/code-generation/api';
 import { codeGenerationForm } from '#/views/code-generation/config/form';

 import CodeGenerationFiledTable from './components/fileds.vue';
+import {downloadByData} from "#/util/tool";

 const [Form, formApi] = useVbenForm(codeGenerationForm);

 const formValue = ref();
+const tableRef = ref();
 const generation = () => {
  formApi.getValues().then((data) => {
    formValue.value = data;
+    formValue.value.field = tableRef.value?.tableData;
+    generationApi(formValue.value).then((res) => {
+      confirm({
+        cancelText: '迟点下载',
+        confirmText: '是的，马上下载',
+        content:
+          '您的模块已经生成成功，是否立即下载？\r\n' +
+          '后端代码已经自动生成：\r\n' +
+          '（Controller、Service、Model、Route、Mysql数据表），无需您操作。\r\n' +
+          '您只需要把代码黏贴至 ”您的根目录/apps/web-antd/src/views/my-gen“文件夹下即可使用',
+        icon: 'success',
+        title: '代码生成成功！',
+      }).then(() => {
+        codeGenerationDownloadApi(res.id).then((blob) => {
+          downloadByData(blob, res.file_name, 'application/zip');
+        });
+        // 列表中下载代码方式
+        // downloadInfoApi(1).then((result) => {
+        //   codeGenerationDownloadApi(1).then((blob) => {
+        //     downloadByData(blob, result.file_name, 'application/zip');
+        //   });
+        // });
+      });
+    });
  });
 };
+
+const stepsCurrent = ref(0);
+const stepsItems = [
+  {
+    title: '基础信息',
+    description: '类和菜单的基础信息',
+  },
+  {
+    title: '字段信息',
+    description: '设计数据库字段信息',
+    subTitle: 'Left 00:00:08',
+  },
+  {
+    title: '代码生成成功',
+    description: '下载压缩包',
+  },
+];
 </script>

 <template>
  <Page title="代码生成器" auto-content-height>
-    <Card title="基础信息">
-      <Form />
+    <Steps :current="stepsCurrent" :items="stepsItems" />
+    <Card class="mt-6" :title="stepsItems[stepsCurrent]?.title">
+      <Form v-show="stepsCurrent === 0" />
+      <CodeGenerationFiledTable ref="tableRef" v-show="stepsCurrent === 1" />
    </Card>
-    <Card title="字段信息">
-      <CodeGenerationFiledTable />
-    </Card>
-    <template #footer>
-      <Button type="primary" @click="generation">生成代码</Button>
-      {{ formValue }}
+    <template #extra>
+      <div class="flex items-center justify-between gap-4">
+        <Button
+          v-if="stepsCurrent >= 0 && stepsCurrent < 1"
+          @click="stepsCurrent++"
+          type="primary"
+        >
+          下一步
+        </Button>
+        <Button v-if="stepsCurrent > 0" @click="stepsCurrent--" type="primary">
+          上一步
+        </Button>
+        <Button v-if="stepsCurrent === 1" type="primary" @click="generation">
+          <i class="fa-solid fa-code mr-2"></i>生成代码
+        </Button>
+        <Button type="primary" @click="generation">
+          <i class="fa-solid fa-code mr-2"></i>生成代码
+        </Button>
+      </div>
    </template>
  </Page>
 </template>