mallGroupOps.vue

<template>
    <div class="behavior-more-option behavior-test-option">
        <div class="opt-left">
            <!-- 广场 -->
            <div class="test-opt-mall opt-mall-sel">
                <el-select v-model="mallVal" class="mall-opt" filterable :placeholder="$t('pholder.shopSelect')" multiple 
                :reserve-keyword="true" collapse-tags @change="chooseMall">
                    <div :class="isSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle">
                        <span class="custom-checkbox__input">
                            <span class="custom-checkbox__inner"></span>
                        </span>
                        <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
                    </div>
                    <el-option v-for="(item) in mallOpt" :label="item.name" :value="item.id" :key="item.value">
                        <span class="custom-checkbox__input">
                            <span class="custom-checkbox__inner"></span>
                        </span>
                        <span style="padding-left: 5px;">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </div>
            <div class="test-opt-date">
                <span v-for="(item, index) in analyasisTime" :key="item.label" class="time-box" @click="timeHandle(index)">
                    <span :class="item.is_active">{{ i18n(item.label) }}</span>
                </span>
            </div>
            <!-- 时间 -->
            <div class="test-opt-time">
                <el-date-picker class="date-input analysis-date-input" v-model="dayTime" v-show="dateType == 'day'" type="date" :picker-options="pickerOptions1" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                </el-date-picker>
                <el-date-picker class="date-input analysis-date-input" v-show="dateType == 'week'" v-model="weekTime" align="right" type="week" :format="datePickerFormatter('week')" size="mini" :placeholder="$t('pholder.week')" :picker-options="pickerOptions1">
                </el-date-picker>
                <el-date-picker class="date-input analysis-date-input" v-show="dateType == 'month'" v-model="monthTime" align="right" type="month" :format="datePickerFormatter('month')" size="mini" :placeholder="$t('pholder.month')" :picker-options="pickerOptions1">
                </el-date-picker>
                <el-date-picker class="date-input analysis-date-input" v-show="dateType == 'year'" v-model="yearTime" align="right" type="year" :format="datePickerFormatter('year')" size="mini" :placeholder="$t('pholder.year')" :picker-options="pickerOptions1">
                </el-date-picker>
                <el-date-picker class="time-opt time-opt-custom"  v-show="dateType == 'custom'"  v-model="customTime" value-format="yyyy-MM-dd" align="right" type="daterange" size="mini" :picker-options="pickerOptions1" range-separator="-" :start-placeholder="$t('table.startTime')" :end-placeholder="$t('table.endTime')">
                </el-date-picker>
            </div>
        </div>
        <div class="opt-right">
            <el-button type="primary" class="primary-btn behavior-collapse-btn" size="samll"
                :disabled="(dateType == 'day' && !dayTime) || (dateType == 'week' && !weekTime) || (dateType == 'month' && !monthTime) ||(dateType == 'year' && !yearTime)
                || (dateType == 'custom' && !customTime)" 
                @click="clickHandle">{{$t('button.confirm')}}</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            date1: '',
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            },
            mallName: '',
            mallVal: '',
            mallOpt: [],
            customTime: [],
            all_id: [],
            isAll: false,
            isSingle: false,
            arr: [],
            idArr: [],
            isSelAll: false,
            analyasisTime: [{
                label: 'day',
                value: 'day',
                is_active: 'time-btn',
            },{
                label: 'week',
                value: 'week',
                is_active: 'time-btn',
            },{
                label: 'month',
                value: 'month',
                is_active: 'time-btn',
            }, {
                label: 'year',
                value: 'year',
                is_active: 'time-btn',
            }, {
                label: 'custom',
                value: 'custom',
                is_active: 'time-btn'
            }],
            dayTime: '',
            weekTime: '',
            monthTime: '',
            yearTime: '',
            customTime: '',
            dateType: 'day',
        }
    },
    created() {
    },
    watch: {
        dayTime(val) {
            this.sessionDate('dayDate', val);
        },
        weekTime(val) {
            this.sessionDate('weekDate', val);
        },
        monthTime(val) {
            this.sessionDate('monthDate', val);
        },
        yearTime(val) {
            this.sessionDate('yearDate', val);
        },
        customTime(val) {
            this.sessionDate('customDate', val);
        }
    },
    mounted() {
        this.getMallList();
        this.timeHandle(0)
        let {dayDate, weekDate, monthDate , yearDate, customDate} = this.createDate();
        this.dayTime = dayDate;
        this.weekTime = weekDate;
        this.monthTime = monthDate;
        this.yearTime = yearDate;
        this.customTime = customDate;
    },
    methods: {
        i18n(label){
            let langaugeLabel = 'asisTab.' + label
            return this.$t(langaugeLabel)
        },
        getMallList() {
            this.mallOpt = [];
            this.mallVal = '';
            this.mallName = '';
            this.isSelAll = false;
            this.getCommonMalls().then(resolveData => {
                let {mallData,localMallId,titleName,multiMallId} = resolveData;
                this.mallOpt = mallData;
                this.mallVal = multiMallId.length && multiMallId || [localMallId]
                // let localMultiMallId = window.sessionStorage.getItem('multiMallId');
                // localMultiMallId = localMultiMallId || [];
                // if(localMultiMallId.length === 0) {
                //     this.mallVal = [localMallId];
                // }else {
                //     this.mallVal =  multiMallId;
                // }
                this.mallName = titleName + ' ';
                this.isSelAll = this.mallVal.length < this.mallOpt.length ? false : true;
                this.clickHandle();
            },(rejectData) => {
            })
        },
        chooseMall() {
            // Array.prototype.indexOf = function(val) {
            //     for (var i = 0; i < this.length; i++) {
            //     if (this[i] == val) return i;
            //     }
            //     return -1;
            // };
            // Array.prototype.remove = function(val) {
            //     var index = this.indexOf(val);
            //     if (index > -1) {
            //     this.splice(index, 1);
            //     }
            // };
            // var temp1 = [], temp2 = [];
            // if(this.arr.length > this.mallVal.length){
            //     temp1 = this.arr
            //     temp2 = this.mallVal
            // }else{
            //     temp1 = this.mallVal
            //     temp2 = this.arr
            // }
            // var temp = [];
            // var tempstr = '';
            // for(var i=0;i<temp2.length;i++){
            //     temp[temp2[i]] = true;
            // }
            // for(var i=0;i<temp1.length;i++){
            //     if(!temp[temp1[i]]){
            //         tempstr=temp1[i];
            //     }
            // }
            // if(tempstr !== "all" && this.isSingle == false){
            //     this.mallVal.remove("all")
            //     this.isAll = false
            //     this.isSingle = true
            // }else if(tempstr !== "all" && this.isSingle == true && this.mallVal.length == 1){
            //     this.mallVal.push("all")
            //     this.isSingle = false
            //     this.isAll = true
            // }else if(tempstr == "all" && this.isAll == false){
            //     this.mallVal = [];
            //     for(var i=0;i<this.all_id.length;i++){
            //         this.mallVal.push(this.all_id[i])                  
            //     }
            //     this.mallVal.push("all")
            //     this.isAll = true
            //     this.isSingle = false
            // }else if(tempstr == "all" && this.isAll == true){
            //     this.mallVal = []
            //     this.isAll = false
            //     this.isSingle = false
            // }
            // this.arr=this.mallVal;
            this.isSelAll = this.behaviorMallChange(this.mallVal,this.mallOpt)
        },
        selAllHandle() {
            if (this.isSelAll) {
                this.isSelAll = false;
                if (this.mallVal.length == this.mallOpt.length) {
                    this.mallVal = [];
                }
            } else {
                this.isSelAll = true;
                if (this.mallVal.length == this.mallOpt.length) {
                    this.mallVal = [];
                } else {
                    this.mallVal = [];
                    this.mallOpt.forEach(item => {
                        this.mallVal.push(item.id);
                    })
                }
            }
        },
        clickHandle() {
            this.$emit('startLoading', 'mallGroup');
            // for (var i = 0; i < this.mallVal.length; i++) {
            //     if (this.mallVal[i] !== "all") {
            //         this.idArr.push(this.mallVal[i])
            //     }
            // }
            if (this.mallVal.length > 1) {
                this.mallName = this.$t('title.mall') + ' '
            }else{
                this.mallOpt.forEach(item => {
                    if (item.id == this.mallVal[0]) {
                        this.mallName = item.name + ' ';
                    }
                });
            }
            let orgIds = '';
            this.mallVal.forEach((item, index, arr) => {
                orgIds += item + ',';
            })
            let formatDate = this.newDateFormat(this.dateType,this[this.dateType + 'Time']);
            let startDate = formatDate.startTime;
            let endDate = formatDate.endTime;
            orgIds = orgIds.substring(0, orgIds.length - 1);
            let params = {
                orgIds: orgIds,
                startDate: startDate,
                endDate: endDate,
                title: this.mallName + startDate + ' ' +this.$t('dialog.to') + ' ' + endDate + ' ',
                dateType: this.dateType,
            }
            this.$emit('emitParams', params);
        },
        timeHandle(index) {
            if (this.analyasisTime[index].is_active === 'time-btn') {
                this.analyasisTime.forEach(element => {
                    element.is_active = 'time-btn';
                });
                this.analyasisTime[index].is_active = 'time-btn active-time';
                this.dateType = this.analyasisTime[index].value;
            }
        },
    }
}
</script>

<style scoped>
    .test-opt-time .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        height: 100%
    }

    .test-opt-time .time-opt .el-input__inner {
        height: 100% !important;
    }
    .test-opt-date {
        float: left;
        font-size: 12px;
        margin-right: 20px;
    }
    @media only screen and (max-width: 1680px) {
        .test-opt-time .time-opt {
            width: 264px;
        }
    }
    @media only screen and (max-width: 1440px) {
        .test-opt-time .time-opt {
            width: 264px;
        }
    }

    @media only screen and (max-width: 1366px) {
        .test-opt-time .time-opt {
            width: 264px;
        }
    }
    @media only screen and (max-width: 1280px) {
        .test-opt-time .time-opt {
            width: 264px;
        }
    }
</style>