jy/src/web/staticres/js/selector/date-time-pc.js

// var dateTimeComponentTemplate = `
// <div class="selector-content time-content">
//     <div class="select-group-container" v-show="showSelectGroup">
//         <div
//             v-for="(item, index) in timeSelectList"
//             :key="index"
//             class="j-button-item bgc"
//             :class="{
//                 active: item.selected
//             }"
//             @click="clickTimeButton(item)"
//         >{{ item.name }}</div>
//     </div>
//     <div class="date-time-container section-d">
//         <el-date-picker
//             v-model="dateTimePickerState.start"
//             class="date-time-item section-d-item left"
//             :type="dateTimePickerConf.type"
//             :editable="dateTimePickerConf.editable"
//             :align="dateTimePickerConf.align"
//             :prefix-icon="dateTimePickerConf.prefixIcon"
//             :format="dateTimePickerConf.format"
//             :placeholder="dateTimePickerState.startPlaceHolder"
//             :picker-options="startPickerOptions"
//             @change="startDatePickerChange">
//         </el-date-picker>
//         <el-date-picker
//             v-model="dateTimePickerState.end"
//             class="date-time-item section-d-item right"
//             :type="dateTimePickerConf.type"
//             :editable="dateTimePickerConf.editable"
//             :align="dateTimePickerConf.align"
//             :prefix-icon="dateTimePickerConf.prefixIcon"
//             :format="dateTimePickerConf.format"
//             :placeholder="dateTimePickerState.endPlaceHolder"
//             :picker-options="endPickerOptions"
//             @change="endDatePickerChange">
//         </el-date-picker>
//     </div>
// </div>
// `

var dateTimeComponentTemplate = "\n<div class=\"selector-content time-content\">\n    <div class=\"select-group-container\" v-show=\"showSelectGroup\">\n        <div\n            v-for=\"(item, index) in timeSelectList\"\n            :key=\"index\"\n            class=\"j-button-item bgc\"\n            :class=\"{\n                active: item.selected\n            }\"\n            @click=\"clickTimeButton(item)\"\n        >{{ item.name }}</div>\n    </div>\n    <div class=\"date-time-container section-d\">\n        <el-date-picker\n            v-model=\"dateTimePickerState.start\"\n            class=\"date-time-item section-d-item left\"\n            :type=\"dateTimePickerConf.type\"\n            :editable=\"dateTimePickerConf.editable\"\n            :align=\"dateTimePickerConf.align\"\n            :prefix-icon=\"dateTimePickerConf.prefixIcon\"\n            :format=\"dateTimePickerConf.format\"\n            :placeholder=\"dateTimePickerState.startPlaceHolder\"\n            :picker-options=\"startPickerOptions\"\n            @change=\"startDatePickerChange\">\n        </el-date-picker>\n        <el-date-picker\n            v-model=\"dateTimePickerState.end\"\n            class=\"date-time-item section-d-item right\"\n            :type=\"dateTimePickerConf.type\"\n            :editable=\"dateTimePickerConf.editable\"\n            :align=\"dateTimePickerConf.align\"\n            :prefix-icon=\"dateTimePickerConf.prefixIcon\"\n            :format=\"dateTimePickerConf.format\"\n            :placeholder=\"dateTimePickerState.endPlaceHolder\"\n            :picker-options=\"endPickerOptions\"\n            @change=\"endDatePickerChange\">\n        </el-date-picker>\n    </div>\n</div>\n";

var dateTimeComponent = {
    name: 'date-time-pc',
    template: dateTimeComponentTemplate,
    props: {
        showSelectGroup: {
            type: Boolean,
            default: true
        }
    },
    data: function () {
        return {
            timeSelectList: [
                {
                    name: '全部',
                    value: 'all',
                    selected: true
                },
                {
                    name: '最近7天',
                    value: 'lately7',
                    selected: false
                },
                {
                    name: '最近30天',
                    value: 'lately30',
                    selected: false
                },
                {
                    name: '去年',
                    value: 'lastYear',
                    selected: false
                }
            ],
            dateTimePickerConf: {
                type: 'date',
                editable: false,
                align: 'center',
                prefixIcon: 'clear-icon',
                format: 'yyyy-MM-dd'
            },
            dateTimePickerState: {
                start: '',
                end: '',
                startPlaceHolder: '', // 开始日期
                endPlaceHolder: '' // 结束日期
            },
            startPickerOptions: {
                disabledDate: function (time) {
                    var end = this.dateTimePickerState.end
                    if (end) {
                        return time.getTime() > +new Date(end)
                    }
                }.bind(this)
            },
            endPickerOptions: {
                disabledDate: function (time) {
                    var start = this.dateTimePickerState.start
                    if (start) {
                        return time.getTime() < +new Date(start)
                    }
                }.bind(this)
            }
        }
    },
    created: function () {},
    methods: {
        setState: function () {
            // {
            //   start: 1620230400000, // 2021-5-6
            //   end: 1620489600000, // 2021-5-9
            //   exact: 'all'
            // }
            if (!data || Object.keys(data).length === 0) {
                this.setTimeSelectListState('all')
            } else {
                switch (data.exact) {
                    case 'all': {
                        this.setTimeSelectListState('all')
                        this.clearDateTimePicker()
                        break
                    }
                    case 'lately7': {
                        this.setTimeSelectListState('lately7')
                        this.clearDateTimePicker()
                        break
                    }
                    case 'lately30': {
                        this.setTimeSelectListState('lately30')
                        this.clearDateTimePicker()
                        break
                    }
                    case 'lastYear': {
                        this.setTimeSelectListState('lastYear')
                        this.clearDateTimePicker()
                        break
                    }
                    case 'exact': {
                        if (!data.start || !data.end) break
                        if (data.start < data.end) {
                            this.dateTimePickerState.start = new Date(data.start)
                            this.dateTimePickerState.end = new Date(data.end)
                        }
                        break
                    }
                    default: {
                        console.warn('exact值为空')
                    }
                }
            }
        },
        getState: function () {
            // timeState.exact: all/lately7/lately30/lastYear/exact5种状态
            // 为true时候表示精确筛选，从时间选择器中获取值(其他为根据当前时间计算出的值)
            var timeState = {
                start: 0,
                end: 0,
                exact: 'exact'
            }
            var selectButton = this.timeSelectList.find(function (item) { return item.selected })
            if (selectButton) {
                timeState.exact = selectButton.value
                Object.assign(timeState, this.calcNotExactTime(timeState.exact))
            } else {
                timeState.exact = 'exact'
                timeState.start = this.dateTimePickerState.start.getTime()
                timeState.end = this.dateTimePickerState.end.getTime()
            }
            return timeState
        },
        onChange: function () {
            var state = this.getState()
            this.$emit('change', state)
        },
        setTimeSelectListState: function (value, callback) {
            this.timeSelectList.forEach(function (item) {
                item.selected = item.value === value
                callback && callback(item)
            })
        },
        clearDateTimePicker: function () {
            this.dateTimePickerState.start = ''
            this.dateTimePickerState.end = ''
        },
        // 计算lately7/lately30/lastYear的开始和结束时间
        // endTime传入一个时间戳
        calcNotExactTime: function (exact, endTime) {
            exact = exact || 'lately7'
            endTime = endTime || Date.now()
            var t = {
                start: 0,
                end: +new Date(endTime)
            }
            var durations = {
                hour1: 60 * 60 * 1000,
                day1: 60 * 60 * 1000 * 24 * 1,
                day7: 60 * 60 * 1000 * 24 * 7,
                day30: 60 * 60 * 1000 * 24 * 30
            }
            switch (exact) {
                case 'lately7': {
                    t.start = t.end - durations.day7
                    break
                }
                case 'lately30': {
                    t.start = t.end - durations.day30
                    break
                }
                case 'lastYear': {
                    var year = new Date(t.end).getFullYear()
                    var lastYear = year - 1
                    t.start = +new Date(`${lastYear}`)
                    t.end = +new Date(`${year}`) - durations.hour1 * 8 - 1
                    break
                }
                default: {
                    t.start = 0
                    t.end = 0
                    break
                }
            }
            return t
        },
        clickTimeButton: function (item) {
            if (item.selected) return
            this.timeSelectList.forEach(v => (v.selected = false))
            item.selected = true
      
            this.onChange()
        },
        startDatePickerChange: function (start) {
            var end = this.dateTimePickerState.end
            if (start && end) { // start和end都有值
                this.setTimeSelectListState()
                this.onChange()
            } else if (!start && !end) { // start和end都没值
                this.setTimeSelectListState('all')
                this.onChange()
            }
        },
        endDatePickerChange: function (end) {
            var start = this.dateTimePickerState.start
            if (start && end) { // start和end都有值
              this.setTimeSelectListState()
              this.onChange()
            } else if (!start && !end) { // start和end都没值
              this.setTimeSelectListState('all')
              this.onChange()
            }
        }
    }
}