<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        size="medium"
        :model="searchForm"
        ref="searchForm"
      >
        <el-form-item :label="'操作名称'" prop="operName">
          <el-input
            v-model="searchForm.operName"
            :placeholder="$t('message.docManage.placeholder')"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item :label="'操作人'" prop="userName">
          <el-input
            v-model="searchForm.userName"
            :placeholder="$t('message.docManage.placeholder')"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item :label="'操作时间'" prop="userName" class="last">
          <el-date-picker
            v-model="daterange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getListData"
            >{{ $t("message.docManage.query") }}
          </el-button>
          <el-button type="warning" plain @click="resetForm">{{
            $t("message.docManage.refresh")
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" style="height: calc(100% - 80px);" :data="tableData">
        <el-table-column
          type="index"
          width="50"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="operLogTime"
          label="操作时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="operDesc"
          label="操作描述"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          prop="operMethod"
          label="操作方法"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="operModul"
          label="功能模块"
          align="center"
        ></el-table-column>
        <!-- <el-table-column
          prop="operRequParam"
          label="请求参数"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="operIp"
          label="操作IP"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="operUri"
          label="请求URI"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="realName"
          label="操作员姓名"
          align="center"
        ></el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 40px;"
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(total)"
        background
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getOperationLogListApi } from "@/assets/js/api/company/project";
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        operName: "",
        startTime: "",
        endTime: "",
        userName: "",
      },
      total: 0,
      pageNo: 1,
      pageSize: 10,
      daterange: [],
    };
  },
  mounted() {
    this.getListData();
  },
  methods: {
    resetForm() {
      this.$refs["searchForm"].resetFields();
      this.daterange = [];
      this.getListData();
    },
    //获取列表数据
    getListData() {
      let data = this.searchForm;
      data.pageNo = this.pageNo;
      data.pageSize = this.pageSize;
      data.sn = this.$store.state.userInfo.sn;
      if (this.daterange) {
        data.startTime = this.daterange[0];
        data.endTime = this.daterange[1];
      } else {
        data.startTime = "";
        data.endTime = "";
      }
      getOperationLogListApi(data).then((res) => {
        this.tableData = res.result.records;
        this.total = res.result.total;
      });
    },
    //查看条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getListData();
    },
    //查看页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getListData();
    },
  },
};
</script>