| | |
| | | <template> |
| | | <div class="p-4"> |
| | | <template v-for="src in imgListRef" :key="src"> |
| | | <template v-for="src in imgList" :key="src"> |
| | | <img :src="src" v-show="false" /> |
| | | </template> |
| | | <DetailModal :info="rowInfoRef" @register="registerModal" /> |
| | | <DetailModal :info="rowInfo" @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> |
| | | <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 #action="{ record }"> |
| | | <TableAction :actions="[{ label: '详情', onClick: handleDetail.bind(null, record) }]" /> |
| | | <TableAction |
| | | :actions="[ |
| | | { label: t('sys.errorLog.tableActionDesc'), onClick: handleDetail.bind(null, record) }, |
| | | ]" |
| | | /> |
| | | </template> |
| | | </BasicTable> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import type { ErrorLogInfo } from '/#/store'; |
| | | |
| | | import { defineComponent, watch, ref, nextTick } from 'vue'; |
| | | |
| | | import DetailModal from './DetailModal.vue'; |
| | | import { useModal } from '/@/components/Modal/index'; |
| | | |
| | | import { BasicTable, useTable, TableAction } from '/@/components/Table/index'; |
| | | |
| | | import { errorStore, ErrorInfo } from '/@/store/modules/error'; |
| | | import { useModal } from '/@/components/Modal/index'; |
| | | import { useMessage } from '/@/hooks/web/useMessage'; |
| | | import { useI18n } from '/@/hooks/web/useI18n'; |
| | | |
| | | import { useErrorLogStore } from '/@/store/modules/errorLog'; |
| | | |
| | | import { fireErrorApi } from '/@/api/demo/error'; |
| | | |
| | |
| | | name: 'ErrorHandler', |
| | | components: { DetailModal, BasicTable, TableAction }, |
| | | setup() { |
| | | const rowInfoRef = ref<ErrorInfo>(); |
| | | const imgListRef = ref<string[]>([]); |
| | | const rowInfo = ref<ErrorLogInfo>(); |
| | | const imgList = ref<string[]>([]); |
| | | |
| | | const { t } = useI18n(); |
| | | const errorLogStore = useErrorLogStore(); |
| | | const [register, { setTableData }] = useTable({ |
| | | titleHelpMessage: '只在`/src/settings/projectSetting.ts` 内的useErrorHandle=true时生效!', |
| | | title: '错误日志列表', |
| | | title: t('sys.errorLog.tableTitle'), |
| | | columns: getColumns(), |
| | | actionColumn: { |
| | | width: 80, |
| | | title: '操作', |
| | | title: 'Action', |
| | | dataIndex: 'action', |
| | | slots: { customRender: 'action' }, |
| | | }, |
| | | }); |
| | | |
| | | const [registerModal, { openModal }] = useModal(); |
| | | |
| | | watch( |
| | | () => errorStore.getErrorInfoState, |
| | | () => 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: ErrorInfo) { |
| | | rowInfoRef.value = row; |
| | | function handleDetail(row: ErrorLogInfo) { |
| | | rowInfo.value = row; |
| | | openModal(true); |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | function fireResourceError() { |
| | | imgListRef.value.push(`${new Date().getTime()}.png`); |
| | | imgList.value.push(`${new Date().getTime()}.png`); |
| | | } |
| | | |
| | | async function fireAjaxError() { |
| | |
| | | fireVueError, |
| | | fireResourceError, |
| | | fireAjaxError, |
| | | imgListRef, |
| | | rowInfoRef, |
| | | imgList, |
| | | rowInfo, |
| | | t, |
| | | }; |
| | | }, |
| | | }); |