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 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 1 import type { MenuModule } from '/@/router/types.d';
2 2 const menu: MenuModule = {
3   - orderNo: 10,
  3 + orderNo: 19,
4 4 menu: {
5   - name: '页面功能',
  5 + name: '功能',
6 6 path: '/feat',
7 7 children: [
8 8 {
... ...
src/router/menus/modules/demo/exception.ts renamed to src/router/menus/modules/demo/page.ts
  View file @21e0548
1 1 import type { MenuModule } from '/@/router/types.d';
2 2 const menu: MenuModule = {
3   - orderNo: 500,
  3 + orderNo: 20,
4 4 menu: {
5   - name: '异常页',
6   - path: '/exception',
  5 + name: '页面',
  6 + path: '/page-demo',
  7 + tag: {
  8 + dot: true,
  9 + },
7 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 1 import type { MenuModule } from '/@/router/types.d';
2 2 const menu: MenuModule = {
3   - orderNo: 20,
  3 + orderNo: 15,
4 4 menu: {
5 5 name: '权限管理',
6 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 6 const ExceptionPage = () => import('/@/views/sys/exception/Exception');
7 7  
8 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 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 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 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>
... ...