canrd-outside / order-erp-front · Files

Blame view

src/views/sys/error-log/index.vue 2.9 KB
Edit Raw Normal View History
feat: add error handle
7101587b
 
vben authored 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<template>
  <div class="p-4">
    <template v-for="src in imgListRef" :key="src">
      <img :src="src" v-show="false" />
    </template>
    <DetailModal :info="rowInfoRef" @register="registerModal" />
    <BasicTable @register="register" class="error-handle-table">
      <template #toolbar>
        <a-button @click="fireVueError" type="primary"> 点击触发vue错误 </a-button>
        <a-button @click="fireResourceError" type="primary"> 点击触发resource错误 </a-button>
        <a-button @click="fireAjaxError" type="primary"> 点击触发ajax错误 </a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="[{ label: '详情', onClick: handleDetail.bind(null, record) }]" />
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts">
  import { defineComponent, watch, ref, nextTick } from 'vue';

  import DetailModal from './DetailModal.vue';
  import { useModal } from '/@/components/Modal/index';
perf(use-message): fix typo
bcab4b77
 
vben authored 
25
 
  import { useMessage } from '/@/hooks/web/useMessage';
feat: add error handle
7101587b
 
vben authored 
26
27
28
29
30
31
32
33
34
35
 

  import { BasicTable, useTable, TableAction } from '/@/components/Table/index';

  import { errorStore, ErrorInfo } from '/@/store/modules/error';

  import { fireErrorApi } from '/@/api/demo/error';

  import { getColumns } from './data';

  import { cloneDeep } from 'lodash-es';
perf(use-message): fix typo
bcab4b77
 
vben authored 
36
 
  import { isDevMode } from '/@/utils/env';
feat: add error handle
7101587b
 
vben authored 
37
38
39
40
41
42
43
 

  export default defineComponent({
    name: 'ErrorHandler',
    components: { DetailModal, BasicTable, TableAction },
    setup() {
      const rowInfoRef = ref<ErrorInfo>();
      const imgListRef = ref<string[]>([]);
perf(use-message): fix typo
bcab4b77
 
vben authored 
44
feat: add error handle
7101587b
 
vben authored 
45
46
47
48
49
50
51
52
53
54
55
 
      const [register, { setTableData }] = useTable({
        title: '错误日志列表',
        columns: getColumns(),
        actionColumn: {
          width: 80,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });
      const [registerModal, { openModal }] = useModal();
perf(use-message): fix typo
bcab4b77
 
vben authored 
56
feat: add error handle
7101587b
 
vben authored 
57
58
59
60
61
62
63
64
65
66
67
 
      watch(
        () => errorStore.getErrorInfoState,
        (list) => {
          nextTick(() => {
            setTableData(cloneDeep(list));
          });
        },
        {
          immediate: true,
        }
      );
perf(use-message): fix typo
bcab4b77
 
vben authored 
68
69
70
71
 
      const { createMessage } = useMessage();
      if (isDevMode()) {
        createMessage.info('只在`/src/settings/projectSetting.ts` 内的useErrorHandle=true时生效！');
      }
feat: add error handle
7101587b
 
vben authored 
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
      // 查看详情
      function handleDetail(row: ErrorInfo) {
        rowInfoRef.value = row;
        openModal(true);
      }

      function fireVueError() {
        throw new Error('fire vue error!');
      }

      function fireResourceError() {
        imgListRef.value.push(`${new Date().getTime()}.png`);
      }

      async function fireAjaxError() {
        await fireErrorApi();
      }

      return {
        register,
        registerModal,
        handleDetail,
        fireVueError,
        fireResourceError,
        fireAjaxError,
        imgListRef,
        rowInfoRef,
      };
    },
  });
</script>