|
|
@@ -1,213 +1,259 @@
|
|
|
<template>
|
|
|
<div id="home">
|
|
|
- <FullCalendar :options="calendarOptions" class="eventDeal-wrap" />
|
|
|
- <a-modal
|
|
|
- v-model="savePlanModalVisible"
|
|
|
- title="新增日程计划"
|
|
|
- @ok="handleOk"
|
|
|
- @cancel="handleCancel"
|
|
|
- width="80%"
|
|
|
- >
|
|
|
- <save-plan ref="savePlan"></save-plan>
|
|
|
- </a-modal>
|
|
|
+ <a-card title="我的计划" style="width: 100%">
|
|
|
+ <p>
|
|
|
+ <FullCalendar :options="calendarOptions" class="eventDeal-wrap" />
|
|
|
+ <save-plan ref="savePlan" :fatherMethod="search"></save-plan>
|
|
|
+ </p>
|
|
|
+ </a-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import { getAction } from '@/api/manage'
|
|
|
+// import { mapGetters } from 'vuex'
|
|
|
+// import { getAction } from '@/api/manage'
|
|
|
+// import '@fullcalendar/core/main.css'
|
|
|
import FullCalendar from '@fullcalendar/vue'
|
|
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
|
|
import interactionPlugin from '@fullcalendar/interaction'
|
|
|
import timeGridPlugin from '@fullcalendar/timegrid'
|
|
|
-// import '@fullcalendar/core/main.css'
|
|
|
import '@fullcalendar/daygrid/main.css'
|
|
|
-import SavePlan from './add/savePlan'
|
|
|
+import SavePlan from './add/savePlan' // 子组件
|
|
|
+import { scheduleGetListByTime, scheduleQueryById } from '@api/oa/cd-schedule'
|
|
|
+// import moment from 'moment'
|
|
|
+// import 'moment/locale/zh-cn'
|
|
|
export default {
|
|
|
- name: 'SchedulePlan',
|
|
|
- components: {
|
|
|
- FullCalendar,
|
|
|
- SavePlan
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- savePlanModalVisible:false,
|
|
|
- ///////////////////日历参数
|
|
|
- calendarOptions: {
|
|
|
- // 引入的插件
|
|
|
- plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
|
|
|
- // 日历头部按钮位置
|
|
|
- headerToolbar: {
|
|
|
- left: 'prev,next today',
|
|
|
- center: 'title',
|
|
|
- right: 'dayGridMonth, timeGridWeek, timeGridDay'
|
|
|
+ name: 'SchedulePlan',
|
|
|
+ components: {
|
|
|
+ FullCalendar,
|
|
|
+ SavePlan // 新增日程表单组件
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ // dateStr: '', // 开始日期为点击的日期
|
|
|
+ // 日历参数
|
|
|
+ calendarOptions: {
|
|
|
+ // 日程数组
|
|
|
+ events: [
|
|
|
+ {
|
|
|
+ title: 'Meeting',
|
|
|
+ start: '2021-10-13T14:30:00',
|
|
|
+ end: '2021-10-13T14:30:00',
|
|
|
+ extendedProps: {
|
|
|
+ status: 'done'
|
|
|
+ },
|
|
|
+ backgroundColor: '#ccd5ae',
|
|
|
+ borderColor: 'red'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 引入的插件
|
|
|
+ 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: {}, // 表单回显数据
|
|
|
+ addForm: this.$form.createForm(this, { name: 'coordinated' })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.search()
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ mounted () {},
|
|
|
+ methods: {
|
|
|
+ prev () {
|
|
|
+ this.calendarApi.prev()
|
|
|
+ console.log(this.calendarApi.prev)
|
|
|
},
|
|
|
- // 日历头部按钮中文转换
|
|
|
- buttonText: {
|
|
|
- today: '今天',
|
|
|
- month: '月',
|
|
|
- week: '周',
|
|
|
- day: '天'
|
|
|
+ // 查询数据库日程数据
|
|
|
+ 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,
|
|
|
+ extendedProps: {
|
|
|
+ status: 'done'
|
|
|
+ },
|
|
|
+ backgroundColor: 'orange',
|
|
|
+ borderColor: 'orange'
|
|
|
+ }
|
|
|
+ eventList.push(Object) // 把日程推到日程列表
|
|
|
+ // console.log('打印出的事件id', Object.id)
|
|
|
+ })
|
|
|
+ console.log('日程', eventList)
|
|
|
+ // 刷新 日程列表
|
|
|
+ this.calendarOptions.events = eventList
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
- 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
|
|
|
+
|
|
|
+ // 日程总集合
|
|
|
+ handleEvents (info) {
|
|
|
+ // console.log('总事件集合handleEvents.info:', info)
|
|
|
+ // 打印了事件（完成、位置）
|
|
|
+ // this.currentEvents = events
|
|
|
},
|
|
|
- slotLabelFormat: {
|
|
|
- hour: '2-digit',
|
|
|
- minute: '2-digit',
|
|
|
- meridiem: false,
|
|
|
- hour12: false // 设置时间为24小时制
|
|
|
+
|
|
|
+ // 日期点击
|
|
|
+ handleDateClick (selectDate) {
|
|
|
+ // if (confirm('您是否要在【' + selectDate.dateStr + '】添加一个新的事件？')) {
|
|
|
+ // // 父组件直接调用子组件方法
|
|
|
+ // this.$refs['eventDialogue'].openDialog('add')
|
|
|
+ // // 父组件直接修改子组件变量
|
|
|
+ // // this.$refs['eventDialogue'].dialogVisible = true
|
|
|
+ // }
|
|
|
+ console.log('点击的时间是', selectDate.dateStr)
|
|
|
+ this.theDate = selectDate.dateStr
|
|
|
+ console.log(this.theDate)
|
|
|
+ this.$refs.savePlan.savePlanModalVisible = true
|
|
|
},
|
|
|
- events: [
|
|
|
- {
|
|
|
- title: 'Meeting',
|
|
|
- start: '2021-10-13T14:30:00',
|
|
|
- extendedProps: {
|
|
|
- status: 'done'
|
|
|
+
|
|
|
+ // 点击日程，回显信息，并可修改，修改请求
|
|
|
+ handleEventClick (e, id) {
|
|
|
+ // 使用子组件的 弹框中的 addForm表单
|
|
|
+ this.$refs.savePlan.savePlanModalVisible = true
|
|
|
+ console.log('点击了一条日程：回显该日程信息、可编辑、发送修改请求', e)
|
|
|
+ // 发送根据id查询日程的请求 (注意传参格式要求)
|
|
|
+ if (e.event.id) {
|
|
|
+ scheduleQueryById({ id: e.event.id }).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ console.log('该ID的日程', res)
|
|
|
+ let formData = res.result // 查询结果赋值
|
|
|
+ this.data = formData
|
|
|
+ console.log('表单回显数据555', this.data)
|
|
|
+ // this.data = JSON.parse(JSON.stringify(this.data))
|
|
|
+ this.$refs.savePlan.formData = this.data
|
|
|
+ this.$refs.savePlan.getById()
|
|
|
+ console.log('走到这')
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
- },
|
|
|
- {
|
|
|
- title: 'Birthday Party',
|
|
|
- start: '2021-10-14T07:00:00',
|
|
|
- backgroundColor: 'green',
|
|
|
- borderColor: 'green'
|
|
|
- }
|
|
|
- ], // 日程数组
|
|
|
- // 事件
|
|
|
- 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 // 日程缩放事件
|
|
|
- }
|
|
|
- ,selectInfo:{}//选择的日期
|
|
|
- /////////////////////////////////日历参数结尾
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- },
|
|
|
- computed: {
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 日程保存
|
|
|
- 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)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 日程保存
|
|
|
+ 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)
|
|
|
}
|
|
|
- })
|
|
|
- // 若为新增日程
|
|
|
- eventsArr.push(val)
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- // 若为修改日程
|
|
|
- eventsArr.splice(e.message, 1, val)
|
|
|
- }
|
|
|
- },
|
|
|
- // 日程删除
|
|
|
- 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)
|
|
|
- }
|
|
|
- },
|
|
|
- // 日程事件点击
|
|
|
- handleEvents(info) {
|
|
|
- console.log('handleEvents.info:', info)
|
|
|
- // this.currentEvents = events
|
|
|
-
|
|
|
- },
|
|
|
- handleWeekendsToggle() {
|
|
|
- console.log('handleWeekendsToggle')
|
|
|
- this.calendarOptions.weekends = !this.calendarOptions.weekends
|
|
|
- },
|
|
|
- // 日期点击
|
|
|
- handleDateClick(selectInfo) {
|
|
|
- // if (confirm('您是否要在【' + selectInfo.dateStr + '】添加一个新的事件？')) {
|
|
|
- // // 父组件直接调用子组件方法
|
|
|
- // this.$refs['eventDialogue'].openDialog('add')
|
|
|
- // // 父组件直接修改子组件变量
|
|
|
- // // this.$refs['eventDialogue'].dialogVisible = true
|
|
|
- // }
|
|
|
- console.log(selectInfo)
|
|
|
- this.selectInfo=selectInfo;
|
|
|
- this.savePlanModalVisible=true;
|
|
|
- },
|
|
|
- // 日程点击信息展示
|
|
|
- handleEventClick(info) {
|
|
|
- console.log('handleEventClick.info:', info)
|
|
|
- info.el.style.borderColor = 'red'
|
|
|
- this.$refs['eventDialogue'].openDialog('view', info)
|
|
|
- },
|
|
|
- // 日程事件触发
|
|
|
- eventClick(info) {
|
|
|
- console.log('eventClick.info:', info)
|
|
|
- info.el.style.borderColor = 'red'
|
|
|
- },
|
|
|
- // 日程拖动事件
|
|
|
- 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
|
|
|
- },
|
|
|
- handleOk(){
|
|
|
- var selectObject={
|
|
|
- title: this.$refs.savePlan.note,
|
|
|
- start: this.selectInfo.dateStr,
|
|
|
- extendedProps: {
|
|
|
- status: 'done'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 日程删除
|
|
|
+ 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)
|
|
|
}
|
|
|
- }
|
|
|
- this.calendarOptions.events.push(selectObject)
|
|
|
- this.savePlanModalVisible=false;
|
|
|
- },
|
|
|
- handleCancel(){
|
|
|
+ },
|
|
|
+
|
|
|
+ handleWeekendsToggle () {
|
|
|
+ console.log('handleWeekendsToggle')
|
|
|
+ this.calendarOptions.weekends = !this.calendarOptions.weekends
|
|
|
+ },
|
|
|
|
|
|
+ // 日程事件触发
|
|
|
+ eventClick (info) {
|
|
|
+ console.log('eventClick.info:', info)
|
|
|
+ info.el.style.borderColor = 'red'
|
|
|
+ },
|
|
|
+ // 日程拖动事件
|
|
|
+ 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;
|
|
|
+}
|
|
|
</style>
|
liangyan0105