党建日历初始化

src/views/modules/communityParty/calendar/cpts/calendar.vue

@@ -26,7 +26,7 @@
         @click="handleClickDate(item)"
       >
         <div class="date">{{ item.date }}</div>
-        <slot name="date-item" v-bind:item="item"></slot>
+        <slot name="date-item" v-bind:item="item" v-bind:index="index"></slot>
       </div>
     </div>
   </div>
@@ -200,7 +200,7 @@ export default {
       padding: 8px 0;
       height: 90px;
       background-color: #ffffff;
-      opacity: 0.3;
+      opacity: 0.4;
 
       &::after {
         content: "";

src/views/modules/communityParty/calendar/index.vue

@@ -13,7 +13,6 @@
               :props="partyOptionsProps"
               :show-all-levels="false"
               @change="handleChangeParty"
-              @rangeChange="handleRangeChange"
             ></el-cascader>
           </div>
           <div class="item">
@@ -88,7 +87,7 @@
 
             <div
               class="item"
-              :key="item.activityId"
+              :key="item.scheduleId"
               v-for="item in currentDateData.scheduleList"
             >
               <div class="item-title">
@@ -165,12 +164,16 @@
           <calendar
             :currentYear="currentYear"
             :currentMonth="currentMonth"
+            @rangeChange="handleRangeChange"
             @clickDate="handleChangeDate"
           >
-            <template v-slot:date-item="{ item }">
+            <template v-slot:date-item="{ item, index }">
               <div
                 class="tip"
-                v-if="rangeData[item.dateId] && rangeData[item.dateId].activityList.length > 0"
+                v-if="
+                  rangeData[item.dateId] &&
+                  rangeData[item.dateId].activityList.length > 0
+                "
               >
                 <div
                   class="tip-num"
@@ -192,15 +195,66 @@
                 <div class="tip-cnt">
                   {{ rangeData[item.dateId].activityList[0].topic }}
                 </div>
+
+                <div class="all-list" :class="computeAllListClass(index)">
+                  <div
+                    class="item"
+                    :key="item.activityId"
+                    v-for="item in rangeData[item.dateId].activityList"
+                  >
+                    <div class="item-title">
+                      {{ item.theme }}
+                    </div>
+                    <div class="item-prop">
+                      <span>活动类型：</span>
+                      <span>{{ item.type }}</span>
+                    </div>
+                    <div class="item-prop">
+                      <span>开始时间：</span>
+                      <span>{{ item.holdTime }}</span>
+                    </div>
+                    <div class="item-prop">
+                      <span>活动地点：</span>
+                      <span>{{ item.address }}</span>
+                    </div>
+                    <div class="item-prop">
+                      <span>参加组织：</span>
+                      <span>{{ item.joinOrgs.join("、") }}</span>
+                    </div>
+                  </div>
+                </div>
               </div>
               <div
                 class="corn"
-                v-if="rangeData[item.dateId] && rangeData[item.dateId].scheduleList.length > 0"
+                v-if="
+                  rangeData[item.dateId] &&
+                  rangeData[item.dateId].scheduleList.length > 0
+                "
               >
                 <div class="corn-num">
                   {{ rangeData[item.dateId].scheduleList.length }}
                 </div>
                 <div class="corn-text">日程</div>
+
+                <div class="all-list" :class="computeAllListClass(index)">
+                  <div
+                    class="item"
+                    :key="item.scheduleId"
+                    v-for="item in rangeData[item.dateId].scheduleList"
+                  >
+                    <div class="item-title">
+                      {{ item.title }}
+                    </div>
+                    <div class="item-prop">
+                      <span>提醒时间：</span>
+                      <span>{{ item.remindTime }}</span>
+                    </div>
+                    <div class="item-prop">
+                      <span>备注说明：</span>
+                      <span>{{ item.remark }}</span>
+                    </div>
+                  </div>
+                </div>
               </div>
             </template>
           </calendar>
@@ -215,6 +269,15 @@ import { requestPost, requestGet } from "@/js/dai/request";
 import nextTick from "dai-js/tools/nextTick";
 import calendar from "./cpts/calendar";
 
+function doAfter(fn) {
+  return new Promise(async (resolve) => {
+    while (!fn()) {
+      await nextTick(100);
+    }
+    resolve();
+  });
+}
+
 export default {
   name: "party-calendar",
   components: {
@@ -240,6 +303,7 @@ export default {
 
       monthData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
 
+      rangeDateList: [],
       rangeData: {},
 
       partyOptions: [],
@@ -276,10 +340,12 @@ export default {
     "fmData.orgId": function (val) {
       console.log("orgId", val);
       this.getCurrentDateData();
+      this.getRangeData();
     },
     "fmData.isSelf": function (val) {
       console.log("isSelf", val);
       this.getCurrentDateData();
+      this.getRangeData();
     },
     currentYear: function (val) {
       console.log("watch--currentYear", val);
@@ -287,7 +353,7 @@ export default {
     },
   },
   async mounted() {
-    this.getPartyOptions();
+    await this.getPartyOptions();
     this.getMonthData();
   },
   methods: {
@@ -327,12 +393,34 @@ export default {
       this.getCurrentDateData();
     },
 
+    computeAllListClass(index) {
+      let x = index % 7;
+      let y = Math.floor(index / 7);
+      if (x < 3) {
+        if (y < 3) {
+          return "z-top-left";
+        } else {
+          return "z-bottom-left";
+        }
+      } else {
+        if (y < 3) {
+          return "z-top-right";
+        } else {
+          return "z-bottom-right";
+        }
+      }
+    },
+
     handleRangeChange(arr) {
-      this.getRangeData(arr);
+      this.rangeDateList = arr;
+      this.getRangeData();
     },
 
-    async getRangeData(arr) {
-      const url = "/icPartyAct/homeSearch";
+    async getRangeData() {
+      const arr = this.rangeDateList;
+      const url = "/resi/partymember/icPartyAct/homeSearch";
+
+      if (!this.apiParams.orgId || arr.length == 0) return;
 
       const { data, code, msg } = await requestPost(url, {
         ...this.apiParams,
@@ -341,8 +429,9 @@ export default {
       });
       if (code === 0) {
         if (Array.isArray(data)) {
+          let rangeData = {};
           arr.forEach((item) => {
-            this.rangeData[item.dateId] = {
+            rangeData[item.dateId] = {
               ...item,
               scheduleTotal: 0,
               activityTotal: 0,
@@ -351,12 +440,13 @@ export default {
             };
             let curr = data.find((val) => val.dateId == item.dateId);
             if (curr) {
-              this.rangeData[item.dateId].scheduleList = curr.scheduleList;
-              this.rangeData[item.dateId].activityList = curr.activityList;
-              this.rangeData[item.dateId].scheduleTotal = curr.scheduleTotal;
-              this.rangeData[item.dateId].activityTotal = curr.activityTotal;
+              rangeData[item.dateId].scheduleList = curr.scheduleList;
+              rangeData[item.dateId].activityList = curr.activityList;
+              rangeData[item.dateId].scheduleTotal = curr.scheduleTotal;
+              rangeData[item.dateId].activityTotal = curr.activityTotal;
             }
           });
+          this.rangeData = rangeData;
           console.log("rangeData", this.rangeData);
         }
       } else {
@@ -365,7 +455,9 @@ export default {
     },
 
     async getMonthData() {
-      const url = "/icPartyAct/homeMonthTotal";
+      const url = "/resi/partymember/icPartyAct/homeMonthTotal";
+
+      if (!this.apiParams.orgId) return;
 
       const { data, code, msg } = await requestPost(url, {
         ...this.apiParams,
@@ -383,7 +475,9 @@ export default {
     },
 
     async getCurrentDateData() {
-      const url = "/icPartyAct/actAndScheduleList";
+      const url = "/resi/partymember/icPartyAct/actAndScheduleList";
+
+      if (!this.apiParams.orgId) return;
 
       const { data, code, msg } = await requestPost(url, {
         ...this.apiParams,
@@ -470,6 +564,45 @@ $red: #f33;
     }
   }
 
+  .all-list {
+    position: absolute;
+    z-index: 100;
+    padding: 0 10px;
+    width: 300px;
+    max-height: 200px;
+    overflow-y: auto;
+    background-color: rgba(#ffffff, 0.9);
+    box-shadow: 0 0 10px 3px rgba(#000, 0.3);
+    text-align: left;
+    color: #999;
+    transition: all ease 0.13s;
+    transform: scale(0);
+
+    &.z-top-left {
+      right: -300px;
+      top: 0;
+    }
+    &.z-top-right {
+      left: -300px;
+      top: 0;
+    }
+    &.z-bottom-left {
+      right: -300px;
+      bottom: 0;
+    }
+    &.z-bottom-right {
+      left: -300px;
+      bottom: 0;
+    }
+    .item {
+      padding: 10px 0;
+      border-top: 1px dashed rgba(#000, 0.2);
+      &:first-child {
+        border-top: none;
+      }
+    }
+  }
+
   .tip {
     position: relative;
     margin: 0 3px;
@@ -481,6 +614,12 @@ $red: #f33;
     border-radius: 4px;
     cursor: pointer;
     color: #999999;
+
+    &:hover {
+      .all-list {
+        transform: scale(1);
+      }
+    }
     .tip-num {
       position: absolute;
       z-index: 10;
@@ -530,6 +669,12 @@ $red: #f33;
     top: 0;
     color: #ffffff;
     cursor: pointer;
+
+    &:hover {
+      .all-list {
+        transform: scale(1);
+      }
+    }
     .corn-num {
       position: absolute;
       z-index: 10;