手喽个日历

<template>
    <div class="calender">
        <div class="count">
            <i-form
                style="display: flex; justify-content: space-between; align-items: center"
            >
                <i-form-item
                    label="日期："
                    style="display: flex"
                >
                    <i-date-picker
                        type="month"
                        placeholder="开始时间"
                        style="width: 160px"
                        format="yyyy-MM"
                        :value="date"
                        :clearable="false"
                        @on-change="selectStartTime"
                    />
                </i-form-item>
                <i-form-item>
                    <i-checkbox
                        v-model="allCheck"
                        :disabled="allShow"
                        @on-change="allSelected"
                    >全选</i-checkbox>
                    <i-button
                        type="primary"
                        :disabled="disabled"
                        @click="setRoster"
                    >设置咨询排班</i-button>
                </i-form-item>
            </i-form>
        </div>
        <div
            style="padding: 0 20px"
        >
            <header>
                <div v-for="(item, key) in week" :key="item + key">
                    {{ item }}
                </div>
            </header>
            <div class="dateTable">
                <div v-for="(i, k) in list" :key="i + k">
                    <div
                        v-if="k >= getMonthFirst && k < getMonthFirst + curDay"
                        class="tableCount"
                        :style="{backgroundColor: i.num === 0 ? '#e2e2e2' : '#f0f2f5'}"
                    >
                        <p>
                            <i-checkbox
                                v-if="i.num === 0"
                                v-model="i.checkout"
                                :disabled="i.select"
                                @on-change="check(i)"
                            />
                            <span>
                                {{ i.date }}
                            </span>
                        </p>
                        <p>
                            <span>
                                {{ i.num > 0 ? `排班医生：${i.num}` : '无排班' }}
                            </span>
                            <span
                                v-if="+new Date(year, month - 1, day) + 28800000 <= +new Date(i.date)"
                            >
                                <i-icon
                                    type="ios-add-circle"
                                    size="18"
                                    @click="addRoster(i.date)"
                                />
                            </span>
                            <span v-if="i.num > 0">
                                <i-icon
                                    type="md-search"
                                    size="18"
                                    @click="view(i.date)"
                                />
                            </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import iDatePicker from '@components/date-picker';
import iForm from '@components/form';
import iFormItem from '@components/form-item';
import Api from '@platform/api/roster';
import iCheckbox from '@components/checkbox';
import iButton from '@components/button';
import iIcon from '@components/icon';

export default {
    components: {
        iDatePicker,
        iForm,
        iFormItem,
        iCheckbox,
        iButton,
        iIcon,
    },
    data() {
        return {
            year: null,
            month: null,
            day: null,
            week: ['日', '一', '二', '三', '四', '五', '六'],
            date: '',
            num: 0,
            list: [],
            disabled: true,
            allCheck: false,
            selected: false,
            oldYear: null,
            oldMonth: null,
            oldDay: null,
            loading: true,
            selectList: [],
            allShow: false,
        };
    },
    created() {
        // 初始化时间
        this.getNowDate();
        this.getDate();
    },
    computed: {
        // 获取每个月一号
        getMonthFirst: {
            get() {
                return new Date(this.oldYear, this.oldMonth - 1, 1).getDay();
            },
            set(val) {
            },
        },
        // 日期为O是，获取当月总天数
        curDay: {
            get() {
                return new Date(this.oldYear, this.oldMonth, 0).getDate();
            },
            set(val) {
            },
        },
    },
    methods: {
        // 获取当前日期
        getNowDate() {
            const date = new Date();
            this.year = date.getFullYear();
            this.month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
            this.day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            this.date = this.year + '-' + this.month;
            this.oldYear = date.getFullYear();
            this.oldMonth = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        },
        selectStartTime(i) {
            this.date = i;
            this.getDate();
            this.allCheck = false;
            const date = new Date(i);
            this.oldYear = date.getFullYear();
            this.oldMonth = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        },
        async getDate() {
            this.loading = false;
            const { data, status } = await
                this.$http.post(Api.date, {
                                    date: this.date,
                                    type: '1',
                                },
                                {
                                    headers: {
                                        'Content-type': 'application/json',
                                    },
                                }
                );
            if (status === 0) {
                this.list = data.map(x => ({ ...x, checkout: false,
                                             select: +new Date(x.date) < +new Date() - 86400000 }));
                const index = data.filter(item => {
                    return item.num === 0 && +new Date(item.date) > +new Date() - 86400000;
                });
                if (+index.length === 0) {
                    this.allShow = true;
                } else {
                    this.allShow = false;
                }
                this.reorg(this.list);
            }
            this.loading = true;
        },
        // 日历表格数据处理
        reorg(data) {
            for (let i = 0; i < this.getMonthFirst; i++) {
                data.unshift({});
            }
            if (this.getMonthFirst <= 4) {
                const num = 35 - data.length;
                for (let j = 0; j < num; j++) {
                    data.push({});
                };
            } else {
                const num = 42 - data.length;
                for (let j = 0; j < num; j++) {
                    data.push({});
                };
            }
            this.list = data;
        },
        // 新增排班
        addRoster(val) {
            const arr = [];
            arr.push({
                date: val,
                week: this.week[new Date(val).getDay()],
            });
            this.$router.push({
                path: '/main/organizationalManagement/newRoster',
                query: {
                    date: JSON.stringify(arr),
                },
            });
        },
        // 查看排班
        view(val) {
            this.$router.push({
                path: '/main/organizationalManagement/oldRoster',
                query: {
                    date: val,
                },
            });
        },
        check() {
            const select = this.list.find(value => {
                return value.checkout === true;
            });
            if (select === undefined) {
                this.disabled = true;
                this.allCheck = false;
            } else {
                this.disabled = false;
            };
            this.selectList = [];
            this.list.forEach(i => {
                if (i.checkout) {
                    this.selectList.push({
                        date: i.date,
                        num: i.num,
                    });
                }
            });
        },
        // 全选的时候
        allSelected() {
            this.list.forEach(i => {
                if (new Date(this.year,
                             this.month - 1,
                             this.day).getTime() + 28800000
                    <= new Date(i.date).getTime()) {
                    i.checkout = this.allCheck;
                }
            });
            this.list.forEach(i => {
                if (i.checkout) {
                    this.selectList.push(i);
                };
            });
            if (this.allCheck) {
                this.disabled = false;
            } else {
                this.disabled = true;
                this.selectList = [];
            };
        },
        // 设置咨询排班
        setRoster() {
            this.selectList.forEach(item => {
                item.week = this.week[new Date(item.date).getDay()];
            });
            const newArr = this.selectList.filter(key => {
                return key.num === 0;
            });
            this.$router.push({
                path: '/main/organizationalManagement/newRoster',
                query: {
                    date: JSON.stringify(newArr),
                },
            });
        },
    },
};
</script>
<style lang="less" scoped>
.calender{
    &>div:nth-of-type(2) {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
header{
    width: 100%;
    display: flex;
    border-left: 1px solid;
    &>div{
        width: 14.285%;
        border: 1px solid;
        padding: 10px 0;
        border-top: 2px solid;
        text-align: center;
    }
    &>div:last-child{
        border-right: 2px solid;
    }
}
.dateTable{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid;
    border-top: none;
    &>div{
        width: 14.285%;
        border: 1px solid;
    }
}
.tableCount{
    padding: 20px 10px;
    height: 100%;
    &>p:first-child{
        display: flex;
        &>span:last-child{
            text-align: center;
            flex: 1;
        }
    }
    &>p:last-child{
        margin-top: 10px;
        text-align: center;
    }
}
.c-gap-bg {
    background: #fff;
    padding: 15px 15px 2px 15px;
    display: flex;
    align-items: center;
}
/deep/ .ivu-form{
    width: 100%;
}
.roster{
    background-color: #e2e2e2;
}
.count{
    background-color: #FFffff;
    display: flex;
    margin: 20px;
    padding: 15px;
    /deep/ .ivu-form-item{
        margin-bottom: 0;
    }
}
</style>