MingGao_vue/minggao/src/page/systemmanger/dayRecord.vue

<!--  -->
<template>
  <div class="dayRecord_box">
    <el-card :style="'height:' + fullHeight + 'px'">
      <!-- 筛选 -->
      <el-row>
        <el-col>
          <!-- 搜索 -->
          <div class="search_box">
            <el-input
              size="mini"
              placeholder="请输入操作人员"
              v-model.trim="input"
              @change="searchData"
              clearable
            >
            </el-input>
            <el-input
              size="mini"
              placeholder="请输入操作角色"
              v-model.trim="input1"
              @change="searchData"
              clearable
            >
            </el-input>
            <el-date-picker
              size="mini"
              v-model="value1"
              @change="searchData"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              :editable="false"
            >
            </el-date-picker>
            <div class="btn_box">
              <el-button type="primary" size="mini" @click="searchData"
                >搜索</el-button
              >
              <el-button type="primary" size="mini" @click="reset">重置</el-button>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="tableData" v-loading="loading" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" width="180"> </el-table-column>
        <el-table-column prop="create_time" label="操作时间" width="200">
        </el-table-column>
        <el-table-column prop="user_name" label="操作人员" width="280">
        </el-table-column>
        <el-table-column prop="role_name" label="操作账号"></el-table-column>
        <el-table-column prop="ip" label="IP"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a class="reset" href="javascript:;" @click="detailsFunc(scope.row)"
              >详情</a
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        style="margin: 60px 0 0 0"
        :page-size="10"
        @current-change="newPage"
        :current-page="page"
        v-if="tableData.length > 0"
        background
        layout="prev, pager, next, jumper"
        :total="tableSum"
      >
      </el-pagination>
    </el-card>

    <!-- 详情弹框 -->
    <el-dialog title="动作详情" :visible.sync="dialogVisible" width="30%">
      <div>
        <span>{{ objData.action }}：</span>
        <span>{{ objData.op_details }}</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight - 116, //
      input: "",
      input1: "",
      value1: "",
      startTime: "",
      endTime: "",

      // 表格
      tableData: [],
      loading: false, // 加载

      // 分页
      page: 1,
      tableSum: 0,

      // 弹框
      dialogVisible: false,
      objData: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 下一页
    newPage(page) {
      this.page = page;
    },

    // 详情
    detailsFunc(data) {
      this.objData = data;
      this.dialogVisible = true;
    },

    // 表格列表
    tableList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=log.szmg_log.operation_log_list",
        data: this.qs.stringify({
          page: this.page,
          page_item: "10",
          user_name: this.input, // 用户名
          role_name: this.input1, // 角色名称
          start_time: this.startTime, // 开始时间
          end_time: this.endTime, // 结束时间
        }),
      })
        .then((res) => {
          if (res.data.data.page_item !== 0) {
            this.tableData = res.data.data.page_list;
            this.tableSum = res.data.data.page_item;
          }
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        });
    },

    // 搜索
    searchData() {
      // this.startTime = this.formatTime(this.value1[0], "yyyy-MM-dd hh:mm:ss")
      if (this.value1) {
        this.startTime = this.formatTime(this.value1[0], "yyyy-MM-dd");
        this.endTime = this.formatTime(this.value1[1], "yyyy-MM-dd");
      } else {
        this.startTime = "";
        this.endTime = "";
      }
      // console.log(this.startTime)
      // console.log(this.endTime)
      this.tableList();
    },

    // 重置
    reset() {
      this.value1 = ''
      this.input = ''
      this.input1 = ''
      this.startTime = ''
      this.endTime = ''
      this.tableList()
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.loading = true
    this.tableList();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.dayRecord_box {
  // 搜索
  .search_box {
    display: flex;
    /deep/.el-input {
      // width: 200px;
      width: 15%;
      margin: 0 15px 0 0;
    }
    .btn_box {
      margin: 0 0 0 15px;
    }

    /deep/.el-range-editor--mini.el-input__inner {
      // width: 330px;
      width: 20%;
    }
  }

  a {
    text-decoration: none;
  }
  .reset {
    color: #1890ff;
  }
}
/deep/.el-date-editor{
  cursor: pointer;
  .el-range-input{
    cursor: pointer;
  }
}
</style>