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 
                    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 == '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
                            v-if="item.type == 'date'"
                            :clearable="!item.noClear"
                            v-model="searchForm[item.prop]"
                            type="date"
                            placeholder="选择日期"
                            value-format="yyyyMMdd"
                        ></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 columnFilter from "@/components/columnFilter/index"
import exportExcel from "@/components/exportExcel/index"
import {
    getItemCodeList,
    getLocationCodeList,
    getDeliverRequestType,
    getSupplierCode,
    getLocationErpCode,
    getUnplannedIssueType,
    getUnplannedReceiptType
} 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 {
        };
    },
    mounted(){
        this.initSearchConfig()
    },
    methods: {
        initSearchConfig(){
            if(!this.searchConfig){return}
            this.searchConfig.forEach(item=>{
                item.options = []
                if(item.type == 'select' && item.optionsProc){
                    // 物料
                    if(item.optionsProc == 'itemCode'){
                        getItemCodeList().then(res=>{
                            item.options = res
                            item.opL="ItemCode"
                            item.opV="ItemCode"
                        })
                    }
                    // 库位
                    if(item.optionsProc == 'LocationCode'){
                        getLocationCodeList().then(res=>{
                            item.options = res
                            item.opL="LocationCode"
                            item.opV="LocationCode"
                        })
                    }
                    // 发货类型
                    if(item.optionsProc == 'DeliverRequestType'){
                        getDeliverRequestType().then(res=>{
                            item.options = res
                            item.opL="KEY"
                            item.opV="VALUE"
                        })
                    }
                    // 供应商
                    if(item.optionsProc == 'SupplierCode'){
                        getSupplierCode().then(res=>{
                            item.options = res
                            item.opL="SupplierCode"
                            item.opV="SupplierCode"
                        })
                    }
                    // ERP库位
                    if(item.optionsProc == 'LocationErpCode'){
                        getLocationErpCode().then(res=>{
                            item.options = res
                            item.opL="ErpLocationCode"
                            item.opV="ErpLocationCode"
                        })
                    }
                    // 领料类别
                    if(item.optionsProc == 'UnplannedIssueType'){
                        getUnplannedIssueType().then(res=>{
                            item.options = res
                            item.opL="KEY"
                            item.opV="VALUE"
                        })
                    }
                    // 退料类别
                    if(item.optionsProc == 'UnplannedReceiptType'){
                        getUnplannedReceiptType().then(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)
        },
        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>