Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Dr.Disrespect
vue-vben-admin
提交
0e414ba3
V
vue-vben-admin
项目概览
Dr.Disrespect
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0e414ba3
编写于
6月 26, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(demo): add route multi tabs show
添加同一路由演示多个不同参数的tab close: #817
上级
61d4efd5
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
91 addition
and
3 deletion
+91
-3
src/locales/lang/en/routes/demo.ts
src/locales/lang/en/routes/demo.ts
+1
-1
src/locales/lang/zh_CN/routes/demo.ts
src/locales/lang/zh_CN/routes/demo.ts
+1
-0
src/router/routes/modules/demo/system.ts
src/router/routes/modules/demo/system.ts
+12
-1
src/views/demo/system/account/AccountDetail.vue
src/views/demo/system/account/AccountDetail.vue
+62
-0
src/views/demo/system/account/index.vue
src/views/demo/system/account/index.vue
+15
-1
未找到文件。
src/locales/lang/en/routes/demo.ts
浏览文件 @
0e414ba3
...
...
@@ -163,7 +163,7 @@ export default {
moduleName
:
'
System management
'
,
account
:
'
Account management
'
,
account_detail
:
'
Account detail
'
,
password
:
'
Change password
'
,
dept
:
'
Department management
'
,
...
...
src/locales/lang/zh_CN/routes/demo.ts
浏览文件 @
0e414ba3
...
...
@@ -157,6 +157,7 @@ export default {
system
:
{
moduleName
:
'
系统管理
'
,
account
:
'
账号管理
'
,
account_detail
:
'
账号详情
'
,
password
:
'
修改密码
'
,
dept
:
'
部门管理
'
,
menu
:
'
菜单管理
'
,
...
...
src/router/routes/modules/demo/system.ts
浏览文件 @
0e414ba3
...
...
@@ -18,10 +18,21 @@ const system: AppRouteModule = {
name
:
'
AccountManagement
'
,
meta
:
{
title
:
t
(
'
routes.demo.system.account
'
),
ignoreKeepAlive
:
tru
e
,
ignoreKeepAlive
:
fals
e
,
},
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
'
,
name
:
'
RoleManagement
'
,
...
...
src/views/demo/system/account/AccountDetail.vue
0 → 100644
浏览文件 @
0e414ba3
<
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
>
src/views/demo/system/account/index.vue
浏览文件 @
0e414ba3
...
...
@@ -8,13 +8,20 @@
<
template
#action=
"{ record }"
>
<TableAction
:actions=
"[
{
icon: 'clarity:eye-show-solid',
title: '查看用户详情',
onClick: handleView.bind(null, record),
},
{
icon: 'clarity:note-edit-line',
title: '编辑用户资料',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
title: '删除此账号',
popConfirm: {
title: '是否确认删除',
confirm: handleDelete.bind(null, record),
...
...
@@ -39,11 +46,13 @@
import
AccountModal
from
'
./AccountModal.vue
'
;
import
{
columns
,
searchFormSchema
}
from
'
./account.data
'
;
import
{
useGo
}
from
'
/@/hooks/web/usePage
'
;
export
default
defineComponent
({
name
:
'
AccountManagement
'
,
components
:
{
BasicTable
,
PageWrapper
,
DeptTree
,
AccountModal
,
TableAction
},
setup
()
{
const
go
=
useGo
();
const
[
registerModal
,
{
openModal
}]
=
useModal
();
const
[
registerTable
,
{
reload
,
updateTableDataRecord
}]
=
useTable
({
title
:
'
账号列表
'
,
...
...
@@ -58,7 +67,7 @@
showTableSetting
:
true
,
bordered
:
true
,
actionColumn
:
{
width
:
8
0
,
width
:
12
0
,
title
:
'
操作
'
,
dataIndex
:
'
action
'
,
slots
:
{
customRender
:
'
action
'
},
...
...
@@ -98,6 +107,10 @@
reload
({
searchInfo
:
{
deptId
}
});
}
function
handleView
(
record
:
Recordable
)
{
go
(
'
/system/account_detail/
'
+
record
.
id
);
}
return
{
registerTable
,
registerModal
,
...
...
@@ -106,6 +119,7 @@
handleDelete
,
handleSuccess
,
handleSelect
,
handleView
,
};
},
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录