fix: 拜访日历

src/views/customer-manage/visit-calendar/index.vue

@@ -3,16 +3,24 @@
     <div class="page-left">
       <a-calendar v-model:value="calendarValue">
         <template #dateCellRender="{ current }">
-          <ul class="events">
-            <li v-for="item in getListData(current)" :key="item.content">
-              <a-badge :status="item.type" :text="item.content" />
-            </li>
-          </ul>
+          <div class="events" v-if="getListData(current).total > 0">
+            <div class="events-total">共计{{ getListData(current).total }}项任务</div>
+            <div class="events-container">
+              <div
+                :class="{ 'events-item': true, 'events-active': item.type === 0 }"
+                v-for="item in getListData(current).details.slice(0, 9)"
+                :key="item.id"
+              >
+                {{ item.content.slice(0, 1) }}
+              </div>
+              <div class="events-item" v-if="getListData(current).total > 9">...</div>
+            </div>
+          </div>
         </template>
         <template #monthCellRender="{ current }">
           <div v-if="getMonthData(current)" class="notes-month">
-            <section>{{ getMonthData(current) }}</section>
-            <span>Backlog number</span>
+            <!-- <section>{{ getMonthData(current) }}</section>
+            <span>Backlog number</span> -->
           </div>
         </template>
       </a-calendar>
@@ -40,39 +48,52 @@
   import { ref, reactive } from 'vue';
   import { Dayjs } from 'dayjs';
   import StateTabs from './components/stateTabs/index.vue';
+  import { theme, message } from 'ant-design-vue';
+
+  const { useToken } = theme;
+  const { token } = useToken();
+
   // left
   const calendarValue = ref<Dayjs>('');
 
   const getListData = (value: Dayjs) => {
     let listData;
     switch (value.date()) {
-      case 8:
-        listData = [
-          { type: 'processing', content: 'This is warning event.' },
-          { type: 'processing', content: 'This is usual event.' },
-        ];
-        break;
-      case 10:
-        listData = [
-          { type: 'warning', content: 'This is warning event.' },
-          { type: 'success', content: 'This is usual event.' },
-          { type: 'error', content: 'This is error event.' },
-        ];
+      case 7:
+        listData = {
+          total: 12,
+          details: [
+            { id: 1, type: 0, content: '责This is warning event.' },
+            { id: 2, type: 0, content: '任This is very long usual event.' },
+            { id: 3, type: 0, content: '人This is error event 1.' },
+            { id: 4, type: 1, content: '已This is error event 2.' },
+            { id: 5, type: 1, content: '完This is error event 3.' },
+            { id: 6, type: 1, content: '成This is error event 4.' },
+            { id: 7, type: 1, content: '颜This is error event 5.' },
+            { id: 8, type: 1, content: '色This is error event 6.' },
+            { id: 9, type: 1, content: '样This is error event 7.' },
+            { id: 10, type: 1, content: '式This is error event 8.' },
+            { id: 11, type: 1, content: '开This is error event 9.' },
+            { id: 12, type: 1, content: '发This is error event 10.' },
+          ],
+        };
         break;
-      case 15:
-        listData = [
-          { type: 'warning', content: 'This is warning event' },
-          { type: 'success', content: 'This is very long usual event。。....' },
-          { type: 'error', content: 'This is error event 1.' },
-          { type: 'error', content: 'This is error event 2.' },
-          { type: 'error', content: 'This is error event 3.' },
-          { type: 'error', content: 'This is error event 4.' },
-          { type: 'success', content: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
-        ];
+      case 25:
+        listData = {
+          total: 6,
+          details: [
+            { id: 1, type: 0, content: '待This is warning event.' },
+            { id: 2, type: 0, content: '完This is very long usual event.' },
+            { id: 3, type: 0, content: '成This is error event 1.' },
+            { id: 4, type: 1, content: '已This is error event 2.' },
+            { id: 5, type: 1, content: '完This is error event 3.' },
+            { id: 6, type: 1, content: '成This is error event 4.' },
+          ],
+        };
         break;
       default:
     }
-    return listData || [];
+    return listData ?? { total: 0, details: [] };
   };
 
   const getMonthData = (value: Dayjs) => {
@@ -97,17 +118,41 @@
 </script>
 <style lang="scss" scoped>
   .events {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .events .ant-badge-status {
-    overflow: hidden;
-    white-space: nowrap;
-    width: 100%;
-    text-overflow: ellipsis;
-    font-size: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    .events-total {
+      // v-bind('token.colorPrimary');
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px 0 4px 4px;
+      border-left: 2px solid v-bind('token.colorPrimary');
+      border-top-right-radius: 6px;
+      border-bottom-right-radius: 6px;
+      background-color: #e6f4ff;
+      // background-color: #eeeeee;
+    }
+    .events-container {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+      .events-item {
+        font-size: 10px;
+        width: 20px;
+        height: 20px;
+        border-radius: 50px;
+        background-color: #9a9a9a;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .events-active {
+        background-color: v-bind('token.colorPrimary');
+      }
+    }
   }
 
   .notes-month {