cxmo 1 rok temu
rodzic
commit
c95a7b28c2

+ 44 - 35
src/views/hzyb/forexCalendar/Index.vue

@@ -21,7 +21,7 @@ async function setEventInfo(date){
     currentDay.value = date||''
     //获取当天的日历信息,若有事项,则打开弹窗
     await getEventsByDay()
-    if(eventList.value.length) showEventList.value = true
+    showEventList.value = Boolean(eventList.value.length)
 }
 async function getEventsByDay(){
     await apiGetDailyEventList({
@@ -222,17 +222,19 @@ onMounted(()=>{
                 @click-item="clickItemHandle" 
             />
         </Popup>
-        <Popup v-model:show="showEventList" position="bottom" :style="{ height: '50%',display: 'flex',flexDirection: 'column' }">
-            <div class="select-header">
-                <span class="title">{{ currentDay }}{{ permissionName }}事项</span>
-                <span class="btn" @click="showEventList=false"><van-icon name="cross" size="16"/></span>
-            </div>
-            <div class="event-list-wrap">
-                <ul class="event-list">
-                    <li class="event-item" v-for="(item,index) in eventList" :key="index" @click="handleClickEvent(item)">
-                        {{item.title}}
-                    </li>
-                </ul>
+        <Popup v-model:show="showEventList" position="bottom" :style="{ height: '50%' }">
+            <div class="pop-wrap">
+                <div class="select-header">
+                    <span class="title">{{ currentDay }}{{ permissionName }}事项</span>
+                    <span class="btn" @click="showEventList=false"><van-icon name="cross" size="16"/></span>
+                </div>
+                <div class="event-list-wrap">
+                    <ul class="event-list">
+                        <li class="event-item" v-for="(item,index) in eventList" :key="index" @click="handleClickEvent(item)">
+                            {{item.title}}
+                        </li>
+                    </ul>
+                </div>
             </div>
         </Popup>
     </div>
@@ -269,23 +271,39 @@ onMounted(()=>{
             }
         }
     }
-    .select-header {
+    .pop-wrap{
         display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: var(--van-picker-action-padding);
-        font-size: var(--van-picker-action-font-size);
-        height: var(--van-picker-toolbar-height);
-        .cancel,.btn{
-            color: #969799;
-        }
-        .ensure {
-            color: #576b95;
+        flex-direction: column;
+        height: 100%;
+        .select-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--van-picker-action-padding);
+            font-size: var(--van-picker-action-font-size);
+            height: var(--van-picker-toolbar-height);
+            .cancel,.btn{
+                color: #969799;
+            }
+            .ensure {
+                color: #576b95;
+            }
+            .title{
+                font-weight: bold;
+            }
         }
-        .title{
-            font-weight: bold;
+        .event-list-wrap{
+            font-size: var(--van-picker-action-font-size);
+            padding: var(--van-padding-md);
+            flex:1;
+            overflow-y: auto;
+            .event-item{
+                margin-bottom: var(--van-padding-md);
+                border-bottom: 1px solid #E7E7E7;
+            }
         }
     }
+    
     .van-tree-select {
         ::v-deep(.van-sidebar-item--select:before) {
             background-color: #E3B377;
@@ -299,15 +317,6 @@ onMounted(()=>{
             position: absolute !important;
         }
     }
-    .event-list-wrap{
-        font-size: var(--van-picker-action-font-size);
-        padding: var(--van-padding-md);
-        flex:1;
-        overflow-y: auto;
-        .event-item{
-            margin-bottom: var(--van-padding-md);
-            border-bottom: 1px solid #E7E7E7;
-        }
-    }
+    
 }
 </style>

+ 14 - 0
src/views/hzyb/forexCalendar/components/BaseCalendar.vue

@@ -34,6 +34,11 @@ let calendarOptions = ref({
     dayHeaderFormat:{ //https://fullcalendar.io/docs/v5/date-formatting
         weekday:'narrow', //头部星期显示为一 二 三...
     },
+    dayMaxEventRows:3,//一天最多展示
+    moreLinkContent:(arg)=>{
+        return `+${arg.num}more`
+    },
+    moreLinkClick:(info)=>{handleDateClick({dateStr:moment(info.date).format('YYYY-MM-DD')})},//点击more时触发
     dayCellContent:function(arg){ //单元格日期显示为 1 2 3...
         return arg.date.getDate()
     },
@@ -148,6 +153,15 @@ defineExpose({ calendarApi });
             min-height: 1em !important;
             margin-top: 0 !important;
         }
+        :deep(.fc-more-popover){
+            display:none !important;
+        }
+        :deep(.fc-daygrid-day-bottom){
+            font-size: 12px;
+        }
+        :deep(.fc-daygrid-more-link.fc-more-link){
+            font-size: 12px;
+        }
         .popper-content{
             font-size: 12px;
             overflow: hidden;