CRM系统前端
查看 | 历史 | 提交 | 提交对比
nebv
2020-10-11 03b6025d07e4df99474f80d3fa57e8b5238ba40c
提交 | 用户 | age
2f6253 1 import type { PropType } from 'vue';
陈 2
3 import { Result, Button } from 'ant-design-vue';
4 import { defineComponent, ref, computed, unref } from 'vue';
5
6 import { ExceptionEnum } from '/@/enums/exceptionEnum';
7
8 import netWorkImg from '/@/assets/images/exception/net-work.png';
9 import error404 from '/@/assets/images/exception/404.png';
10 import error500 from '/@/assets/images/exception/500.png';
11 import notDataImg from '/@/assets/images/no-data.png';
12
13 import { useRoute } from 'vue-router';
14
15 import { useGo, useRedo } from '/@/hooks/web/usePage';
16 import { PageEnum } from '/@/enums/pageEnum';
17
03b602 18 import './exception.less';
2f6253 19 interface MapValue {
陈 20   title: string;
21   subTitle: string;
22   btnText?: string;
23   icon?: string;
24   handler?: Fn;
25 }
26
27 export default defineComponent({
28   name: 'ErrorPage',
29   props: {
30     // 状态码
31     status: {
32       type: Number as PropType<number>,
33       default: ExceptionEnum.PAGE_NOT_FOUND,
34     },
35
36     title: {
37       type: String as PropType<string>,
38     },
39
40     subTitle: {
41       type: String as PropType<string>,
42     },
43
44     full: {
45       type: Boolean as PropType<boolean>,
46       default: false,
47     },
48   },
49   setup(props) {
50     const statusMapRef = ref(new Map<string | number, MapValue>());
51     const { query } = useRoute();
52     const go = useGo();
53     const redo = useRedo();
54     const getStatus = computed(() => {
55       const { status: routeStatus } = query;
56       const { status } = props;
57       return Number(routeStatus) || status;
58     });
59
60     const getMapValue = computed(
61       (): MapValue => {
62         return unref(statusMapRef).get(unref(getStatus)) as MapValue;
63       }
64     );
65
66     unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_FOUND, {
67       title: '404',
68       subTitle: '抱歉，您访问的页面不存在!',
69       btnText: props.full ? '返回登录' : '返回首页',
70       handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
71       icon: error404,
72     });
73
74     unref(statusMapRef).set(ExceptionEnum.ERROR, {
75       title: '500',
76       subTitle: '抱歉，服务器出现异常!',
77       btnText: '返回首页',
78       handler: () => go(),
79       icon: error500,
80     });
81
82     unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_DATA, {
83       title: '当前页面无数据',
84       subTitle: '',
85       btnText: '刷新',
86       handler: () => redo(),
87       icon: notDataImg,
88     });
89
90     unref(statusMapRef).set(ExceptionEnum.NET_WORK_ERROR, {
91       title: '网络错误',
92       subTitle: '抱歉，您的网络连接已断开,请检查您的网络!',
93       btnText: '刷新',
94       handler: () => redo(),
95       icon: netWorkImg,
96     });
97
98     unref(statusMapRef).set(ExceptionEnum.PAGE_TIMEOUT, {
99       title: '页面加载失败',
100       subTitle: '抱歉，您的页面加载出错或者过久未响应,请检查您的网络!',
101       btnText: '刷新',
102       handler: () => redo(),
103       icon: netWorkImg,
104     });
105     return () => {
106       const { title, subTitle, btnText, icon, handler } = unref(getMapValue) || {};
107       return (
108         <Result
03b602 109           class="exception "
2f6253 110           title={props.title || title}
陈 111           sub-title={props.subTitle || subTitle}
112         >
113           {{
114             extra: () =>
115               btnText && (
116                 <Button type="primary" onClick={handler}>
117                   {() => btnText}
118                 </Button>
119               ),
120             icon: () => icon && <img src={icon} />,
121           }}
122         </Result>
123       );
124     };
125   },
126 });