mky-vent-base/src/views/monitor/log/index.vue

<template>
  <a-tabs v-modal="searchInfo.logType" @change="tabChange" size="small">
    <a-tab-pane tab="登录日志" key="1" />
    <a-tab-pane tab="操作日志" key="2" />
    <a-tab-pane tab="浏览日志" key="3" />
    <a-tab-pane tab="登录统计" key="4" />
  </a-tabs>
  <BasicTable :key="searchInfo.logType" @register="registerTable" :api="logApi" :searchInfo="searchInfo"
    :scroll="{ y: 660, x: true }">
    <template #expandedRowRender="{ record }">
      <div v-if="searchInfo.logType == 2">
        <div style="margin-bottom: 5px">
          <a-badge status="success" style="vertical-align: middle" />
          <span style="vertical-align: middle">请求方法:{{ record.method }}</span>
        </div>
        <div>
          <a-badge status="processing" style="vertical-align: middle" />
          <span style="vertical-align: middle">请求参数:{{ record.requestParam }}</span>
        </div>
      </div>
    </template>
  </BasicTable>
</template>
<script lang="ts" name="monitor-log" setup>
import { ref } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { getLogList, getUserLoginStats } from './log.api';
import { columns, searchFormSchema, searchFormSchema1, operationLogColumn, browserColumn, loginTjColumn } from './log.data';
import { useListPage } from '/@/hooks/system/useListPage';
const checkedKeys = ref<Array<string | number>>([]);

const logColumns = ref<any>(columns);
const logApi = ref<any>(getLogList)
const logSchemas = ref<any[]>(searchFormSchema)
const paramTime = ref<any[]>(['createTime_begin', 'createTime_end'])
const searchInfo = { logType: '1' };
// 列表页面公共参数、方法
const { prefixCls, tableContext } = useListPage({
  designScope: 'user-list',
  tableProps: {
    title: '',
    columns: logColumns,
    showActionColumn: false,
    rowSelection: {
      columnWidth: 20,
    },
    formConfig: {
      schemas: logSchemas as any,
      fieldMapToTime: paramTime as any,
    },
  },
});

const [registerTable, { reload }] = tableContext;

// 日志类型
function tabChange(key) {
  searchInfo.logType = key;
  //update-begin---author:wangshuai ---date:20220506  for：[VUEN-943]vue3日志管理列表翻译不对------------
  switch (key) {
    case '1':
      logColumns.value = columns;
      logSchemas.value = searchFormSchema
      paramTime.value = [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']]
      logApi.value = getLogList
      break;
    case '2':
      logColumns.value = operationLogColumn;
      logSchemas.value = searchFormSchema
      paramTime.value = [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']]
      logApi.value = getLogList
      break;
    case '3':
      logColumns.value = browserColumn;
      logSchemas.value = searchFormSchema
      paramTime.value = [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']]
      logApi.value = getLogList
      break;
    case '4':
      logColumns.value = loginTjColumn;
      logSchemas.value = searchFormSchema1
      paramTime.value = [['fieldTime', ['dayStart', 'dayEnd'], 'YYYY-MM-DD']]
      logApi.value = getUserLoginStats
      break;
  }
  //update-end---author:wangshuai ---date:20220506  for：[VUEN-943]vue3日志管理列表翻译不对--------------
  reload();
}

/**
 * 选择事件
 */
function onSelectChange(selectedRowKeys: (string | number)[]) {
  checkedKeys.value = selectedRowKeys;
}
</script>
<style lang="less" scoped>
::v-deep .table-form {
  padding: 0 !important;
  margin: 0 !important;
}

::v-deep .zxm-table-title {
  display: none !important;
}

::v-deep .zxm-tabs-nav-wrap {
  padding: 0px 15px !important;
}
</style>