spfm-market-front/src/pages/main/leader/rliZQ.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" style="font-weight: 900;" @click="weekPre"></i>
                <i class="el-icon-arrow-right" style="font-weight: 900;" @click="weekNext"></i>
            </div>
            <!-- 年份 月份 -->
            <div class="month">
                <span style="text-align: left;font-size: 16px;font-weight: 600;position: absolute;left: 20px;">我的日程</span>
                <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, index)" 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>
            <div style="padding: 10px 0px;" @click="addnewr" v-loading="loading">
                <div class="rlitable" v-if="tableData.length > 0">
                    <span v-for="(item, index) in tableData" :key="index" class="rlitit"
                        @click.stop="handleEventClick(item)">
                        <span class="rlitit2">{{ item.startTime }}~{{ item.endTime }}</span>
                        <span class="rlitit3">
                            <span class="rlitit4">{{ item.name }}</span>
                            <span class="rlitit4">{{ item.remark }}</span>
                        </span>

                    </span>
                </div>
                <div v-else class="rlitable2">
                    <div style="padding:10px;text-align: center;">
                        点击此处可添加日程
                    </div>

                </div>
            </div>
            <!-- <el-table v-loading="loading" :data="tableData" style="width: 100%;" height="123">
                <el-table-column prop="date" label="日期" width="180" align="center">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180" align="center">
                </el-table-column>
                <el-table-column prop="address" label="地址" align="center">
                </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> -->
            <!--日程新增弹窗start-->
            <el-dialog :title="titleNew" :visible.sync="dialogVisible" :before-close="close" :modal="false" width="45%">
                <el-form :model="form" :rules="rules" ref="form" label-width="120px" size="small" class="demo-ruleForm"
                    v-if="dialogVisible">
                    <el-form-item label="日程名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="日程开始时间" required>
                        <el-col :span="11">
                            <el-form-item prop="begindate" style="margin-bottom: 0">
                                <el-date-picker type="date" disabled format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                    placeholder="选择日期" v-model="form.begindate" style="width: 100%">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-form-item prop="startTime" style="margin-bottom: 0">
                                <el-select v-model="form.startTime" placeholder="选择时间" clearable>
                                    <el-option v-for="item in timeOptions" :key="item.time" :disabled="item.disabled"
                                        :label="item.time" :value="item.time" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="日程结束时间" required>
                        <el-col :span="11">
                            <el-form-item prop="enddate" style="margin-bottom: 0">
                                <el-date-picker type="date" disabled format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                    placeholder="选择日期" v-model="form.enddate" style="width: 100%">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-form-item prop="endTime" style="margin-bottom: 0">
                                <el-select v-model="form.endTime" placeholder="选择时间" clearable>
                                    <el-option v-for="item in timeOptions" :key="item.time" :disabled="item.disabled"
                                        :label="item.time" :value="item.time" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="日程备注" prop="remark">
                        <el-input type="textarea" v-model="form.remark" maxlength="1000" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button v-if="form.id" type="danger" @click="delForm()">删除</el-button>
                        <el-button @click="resetForm('form')">取消</el-button>
                        <el-button type="primary" @click="submitForm('form')">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <!--日程新增弹窗end-->
        </div>
    </div>
</template>
   
<script>
import { getNowdata, } from "../../../http/api.js";//../../../http/api.js
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 弄'
                },
            ],
            loading: false,
            params: {},
            page: 1, //第几页
            size: 10, //一页多少条
            total: 50, //总条目数
            subList: [],
            array: [],
            roleNameList: [
                {
                    userId: 1,
                    name: "分管公司领导/部门负责人",
                },
                {
                    userId: 2,
                    name: "部门负责人",
                },
                {
                    userId: 3,
                    name: "部门分管线条领导/科室主任",
                },
            ],
            isParrty: [
                {
                    is_party: "1",
                    name: "是",
                },
                {
                    is_party: "0",
                    name: "否",
                },
            ],
            dialogVisible: false,
            titleNew: "",
            form: {
                name: "",
                userId: "",
                begindate: "",
                startTime: "",
                enddate: "",
                endTime: "",
                remark: "",
                leaderName: "",
                roleId: "",
                roleColor: "",
                id: "",
                isParty: "否",
                // roleName: '分管公司领导/部门负责人'
                // roleName: [],
                orgId: [2, 3],
                // orgIds: "[2,3]",
            },
            rules: {
                name: [{ required: true, message: "请输入日程主题", trigger: "blur" }],
                // userid: [
                //     { required: true, message: "请选择日程室使用人", trigger: "change" },
                // ],
                begindate: [
                    { required: true, message: "请选择开始日期", trigger: "change" },
                ],
                startTime: [
                    { required: true, message: "请选择开始时间", trigger: "change" },
                ],
                enddate: [
                    { required: true, message: "请选择结束日期", trigger: "change" },
                ],
                endTime: [
                    { required: true, message: "请选择结束时间", trigger: "change" },
                ],
                remark: [
                    { required: true, message: "请填写日程备注", trigger: "blur" },
                ],
                // leaderName: [{ required: true, message: "发起科室", trigger: "blur" }],
                // isParty: [{ required: true, message: "是否是党会", trigger: "change" }],
                // roleName:[{required: true, message: '参会角色', trigger: 'change'}],
                // orgId: [{ required: true, message: "参会角色", trigger: "change" }],
                // orgIds: [{required: true, message: '参会角色', trigger: 'change'}]
            },
            // 时间选项
            timeOptions: [
                { time: "08:00" },
                { time: "08:30" },
                { time: "09:00" },
                { time: "09:30" },
                { time: "10:00" },
                { time: "10:30" },
                { time: "11:00" },
                { time: "11:30" },
                { time: "12:00" },
                { time: "12:30" },
                { time: "13:00" },
                { time: "13:30" },
                { time: "14:00" },
                { time: "14:30" },
                { time: "15:00" },
                { time: "15:30" },
                { time: "16:00" },
                { time: "16:30" },
                { time: "17:00" },
                { time: "17:30" },
                { time: "18:00" },
            ],
            // 备份
            backupTimeOptions: [
                { time: "08:00" },
                { time: "08:30" },
                { time: "09:00" },
                { time: "09:30" },
                { time: "10:00" },
                { time: "10:30" },
                { time: "11:00" },
                { time: "11:30" },
                { time: "12:00" },
                { time: "12:30" },
                { time: "13:00" },
                { time: "13:30" },
                { time: "14:00" },
                { time: "14:30" },
                { time: "15:00" },
                { time: "15:30" },
                { time: "16:00" },
                { time: "16:30" },
                { time: "17:00" },
                { time: "17:30" },
                { time: "18:00" },
            ],
            nowdata: '',
        }
    },
    created() {
        this.getnowdata()
        // 上面的日历
        this.dateList(this.dateNum);
        // console.log(this.dateRange);
        // 下面的日历
        this.initData();
        this.getList();

    },
    methods: {
        getnowdata(val) {
            let yy = new Date().getFullYear()
            let mm = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
            let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
            this.nowdata = yy + '-' + mm + '-' + dd
        },
        //重置数据
        resetForm(formName) {
            this.dialogVisible = false;
            this.$refs[formName].resetFields();
        },
        //删除数据
        delForm(e) {
            this.$http({
                url: "/market/HomePageSchedule/del",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: this.form,
            }).then((res) => {
                // console.log(res);
                this.dialogVisible = false;
                if (res.data.result === 1) {
                    this.$message({
                        message: res.data.desc,
                        type: "error",
                    });
                } else {
                    this.$message({
                        message: "成功",
                        type: "success",
                    });
                    // location.reload();
                    this.getList();
                }
            });
        },
        // 提交数据
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.form.begindate = `${this.form.begindate} ${this.form.startTime}`;
                    this.form.enddate = `${this.form.enddate} ${this.form.endTime}`;
                    // console.log(this.form, "数据");
                    this.dialogVisible = false;
                    if (this.form.id === "") {
                        this.form === "";
                    }
                    if (new Date(this.form.enddate) < new Date(this.form.begindate)) {
                        this.$message({
                            message: "日程时间填写错误",
                            type: "error",
                        });
                    } else {
                        this.$http({
                            url: this.form.id ? "/market/HomePageSchedule/update" : "/market/HomePageSchedule/add",
                            method: "post",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            data: this.form,
                        }).then((res) => {
                            // console.log(res);
                            this.loadinged = false;
                            if (res.data.result === 1) {
                                this.$message({
                                    message: res.data.desc,
                                    type: "error",
                                });
                            } else {
                                this.$message({
                                    message: "成功",
                                    type: "success",
                                });
                                // location.reload();
                                this.getList();
                            }
                        });
                    }
                } else {
                    // console.log("error submit!!");
                    return false;
                }
            });
        },
        // 日历日程点击事件
        handleEventClick(e) {
            this.titleNew = "日程修改";
            this.dialogVisible = true;
            this.form = e
            this.form.begindate = this.nowdata
            this.form.enddate = this.nowdata
        },
        //新增日程
        addnewr() {
            console.log(11);
            this.form = {
                begindate: this.nowdata,//开始时间
                enddate: this.nowdata, //结束时间
                loginNo: JSON.parse(window.sessionStorage.userInfo).loginNo,
                day: this.nowdata
            }
            // this.form.orgId = [];
            // this.form.isParty = "";
            this.titleNew = "日程新增";
            // if (!this.auth) {
            //     return;
            // }
            //开始时间
            // this.form.begindate = this.nowdata;
            // //结束时间
            // this.form.enddate = this.nowdata;

            this.dialogVisible = true;
        },
        //关闭弹窗，重置表单
        close() {
            this.dialogVisible = false;
            this.$refs["form"].resetFields();
        },
        // 获取日程信息
        getList() {
            this.loading = true
            this.$http({
                url: "/market/HomePageSchedule/queryList",//queryPage带分页
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    day: this.nowdata
                },
            }).then((res) => {
                console.log("res", res);
                this.tableData = res.data;
                this.loading = false
                // this.array = res.data;
                // // this.getReservationList(this.array.scheduleList0);
                // this.getReservationList(this.array);
            });
        },
        // 获取日程事件title
        getTitle(date1, date2, isParty) {
            let start =
                isParty == "1"
                    ? "★" + date1.substring(11, 16)
                    : date1.substring(11, 16);
            let end = date2.substring(11, 16);
            return `${start}~${end}`;
        },
        // 日期加1天
        addDate(date, days) {
            var d = new Date(date);
            d.setDate(d.getDate() + days);
            var mon =
                d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
            let endD = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
            return `${d.getFullYear()}-${mon}-${endD}`;
        },
        // 上面的日历

        // 获取当前时间的周一
        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)
            let days = document.querySelector(".days");
            for (var i = 0; i <= 6; i++) {
                days.childNodes[i].childNodes[0].childNodes[0].className = ''
            }
        },
        //  下个星期
        weekNext() {
            const d = this.days[6]    // 如果当期日期是7号或者小于7号
            d.setDate(d.getDate() + 7)
            this.initData(d)
            let days = document.querySelector(".days");
            for (var i = 0; i <= 6; i++) {
                days.childNodes[i].childNodes[0].childNodes[0].className = ''
            }
        },
        // 上一個月   传入当前年份和月份
        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, index) {
            // console.log(date);
            // console.log(index);
            let days = document.querySelector(".days");
            // console.log(days.childNodes[index].childNodes[0].childNodes);
            // console.log(days.childNodes);
            for (var i = 0; i <= 6; i++) {
                days.childNodes[i].childNodes[0].childNodes[0].className = ''
            }
            if (days.childNodes[index].childNodes[0].childNodes[0].className == '') {
                days.childNodes[index].childNodes[0].childNodes[0].className = 'active'
            } else {
                days.childNodes[index].childNodes[0].childNodes[0].className = ''
            }
            this.nowdata = this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
            this.getList()
        },
    },
};
</script>
   
<style lang="scss" scoped>
::v-deep .el-table .el-table__cell {
    padding: 8px 0;
}

::v-deep .el-table__header-wrapper {
    display: none;
}

.rlitable {
    display: flex;
    flex-direction: column;
    max-height: 161px;
    overflow-y: auto;
    padding-top: 5px;
    padding-left: 5%;
    padding-right: 5%;
    height: 161px;
    background-color: #d8eaf6;
    border-radius: 10px;

}

.rlitit {
    padding: 12px;
    line-height: 0px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}

.rlitit2 {
    padding: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 110px;
}

.rlitit3 {
    padding: 5px;
}

.rlitit4 {
    padding: 5px;
}

.rlitit:hover {
    background-color: #ffffff;
}

.rlitable2 {
    max-height: 161px;
    overflow-y: auto;
    height: 161px;
    background-color: #d8eaf6;
    border-radius: 10px;
}

ul {
    padding: 0;
}

li {
    list-style-type: none;
}

/* 上面的日历 */
.calendar {
    position: relative;
    width: 100%;
    background: #fff;
    margin-top: 10px;
    border-radius: 10px;
    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: 10px;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #ffffff;
}

.arrow0 {
    width: 100%;
    max-height: 46px;
    position: absolute;
    top: 10px;
    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;
    margin: 10px 0px;
}

.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;
    line-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: #52d4fc !important;
}

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