rax-medical/src/views/logs-manage/logs-manage.vue

<template>
  <div class="table-page custom-table-table">
    <h3 class="main-color" style="font-size: 25px;line-height: 1;padding: 8px 0;">近30天登陆汇总</h3>
    <div style="width: 100%;height: 35%;">
      <LoginChart/>
    </div>
    <div class="search-part" v-show="isSearch">
      <div class="search-cell">
        <span class="label">类型</span>
        <el-select v-model="queryParams.type" placeholder="请选择类型">
          <el-option v-for="item in Object.keys(logType)" :key="item" :label="logType[item]" :value="item"/>
        </el-select>
      </div>
      <div class="search-cell">
        <span class="label">请求时间</span>
        <el-date-picker v-model="queryParams.time" type="datetimerange" range-separator="-" start-placeholder="开始时间"
                        end-placeholder="结束时间"/>
      </div>
      <el-button type="primary" icon="Search" @click="search">查询</el-button>
      <el-button icon="Refresh" @click="resetSearch">重置</el-button>
    </div>
    <div class="button-part" style="justify-content: space-between;">
      <el-button icon="Delete" @click="removeData()">删除</el-button>
      <TableAbility @searchBtn="isSearch = !isSearch" @refreshBtn="init"
                    @downloadBtn="exportData('日志数据', tableData)"></TableAbility>
    </div>
    <div class="table-part">
      <el-table ref="tableRef" v-loading="loading" :data="tableData" height="100%" border show-overflow-tooltip
                @row-click="tableRowClick">
        <el-table-column type="selection" width="55"/>
        <el-table-column type="index" label="#" width="55" align="center"/>
        <el-table-column property="logType" label="类型" width="120" align="center">
          <template #default="scope">{{ logType[scope.row.logType] }}</template>
        </el-table-column>
        <el-table-column property="title" label="标题" width="120" align="center"/>
        <el-table-column property="remoteAddr" label="IP地址" width="120" align="center"/>
        <el-table-column property="method" label="请求方式" width="120" align="center"/>
        <el-table-column label="请求时间" width="220" align="center">
          <template #default="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column property="createBy" label="操作人" width="120" align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
                        <span @click.stop>
                            <el-button link icon="EditPen" @click="viewData(scope.row)">详情</el-button>
                            <el-button link icon="Delete" @click="removeData(scope.row)">删除</el-button>
                        </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-part">
      <CommonPagination :total="total" @paginationChange="paginationChange"/>
    </div>
  </div>
  <el-dialog v-model="isFormDialog" :title="formDialogTitle" width="40%">
    <LogForm ref="logFormRef" :type="formDialogTitle === '详情' ? 'view' : 'edit'" @close="isFormDialog = false"/>
  </el-dialog>
</template>

<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import LoginChart from './chart/login-chart.vue'
import CommonPagination from '@/components/common-pagination.vue'
import LogForm from './form/log-form.vue'
import {exportData, tableRemoveRow} from '@/utils/table-util'
import {dateFormater} from '@/utils/date-util'
import * as logManageApi from '@/api/log-manage'
import {ElMessage} from "element-plus";

const logType: any = {
  "0": '正常',
  "1": '添加',
  "2": '删除',
  "3": '修改',
  "4": '异常'
}
const tableRef = ref()
const logFormRef = ref()
const isSearch = ref(true)
const loading = ref(true)
const isFormDialog = ref(false)
const formDialogTitle = ref('')
const queryParams = ref({} as any)
const tableData = ref([] as any)
let current = 0;
let size = 10;
const total = ref(0);

onMounted(() => {
  init();
})

function init() {
  loading.value = true;
  getList();
  loading.value = false;
}

function getList() {
  logManageApi.getPage(current, size, {
    timeInterval: queryParams.value.timeStr,
    logType: queryParams.value.type
  }).then((res: any) => {
    if (res.code == 0) {
      total.value = res.data.total
      tableData.value = res.data.records
    }
  })
}

function search() {
  queryParams.value.timeStr = [dateFormater("yyyy-MM-dd", queryParams.value.time[0]),
    dateFormater("yyyy-MM-dd", queryParams.value.time[1])]
  init();
}

function resetSearch() {
  queryParams.value = {};
  init();
}

const viewData = (e: any) => {
  isFormDialog.value = true
  formDialogTitle.value = '详情'
  setTimeout(() => {
    logFormRef.value.resetData()
    logFormRef.value.formData = JSON.parse(JSON.stringify(e))
  }, 0)
}
const removeData = (e?: any) => {
  const selectRow = e ? [e] : tableRef.value.getSelectionRows()
  tableRemoveRow({data: selectRow}, (res: boolean) => {
    if (res) {
      const ids: string[] = [];
      selectRow.forEach((row: any) => {
        ids.push(row.id);
      })
      logManageApi.deleteByIds(ids).then((res: any) => {
        if (res.code == 0) {
          ElMessage.success("删除成功");
          init();
        } else {
          ElMessage.error(res.msg ? res.msg : "删除失败");
        }
      })
    }
  })
}
const tableRowClick = (row: any) => {
  tableRef.value.toggleRowSelection(row)
}

const paginationChange = (page: number, s: number) => {
  current = page
  size = s
  getList()
}

</script>

<style lang='scss' scoped>
.table-page.custom-table-table {
  .table-part {
    height: calc(65% - 230px);
  }
}
</style>