fix;修改日历控件逻辑

admin/src/api/admin.js

@@ -33,7 +33,7 @@ export function postAddProductApi(data) {
 // 商品排期详情
 export function getProductSchedules(data) {
   return request({
-    url: `/admin/products/productschedules?id=${data}`,
+    url: `/admin/products/productschedules?id=${data.id}&date=${data.date}`,
     method: "get",
   });
 }

admin/src/views/proManagement/scheduling.vue

@@ -1,6 +1,18 @@
 <template>
   <div class="pro_scheduling">
-    <el-calendar v-model="value">
+    <div class="pick">
+      <span>{{ yue ? yue : dDate }}</span>
+      <el-date-picker
+        v-model="yue"
+        value-format="yyyy-MM"
+        format="yyyy 年 MM 月"
+        type="month"
+        placeholder="选择日期"
+        @change="changeYue"
+      >
+      </el-date-picker>
+    </div>
+    <el-calendar v-model="yue">
       <template #dateCell="{ date }">
         <div>
           <div>{{ date.getDate() }}</div>
@@ -77,6 +89,8 @@ export default {
         num: "",
         id: "",
       },
+      yue: "",
+      dDate: "",
       rules: {
         num: [
           {
@@ -93,9 +107,19 @@ export default {
     this.getList();
   },
   methods: {
-    async getList() {
-      const res = await getProductSchedules(this.formData.id);
+    async getList(val) {
+      const date = this.value; // 使用当前展示的日期
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const formattedDate = `${year}-${month}`;
+      this.dDate = formattedDate;
+      const param = {
+        id: this.formData.id,
+        date: val ? val : formattedDate,
+      };
+      const res = await getProductSchedules(param);
       if (res && res.error === 0) {
+        this.appointments = {}; // 清空旧数据
         res.data.forEach((item) => {
           this.$set(this.appointments, item.date, {
             books_num: item.books_num,
@@ -104,11 +128,50 @@ export default {
         });
       }
     },
+    changeYue() {
+      this.getList(this.yue);
+    },
     isDateAvailable(date) {
       const today = new Date();
       today.setHours(0, 0, 0, 0);
       return date >= today;
     },
+    isDateAvailable(date) {
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+
+      // 获取当前选择的月份和年份
+      const selectedYear = this.yue
+        ? new Date(this.yue).getFullYear()
+        : today.getFullYear();
+      const selectedMonth = this.yue
+        ? new Date(this.yue).getMonth()
+        : today.getMonth();
+
+      // 获取目标日期的年份和月份
+      const dateYear = date.getFullYear();
+      const dateMonth = date.getMonth();
+
+      // 如果目标日期是在当前选择的月份之后的月份
+      if (
+        dateYear > selectedYear ||
+        (dateYear === selectedYear && dateMonth > selectedMonth)
+      ) {
+        return true;
+      }
+
+      // 如果目标日期是在当前选择的月份，并且日期大于等于今天
+      if (
+        dateYear === selectedYear &&
+        dateMonth === selectedMonth &&
+        date >= today
+      ) {
+        return true;
+      }
+
+      // 其他情况下，日期不可用
+      return false;
+    },
     bookDate(date) {
       console.log(`预约日期: ${date.toLocaleDateString()}`);
       this.dialogVisible = true;
@@ -151,6 +214,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.pick {
+  position: relative;
+  top: 20px;
+  left: -327px;
+  span {
+    margin-right: 20px;
+  }
+}
 .pro_scheduling {
   display: flex;
   flex-direction: column;
@@ -175,4 +246,32 @@ export default {
   font-size: 14px;
   margin-top: 10px;
 }
+::v-deep .el-calendar-table:not(.is-range) td.prev,
+::v-deep .el-calendar-table:not(.is-range) td.next {
+  cursor: not-allowed;
+  pointer-events: none;
+  // display: none;
+}
+// ::v-deep .el-calendar-table:not(.is-range) td.prev {
+//   /*隐藏上个月的日期*/
+//   visibility: hidden;
+// }
+.prev > .el-calendar-day > .dateContent {
+  display: none;
+}
+.next > .el-calendar-day > .dateContent {
+  display: none;
+}
+// 隐藏月份后多一行
+::v-deep .el-calendar-table:not(.is-range) td.next {
+  /*隐藏下个月的日期*/
+  visibility: hidden;
+}
+// 隐藏上个月 今天 下个月按钮
+::v-deep .el-calendar__button-group {
+  display: none;
+}
+::v-deep .el-calendar__title {
+  display: none;
+}
 </style>