FileManage/web/src/views/system/record/index.vue

<script lang="ts">
export default {
  name: "record",
};
</script>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getLogList, exportExcel } from "@/api/record";
import { downloadFile } from '@/utils/index';
import Page from '@/components/Pagination/page.vue'
// import { VueDevToolsTimelineColors } from "@intlify/vue-devtools";

//定义表格数据
const tableData: any = ref([]);

// 查询数据
const queryParams = ref({
  current: 1,
  size: 20,
  opttype: ''
});
// 日期查询
const operationTime: any = ref();
// 分页-总页数
const total = ref(0);
// 日志类型
const type: any = ref([
  { name: '登录(login)', value: '00' },
  { name: '添加(insert)', value: '01' },
  { name: '修改(update)', value: '02' },
  { name: '删除(delete)', value: '03' },
  { name: '查询(select)', value: '04' },
  { name: '其他(other)', value: '05' }
]);
// 表格加载
const loading = ref(false)
//日志详情
const LogDetails = ref(false)
// 初始化加载
function init() {
  let params = {
    optType: queryParams.value.opttype,
    current: queryParams.value.current,
    size: queryParams.value.size,
    startDate: '',
    endDate: ''
  };
  if (operationTime.value != null) {
    params.startDate = operationTime.value[0];
    params.endDate = operationTime.value[1];
  }
  loading.value = true;
  getLogList(params).then((result: any) => {
    tableData.value = result.data.list;
    total.value = result.data.total;
    queryParams.value.size = result.data.size
    pcode.value = result.data.size
    queryParams.value.current = result.data.current
    loading.value = false;
  }).catch((err: any) => {
    loading.value = false;
  });
}

function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month =
      date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}

// 导出
function leadingOut() {
  let params = {
    optType: queryParams.value.opttype,
    current: queryParams.value.current,
    size: queryParams.value.size,
    startDate: '',
    endDate: ''
  };
  if (operationTime.value != null) {
    params.startDate = operationTime.value[0];
    params.endDate = operationTime.value[1];
  }
  exportExcel(params).then((response: any) => {
    downloadFile(response, '日志', 'xlsx')
  });
}
//分页
const pcode = ref(20)

onMounted(() => {
  init();
});
//日志详情
const Logdata:any = ref([])
function Loglist(row:any){
  console.log(row)
  Logdata.value.push(row)
  if(Logdata.value.length == 2){
    Logdata.value.shift()
  } 
  
  console.log(Logdata.value)
  LogDetails.value = true
}
function handleClose(){
  LogDetails.value = false
}


</script>

<template>
  <div>
    <div class="record-box">
      <div
        style="margin-bottom: 10px;display: flex; display: -webkit-flex;  align-items: center; -webkit-align-items: center;">
        <el-select v-model="queryParams.opttype" placeholder="日志类型" clearable @change="init"
          style="width: 220px;margin-right:10px;">
          <el-option v-for="item in type" :key="item.value" :label="item.name" :value="item.name" />
        </el-select>
        <div style="width: 350px;">
          <el-date-picker v-model="operationTime" value-format="YYYY-MM-DD" start-placeholder="操作开始时间"
            end-placeholder="操作结束时间" type="daterange"  @change="init" />
        </div>
        <el-button type="primary" style="margin-left: 10px" @click="init">搜索</el-button>
        <div
          style="width: 100%; display:flex; display: -webkit-flex; justify-content: flex-end; -webkit-justify-content: flex-end;">
          <el-button type="primary" @click="leadingOut"><img src="@/assets/MenuIcon/u455.png" alt=""
              style="margin-right: 5px;">导出</el-button>
        </div>

      </div>
      <el-table v-loading="loading" :data="tableData"
        style="width: 100%; height: calc(100vh - 266px);margin-bottom: 20px;" border
        :header-cell-style="{ background: 'rgb(250 250 250)', color: '#383838', height: '50px' }">
        <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
        <el-table-column prop="usercode" label="操作账户" width="100"></el-table-column>
        <el-table-column prop="username" label="用户姓名" width="180"></el-table-column>
        <el-table-column prop="requestip" label="IP地址" width="140"></el-table-column>
        <el-table-column prop="browser" label="浏览器" width="130"></el-table-column>
        <el-table-column prop="opttype" label="日志类型" width="130" align="center"></el-table-column>
        <el-table-column prop="module" label="模块名称" width="170"></el-table-column>
        <el-table-column prop="description" label="日志描述" min-width="100">
          <template #default="scope">
            <div style="display: flex;display: -webkit-flex;justify-content: space-between; align-items: center;-webkit-justify-content: space-between; -webkit-align-items: center;">
              <div>{{ scope.row.description }}</div>
              <div><img src="@/assets/MenuIcon/xqing.png" alt="" style="cursor: pointer;" title="详情" @click="Loglist(scope.row)" ></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="logtime" label="操作日期" width="196">
          <template #default="scope">
            {{ dateFormat(scope.row.logtime) }}
          </template>
        </el-table-column>
      </el-table>
      <Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current" @pagination="init()">
      </Page>
    </div>
    <el-dialog title="日志详情" v-model="LogDetails" width="90%" :before-close="handleClose" top="30px" draggable destroy-on-close>
      <el-table v-loading="loading" :data="Logdata"
        style="width: 100%; height: calc(50vh - 266px);margin-bottom: 20px;" border
        :header-cell-style="{ background: 'rgb(250 250 250)', color: '#383838', height: '50px' }">
        <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
        <el-table-column prop="username" label="用户姓名" width="110"></el-table-column>
        <el-table-column prop="module" label="模块名称" width="120"></el-table-column>
        <el-table-column prop="description" label="日志描述" width="240"></el-table-column>
        <el-table-column prop="method" label="方法"></el-table-column>
        <el-table-column prop="params" label="参数"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped >
.record-box {
  padding: 20px;
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 3px;
  box-sizing: border-box;
}

:deep(.el-table__cell) {
  color: #383838;
}

/* :deep(.el-select .el-input) {
    width: 80px !important;
  } */
</style>