yxk-electronic-archives/src/views/system/log/search.vue

<template>
  <div class="head-container">
    <div class="head-search">
      <el-input
        v-if="!isCenter"
        v-model="keyWord"
        size="small"
        clearable
        placeholder="请输入关键词"
        style="width: 300px;"
        class="input-prepend filter-item"
        @clear="crud.toQuery"
        @keyup.enter.native="crud.toQuery"
      >
        <el-select slot="prepend" v-model="optionVal" style="width: 92px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-input>
      <date-range-picker v-model="blurryTime" class="date-item" />
      <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
      <el-button class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
    </div>
    <crudOperation>
      <template v-slot:left>
        <el-button v-if="!isCenter" :loading="crud.downloadLoading" size="mini" @click="handleComfiredDelt"><i class="iconfont icon-shanchu" />清空</el-button>
      </template>
      <template v-slot:right>
        <el-button :loading="crud.downloadLoading" size="mini" :disabled="crud.selections.length === 0" @click="doExport(crud.selections)">
          <i class="iconfont icon-daochu" />
          导出
        </el-button>
      </template>
    </crudOperation>
    <!-- <el-button :loading="crud.downloadLoading" size="mini" icon="el-icon-download" @click="handleDownload">导出</el-button> -->
    <!-- 清空 -->
    <el-dialog class="tip-dialog" :visible.sync="delVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="提示">
      <div class="setting-dialog">
        <div class="tip-content">
          <p class="tipMsg">此操作将清空所选数据</p>
          <span>你是否还要继续?</span>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="delVisible = false">取消</el-button>
          <el-button type="primary">继续</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CRUD, { header, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import DateRangePicker from '@/components/DateRangePicker'
import { mapGetters } from 'vuex'
import { exportFile } from '@/utils/index'
import qs from 'qs'
export default {
  components: { DateRangePicker, crudOperation },
  mixins: [header(), crud()],
  props: {
    isLogType: {
      type: String,
      default: ''
    },
    isCenter: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      blurryTime: [],
      delVisible: false,
      keyWord: '',
      optionVal: 'username',
      options: []
    }
  },
  computed: {
    ...mapGetters([
      'baseApi',
      'user'
    ])
  },
  created() {
    if (this.isLogType === 'error') {
      this.options = [
        { value: 'username', label: '用户名' },
        { value: 'account', label: '登录账号' },
        { value: 'method', label: '请求方法' },
        { value: 'params', label: '请求参数' }
      ]
    } else {
      this.options = [
        { value: 'username', label: '用户名' },
        { value: 'det', label: '所属部门' },
        { value: 'account', label: '登录账号' }
      ]
    }
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.query[this.optionVal] = this.keyWord
      if (this.blurryTime) {
        this.crud.query.startTime = this.blurryTime[0]
        this.crud.query.endTime = this.blurryTime[1]
      } else {
        this.crud.query.startTime = null
        this.crud.query.endTime = null
      }
    },
    resetQuery() {
      if (this.isLogType === 'error') {
        this.options = [
          { value: 'username', label: '用户名' },
          { value: 'account', label: '登录账号' },
          { value: 'method', label: '请求方法' },
          { value: 'params', label: '请求参数' }
        ]
      } else {
        this.options = [
          { value: 'username', label: '用户名' },
          { value: 'det', label: '所属部门' },
          { value: 'account', label: '登录账号' }
        ]
      }
      this.keyWord = ''
      this.crud.query[this.optionVal] = this.keyWord
      this.blurryTime = null
      this.crud.query.startTime = null
      this.crud.query.endTime = null
      this.crud.toQuery()
    },
    handleComfiredDelt() {
      if (this.isLogType === 'login') {
        this.$emit('handleClearData')
      } else if (this.isLogType === 'operate') {
        this.$emit('handleClearOperateData')
      } else {
        this.$emit('handleClearErrorData')
      }
    },
    doExport(data) {
      console.log(data)
      crud.downloadLoading = true
      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        const ids = []
        data.forEach(val => {
          ids.push(val.id)
        })
        const params = {
          'ids': ids
        }
        if (this.isLogType === 'login') {
          exportFile(this.baseApi + '/api/log/downloadLoginLog?' + qs.stringify(params, { indices: false }))
        } else if (this.isLogType === 'operate') {
          exportFile(this.baseApi + '/api/log/downloadLog?' + qs.stringify(params, { indices: false }))
        } else {
          exportFile(this.baseApi + '/api/log/downloadErrorLog?' + qs.stringify(params, { indices: false }))
        }
      }).catch(() => {
      })
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .input-prepend .el-input__inner{
  padding-left: 100px;
}
</style>