sl-sfy-safety/src/views/system/log/components/SystemLog.vue

<!--
 * @since: 2025-02-07
 * System.vue
-->
<template>
  <div class="login-log">
    <el-card class="mb-3 proCard">
      <el-space >
        <el-form ref="searchFormRef" :inline="true" :model="requestParams.queryParam" class="form-inline">
          <el-form-item label="事件类型" prop="eventType">
            <el-select 
              v-model="requestParams.queryParam.eventType" 
              placeholder="请选择事件类型" 
              clearable>
                <el-option 
                :label="item.label" 
                :value="item.value" 
                v-for="item in eventList" 
                :key="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="登录时间" prop="date">
            <el-date-picker 
              v-model="requestParams.queryParam.date" 
              type="daterange" 
              placeholder="请选择登录时间" 
              range-separator="～"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :disabled-date="disabledDate"
              clearable 
              format="YYYY/MM/DD"
              value-format="YYYY/MM/DD"
              />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="querySystemLogPage">查询</el-button>
            <el-button :icon="Refresh" @click="handleResetForm(searchFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </el-space>
    </el-card>

    <el-card>
      <template #header>
        <el-button type="primary" @click="handleExport()">导出数据</el-button>
      </template>
      <el-table height="calc(100vh - 450px)" :data="systemLogList" v-loading="loading">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column label="事件类型" prop="realName" >
          <template #default="{ row }">
           <span>{{ eventTypeArr[row.eventType] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="createdAt" />
        <el-table-column label="事件" width="200" prop="eventContent" />
      </el-table>

      <section class="mt-4 flex justify-end">
        <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[10, 30, 50]" :total="total"
          v-model:page-size="requestParams.pageSize" v-model:current-page="requestParams.pageNumber"
          @change="querySystemLogPage" />
      </section>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { Search, Refresh, Edit } from '@element-plus/icons-vue';
import useSystemQuery from '../hooks/useSystemQuery';
import { ElMessage, ElMessageBox } from 'element-plus';
import { exportSystemLog } from '@/api/system/log';
import { downloadByData } from '@/utils/file/download';
import { eventList, eventTypeArr } from '@/types/log/constants.ts';
import type { FormInstance } from 'element-plus'

const { requestParams, total, systemLogList, loading, resetRequestParams, querySystemLogPage } = useSystemQuery();

onMounted(async () => {
  querySystemLogPage();
});

/* 导出数据 */
const handleExport = () => {
  ElMessageBox.confirm('确定导出所查询数据？', '导出', {
      confirmButtonText: '确定',
      showCancelButton: true,
      type: 'warning',
    })
    .then(() => {
      exportSystemLog(requestParams.queryParam).then(async (responnse) => {
        if (!responnse) {
          throw new Error('下载文件失败');
        }
        downloadByData(responnse, '系统日志.xlsx');
        ElMessage.success('下载文件成功');
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消导出',
      });
    });
}

/* 重置 */
const searchFormRef = ref<FormInstance>()
const handleResetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  resetRequestParams();
  formEl.resetFields();
  querySystemLogPage();
}

/* 设置今天之后的时间不可选 */
const disabledDate = (time) => {
  return time.getTime() > Date.now();
}
</script>

<style scoped lang="scss">
.form-inline .el-input {
  --el-input-width: 160px;
}

.form-inline .el-select {
  --el-select-width: 160px;
}
</style>