日志管理详情页重构

 Source/UBCS-WEB/src/api/logs.js

@@ -94,4 +94,14 @@
      ...params,
    }
  })
}
}

export const detailByOid = (params) => {
  return request({
    url: '/api/ubcs-log/operateLog/detailByOid',
    method: 'get',
    params: {
      ...params,
    }
  })
}

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

@@ -1,24 +1,24 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               ref="crud"
    <avue-crud ref="crud"
               v-model="form"
               :permission="permissionList"
               :page.sync="page"
               :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 :text="scope.row.description" :height="50">
        <small slot="more">...</small>
      </avue-text-ellipsis>
    </template>
      <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">
@@ -30,186 +30,224 @@
                 <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"
              <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 } from "@/api/logs";
  import {mapGetters} from "vuex";
import {listLogOperate,detailByOid} from "@/api/logs";
import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        searchSelect: "userName",
        searchValue: '',
        searchData: [
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",
            align: "left",
            display: false,
            width: 200,
            required: true
          }, {
            search: true,
            width: '120'
          },
          {
            label: "姓名",
            prop: "realName",
            align: "left",
            display: false
          }
        ],
        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: true,
          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",
            search: true,
            width: '120'
          },
          {
            label: "用户ip",
            prop: "ip",
          },
          {
            label: "模块",
            prop: "model",

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

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

            },
            {
              label: "描述",
              prop: "description",
              span: 24,
              minRows: 20,
              type: "textarea",
              hide:true,
              slot: true,
            },
          ]
        },
        data: []
          },
          {
            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)
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          viewBtn: this.vaildData(this.permission.log_usual.log_usual_view, false)
        };
      },
    },
    created() {
      this.getRouteParam()
    },
    methods: {
      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();
          });
  },
  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)
        }
        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;
      })
    },
    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>