提交 0e414ba3 作者: 无木

feat(demo): add route multi tabs show

添加同一路由演示多个不同参数的tab

close: #817
上级 61d4efd5
...@@ -163,7 +163,7 @@ export default { ...@@ -163,7 +163,7 @@ export default {
moduleName: 'System management', moduleName: 'System management',
account: 'Account management', account: 'Account management',
account_detail: 'Account detail',
password: 'Change password', password: 'Change password',
dept: 'Department management', dept: 'Department management',
......
...@@ -157,6 +157,7 @@ export default { ...@@ -157,6 +157,7 @@ export default {
system: { system: {
moduleName: '系统管理', moduleName: '系统管理',
account: '账号管理', account: '账号管理',
account_detail: '账号详情',
password: '修改密码', password: '修改密码',
dept: '部门管理', dept: '部门管理',
menu: '菜单管理', menu: '菜单管理',
......
...@@ -18,11 +18,22 @@ const system: AppRouteModule = { ...@@ -18,11 +18,22 @@ const system: AppRouteModule = {
name: 'AccountManagement', name: 'AccountManagement',
meta: { meta: {
title: t('routes.demo.system.account'), title: t('routes.demo.system.account'),
ignoreKeepAlive: true, ignoreKeepAlive: false,
}, },
component: () => import('/@/views/demo/system/account/index.vue'), component: () => import('/@/views/demo/system/account/index.vue'),
}, },
{ {
path: 'account_detail/:id',
name: 'AccountDetail',
meta: {
title: t('routes.demo.system.account_detail'),
ignoreKeepAlive: true,
showMenu: false,
currentActiveMenu: '/system/account',
},
component: () => import('/@/views/demo/system/account/AccountDetail.vue'),
},
{
path: 'role', path: 'role',
name: 'RoleManagement', name: 'RoleManagement',
meta: { meta: {
......
<template>
<PageWrapper
:title="`用户` + userId + `的资料`"
content="这是用户资料详情页面。本页面仅用于演示相同路由在tab中打开多个页面并且显示不同的数据"
contentBackground
@back="goBack"
>
<template #extra>
<a-button type="danger"> 禁用账号 </a-button>
<a-button type="primary"> 修改密码 </a-button>
</template>
<template #footer>
<a-tabs default-active-key="detail" v-model:activeKey="currentKey">
<a-tab-pane key="detail" tab="用户资料" />
<a-tab-pane key="logs" tab="操作日志" />
</a-tabs>
</template>
<div class="pt-4 m-4 desc-wrap">
<template v-if="currentKey == 'detail'">
<div v-for="i in 10" :key="i">这是用户{{ userId }}资料Tab</div>
</template>
<template v-if="currentKey == 'logs'">
<div v-for="i in 10" :key="i">这是用户{{ userId }}操作日志Tab</div>
</template>
</div>
</PageWrapper>
</template>
<script>
import { defineComponent, ref } from 'vue';
import { useRoute } from 'vue-router';
import { PageWrapper } from '/@/components/Page';
import { useGo } from '/@/hooks/web/usePage';
import { useTabs } from '/@/hooks/web/useTabs';
import { Tabs } from 'ant-design-vue';
export default defineComponent({
name: 'AccountDetail',
components: { PageWrapper, ATabs: Tabs, ATabPane: Tabs.TabPane },
setup() {
const route = useRoute();
const go = useGo();
// 此处可以得到用户ID
const userId = ref(route.params?.id);
const currentKey = ref('detail');
const { setTitle } = useTabs();
// TODO
// 本页代码仅作演示,实际应当通过userId从接口获得用户的相关资料
// 设置Tab的标题(不会影响页面标题)
setTitle('详情:用户' + userId.value);
// 页面左侧点击返回链接时的操作
function goBack() {
// 本例的效果时点击返回始终跳转到账号列表页,实际应用时可返回上一页
go('/system/account');
}
return { userId, currentKey, goBack };
},
});
</script>
<style></style>
...@@ -9,12 +9,19 @@ ...@@ -9,12 +9,19 @@
<TableAction <TableAction
:actions="[ :actions="[
{ {
icon: 'clarity:eye-show-solid',
title: '查看用户详情',
onClick: handleView.bind(null, record),
},
{
icon: 'clarity:note-edit-line', icon: 'clarity:note-edit-line',
title: '编辑用户资料',
onClick: handleEdit.bind(null, record), onClick: handleEdit.bind(null, record),
}, },
{ {
icon: 'ant-design:delete-outlined', icon: 'ant-design:delete-outlined',
color: 'error', color: 'error',
title: '删除此账号',
popConfirm: { popConfirm: {
title: '是否确认删除', title: '是否确认删除',
confirm: handleDelete.bind(null, record), confirm: handleDelete.bind(null, record),
...@@ -39,11 +46,13 @@ ...@@ -39,11 +46,13 @@
import AccountModal from './AccountModal.vue'; import AccountModal from './AccountModal.vue';
import { columns, searchFormSchema } from './account.data'; import { columns, searchFormSchema } from './account.data';
import { useGo } from '/@/hooks/web/usePage';
export default defineComponent({ export default defineComponent({
name: 'AccountManagement', name: 'AccountManagement',
components: { BasicTable, PageWrapper, DeptTree, AccountModal, TableAction }, components: { BasicTable, PageWrapper, DeptTree, AccountModal, TableAction },
setup() { setup() {
const go = useGo();
const [registerModal, { openModal }] = useModal(); const [registerModal, { openModal }] = useModal();
const [registerTable, { reload, updateTableDataRecord }] = useTable({ const [registerTable, { reload, updateTableDataRecord }] = useTable({
title: '账号列表', title: '账号列表',
...@@ -58,7 +67,7 @@ ...@@ -58,7 +67,7 @@
showTableSetting: true, showTableSetting: true,
bordered: true, bordered: true,
actionColumn: { actionColumn: {
width: 80, width: 120,
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
slots: { customRender: 'action' }, slots: { customRender: 'action' },
...@@ -98,6 +107,10 @@ ...@@ -98,6 +107,10 @@
reload({ searchInfo: { deptId } }); reload({ searchInfo: { deptId } });
} }
function handleView(record: Recordable) {
go('/system/account_detail/' + record.id);
}
return { return {
registerTable, registerTable,
registerModal, registerModal,
...@@ -106,6 +119,7 @@ ...@@ -106,6 +119,7 @@
handleDelete, handleDelete,
handleSuccess, handleSuccess,
handleSelect, handleSelect,
handleView,
}; };
}, },
}); });
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论