| 提交 | 用户 | age | ||
| 710158 | 1 | <template> |
| V | 2 | <div class="p-4"> |
| 581007 | 3 | <template v-for="src in imgList" :key="src"> |
| 710158 | 4 | <img :src="src" v-show="false" /> |
| V | 5 | </template> |
| 581007 | 6 | <DetailModal :info="rowInfo" @register="registerModal" /> |
| 710158 | 7 | <BasicTable @register="register" class="error-handle-table"> |
| V | 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"> | |
| 215d8b | 31 | import type { ErrorLogInfo } from '/#/store'; |
| V | 32 | |
| 710158 | 33 | import { defineComponent, watch, ref, nextTick } from 'vue'; |
| V | 34 | |
| 35 | import DetailModal from './DetailModal.vue'; | |
| 737b1b | 36 | import { BasicTable, useTable, TableAction } from '/@/components/Table/index'; |
| V | 37 | |
| 710158 | 38 | import { useModal } from '/@/components/Modal/index'; |
| bcab4b | 39 | import { useMessage } from '/@/hooks/web/useMessage'; |
| e5f8ce | 40 | import { useI18n } from '/@/hooks/web/useI18n'; |
| 710158 | 41 | |
| 215d8b | 42 | import { useErrorLogStore } from '/@/store/modules/errorLog'; |
| 710158 | 43 | |
| V | 44 | import { fireErrorApi } from '/@/api/demo/error'; |
| 45 | ||
| 46 | import { getColumns } from './data'; | |
| 47 | ||
| 48 | import { cloneDeep } from 'lodash-es'; | |
| 49 | ||
| 50 | export default defineComponent({ | |
| 51 | name: 'ErrorHandler', | |
| 52 | components: { DetailModal, BasicTable, TableAction }, | |
| 53 | setup() { | |
| 215d8b | 54 | const rowInfo = ref<ErrorLogInfo>(); |
| 581007 | 55 | const imgList = ref<string[]>([]); |
| bcab4b | 56 | |
| 962f90 | 57 | const { t } = useI18n(); |
| 215d8b | 58 | const errorLogStore = useErrorLogStore(); |
| 710158 | 59 | const [register, { setTableData }] = useTable({ |
| 737b1b | 60 | title: t('sys.errorLog.tableTitle'), |
| 710158 | 61 | columns: getColumns(), |
| V | 62 | actionColumn: { |
| 63 | width: 80, | |
| 737b1b | 64 | title: 'Action', |
| 710158 | 65 | dataIndex: 'action', |
| V | 66 | slots: { customRender: 'action' }, |
| 67 | }, | |
| 68 | }); | |
| 69 | const [registerModal, { openModal }] = useModal(); | |
| bcab4b | 70 | |
| 710158 | 71 | watch( |
| 215d8b | 72 | () => errorLogStore.getErrorLogInfoList, |
| 710158 | 73 | (list) => { |
| V | 74 | nextTick(() => { |
| 75 | setTableData(cloneDeep(list)); | |
| 76 | }); | |
| 77 | }, | |
| 78 | { | |
| 79 | immediate: true, | |
| 80 | } | |
| 81 | ); | |
| bcab4b | 82 | const { createMessage } = useMessage(); |
| b25ceb | 83 | if (import.meta.env.DEV) { |
| 962f90 | 84 | createMessage.info(t('sys.errorLog.enableMessage')); |
| bcab4b | 85 | } |
| 710158 | 86 | // 查看详情 |
| 215d8b | 87 | function handleDetail(row: ErrorLogInfo) { |
| 581007 | 88 | rowInfo.value = row; |
| 710158 | 89 | openModal(true); |
| V | 90 | } |
| 91 | ||
| 92 | function fireVueError() { | |
| 93 | throw new Error('fire vue error!'); | |
| 94 | } | |
| 95 | ||
| 96 | function fireResourceError() { | |
| 581007 | 97 | imgList.value.push(`${new Date().getTime()}.png`); |
| 710158 | 98 | } |
| V | 99 | |
| 100 | async function fireAjaxError() { | |
| 101 | await fireErrorApi(); | |
| 102 | } | |
| 103 | ||
| 104 | return { | |
| 105 | register, | |
| 106 | registerModal, | |
| 107 | handleDetail, | |
| 108 | fireVueError, | |
| 109 | fireResourceError, | |
| 110 | fireAjaxError, | |
| 581007 | 111 | imgList, |
| V | 112 | rowInfo, |
| 737b1b | 113 | t, |
| 710158 | 114 | }; |
| V | 115 | }, |
| 116 | }); | |
| 117 | </script> | |
