JLH/JLHAPP/src/components/lj-win-report.vue

<!--参数：
title-标题 string
ifUseTime-是否使用时间 boolean
beforeDate-开始时间 string
afterDate-结束时间 string
rptype --- 0汇总表 1明细表 number
-->
<template>
    <lj-win-common :title="title" :closeWinHandler="closeWinHandler" right-drawer-title="搜索" :rightDrawerInitOpen="rightDrawerInitOpen"
                   ref="baseWin">
        <template slot="header_right">
            <slot name="header_right">
                <mu-button v-if="showFilter" icon @click="openRightDrawer">
                    <i class="iconfont icon-filter"></i>
                </mu-button>
            </slot>
        </template>
        
        <div slot="body" style="background-color: #ffffff;padding:0px 0px 10px 0px">
            <!-- 报表头部 -->
            <div v-if="rptype == 0">
                <div class="rpdate" v-if="ifUseTime" >
                    <span style="font-size:18px" @click="handleClickDateSelect">
                        <span>{{beforeDateTemp}}~</span>
                        <span>{{afterDateTemp}}</span>
                        <span style="font-size:15px">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xuanze1"></use>
                            </svg>
                        </span>
                    </span>
                    <span v-if="showday==0" class="rpdate_ch" @click="showThisYear">本年</span>
                    <span v-if="showday==0" class="rpdate_ch" @click="showLastYear">上年</span>
                    <!-- <span v-if="showday==1" class="rpdate_ch" @click="showThisMonth">本月</span>
                    <span v-if="showday==1" class="rpdate_ch" @click="showLastMonth">上月</span> -->
                </div>
            </div>

            <!-- 报表明细头部 -->
            <div v-else>
                <div :class="colortop"></div>
                <div style="display: flex;">
                    <div class="reportdetail_mx_title" :class="colortitle">{{title}}</div>
                    <div class="reportdetail_mx_subtitle" v-if="ifUseTime" @click="handleClickDateSelect">
                        <span>{{beforeDateTemp}} ~ {{afterDateTemp}}</span>
                        <span icon><i class="iconfont icon-xiala2"></i></span>
                    </div>
                </div>
            </div>

            <!-- 报表内容 -->
            <div>
                <slot name="content"></slot>
            </div>
        </div>

        <lj-query-list v-if="showFilter" slot="drawer_right" :query-fields="queryFields" 
                       :hard-parms="queryHardParms"
                       :binding-parms="bindingParms"
                       @on-query-submit="handleQuerySubmit"
                       ref="queryList"/>

    </lj-win-common>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";
    import LjCalendar from "components/lj-calendar";
    import LjQueryList from "components/lj-query-list";

    import {
        DatetimeView,
        Popup,
        PopupHeader
    } from 'vux'
    export default {
        name: "lj-win-report",
        components: {
            LjWinCommon,
            DatetimeView,
            Popup,
            PopupHeader,
            LjCalendar,
            LjQueryList
        },
        props: {
            //标题
            title: {
                type: String,
                required: true,
                default: "报表"
            },
            //报表类型； 0-普通报表  1-明细报表
            rptype: {
                type: Number,
                // required: true,
                default: 0
            },
            ifUseTime: {
                type: Boolean,
                default: false
            },
            // showFilter: {
            //     type: Boolean,
            //     default: false
            // },
            // 同lj-query-list的queryFields，设置后显示筛选按钮，点击弹出高级筛选框
            queryFields: {
                type: Array
            },
            // 同lj-query-list的hardParms
            queryHardParms: {
                type: Object
            },
            // 同lj-query-list的bindingParms
            bindingParms: {
                type: Object
            },
            rightDrawerInitOpen: {
                type: Boolean,
                default: false
            },
            beforeDate: {
                type: String,
                default: ""
            },
            afterDate: {
                type: String,
                default: ""
            },
            // 明细报表类型 1-红色、2-蓝色、3-绿色、4-紫色、5-金色、6-青色
            rpmxtype: {
                type: Number,
                default: 1
            },
            closeWinHandler: {
                type: Function,
            },
            // 用于读写用户习惯，此筛选条件对应的key
            habitKey: {
                type: String
            },
            //0精确到月 1精确到日
            showday: {
                type: Number,
                default: 0
            },             
        },
        data() {
            return {
                beforeDateTemp: "",
                afterDateTemp: "",
                queryParams:{}
            }
        },
        created() {
            this.beforeDateTemp = this.beforeDate;
            this.afterDateTemp = this.afterDate;
            if (this.habitKey ) {
                let userhabit = $lj.getStorage("reportHabit");
                if (!userhabit) {
                    userhabit = {};
                    if (this.habitKey) {
                        userhabit[this.habitKey] = {
                            beforeDate: this.beforeDate,
                            afterDate: this.afterDate,
                        }
                        $lj.setStorage("reportHabit", userhabit);
                    }
                } 
            }
        },
        methods: {
            openRightDrawer() {
                this.$refs.baseWin.openRightDrawer();
            },
            handleQuerySubmit(queryParams) {
                this.queryParams = queryParams;
                this.$refs.baseWin.closeRightDrawer();
                this.refresh();
            },
            refresh(){
                var time = {
                    beforeDate: this.beforeDateTemp,
                    afterDate: this.afterDateTemp
                };
                time = Object.assign(this.queryParams,time);
                this.$emit('refresh',time);
            },
            handleClickDateSelect() {               
                let self = this;
                // if(self.showday == 1){
                //     return;   
                // }
                $lj.removeEventListener("rp_date_select");
                $lj.addEventListener("rp_date_select", function (ret) {
                    if (ret.value) {
                        self.beforeDateTemp = ret.value.begindate;
                        self.afterDateTemp = ret.value.enddate;
                        if (self.habitKey) {
                            let userhabit = $lj.getStorage("reportHabit");
                            userhabit[self.habitKey] = {
                                beforeDate: self.beforeDateTemp,
                                afterDate: self.afterDateTemp,
                            }
                            $lj.setStorage("reportHabit", userhabit);
                        }
                        self.refresh();
                    }
                });
                $lj.openWin('rp-date-select', {
                    begindate: this.beforeDateTemp,
                    enddate: this.afterDateTemp,
                    mode:this.showday,
                })
            },
            showThisYear() {
                var myDate = new Date();
                var time = {};
                time.beforeDate = myDate.getFullYear() + "-" + 1 + '-' + 1;
                time.afterDate = myDate.getFullYear() + "-" + 12 + "-" + 31;
                time.beforeDate = $lj.dateformat(time.beforeDate, 'yyyy-MM');
                time.afterDate = $lj.dateformat(time.afterDate, 'yyyy-MM');
                this.beforeDateTemp = time.beforeDate;
                this.afterDateTemp = time.afterDate;
                if (this.habitKey) {
                    let userhabit = $lj.getStorage("reportHabit");
                    userhabit[this.habitKey] = {
                        beforeDate: this.beforeDateTemp,
                        afterDate: this.afterDateTemp,
                    }
                    $lj.setStorage("reportHabit", userhabit);
                }
                // this.$refs.beforeDate.render();
                // this.$refs.afterDate.render();
                this.refresh();
            },
            showLastYear() {
                var myDate = new Date();
                var time = {};
                time.beforeDate = (myDate.getFullYear()-1) + "-" + 1 + '-' + 1;
                time.afterDate = (myDate.getFullYear()-1) + "-" + 12 + "-" + 31;
                time.beforeDate = $lj.dateformat(time.beforeDate, 'yyyy-MM');
                time.afterDate = $lj.dateformat(time.afterDate, 'yyyy-MM');
                this.beforeDateTemp = time.beforeDate;
                this.afterDateTemp = time.afterDate;
                if (this.habitKey) {
                    let userhabit = $lj.getStorage("reportHabit");
                    userhabit[this.habitKey] = {
                        beforeDate: this.beforeDateTemp,
                        afterDate: this.afterDateTemp,
                    }
                    $lj.setStorage("reportHabit", userhabit);
                }
                // this.$refs.beforeDate.render();
                // this.$refs.afterDate.render();
                this.refresh();
            },
            showThisMonth(){
                var myDate = new Date();
                var time = {};
                var nowMonth = myDate.getMonth(); //当前月 
                var LastMonth = myDate.getMonth() - 1; //上月
                var nowYear = myDate.getFullYear(); //当前年 
                time.beforeDate = new Date(nowYear, nowMonth, 1); 
                time.afterDate = new Date(nowYear, nowMonth + 1, 0);
                time.beforeDate = $lj.dateformat(time.beforeDate, 'yyyy-MM-dd');
                time.afterDate = $lj.dateformat(time.afterDate, 'yyyy-MM-dd');

                this.beforeDateTemp = time.beforeDate;
                this.afterDateTemp = time.afterDate;
                if (this.habitKey) {
                    let userhabit = $lj.getStorage("reportHabit");
                    userhabit[this.habitKey] = {
                        beforeDate: this.beforeDateTemp,
                        afterDate: this.afterDateTemp,
                    }
                    $lj.setStorage("reportHabit", userhabit);
                }
                this.refresh();
            },
            showLastMonth(){
                var myDate = new Date();
                var time = {};
                var nowMonth = myDate.getMonth(); //当前月 
                var LastMonth = myDate.getMonth() - 1; //上月
                var nowYear = myDate.getFullYear(); //当前年 
                time.beforeDate = new Date(nowYear, LastMonth, 1); 
                time.afterDate = new Date(nowYear, LastMonth + 1, 0);
                time.beforeDate = $lj.dateformat(time.beforeDate, 'yyyy-MM-dd');
                time.afterDate = $lj.dateformat(time.afterDate, 'yyyy-MM-dd');

                this.beforeDateTemp = time.beforeDate;
                this.afterDateTemp = time.afterDate;
                if (this.habitKey) {
                    let userhabit = $lj.getStorage("reportHabit");
                    userhabit[this.habitKey] = {
                        beforeDate: this.beforeDateTemp,
                        afterDate: this.afterDateTemp,
                    }
                    $lj.setStorage("reportHabit", userhabit);
                }
                this.refresh();
            },
            refreshCurDate(){

            }
        },
        computed: {
            showFilter() {
                return this.queryFields && this.queryFields.length > 0;
            },
            colortop: function () {
                return {
                    kindred: this.rpmxtype == 1,
                    kindblue: this.rpmxtype == 2,
                    kindgreen: this.rpmxtype == 3,
                    kindpurple: this.rpmxtype == 4,
                    kindgold: this.rpmxtype == 5,
                    kindcyan: this.rpmxtype == 6,
                }
            },
            colortitle: function () {
                return {
                    bgred: this.rpmxtype == 1,
                    bgblue: this.rpmxtype == 2,
                    bggreen: this.rpmxtype == 3,
                    bgpurple: this.rpmxtype == 4,
                    bggold: this.rpmxtype == 5,
                    bgcyan: this.rpmxtype == 6,
                };
            }
        }
    }
</script>

<style>
    .reportcom-header-wap {
        width: 100%;
        height: 150px;
        overflow: hidden;
    }

    .reportcom-header {
        width: 120%;
        height: 115px;
        background-color: #fd9153;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
        position: relative;
        left: -10%;
        padding: 10px 0;
        margin-bottom: 10px;
        z-index: 9998;
    }

    .reportcom-header-sub {
        width: 130%;
        height: 125px;
        background-color: #ffba92;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
        position: relative;
        top: -120px;
        left: -23%;
        padding: 10px 0;
        margin-bottom: 10px;
        z-index: 9997;
    }

    .reportcom-header-sub-two {
        width: 140%;
        height: 125px;
        background-color: #fddecc;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
        position: relative;
        top: -240px;
        left: -35%;
        padding: 10px 0;
        margin-bottom: 10px;
        z-index: 9996;
    }

    .reportcom-header-title {
        color: #ffffff;
        font-size: 20px;
        margin-left: 10%;
    }

    .reportdetail_mx_title {
        color: white;
        font-size: 15px;
        font-weight: bold;
        padding: 3px 8px;
        margin-left: 20px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .reportdetail_mx_subtitle {
        position: absolute;
        right: 10px;
        padding: 3px;
        font-size: 15px;
        font-weight: bold;
        line-height: 20px;
        color: grey;
        margin-top: 3px;
    }

    .rpdate_ch {
        margin-left: 10px;
        padding: 8px 15px;
        color: #ffffff;
        font-size: 12px;
        background-color: #6495ed;
        border-radius: 10px;
    }

    .kindblue {
        border-top: 8px solid #0195da;
    }

    .kindgreen {
        border-top: 8px solid #88b04b;
    }

    .kindred {
        border-top: 8px solid #ff6f61;
    }

    .kindpurple {
        border-top: 8px solid #ba68c8;
    }

    .kindgold {
        border-top: 8px solid #FFD700;
    }

    .kindcyan {
        border-top: 8px solid #40E0D0;
    }

    .bgblue {
        background-color: rgb(1, 149, 218);
    }

    .bggreen {
        background-color: rgb(136, 176, 75);
    }

    .bgred {
        background-color: rgb(255, 111, 97)
    }

    .bgpurple {
        background-color: #ba68c8
    }

    .bggold {
        background-color: #FFD700
    }

    .bgcyan {
        background-color: #40E0D0
    }

    .rpdate {
        padding: 15px 8px;
        width: 100%;
        background-color: #f6f6f6;
    }
</style>