todo.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. /**
  2. * @Author: drfu*
  3. * @Description: 代办事项
  4. * @Date: 2020-10-08 21:22:09*
  5. * @Last Modified by: drfu
  6. * @Last Modified time: 2020-10-11 14:23:02
  7. * */
  8. import { getCalendarData, dateUtil } from '../utils/index'
  9. import { renderCalendar } from '../render'
  10. function updateDatePropertyOfTodoLabel(todos, dates, showLabelAlways) {
  11. const datesInfo = [...dates]
  12. for (let todo of todos) {
  13. let targetIdx = datesInfo.findIndex(
  14. item => dateUtil.toTimeStr(item) === dateUtil.toTimeStr(todo)
  15. )
  16. let target = datesInfo[targetIdx]
  17. if (!target) continue
  18. if (showLabelAlways) {
  19. target.showTodoLabel = true
  20. } else {
  21. target.showTodoLabel = !target.choosed
  22. }
  23. if (target.showTodoLabel) {
  24. target.todoText = todo.todoText
  25. }
  26. target.color = todo.color
  27. }
  28. return datesInfo
  29. }
  30. export default () => {
  31. return {
  32. name: 'todo',
  33. beforeRender(calendarData = {}, calendarConfig = {}, component) {
  34. const { todos = [], dates = [], showLabelAlways } = calendarData
  35. const dateWithTodoInfo = updateDatePropertyOfTodoLabel(
  36. todos,
  37. dates,
  38. showLabelAlways
  39. )
  40. return {
  41. calendarData: {
  42. ...calendarData,
  43. dates: dateWithTodoInfo
  44. },
  45. calendarConfig
  46. }
  47. },
  48. methods(component) {
  49. return {
  50. setTodos: (options = {}) => {
  51. const calendar = getCalendarData('calendar', component)
  52. if (!calendar || !calendar.dates) {
  53. return Promise.reject('请等待日历初始化完成后再调用该方法')
  54. }
  55. const {
  56. circle,
  57. dotColor = '',
  58. pos = 'bottom',
  59. showLabelAlways,
  60. dates: todoDates = []
  61. } = options
  62. const { todos = [] } = calendar
  63. const tranformStr2NumOfTodo = todoDates.map(date =>
  64. dateUtil.tranformStr2NumOfDate(date)
  65. )
  66. const calendarData = {
  67. dates: calendar.dates,
  68. todos: dateUtil.uniqueArrayByDate(
  69. todos.concat(tranformStr2NumOfTodo)
  70. )
  71. }
  72. if (!circle) {
  73. calendarData.todoLabelPos = pos
  74. calendarData.todoLabelColor = dotColor
  75. }
  76. calendarData.todoLabelCircle = circle || false
  77. calendarData.showLabelAlways = showLabelAlways || false
  78. const existCalendarData = getCalendarData('calendar', component)
  79. return renderCalendar.call(component, {
  80. ...existCalendarData,
  81. ...calendarData
  82. })
  83. },
  84. deleteTodos(todos = []) {
  85. if (!(todos instanceof Array) || !todos.length)
  86. return Promise.reject('deleteTodos()应为入参为非空数组')
  87. const existCalendarData = getCalendarData('calendar', component)
  88. const allTodos = existCalendarData.todos || []
  89. const toDeleteTodos = todos.map(item => dateUtil.toTimeStr(item))
  90. const remainTodos = allTodos.filter(
  91. item => !toDeleteTodos.includes(dateUtil.toTimeStr(item))
  92. )
  93. const { dates, curYear, curMonth } = existCalendarData
  94. const _dates = [...dates]
  95. const currentMonthTodos = dateUtil.filterDatesByYM(
  96. {
  97. year: curYear,
  98. month: curMonth
  99. },
  100. remainTodos
  101. )
  102. _dates.forEach(item => {
  103. item.showTodoLabel = false
  104. })
  105. currentMonthTodos.forEach(item => {
  106. _dates[item.date - 1].showTodoLabel = !_dates[item.date - 1].choosed
  107. })
  108. return renderCalendar.call(component, {
  109. ...existCalendarData,
  110. dates: _dates,
  111. todos: remainTodos
  112. })
  113. },
  114. clearTodos() {
  115. const existCalendarData = getCalendarData('calendar', component)
  116. const _dates = [...existCalendarData.dates]
  117. _dates.forEach(item => {
  118. item.showTodoLabel = false
  119. })
  120. return renderCalendar.call(component, {
  121. ...existCalendarData,
  122. dates: _dates,
  123. todos: []
  124. })
  125. },
  126. getTodos() {
  127. return getCalendarData('calendar.todos', component) || []
  128. }
  129. }
  130. }
  131. }
  132. }