123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253 |
- <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)
- // 点击的时间赋值给 timeList,并在页面传给传给子组件
- 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) {
- // console.log('该ID的日程', res)
- 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;
- }
- </style>
|