schedulePlan.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <div id="home">
  3. <a-card title="我的计划" style="width: 100%">
  4. <p>
  5. <FullCalendar :options="calendarOptions" class="eventDeal-wrap" />
  6. <save-plan ref="savePlan" :fatherMethod="search" :fatherData="timeList"></save-plan>
  7. </p>
  8. </a-card>
  9. </div>
  10. </template>
  11. <script>
  12. import FullCalendar from '@fullcalendar/vue'
  13. import dayGridPlugin from '@fullcalendar/daygrid'
  14. import interactionPlugin from '@fullcalendar/interaction'
  15. import timeGridPlugin from '@fullcalendar/timegrid'
  16. import '@fullcalendar/daygrid/main.css'
  17. import SavePlan from './add/savePlan' // 子组件
  18. import { scheduleGetListByTime, scheduleQueryById } from '@api/oa/cd-schedule'
  19. // import { mapGetters } from 'vuex'
  20. // import { getAction } from '@/api/manage'
  21. // import '@fullcalendar/core/main.css'
  22. // import moment from 'moment'
  23. // import 'moment/locale/zh-cn'
  24. export default {
  25. name: 'SchedulePlan',
  26. components: {
  27. FullCalendar,
  28. SavePlan // 弹框 日程表单
  29. },
  30. data () {
  31. return {
  32. timeList: '', // 点击的时间
  33. // 日历参数
  34. calendarOptions: {
  35. // 日程数组
  36. events: [
  37. {
  38. title: 'Meeting',
  39. start: '2021-10-13T14:30:00',
  40. end: '2021-10-13T14:30:00',
  41. extendedProps: {
  42. status: 'done'
  43. },
  44. backgroundColor: 'orange',
  45. borderColor: 'none'
  46. }
  47. ],
  48. // 引入插件
  49. plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
  50. // 日历头部按钮位置
  51. headerToolbar: {
  52. left: 'prev,next today',
  53. center: 'title',
  54. right: 'dayGridMonth, timeGridWeek, timeGridDay'
  55. },
  56. // 日历头部按钮中文转换
  57. buttonText: {
  58. today: '今天',
  59. month: '月',
  60. week: '周',
  61. day: '天'
  62. },
  63. initialView: 'dayGridMonth', // 指定默认显示视图
  64. locale: 'zh-ch', // 切换语言,当前为中文
  65. firstDay: '1', // 设置一周中显示的第一天是周几,周日是0,周一是1,以此类推
  66. weekNumberCalculation: 'ISO', // 与firstDay配套使用
  67. eventCOlor: '#3d8eec', // 全部日历日程背景色
  68. timeGridEventMinHeight: '20', // 设置事件的最小高度
  69. aspectRatio: '1.5', // 设置日历单元格宽高比
  70. displayEventTime: false, // 是否显示事件时间
  71. allDaySlot: false, // 周、日视图时,all-day不显示
  72. eventLimit: true, // 设置月日程,与all-day slot 的最大显示数量,超过的通过弹窗展示
  73. eventTimeFormat: {
  74. hour: 'numeric',
  75. minute: '2-digit',
  76. hour12: false
  77. },
  78. slotLabelFormat: {
  79. hour: '2-digit',
  80. minute: '2-digit',
  81. meridiem: false,
  82. hour12: false // 设置时间为24小时制
  83. },
  84. // 事件
  85. editable: true, // 是否可以进行(拖动、缩放)修改
  86. eventStartEditable: true, // Event日程开始时间可以改变,默认为true,若为false,则表示开始结束时间范围不能拉伸,只能拖拽
  87. eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变,默认为true,若为false,则表示开始结束时间范围不能拉伸,只能拖拽
  88. selectable: true, // 是否可以选中日历格
  89. selectMirror: true,
  90. selectMinDistance: 0, // 选中日历格的最小距离
  91. weekends: true,
  92. navLinks: true, // 天链接
  93. selectHelper: false,
  94. selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠,默认为true,允许
  95. dayMaxEvents: true,
  96. dateClick: this.handleDateClick, // 日期点击
  97. eventsSet: this.handleEvents, // 事件点击
  98. eventClick: this.handleEventClick, // 日程点击信息展示
  99. eventDrop: this.handleEventDrop, // 日程拖动事件
  100. eventResize: this.eventResize // 日程缩放事件
  101. },
  102. selectDate: [], // 点击的日期
  103. data: {}, // 表单回显数据
  104. dateStr: '', // 点击日期回显的开始时间
  105. addForm: this.$form.createForm(this, { name: 'coordinated' })
  106. }
  107. },
  108. created () {
  109. this.search()
  110. },
  111. computed: {},
  112. mounted () {},
  113. methods: {
  114. // 点击日期
  115. handleDateClick (e) {
  116. const selectData = e.dateStr
  117. console.log('父组件点击的日期:', selectData)
  118. // 点击的时间赋值给 timeList,并在页面传给传给子组件
  119. this.timeList = selectData
  120. // =====父组件拿子组件==================================
  121. // this.$refs.savePlan.formData.startTime = selectData
  122. // this.$refs.savePlan.formData.endTime = selectData
  123. // =====================================================
  124. this.$refs.savePlan.savePlanModalVisible = true
  125. this.$refs.savePlan.setStartTime() // 调用子组件回显日期方法
  126. },
  127. // 点击日程,回显信息
  128. handleEventClick (e) {
  129. // 拿 子组件弹框属性
  130. this.$refs.savePlan.savePlanModalVisible = true
  131. console.log('点击项ID', e.event.id)
  132. if (e.event.id) {
  133. // 根据id查询日程(注意接口文档传参格式要求)
  134. this.$nextTick(() => {
  135. scheduleQueryById({ id: e.event.id }).then(res => {
  136. if (res.success) {
  137. // console.log('该ID的日程', res)
  138. let formData = res.result // 查询结果赋值
  139. this.data = formData
  140. console.log('表单回显数据', this.data)
  141. this.$refs.savePlan.formData = this.data // 查询到的日程数据赋值给子组件表单
  142. this.$refs.savePlan.getFormInfo() // 调用子组件的回显数据
  143. }
  144. })
  145. })
  146. }
  147. },
  148. // 查询日程
  149. search () {
  150. scheduleGetListByTime(null).then(res => {
  151. if (res.success) {
  152. console.log('查询日程总', res)
  153. let list = res.result // 查询结果
  154. var eventList = [] // 日程事件集合
  155. // 循环日程
  156. list.forEach(e => {
  157. let Object = {
  158. title: e.title,
  159. start: e.startTime,
  160. end: e.endTime,
  161. id: e.id,
  162. backgroundColor: e.backgroundColor,
  163. extendedProps: {
  164. status: 'done'
  165. }
  166. }
  167. eventList.push(Object) // 把日程推到日程列表
  168. })
  169. // 刷新 日程列表
  170. this.calendarOptions.events = eventList
  171. }
  172. })
  173. },
  174. // 日程总集合
  175. handleEvents (info) {
  176. // console.log('总事件集合handleEvents.info:', info)
  177. // this.currentEvents = events
  178. },
  179. // 日程保存
  180. saveEvent (val) {
  181. let eventsArr = this.calendarOptions.events
  182. try {
  183. if (eventsArr.length === 0) {
  184. eventsArr.push(val)
  185. } else {
  186. eventsArr.forEach((item, index, eventsArr) => {
  187. // 若为修改日程
  188. if (item.eventID === val.eventID) {
  189. throw new Error(index)
  190. }
  191. })
  192. // 若为新增日程
  193. eventsArr.push(val)
  194. }
  195. } catch (e) {
  196. // 若为修改日程
  197. eventsArr.splice(e.message, 1, val)
  198. }
  199. },
  200. prev () {
  201. this.calendarApi.prev()
  202. console.log(this.calendarApi.prev)
  203. },
  204. // 日程删除
  205. deleteEvent (val) {
  206. let eventsArr = this.calendarOptions.events
  207. try {
  208. eventsArr.forEach((item, index, eventsArr) => {
  209. if (item.eventID === val) {
  210. throw new Error(index)
  211. }
  212. })
  213. } catch (e) {
  214. // 删除指定日程
  215. eventsArr.splice(parseInt(e.message), 1)
  216. }
  217. },
  218. handleWeekendsToggle () {
  219. console.log('handleWeekendsToggle')
  220. this.calendarOptions.weekends = !this.calendarOptions.weekends
  221. },
  222. // 日程事件触发
  223. eventClick (info) {
  224. console.log('eventClick.info:', info)
  225. info.el.style.borderColor = 'orange'
  226. },
  227. // 日程拖动事件
  228. handleEventDrop (info) {
  229. this.$refs['eventDialogue'].eventFormModel.start = info.event.start
  230. this.$refs['eventDialogue'].eventFormModel.end = info.event.end
  231. },
  232. // 日程缩放事件
  233. eventResize (info) {
  234. this.$refs['eventDialogue'].eventFormModel.start = info.event.start
  235. this.$refs['eventDialogue'].eventFormModel.end = info.event.end
  236. }
  237. }
  238. }
  239. </script>
  240. <style lang="less" scoped>
  241. /deep/ .ant-card-head-title {
  242. text-shadow: 1px 1px 2px rgb(170, 169, 169);
  243. color: #1890ff;
  244. }
  245. </style>