bunny-admin-element-thin-i18n/other-views/tabs/index.vue

118 lines
3.8 KiB
Vue
Raw Normal View History

<script lang="ts" setup>
import { appendFieldByUniqueId, deleteChildren, getNodeByUniqueId } from '@/utils/tree';
import { useDetail } from './hooks';
import { computed, ref } from 'vue';
import { clone } from '@pureadmin/utils';
import { useMultiTagsStoreHook } from '@/store/modules/multiTags';
import { usePermissionStoreHook } from '@/store/modules/permission';
2024-05-11 14:48:02 +08:00
defineOptions({
name: 'Tabs',
2024-05-11 14:48:02 +08:00
});
const { toDetail, router } = useDetail();
const menusTree = clone(usePermissionStoreHook().wholeMenus, true);
const treeData = computed(() => {
return appendFieldByUniqueId(deleteChildren(menusTree), 0, {
disabled: true,
});
2024-05-11 14:48:02 +08:00
});
const currentValues = ref<string[]>([]);
const multiTags = computed(() => {
return useMultiTagsStoreHook()?.multiTags;
2024-05-11 14:48:02 +08:00
});
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,
});
});
2024-05-11 14:48:02 +08:00
}
</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>
2024-05-11 14:48:02 +08:00
<el-divider />
2024-05-11 14:48:02 +08:00
<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>
2024-05-11 14:48:02 +08:00
<el-divider />
<el-tree-select
v-model="currentValues"
:data="treeData"
:props="{
label: data => $t(data.meta.title),
value: 'uniqueId',
children: 'children',
disabled: 'disabled',
}"
class="!w-[300px]"
clearable
default-expand-all
filterable
multiple
node-key="uniqueId"
placeholder="请选择要关闭的标签"
>
<template #default="{ data }">
<span>{{ $t(data.meta.title) }}</span>
</template>
</el-tree-select>
<el-button class="m-2" @click="onCloseTags">关闭标签</el-button>
2024-05-11 14:48:02 +08:00
<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>
2024-05-11 14:48:02 +08:00
<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>
2024-05-11 14:48:02 +08:00
<el-divider />
<el-button @click="router.push({ name: 'Empty' })"> 跳转无Layout的空白页面</el-button>
</el-card>
2024-05-11 14:48:02 +08:00
</template>