Skip to content

B
basic-vue-admin
提交 21e0548e 作者: vben
操作

feat: add result page demo

上级 746d4a74
正在显示 包含 270 行增加 和 89 行删除
src/router/menus/modules/demo/comp.ts
......@@ -88,6 +88,16 @@ const menu: MenuModule = {
},
],
},
{
path: '/form',
name: '验证组件',
children: [
{
path: '/base',
name: '拖拽校验',
},
],
},
],
},
};
......
src/router/menus/modules/demo/feat.ts
import type { MenuModule } from '/@/router/types.d';
const menu: MenuModule = {
orderNo: 10,
orderNo: 19,
menu: {
name: '页面功能',
name: '功能',
path: '/feat',
children: [
{
......
src/router/menus/modules/demo/exception.ts → src/router/menus/modules/demo/page.ts
import type { MenuModule } from '/@/router/types.d';
const menu: MenuModule = {
orderNo: 500,
orderNo: 20,
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
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
......@@ -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
<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
<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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论