Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
21e0548e
提交
21e0548e
authored
11月 12, 2020
作者:
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: add result page demo
上级
746d4a74
隐藏空白字符变更
内嵌
并排
正在显示
7 个修改的文件
包含
270 行增加
和
89 行删除
+270
-89
comp.ts
src/router/menus/modules/demo/comp.ts
+10
-0
feat.ts
src/router/menus/modules/demo/feat.ts
+2
-2
page.ts
src/router/menus/modules/demo/page.ts
+45
-23
permission.ts
src/router/menus/modules/demo/permission.ts
+1
-1
page.ts
src/router/routes/modules/demo/page.ts
+101
-63
index.vue
src/views/demo/page/result/fail/index.vue
+55
-0
index.vue
src/views/demo/page/result/success/index.vue
+56
-0
没有找到文件。
src/router/menus/modules/demo/comp.ts
浏览文件 @
21e0548e
...
...
@@ -88,6 +88,16 @@ const menu: MenuModule = {
},
],
},
{
path
:
'/form'
,
name
:
'验证组件'
,
children
:
[
{
path
:
'/base'
,
name
:
'拖拽校验'
,
},
],
},
],
},
};
...
...
src/router/menus/modules/demo/feat.ts
浏览文件 @
21e0548e
import
type
{
MenuModule
}
from
'/@/router/types.d'
;
const
menu
:
MenuModule
=
{
orderNo
:
1
0
,
orderNo
:
1
9
,
menu
:
{
name
:
'
页面
功能'
,
name
:
'功能'
,
path
:
'/feat'
,
children
:
[
{
...
...
src/router/menus/modules/demo/
exception
.ts
→
src/router/menus/modules/demo/
page
.ts
浏览文件 @
21e0548e
import
type
{
MenuModule
}
from
'/@/router/types.d'
;
const
menu
:
MenuModule
=
{
orderNo
:
50
0
,
orderNo
:
2
0
,
menu
:
{
name
:
'异常页'
,
path
:
'/exception'
,
name
:
'页面'
,
path
:
'/page-demo'
,
tag
:
{
dot
:
true
,
},
children
:
[
{
path
:
'403'
,
name
:
'403'
,
path
:
'result'
,
name
:
'结果页'
,
tag
:
{
content
:
'new'
,
},
children
:
[
{
path
:
'success'
,
name
:
'成功页'
,
},
{
path
:
'fail'
,
name
:
'失败页'
,
},
],
},
{
path
:
'404'
,
name
:
'404'
,
},
{
path
:
'500'
,
name
:
'500'
,
},
{
path
:
'net-work-error'
,
name
:
'网络错误'
,
},
{
path
:
'page-time-out'
,
name
:
'页面超时'
,
},
{
path
:
'not-data'
,
name
:
'无数据'
,
path
:
'exception'
,
name
:
'异常页'
,
children
:
[
{
path
:
'403'
,
name
:
'403'
,
},
{
path
:
'404'
,
name
:
'404'
,
},
{
path
:
'500'
,
name
:
'500'
,
},
{
path
:
'net-work-error'
,
name
:
'网络错误'
,
},
{
path
:
'not-data'
,
name
:
'无数据'
,
},
],
},
],
},
...
...
src/router/menus/modules/demo/permission.ts
浏览文件 @
21e0548e
import
type
{
MenuModule
}
from
'/@/router/types.d'
;
const
menu
:
MenuModule
=
{
orderNo
:
20
,
orderNo
:
15
,
menu
:
{
name
:
'权限管理'
,
path
:
'/permission'
,
...
...
src/router/routes/modules/demo/
exception
.ts
→
src/router/routes/modules/demo/
page
.ts
浏览文件 @
21e0548e
...
...
@@ -6,77 +6,115 @@ import { ExceptionEnum } from '/@/enums/exceptionEnum';
const
ExceptionPage
=
()
=>
import
(
'/@/views/sys/exception/Exception'
);
export
default
{
layout
:
{
path
:
'/exception'
,
name
:
'ExceptionPage'
,
component
:
PAGE_LAYOUT_COMPONENT
,
redirect
:
'/exception/404'
,
meta
:
{
icon
:
'ant-design:exception-outlined'
,
title
:
'异常页'
,
},
path
:
'/page-demo'
,
name
:
'PageDemo'
,
component
:
PAGE_LAYOUT_COMPONENT
,
redirect
:
'/page-demo/exception'
,
meta
:
{
icon
:
'mdi:page-next-outline'
,
title
:
'页面'
,
},
routes
:
[
{
path
:
'/403'
,
name
:
'PageNotAccess'
,
component
:
ExceptionPage
,
props
:
{
status
:
ExceptionEnum
.
PAGE_NOT_ACCESS
,
},
meta
:
{
title
:
'403'
,
afterCloseLoading
:
true
,
},
},
{
path
:
'/404'
,
name
:
'PageNotFound'
,
component
:
ExceptionPage
,
props
:
{
status
:
ExceptionEnum
.
PAGE_NOT_FOUND
,
},
meta
:
{
title
:
'404'
,
afterCloseLoading
:
true
,
},
},
{
path
:
'/500'
,
name
:
'ServiceError'
,
component
:
ExceptionPage
,
props
:
{
status
:
ExceptionEnum
.
ERROR
,
},
meta
:
{
title
:
'500'
,
afterCloseLoading
:
true
,
},
},
children
:
[
// =============================result start=============================
{
path
:
'/net-work-error'
,
name
:
'NetWorkError'
,
component
:
ExceptionPage
,
props
:
{
status
:
ExceptionEnum
.
NET_WORK_ERROR
,
},
path
:
'/result'
,
name
:
'ResultPage'
,
redirect
:
'/page-demo/result/success'
,
meta
:
{
title
:
'网络错误'
,
afterCloseLoading
:
true
,
title
:
'结果页'
,
},
children
:
[
{
path
:
'success'
,
name
:
'ResultSuccessPage'
,
component
:
()
=>
import
(
'/@/views/demo/page/result/success/index.vue'
),
meta
:
{
title
:
'成功页'
,
},
},
{
path
:
'fail'
,
name
:
'ResultFailPage'
,
component
:
()
=>
import
(
'/@/views/demo/page/result/fail/index.vue'
),
meta
:
{
title
:
'失败页'
,
},
},
],
},
// =============================result end=============================
// =============================exception start=============================
{
path
:
'/not-data'
,
name
:
'NotData'
,
component
:
ExceptionPage
,
props
:
{
status
:
ExceptionEnum
.
PAGE_NOT_DATA
,
},
path
:
'/exception'
,
name
:
'ExceptionPage'
,
redirect
:
'/page-demo/exception/404'
,
meta
:
{
title
:
'无数据'
,
afterCloseLoading
:
true
,
title
:
'异常页'
,
},
children
:
[
{
path
:
'403'
,
name
:
'PageNotAccess'
,
component
:
ExceptionPage
,
props
:
{
status
:
ExceptionEnum
.
PAGE_NOT_ACCESS
,
},
meta
:
{
title
:
'403'
,
afterCloseLoading
:
true
,
},
},
{
path
:
'404'
,
name
:
'PageNotFound'
,
component
:
ExceptionPage
,
props
:
{
status
:
ExceptionEnum
.
PAGE_NOT_FOUND
,
},
meta
:
{
title
:
'404'
,
afterCloseLoading
:
true
,
},
},
{
path
:
'500'
,
name
:
'ServiceError'
,
component
:
ExceptionPage
,
props
:
{
status
:
ExceptionEnum
.
ERROR
,
},
meta
:
{
title
:
'500'
,
afterCloseLoading
:
true
,
},
},
{
path
:
'net-work-error'
,
name
:
'NetWorkError'
,
component
:
ExceptionPage
,
props
:
{
status
:
ExceptionEnum
.
NET_WORK_ERROR
,
},
meta
:
{
title
:
'网络错误'
,
afterCloseLoading
:
true
,
},
},
{
path
:
'not-data'
,
name
:
'NotData'
,
component
:
ExceptionPage
,
props
:
{
status
:
ExceptionEnum
.
PAGE_NOT_DATA
,
},
meta
:
{
title
:
'无数据'
,
afterCloseLoading
:
true
,
},
},
],
},
// =============================exception end=============================
],
}
as
AppRouteModule
;
src/views/demo/page/result/fail/index.vue
0 → 100644
浏览文件 @
21e0548e
<
template
>
<div
class=
"m-5 result-error"
>
<Result
status=
"error"
title=
"提交失败"
sub-title=
"请核对并修改以下信息后,再重新提交。"
>
<template
#
extra
>
<a-button
key=
"console"
type=
"primary"
>
返回修改
</a-button>
</
template
>
</Result>
<div
class=
"result-error__content"
>
<div
class=
"result-error__content-title"
>
您提交的内容有如下错误:
</div>
<div
class=
"mb-4"
>
<CloseCircleOutlined
class=
"mr-2 result-error__content-icon"
/>
您的账户已被冻结
<a
class=
"ml-4"
>
立即解冻 >
</a>
</div>
<div
class=
"mb-4"
>
<CloseCircleOutlined
class=
"mr-2 result-error__content-icon"
/>
您的账户还不具备申请资格
<a
class=
"ml-4"
>
立即解冻 >
</a>
</div>
</div>
</div>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'vue'
;
import
{
Result
}
from
'ant-design-vue'
;
import
{
CloseCircleOutlined
}
from
'@ant-design/icons-vue'
;
export
default
defineComponent
({
components
:
{
Result
,
CloseCircleOutlined
,
},
});
</
script
>
<
style
lang=
"less"
scoped
>
.result-error
{
padding
:
48px
32px
;
background
:
#fff
;
&__content
{
padding
:
24px
40px
;
background
:
#fafafa
;
&-title
{
margin-bottom
:
16px
;
font-size
:
16px
;
font-weight
:
500
;
color
:
rgba
(
0
,
0
,
0
,
0.85
);
}
&
-icon
{
color
:
#ff4d4f
;
}
}
}
</
style
>
src/views/demo/page/result/success/index.vue
0 → 100644
浏览文件 @
21e0548e
<
template
>
<div
class=
"m-5 result-success"
>
<Result
status=
"success"
title=
"提交成功"
sub-title=
"提交结果页用于反馈一系列操作任务的处理结果, 如果仅是简单操作,使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明,如果有类似展示 “单据”的需求,下面这个灰色区域可以呈现比较复杂的内容。"
>
<template
#
extra
>
<a-button
key=
"console"
type=
"primary"
>
返回列表
</a-button>
<a-button
key=
"buy"
>
查看项目
</a-button>
<a-button
key=
"buy"
>
打印
</a-button>
</
template
>
</Result>
<div
class=
"result-success__content"
>
<Descriptions
title=
"项目名称"
>
<DescriptionItem
label=
"项目 ID"
>
111222
</DescriptionItem>
<DescriptionItem
label=
"负责人"
>
Vben
</DescriptionItem>
<DescriptionItem
label=
"生效时间"
>
2016-12-12 ~ 2017-12-12
</DescriptionItem>
</Descriptions>
<Steps
:current=
"1"
progress-dot
size=
"small"
>
<Step
title=
"创建项目"
>
<
template
#
description
>
<div>
Vben
</div>
<p>
2016-12-12 12:32
</p>
</
template
>
</Step>
<Step
title=
"部门初审"
>
<
template
#
description
>
<p>
Chad
</p>
</
template
>
</Step>
<Step
title=
"财务复核"
/>
<Step
title=
"完成"
/>
</Steps>
</div>
</div>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'vue'
;
import
{
Result
,
Steps
,
Descriptions
}
from
'ant-design-vue'
;
export
default
defineComponent
({
components
:
{
Result
,
Steps
,
Step
:
Steps
.
Step
,
Descriptions
,
DescriptionItem
:
Descriptions
.
Item
,
},
});
</
script
>
<
style
lang=
"less"
scoped
>
.result-success
{
padding
:
48px
32px
;
background
:
#fff
;
&__content
{
padding
:
24px
40px
;
background
:
#fafafa
;
}
}
</
style
>
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论