|
|
@@ -1,155 +1,177 @@
|
|
|
<template>
|
|
|
<div class="p-4">
|
|
|
- <template v-for="src in imgList" :key="src">
|
|
|
- <img :src="src" v-show="false" />
|
|
|
- </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 #action="{ record }">
|
|
|
- <TableAction
|
|
|
- :actions="[
|
|
|
- { label: t('sys.errorLog.tableActionDesc'), onClick: handleDetail.bind(null, record) },
|
|
|
- ]"
|
|
|
- />
|
|
|
- </template>
|
|
|
+ <BasicTable @register="register">
|
|
|
</BasicTable>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts" setup>
|
|
|
+<script lang="ts">
|
|
|
+import { BasicColumn } from '/@/components/Table/index';
|
|
|
import type { ErrorLogInfo } from '/#/store';
|
|
|
-import { watch, ref, nextTick } from 'vue';
|
|
|
-import DetailModal from './DetailModal.vue';
|
|
|
+import { watch, ref, nextTick, defineComponent } from 'vue';
|
|
|
import { FormProps } from '/@/components/Table';
|
|
|
import { BasicTable, useTable, TableAction } from '/@/components/Table/index';
|
|
|
-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';
|
|
|
+import { Tag } from 'ant-design-vue';
|
|
|
+export default defineComponent({
|
|
|
+ components: {
|
|
|
+ BasicTable,
|
|
|
+ TableAction,
|
|
|
+ Tag,
|
|
|
+ },
|
|
|
+ setup() {
|
|
|
+ const rowInfo = ref<ErrorLogInfo>();
|
|
|
+ const imgList = ref<string[]>([]);
|
|
|
|
|
|
-const rowInfo = ref<ErrorLogInfo>();
|
|
|
-const imgList = ref<string[]>([]);
|
|
|
-
|
|
|
-const { t } = useI18n();
|
|
|
-const errorLogStore = useErrorLogStore();
|
|
|
-const searchForm: Partial<FormProps> = {
|
|
|
- labelWidth: 100,
|
|
|
- schemas: [
|
|
|
- {
|
|
|
- field: 'nickName',
|
|
|
- label: '姓名',
|
|
|
- component: 'Input',
|
|
|
- componentProps: {
|
|
|
- maxLength: 100,
|
|
|
+ const { t } = useI18n();
|
|
|
+ const errorLogStore = useErrorLogStore();
|
|
|
+ const columns: BasicColumn[] = [
|
|
|
+ {
|
|
|
+ dataIndex: 'nickName',
|
|
|
+ title: '姓名',
|
|
|
+ width: 100,
|
|
|
},
|
|
|
- colProps: {
|
|
|
- xl: 5,
|
|
|
- xxl: 5,
|
|
|
+ {
|
|
|
+ dataIndex: 'userName',
|
|
|
+ title: '账号',
|
|
|
+ width: 100,
|
|
|
},
|
|
|
- },
|
|
|
- {
|
|
|
- field: 'userName',
|
|
|
- label: '账号',
|
|
|
- component: 'Input',
|
|
|
- componentProps: {
|
|
|
- maxLength: 100,
|
|
|
+ {
|
|
|
+ dataIndex: 'uri',
|
|
|
+ title: '请求URL',
|
|
|
+ width: 280,
|
|
|
},
|
|
|
- colProps: {
|
|
|
- xl: 5,
|
|
|
- xxl: 5,
|
|
|
+ {
|
|
|
+ dataIndex: 'method',
|
|
|
+ title: '请求方式',
|
|
|
+ width: 80,
|
|
|
+ // customRender: ({record}) => {
|
|
|
+ // return <Tag color={'blue'}>{record.method}</Tag>;
|
|
|
+ // },
|
|
|
},
|
|
|
- },
|
|
|
- {
|
|
|
- field: 'time',
|
|
|
- label: '操作时间',
|
|
|
- component: 'RangePicker',
|
|
|
- componentProps: {
|
|
|
- maxLength: 100,
|
|
|
- valueFormat: 'YYYY-MM-DD',
|
|
|
- format: 'YYYY-MM-DD',
|
|
|
+ {
|
|
|
+ dataIndex: 'params',
|
|
|
+ title: '请求参数',
|
|
|
+ width: 200,
|
|
|
},
|
|
|
- colProps: {
|
|
|
- xl: 7,
|
|
|
- xxl: 7,
|
|
|
+ {
|
|
|
+ dataIndex: 'ip',
|
|
|
+ title: 'IP地址',
|
|
|
+ width: 100,
|
|
|
},
|
|
|
- },
|
|
|
- ],
|
|
|
-};
|
|
|
-const [register, { setTableData }] = useTable({
|
|
|
- api: fireErrorApi,
|
|
|
- title: t('sys.errorLog.tableTitle'),
|
|
|
- showIndexColumn: false,
|
|
|
- showTableSetting: true,
|
|
|
- useSearchForm: true,
|
|
|
- columns: getColumns(),
|
|
|
- formConfig: searchForm,
|
|
|
- fetchSetting: {
|
|
|
- pageField: 'pageNum',
|
|
|
- sizeField: 'pageSize',
|
|
|
- listField: 'list',
|
|
|
- totalField: 'total',
|
|
|
- },
|
|
|
- beforeFetch:(T)=>{
|
|
|
- if(T.time){
|
|
|
- T.startTime = T.time[0]
|
|
|
- T.endTime = T.time[1]
|
|
|
- }
|
|
|
- return T
|
|
|
- },
|
|
|
- canResize: true,
|
|
|
- // actionColumn: {
|
|
|
- // width: 80,
|
|
|
- // title: 'Action',
|
|
|
- // dataIndex: 'action',
|
|
|
- // slots: { customRender: 'action' },
|
|
|
- // },
|
|
|
-});
|
|
|
-const [registerModal, { openModal }] = useModal();
|
|
|
-
|
|
|
-watch(
|
|
|
- () => errorLogStore.getErrorLogInfoList,
|
|
|
- (list) => {
|
|
|
- nextTick(() => {
|
|
|
- setTableData(cloneDeep(list));
|
|
|
+ {
|
|
|
+ dataIndex: 'browser',
|
|
|
+ title: '浏览器类型',
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dataIndex: 'createTime',
|
|
|
+ title: '操作时间',
|
|
|
+ width: 160,
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // dataIndex: 'message',
|
|
|
+ // title: t('sys.errorLog.tableColumnMsg'),
|
|
|
+ // width: 300,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // dataIndex: 'stack',
|
|
|
+ // title: t('sys.errorLog.tableColumnStackMsg'),
|
|
|
+ // },
|
|
|
+ ];
|
|
|
+ const searchForm: Partial<FormProps> = {
|
|
|
+ labelWidth: 100,
|
|
|
+ schemas: [
|
|
|
+ {
|
|
|
+ field: 'nickName',
|
|
|
+ label: '姓名',
|
|
|
+ component: 'Input',
|
|
|
+ componentProps: {
|
|
|
+ maxLength: 100,
|
|
|
+ },
|
|
|
+ colProps: {
|
|
|
+ xl: 5,
|
|
|
+ xxl: 5,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'userName',
|
|
|
+ label: '账号',
|
|
|
+ component: 'Input',
|
|
|
+ componentProps: {
|
|
|
+ maxLength: 100,
|
|
|
+ },
|
|
|
+ colProps: {
|
|
|
+ xl: 5,
|
|
|
+ xxl: 5,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ field: 'time',
|
|
|
+ label: '操作时间',
|
|
|
+ component: 'RangePicker',
|
|
|
+ componentProps: {
|
|
|
+ maxLength: 100,
|
|
|
+ valueFormat: 'YYYY-MM-DD',
|
|
|
+ format: 'YYYY-MM-DD',
|
|
|
+ },
|
|
|
+ colProps: {
|
|
|
+ xl: 7,
|
|
|
+ xxl: 7,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ const [register] = useTable({
|
|
|
+ api: fireErrorApi,
|
|
|
+ title: t('sys.errorLog.tableTitle'),
|
|
|
+ columns: columns,
|
|
|
+ useSearchForm: true,
|
|
|
+ formConfig: searchForm,
|
|
|
+ showIndexColumn: false,
|
|
|
+ showTableSetting: true,
|
|
|
+ rowKey: 'id',
|
|
|
+ fetchSetting: {
|
|
|
+ pageField: 'pageNum',
|
|
|
+ sizeField: 'pageSize',
|
|
|
+ listField: 'list',
|
|
|
+ totalField: 'total',
|
|
|
+ },
|
|
|
+ beforeFetch:(T)=>{
|
|
|
+ if(T.time){
|
|
|
+ T.startTime = T.time[0]
|
|
|
+ T.endTime = T.time[1]
|
|
|
+ }
|
|
|
+ return T
|
|
|
+ },
|
|
|
+ canResize: true,
|
|
|
});
|
|
|
- },
|
|
|
- {
|
|
|
- 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();
|
|
|
-}
|
|
|
+ watch(
|
|
|
+ () => errorLogStore.getErrorLogInfoList,
|
|
|
+ (list) => {
|
|
|
+ nextTick(() => {
|
|
|
+ setTableData(cloneDeep(list));
|
|
|
+ });
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ );
|
|
|
+ // if (import.meta.env.DEV) {
|
|
|
+ // createMessage.info(t('sys.errorLog.enableMessage'));
|
|
|
+ // }
|
|
|
+ // 查看详情
|
|
|
+ return {
|
|
|
+ register,
|
|
|
+ rowInfo,
|
|
|
+ // registerModal,
|
|
|
+ imgList,
|
|
|
+ // openModal,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|
