ioc-admin-ui/src/views/securityManagement/logMonitor.vue

<template>
  <div class="container">
    <div class="header">
      <el-form label-width="120px" v-model="form">
        <div style="display: flex; padding: 10px">
          <el-form-item label="系统模块名称：">
            <el-select v-model="form.moduleName" placeholder="请选择模块名称">
              <el-option
                v-for="item in moduleNameOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员姓名：">
            <el-input
              v-model="form.nameInput"
              placeholder="请输入人员名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="操作类型：">
            <el-select
              v-model="form.operationType"
              placeholder="请选择操作类型"
            >
              <el-option
                v-for="item in operationTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作状态：">
            <el-select
              v-model="form.operationStatus"
              placeholder="请选择操作状态"
            >
              <el-option
                v-for="item in operationStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围：">
            <el-date-picker
              v-model="form.timeVal"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="button-box">
          <el-button class="reset-btn" @click="resetEvent">重置</el-button>
          <el-button class="search-btn" @click="searchEvent">查询</el-button>
        </div>
      </el-form>
    </div>
    <div class="content">
      <div class="export">
        <el-button class="new_button" @click="exportEvent">导出</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        style="width: 100%"
        height="350"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column label="序号" type="index" width="60">
        </el-table-column>
        <el-table-column prop="systemTemplate" label="系统模块">
        </el-table-column>
        <el-table-column prop="operationType" label="操作类型">
        </el-table-column>
        <el-table-column prop="requestType" label="请求方式"> </el-table-column>
        <el-table-column prop="operationPerson" label="操作人员">
        </el-table-column>
        <el-table-column prop="operationAddress" label="操作地址">
        </el-table-column>
        <el-table-column prop="operationAddress_desc" label="操作地点">
        </el-table-column>
        <el-table-column prop="operationStatus" label="操作状态">
          <template slot-scope="scope">
            <el-tag
              style="width: 60px; height: 30px"
              :type="scope.row.operationStatus == 'true' ? 'success' : 'danger'"
            >
              {{ scope.row.operationStatus == "true" ? "成功" : "失败" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operationTime" label="操作时间" width="180">
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <page class="page" :paginationData="paginationData"></page>
    </div>
  </div>
</template>

<script>
import page from "@/components/pagination/index";
import { getLogList } from "@/api/security/logMonitor";
export default {
  components: { page },
  data() {
    return {
      show: true,
      form: {
        moduleName: "",
        operationType: "",
        nameInput: "",
        operationStatus: "",
        timeVal: "",
      },
      tableData: [],
      operationTypeOptions: [
        {
          value: "",
          label: "不限",
        },
        {
          value: "新增",
          label: "新增",
        },
        {
          value: "查询",
          label: "查询",
        },
        {
          value: "修改",
          label: "修改",
        },
        {
          value: "删除",
          label: "删除",
        },
        {
          value: "批量修改",
          label: "批量修改",
        },
        {
          value: "批量删除",
          label: "批量删除",
        },
        {},
      ],
      operationStatusOptions: [
        {
          value: "",
          label: "不限",
        },
        {
          value: "0",
          label: "成功",
        },
        {
          value: "1",
          label: "失败",
        },
      ],
      moduleNameOptions: [
        {
          value: "",
          label: "不限",
        },
        {
          value: "登入",
          label: "登入",
        },
        {
          value: "用户管理",
          label: "用户管理",
        },
        {
          value: "组织管理",
          label: "组织管理",
        },
        {
          value: "角色管理",
          label: "角色管理",
        },
        {
          value: "消息管理",
          label: "消息管理",
        },
        {
          value: "信息管理",
          label: "信息管理",
        },
        {
          value: "日志管理",
          label: "日志管理",
        },
        {
          value: "数据管理",
          label: "数据管理",
        },
      ],
      multipleSelection: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      currentPageSize: 10,
      currentPage: 1,
      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 30,
        currentChange: (val) => {
          this.getTableData(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.search.filter(val);
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getTableData(1);
    },
    getTableData(page) {
      this.tableData = [];
      getLogList(
        page,
        this.currentPageSize,
        this.form.nameInput,
        this.form.moduleName,
        this.form.operationType,
        this.form.operationStatus
      ).then((res) => {
        if (res.data.code === 0 && res.data.data.length > 0) {
          this.tableData = res.data.data.map((v) => {
            return {
              logID: v.id,
              systemTemplate: v.module,
              operationType: v.operation_type,
              requestType: v.request,
              operationPerson: v.operation_staff,
              operationAddress: v.operation_address,
              operationAddress_desc: "内网IP",
              operationStatus: v.operation_status == "0" ? "true" : "false",
              operationTime: v.operation_time,
            };
          });
        }
      });
    },
    // 切换条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPageSize = val;
      this.getTableData(this.currentPage);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    cancleChecked() {
      this.$refs.multipleTable.clearSelection();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetEvent() {
      this.form.moduleName = "";
      this.form.nameInput = "";
      this.form.operationType = "";
      this.form.operationStatus = "";
      this.searchEvent();
    },
    searchEvent() {
      console.log(this.form);
      this.getTableData(this.currentPage);
    },
    exportEvent() {
      console.log("导出事件");
    },
    batchDelete() {},
    batchActivate() {},
    exportData() {},
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  height: 100%;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  overflow-y: auto;
  //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);

  .header {
    margin: 2%;
    height: 100px;
    width: 96%;
    background-color: #fafafa;
    border-radius: 4px;
    .el-form-item {
      margin-bottom: 0 !important;
      /deep/ .el-form-item__label {
        color: #666666;
        font-weight: 600;
      }
    }
    .button-box {
      width: 100%;
      height: 30px;
      position: relative;
      .reset-btn,
      .search-btn {
        height: 30px;
        width: 80px;
        position: absolute;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .reset-btn {
        right: 130px;
        background-color: #b3b3b3;
      }
      .search-btn {
        right: 20px;
        background-color: #2ea8e6;
      }
    }
  }
  .content {
    width: 95%;
    height: 400px;
    position: absolute;
    margin-left: 2.5%;
    margin-right: 2.5%;
    .export {
      width: 100%;
      height: 30px;
      position: absolute;
      left: 0;
      top: 0;
      .new_button {
        position: absolute;
        padding: 5px;
        width: 80px;
        left: 10px;
        // position: relative;
        // right: 760px;
        background-color: #2ea8e6;
        color: #fff;
      }
    }

    .el-table {
      position: absolute;
      top: 30px;
      left: 0;
      width: 100%;
      height: calc(100% - 30px);
      border: 1px solid #f0f2f2;
      margin-top: 10px;
      font-size: 0.95rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #b2b2b2;
      background: rgba(255, 255, 255, 0.8);

      /deep/th {
        background: #f7fbff;
      }
      /deep/.el-checkbox {
        color: #b2b2b2;
        .el-checkbox__input.is-checked + .el-checkbox__label {
          color: #2ea8e6;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner::after {
          width: 70%;
          height: 70%;
          background: #2ea8e6;
          border-radius: 0;
          transform: rotate(0deg) scaleY(1);
          position: static;
          // border: 1px solid #8DD9FF;
        }

        .el-checkbox__inner {
          border: 1px solid #8dd9ff;
          background: rgba(0, 170, 255, 0);
          display: flex;
          align-items: center;
          justify-content: center;
          position: static;
          &::after {
            transition: 0ms;
          }
        }

        .el-checkbox__label {
          padding-left: 0;
          font-size: 15px;
          position: absolute;
          top: 1px;
          left: 25px;
        }
      }
    }

    .el-select {
      width: 80px;
      margin-right: 20px;
    }
  }

  .bottom {
    position: absolute;
    bottom: 10px;
    left: 50px;
    height: 50px;
    width: 95%;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
  }
}
</style>