JS日期排班表(table表格)

JS日期排班表

可以根据当前年月进行自动渲染日期，星期，实现更改年月排布（table横向排版）

<table class="table table-striped table-bordered" style="text-align: center;">
                <thead>
                <tr>
                    <th>星期</th>
                    <th v-for="(item,ind) in headerWeekList" :key="ind">{{item.week}}</th>
                </tr>
                <tr>
                    <th>日期</th>
                    <th v-for="(item,ind) in headerWeekList" :key="ind">{{ind + 1 }}</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in list" :key="index">
                    <td v-for="(val,ind) in item" :key="ind" style="position: relative">
                        <div v-if="date.month >= nowDate.month ">
                            <input type="text" v-if="(val.state == 1) && ind == 0" disabled="disabled" readonly
                                   style="padding: 0 5px;box-sizing: border-box;width: 70px" v-model="val.dutyPerson"/>

                            <input type="text" v-else-if="ind == 0"
                                   style="padding: 0 5px;box-sizing: border-box;width: 70px"
                                   v-model="val.dutyPerson"/>

                            <select v-else-if="(Number(val.dutyDay) < Number(date.day)) && (val.state == 0) && (nowDate.month == date.month) && (ind > 0)"
                                    disabled="true"
                                    v-model="val.dutyType">
                                <option value="班" aria-checked="true">班</option>
                                <option value="休">休</option>
                            </select>
                            <select v-else-if="val.state == 1 && (ind > 0)" disabled="true"
                                    v-model="val.dutyType">
                                <option value="班" aria-checked="true">班</option>
                                <option value="休">休</option>
                            </select>
                            <select v-else v-model="val.dutyType">
                                <option value="班" selected="selected">班</option>
                                <option value="休">休</option>
                            </select>

                            <strong v-if="(ind == 0) && (val.state == 0)"
                                    @click="deleteItem(index)"
                                    style="position: absolute;right: -2px;top: -6px;color: #e27878;cursor: pointer">X</strong>
                            <strong v-if="(ind == 0) && (val.isNew == true )"
                                    @click="deleteItem(index)"
                                    style="position: absolute;right: -2px;top: -6px;color: #e27878;cursor: pointer">X</strong>

                        </div>
                        <div v-else>
                            <input type="text" v-if=" ind == 0" disabled="disabled" readonly
                                   style="padding: 0 5px;box-sizing: border-box;width: 70px" v-model="val.dutyPerson"/>

                            <select v-else-if="ind >0" disabled="true"
                                    v-model="val.dutyType">
                                <option value="班" aria-checked="true">班</option>
                                <option value="休">休</option>
                            </select>

                            <strong v-if="(ind == 0) && (val.state == 0)"
                                    @click="deleteItem(index)"
                                    style="position: absolute;right: -2px;top: -6px;color: #e27878;cursor: pointer">X</strong>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>

//JS部分

function formatDate(time) {
        let date = new Date();
        if (time) date = new Date(time);
        // date = new Date('2021-06-2');
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        var nowDate = new Date(y, m, 0);//运算当前年月
        var dayNum = nowDate.getDate();//获取当前月的天数
        var firstDay = getd(d, date.getDay());//当前月第一天
        var nowTime = Math.round(date / 1000)
        // m = m < 10 ? '0' + m : m;//月
        d = d < 10 ? ('0' + d) : d;//日
        switch (firstDay) {
            case 0:
                firstDay = '日'
                break;
            case 1:
                firstDay = '一'
                break;
            case 2:
                firstDay = '二'
                break;
            case 3:
                firstDay = '三'
                break;
            case 4:
                firstDay = '四'
                break;
            case 5:
                firstDay = '五'
                break;
            case 6:
                firstDay = '六'
                break;
        }
        return {year: y, month: m, day: d, days: dayNum, firstDay: firstDay, nowTime: nowTime}
    }

    //计算当前月的第一天是周几
    function getd(date, day) {
        var result = day - (date % 7 - 1);
        var re = result < 0 ? 7 + result : result;
        return re;
    }

    //将对象的key转小写
    function toUpperCase(jsonObj) {
        var result = {};
        for (key in jsonObj) {
            var keyval = jsonObj[key];
            key = key.replace(key[0], key[0].toLowerCase());
            result[key] = keyval;
        }
        return result;
    }

    new Vue({
        el: '#shiftManagement',
        data: {
            date: {},//存放查询时间
            nowDate: {},//存放当前时间
            weekList: ['日', '一', '二', '三', '四', '五', '六',],//星期列表
            headerWeekList: [],//头部星期列表
            hadList: [],//一个月有的日期数
            list: [],//总列表
            timeData: {},//存放时间日期，查询用
        },
        methods: {
            //初始化
            init(date) {
                if (date) {
                    this.date = formatDate(date);
                } else {
                    this.date = formatDate();
                    this.timeData.month = this.date.month;
                }
                // this.timeData.month = this.date.month;
                this.headerWeekList = this.initList();
                console.log({...this.date});
            },
            //获取当月初始化列表
            initList() {
                let list = [];
                let weekInd = this.weekList.findIndex((item) => {
                    return item == this.date.firstDay;
                })
                for (let i = 0; i < this.date.days; i++) {
                    let obj = {};
                    if (weekInd == 7) {
                        weekInd = 0;
                    }
                    obj.month = this.date.month;
                    obj.dutyDay = i + 1;
                    obj.week = this.weekList[weekInd]
                    obj.dutyType = '班'
                    obj.duttYear = this.date.year;
                    if (weekInd == 6) obj.dutyType = '休'
                    weekInd++;
                    list.push(obj);
                }
                return list;
            },
            //新增人员
            addPeoPle() {
                let arr = this.initList()
                for (let i = 0; i < arr.length; i++) {
                    arr[i].isNew = true;
                }
                arr.unshift({isNew: true, dutyDay: this.date.day, month: this.date.month, dutyYear: this.date.year})
                this.list.push(arr)
                console.log(this.list)
            },
            //删除列表
            deleteItem(ind) {
                const that = this;
                let data = that.list[ind][0];
                let str = "你确定要删除" + (data.dutyPerson || '新增的数据') + "吗？"

                layer.confirm(str, {btn: ['确定', '取消']},
                    function (index) {//确定事件
                        layer.close(index);
                        if (data.isNew) {
                            that.list.splice(ind, 1)
                            return false;
                        }
                        XS.Ajax.postJson("checkChargeAudit", T.ctxPath + "/custserv/afterSalesManage/delDutyForPerson", {person: data.dutyPerson}, function (r) {
                            // that.list.splice(ind, 1)
                            that.getAllList()
                        });
                    });
            },
            //确认提交
            submit() {
                let list = [];
                for (let i = 0; i < this.list.length; i++) {
                    let arr = this.list[i], obj = {};
                    if (arr[0].state == 0 || arr[0].isNew == true) {
                        obj.dutyPerson = arr[0].dutyPerson;
                        obj.dutyMonth = arr[0].month;
                        obj.dutyYear = arr[0].dutyYear;
                        obj.dutyList = [];
                        list.push(obj);
                        for (let j = 0; j < arr.length; j++) {
                            if (j > 0) {
                                let item = arr[j], newObj = {};
                                newObj.dutyType = item.dutyType;
                                newObj.dutyDay = item.dutyDay;
                                obj.dutyList.push(newObj)
                            }
                        }
                    }
                }
                console.log(list)
                if (list.length <= 0) {
                    return false;
                }
                XS.Ajax.postJson("", "${ctx}/custserv/afterSalesManage/addDutyForPerson", {dutyVos: list}, (res) => {
                    this.$nextTick(() => {
                        alert(res.info)
                        this.getAllList()
                        // this.$forceUpdate()
                    })
                });
            },
            //获取数据
            getAllList() {
                let date = this.date.year + "-" + this.timeData.month + "-" + this.date.day;//查询用，获取查询月的天数
                if (this.date.month == 2 && this.date.dutyDay > 28) {//如果是二月份并且天数大于28天
                    date = this.date.year + "-" + this.timeData.month + "-1";
                }
                let param = {
                    month: this.timeData.month ? this.timeData.month.toString() : this.date.month.toString()
                }
                const that = this;
                XS.Ajax.postJson("checkChargeAudit", T.ctxPath + "/custserv/afterSalesManage/queryAllDuty", param, function (res) {
                        if (that.timeData.month) {
                            that.init(date)
                        }
                        let data = res.Result;
                        let arr = [], allList = that.initList(), allArr = [];
                        // console.log(that.initList())
                        for (key in data) {//首先解析外层
                            for (val in data[key]) {
                                // console.log(data[key][val])
                                arr.push(data[key][val])
                            }
                        }

                        for (let j = 0; j < arr.length; j++) {//拼接名字
                            let item = arr[j];
                            for (let i = 0; i < item.length; i++) {
                                arr[j][i] = toUpperCase(arr[j][i]);
                            }
                            let obj = {
                                dutyPerson: arr[j][1].person,
                                state: arr[j][1].state,//0正常、1变灰
                                month: arr[j][1].dutyMonth,
                                dutyYear: that.date.year,
                                dutyDay: arr[j][1].dutyDay,
                            }
                            arr[j].unshift(obj)
                        }
                        console.log(arr)
                        that.list = arr;
                        that.$forceUpdate();
                });
            },
            //查看上一个月
            checkLastMonth() {
                if (this.timeData.month <= 0 || this.timeData.month > 12) {
                    return false;
                }
                this.timeData.month = Number(this.timeData.month) - 1;
                this.getAllList()
            }
        },
        mounted() {
            this.init()
            this.getAllList()
            this.nowDate = formatDate()
        }
    })