index.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <BasicTable @register="registerTable" :searchInfo="searchInfo" :columns="logColumns">
  3. <template #tableTitle>
  4. <a-tabs defaultActiveKey="1" @change="tabChange" size="small">
  5. <a-tab-pane tab="浏览器日志" key="1"></a-tab-pane>
  6. </a-tabs>
  7. </template>
  8. </BasicTable>
  9. </template>
  10. <script lang="ts" name="monitor-log" setup>
  11. import { ref } from 'vue';
  12. import { BasicTable, useTable, TableAction } from '/@/components/Table';
  13. import { getLogList } from './log.api';
  14. import { columns, searchFormSchema } from './log.data';
  15. import { useMessage } from '/@/hooks/web/useMessage';
  16. import { useListPage } from '/@/hooks/system/useListPage';
  17. const { createMessage } = useMessage();
  18. const checkedKeys = ref<Array<string | number>>([]);
  19. const logColumns = ref<any>(columns);
  20. const searchInfo = { logType: '3' };
  21. // 列表页面公共参数、方法
  22. const { prefixCls, tableContext } = useListPage({
  23. designScope: 'user-list',
  24. tableProps: {
  25. title: '日志列表',
  26. api: getLogList,
  27. expandRowByClick: true,
  28. showActionColumn: false,
  29. rowSelection: {
  30. columnWidth: 20,
  31. },
  32. formConfig: {
  33. schemas: searchFormSchema,
  34. fieldMapToTime: [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']],
  35. },
  36. },
  37. });
  38. const [registerTable, { reload }] = tableContext;
  39. // 日志类型
  40. function tabChange(key) {
  41. searchInfo.logType = key;
  42. if (key == '3') {
  43. logColumns.value = columns;
  44. }
  45. reload();
  46. }
  47. /**
  48. * 选择事件
  49. */
  50. function onSelectChange(selectedRowKeys: (string | number)[]) {
  51. checkedKeys.value = selectedRowKeys;
  52. }
  53. </script>
  54. <style lang="less" scoped>
  55. ::v-deep .table-form {
  56. padding: 0 !important;
  57. margin: 0 !important;
  58. }
  59. </style>