wangluohuoyun-htqd/src/views/operationLog/logManagement.vue

// 操作日志
<template>
  <div class="center">
    <div class="center_css">
      <div class="top_css">
        <el-row>
          <el-col :span="14" style="height: 45px">
            <span type="primary" class="batch_text">
              <i class="el-icon-tickets"></i>数据列表</span>
            <el-button type="danger" plain icon="el-icon-delete" size="small" @click="delBtn()">删除</el-button>
            <el-button type="warning" plain icon="el-icon-download" size="small" class="top_btn" @click="exportBtn()">导出
            </el-button>
            <el-date-picker v-model="value1" value-format="yyyy-MM-dd" @change="dateChange" type="daterange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="10" style="height: 45px">
            <div class="screen">
              <el-input class="find" placeholder="可按系统模块，操作人员进行筛选" @keyup.enter.native="find" v-model="searchkeyWord"
                clearable @change="find"></el-input>
              <el-button class="search" @click="find"><img width="16" height="16" style="margin-left: -8px"
                  src="../../../public/img/sousuo.png" /></el-button><span
                class="count_css">共{{ deptBudgetTotal }}条</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border
        highlight-current-row @row-click="handleRowClick" @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column type="selection" width="55" :selectable="selectInit">
        </el-table-column>
        <el-table-column type="index" label="序号" width="50">
          <template scope="scope">
            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
            <span v-else>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="系统模块"></el-table-column>
        <el-table-column prop="requestMethod" label="请求方式"></el-table-column>
        <el-table-column prop="operator" label="操作人员" sortable></el-table-column>
        <el-table-column prop="ip" label="操作地址"></el-table-column>
        <el-table-column prop="status" label="操作状态"></el-table-column>
        <el-table-column prop="updateDate" label="操作日期" sortable></el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <span @click="look(scope.row)" style="color: #40b6ff;cursor:pointer"><i class="el-icon-view"
                style="margin: 0 6px"></i>详情</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      style="text-align: center; margin-top: 10px" :page-size="deptCircularPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
    </el-pagination>
    <el-dialog title="导出日志" :visible.sync="logVisible" width="400px" :before-close="handleClose">
      <el-form ref="form" label-width="100px">
        <el-form-item label="起始日期">
          <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="请选择起始日期" v-model="formInfo.startDate">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截止日期">
          <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="请选择截止日期" v-model="formInfo.endDate">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="logVisible = false">取 消</el-button>
        <el-button type="primary" @click="exportSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="日志详情" :visible.sync="detailsVisible" width="40%" :before-close="detailsClose">
      <el-form ref="form" label-width="100px">
        <el-form-item label="日志类型">
          <span>{{detailsInfo.title}}</span>
        </el-form-item>
        <el-form-item label="请求方式">
          <span>{{detailsInfo.requestMethod}}</span>
        </el-form-item>
        <el-form-item label="后台地址">
          {{detailsInfo.url}}
        </el-form-item>
        <el-form-item label="请求地址">
          <span>{{detailsInfo.ip}}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailsVisible = false">取 消</el-button>
        <el-button type="primary" @click="detailsVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-image-viewer v-if="imgsVisible" :on-close="closeImgViewer" :url-list="srcList" style="z-index: 9999" />
  </div>
</template>
<script>
  import {
    logList,
    delInfo,
    exportInfo
  } from "@/api/operationLog";
  export default {
    components: {
      "el-image-viewer": () =>
        import("element-ui/packages/image/src/image-viewer"),
    },
    data() {
      return {
        tableData: [],
        //筛选
        searchkeyWord: "",
        //分页
        currentPage: 1,
        pageSize: 10,
        deptBudgetTotal: 0,
        deptCircularPage: {},
        search: "",
        //图片预览
        srcList: [],
        imgsVisible: false,
        //筛选时间
        startDate: "",
        endDate: "",
        value1: [],
        //批量
        musterList: [],
        //导出
        logVisible: false,
        formInfo: {},
        //详情
        detailsVisible: false,
        detailsInfo: {}
      };
    },
    mounted() {
      let date = new Date();
      let date1 = new Date().setTime(date.getTime() - 24 * 60 * 60 * 1000); //一天前的时间蹉
      date1 = new Date(parseInt(date1))
        .toLocaleString()
        .split(" ")[0]
        .replaceAll("/", "-");
      console.log(date1);

      this.startDate =
        date1.split("-")[0] +
        "-" +
        (date1.split("-")[1] < 10 ?
          "0" + date1.split("-")[1] :
          date1.split("-")[1]) +
        "-" +
        (date1.split("-")[2] < 10 ?
          "0" + date1.split("-")[2] :
          date1.split("-")[2]);
      this.endDate =
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1 < 10 ?
          "0" + (date.getMonth() + 1) :
          date.getMonth()) +
        "-" +
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()); //當前時間
      this.value1 = [this.startDate, this.endDate];
      this.getList();
    },
    methods: {
      look(val) { //详情
        this.detailsInfo = val
        this.detailsVisible = true

      },
      handleClose() {
        this.logVisible = false;
      },
      detailsClose() {
        this.detailsVisible = false
      },
      async exportSubmit() {
        exportInfo({
          startDate: this.formInfo.startDate,
          endDate: this.formInfo.endDate,
        }).then((response) => {
          let blob = response.data;
          let a = document.createElement("a");
          //由于后台返回文件名称是通过response返回的
          //因此需要从response headers中content-disposition响应头中获取文件名称fileName，如上图所示
          // let headers = response.headers;
          // let fileName = headers["content-disposition"];
          // fileName = fileName.split('=')[1]
          //download是a标签的一个属性，可以自定义文件名称
          a.download = "日志记录.xlsx";
          let binaryData = [];
          binaryData.push(blob);
          // a.href = URL.createObjectURL(blob);
         a.href = window.URL.createObjectURL(new Blob(binaryData));
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        });
        // const {
        //   data
        // } = await exportInfo({
        //   startDate: this.formInfo.startDate,
        //   endDate: this.formInfo.endDate,
        // }, {}, {
        //   responseType: "blob",
        // }).toPromise();
        // debugger
        // console.log(data)
        //     downloadFile({
        //     res: data,
        //     fileName: `导出日志记录`,
        //     type: "xls",
        //     });
      },
      delBtn() {
        if (this.musterList.length == 0) {
          this.$message.error("请勾选操作的条目！");
          return;
        }
        this.$confirm("确定删除信息？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          delInfo({
            hyOperLogList: this.musterList
          }).then((response) => {
            if (response.code == 200) {
              this.$notify({
                title: "成功",
                message: "删除成功！",
                type: "success",
              });
              this.getList();
            }
          });
        });
      },
      exportBtn() {
        this.logVisible = true;
      },
      dateChange(e) {
        this.startDate = e[0];
        this.endDate = e[1];
        this.getList();
      },
      closeImgViewer() {
        this.srcList = [];
        this.imgsVisible = false;
      },
      enlarge(url) {
        this.imgsVisible = true;
        this.srcList.push(url);
      },
      getList() {
        this.listLoading = true;
        let _obj = {};
        _obj.currentPage = this.currentPage;
        _obj.pageSize = this.pageSize;
        _obj.searchKeyWord = this.searchkeyWord;
        _obj.startDate = this.startDate;
        _obj.endDate = this.endDate;
        logList(_obj)
          .then((response) => {
            this.tableData = response.data.records;
            for (let i = 0; i < this.tableData.length; i++) {
              this.tableData[i].iconShow = true;
            }
            this.deptBudgetTotal = response.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.listLoading = false;
          });
      },

      searchBtn(num) {
        this.search = num;
        this.getList();
      },
      find() {
        this.getList();
      },
      selectInit() {
        return true;
      },
      handleRowClick(row) {
        return true;
      },
      handleSelectionChange(val) {
        this.musterList = val;
        console.log(this.musterList);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.getList();
      },
    },
  };
</script>
<style lang="scss" scoped>
  .center {
    padding: 10px 20px;
    background: #f5f6f7;
    height: calc(100vh - 5vh);

    .top_css {
      min-width: 1020px;
      padding: 10px;

      .batch_text {
        font-size: 22px;
        margin-right: 10px;
      }

      .top_btn {
        margin-right: 10px;
      }
    }

    .ask_css {
      position: absolute;
      margin: 3px 0 0 10px;
    }

    .center_css {
      background: #ffffff;
      border-radius: 1px;
      margin-top: 10px;
      padding-bottom: 10px;
    }

    .screen {
      // float: right;
      display: flex;

      .search {
        width: 40px;
        height: 40px;
        background: #2f53eb;
        border-radius: 0px 2px 2px 0px;
        border: 1px solid #dcdfe6;
        margin-left: -1px;
      }

      .count_css {
        width: 80px;
        text-align: center;
        line-height: 40px;
        color: #666666;
        min-width: 80px;
      }
    }

    .el-button {
      padding: 10px 20px !important;
    }

    .center_css {

      ::v-deep .el-table th,
      ::v-deep .el-table td {
        text-align: center;
      }

      .fujian {
        font-size: 24px;
        color: #409eff;
      }

      .warning {
        font-size: 14px;
        color: #ed1d1d;
      }
    }
  }

  ::v-deep .el-table--border .el-table__header th {
    background: #f7f8f9;
  }

  .btn_css {
    color: #409eff;
    cursor: pointer;
  }

  .btn_css1 {
    margin-left: -20px;
  }
</style>