|
|
<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>
|