hi-ucs/back/src/views/modules/sys/log-operation.vue

<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__log-operation">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item>
          <el-select
            v-model="dataForm.status"
            :placeholder="$t('logOperation.status')"
            clearable
          >
            <el-option
              :label="$t('logOperation.status0')"
              :value="0"
            ></el-option>
            <el-option
              :label="$t('logOperation.status1')"
              :value="1"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="dataForm.creatorName"
            placeholder="请输入操作人"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="dataForm.operation"
            placeholder="请输入操作名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetFunction()"> 重置 </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="exportHandle()">{{
            $t('export')
          }}</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @sort-change="dataListSortChangeHandle"
        style="width: 100%"
        :row-class-name="rowClassName"
      >
        <el-table-column
          label="序号"
          align="center"
          prop="xh"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="operation"
          label="操作名称"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="creatorName"
          label="操作人"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createDate"
          label="操作时间"
          sortable="custom"
          header-align="center"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="ip"
          label="客户端IP"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="requestUri"
          label="请求地址"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="requestMethod"
          :label="$t('logOperation.requestMethod')"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="requestParams"
          :label="$t('logOperation.requestParams')"
          header-align="center"
          align="center"
          width="150"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="resultData"
          label="返回结果"
          header-align="center"
          width="150"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="requestTime"
          :label="$t('logOperation.requestTime')"
          sortable="custom"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            {{ `${scope.row.requestTime}ms` }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          :label="$t('logOperation.status')"
          sortable="custom"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{
              $t('logOperation.status0')
            }}</el-tag>
            <el-tag v-else size="small" type="success">{{
              $t('logOperation.status1')
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="userAgent"
          :label="$t('logOperation.userAgent')"
          header-align="center"
          align="center"
          width="150"
          :show-overflow-tooltip="true"
        ></el-table-column> -->
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/sys/log/operation/page',
        getDataListIsPage: true,
        exportURL: '/sys/log/operation/export'
      },
      dataForm: {
        status: '',
        creatorName: '',
        startDate: '',
        endDate: '',
        operation: ''
      },
      value1: ''
    }
  },
  watch: {
    value1 (val) {
      val[0] = this.handleTime(val[0], 'yyyy-MM-dd HH:mm:ss')
      this.dataForm.startDate = val[0]
      val[1] = this.handleTime(val[1], 'yyyy-MM-dd HH:mm:ss')
      this.dataForm.endDate = val[1]
    }
  },
  methods: {
    // 重置按钮
    resetFunction () {
      const params = {
        status: '',
        creatorName: '',
        startDate: '',
        endDate: '',
        operation: '',
        operationType: 'all'
      }
      this.value1 = '' // 格式化日期
      this.operationType = '' // 操作类型转化
      this.page = 1
      this.limit = 10
      this.dataForm = params
      this.getDataList() // 重置完调用查询方法
    },
    // 序号
    rowClassName ({ row, rowIndex }) {
      row.xh = rowIndex + 1 + (this.page - 1) * this.limit
    },
    // 定义格式化函数：
    handleTime (time, format) {
      if (time == null || time == undefined || time == '') {
        return ''
      }
      var t = new Date(time)
      var tf = function (i) {
        return (i < 10 ? '0' : '') + i
      }
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
        switch (a) {
          case 'yyyy':
            return tf(t.getFullYear())
            break
          case 'MM':
            return tf(t.getMonth() + 1)
            break
          case 'mm':
            return tf(t.getMinutes())
            break
          case 'dd':
            return tf(t.getDate())
            break
          case 'HH':
            return tf(t.getHours())
            break
          case 'ss':
            return tf(t.getSeconds())
            break
        }
      })
    }
  }
}
</script>