<template>
|
<el-dialog :visible.sync="isShow" :title="title" width="700px" :modal-append-to-body="false"
|
:close-on-click-modal="false">
|
<div id="exportCondition-style">
|
<el-form ref="form" :model="form" label-width="120px" class="currentFormStyle">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="入库日期：" class="start-time-style">
|
<el-date-picker v-model="form.inTimeStart" type="date" placeholder="请选择入库日期"
|
value-format="yyyy-MM-dd HH:mm:ss" :clearable="true">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="-" class="end-time-style">
|
<el-date-picker v-model="form.inTimeEnd" type="date" placeholder="请选择入库日期"
|
value-format="yyyy-MM-dd 23:59:59" :clearable="true">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="分发日期：" class="start-time-style">
|
<el-date-picker v-model="form.timeStart" type="date" placeholder="请选择分发日期"
|
value-format="yyyy-MM-dd HH:mm:ss" :clearable="true">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="-" class="end-time-style">
|
<el-date-picker v-model="form.timeEnd" type="date" placeholder="请选择分发日期"
|
value-format="yyyy-MM-dd 23:59:59" :clearable="true">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="save('form')" type="primary"
|
v-customLoading="{ isLoading: isLoading, percentage: percentage }">保存
|
</el-button>
|
<el-button size="mini" @click="isShow = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { downloadFile } from '@/utils/downloadFile'
|
export default {
|
name: "exportConditionDialog",
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: ''
|
}
|
},
|
data() {
|
return {
|
isShow: false,
|
form: {
|
inTimeStart: null,
|
inTimeEnd: null,
|
timeStart: null,
|
timeEnd: null
|
},
|
queryCon: {},//列表页查询条件
|
percentage: 0,
|
isLoading: false,
|
}
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
dialogVisible: function (newShow, oldShow) {
|
this.isShow = newShow
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
isShow: function (newDialogShow, oldDialogShow) {
|
this.$emit('update:dialogVisible', newDialogShow)
|
if (!newDialogShow) {
|
this.initData();
|
}
|
}
|
},
|
methods: {
|
initData() {
|
Object.keys(this.form).forEach((key) => {
|
this.form[key] = null;
|
})
|
this.queryCon = {};
|
},
|
/**
|
*保存
|
*/
|
save(formName) {
|
let _this = this;
|
_this.$refs[formName].validate((valid) => {
|
if (valid) {
|
_this.handleExport();
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
/**
|
*获取查询条件
|
*/
|
getQueryCon(obj) {
|
this.queryCon = obj;
|
},
|
async handleExport() {
|
let [bool, flag] = [false, false];
|
let _exportQuery = JSON.parse(JSON.stringify(this.form));
|
for (var key in _exportQuery) {
|
if (_exportQuery[key]) {
|
bool = true;
|
break;
|
}
|
}
|
if (!bool) {
|
this.$message({
|
message: '请选择入库日期/分发日期！',
|
type: 'info'
|
})
|
return
|
} else {
|
_exportQuery = this.handleExportCon(_exportQuery);
|
}
|
//是否有查询关键字----存在关键字、导出日期清空
|
for (let key in this.queryCon) {
|
if (this.queryCon[key]) {
|
flag = true;
|
break;
|
}
|
}
|
if (flag) {
|
_exportQuery = {};
|
}
|
//拆选
|
let params = { ..._exportQuery, ...this.queryCon };
|
const config = {
|
onUploadProgress: (ProgressEvent) => {
|
const progressPercent = Math.round(
|
((ProgressEvent.loaded / ProgressEvent.total) * 100) | 0
|
)
|
this.percentage = progressPercent === 100 ? 99 : progressPercent
|
this.isLoading = true
|
},
|
onDownloadProgress: (ProgressEvent) => { },
|
url: 'wly-warehouse-service/stock/query/exportFlowExcel',
|
data: params,//导出条件
|
fileName: "商品库存明细",
|
type: '.xlsx'
|
}
|
const res = await downloadFile(config)
|
if (res) {
|
this.percentage = 100
|
this.isLoading = false
|
} else {
|
this.percentage = 0
|
this.isLoading = false
|
}
|
},
|
/**
|
* 文件名称处理
|
*/
|
// exportFileName(exportQuery) {
|
// let _fileName = "";
|
// if (exportQuery.timeStart) {
|
// _fileName = exportQuery.timeStart
|
// }
|
// if (exportQuery.timeStart && exportQuery.timeEnd) {
|
// _fileName = `${_fileName}~`
|
// }
|
// if (exportQuery.timeEnd) {
|
// _fileName = `${_fileName}${exportQuery.timeEnd}`
|
// }
|
// return _fileName;
|
// },
|
/**
|
*导出条件处理
|
*/
|
handleExportCon(obj) {
|
//其中一项未选择的情况中-给另一项赋值
|
if (!obj.timeStart && !obj.timeEnd) {
|
if (obj.inTimeStart) {
|
obj.timeStart = obj.inTimeStart;
|
}
|
if (obj.inTimeEnd) {
|
obj.timeEnd = obj.inTimeEnd;
|
}
|
}
|
if (!obj.inTimeStart && !obj.inTimeEnd) {
|
if (obj.timeStart) {
|
obj.inTimeStart = obj.timeStart;
|
}
|
if (obj.timeEnd) {
|
obj.inTimeEnd = obj.timeEnd;
|
}
|
}
|
return obj;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
</style>
|
