feat:新增pure-admin前端
This commit is contained in:
chenchun
69
Yi.Pure.Vue3/src/views/tabs/hooks.ts
Normal file
69
Yi.Pure.Vue3/src/views/tabs/hooks.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import { isString, isEmpty } from "@pureadmin/utils";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import {
|
||||
useRouter,
|
||||
useRoute,
|
||||
type LocationQueryRaw,
|
||||
type RouteParamsRaw
|
||||
} from "vue-router";
|
||||
|
||||
export function useDetail() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const getParameter = isEmpty(route.params) ? route.query : route.params;
|
||||
|
||||
function toDetail(
|
||||
parameter: LocationQueryRaw | RouteParamsRaw,
|
||||
model: "query" | "params"
|
||||
) {
|
||||
// ⚠️ 这里要特别注意下，因为vue-router在解析路由参数的时候会自动转化成字符串类型，比如在使用useRoute().route.query或useRoute().route.params时，得到的参数都是字符串类型
|
||||
// 所以在传参的时候，如果参数是数字类型，就需要在此处 toString() 一下，保证传参跟路由参数类型一致都是字符串，这是必不可少的环节！！！
|
||||
Object.keys(parameter).forEach(param => {
|
||||
if (!isString(parameter[param])) {
|
||||
parameter[param] = parameter[param].toString();
|
||||
}
|
||||
});
|
||||
if (model === "query") {
|
||||
// 保存信息到标签页
|
||||
useMultiTagsStoreHook().handleTags("push", {
|
||||
path: `/tabs/query-detail`,
|
||||
name: "TabQueryDetail",
|
||||
query: parameter,
|
||||
meta: {
|
||||
title: {
|
||||
zh: `No.${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: `/tabs/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") => {
|
||||
if (getParameter) toDetail(getParameter, model);
|
||||
};
|
||||
|
||||
return { toDetail, initToDetail, getParameter, router };
|
||||
}
|
||||
164
Yi.Pure.Vue3/src/views/tabs/index.vue
Normal file
164
Yi.Pure.Vue3/src/views/tabs/index.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
deleteChildren,
|
||||
getNodeByUniqueId,
|
||||
appendFieldByUniqueId
|
||||
} from "@/utils/tree";
|
||||
import { useDetail } from "./hooks";
|
||||
import { ref, computed } from "vue";
|
||||
import { clone } from "@pureadmin/utils";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||
|
||||
defineOptions({
|
||||
name: "Tabs"
|
||||
});
|
||||
|
||||
const { toDetail, router } = useDetail();
|
||||
const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
|
||||
|
||||
const treeData = computed(() => {
|
||||
return appendFieldByUniqueId(deleteChildren(menusTree), 0, {
|
||||
disabled: true
|
||||
});
|
||||
});
|
||||
|
||||
const currentValues = ref<string[]>([]);
|
||||
|
||||
const multiTags = computed(() => {
|
||||
return useMultiTagsStoreHook()?.multiTags;
|
||||
});
|
||||
|
||||
function onCloseTags() {
|
||||
if (currentValues.value.length === 0) return;
|
||||
currentValues.value.forEach(uniqueId => {
|
||||
const currentPath =
|
||||
getNodeByUniqueId(treeData.value, uniqueId).redirect ??
|
||||
getNodeByUniqueId(treeData.value, uniqueId).path;
|
||||
useMultiTagsStoreHook().handleTags("splice", currentPath);
|
||||
if (currentPath === "/tabs/index")
|
||||
router.push({
|
||||
path: multiTags.value[(multiTags as any).value.length - 1].path
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="font-medium">标签页复用，超出限制自动关闭</div>
|
||||
<el-link
|
||||
class="mt-2"
|
||||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/tabs"
|
||||
target="_blank"
|
||||
>
|
||||
代码位置 src/views/tabs
|
||||
</el-link>
|
||||
</template>
|
||||
<div class="flex flex-wrap items-center">
|
||||
<p>query传参模式：</p>
|
||||
<el-button
|
||||
v-for="index in 6"
|
||||
:key="index"
|
||||
class="m-2"
|
||||
@click="toDetail({ id: index }, 'query')"
|
||||
>
|
||||
打开{{ index }}详情页
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
toDetail({ id: 666, name: '小明', age: 18, job: '工程师' }, 'query')
|
||||
"
|
||||
>
|
||||
多个参数
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div class="flex flex-wrap items-center">
|
||||
<p>params传参模式：</p>
|
||||
<el-button
|
||||
v-for="index in 6"
|
||||
:key="index"
|
||||
class="m-2"
|
||||
@click="toDetail({ id: index }, 'params')"
|
||||
>
|
||||
打开{{ index }}详情页
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
<el-tree-select
|
||||
v-model="currentValues"
|
||||
class="!w-[300px]"
|
||||
node-key="uniqueId"
|
||||
placeholder="请选择要关闭的标签"
|
||||
clearable
|
||||
multiple
|
||||
filterable
|
||||
default-expand-all
|
||||
:props="{
|
||||
label: data => transformI18n(data.meta.title),
|
||||
value: 'uniqueId',
|
||||
children: 'children',
|
||||
disabled: 'disabled'
|
||||
}"
|
||||
:data="treeData"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
<span>{{ transformI18n(data.meta.title) }}</span>
|
||||
</template>
|
||||
</el-tree-select>
|
||||
<el-button class="m-2" @click="onCloseTags">关闭标签</el-button>
|
||||
|
||||
<el-divider />
|
||||
<el-button @click="router.push({ name: 'Menu1-2-2' })">
|
||||
跳转页内菜单（传name对象，优先推荐）
|
||||
</el-button>
|
||||
<el-button @click="router.push('/nested/menu1/menu1-2/menu1-2-2')">
|
||||
跳转页内菜单（直接传要跳转的路径）
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="router.push({ path: '/nested/menu1/menu1-2/menu1-2-2' })"
|
||||
>
|
||||
跳转页内菜单（传path对象）
|
||||
</el-button>
|
||||
|
||||
<el-divider />
|
||||
<el-button
|
||||
@click="
|
||||
router.push({
|
||||
name: 'Menu1-2-2',
|
||||
query: { text: '传name对象，优先推荐' }
|
||||
})
|
||||
"
|
||||
>
|
||||
携参跳转页内菜单（传name对象，优先推荐）
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="
|
||||
router.push({
|
||||
path: '/nested/menu1/menu1-2/menu1-2-2',
|
||||
query: { text: '传path对象' }
|
||||
})
|
||||
"
|
||||
>
|
||||
携参跳转页内菜单（传path对象）
|
||||
</el-button>
|
||||
<el-link
|
||||
class="ml-4"
|
||||
href="https://router.vuejs.org/zh/guide/essentials/navigation.html#%E5%AF%BC%E8%88%AA%E5%88%B0%E4%B8%8D%E5%90%8C%E7%9A%84%E4%BD%8D%E7%BD%AE"
|
||||
target="_blank"
|
||||
>
|
||||
点击查看更多跳转方式
|
||||
</el-link>
|
||||
|
||||
<el-divider />
|
||||
<el-button @click="router.push({ name: 'Empty' })">
|
||||
跳转无Layout的空白页面
|
||||
</el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
17
Yi.Pure.Vue3/src/views/tabs/params-detail.vue
Normal file
17
Yi.Pure.Vue3/src/views/tabs/params-detail.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { useDetail } from "./hooks";
|
||||
|
||||
defineOptions({
|
||||
name: "TabParamsDetail"
|
||||
});
|
||||
|
||||
const { initToDetail, getParameter } = useDetail();
|
||||
initToDetail("params");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
{{ getParameter.id }} - 详情页内容在此（params传参）
|
||||
<p>当前页面参数为：{{ getParameter }}</p>
|
||||
</div>
|
||||
</template>
|
||||
17
Yi.Pure.Vue3/src/views/tabs/query-detail.vue
Normal file
17
Yi.Pure.Vue3/src/views/tabs/query-detail.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { useDetail } from "./hooks";
|
||||
|
||||
defineOptions({
|
||||
name: "TabQueryDetail"
|
||||
});
|
||||
|
||||
const { initToDetail, getParameter } = useDetail();
|
||||
initToDetail("query");
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
{{ getParameter.id }} - 详情页内容在此（query传参）
|
||||
<p>当前页面参数为：{{ getParameter }}</p>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user