spfm-market-front/src/pages/main/leader/rli.vue

<template>
    <div>
        <!-- <div class="calendar">
            <div class="arrow">
                <i class="el-icon-arrow-left" @click="arrow('left')"></i>
                <i class="el-icon-arrow-right" @click="arrow('right')"></i>
            </div>
            <el-calendar v-model="value" :range="dateRange"></el-calendar>
        </div> -->
        <!-- 下面的日历 -->
        <div class="date">
            <div class="arrow0">
                <i class="el-icon-arrow-left" @click="weekPre"></i>
                <i class="el-icon-arrow-right" @click="weekNext"></i>
            </div>
            <!-- 年份 月份 -->
            <div class="month">
                <p>{{ currentYear }}年{{ currentMonth }}月</p>
            </div>
            <!-- 星期 -->
            <ul class="weekdays">
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
                <li>日</li>
            </ul>
            <!-- 日期 -->
            <ul class="days">
                <li @click="pick(day)" v-for="(day, index) in days" :key="index">
                    <!--本月-->
                    <span v-if="day.getMonth() + 1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
                    <span v-else>
                        <!--今天-->
                        <span
                            v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"
                            class="active">{{ day.getDate() }}</span>
                        <span v-else>{{ day.getDate() }}</span>
                    </span>
                </li>
            </ul>
            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
            </el-table>
            <el-pagination @current-change="currchange" :current-page="page" :page-size="size"
                layout="total,prev, pager, next" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
   
<script>
export default {
    data() {
        return {
            // 上
            value: "",
            endDate: "",
            dateRange: [],
            dateNum: 0,
            // 下
            currentYear: "",   // 年份
            currentMonth: "",  // 月份
            currentDay: "",    // 日期
            currentWeek: "",    // 星期
            days: [],
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            loading:false,
            params: {},
            page: 1, //第几页
            size: 10, //一页多少条
            total: 50, //总条目数
        }
    },
    created() {
        // 上面的日历
        this.dateList(this.dateNum);
        console.log(this.dateRange);
        // 下面的日历
        this.initData();
        this.getlist();
    },
    methods: {

        currchange(val) {
            console.log("翻页，当前为第几页", val);
            this.page = val;
            this.getlist(this.params, this.page);
        },
        getlist(v, n) {
            this.loading=true
            this.$http({
                url: "/market/waf/queryTodoBase",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + n + '","pageSize":"10"}',
                },
                data: { tableName: 'fxfk_process', },
            }).then((res) => {
                this.loading=false
                this.tableData = res.data.data;
                this.total = res.data.totalRecord;
            });
        },
        // 上面的日历

        // 获取当前时间的周一
        getMonday(date) {
            var day = date.getDay();
            var deltaDay;
            if (day == 0) {
                deltaDay = 6;
            } else {
                deltaDay = day - 1;
            }
            var monday = new Date(date.getTime() - deltaDay * 24 * 60 * 60 * 1000);
            monday.setHours(0);
            monday.setMinutes(0);
            monday.setSeconds(0);
            return monday; //返回选定时间的周一的0时0分0秒
        },
        getDateNew(time) {
            console.log(time);
            let times = new Date(time);
            let year = times.getFullYear();
            let month = times.getMonth() + 1 < 10 ? "0" + (times.getMonth() * 1 + 1) : times.getMonth() * 1 + 1;
            let day = times.getDate() < 10 ? "0" + times.getDate() * 1 : times.getDate() * 1;
            return year + "-" + month + "-" + day;
        },
        dateList(delta) {
            //将时间对象转换为时间戳并加几天后转换为时间对象
            var DateNews = this.getMonday(
                new Date((new Date().getTime() / 1000 + 86400 * 7 * delta) * 1000)
            );
            let startDate = this.getDateNew(DateNews, delta);
            this.endDate = this.getDateNew(
                new Date((DateNews.getTime() / 1000 + 6 * 86400) * 1000)
            );
            this.dateRange = [startDate, this.endDate];
        },
        arrow(arrow) {
            if (arrow == "left") {
                this.dateNum--;
                this.dateList(this.dateNum);
            } else if (arrow == "right") {
                this.dateNum++;
                this.dateList(this.dateNum);
            }
        },

        // 下面的日历

        formatDate(year, month, day) {
            const y = year
            let m = month
            if (m < 10) m = `0${m}`
            let d = day
            if (d < 10) d = `0${d}`
            return `${y}-${m}-${d}`
        },
        initData(cur) {
            let date = ''
            if (cur) {
                date = new Date(cur)
            } else {
                date = new Date()
            }
            this.currentDay = date.getDate()          // 今日日期 几号
            this.currentYear = date.getFullYear()       // 当前年份
            this.currentMonth = date.getMonth() + 1    // 当前月份
            this.currentWeek = date.getDay() // 1...6,0   // 星期几
            if (this.currentWeek === 0) {
                this.currentWeek = 7
            }
            const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay) // 今日日期 年-月-日
            this.days.length = 0
            // 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
            /* eslint-disabled */
            for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
                const d = new Date(str)
                d.setDate(d.getDate() - i)
                // console.log(y:" + d.getDate())
                this.days.push(d)
            }
            for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
                const d = new Date(str)
                d.setDate(d.getDate() + i)
                this.days.push(d)
            }
        },
        //  上个星期
        weekPre() {
            const d = this.days[0]    // 如果当期日期是7号或者小于7号
            d.setDate(d.getDate() - 7)
            this.initData(d)
        },
        //  下个星期
        weekNext() {
            const d = this.days[6]    // 如果当期日期是7号或者小于7号
            d.setDate(d.getDate() + 7)
            this.initData(d)
        },
        // 上一個月   传入当前年份和月份
        pickPre(year, month) {
            const d = new Date(this.formatDate(year, month, 1))
            d.setDate(0)
            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
        },
        // 下一個月   传入当前年份和月份
        pickNext(year, month) {
            const d = new Date(this.formatDate(year, month, 1))
            d.setDate(35)
            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
        },
        // 当前选择日期
        pick(date) {
            alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))
        },
    },
};
</script>
   
<style lang="scss" scoped>
ul {
    padding: 0;
}

li {
    list-style-type: none;
}

/* 上面的日历 */
.calendar {
    position: relative;
    width: 100%;
    background: #fff;
    margin-top: 20px;
    margin-left: 20px;
}

.el-calendar__header {
    display: block;
}

.el-calendar-table .el-calendar-day {
    height: auto;
    text-align: center;
}

.el-calendar-table td.is-selected {
    background-color: #24b18d;
    color: #fff;
}

.el-calendar-table .el-calendar-day:hover {
    background-color: #24b18d;
    color: #fff;
}

.el-calendar-table {
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 15px;
}

.el-calendar-table .next {
    color: rgb(143, 143, 143);
}

.el-calendar__title,
.el-calendar__button-group {
    text-align: center;
}

.arrow {
    width: 100%;
    max-height: 46px;
    position: absolute;
    top: 15px;
    text-align: center;
}

.arrow i {
    font-size: 20px;
    cursor: pointer;
}

.arrow i:nth-child(1) {
    margin-right: 10%;
    text-align: left;
}

.arrow i:nth-child(2) {
    margin-left: 10%;
    text-align: right;
}

/* 下面的日历 */
.date {
    position: relative;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #D3D3D3;
}

.arrow0 {
    width: 100%;
    max-height: 46px;
    position: absolute;
    top: 27px;
    left: 0px;
    text-align: center;
}

.arrow0 i {
    font-size: 20px;
    cursor: pointer;
}

.arrow0 i:nth-child(1) {
    margin-right: 10%;
    text-align: left;
}

.arrow0 i:nth-child(2) {
    margin-left: 10%;
    text-align: right;
}

.month {
    text-align: center;
}

.weekdays {
    display: flex;
}

.weekdays li {
    flex: 1;
    text-align: center;
}

.days {
    display: flex;
}

.days li {
    flex: 1;
    text-align: center;
    cursor: pointer;
}

.days li span {
    display: inline-block;
    width: 22px;
    height: 22px;
}

.days li span:hover {
    color: #fff;
    background-color: #409EFF;
    border-radius: 50%;
}

.active {
    display: inline-block;
    color: #fff;
    border-radius: 50%;
    background-color: #fa6854 !important;
}

.other-month {
    color: #e4393c;
}
</style>