Source/UBCS-WEB/src/views/monitor/log/operateLog.vue

@@ -0,0 +1,254 @@
<template>
  <basic-container>
    <avue-crud ref="crud"
               v-model="form"
               :before-open="beforeOpen"
               :data="data"
               :option="option"
               :page.sync="page"
               :permission="permissionList"
               :table-loading="loading"
               @search-change="searchChange"
               @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="description" slot-scope="scope">
        <avue-text-ellipsis :height="50" :text="scope.row.description">
          <small slot="more">...</small>
        </avue-text-ellipsis>
      </template>
      <template slot="menuLeft">
        <span style="width: 200px;display: inline-block">
                <el-select slot="prepend" v-model="searchSelect" placeholder="请选择" size="small">
                <el-option v-for="item in searchData" :key="item.prop" :label="item.label" :value="item.prop"
                ></el-option>
              </el-select>
            </span>
        <span style="margin-left: 5px">
                 <el-input v-model="searchValue" class="attrSearch" clearable placeholder="请输入内容"
                           prefix-icon="el-icon-search"
                           size="small" type="text"></el-input>
              <el-button icon="el-icon-search" plain size="small" type="primary"
                         @click="searchHandler">&nbsp;搜索</el-button>
              </span>
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button type="text" icon="el-icon-view" size="mini" @click="rowView(scope.row)">查看</el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {listLogOperate,detailByOid} from "@/api/logs";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      searchSelect: "userName",
      searchValue: '',
      searchData: [
        {
          label: "用户名",
          prop: "userName",
          align: "left",
          display: false,
          width: 200,
          required: true
        }, {
          label: "姓名",
          prop: "realName",
          align: "left",
          display: false
        },
        {
          label: "用户ip",
          prop: "ip",
        },
        {
          label: "模块",
          prop: "model",

        },
        {
          label: "时间",
          prop: "time",

        },
        {
          label: "操作结果",
          prop: "operateResult",

        },
        {
          label: "描述",
          prop: "description",
          span: 24,
          minRows: 20,
        },
      ],
      form: {},
      selectionList: [],
      query: {},
      //是否是三员管理员日志
      isAdmin: '',
      // LoginOrLogout:登录日志,grant:授权日志,operate:操作日志
      logType: '',
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        height: 'auto',
        calcHeight: 20,
        columnBtn: false,
        tip: false,
        searchShow: false,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        menuWidth: 120,
        dialogType: 'drawer',
        column: [
          {
            label: "用户名",
            prop: "userName",
            search: true,
            width: '120'
          },
          {
            label: "姓名",
            prop: "realName",
            search: true,
            width: '120'
          },
          {
            label: "用户ip",
            prop: "ip",
          },
          {
            label: "模块",
            prop: "model",

          },
          {
            label: "时间",
            prop: "time",

          },
          {
            label: "操作结果",
            prop: "operateResult",

          },
          {
            label: "描述",
            prop: "description",
            span: 24,
            minRows: 20,
            type: "textarea",
            hide: true,
            slot: true,
          },
        ]
      },
      data: []
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        viewBtn: this.vaildData(this.permission.log_usual.log_usual_view, false)
      };
    },
  },
  created() {
    this.getRouteParam()
  },
  methods: {
    rowView(row){
      this.loading = true;
      detailByOid({oid:row.oid}).then(res =>{
        if(res.data.data){
          this.loading = false
          this.$refs.crud.rowView(res.data.data)
        }
      })
    },
    searchHandler() {

      let params = {
        [this.searchSelect]: this.searchValue
      };
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
    },
    //获取数据
    getRouteParam() {
      const logType = this.$route.query.log_type; // 获取log_type参数的值
      const result = logType.substring(0, logType.indexOf(':')); // 截取从0到@之间的子字符串
      const isAdmin = logType.substring(logType.indexOf(':') + 1, logType.indexOf('@')); // 从@之后截取到末尾的子字符串
      this.logType = result;
      this.isAdmin = isAdmin;
      //console.log(this.logType)
      //console.log(this.isAdmin)
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    underscoreName(key) {
      return key.replace(/([A-Z])/g, "_$1").toLowerCase();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      let conditionMaps = {};
      conditionMaps["conditionMap[is_admin]"] = this.isAdmin;
      conditionMaps["conditionMap[log_type]"] = this.logType.trim();
      if (params) {
        Object.keys(params).forEach((key) => {
          conditionMaps["conditionMap[" + this.underscoreName(key) + "_like]"] = params[key].trim();
        });
      }
      this.loading = true;
      listLogOperate(
        page.currentPage,
        page.pageSize,
        conditionMaps
      ).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    }
  }
};
</script>

<style>
</style>