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