Project-Annex/operationSupport/src/views/patrolManagement/popups/scheduling.vue

<template>
    <div class="scheduling">
        <div class="search">
            <el-date-picker
                v-model="monthValue"
                value-format="yyyy-MM-dd"
                type="month"
                placeholder="选择时间"
                :clearable="false"
            ></el-date-picker>
            <div class="search-icon">
                <el-tooltip effect="light" placement="bottom" content="批量排班">
                    <i class="zoniot_font zoniot-icon-piliangshenhe" @click="add()"></i>
                </el-tooltip>
                <el-tooltip effect="light" placement="bottom" content="返回">
                    <i class="zoniot_font zoniot-icon-fanhui" @click="goback()"></i>
                </el-tooltip>
            </div>
        </div>
        <el-calendar first-day-of-week="7" v-model="monthValue">
            <template
                slot="dateCell"
                slot-scope="{ date, data }"
                v-if="data.type === 'current-month'"
            >
                <div class="showDateDay">{{ date | dateNewType }}</div>
                <div class="schedulingUser">
                    <template v-for="(item, index) in calendarData">
                        <div
                            :key="index"
                            v-if="data.day == item.partrolDate"
                            @click="add(data, item)"
                        >
                            <template v-for="itx in item.rosterUserDtos">
                                <div :key="itx" class="listTime">
                                    <span>{{ itx.partrolTime }}</span>
                                    <span>{{ itx.partolName }}</span>
                                </div>
                            </template>
                        </div>
                    </template>
                    <div
                        class="pointSet"
                        v-if="date.getTime()>=new Date(new Date().toLocaleDateString()).getTime()"
                        @click="add(data)"
                    >点击设置</div>
                </div>
            </template>
        </el-calendar>
    </div>
</template>
<script>
export default {
    data() {
        return {
            monthValue: '',
            findUser: [],
            thisObj: {},
            calendarData: []
        };
    },
    filters: {
        dateNewType(val) {
            return val.getDate();
        }
    },
    watch: {
        monthValue(e) {
            try {
                let timeArr = e.split('-');
                let time = new Date(timeArr[0], Number(timeArr[1]), 0);
                this.getShiftInformation({
                    patrolRouteId: this.thisObj.id,
                    startTime: `${timeArr[0]}-${timeArr[1]}-01`,
                    endTime: `${timeArr[0]}-${timeArr[1]}-${time.getDate()}`
                });
            } catch {}
        }
    },
    methods: {
        add(dateDe, onj) {
            let title = '排班',
                isSingle = true;
            if (dateDe == undefined && onj == undefined) {
                title = '批量排班';
                isSingle = false;
            }
            if (dateDe !== undefined && onj !== undefined) {
                new Date(dateDe).getTime() >= new Date(new Date().toLocaleDateString()).getTime();
                return;
            }
            new Promise(resolve => {
                this.$store.dispatch('addPopup', {
                    url: '/patrolManagement/popups/schedulingAdd.vue',
                    width: '450px',
                    height: '300px',
                    props: {
                        callback: resolve,
                        findUser: this.findUser,
                        dateDe,
                        onj,
                        thisObj: this.thisObj,
                        isSingle: isSingle
                    },
                    title: title
                });
            }).then(() => {
                let newTime = this.$moment(this.monthValue).format('YYYY-MM-DD');
                let timeArr = newTime.split('-');
                let time = new Date(timeArr[0], Number(timeArr[1]), 0);
                this.getShiftInformation({
                    patrolRouteId: this.thisObj.id,
                    startTime: `${timeArr[0]}-${timeArr[1]}-01`,
                    endTime: `${timeArr[0]}-${timeArr[1]}-${time.getDate()}`
                });
            });
        },
        goback() {
            this.$emit('initPage');
        },
        initDate(type) {
            this.monthValue = this.$moment().format(type);
        },
        getShiftInformation(obj) {
            this.$http.post('/sc-community/patrolRoute/getShiftInformation', obj).then(({ data, status, msg }) => {
                if (!!data) {
                    this.calendarData = [];
                    for (let inx in data) {
                        let rosterUserDtos = [];
                        data[inx].map(item => {
                            rosterUserDtos.push({
                                partrolTime: item.patrolTime,
                                partolName: item.partolName
                            });
                        });
                        this.calendarData.push({
                            partrolDate: this.$moment(inx).format('YYYY-MM-DD'),
                            rosterUserDtos: rosterUserDtos
                        });
                    }
                }
            });
        }
    },
    created() {
        this.initDate('YYYY-MM-DD');
    },
    mounted() {
        this.findUser = this.$parent.findUser;
        this.thisObj = this.$parent.thisObj;
        this.$el.querySelector('div.el-calendar__header').remove();
    }
};
</script>
<style scoped lang='scss'>
.scheduling {
    font-size: 12px;
    .showDateDay {
        font-size: 30px;
        text-align: center;
    }
    .schedulingUser {
        cursor: pointer;
        padding: 0 20px;
        line-height: 25px;
        .listTime {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
    .pointSet {
        cursor: pointer;
        line-height: 35px;
        text-align: center;
    }
    /deep/ .el-calendar-table {
        &:not(.is-range) {
            td.next {
                pointer-events: none;
            }
            td.prev {
                pointer-events: none;
            }
            td.current {
                // pointer-events: none;
            }
        }
        .el-calendar-day {
            height: 110px;
            overflow: hidden;
        }
    }
}
</style>