vben
authored
5 years ago
1
2
import './exception.less';
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import type { PropType } from 'vue';
import { Result, Button } from 'ant-design-vue';
import { defineComponent, ref, computed, unref } from 'vue';
import { ExceptionEnum } from '/@/enums/exceptionEnum';
import netWorkImg from '/@/assets/images/exception/net-work.png';
import notDataImg from '/@/assets/images/no-data.png';
import { useRoute } from 'vue-router';
import { useGo, useRedo } from '/@/hooks/web/usePage';
import { PageEnum } from '/@/enums/pageEnum';
vben
authored
5 years ago
17
import { useI18n } from '/@/hooks/web/useI18n';
18
19
20
21
22
23
24
interface MapValue {
title: string;
subTitle: string;
btnText?: string;
icon?: string;
handler?: Fn;
vben
authored
5 years ago
25
status?: string;
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
}
export default defineComponent({
name: 'ErrorPage',
props: {
// 状态码
status: {
type: Number as PropType<number>,
default: ExceptionEnum.PAGE_NOT_FOUND,
},
title: {
type: String as PropType<string>,
},
subTitle: {
type: String as PropType<string>,
},
full: {
type: Boolean as PropType<boolean>,
default: false,
},
},
setup(props) {
const statusMapRef = ref(new Map<string | number, MapValue>());
vben
authored
5 years ago
52
53
54
55
const { query } = useRoute();
const go = useGo();
const redo = useRedo();
vben
authored
5 years ago
56
const { t } = useI18n();
vben
authored
5 years ago
57
58
59
60
61
62
63
64
65
66
67
68
69
const getStatus = computed(() => {
const { status: routeStatus } = query;
const { status } = props;
return Number(routeStatus) || status;
});
const getMapValue = computed(
(): MapValue => {
return unref(statusMapRef).get(unref(getStatus)) as MapValue;
}
);
vben
authored
5 years ago
70
71
const backLoginI18n = t('sys.exception.backLogin');
const backHomeI18n = t('sys.exception.backHome');
vben
authored
5 years ago
72
vben
authored
5 years ago
73
74
75
unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_ACCESS, {
title: '403',
status: `${ExceptionEnum.PAGE_NOT_ACCESS}`,
vben
authored
5 years ago
76
subTitle: t('sys.exception.subTitle403'),
vben
authored
5 years ago
77
btnText: props.full ? backLoginI18n : backHomeI18n,
vben
authored
5 years ago
78
79
80
handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
});
81
82
unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_FOUND, {
title: '404',
vben
authored
5 years ago
83
status: `${ExceptionEnum.PAGE_NOT_FOUND}`,
vben
authored
5 years ago
84
subTitle: t('sys.exception.subTitle404'),
vben
authored
5 years ago
85
btnText: props.full ? backLoginI18n : backHomeI18n,
86
87
88
89
90
handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
});
unref(statusMapRef).set(ExceptionEnum.ERROR, {
title: '500',
vben
authored
5 years ago
91
status: `${ExceptionEnum.ERROR}`,
vben
authored
5 years ago
92
subTitle: t('sys.exception.subTitle500'),
vben
authored
5 years ago
93
btnText: backHomeI18n,
94
95
96
97
handler: () => go(),
});
unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_DATA, {
vben
authored
5 years ago
98
title: t('sys.exception.noDataTitle'),
99
subTitle: '',
vben
authored
5 years ago
100
btnText: t('sys.exception.redo'),
101
102
103
104
105
handler: () => redo(),
icon: notDataImg,
});
unref(statusMapRef).set(ExceptionEnum.NET_WORK_ERROR, {
vben
authored
5 years ago
106
107
title: t('sys.exception.networkErrorTitle'),
subTitle: t('sys.exception.networkErrorSubTitle'),
vben
authored
5 years ago
108
btnText: 'Refresh',
109
110
111
112
113
handler: () => redo(),
icon: netWorkImg,
});
return () => {
vben
authored
5 years ago
114
const { title, subTitle, btnText, icon, handler, status } = unref(getMapValue) || {};
115
116
return (
<Result
nebv
authored
5 years ago
117
class="exception "
vben
authored
5 years ago
118
status={status as any}
119
120
121
122
123
124
125
126
127
128
title={props.title || title}
sub-title={props.subTitle || subTitle}
>
{{
extra: () =>
btnText && (
<Button type="primary" onClick={handler}>
{() => btnText}
</Button>
),
vben
authored
5 years ago
129
icon: () => (icon ? <img src={icon} /> : null),
130
131
132
133
134
135
}}
</Result>
);
};
},
});