commonOptionContent.vue

<template>
    <div class="mall-option-content">
        <!-- 对象个数 -->
        <slot name="object-number"></slot>
        <!-- 商场 -->
        <div class="condition-item" v-show="cascadeVisible.mall">
            <span class="condition-item-text">{{$t('asisTab.mallT')}}</span>
            <div class="condition-item-option">
                <el-select
                    v-model="mallVal"
                    filterable
                    :multiple="mallIsMultiple"
                    collapse-tags
                    :placeholder="$t('pholder.shopSelect')"
                    class="mall-sel-box"
                    @change="mallChangeHandle">
                    <div :class="isMallSelectAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('mall')" v-show="mallIsMultiple">
                        <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 mallData" :key="item.id" :label="item.name" :value="item.id">
                        <span class="custom-checkbox__input" v-show="mallIsMultiple">
                            <span class="custom-checkbox__inner"></span>
                        </span>
                        <span :style="mallLabel">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </div>
        </div>
        <!-- 监控点 -->
        <div class="condition-item" v-show="cascadeVisible.gate">
            <span class="condition-item-text">{{$t('asisTab.inOutT')}}</span>
            <div class="condition-item-option">
                <el-select
                    v-model="gateVal"
                    filterable
                    :multiple="gateIsMultiple"
                    collapse-tags
                    :placeholder="$t('pholder.gateType')"
                    class="mall-sel-box"
                    @change="gateChangeHandle">
                    <div :class="isGateSelectAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('gate')" v-show="gateIsMultiple">
                        <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 gateData" :key="item.id" :label="item.name" :value="item.id">
                        <span class="custom-checkbox__input" v-show="gateIsMultiple">
                            <span class="custom-checkbox__inner"></span>
                        </span>
                        <span :style="gateLabel">{{ item.name }}</span>
                    </el-option>
                </el-select>
            </div>
        </div>
        <!-- 日期 -->
        <div class="condition-item" v-show="cascadeVisible.date">
            <span class="condition-item-text spe-item-text">{{$t('asisTab.date')}}</span>
            <div class="condition-item-option">
                <div class="time-wrapper">
                    <el-select v-model="reportVal" :placeholder="$t('pholder.select')" @change="DateHandle(reportVal)">
                        <el-option
                        v-for="item in analyasisTime"
                        :key="item.value"
                        :label="i18nFormatter(item.label)"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
        <div class="condition-item" v-show="cascadeVisible.date">
            <div class="condition-item-option">
                <el-date-picker class="date-input analysis-date-input" v-show="reportTime.isDay" v-model="dayTime" 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 analysis-date-input date-week-box" v-show="reportTime.isWeek" v-model="weekTime" 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 analysis-date-input date-month-box" v-show="reportTime.isMonth" 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="reportTime.isYear" 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="date-input analysis-date-input times-box"
                    v-model="customTime"
                    value-format="yyyy-MM-dd"
                    align="right"
                    type="daterange"
                    size="mini"
                    :picker-options="pickerOptions1"
                    range-separator="-"
                    v-show="reportTime.isCustom"
                    :start-placeholder="$t('table.startTime')"
                    :end-placeholder="$t('table.endTime')">
                </el-date-picker>
            </div>
        </div>
        <!-- 指标 -->
        <slot name="kpi"></slot>
        <!-- 按钮 -->
        <div class="condition-item btn-group">
            <el-button type="primary" class="primary-btn analysis-collapse-btn" size="samll" @click="confirmCondition">{{$t('button.confirm')}}</el-button>
            <!-- <el-button class="reset-btn analysis-collapse-btn" size="samll" @click="resetRefresh">{{$t('button.reset')}}</el-button> -->
        </div>
    </div>
</template>

<script>
export default {
    name: 'commonOptionContent',
    props: {
        activeTab: {
            type: Object,
            required: true,
            default: {}
        }
    },
    data() {
        return {
            ///////////////////////////////////////////////////// 商场 门店
            mallData: [{
                accountId: 2,
                area: 100,
                cityId: 2,
                createTime: "2018-10-24 19:49:36",
                createUser: 2,
                externalId: "11010910476",
                group: {name: "华东区"},
                groupId: 5,
                id: 2,
                intro: "",
                latitude: 40.066593,
                longitude: 116.31105,
                mallNo: "",
                manager: "vion",
                modifyTime: "2019-01-15 10:30:35",
                modifyUser: 2,
                name: "文安智能-北京",
                openDate: "2018-10-01 00:00:00",
                provinceId: 110000,
                status: 1,
                unid: "e15b9a8e-d782-11e8-b19d-7cd30ac4c9a6"
            }],
            multiMallVal: [],
            radioMallVal: null,
            mallIsMultiple: false,
            isMallSelectAll: false,            
            ///////////////////////////////////////////////////// 楼层
            ///////////////////////////////////////////////////// 店铺
            ///////////////////////////////////////////////////// 出入口
            gateData: [{
                account: {name: "文安智能"},
                accountId: 2,
                createTime: "2018-10-24 19:52:23",
                createUser: 3,
                externalId: "abcd",
                floor: {name: "1F"},
                floorId: 2,
                id: 2,
                isHasFace: 1,
                isMallGate: 1,
                mall: {name: "文安智能-北京"},
                mallId: 2,
                modifyTime: "2019-03-06 20:17:06",
                modifyUser: 3,
                name: "模拟门店A",
                status: 1,
                type: 3,
                unid: "44fb714a-d783-11e8-9d18-7cd30ac4c9a6",
                user: {realName: "vion"},
                x: 0,
                y: 0
            }],
            multiGateVal: [],
            radioGateVal: null,
            gateIsMultiple: false,
            isGateSelectAll: 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'
            }],
            reportVal: 'day',
            reportTime: {
                isDay: false,
                isWeek: false,
                isMonth: false,
                isYear: false,
                isCustom: false
            },
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            weekPickerOpt: {
                firstDayOfWeek: 1
            },
            dayTime: '',
            weekTime: '',
            monthTime: '',
            yearTime: '',
            customTime: '',
            ///////////////////////////////////////////////////// 条件选项
            cascadeVisible: {
                mall: false,
                floor: false,
                zone: false,
                gate: false,
                date: false
            },
            ///////////////////////////////////////////////////// 分析条件结果
            conditions: {}
        }
    },
    computed: {
        mallVal() {
            if(this.mallIsMultiple) {
                return this.multiMallVal;
            } else {
                return this.radioMallVal;
            }
        },
        gateVal() {
            if(this.gateIsMultiple) {
                return this.multiGateVal;
            } else {
                return this.radioGateVal;
            }
        },
        mallLabel() {
            if(this.mallIsMultiple) {
                return 'padding-left: 5px';
            } else {
                return '';
            }
        },
        gateLabel() {
            if(this.gateIsMultiple) {
                return 'padding-left: 5px';
            } else {
                return '';
            }
        },
    },
    watch: {
        activeTab: {
            handler: 'createSelector',
            immediate: true
        }
    },
    created() {
        this.DateHandle('day');
        this.initTime();
    },
    methods: {
        i18nFormatter(label){
            let langeLabel = 'asisTab.' + label;
            return this.$t(langeLabel)
        },
        initTime() {
            this.dayTime = this.dayTime ? this.dayTime : dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
            this.customTime = [this.dayReduce(new Date(), 30), dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')];
            this.weekTime = this.weekTime ? this.weekTime : new Date();
            this.monthTime = this.monthTime ? this.monthTime : new Date();
            this.yearTime = this.yearTime ? this.yearTime : new Date();
        },
        createSelector(activeTabItem) {
            this.visibleHandler(false)
            this.visibleHandler(true, activeTabItem.value)
            if(activeTabItem.value === 'mall') {
                this.mallIsMultiple = true;
                this.multiMallVal = [this.mallData[0].id];
                this.gateIsMultiple = false;
                this.radioGateVal = this.gateData[0].id;
                activeTabItem.cascade.forEach(item => {
                    this.visibleHandler(true, item.cascadeOption)
                })
            } else if(activeTabItem.value === 'gate') {
                this.mallIsMultiple = false;
                this.radioMallVal = this.mallData[0].id;
                this.gateIsMultiple = true;
                this.multiGateVal = [this.gateData[0].id];
                activeTabItem.cascade.forEach(item => {
                    this.visibleHandler(true, item.cascadeOption)
                })
            } else {
                this.mallIsMultiple = false;
                this.radioMallVal = this.mallData[0].id;
                this.gateIsMultiple = false;
                this.radioGateVal = this.gateData[0].id;
                activeTabItem.cascade.forEach(item => {
                    this.visibleHandler(true, item.cascadeOption)
                })
            }
        },
        mallChangeHandle() {},
        gateChangeHandle() {},
        selAllHandle(selectorType) {
            //
        },
        DateHandle(value) {
            for(let k in this.reportTime) {
                this.reportTime[k] = false;
            }
            switch (value) {
                case 'day':
                    this.reportTime.isDay = true;
                    break;
                case 'week':
                    this.reportTime.isWeek = true;
                    break;
                case 'month':
                    this.reportTime.isMonth = true;
                    break;
                case 'year':
                    this.reportTime.isYear = true;
                    break;
                case 'custom':
                    this.reportTime.isCustom = true;
                    break;
                default:
                    break;
            }
        },
        visibleHandler(isVisible, value) {
            if(isVisible) {
                this.cascadeVisible[value] = true;
            } else {
                Object.keys(this.cascadeVisible).forEach(key => {
                    this.cascadeVisible[key] = false;
                })
            }
        },
        confirmCondition() {},
        resetRefresh() {}
    }
}
</script>

<style scoped>
    .mall-option-content {
        padding: 15px 0 13px 50px;
        background: #fff;
        /* box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1); */
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
    }
</style>