<template>
|
<div class="p-4">
|
<template v-for="src in imgList" :key="src">
|
<img :src="src" v-show="false" alt="" />
|
</template>
|
<DetailModal :info="rowInfo" @register="registerModal" />
|
<BasicTable @register="register" class="error-handle-table">
|
<template #toolbar>
|
<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>
|
</template>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'action'">
|
<TableAction
|
:actions="[
|
{
|
label: t('sys.errorLog.tableActionDesc'),
|
onClick: handleDetail.bind(null, record as ErrorLogInfo),
|
},
|
]"
|
/>
|
</template>
|
</template>
|
</BasicTable>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import type { ErrorLogInfo } from '#/store';
|
import { watch, ref, nextTick } from 'vue';
|
import DetailModal from './DetailModal.vue';
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
import { useModal } from '@/components/Modal';
|
import { useMessage } from '@/hooks/web/useMessage';
|
import { useI18n } from '@/hooks/web/useI18n';
|
import { useErrorLogStore } from '@/store/modules/errorLog';
|
import { fireErrorApi } from '@/api/demo/error';
|
import { getColumns } from './data';
|
import { cloneDeep } from 'lodash-es';
|
|
const rowInfo = ref<ErrorLogInfo>();
|
const imgList = ref<string[]>([]);
|
|
const { t } = useI18n();
|
const errorLogStore = useErrorLogStore();
|
const [register, { setTableData }] = useTable({
|
title: t('sys.errorLog.tableTitle'),
|
columns: getColumns(),
|
actionColumn: {
|
width: 80,
|
title: 'Action',
|
dataIndex: 'action',
|
// slots: { customRender: 'action' },
|
},
|
});
|
const [registerModal, { openModal }] = useModal();
|
|
watch(
|
() => errorLogStore.getErrorLogInfoList,
|
(list) => {
|
nextTick(() => {
|
setTableData(cloneDeep(list));
|
});
|
},
|
{
|
immediate: true,
|
},
|
);
|
const { createMessage } = useMessage();
|
if (import.meta.env.DEV) {
|
createMessage.info(t('sys.errorLog.enableMessage'));
|
}
|
// 查看详情
|
function handleDetail(row: ErrorLogInfo) {
|
rowInfo.value = row;
|
openModal(true);
|
}
|
|
function fireVueError() {
|
throw new Error('fire vue error!');
|
}
|
|
function fireResourceError() {
|
imgList.value.push(`${new Date().getTime()}.png`);
|
}
|
|
async function fireAjaxError() {
|
await fireErrorApi();
|
}
|
</script>
|
