fix：【首页】我的日程预览时详情内容的显示

src/views/platform/desktop/column/preview.vue

@@ -26,6 +26,8 @@
                 :alias="desktopColumn.alias"
                 :visible="componentVisible"
                 :full-screen="fullscreen"
+                @open="handleOpen"
+                @close="handleClose"
                 @action-event="actionEvent"
             />
 
@@ -33,13 +35,18 @@
         <div v-if="!screen" slot="footer" class="el-dialog--center">
             <el-button icon="el-icon-circle-close" @click="closeDialog()">关闭</el-button>
         </div>
+        <schedule-add :visible="calendarDialogVisible" :form="calendarDialogForm" @close="handleClose" @saveData="handleSaveData" @delData="handleDelData" />
     </el-dialog>
 </template>
 <script>
 import Vue from 'vue'
 import { get } from '@/api/platform/desktop/column'
 import { buildComponent } from '@/views/system/dashboard/components/util'
+import ScheduleAdd from '@/views/system/dashboard/templates/scheduleAdd'
 export default {
+    components: {
+        ScheduleAdd
+    },
     props: {
         visible: {
             type: Boolean,
@@ -60,7 +67,10 @@ export default {
             dialogLoading: false,
             fullscreen: false,
             init: false,
-            desktopColumn: {}
+            desktopColumn: {},
+            calendarToolbar: this.fullScreen ? [{ key: 'refresh' }] : [{ key: 'refresh' }, { key: 'fullscreen' }, { key: 'collapse' }],
+            calendarDialogVisible: false,
+            calendarDialogForm: {}
         }
     },
     watch: {
@@ -117,6 +127,71 @@ export default {
             }).catch(() => {
                 this.dialogLoading = false
             })
+        },
+        /**
+         * 关于预览日历日程组件的方法及属性，在homePage也有相同的逻辑
+         */
+        // 关闭指定弹框
+        handleClose (state) {
+            switch (state) {
+                case 'calendar':
+                    this.calendarDialogVisible = false
+                    break
+                default:
+                    break
+            }
+        },
+        // 打开指定弹框
+        handleOpen (state, dateArr, events,clickId) {
+            const status = ['急', '重', '轻', '缓']
+            const eventTrees = []
+            switch (state) {
+                case 'calendar':
+                    this.calendarDialogVisible = true
+                    for (const i of events) {
+                        // 根据指定日期A获取A在时间区间内的数据
+                        if (!((this.compareDates(i.start, dateArr[1]) > 0) || (this.compareDates(i.jieShuShiJian, dateArr[0]) < 0))) {
+                            i.label = i.zhuangTai ? `【${status[Number(i.zhuangTai) - 1] ? status[Number(i.zhuangTai) - 1] : ''}】` + i.title : i.title
+                            eventTrees.push(i)
+                        }
+                    }
+                    if (eventTrees.length) {
+                        this.calendarDialogForm = {
+                            eventTrees
+                        }
+                    } else {
+                        this.calendarDialogForm = {
+                            eventTrees: []
+                        }
+                    }
+                    this.calendarDialogForm.clickedDate = dateArr[0]
+                    this.calendarDialogForm.clickId = clickId
+                    break
+                default:
+                    break
+            }
+        },
+        /**
+         * date1(2024-01-01) 大于 date2(2023-01-01) 返回 1
+         * date1 小于 date2 返回 -1
+         * date1 等于 date2 返回 0
+         */
+        compareDates (date1, date2) {
+            var time1 = new Date(date1).getTime()
+            var time2 = new Date(date2).getTime()
+            return Math.sign(time1 - time2) // 使用Math.sign()函数返回值为 -1, 0, 1
+        },
+        // 日历弹框组件保存时候的回调
+        handleSaveData (param) {
+            if (param.state === 'calendar') {
+                this.$refs.myCalendar.setCalendarEvents(param)
+            }
+        },
+        // 日历弹框组件删除日程时候的回调
+        handleDelData (param) {
+            if (param.state === 'calendar') {
+                this.$refs.myCalendar.hanldeCalendardel(param)
+            }
         }
     }
 }

src/views/system/dashboard/components/util.js

@@ -144,9 +144,7 @@ export function buildComponent (name, column, preview) {
                         animation: 200,
                         axis: 'y'
                     },
-                    calendarToolbar:this.fullScreen ? [{key: 'refresh'}]: [{key: 'refresh'}, {key: 'fullscreen'}, {key: 'collapse'}],
-                    calendarDialogVisible: false,
-                    calendarDialogForm: {},
+                    calendarToolbar: this.fullScreen ? [{ key: 'refresh' }] : [{ key: 'refresh' }, { key: 'fullscreen' }, { key: 'collapse' }],
                 }
             },
             computed: {
@@ -501,68 +499,6 @@ export function buildComponent (name, column, preview) {
                         return val.slice(0, length - 2) + '...'
                     }
                     return val
-                },
-                // 关闭指定弹框
-                handleCloseCalendarDialog (state) {
-                    switch (state) {
-                        case 'calendar':
-                            this.calendarDialogVisible = false
-                            break
-                        default:
-                            break
-                    }
-                },
-                // 打开指定弹框
-                handleOpen (state, dateArr, events) {
-                    const status = ['急', '重', '轻', '缓']
-                    const eventTrees = []
-                    switch (state) {
-                        case 'calendar':
-                            this.calendarDialogVisible = true
-                            for (const i of events) {
-                                // 根据指定日期A获取A在时间区间内的数据
-                                if (!((this.compareDates(i.start, dateArr[1]) > 0) || (this.compareDates(i.jieShuShiJian, dateArr[0]) < 0))) {
-                                    i.label = i.zhuangTai?`【${status[Number(i.zhuangTai) - 1] ? status[Number(i.zhuangTai) - 1] : ''}】` + i.title:i.title
-                                    eventTrees.push(i)
-                                }
-                            }
-                            if (eventTrees.length) {
-                                this.calendarDialogForm = {
-                                    eventTrees
-                                }
-                            } else {
-                                this.calendarDialogForm = {
-                                    eventTrees: []
-                                }
-                            }
-                            this.calendarDialogForm.clickedDate = dateArr[0]
-                            this.calendarDialogForm.clickedId = events.
-                            break
-                        default:
-                            break
-                    }
-                },
-                /**
-                 * date1(2024-01-01) 大于 date2(2023-01-01) 返回 1
-                 * date1 小于 date2 返回 -1
-                 * date1 等于 date2 返回 0
-                 */
-                compareDates (date1, date2) {
-                    var time1 = new Date(date1).getTime()
-                    var time2 = new Date(date2).getTime()
-                    return Math.sign(time1 - time2) // 使用Math.sign()函数返回值为 -1, 0, 1
-                },
-                // 日历弹框组件保存时候的回调
-                handleSaveData (param) {
-                    if (param.state === 'calendar') {
-                        this.$refs.myCalendar[0].setCalendarEvents(param)
-                    }
-                },
-                // 日历弹框组件删除日程时候的回调
-                handleDelData (param) {
-                    if (param.state === 'calendar') {
-                        this.$refs.myCalendar[0].hanldeCalendardel(param)
-                    }
                 }
             },
             template: column.templateHtml !== '' ? `${column.templateHtml}` : `<div></div>`

src/views/system/dashboard/templates/myCalendar.vue

@@ -18,6 +18,5 @@
             />
         </div>
     </transition>
-  <schedule-add :visible="calendarDialogVisible" :form="calendarDialogForm" @close="handleCloseCalendarDialog" @saveData="handleSaveData" @delData="handleDelData" />
 </el-card>
 </template>

src/views/system/dashboard/templates/scheduleAdd.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Descripttion: 首页-日程日历编辑框
+ * @version: 1.0
+ * @Author: Liu_jiaYin
+ * @Date: 2024-04-01 15:45:58
+ * @LastEditors: Do not edit
+ * @LastEditTime: 2024-04-01 17:39:28
+-->
 <template>
     <!-- 弹窗部分 -->
     <el-dialog
@@ -5,6 +13,7 @@
         :visible.sync="calendarVisible"
         :show-close="false"
         :close-on-click-modal="false"
+        append-to-body
     >
         <el-form
             ref="form"
@@ -208,7 +217,7 @@ export default {
         }
     },
     methods: {
-        clear(){
+        clear (){
             this.calendarForm = {
                 id: '',
                 biaoTi: '',

src/views/system/homepage/index.vue

@@ -577,6 +577,9 @@ export default {
             localStorage.setItem('doNotShowToday', today)
             this.infoMessage.close()
         },
+        /**
+         * 关于预览日历日程组件的方法及属性，在预览处也有相同的逻辑
+         */
         // 关闭指定弹框
         handleClose (state) {
             switch (state) {
@@ -591,6 +594,7 @@ export default {
         handleOpen (state, dateArr, events,clickId) {
             const status = ['急', '重', '轻', '缓']
             const eventTrees = []
+
             switch (state) {
                 case 'calendar':
                     this.calendarDialogVisible = true