shop.vue

<template>
    <div class="index">
        <div class="title-wrap">
            <div class="title-box">
                <span class="title">{{ reportName }}&nbsp;{{ repTime }}&nbsp;{{$t('head.title')}}</span>
            </div>
            <div class="title-collapse-content">
                <span v-for="(item) in reportData" :key="item.label" class="date-box" @click="reportHandle(item.label)">
                    <span :class="item.label === handleVal ? 'date-btn active-date' : 'date-btn'">{{ i18nFormatter(item.label) }}</span>
                </span>
                <span class="date-input-box">
                    <el-date-picker class="date-input day-piack" v-show="handleVal == 'day'" v-model="dayVal" value-format="yyyy-MM-dd" align="right" type="date" size="mini" :placeholder="$t('pholder.date')" :picker-options="pickerOptions1">
                    </el-date-picker> 
                    <el-date-picker class="date-input week-piack" v-show="handleVal == 'week'" v-model="weekVal" align="right" type="week" :format="datePickerFormatter('week')" size="mini" :placeholder="$t('pholder.week')" :picker-options="weekPickerOpt">
                    </el-date-picker>
                    <el-date-picker class="date-input month-piack" v-show="handleVal == 'month'" v-model="monthVal" align="right" type="month" :format="datePickerFormatter('month')" size="mini" :placeholder="$t('pholder.month')">
                    </el-date-picker>
                    <el-date-picker class="date-input year-piack" v-show="handleVal == 'year'" v-model="yearVal" align="right" type="year" :format="datePickerFormatter('year')" size="mini" :placeholder="$t('pholder.year')">
                    </el-date-picker>
                </span>
                <!-- 店铺 -->
                <div class="shop-select" v-if="false">
                    <el-select v-model="shopVal" placeholder="店铺" class="shop-sel" @change="chooseShop(shopVal)">
                       <el-option label="肯德基" value="kfc"></el-option>
                    </el-select>
                </div>
                <div class="right-btn">
                    <span class="collapse-btn-box">
                        <el-button type="primary" class="primary-btn collapse-btn" size="samll" @click="confirmCondition"
                            :disabled="(handleVal == 'day' && !dayVal) || (handleVal == 'week' && !weekVal) || (handleVal == 'month' && !monthVal) || (handleVal == 'year' && !yearVal)"
                        >{{$t('button.confirm')}}</el-button>
                        <!-- <el-button class="reset-btn collapse-btn" size="samll" @click="resetRefresh">{{$t('button.reset')}}</el-button> -->
                    </span>
                </div>
            </div>
        </div>
        <router-view :orgId="orgId" :propparam="propParams" ></router-view>
    </div>
</template>

<script>
import Bus from '../public/eventBus'
import myChart from '../public/mapChart'
require('echarts/map/js/china.js')
export default {
    props: {
        reportName: String,
        orgId: [Number, String]
    },
    data() {
        return {
            shopVal: '',
            dateReport: {
                isDay: false,
                isWeek: false,
                isMonth: false,
                isYear: false
            },
            isDayReport: true,
            reportData: [{
                label: 'day',
                is_active: 'date-btn'
            }, {
                label: 'week',
                is_active: 'date-btn',
            }, {
                label: 'month',
                is_active: 'date-btn',
            }, {
                label: 'year',
                is_active: 'date-btn',
            }],
            repTime: '',    // 报表时间
            dayVal: '',  // 日时间
            weekVal: '',  // 周时间
            monthVal: '',  // 月时间
            yearVal: '',   // 年时间
            value3: '',
            floorVal: '',
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: this.$t('reportHandle.today'),
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: this.$t('reportHandle.yesterday'),
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: this.$t('reportHandle.lastweek'),
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            weekPickerOpt: {
                firstDayOfWeek: window._vionConfig.firstDayOfWeek ? window._vionConfig.firstDayOfWeek : 1
            },
            isRefresh: false,
            propParams: {},
            handleVal: 'day',
            isShow: false
        }
    },
    watch: {
        reportName (val) {
            this.init();
        },
        propParams(val) {
            if(val.dateType == '/shop'){
                this.reportHandle('day');
            }else if(val.dateType == '/shop/weekly'){
                this.reportHandle('week');
            }else if(val.dateType == '/shop/monthly'){
                this.reportHandle('month');
            }else if(val.dateType == '/shop/yearly'){
                this.reportHandle('year');
            }
        },
        dayVal(val) {
            this.sessionDate('dayDate', val);
        },
        weekVal(val) {
            this.sessionDate('weekDate', val);
        },
        monthVal(val) {
            this.sessionDate('monthDate', val);
        },
        yearVal(val) {
            this.sessionDate('yearDate', val);
        }
    },
    components: {
        'my-chart': myChart
    },
    computed: {
        //
    },
    errorCaptured(err, vm, info) {
        // eval("console.log(err)");
        return false;
    },
    created() {
        let {dayDate, weekDate, monthDate , yearDate} = this.createDate();
        this.dayVal = dayDate;
        this.weekVal = weekDate;
        this.monthVal = monthDate;
        this.yearVal = yearDate;
    },
    mounted() {
        let routeHandler = {
            '/shop': 'day',
            '/shop/weekly': 'week',
            '/shop/monthly': 'month',
            '/shop/yearly': 'year'
        }
        const storageDateType = this.getSessionLocal('homeDateType') || routeHandler[this.$router.history.current.fullPath]
        this.reportHandle(storageDateType);
        this.init();
    },
    methods: {
        i18nFormatter(label) {
            let languageLabel = 'reportHandle.' + label;
            return this.$t(languageLabel)
        },
        async init() {
            this.repTime = $(`.${this.handleVal}-piack input`)[0].value
            const storageDateType = this.getSessionLocal('homeDateType')
            let type = (storageDateType ? `/shop/${storageDateType}ly` : '') || this.$router.history.current.fullPath;
            this.propParams = {
                dateType: type,
                timeVal: this[this.handleVal + 'Val']
            }
            this.activeSimple = '1';
            await console.log(1)
            this.isShow = true
        },
        reportHandle(label) {
            this.handleVal = label
        },
        classHandle(index) {
            let dateBtnList = document.getElementsByClassName('date-btn');
            for(let i = 0, len = dateBtnList.length; i < len; i++) {
                if(i === index) {
                    dateBtnList[i].className = 'date-btn active-date';
                } else {
                    dateBtnList[i].className = 'date-btn';
                }
            }
            
        },
        chooseShop(val) {
           
        },
        resetRefresh() {
            this.reportHandle('day');
            this.setSessionLocal('homeDateType', '')
            this.isRefresh = false;
            this.dayVal = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');  // 日时间
            this.weekVal = new Date();  // 周时间
            this.monthVal = new Date();  // 月时间
            this.yearVal = new Date();  // 年时间
        },

        confirmCondition() {
            if(this.handleVal == 'day'){
                this.setSessionLocal('homeDateType', '')
                this.$router.push('/shop');
                this.repTime = this.dayVal;
                this.propParams = {
                    dateType: '/shop',
                    timeVal: this.dayVal
                }
            }else{
                this.setSessionLocal('homeDateType', this.handleVal)
                this.$router.push(`/shop/${this.handleVal}ly`);
                this.repTime = $(`.${this.handleVal}-piack input`)[0].value
                this.propParams = {
                    dateType: `/shop/${this.handleVal}ly`,
                    timeVal: this[this.handleVal + 'Val']
                }
            }
        }
    }
}
</script>

<style scoped>
.index {
  position: absolute;
  left: 0;
  top: 65px;
  width: 100%;
  height: calc(100% - 65px);
  overflow: auto;
}
@media only screen and (max-width: 1366px) {
    .date-input-box {
        position: relative;
    }
}
</style>