settle_down_web/src/views/system/opLog.vue

<template>
  <div>
    <el-row class="handle-box" style="margin-bottom: 10px">
      <el-col :span="24">
        <el-input v-model="search.operName" size="small" placeholder="操作人" class="ch-input ch-input-size" @keyup.enter.native="handleSearch()" />
        <el-input v-model="search.title" size="small" placeholder="标题" class="ch-input ch-input-size" @keyup.enter.native="handleSearch()" />
        <el-button size="small" class="ch-button-warning" @click="handleReset()"><i class="el-icon-search" />&nbsp;重置</el-button>
        <el-button size="small" class="ch-button" @click="handleSearch()"><i class="el-icon-search" />&nbsp;搜索</el-button>
        <el-button size="small" class="ch-button-export" @click="confirmOutput()"><i class="el-icon-download" />&nbsp;导出</el-button>
      </el-col>
    </el-row>
    <el-row class="handle-box">
      <el-col :span="24">
        <el-table v-loading="loading" :data="AllData" stripe row-class-name="g_table_row">
          <el-table-column type="index" width="60" />
          <el-table-column label="标题" prop="title" />
          <el-table-column label="操作人" prop="operName" header-align="center" align="center" />
          <el-table-column label="操作IP" prop="operIp" header-align="center" align="center" />
          <el-table-column label="操作参数" header-align="center" align="center">
            <template slot-scope="scope">
              <el-popover
                popper-class="statistic_base"
                placement="right"
                width="600"
                trigger="click"
              >
                <el-card style="margin: 0">
                  <el-row v-for="param in scope.row.params" :key="param.key" class="col-self">
                    <el-col :span="9" class="col-txt"><span>{{ param.key }}</span></el-col>
                    <el-col :span="13" class="col-input col-bg">
                      <span>{{ param.value }}</span>
                    </el-col>
                  </el-row>
                </el-card>
                <el-button slot="reference" size="mini" type="primary" plain>查看参数</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作时间" prop="operAt" header-align="center" align="center" />
          <el-table-column label="操作" header-align="center" align="center" width="120">
            <template scope="scope">
              <el-button size="mini" type="danger" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-page">
          <el-pagination
            :current-page.sync="currentPage"
            :page-size="pageSize"
            background
            layout="total, prev, pager, next"
            :total="allpage"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
export default {
    name: 'OpLog',
    mixins: [Base, BaseData],
    data() {
        return {
            dc_key: [],
            // 列表相关
            search: {
                operName: '',
                title: ''
            },
            AllData: [],
            loading: false
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData: function() {
            const _this = this
            _this.loading = true
            _this.AllData = []

            this.search.pageNum = this.currentPage
            this.search.pageSize = this.pageSize
            this.baseRequest('list', this.search).then((res) => {
                // console.log(' _this.AllData1', _this.AllData)
                if (res.data.rows) {
                    // console.log('res.data.rows', res.data.rows)
                    res.data.rows.forEach(function(item) {
                        const json = _this.getItemJson(item)
                        // console.log('json', json)
                        _this.AllData.push(json)
                    })
                    _this.allpage = res.data.total
                }
                // console.log(' _this.AllData2', _this.AllData)
                _this.loading = false
            }).catch(() => {
            })
            // this.initOutData()
        },
        handleSearch: function() {
            this.getData()
        },
        handleReset: function() {
            for (const i in this.search) {
                if (i !== 'pageNum' && i !== 'pageSize') {
                    this.search[i] = ''
                }
            }
            this.handleSearch()
        },
        initOutData: function() {
            const _this = this
            this.OutData = []
            const title = [' 标题', ' 操作人', ' 操作参数', ' 操作IP', ' 操作时间']
            this.OutData.push(title)

            this.baseRequest('listAll', this.search).then((res) => {
                if (res.data) {
                    res.data.forEach(function(item) {
                        const jsonMap = _this.getItemJson(item)
                        const jsonArray = []
                        jsonArray.push(jsonMap.title)
                        jsonArray.push(jsonMap.operName)
                        jsonArray.push(jsonMap.operParam)
                        jsonArray.push(jsonMap.operIp)
                        jsonArray.push(jsonMap.operAt)
                        _this.OutData.push(jsonArray)
                    })
                    const OutSize = [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }]
                    const fileName = 'opLog导出 ' + new Date().Format('yyyyMMddhhmm')
                    this.$outputXlsxFile(this.OutData, OutSize, fileName)
                }
            }).catch(() => {
            })
        },
        getItemJson: function(item) {
            // item.operAt = this.$common.transDate(item.operAt, this.$constant.DATE_PATTERN.DATE_TIME_s_h)
            item.params = []
            if (item.operParam) {
                // console.log('item.operParam',item.operParam)
                try {
                    const params = this.$common.castEval(item.operParam)
                    for (const key in params) {
                        item.params.push({
                            key: key,
                            value: params[key][0]
                        })
                    }
                } catch (e) {
                    console.log('异常错误,日志截断', item.operParam)
                }
            }
            return item
        },
        confirmOutput() {
            this.initOutData()
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest('LogController', opUrl, postData, 'project')
        }
    }
}
</script>

<style scoped>
  .ch-input .el-input__inner {
      border-color: #32323A;
  }
  .ch-input-size {
      width: 150px;
  }
  .ch-button {
      border-color: #32323A;
      background-color: #32323A;
      color: #fff;
  }
  .ch-button-warning {
      margin-left: 10px;
      border-color: #E6A23C;
      background-color: #E6A23C;
      color: #fff;
  }
  .ch-button-export {
      margin-left: 10px;
      border-color: #98CC1F;
      background-color: #98CC1F;
      color: #fff;
  }
  /deep/.el-dialog__header {
      padding: 10px 20px;
  }
  /deep/.el-dialog__body {
      padding: 10px 20px;
  }
</style>