<template>
|
<div class="table-search">
|
<el-form
|
ref="queryForm"
|
v-model="queryParams"
|
size="small"
|
:inline="true"
|
label-width="68px"
|
>
|
<el-form-item label="日期：">
|
<el-date-picker
|
v-model="queryParams.date"
|
value-format="yyyy-MM-dd HH:mm"
|
format="yyyy-MM-dd HH:mm"
|
type="datetimerange"
|
:picker-options="pickerOptions"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
align="right"
|
/>
|
</el-form-item>
|
<el-form-item v-show="show" :label="searchParams.hasOwnProperty('productModel')? '规格型号':'客户名称'">
|
<el-select v-model="queryParams.type" :placeholder="searchParams.hasOwnProperty('productModel')? '请选择规格型号':'请选择客户名称'" clearable style="width: 240px">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
size="mini"
|
@click="search"
|
>搜索</el-button>
|
<el-button :style="{color:'#409EFF',border:' 1px solid #409EFF'}" icon="iconfont icon-wenjiandaochu" size="mini" @click="exportExcel">导出</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
props: [
|
'searchData',
|
'searchParams',
|
'options',
|
'getList',
|
'file',
|
'show',
|
'excelName'
|
],
|
data() {
|
return {
|
queryParams: {
|
date: [],
|
type: ''
|
},
|
pickerOptions: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近一个月',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近三个月',
|
onClick(picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
picker.$emit('pick', [start, end])
|
}
|
}]
|
}
|
}
|
},
|
methods: {
|
search() {
|
// "查询条件："时间需要格式化成yyyy-mm-dd hh-mm-ss
|
// console.log(this.queryParams)
|
let { date, type } = this.queryParams
|
date = date == null ? [] : date
|
let params = { ...this.searchParams, startTime: date[0], endTime: date[1] }
|
params = this.searchParams.hasOwnProperty('productModel') ? { ...params, productModel: type } : { ...params, customerName: type }
|
const obj = {}
|
const arr = Object.keys(params).filter(key => params[key])
|
arr.forEach(item => obj[item] = params[item])
|
console.log(obj)// 查看所有请求参数
|
this.getList(obj).then(res => {
|
this.searchData({ ...res.data, startTime: date[0], endTime: date[1] })
|
})
|
},
|
exportExcel() {
|
let { date, type } = this.queryParams
|
date = date == null ? [] : date
|
let params = { startTime: date[0], endTime: date[1] }
|
params = this.searchParams.hasOwnProperty('productModel') ? { ...params, productModel: type } : { ...params, customerName: type }
|
const obj = {}
|
const arr = Object.keys(params).filter(key => params[key])
|
arr.forEach(item => obj[item] = params[item])
|
console.log(obj)// 查看所有请求参数
|
this.file(obj).then(response => {
|
const blob = new Blob([response.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
|
const downloadElement = document.createElement('a')
|
const href = window.URL.createObjectURL(blob) // 创建下载的链接
|
downloadElement.href = href
|
downloadElement.download = `${this.excelName}.xlsx` // 下载后文件名
|
document.body.appendChild(downloadElement)
|
downloadElement.click() // 点击下载
|
this.loadingBtn = false
|
document.body.removeChild(downloadElement) // 下载完成移除元素
|
window.URL.revokeObjectURL(href) // 释放掉blob对象
|
}).catch(message => {
|
this.$message.error({
|
message: '抱歉下载错误！错误原因：' + message,
|
type: 'error'
|
})
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.table-search{
|
.el-form-item{
|
margin-bottom: 0;
|
margin: 12px;
|
}
|
}
|
</style>
|
