WZC2/fe/UI.DY.AgGridReport/src/components/reportPageHeader/index.vue

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