From 6215639e6762d4f5a641500d95a2c32266223933 Mon Sep 17 00:00:00 2001 From: pan <13329870472@163.com> Date: Fri, 22 Mar 2024 17:55:49 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/asyncRoutes.ts | 11 + src/views/monitor/empty.svg | 1 + src/views/monitor/generator/hook.tsx | 204 +++++++++++++++---- src/views/monitor/generator/index.vue | 24 ++- src/views/monitor/generator/preview.vue | 60 +++++- src/views/monitor/generator/query-detail.vue | 2 +- 6 files changed, 254 insertions(+), 48 deletions(-) create mode 100644 src/views/monitor/empty.svg diff --git a/mock/asyncRoutes.ts b/mock/asyncRoutes.ts index c804fc8..b5f0c84 100644 --- a/mock/asyncRoutes.ts +++ b/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", diff --git a/src/views/monitor/empty.svg b/src/views/monitor/empty.svg new file mode 100644 index 0000000..5c8b211 --- /dev/null +++ b/src/views/monitor/empty.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/monitor/generator/hook.tsx b/src/views/monitor/generator/hook.tsx index 69da4e4..866783c 100644 --- a/src/views/monitor/generator/hook.tsx +++ b/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 }) => + }, + { + label: "必填", + prop: "notNull", + cellRenderer: ({ row }) => + }, + { + label: "列表", + prop: "listShow", + cellRenderer: ({ row }) => + }, + { + label: "表单", + prop: "formShow", + cellRenderer: ({ row }) => + }, + { + label: "表单类型", + prop: "formType", + cellRenderer: ({ row }) => ( + + + + + + + + ) + }, + { + label: "查询方式", + prop: "queryType", + cellRenderer: ({ row }) => ( + + + + + + + + + + ) + }, + { + label: "日期注解", + prop: "dateAnnotation", + cellRenderer: ({ row }) => ( + + + + + ), + minWidth: 110 + }, + { + label: "关联字典", + prop: "dictName", + cellRenderer: ({ row }) => ( + + ), + 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, - model: "query" | "params" + parameter: RouteRecordName | LocationQueryRaw | RouteParamsRaw | any ) { // ⚠️ 这里要特别注意下，因为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", { - path: `/monitor/generator/query-detail`, - name: "TabQueryDetail", - query: parameter, - meta: { - title: { - zh: `${parameter.id} - 预览`, - en: `No.${parameter.id} - DetailInfo` - }, - // 如果使用的是非国际化精简版title可以像下面这么写 - // title: `No.${index} - 详情信息`, - // 最大打开标签数 - dynamicLevel: 3 - } - }); - // 路由跳转 - 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 }); - } + // 保存信息到标签页 + useMultiTagsStoreHook().handleTags("push", { + path: `/monitor/generator/${parameter.path}`, + name: parameter.name, + query: parameter, + meta: { + title: { + zh: `${parameter.id} - ${parameter.title}`, + en: `No.${parameter.id} - DetailInfo` + }, + // 如果使用的是非国际化精简版title可以像下面这么写 + // title: `No.${index} - 详情信息`, + // 最大打开标签数 + dynamicLevel: 3 + } + }); + // 路由跳转 + router.push({ name: parameter.name, query: parameter }); } // 用于页面刷新，重新获取浏览器地址栏参数并保存到标签页 - const initToDetail = (model: "query" | "params") => { - if (getParameter) toDetail(getParameter, model); + const initToDetail = () => { + if (getParameter) toDetail(getParameter); }; return { toDetail, initToDetail, getParameter, router }; diff --git a/src/views/monitor/generator/index.vue b/src/views/monitor/generator/index.vue index bdb9ff7..a09307e 100644 --- a/src/views/monitor/generator/index.vue +++ b/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: '预览' + }) + " > 预览 @@ -114,7 +121,20 @@ const { > 下载 - + 配置 diff --git a/src/views/monitor/generator/preview.vue b/src/views/monitor/generator/preview.vue index 27bae5c..ade1948 100644 --- a/src/views/monitor/generator/preview.vue +++ b/src/views/monitor/generator/preview.vue @@ -1,15 +1,65 @@ - diff --git a/src/views/monitor/generator/query-detail.vue b/src/views/monitor/generator/query-detail.vue index d78fd0d..7addf62 100644 --- a/src/views/monitor/generator/query-detail.vue +++ b/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");