cd-work-flow-web/src/views/oa/my-plan/schedulePlan.vue

<template>
  <div id="home">
    <a-card title="我的计划" style="width: 100%">
      <p>
        <FullCalendar :options="calendarOptions" class="eventDeal-wrap" />
        <save-plan ref="savePlan" :fatherMethod="search" :fatherData="timeList"></save-plan>
      </p>
    </a-card>
  </div>
</template>

<script>

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import '@fullcalendar/daygrid/main.css'
import SavePlan from './add/savePlan' // 子组件
import { scheduleGetListByTime, scheduleQueryById } from '@api/oa/cd-schedule'
// import { mapGetters } from 'vuex'
// import { getAction } from '@/api/manage'
// import '@fullcalendar/core/main.css'
// import moment from 'moment'
// import 'moment/locale/zh-cn'
export default {
    name: 'SchedulePlan',
    components: {
        FullCalendar,
        SavePlan //  弹框 日程表单
    },
    data () {
        return {
            timeList: '', // 点击的时间
            // 日历参数
            calendarOptions: {
                // 日程数组
                events: [
                    {
                        title: 'Meeting',
                        start: '2021-10-13T14:30:00',
                        end: '2021-10-13T14:30:00',
                        extendedProps: {
                            status: 'done'
                        },
                        backgroundColor: 'orange',
                        borderColor: 'none'
                    }
                ],
                // 引入插件
                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
                // 日历头部按钮位置
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth, timeGridWeek, timeGridDay'
                },
                // 日历头部按钮中文转换
                buttonText: {
                    today: '今天',
                    month: '月',
                    week: '周',
                    day: '天'
                },
                initialView: 'dayGridMonth', // 指定默认显示视图
                locale: 'zh-ch', // 切换语言，当前为中文
                firstDay: '1', // 设置一周中显示的第一天是周几，周日是0，周一是1，以此类推
                weekNumberCalculation: 'ISO', // 与firstDay配套使用
                eventCOlor: '#3d8eec', // 全部日历日程背景色
                timeGridEventMinHeight: '20', // 设置事件的最小高度
                aspectRatio: '1.5', // 设置日历单元格宽高比
                displayEventTime: false, // 是否显示事件时间
                allDaySlot: false, // 周、日视图时，all-day不显示
                eventLimit: true, // 设置月日程，与all-day slot 的最大显示数量，超过的通过弹窗展示
                eventTimeFormat: {
                    hour: 'numeric',
                    minute: '2-digit',
                    hour12: false
                },
                slotLabelFormat: {
                    hour: '2-digit',
                    minute: '2-digit',
                    meridiem: false,
                    hour12: false // 设置时间为24小时制
                },

                // 事件
                editable: true, // 是否可以进行（拖动、缩放）修改
                eventStartEditable: true, // Event日程开始时间可以改变，默认为true，若为false,则表示开始结束时间范围不能拉伸，只能拖拽
                eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认为true,若为false，则表示开始结束时间范围不能拉伸，只能拖拽
                selectable: true, // 是否可以选中日历格
                selectMirror: true,
                selectMinDistance: 0, // 选中日历格的最小距离
                weekends: true,
                navLinks: true, // 天链接
                selectHelper: false,
                selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认为true，允许
                dayMaxEvents: true,
                dateClick: this.handleDateClick, // 日期点击
                eventsSet: this.handleEvents, // 事件点击
                eventClick: this.handleEventClick, // 日程点击信息展示
                eventDrop: this.handleEventDrop, // 日程拖动事件
                eventResize: this.eventResize // 日程缩放事件
            },
            selectDate: [], // 点击的日期
            data: {}, // 表单回显数据
            dateStr: '', // 点击日期回显的开始时间
            addForm: this.$form.createForm(this, { name: 'coordinated' })
        }
    },
    created () {
        this.search()
    },
    computed: {},
    mounted () {},
    methods: {
    // 点击日期
        handleDateClick (e) {
            const selectData = e.dateStr
            console.log('父组件点击的日期:', selectData)
            this.timeList = selectData
            // =====父组件拿子组件==================================
            // this.$refs.savePlan.formData.startTime = selectData
            // this.$refs.savePlan.formData.endTime = selectData
            // =====================================================
            this.$refs.savePlan.savePlanModalVisible = true
            this.$refs.savePlan.setStartTime() // 调用子组件回显日期方法
        },
        // 点击日程(回显)
        handleEventClick (e) {
            this.$refs.savePlan.savePlanModalVisible = true
            console.log('点击项ID', e.event.id)
            if (e.event.id) {
                // 根据id查询日程（注意接口文档传参格式要求）
                this.$nextTick(() => {
                    scheduleQueryById({ id: e.event.id }).then(res => {
                        if (res.success) {
                            let formData = res.result // 查询结果赋值
                            this.data = formData
                            console.log('表单回显数据', this.data)
                            this.$refs.savePlan.formData = this.data // 查询到的日程数据赋值给子组件表单
                            this.$refs.savePlan.getFormInfo() // 调用子组件的回显数据
                        }
                    })
                })
            }
        },

        // 查询日程
        search () {
            scheduleGetListByTime(null).then(res => {
                if (res.success) {
                    console.log('查询日程总', res)
                    let list = res.result // 查询结果
                    var eventList = [] // 日程事件集合
                    // 循环日程
                    list.forEach(e => {
                        let Object = {
                            title: e.title,
                            start: e.startTime,
                            end: e.endTime,
                            id: e.id,
                            backgroundColor: e.backgroundColor,
                            extendedProps: {
                                status: 'done'
                            }
                        }
                        eventList.push(Object) // 把日程推到日程列表
                    })
                    // 刷新 日程列表
                    this.calendarOptions.events = eventList
                }
            })
        },

        // 日程总集合
        handleEvents (info) {
            // console.log('总事件集合handleEvents.info:', info)
            // this.currentEvents = events
        },

        // 日程保存
        saveEvent (val) {
            let eventsArr = this.calendarOptions.events
            try {
                if (eventsArr.length === 0) {
                    eventsArr.push(val)
                } else {
                    eventsArr.forEach((item, index, eventsArr) => {
                        // 若为修改日程
                        if (item.eventID === val.eventID) {
                            throw new Error(index)
                        }
                    })
                    // 若为新增日程
                    eventsArr.push(val)
                }
            } catch (e) {
                // 若为修改日程
                eventsArr.splice(e.message, 1, val)
            }
        },
        prev () {
            this.calendarApi.prev()
            console.log(this.calendarApi.prev)
        },
        // 日程删除
        deleteEvent (val) {
            let eventsArr = this.calendarOptions.events
            try {
                eventsArr.forEach((item, index, eventsArr) => {
                    if (item.eventID === val) {
                        throw new Error(index)
                    }
                })
            } catch (e) {
                // 删除指定日程
                eventsArr.splice(parseInt(e.message), 1)
            }
        },

        handleWeekendsToggle () {
            console.log('handleWeekendsToggle')
            this.calendarOptions.weekends = !this.calendarOptions.weekends
        },

        // 日程事件触发
        eventClick (info) {
            console.log('eventClick.info:', info)
            info.el.style.borderColor = 'orange'
        },
        // 日程拖动事件
        handleEventDrop (info) {
            this.$refs['eventDialogue'].eventFormModel.start = info.event.start
            this.$refs['eventDialogue'].eventFormModel.end = info.event.end
        },
        // 日程缩放事件
        eventResize (info) {
            this.$refs['eventDialogue'].eventFormModel.start = info.event.start
            this.$refs['eventDialogue'].eventFormModel.end = info.event.end
        }
    }
}
</script>
<style lang="less" scoped>
/deep/ .ant-card-head-title {
  text-shadow: 1px 1px 2px rgb(170, 169, 169);
  color: #1890ff;
}
/deep/ .fc-daygrid-day-number {
    font-size: 20px !important;
}
/deep/ .fc-event-title {
    font-size: 14px !important;
    // white-space: break-spaces;
}
/deep/.fc-col-header>thead{
    height: 63px !important;
    line-height: 63px !important;
    background: #081f5b !important;
}
/deep/.fc-theme-standard td, .fc-theme-standard th{
    border: 1px solid #9ec3e0 !important;
}
/deep/.fc .fc-daygrid-day-top{
    flex-direction:column !important
}
/deep/.fc-daygrid-day-top>.fc-daygrid-day-number{
    color: #9178ba;
    font-size: 16px !important;
}
/deep/.fc .fc-col-header-cell-cushion{
    color: white;
    font-size: 16px;
}
/deep/.fc-event-title{
 color: #717171;
}
/deep/.fc .fc-daygrid-day.fc-day-today{
    background-color: white !important;
}
/deep/.fc-daygrid-event-dot{
    // border-color: #081f5b !important;
}
/deep/.fc .fc-toolbar-title{
    font-size: 30px !important;
}
/deep/.fc-event-title.fc-sticky{
    color: white;
}
/deep/.fc-scrollgrid-sync-table{
    height: 634px !important;
}
/deep/.fc-view-harness.fc-view-harness-active{
    height: 705.33px !important;
    // margin-left: 2%;

}
/deep/.fc .fc-scrollgrid, .fc .fc-scrollgrid table{
    width: 81% !important;
    margin-left: 8%;
}
/deep/.fc .fc-scrollgrid-section table{
    width: 100% !important;
}
/deep/.fc .fc-scrollgrid-section-body table, .fc .fc-scrollgrid-section-footer table{
    width: 100% !important;
}
/deep/ .fc .fc-toolbar.fc-header-toolbar{
    width: 81% !important;
    margin-left: 8%;
}
/deep/.fc .fc-view-harness-active > .fc-{
    display: flex;
    justify-content: center;
}
</style>