perf: 代码生成配置

mock/asyncRoutes.ts

@@ -152,6 +152,17 @@ const permissionRouter = {
         roles: ["admin", "common"]
       }
     },
+    // query 传参模式
+    {
+      path: "/monitor/generator/preview",
+      name: "TabQueryPreview",
+      meta: {
+        // 不在menu菜单中显示
+        showLink: false,
+        activePath: "/monitor/generator/index",
+        roles: ["admin", "common"]
+      }
+    },
     {
       path: "/permission/page/index",
       name: "PermissionPage",

src/views/monitor/empty.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="empty-icon" viewBox="0 0 1024 1024"><path d="M855.6 427.2H168.5c-12.7 0-24.4 6.9-30.6 18L4.4 684.7C1.5 689.9 0 695.8 0 701.8v287.1c0 19.4 15.7 35.1 35.1 35.1H989c19.4 0 35.1-15.7 35.1-35.1V701.8c0-6-1.5-11.8-4.4-17.1L886.2 445.2c-6.2-11.1-17.9-18-30.6-18M673.4 695.6c-16.5 0-30.8 11.5-34.3 27.7-12.7 58.5-64.8 102.3-127.2 102.3s-114.5-43.8-127.2-102.3c-3.5-16.1-17.8-27.7-34.3-27.7H119c-26.4 0-43.3-28-31.1-51.4l81.7-155.8c6.1-11.6 18-18.8 31.1-18.8h622.4c13 0 25 7.2 31.1 18.8l81.7 155.8c12.2 23.4-4.7 51.4-31.1 51.4zm146.5-486.1c-1-1.8-2.1-3.7-3.2-5.5-9.8-16.6-31.1-22.2-47.8-12.6L648.5 261c-17 9.8-22.7 31.6-12.6 48.4.9 1.4 1.7 2.9 2.5 4.4 9.5 17 31.2 22.8 48 13L807 257.3c16.7-9.7 22.4-31 12.9-47.8m-444.5 51.6L255 191.6c-16.7-9.6-38-4-47.8 12.6-1.1 1.8-2.1 3.6-3.2 5.5-9.5 16.8-3.8 38.1 12.9 47.8L337.3 327c16.9 9.7 38.6 4 48-13.1.8-1.5 1.7-2.9 2.5-4.4 10.2-16.8 4.5-38.6-12.4-48.4M512 239.3h2.5c19.5.3 35.5-15.5 35.5-35.1v-139c0-19.3-15.6-34.9-34.8-35.1h-6.4C489.6 30.3 474 46 474 65.2v139c0 19.5 15.9 35.4 35.5 35.1z"/></svg>

src/views/monitor/generator/hook.tsx

@@ -10,7 +10,8 @@ import {
   useRouter,
   useRoute,
   type LocationQueryRaw,
-  type RouteParamsRaw
+  type RouteParamsRaw,
+  type RouteRecordName
 } from "vue-router";
 
 export function useRole() {
@@ -145,6 +146,143 @@ export function useRole() {
     onSearch();
   });
 
+  const dataList1 = ref([]);
+
+  const columns1: TableColumnList = [
+    {
+      type: "index",
+      label: "index",
+      hide: true,
+      prop: "index"
+    },
+    {
+      label: "字段名称",
+      prop: "columnName"
+    },
+    {
+      label: "字段类型",
+      prop: "columnType"
+    },
+    {
+      label: "字段描述",
+      prop: "remark",
+      cellRenderer: ({ row }) => <el-input v-model={row.remark} />
+    },
+    {
+      label: "必填",
+      prop: "notNull",
+      cellRenderer: ({ row }) => <el-checkbox v-model={row.notNull} />
+    },
+    {
+      label: "列表",
+      prop: "listShow",
+      cellRenderer: ({ row }) => <el-checkbox v-model={row.listShow} />
+    },
+    {
+      label: "表单",
+      prop: "formShow",
+      cellRenderer: ({ row }) => <el-checkbox v-model={row.formShow} />
+    },
+    {
+      label: "表单类型",
+      prop: "formType",
+      cellRenderer: ({ row }) => (
+        <el-select
+          v-model={row.formType}
+          filterable
+          clearable
+          size="small"
+          placeholder="请选择"
+        >
+          <el-option label="文本框" value="Input" />
+          <el-option label="文本域" value="Textarea" />
+          <el-option label="单选框" value="Radio" />
+          <el-option label="下拉框" value="Select" />
+          <el-option label="日期框" value="Date" />
+        </el-select>
+      )
+    },
+    {
+      label: "查询方式",
+      prop: "queryType",
+      cellRenderer: ({ row }) => (
+        <el-select
+          v-model={row.queryType}
+          filterable
+          clearable
+          size="small"
+          placeholder="请选择"
+        >
+          <el-option label="=" value="=" />
+          <el-option label="!=" value="!=" />
+          <el-option label=">=" value=">=" />
+          <el-option label="<=" value="<=" />
+          <el-option label="Like" value="Like" />
+          <el-option label="NotNull" value="NotNull" />
+          <el-option label="BetWeen" value="BetWeen" />
+        </el-select>
+      )
+    },
+    {
+      label: "日期注解",
+      prop: "dateAnnotation",
+      cellRenderer: ({ row }) => (
+        <el-select
+          v-model={row.dateAnnotation}
+          filterable
+          clearable
+          size="small"
+          placeholder="请选择"
+        >
+          <el-option label="自动创建时间" value="CreationTimestamp" />
+          <el-option label="自动更新时间" value="UpdateTimestamp" />
+        </el-select>
+      ),
+      minWidth: 110
+    },
+    {
+      label: "关联字典",
+      prop: "dictName",
+      cellRenderer: ({ row }) => (
+        <el-date-picker
+          v-model={row.date}
+          type="date"
+          format="YYYY/MM/DD"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择日期"
+        />
+      ),
+      minWidth: 110
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 90,
+      slot: "operation"
+    }
+  ];
+
+  function onAdd() {
+    dataList1.value.push({
+      id: dataList1.value.length + 1,
+      columnName: "字段名称",
+      columnType: "字段类型",
+      remark: "字段描述",
+      notNull: true,
+      listShow: false,
+      formShow: true,
+      formType: "Textarea",
+      sex: 0,
+      hobby: "",
+      date: ""
+    });
+  }
+
+  function onDel(row) {
+    const index = dataList1.value.indexOf(row);
+    if (index !== -1) dataList1.value.splice(index, 1);
+  }
+
   return {
     form,
     loading,
@@ -152,6 +290,10 @@ export function useRole() {
     dataList,
     pagination,
     changeList,
+    columns1,
+    dataList1,
+    onAdd,
+    onDel,
     onSearch,
     resetForm,
     handleOffline,
@@ -169,8 +311,7 @@ export function useDetail() {
   const getParameter = isEmpty(route.params) ? route.query : route.params;
 
   function toDetail(
-    parameter: LocationQueryRaw | RouteParamsRaw,
+    parameter: RouteRecordName | LocationQueryRaw | RouteParamsRaw | any
-    model: "query" | "params"
   ) {
     // ⚠️ 这里要特别注意下，因为vue-router在解析路由参数的时候会自动转化成字符串类型，比如在使用useRoute().route.query或useRoute().route.params时，得到的参数都是字符串类型
     // 所以在传参的时候，如果参数是数字类型，就需要在此处 toString() 一下，保证传参跟路由参数类型一致都是字符串，这是必不可少的环节！！！
@@ -179,46 +320,29 @@ export function useDetail() {
         parameter[param] = parameter[param].toString();
       }
     });
-    if (model === "query") {
+    // 保存信息到标签页
-      // 保存信息到标签页
+    useMultiTagsStoreHook().handleTags("push", {
-      useMultiTagsStoreHook().handleTags("push", {
+      path: `/monitor/generator/${parameter.path}`,
-        path: `/monitor/generator/query-detail`,
+      name: parameter.name,
-        name: "TabQueryDetail",
+      query: parameter,
-        query: parameter,
+      meta: {
-        meta: {
+        title: {
-          title: {
+          zh: `${parameter.id} - ${parameter.title}`,
-            zh: `${parameter.id} - 预览`,
+          en: `No.${parameter.id} - DetailInfo`
-            en: `No.${parameter.id} - DetailInfo`
+        },
-          },
+        // 如果使用的是非国际化精简版title可以像下面这么写
-          // 如果使用的是非国际化精简版title可以像下面这么写
+        // title: `No.${index} - 详情信息`,
-          // title: `No.${index} - 详情信息`,
+        // 最大打开标签数
-          // 最大打开标签数
+        dynamicLevel: 3
-          dynamicLevel: 3
+      }
-        }
+    });
-      });
+    // 路由跳转
-      // 路由跳转
+    router.push({ name: parameter.name, query: parameter });
-      router.push({ name: "TabQueryDetail", query: parameter });
-    } else if (model === "params") {
-      useMultiTagsStoreHook().handleTags("push", {
-        path: `/monitor/generator/params-detail/:id`,
-        name: "TabParamsDetail",
-        params: parameter,
-        meta: {
-          title: {
-            zh: `No.${parameter.id} - 详情信息`,
-            en: `No.${parameter.id} - DetailInfo`
-          }
-          // 如果使用的是非国际化精简版title可以像下面这么写
-          // title: `No.${index} - 详情信息`,
-        }
-      });
-      router.push({ name: "TabParamsDetail", params: parameter });
-    }
   }
 
   // 用于页面刷新，重新获取浏览器地址栏参数并保存到标签页
-  const initToDetail = (model: "query" | "params") => {
+  const initToDetail = () => {
-    if (getParameter) toDetail(getParameter, model);
+    if (getParameter) toDetail(getParameter);
   };
 
   return { toDetail, initToDetail, getParameter, router };

src/views/monitor/generator/index.vue

@@ -101,7 +101,14 @@ const {
                 link
                 type="primary"
                 :size="size"
-                @click="toDetail({ id: row.tableName }, 'query')"
+                @click="
+                  toDetail({
+                    id: row.tableName,
+                    name: 'TabQueryDetail',
+                    path: 'query-detail',
+                    title: '预览'
+                  })
+                "
               >
                 预览
               </el-button>
@@ -114,7 +121,20 @@ const {
               >
                 下载
               </el-button>
-              <el-button class="reset-margin" link type="primary" :size="size">
+              <el-button
+                class="reset-margin"
+                link
+                type="primary"
+                :size="size"
+                @click="
+                  toDetail({
+                    id: row.tableName,
+                    name: 'TabQueryPreview',
+                    path: 'preview',
+                    title: '配置'
+                  })
+                "
+              >
                 配置
               </el-button>
               <el-button class="reset-margin" link type="primary" :size="size">

src/views/monitor/generator/preview.vue

@@ -1,15 +1,65 @@
 <script setup lang="ts">
+import { useRole, useDetail } from "./hook";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+
+import Empty from "../empty.svg?component";
+import AddFill from "@iconify-icons/ep/plus";
+import Delete from "@iconify-icons/ep/delete";
+
 defineOptions({
-  name: "Editor"
+  name: "TabQueryPreview"
 });
+const { initToDetail, getParameter } = useDetail();
+initToDetail();
+const { columns1, dataList1, onAdd, onDel } = useRole();
 </script>
 
 <template>
-  <el-card shadow="never" />
+  <div class="flex">
+    <!-- <div>{{ getParameter }}</div> -->
+    <el-scrollbar height="540px">
+      <code>
+        <pre class="w-[400px]"> {{ dataList1 }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table
+      row-key="id"
+      align-whole="center"
+      :header-cell-style="{
+        background: 'var(--el-fill-color-light)',
+        color: 'var(--el-text-color-primary)'
+      }"
+      :data="dataList1"
+      :columns="columns1"
+    >
+      <template #empty>
+        <Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
+      </template>
+      <template #append>
+        <el-button
+          plain
+          class="w-full my-2"
+          :icon="useRenderIcon(AddFill)"
+          @click="onAdd"
+        >
+          添加一行数据
+        </el-button>
+      </template>
+      <template #operation="{ row }">
+        <el-button
+          class="reset-margin"
+          link
+          type="primary"
+          :icon="useRenderIcon(Delete)"
+          @click="onDel(row)"
+        />
+      </template>
+    </pure-table>
+  </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
-:deep(.el-collapse-item__header) {
+:deep(.el-table__inner-wrapper::before) {
-  padding-left: 10px;
+  height: 0;
 }
 </style>

src/views/monitor/generator/query-detail.vue

@@ -9,7 +9,7 @@ defineOptions({
 });
 
 const { initToDetail, getParameter } = useDetail();
-initToDetail("query");
+initToDetail();
 const datas = ref([]);
 const content = ref("");
 const type = ref("java");