党建日历

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:info="item"></slot>
+        <slot name="date-item" v-bind:item="item"></slot>
       </div>
     </div>
   </div>
@@ -75,7 +75,9 @@ export default {
         const dateObj = new Date(startDay + i * 24 * 3600 * 1000);
         const year = dateObj.getFullYear();
         const month = dateObj.getMonth();
+        const monthShow = ("0" + (month + 1)).substr(-2);
         const date = dateObj.getDate();
+        const dateShow = ("0" + date).substr(-2);
         const day = dateObj.getDay();
 
         calendarArr.push({
@@ -83,7 +85,17 @@ export default {
           year,
           month,
           day,
-          format: `${year}-${month + 1}-${date + 1}`,
+          dayFormat: [
+            "星期日",
+            "星期一",
+            "星期二",
+            "星期三",
+            "星期四",
+            "星期五",
+            "星期六",
+          ][day],
+          format: `${year}-${monthShow}-${dateShow}`,
+          dateId: `${year}${monthShow}${dateShow}`,
           // 是否在当月
           thisMonth: year == currentYear && month == currentMonth,
           // 是否是今天
@@ -95,23 +107,30 @@ export default {
           afterToday: dateObj.getTime() >= today.getTime(),
         });
       }
+
+      this.$emit("rangeChange", calendarArr);
       return calendarArr;
     },
   },
   watch: {
-    visibleCalendar(val) {
-      if (!this.currentDate) {
-        this.handleClickDate(
-          val.find((item) => item.isToday) ||
-            val.filter((item) => item.thisMonth)[0]
-        );
-      }
+    visibleCalendar() {
+      this.init();
     },
   },
   mounted() {
     console.log("123", this.time);
+    this.init();
   },
   methods: {
+    init() {
+      if (!this.currentDate) {
+        this.handleClickDate(
+          this.visibleCalendar.find((item) => item.isToday) ||
+            this.visibleCalendar.filter((item) => item.thisMonth)[0]
+        );
+      }
+    },
+
     handleClickDate(item) {
       console.log("点击日历日期", item);
       this.currentDate = item.format;
@@ -181,7 +200,7 @@ export default {
       padding: 8px 0;
       height: 90px;
       background-color: #ffffff;
-      opacity: 0.5;
+      opacity: 0.3;
 
       &::after {
         content: "";

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

@@ -5,60 +5,126 @@
         <div class="m-sizer">
           <div class="item">
             <el-cascader
-              v-model="fmData.party"
+              class="customer_cascader"
+              ref="myCascader"
+              size="small"
+              v-model="fmData.orgId"
               :options="partyOptions"
+              :props="partyOptionsProps"
+              :show-all-levels="false"
               @change="handleChangeParty"
+              @rangeChange="handleRangeChange"
             ></el-cascader>
           </div>
           <div class="item">
-            <el-radio v-model="radio" label="1">备选项</el-radio>
-            <el-radio v-model="radio" label="2">备选项</el-radio>
+            <el-radio v-model="fmData.isSelf" label="1"
+              >本人创建的活动</el-radio
+            >
+            <el-radio v-model="fmData.isSelf" label="0"
+              >本组织所有活动</el-radio
+            >
           </div>
         </div>
 
         <div class="m-date">
-          <div class="date-top">2222年2月22日</div>
-          <div class="date-big">22</div>
-          <div class="date-week">星期五</div>
+          <div class="date-top">
+            {{ currentDate.year }}年{{ currentDate.month + 1 }}月
+          </div>
+          <div class="date-big">{{ currentDate.date }}</div>
+          <div class="date-week">{{ currentDate.dayFormat }}</div>
         </div>
 
-        <div class="m-list">
-          <div class="list-title">今日活动</div>
+        <div
+          class="m-list"
+          v-if="
+            currentDateData.activityList.length > 0 ||
+            currentDateData.scheduleList.length > 0
+          "
+        >
+          <div class="list-title">今日活动/日程</div>
           <div class="list">
-            <div class="item">
+            <div
+              class="item"
+              :key="item.activityId"
+              v-for="item in currentDateData.activityList"
+            >
               <div class="item-title">
-                不忘初心牢记使命巴巴爸爸不不嘻嘻，分 额阿发文发文额
+                {{ item.theme }}
               </div>
               <div class="item-prop">
                 <span>活动类型：</span>
-                <span>发发发发发发付付</span>
+                <span>{{ item.type }}</span>
               </div>
               <div class="item-prop">
-                <span>活动类型：</span>
-                <span>发发发发发发付付</span>
+                <span>开始时间：</span>
+                <span>{{ item.holdTime }}</span>
               </div>
               <div class="item-prop">
-                <span>活动类型：</span>
-                <span>发发发发发发付付</span>
+                <span>活动地点：</span>
+                <span>{{ item.address }}</span>
               </div>
               <div class="item-prop">
-                <span>活动类型：</span>
-                <span>发发发发发发付付</span>
+                <span>参加组织：</span>
+                <span>{{ item.joinOrgs.join("、") }}</span>
+              </div>
+              <div class="item-ope">
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click="handleClickHuodong('publish', item)"
+                  >发布</el-button
+                >
+                <el-button
+                  type="success"
+                  size="mini"
+                  @click="handleClickHuodong('edit', item)"
+                  >编辑</el-button
+                >
+                <el-button size="mini" @click="handleClickHuodong('del', item)"
+                  >删除</el-button
+                >
+              </div>
+            </div>
+
+            <div
+              class="item"
+              :key="item.activityId"
+              v-for="item in currentDateData.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 class="item-ope">
-                <el-button type="primary" size="mini">发布</el-button>
-                <el-button type="success" size="mini">编辑</el-button>
-                <el-button size="mini">删除</el-button>
+                <el-button
+                  type="success"
+                  size="mini"
+                  @click="handleClickRicheng('edit', item)"
+                  >编辑</el-button
+                >
+                <el-button size="mini" @click="handleClickRicheng('del', item)"
+                  >删除</el-button
+                >
               </div>
             </div>
           </div>
         </div>
 
         <div class="m-ope">
-          <el-button type="warning" style="width: 48%">添加活动计划</el-button>
-          <el-button style="width: 48%">添加日程</el-button>
+          <el-button type="warning" style="width: 48%" @click="addHudong"
+            >添加活动计划</el-button
+          >
+          <el-button style="width: 48%" @click="addRicheng">添加日程</el-button>
         </div>
       </el-col>
+
       <el-col :span="18">
         <div class="m-cal">
           <div class="hd">
@@ -81,7 +147,11 @@
                 @click="currentMonth = m - 1"
                 v-for="m in 12"
               >
-                <el-badge :value="12" :hidden="m != 3" class="item">
+                <el-badge
+                  :value="monthData[m - 1]"
+                  :hidden="monthData[m - 1] == 0"
+                  class="item"
+                >
                   <div class="month-text">{{ m }}月</div>
                 </el-badge>
               </div>
@@ -97,15 +167,39 @@
             :currentMonth="currentMonth"
             @clickDate="handleChangeDate"
           >
-            <template v-slot:date-item="{ info }">
-              <div class="tip">
+            <template v-slot:date-item="{ item }">
+              <div
+                class="tip"
+                v-if="rangeData[item.dateId] && rangeData[item.dateId].activityList.length > 0"
+              >
+                <div
+                  class="tip-num"
+                  v-if="rangeData[item.dateId].activityList.length > 1"
+                >
+                  {{ rangeData[item.dateId].activityList.length }}
+                </div>
+
                 <div class="tip-text">
-                  <span class="z-on">主题当日</span> (已发布)
+                  <span class="z-on">
+                    {{ rangeData[item.dateId].activityList[0].type }}</span
+                  >
+                  {{
+                    rangeData[item.dateId].activityList[0].isPublicValue
+                      ? "(已发布)"
+                      : ""
+                  }}
+                </div>
+                <div class="tip-cnt">
+                  {{ rangeData[item.dateId].activityList[0].topic }}
                 </div>
-                <div class="tip-cnt">巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</div>
               </div>
-              <div class="corn">
-                <div class="corn-num">8</div>
+              <div
+                class="corn"
+                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>
             </template>
@@ -132,11 +226,36 @@ export default {
     return {
       currentYearStr: todayObj.getFullYear() + "",
       currentMonth: todayObj.getMonth(),
+      currentDate: {
+        year: "",
+        month: "",
+        date: "",
+        day: "",
+      },
+
+      currentDateData: {
+        scheduleList: [],
+        activityList: [],
+      },
+
+      monthData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+
+      rangeData: {},
 
       partyOptions: [],
+      partyOptionsProps: {
+        multiple: false,
+        value: "id",
+        label: "partyOrgName",
+        children: "children",
+        checkStrictly: true,
+        emitPath: false,
+      },
 
       fmData: {
-        party: "",
+        orgId: "",
+        isSelf: "1",
+        yearId: "",
       },
     };
   },
@@ -144,28 +263,153 @@ export default {
     currentYear() {
       return parseInt(this.currentYearStr);
     },
+    apiParams() {
+      const { currentYear, fmData } = this;
+      return {
+        yearId: currentYear,
+        orgId: fmData.orgId,
+        isSelf: fmData.isSelf,
+      };
+    },
+  },
+  watch: {
+    "fmData.orgId": function (val) {
+      console.log("orgId", val);
+      this.getCurrentDateData();
+    },
+    "fmData.isSelf": function (val) {
+      console.log("isSelf", val);
+      this.getCurrentDateData();
+    },
+    currentYear: function (val) {
+      console.log("watch--currentYear", val);
+      this.getMonthData();
+    },
   },
   async mounted() {
-    // await this.getPartyOggList()
+    this.getPartyOptions();
+    this.getMonthData();
   },
   methods: {
+    // 添加活动
+    addHudong() {},
+    // 添加日程
+    addRicheng() {},
+    // 点击活动操作
+    handleClickHuodong(type, item) {
+      console.log(type, item);
+      if (type == "publish") {
+        // 发布
+      } else if (type == "edit") {
+        // 编辑
+      } else if (type == "del") {
+        //  删除
+      }
+    },
+    // 点击日程操作
+    handleClickRicheng(type, item) {
+      console.log(type, item);
+      if (type == "edit") {
+        // 编辑
+      } else if (type == "del") {
+        //  删除
+      }
+    },
+
     handleChangeParty() {},
 
     handleChangeDate(item) {
       console.log("handleChangeDate");
       this.currentYearStr = item.year + "";
       this.currentMonth = item.month;
+      this.currentDate = { ...item };
+
+      this.getCurrentDateData();
+    },
+
+    handleRangeChange(arr) {
+      this.getRangeData(arr);
+    },
+
+    async getRangeData(arr) {
+      const url = "/icPartyAct/homeSearch";
+
+      const { data, code, msg } = await requestPost(url, {
+        ...this.apiParams,
+        startDate: arr[0].dateId,
+        endDate: arr[arr.length - 1].dateId,
+      });
+      if (code === 0) {
+        if (Array.isArray(data)) {
+          arr.forEach((item) => {
+            this.rangeData[item.dateId] = {
+              ...item,
+              scheduleTotal: 0,
+              activityTotal: 0,
+              scheduleList: [],
+              activityList: [],
+            };
+            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;
+            }
+          });
+          console.log("rangeData", this.rangeData);
+        }
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    async getMonthData() {
+      const url = "/icPartyAct/homeMonthTotal";
+
+      const { data, code, msg } = await requestPost(url, {
+        ...this.apiParams,
+      });
+      if (code === 0) {
+        if (Array.isArray(data)) {
+          data.forEach((item) => {
+            this.monthData[item.monthId - 1] = item.count;
+          });
+          console.log(this.monthData);
+        }
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    async getCurrentDateData() {
+      const url = "/icPartyAct/actAndScheduleList";
+
+      const { data, code, msg } = await requestPost(url, {
+        ...this.apiParams,
+        dateId: this.currentDate.dateId,
+      });
+      if (code === 0) {
+        this.currentDateData.scheduleList = data.scheduleList || [];
+        this.currentDateData.activityList = data.activityList || [];
+      } else {
+        this.$message.error(msg);
+      }
     },
 
-    async getPartyOggList() {
+    async getPartyOptions() {
       const url = "/resi/partymember/icPartyOrg/getSearchTreelist";
       let params = {
-        agencyId: this.$store.state.user.agencyId,
+        customerId: localStorage.getItem("customerId"),
+        agencyId: localStorage.getItem("agencyId"),
       };
+
       const { data, code, msg } = await requestGet(url, params);
-      console.log("data-orgparty----o", data);
       if (code === 0) {
-        this.partyOrgList = this.deepArrTOnull(data);
+        if (Array.isArray(data) && data.length > 0) {
+          this.partyOptions = data;
+          this.fmData.orgId = data[0].id;
+        }
       } else {
       }
     },
@@ -237,6 +481,21 @@ $red: #f33;
     border-radius: 4px;
     cursor: pointer;
     color: #999999;
+    .tip-num {
+      position: absolute;
+      z-index: 10;
+      top: -7px;
+      right: -7px;
+      border-radius: 100%;
+      width: 14px;
+      height: 14px;
+      line-height: 14px;
+      text-align: center;
+      font-size: 10px;
+      text-align: center;
+      color: #ffffff;
+      background-color: #f1ba06;
+    }
     .z-on {
       color: $red;
     }