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 @@
-
+
+
+
+
+ {{ dataList1 }}
+
+
+
+
+
+
+
+
+ 添加一行数据
+
+
+
+
+
+
+