mirror of
https://github.com/vbenjs/vben-admin-thin-next.git
synced 2025-02-03 10:28:41 +08:00
feat: add result page demo
This commit is contained in:
vben
parent
746d4a745d
commit
21e0548e34
@ -88,6 +88,16 @@ const menu: MenuModule = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/form',
|
||||||
|
name: '验证组件',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/base',
|
||||||
|
name: '拖拽校验',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,35 +0,0 @@
|
|||||||
import type { MenuModule } from '/@/router/types.d';
|
|
||||||
const menu: MenuModule = {
|
|
||||||
orderNo: 500,
|
|
||||||
menu: {
|
|
||||||
name: '异常页',
|
|
||||||
path: '/exception',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '403',
|
|
||||||
name: '403',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '404',
|
|
||||||
name: '404',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '500',
|
|
||||||
name: '500',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'net-work-error',
|
|
||||||
name: '网络错误',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'page-time-out',
|
|
||||||
name: '页面超时',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'not-data',
|
|
||||||
name: '无数据',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
export default menu;
|
|
||||||
@ -1,8 +1,8 @@
|
|||||||
import type { MenuModule } from '/@/router/types.d';
|
import type { MenuModule } from '/@/router/types.d';
|
||||||
const menu: MenuModule = {
|
const menu: MenuModule = {
|
||||||
orderNo: 10,
|
orderNo: 19,
|
||||||
menu: {
|
menu: {
|
||||||
name: '页面功能',
|
name: '功能',
|
||||||
path: '/feat',
|
path: '/feat',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|||||||
57
src/router/menus/modules/demo/page.ts
Normal file
57
src/router/menus/modules/demo/page.ts
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import type { MenuModule } from '/@/router/types.d';
|
||||||
|
const menu: MenuModule = {
|
||||||
|
orderNo: 20,
|
||||||
|
menu: {
|
||||||
|
name: '页面',
|
||||||
|
path: '/page-demo',
|
||||||
|
tag: {
|
||||||
|
dot: true,
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'result',
|
||||||
|
name: '结果页',
|
||||||
|
tag: {
|
||||||
|
content: 'new',
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'success',
|
||||||
|
name: '成功页',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'fail',
|
||||||
|
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: '无数据',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default menu;
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import type { MenuModule } from '/@/router/types.d';
|
import type { MenuModule } from '/@/router/types.d';
|
||||||
const menu: MenuModule = {
|
const menu: MenuModule = {
|
||||||
orderNo: 20,
|
orderNo: 15,
|
||||||
menu: {
|
menu: {
|
||||||
name: '权限管理',
|
name: '权限管理',
|
||||||
path: '/permission',
|
path: '/permission',
|
||||||
|
|||||||
@ -1,82 +0,0 @@
|
|||||||
import type { AppRouteModule } from '/@/router/types';
|
|
||||||
|
|
||||||
import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant';
|
|
||||||
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: '异常页',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
} as AppRouteModule;
|
|
||||||
120
src/router/routes/modules/demo/page.ts
Normal file
120
src/router/routes/modules/demo/page.ts
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
import type { AppRouteModule } from '/@/router/types';
|
||||||
|
|
||||||
|
import { PAGE_LAYOUT_COMPONENT } from '/@/router/constant';
|
||||||
|
import { ExceptionEnum } from '/@/enums/exceptionEnum';
|
||||||
|
|
||||||
|
const ExceptionPage = () => import('/@/views/sys/exception/Exception');
|
||||||
|
|
||||||
|
export default {
|
||||||
|
path: '/page-demo',
|
||||||
|
name: 'PageDemo',
|
||||||
|
component: PAGE_LAYOUT_COMPONENT,
|
||||||
|
redirect: '/page-demo/exception',
|
||||||
|
meta: {
|
||||||
|
icon: 'mdi:page-next-outline',
|
||||||
|
title: '页面',
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
// =============================result start=============================
|
||||||
|
{
|
||||||
|
path: '/result',
|
||||||
|
name: 'ResultPage',
|
||||||
|
redirect: '/page-demo/result/success',
|
||||||
|
meta: {
|
||||||
|
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: '/exception',
|
||||||
|
name: 'ExceptionPage',
|
||||||
|
redirect: '/page-demo/exception/404',
|
||||||
|
meta: {
|
||||||
|
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;
|
||||||
55
src/views/demo/page/result/fail/index.vue
Normal file
55
src/views/demo/page/result/fail/index.vue
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<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>
|
||||||
56
src/views/demo/page/result/success/index.vue
Normal file
56
src/views/demo/page/result/success/index.vue
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<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>
|
||||||
Loading…
Reference in New Issue
Block a user