vben
authored
|
1
2
|
<template>
<div class="p-4">
|
vben
authored
|
3
|
<template v-for="src in imgList" :key="src">
|
vben
authored
|
4
5
|
<img :src="src" v-show="false" />
</template>
|
vben
authored
|
6
|
<DetailModal :info="rowInfo" @register="registerModal" />
|
vben
authored
|
7
8
|
<BasicTable @register="register" class="error-handle-table">
<template #toolbar>
|
vben
authored
|
9
10
11
12
13
14
15
16
17
|
<a-button @click="fireVueError" type="primary">
{{ t('sys.errorLog.fireVueError') }}
</a-button>
<a-button @click="fireResourceError" type="primary">
{{ t('sys.errorLog.fireResourceError') }}
</a-button>
<a-button @click="fireAjaxError" type="primary">
{{ t('sys.errorLog.fireAjaxError') }}
</a-button>
|
vben
authored
|
18
19
|
</template>
<template #action="{ record }">
|
vben
authored
|
20
21
22
23
24
|
<TableAction
:actions="[
{ label: t('sys.errorLog.tableActionDesc'), onClick: handleDetail.bind(null, record) },
]"
/>
|
vben
authored
|
25
26
27
28
29
30
|
</template>
</BasicTable>
</div>
</template>
<script lang="ts">
|
Vben
authored
|
31
32
|
import type { ErrorLogInfo } from '/#/store';
|
vben
authored
|
33
34
35
|
import { defineComponent, watch, ref, nextTick } from 'vue';
import DetailModal from './DetailModal.vue';
|
vben
authored
|
36
37
|
import { BasicTable, useTable, TableAction } from '/@/components/Table/index';
|
vben
authored
|
38
|
import { useModal } from '/@/components/Modal/index';
|
vben
authored
|
39
|
import { useMessage } from '/@/hooks/web/useMessage';
|
vben
authored
|
40
|
import { useI18n } from '/@/hooks/web/useI18n';
|
vben
authored
|
41
|
|
Vben
authored
|
42
|
import { useErrorLogStore } from '/@/store/modules/errorLog';
|
vben
authored
|
43
44
45
46
47
48
49
50
51
52
53
|
import { fireErrorApi } from '/@/api/demo/error';
import { getColumns } from './data';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
name: 'ErrorHandler',
components: { DetailModal, BasicTable, TableAction },
setup() {
|
Vben
authored
|
54
|
const rowInfo = ref<ErrorLogInfo>();
|
vben
authored
|
55
|
const imgList = ref<string[]>([]);
|
vben
authored
|
56
|
|
vben
authored
|
57
|
const { t } = useI18n();
|
Vben
authored
|
58
|
const errorLogStore = useErrorLogStore();
|
vben
authored
|
59
|
const [register, { setTableData }] = useTable({
|
vben
authored
|
60
|
title: t('sys.errorLog.tableTitle'),
|
vben
authored
|
61
62
63
|
columns: getColumns(),
actionColumn: {
width: 80,
|
vben
authored
|
64
|
title: 'Action',
|
vben
authored
|
65
66
67
68
69
|
dataIndex: 'action',
slots: { customRender: 'action' },
},
});
const [registerModal, { openModal }] = useModal();
|
vben
authored
|
70
|
|
vben
authored
|
71
|
watch(
|
Vben
authored
|
72
|
() => errorLogStore.getErrorLogInfoList,
|
vben
authored
|
73
74
75
76
77
78
79
80
81
|
(list) => {
nextTick(() => {
setTableData(cloneDeep(list));
});
},
{
immediate: true,
}
);
|
vben
authored
|
82
|
const { createMessage } = useMessage();
|
Vben
authored
|
83
|
if (import.meta.env.DEV) {
|
vben
authored
|
84
|
createMessage.info(t('sys.errorLog.enableMessage'));
|
vben
authored
|
85
|
}
|
vben
authored
|
86
|
// 查看详情
|
Vben
authored
|
87
|
function handleDetail(row: ErrorLogInfo) {
|
vben
authored
|
88
|
rowInfo.value = row;
|
vben
authored
|
89
90
91
92
93
94
95
96
|
openModal(true);
}
function fireVueError() {
throw new Error('fire vue error!');
}
function fireResourceError() {
|
vben
authored
|
97
|
imgList.value.push(`${new Date().getTime()}.png`);
|
vben
authored
|
98
99
100
101
102
103
104
105
106
107
108
109
110
|
}
async function fireAjaxError() {
await fireErrorApi();
}
return {
register,
registerModal,
handleDetail,
fireVueError,
fireResourceError,
fireAjaxError,
|
vben
authored
|
111
112
|
imgList,
rowInfo,
|
vben
authored
|
113
|
t,
|
vben
authored
|
114
115
116
117
|
};
},
});
</script>
|