Blame view

src/views/sys/exception/Exception.tsx 3.57 KB
vben authored
1
2
import './exception.less';
陈文彬 authored
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
17
import { useI18n } from '/@/hooks/web/useI18n';
陈文彬 authored
18
19
20
21
22
23
24

interface MapValue {
  title: string;
  subTitle: string;
  btnText?: string;
  icon?: string;
  handler?: Fn;
25
  status?: string;
陈文彬 authored
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
52
陈文彬 authored
53
54
55
    const { query } = useRoute();
    const go = useGo();
    const redo = useRedo();
56
    const { t } = useI18n();
vben authored
57
陈文彬 authored
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;
      }
    );
70
71
    const backLoginI18n = t('sys.exception.backLogin');
    const backHomeI18n = t('sys.exception.backHome');
vben authored
72
73
74
75
    unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_ACCESS, {
      title: '403',
      status: `${ExceptionEnum.PAGE_NOT_ACCESS}`,
76
      subTitle: t('sys.exception.subTitle403'),
vben authored
77
      btnText: props.full ? backLoginI18n : backHomeI18n,
78
79
80
      handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
    });
陈文彬 authored
81
82
    unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_FOUND, {
      title: '404',
83
      status: `${ExceptionEnum.PAGE_NOT_FOUND}`,
84
      subTitle: t('sys.exception.subTitle404'),
vben authored
85
      btnText: props.full ? backLoginI18n : backHomeI18n,
陈文彬 authored
86
87
88
89
90
      handler: () => (props.full ? go(PageEnum.BASE_LOGIN) : go()),
    });

    unref(statusMapRef).set(ExceptionEnum.ERROR, {
      title: '500',
91
      status: `${ExceptionEnum.ERROR}`,
92
      subTitle: t('sys.exception.subTitle500'),
vben authored
93
      btnText: backHomeI18n,
陈文彬 authored
94
95
96
97
      handler: () => go(),
    });

    unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_DATA, {
98
      title: t('sys.exception.noDataTitle'),
陈文彬 authored
99
      subTitle: '',
100
      btnText: t('sys.exception.redo'),
陈文彬 authored
101
102
103
104
105
      handler: () => redo(),
      icon: notDataImg,
    });

    unref(statusMapRef).set(ExceptionEnum.NET_WORK_ERROR, {
106
107
      title: t('sys.exception.networkErrorTitle'),
      subTitle: t('sys.exception.networkErrorSubTitle'),
108
      btnText: 'Refresh',
陈文彬 authored
109
110
111
112
113
      handler: () => redo(),
      icon: netWorkImg,
    });

    return () => {
114
      const { title, subTitle, btnText, icon, handler, status } = unref(getMapValue) || {};
陈文彬 authored
115
116
      return (
        <Result
117
          class="exception "
118
          status={status as any}
陈文彬 authored
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>
              ),
129
            icon: () => (icon ? <img src={icon} /> : null),
陈文彬 authored
130
131
132
133
134
135
          }}
        </Result>
      );
    };
  },
});