index.vue
2.95 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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
103
104
105
106
107
108
<script lang="tsx">
import { defineComponent, watch, ref, unref } from 'compatible-vue';
import DetailModal from './DetailModal.vue';
import { useModal } from '@/components/modal/index';
import { useDesign } from '@/hooks/core/useDesign';
import { BasicTable, useTable } from '@/components/table/index';
import { errorStore, ErrorInfo } from '@/store/modules/error';
import { fireErrorApi } from '@/api/demo/error';
import { getColumns } from './data';
const { prefixCls } = useDesign('error-handle');
export default defineComponent({
name: 'ErrorHandler',
setup() {
const rowInfoRef = ref<ErrorInfo>();
const imgListRef = ref<string[]>([]);
const [register, { setTableData }] = useTable({
titleHelpMessage: '只在`/src/settings/projectSetting.ts` 内的useErrorHandle=true时生效！',
title: '错误日志列表',
columns: getColumns(),
actionColumn: {
width: 80,
title: '操作',
dataIndex: 'action',
customRender: (text: string, recoed: ErrorInfo) => {
return (
<a-button type="link" size="small" onClick={handleDetail.bind(null, recoed)}>
详情
</a-button>
);
},
},
});
const [registerModal, { openModal }] = useModal();
watch(
() => errorStore.getErrorInfoState,
(list: any[]) => {
setTableData(list);
},
{
immediate: true,
}
);
// 查看详情
function handleDetail(row: ErrorInfo) {
rowInfoRef.value = row;
openModal({
visible: true,
});
}
function fireVueError() {
throw new Error('fire vue error!');
}
function fireResourceError() {
imgListRef.value.push(`${new Date().getTime()}.png`);
}
async function fireAjaxError() {
await fireErrorApi();
}
return () => (
<div class={[prefixCls, 'p-4']}>
{unref(imgListRef).map((src) => {
return <img src={src} key={src} class="hidden" />;
})}
<DetailModal info={unref(rowInfoRef)} onRegister={registerModal} />
<BasicTable onRegister={register} class={`${prefixCls}-table`}>
<template slot="toolbar">
<a-button onClick={fireVueError} type="primary">
点击触发vue错误
</a-button>
<a-button onClick={fireResourceError} type="primary">
点击触发resource错误
</a-button>
<a-button onClick={fireAjaxError} type="primary">
点击触发ajax错误
</a-button>
</template>
</BasicTable>
</div>
);
},
});
</script>
<style scoped lang="less">
@import (reference) '~@design';
@prefix-cls: ~'@{namespace}-error-handle';
.@{prefix-cls} {
&-table {
background: #fff;
}
}
</style>