fix: 首页日历功能优化升级，bug修复。

src/views/invest/accountCalendar/index.vue

@@ -3,29 +3,31 @@
     <!-- 这里是自定义头部，切换视图类型和切换日期 -->
     <div class="calendarHeader">
       <div class="header_left">
-        <h1>{{ type === '3' ? '列表' : calendarTitle }}</h1>
+        <h1>{{ calendarTitle }}</h1>
       </div>
       <div class="header_right">
-        <!-- <span v-if="type!=='3'&&isShowBack" class="blue-color backToday" @click="getToday()">{{ type==='1'?'返回本月':'返回本周' }}</span>
+        <el-select v-model="type" placeholder="视图类型" style="width: 80px" size="default" class="header_select" @change="handleChangeType">
-        <el-select v-model="type" placeholder="视图类型" style="width: 80px" size="small" class="header_select" @change="handleChangeType">
           <el-option label="月" value="1" />
           <el-option label="周" value="2" />
-          <el-option label="列" value="3" />
+        </el-select>
-        </el-select> -->
         <!-- 选择月份的日期框 -->
         <el-date-picker
           v-if="type === '1'"
           v-model="showMonth"
           type="month"
-          size="small"
+          size="default"
           :clearable="false"
           placeholder="请选择日期"
           style="margin-left: 10px; vertical-align: middle"
           @change="changeDate"
         />
+
+        <el-button-group v-if="type !== '3' && isShowBack" style="margin-left: 10px">
+          <el-button type="primary" size="default" icon="RefreshRight" @click="getToday()">返回本月</el-button>
+        </el-button-group>
         <el-button-group v-if="type === '2'" style="margin-left: 10px">
-          <el-button size="small" class="el-icon-arrow-left" @click="getPrev()">上一周</el-button>
+          <el-button size="default" type="primary" icon="ArrowLeft" @click="getPrev()">上一周</el-button>
-          <el-button size="small" @click="getNext()">下一周<i class="el-icon-arrow-right" /></el-button>
+          <el-button style="margin-left: 2px" size="default" type="primary" icon="ArrowRight" @click="getNext()">下一周</el-button>
         </el-button-group>
       </div>
     </div>
@@ -61,21 +63,9 @@ export default {
       Tcalendar: null,
       drawerVisiable: false,
       drawerType: '',
-      colorJSON: {
-        // 我这里有类别的概念，不同的类别又有不同的颜色
-        green: { title: '#00B578', class: 'green' },
-        red: { title: '#FA5151', class: 'red' },
-        orange: { title: '#FF8F1F', class: 'orange' },
-        yellow: { title: '#FFC300', class: 'yellow' },
-        cyan: { title: '#07B9B9', class: 'cyan' },
-        blue: { title: '#3662EC', class: 'blue' },
-        purple: { title: '#8A38F5', class: 'purple' },
-        magenta: { title: '#EB2F96', class: 'magenta' }
-      },
       fullcalendar: ref(),
       nowDate: new Date(),
-      infoList: [], // 日历显示的列信息
+      infoList: [] // 日历显示的列信息
-      categoryJSON: {} // 计划分类json
     })
     onMounted(() => {
       initCalendar()
@@ -90,7 +80,11 @@ export default {
         handleWindowResize: true,
         editable: true, // 允许编辑表格
         droppable: true,
+        eventDisplay: 'block',
         // height: 'auto',
+        // 限制事件最大数量
+        // 事件数量超出时更多显示链接汉化
+        moreLinkContent: '+ 更多',
         // 显示事件开始时间
         displayEventTime: false,
         // 显示事件结束时间
@@ -108,7 +102,7 @@ export default {
         firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推。
         unselectAuto: true, // 当点击页面日历以外的位置时，是否自动取消当前的选中状态
         unselectCancel: '.el-drawer',
-        dayMaxEvents: true,
+        // dayMaxEvents: true,
         // eventLimit: true,
         headerToolbar: false,
         buttonText: {
@@ -134,19 +128,8 @@ export default {
           italicEl.append(arg.event.title)
           italicEl.setAttribute('class', `plan_title ${arg.event.extendedProps.class}`)
           return { domNodes: [italicEl] }
-        },
-        eventDrop: function (info) {
-          // 拖拽停止时触发
-          handleDrap(info)
-        },
-        eventClick: function (info) {
-          // 点击查看时触发
-          handleClick(info)
-        },
-        select: function (info) {},
-        eventResize: function (info) {
-          handleEventResize(info)
         }
+        // select: function (info) {}
       })
       state.Tcalendar.render()
     }
@@ -170,10 +153,6 @@ export default {
       state.showMonth = new Date()
       getCalendarList()
     }
-
-    const handleSetting = () => {
-      state.dialogCategory = true
-    }
     const getCalendarList = () => {
       const currentEnd = dayjs(state.Tcalendar.view.currentEnd).add(-1, 'day')
       const params = {
@@ -194,41 +173,19 @@ export default {
         }
       })
     }
-    // 点击计划查看
-    const handleClick = (info) => {}
-    // 列视图点击查看
-    const handleClickList = (row) => {}
-    const closeDrawer = (val) => {
-      state.drawerVisiable = false
-      if (val) {
-        getCalendarList()
-      }
-    }
     // 切换视图类型
     const handleChangeType = (val) => {
       if (val === '1') {
         state.Tcalendar.changeView('dayGridMonth')
         state.showMonth = new Date()
       } else if (val === '2') {
-        state.Tcalendar.changeView('timeGridWeek')
+        state.Tcalendar.changeView('dayGridWeek')
-      } else {
-        state.Tcalendar.changeView('listMonth')
       }
       state.isShowBack = false
       state.calendarTitle = state.Tcalendar.view.title
       getToday()
     }
-    // 切换类型
-    const handleChangePlanId = () => {
-      getCalendarList()
-    }
 
-    // 拖拽计划时触发
-    const handleDrap = (info) => {}
-    // 调整大小时触发
-    const handleEventResize = (info) => {}
-    // 拖拽触发
-    const handleSelectDate = (info) => {}
     // 切换月份和日期
     const changeDate = (date) => {
       state.Tcalendar.gotoDate(date)
@@ -245,25 +202,17 @@ export default {
       ...toRefs(state),
       changeDate,
       getPrev,
-      handleDrap,
-      handleClickList,
-      handleEventResize,
-      handleChangePlanId,
       getNext,
       getToday,
-      closeDrawer,
       getCalendarList,
-      handleSetting,
+      handleChangeType
-      handleChangeType,
-      handleClick,
-      handleSelectDate
     }
   }
 }
 </script>
 <style lang="scss" scoped>
 .calendarHeader {
-  margin: 20px 30px 10px 20px;
+  margin: 0px 0px 5px 0px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -283,7 +232,4 @@ h1 {
   display: inline-block;
   color: #303133;
 }
-// .el-button-group {
-//   vertical-align: top;
-// }
 </style>