You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
371 lines
14 KiB
371 lines
14 KiB
<template>
|
|
<div class="reportPageHeader">
|
|
<!-- 报表名称 -->
|
|
<div class="reportTitle" v-if="showReportTitle">{{reportName}}</div>
|
|
<!-- 搜索条件及按钮 -->
|
|
<div class="FormHeader">
|
|
<!-- 左侧查询 -->
|
|
<div class="headerLeftSearch">
|
|
<el-form
|
|
ref="headerSearchForm_Ref"
|
|
v-if="searchConfig && searchConfig.length > 0"
|
|
:inline="true"
|
|
:model="searchForm"
|
|
:rules="searchRules"
|
|
size="small"
|
|
>
|
|
<el-form-item
|
|
v-for="(item,index) in searchConfig"
|
|
:label="item.label"
|
|
:key="index"
|
|
:prop="item.prop"
|
|
>
|
|
<!-- 输入框 -->
|
|
<el-input
|
|
v-if="item.type == 'input'"
|
|
v-model="searchForm[item.prop]"
|
|
:placeholder="'请输入'+item.label"
|
|
:clearable="!item.noClear"
|
|
></el-input>
|
|
<!-- 大数据下拉 -->
|
|
<el-select
|
|
v-if="item.type == 'selectExcess'"
|
|
class="headerSearchExcessSelector"
|
|
v-model="searchForm[item.prop]"
|
|
placeholder="请选择"
|
|
filterable
|
|
clearable
|
|
v-el-select-loadmore:rangeNumber="headerSelectExcessLoadMore(item)"
|
|
@blur="blur(item)"
|
|
@visible-change='(isShow)=>{SelectExcessVisibleChange(isShow,item)}'
|
|
:filter-method="(query)=>{SelectExcessFilterMethod(query,item)}"
|
|
@clear="SelectExcessClearHandle(item)"
|
|
@change="(data)=>{SelectExcessChangeHandle(data,item)}"
|
|
>
|
|
<el-option
|
|
v-for="op in item.options.slice(0, item.rangeNumber)"
|
|
:key="op[item.opV] || op.value"
|
|
:label="op[item.opL] || op.label"
|
|
:value="op[item.opV] || op.value"
|
|
></el-option>
|
|
</el-select>
|
|
<!-- 普通下拉 -->
|
|
<el-select
|
|
v-if="item.type == 'select'"
|
|
v-model="searchForm[item.prop]"
|
|
filterable
|
|
:placeholder="'请选择'+item.label"
|
|
:clearable="!item.noClear"
|
|
>
|
|
<el-option
|
|
v-for="op in item.options"
|
|
:key="op[item.opV] || op.value"
|
|
:label="op[item.opL] || op.label"
|
|
:value="op[item.opV] || op.value">
|
|
</el-option>
|
|
</el-select>
|
|
<!-- 日期 -->
|
|
<el-date-picker
|
|
style="width:180px"
|
|
v-if="item.type == 'date'"
|
|
:clearable="!item.noClear"
|
|
v-model="searchForm[item.prop]"
|
|
type="date"
|
|
placeholder="选择日期"
|
|
value-format="yyyy-MM-dd"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="searchHandle">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<!-- 右侧按钮 -->
|
|
<div class="headerRightBtn">
|
|
<exportExcel
|
|
v-if="downloadData && downloadData.length > 0"
|
|
class="output-excel"
|
|
:reportName="reportName"
|
|
:excelData="downloadData"
|
|
:columnList="columnList"
|
|
:title="downloadExcelTitle()"
|
|
></exportExcel>
|
|
<columnFilter
|
|
:columnList="columnList"
|
|
@columnFliterCallback="columnFliterCallback"
|
|
></columnFilter>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Vue from "vue";
|
|
Vue.directive("el-select-loadmore",{
|
|
bind(el,binding){
|
|
//获取element-ui定义好的scroll盒子
|
|
const SELECTWRAP_DOM = el.querySelector(".headerSearchExcessSelector .el-select-dropdown .el-select-dropdown__wrap")
|
|
SELECTWRAP_DOM.addEventListener("scroll",function(){
|
|
//scrollHeight 获取元素内容高度
|
|
//scrollTop 获取或设置元素的偏移值，常用于计算滚动条的位置，当一个元素的容器没有产生垂直方向的滚动条，则默认scrollTop=0.
|
|
//clientHeight 读取元素的可见高度
|
|
//ele.scrollHeight - ele.scrollTop === ele.clientHeight;如果元素滚到底等式返回true，没有返回false；
|
|
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
|
|
if(condition){
|
|
binding.value();
|
|
}
|
|
})
|
|
}
|
|
});
|
|
import columnFilter from "@/components/columnFilter/index"
|
|
import exportExcel from "@/components/exportExcel/index"
|
|
import {
|
|
getItemCodeList,
|
|
getLocationCodeList,
|
|
getDeliverRequestType,
|
|
getSupplierCode,
|
|
getLocationErpCode,
|
|
getUnplannedIssueType,
|
|
getUnplannedReceiptType,
|
|
getInventoryBalanceStatus
|
|
} from '@/api/api'
|
|
export default {
|
|
name: "reportPageHeader",
|
|
props:{
|
|
// 是否显示报表表头
|
|
showReportTitle:{
|
|
type:Boolean,
|
|
default: true
|
|
},
|
|
// 列数据
|
|
columnList:{
|
|
type: Array,
|
|
default: null
|
|
},
|
|
// 报表名称
|
|
reportName:{
|
|
type: String,
|
|
default: '导出'
|
|
},
|
|
// 查询条件
|
|
searchConfig:{
|
|
type: Array,
|
|
default:null
|
|
},
|
|
// 查询条件必填项
|
|
searchRules:{
|
|
type: Object,
|
|
default:null
|
|
},
|
|
// 搜索值
|
|
searchForm:{
|
|
type: Object,
|
|
default: null
|
|
},
|
|
// 导出数据
|
|
downloadData:{
|
|
type: Array,
|
|
default: null
|
|
},
|
|
},
|
|
components: {
|
|
columnFilter,
|
|
exportExcel
|
|
},
|
|
data () {
|
|
return {
|
|
isShow:false
|
|
};
|
|
},
|
|
mounted(){
|
|
this.initSearchConfig()
|
|
},
|
|
methods: {
|
|
//大数据下拉框搜索
|
|
SelectExcessFilterMethod(query,item){
|
|
if(query){
|
|
item.options = item.optionsTS.filter(i=>{
|
|
return ((i[item.opL]).toUpperCase()).includes(query.toUpperCase())
|
|
})
|
|
}
|
|
},
|
|
//大数据下拉框滚动事件
|
|
headerSelectExcessLoadMore(item){
|
|
//每次滚动到底部新增条数，可自定义
|
|
return ()=>item.rangeNumber += item.rangeSize;
|
|
},
|
|
//大数据下拉框失去焦点事件
|
|
blur(item){
|
|
if(!this.isShow)item.rangeNumber = item.rangeSize;
|
|
},
|
|
// 大数据下拉显隐操作
|
|
SelectExcessVisibleChange(isShow,item){
|
|
this.isShow = isShow
|
|
if(!isShow)return
|
|
if(!this.searchForm[item.prop] || this.searchForm[item.prop].length <= 0){
|
|
item.options = item.optionsTS
|
|
}else{
|
|
this.SelectExcessFilterMethod(this.searchForm[item.prop],item)
|
|
}
|
|
},
|
|
// 大数据下拉清除操作
|
|
SelectExcessClearHandle(item){
|
|
item.rangeNumber = item.rangeSize
|
|
},
|
|
// 大数据下拉更改操作
|
|
SelectExcessChangeHandle(data,item){
|
|
item.options = []
|
|
let _ob = {}
|
|
_ob[item.prop] = data
|
|
item.options.push(_ob)
|
|
},
|
|
initSearchConfig(){
|
|
if(!this.searchConfig){return}
|
|
this.searchConfig.forEach(item=>{
|
|
item.options = []
|
|
// 普通下拉 + 大数据下拉
|
|
if((item.type == 'select' || item.type == 'selectExcess') && item.optionsProc){
|
|
// ERP料号
|
|
if(item.optionsProc == 'itemCode'){
|
|
getItemCodeList().then(res=>{
|
|
if(item.type == 'selectExcess'){item.optionsTS = res}
|
|
item.options = res
|
|
item.opL="ItemCode"
|
|
item.opV="ItemCode"
|
|
})
|
|
}
|
|
// 库位
|
|
if(item.optionsProc == 'LocationCode'){
|
|
getLocationCodeList().then(res=>{
|
|
if(item.type == 'selectExcess'){item.optionsTS = res}
|
|
item.options = res
|
|
item.opL="LocationCode"
|
|
item.opV="LocationCode"
|
|
})
|
|
}
|
|
// 发货类型
|
|
if(item.optionsProc == 'DeliverRequestType'){
|
|
getDeliverRequestType().then(res=>{
|
|
if(item.type == 'selectExcess'){item.optionsTS = res}
|
|
item.options = res
|
|
item.opL="KEY"
|
|
item.opV="VALUE"
|
|
})
|
|
}
|
|
// 供应商
|
|
if(item.optionsProc == 'SupplierCode'){
|
|
getSupplierCode().then(res=>{
|
|
if(item.type == 'selectExcess'){item.optionsTS = res}
|
|
item.options = res
|
|
item.opL="SupplierCode"
|
|
item.opV="SupplierCode"
|
|
})
|
|
}
|
|
// ERP储位
|
|
if(item.optionsProc == 'LocationErpCode'){
|
|
getLocationErpCode().then(res=>{
|
|
if(item.type == 'selectExcess'){item.optionsTS = res}
|
|
item.options = res
|
|
item.opL="ErpLocationCode"
|
|
item.opV="ErpLocationCode"
|
|
})
|
|
}
|
|
// 领料类别
|
|
if(item.optionsProc == 'UnplannedIssueType'){
|
|
getUnplannedIssueType().then(res=>{
|
|
if(item.type == 'selectExcess'){item.optionsTS = res}
|
|
item.options = res
|
|
item.opL="KEY"
|
|
item.opV="VALUE"
|
|
})
|
|
}
|
|
// 退料类别
|
|
if(item.optionsProc == 'UnplannedReceiptType'){
|
|
getUnplannedReceiptType().then(res=>{
|
|
if(item.type == 'selectExcess'){item.optionsTS = res}
|
|
item.options = res
|
|
item.opL="KEY"
|
|
item.opV="VALUE"
|
|
})
|
|
}
|
|
// 库存状态
|
|
if(item.optionsProc == 'InventoryBalanceStatus'){
|
|
getInventoryBalanceStatus().then(res=>{
|
|
if(item.type == 'selectExcess'){item.optionsTS = res}
|
|
item.options = res
|
|
item.opL="KEY"
|
|
item.opV="VALUE"
|
|
})
|
|
}
|
|
// //存储时效控制报表-是否超过时效
|
|
// if(item.optionsProc == 'isExceedThreshold'){
|
|
// item.options = [
|
|
// {label:'是',value:'是'},
|
|
// {label:'否',value:'否'},
|
|
// {label:'全部',value:'全部'},
|
|
// ]
|
|
// item.opL='label'
|
|
// item.opV="value"
|
|
// }
|
|
}
|
|
})
|
|
},
|
|
// 字段设置点击事件
|
|
columnFliterCallback(data){
|
|
this.$emit("columnFliterCallback",data)
|
|
},
|
|
// 表头查询事件
|
|
searchHandle(){
|
|
this.$emit("headerSearchHandle",this.searchForm,this.$refs.headerSearchForm_Ref)
|
|
},
|
|
downloadExcelTitle(){
|
|
let _title = this.reportName
|
|
if(this.searchForm){
|
|
let _begin = this.searchForm.beginDate ? this.searchForm.beginDate.slice(0,10) : '--'
|
|
let _end = this.searchForm.endDate ? this.searchForm.endDate.slice(0,10) : '--'
|
|
if(this.searchForm.beginDate || this.searchForm.endDate){
|
|
_title = `${this.reportName} (${_begin}至${_end})`
|
|
}
|
|
}
|
|
return _title
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scope lang="less">
|
|
.reportPageHeader{
|
|
// background:#2d568e;
|
|
background:#eaf0f6;
|
|
|
|
|
|
.FormHeader{
|
|
padding:20px 20px 0;
|
|
display:flex;
|
|
justify-content: space-between;
|
|
|
|
.headerRightBtn{
|
|
display:flex;
|
|
justify-content: flex-end;
|
|
padding-bottom:18px;
|
|
|
|
.output-excel{
|
|
margin-right:10px
|
|
}
|
|
}
|
|
|
|
// .el-form-item__label{
|
|
// color:#fff
|
|
// }
|
|
}
|
|
|
|
.reportTitle{
|
|
background:#044c93;
|
|
color:#fff;
|
|
line-height:50px;
|
|
text-align:center;
|
|
font-size:16px;
|
|
font-weight:bold;
|
|
letter-spacing:2px;
|
|
border-bottom: #4d709f solid 1px;
|
|
}
|
|
}
|
|
</style>
|