canrd-outside / order-erp-front · Commits

Commit 21e0548e34cf70ebf97967089f458e759ca326d9

Authored by vben
1 parent 746d4a74

feat: add result page demo

Inline Side-by-side
Showing 7 changed files with 270 additions and 89 deletions
src/router/menus/modules/demo/comp.ts
  View file @21e0548
@@ -88,6 +88,16 @@ const menu: MenuModule = { @@ -88,6 +88,16 @@ const menu: MenuModule = {
88 }, 88 },
89 ], 89 ],
90 }, 90 },
  91 + {
  92 + path: '/form',
  93 + name: '验证组件',
  94 + children: [
  95 + {
  96 + path: '/base',
  97 + name: '拖拽校验',
  98 + },
  99 + ],
  100 + },
91 ], 101 ],
92 }, 102 },
93 }; 103 };
src/router/menus/modules/demo/feat.ts
  View file @21e0548
1 import type { MenuModule } from '/@/router/types.d'; 1 import type { MenuModule } from '/@/router/types.d';
2 const menu: MenuModule = { 2 const menu: MenuModule = {
3 - orderNo: 10, 3 + orderNo: 19,
4 menu: { 4 menu: {
5 - name: '页面功能', 5 + name: '功能',
6 path: '/feat', 6 path: '/feat',
7 children: [ 7 children: [
8 { 8 {
src/router/menus/modules/demo/exception.ts renamed to src/router/menus/modules/demo/page.ts
  View file @21e0548
1 import type { MenuModule } from '/@/router/types.d'; 1 import type { MenuModule } from '/@/router/types.d';
2 const menu: MenuModule = { 2 const menu: MenuModule = {
3 - orderNo: 500, 3 + orderNo: 20,
4 menu: { 4 menu: {
5 - name: '异常页',  
6 - path: '/exception', 5 + name: '页面',
  6 + path: '/page-demo',
  7 + tag: {
  8 + dot: true,
  9 + },
7 children: [ 10 children: [
8 { 11 {
9 - path: '403',  
10 - name: '403', 12 + path: 'result',
  13 + name: '结果页',
  14 + tag: {
  15 + content: 'new',
  16 + },
  17 + children: [
  18 + {
  19 + path: 'success',
  20 + name: '成功页',
  21 + },
  22 + {
  23 + path: 'fail',
  24 + name: '失败页',
  25 + },
  26 + ],
11 }, 27 },
12 { 28 {
13 - path: '404',  
14 - name: '404',  
15 - },  
16 - {  
17 - path: '500',  
18 - name: '500',  
19 - },  
20 - {  
21 - path: 'net-work-error',  
22 - name: '网络错误',  
23 - },  
24 - {  
25 - path: 'page-time-out',  
26 - name: '页面超时',  
27 - },  
28 - {  
29 - path: 'not-data',  
30 - name: '无数据', 29 + path: 'exception',
  30 + name: '异常页',
  31 + children: [
  32 + {
  33 + path: '403',
  34 + name: '403',
  35 + },
  36 + {
  37 + path: '404',
  38 + name: '404',
  39 + },
  40 + {
  41 + path: '500',
  42 + name: '500',
  43 + },
  44 + {
  45 + path: 'net-work-error',
  46 + name: '网络错误',
  47 + },
  48 + {
  49 + path: 'not-data',
  50 + name: '无数据',
  51 + },
  52 + ],
31 }, 53 },
32 ], 54 ],
33 }, 55 },
src/router/menus/modules/demo/permission.ts
  View file @21e0548
1 import type { MenuModule } from '/@/router/types.d'; 1 import type { MenuModule } from '/@/router/types.d';
2 const menu: MenuModule = { 2 const menu: MenuModule = {
3 - orderNo: 20, 3 + orderNo: 15,
4 menu: { 4 menu: {
5 name: '权限管理', 5 name: '权限管理',
6 path: '/permission', 6 path: '/permission',
src/router/routes/modules/demo/exception.ts renamed to src/router/routes/modules/demo/page.ts
  View file @21e0548
@@ -6,77 +6,115 @@ import { ExceptionEnum } from '/@/enums/exceptionEnum'; @@ -6,77 +6,115 @@ import { ExceptionEnum } from '/@/enums/exceptionEnum';
6 const ExceptionPage = () => import('/@/views/sys/exception/Exception'); 6 const ExceptionPage = () => import('/@/views/sys/exception/Exception');
7 7
8 export default { 8 export default {
9 - layout: {  
10 - path: '/exception',  
11 - name: 'ExceptionPage',  
12 - component: PAGE_LAYOUT_COMPONENT,  
13 - redirect: '/exception/404',  
14 - meta: {  
15 - icon: 'ant-design:exception-outlined',  
16 - title: '异常页',  
17 - }, 9 + path: '/page-demo',
  10 + name: 'PageDemo',
  11 + component: PAGE_LAYOUT_COMPONENT,
  12 + redirect: '/page-demo/exception',
  13 + meta: {
  14 + icon: 'mdi:page-next-outline',
  15 + title: '页面',
18 }, 16 },
19 -  
20 - routes: [  
21 - {  
22 - path: '/403',  
23 - name: 'PageNotAccess',  
24 - component: ExceptionPage,  
25 - props: {  
26 - status: ExceptionEnum.PAGE_NOT_ACCESS,  
27 - },  
28 - meta: {  
29 - title: '403',  
30 - afterCloseLoading: true,  
31 - },  
32 - },  
33 - {  
34 - path: '/404',  
35 - name: 'PageNotFound',  
36 - component: ExceptionPage,  
37 - props: {  
38 - status: ExceptionEnum.PAGE_NOT_FOUND,  
39 - },  
40 - meta: {  
41 - title: '404',  
42 - afterCloseLoading: true,  
43 - },  
44 - },  
45 - {  
46 - path: '/500',  
47 - name: 'ServiceError',  
48 - component: ExceptionPage,  
49 - props: {  
50 - status: ExceptionEnum.ERROR,  
51 - },  
52 - meta: {  
53 - title: '500',  
54 - afterCloseLoading: true,  
55 - },  
56 - }, 17 + children: [
  18 + // =============================result start=============================
57 { 19 {
58 - path: '/net-work-error',  
59 - name: 'NetWorkError',  
60 - component: ExceptionPage,  
61 - props: {  
62 - status: ExceptionEnum.NET_WORK_ERROR,  
63 - }, 20 + path: '/result',
  21 + name: 'ResultPage',
  22 + redirect: '/page-demo/result/success',
64 meta: { 23 meta: {
65 - title: '网络错误',  
66 - afterCloseLoading: true, 24 + title: '结果页',
67 }, 25 },
  26 + children: [
  27 + {
  28 + path: 'success',
  29 + name: 'ResultSuccessPage',
  30 + component: () => import('/@/views/demo/page/result/success/index.vue'),
  31 + meta: {
  32 + title: '成功页',
  33 + },
  34 + },
  35 + {
  36 + path: 'fail',
  37 + name: 'ResultFailPage',
  38 + component: () => import('/@/views/demo/page/result/fail/index.vue'),
  39 + meta: {
  40 + title: '失败页',
  41 + },
  42 + },
  43 + ],
68 }, 44 },
  45 + // =============================result end=============================
  46 +
  47 + // =============================exception start=============================
69 { 48 {
70 - path: '/not-data',  
71 - name: 'NotData',  
72 - component: ExceptionPage,  
73 - props: {  
74 - status: ExceptionEnum.PAGE_NOT_DATA,  
75 - }, 49 + path: '/exception',
  50 + name: 'ExceptionPage',
  51 + redirect: '/page-demo/exception/404',
76 meta: { 52 meta: {
77 - title: '无数据',  
78 - afterCloseLoading: true, 53 + title: '异常页',
79 }, 54 },
  55 + children: [
  56 + {
  57 + path: '403',
  58 + name: 'PageNotAccess',
  59 + component: ExceptionPage,
  60 + props: {
  61 + status: ExceptionEnum.PAGE_NOT_ACCESS,
  62 + },
  63 + meta: {
  64 + title: '403',
  65 + afterCloseLoading: true,
  66 + },
  67 + },
  68 + {
  69 + path: '404',
  70 + name: 'PageNotFound',
  71 + component: ExceptionPage,
  72 + props: {
  73 + status: ExceptionEnum.PAGE_NOT_FOUND,
  74 + },
  75 + meta: {
  76 + title: '404',
  77 + afterCloseLoading: true,
  78 + },
  79 + },
  80 + {
  81 + path: '500',
  82 + name: 'ServiceError',
  83 + component: ExceptionPage,
  84 + props: {
  85 + status: ExceptionEnum.ERROR,
  86 + },
  87 + meta: {
  88 + title: '500',
  89 + afterCloseLoading: true,
  90 + },
  91 + },
  92 + {
  93 + path: 'net-work-error',
  94 + name: 'NetWorkError',
  95 + component: ExceptionPage,
  96 + props: {
  97 + status: ExceptionEnum.NET_WORK_ERROR,
  98 + },
  99 + meta: {
  100 + title: '网络错误',
  101 + afterCloseLoading: true,
  102 + },
  103 + },
  104 + {
  105 + path: 'not-data',
  106 + name: 'NotData',
  107 + component: ExceptionPage,
  108 + props: {
  109 + status: ExceptionEnum.PAGE_NOT_DATA,
  110 + },
  111 + meta: {
  112 + title: '无数据',
  113 + afterCloseLoading: true,
  114 + },
  115 + },
  116 + ],
80 }, 117 },
  118 + // =============================exception end=============================
81 ], 119 ],
82 } as AppRouteModule; 120 } as AppRouteModule;
src/views/demo/page/result/fail/index.vue 0 → 100644
  View file @21e0548
  1 +<template>
  2 + <div class="m-5 result-error">
  3 + <Result status="error" title="提交失败" sub-title="请核对并修改以下信息后，再重新提交。">
  4 + <template #extra>
  5 + <a-button key="console" type="primary"> 返回修改 </a-button>
  6 + </template>
  7 + </Result>
  8 + <div class="result-error__content">
  9 + <div class="result-error__content-title">您提交的内容有如下错误：</div>
  10 + <div class="mb-4">
  11 + <CloseCircleOutlined class="mr-2 result-error__content-icon" />
  12 + 您的账户已被冻结
  13 + <a class="ml-4">立即解冻 ></a>
  14 + </div>
  15 + <div class="mb-4">
  16 + <CloseCircleOutlined class="mr-2 result-error__content-icon" />
  17 + 您的账户还不具备申请资格
  18 + <a class="ml-4">立即解冻 ></a>
  19 + </div>
  20 + </div>
  21 + </div>
  22 +</template>
  23 +<script lang="ts">
  24 + import { defineComponent } from 'vue';
  25 + import { Result } from 'ant-design-vue';
  26 + import { CloseCircleOutlined } from '@ant-design/icons-vue';
  27 + export default defineComponent({
  28 + components: {
  29 + Result,
  30 + CloseCircleOutlined,
  31 + },
  32 + });
  33 +</script>
  34 +<style lang="less" scoped>
  35 + .result-error {
  36 + padding: 48px 32px;
  37 + background: #fff;
  38 +
  39 + &__content {
  40 + padding: 24px 40px;
  41 + background: #fafafa;
  42 +
  43 + &-title {
  44 + margin-bottom: 16px;
  45 + font-size: 16px;
  46 + font-weight: 500;
  47 + color: rgba(0, 0, 0, 0.85);
  48 + }
  49 +
  50 + &-icon {
  51 + color: #ff4d4f;
  52 + }
  53 + }
  54 + }
  55 +</style>
src/views/demo/page/result/success/index.vue 0 → 100644
  View file @21e0548
  1 +<template>
  2 + <div class="m-5 result-success">
  3 + <Result
  4 + status="success"
  5 + title="提交成功"
  6 + sub-title="提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。"
  7 + >
  8 + <template #extra>
  9 + <a-button key="console" type="primary"> 返回列表 </a-button>
  10 + <a-button key="buy"> 查看项目 </a-button>
  11 + <a-button key="buy"> 打印 </a-button>
  12 + </template>
  13 + </Result>
  14 + <div class="result-success__content">
  15 + <Descriptions title="项目名称">
  16 + <DescriptionItem label="项目 ID"> 111222 </DescriptionItem>
  17 + <DescriptionItem label="负责人"> Vben </DescriptionItem>
  18 + <DescriptionItem label="生效时间"> 2016-12-12 ~ 2017-12-12 </DescriptionItem>
  19 + </Descriptions>
  20 + <Steps :current="1" progress-dot size="small">
  21 + <Step title="创建项目">
  22 + <template #description> <div>Vben</div> <p>2016-12-12 12:32</p> </template>
  23 + </Step>
  24 + <Step title="部门初审">
  25 + <template #description> <p>Chad</p> </template>
  26 + </Step>
  27 + <Step title="财务复核" />
  28 + <Step title="完成" />
  29 + </Steps>
  30 + </div>
  31 + </div>
  32 +</template>
  33 +<script lang="ts">
  34 + import { defineComponent } from 'vue';
  35 + import { Result, Steps, Descriptions } from 'ant-design-vue';
  36 + export default defineComponent({
  37 + components: {
  38 + Result,
  39 + Steps,
  40 + Step: Steps.Step,
  41 + Descriptions,
  42 + DescriptionItem: Descriptions.Item,
  43 + },
  44 + });
  45 +</script>
  46 +<style lang="less" scoped>
  47 + .result-success {
  48 + padding: 48px 32px;
  49 + background: #fff;
  50 +
  51 + &__content {
  52 + padding: 24px 40px;
  53 + background: #fafafa;
  54 + }
  55 + }
  56 +</style>