日历

src/views/wms/basicDataManage/supplierManage/receivedCalendar/index.vue

@@ -33,21 +33,17 @@
           <div :class="data.isSelected ? 'is-selected' : 'day'" >
             {{ Number(data.day.split('-').slice(2).join('-')) }}
           </div>
-          <div v-for="(item,index) in dayData" :key='index'>
+          <div class="sun" v-if="isSpecialDate(data.day) && !isSpecialDate(data.day).isHideSun">
-            <div v-if="data.day == item.day">
+            <el-image style="width: 1.1vw; height: 1.1vw" src="/src/assets/svgs/sun.svg" />
-              <div class="sun" v-if="item.isShowSun">
+            <div class="text">白班</div>
-                <el-image style="width: 1.1vw; height: 1.1vw" src="/src/assets/svgs/sun.svg" />
+            <Icon class="mr-5px" icon="ep:delete" color="#409eff" size="14px" @click="deleteShift(data.day,1)" />
-                <div class="text">白班</div>
+          </div>
-                  <Icon class="mr-5px" icon="ep:delete" color="#409eff" size="14px" @click="deleteShift(data,item,1)"/>
+          <!-- 做监听 -->
-              </div>
+          <div class="sun" v-if="isSpecialDate(data.day) && !isSpecialDate(data.day).isHideMoon">
-              <div class="sun" v-if="item.isShowMoon">
+            <el-image style="width: 1.1vw; height: 1.1vw" src="/src/assets/svgs/moon.svg" />
-                <el-image style="width: 1.1vw; height: 1.1vw" src="/src/assets/svgs/moon.svg" />
+            <div class="text">夜班</div>
-                <div class="text">夜班</div>
+            <Icon class="mr-5px" icon="ep:delete" color="#409eff" size="14px" @click="deleteShift(data.day,2)" />
-                  <Icon class="mr-5px" icon="ep:delete" color="#409eff" size="14px"  @click="deleteShift(data,item,2)"/>
-              </div>
-            </div>
           </div>
-          <!--  -->
         </div>
         <div v-if="data.type == 'prev-month'"></div>
         <div v-if="data.type == 'next-month'"></div>
@@ -98,74 +94,52 @@ const tableColumns = ref(ReceivedCalendar.allSchemas.tableColumns)
 
 const dayData = ref([{
   day:'2025-01-01',
-  isShowSun:true,
+  isHideSun:false,
-  isShowMoon:true,
+  isHideMoon:true,
 },{
   day:'2025-01-02',
-  isShowSun:true,
+  isHideSun:true,
-  isShowMoon:true,
+  isHideMoon:true,
 },{
   day:'2025-01-03',
-  isShowSun:true,
+  isHideSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-04',
-  isShowSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-05',
-  isShowSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-06',
-  isShowSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-07',
-  isShowSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-08',
-  isShowSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-09',
-  isShowSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-10',
-  isShowSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-11',
-  isShowSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-12',
-  isShowSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-13',
-  isShowSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-14',
-  isShowSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-15',
-  isShowSun:true,
-  isShowMoon:true,
-},{
-  day:'2025-01-16',
-  isShowSun:true,
-  isShowMoon:true,
 },{
   day:'2025-01-17',
-  isShowSun:true,
+  isHideSun:true,
-  isShowMoon:true,
 }])
 
+const  getDatesInCurrentMonth=() =>{
+    const today = new Date();
+    const year1 = today.getFullYear();
+    const month1 = today.getMonth(); // 注意：月份是从0开始的，0代表1月，11代表12月
+    const date1 = 1; // 从1号开始
+    const firstDayOfMonth = new Date(year1, month1, date1);
+    const lastDayOfMonth = new Date(year1, month1 + 1, 0); // 获取下个月的0号，即当前月的最后一天
+    const daysInMonth = lastDayOfMonth.getDate();
+    const dates = [];
+ 
+  for (let i = 1; i <= daysInMonth; i++) {
+      const year =new Date(year1, month1, i).getFullYear();
+      const month = new Date(year1, month1, i).getMonth() + 1 >= 10 ? new Date(year1, month1, i).getMonth() + 1 : '0' + (new Date(year1, month1, i).getMonth() + 1);
+    const date = new Date(year1, month1, i).getDate()>= 10 ? new Date(year1, month1, i).getDate() : '0' + (new Date(year1, month1, i).getDate());
+    const day = `${year}-${month}-${date}`
+    
+    const isHaveDay = dayData.value.find(item => (item.day == day))
+      dates.push({
+        day:`${year}-${month}-${date}`,
+        isHideSun:isHaveDay&&isHaveDay.isHideSun ? isHaveDay.isHideSun : false,
+        isHideMoon:isHaveDay&&isHaveDay.isHideMoon ? isHaveDay.isHideMoon : false,
+      });
+    }
+ 
+    return dates;
+}
+ 
+// 使用函数
+const datesInCurrentMonth = ref(getDatesInCurrentMonth());
+const isSpecialDate=(date)=> {
+  return datesInCurrentMonth.value.find(item=>item.day == date);
+}
 // 查询页面返回
 const searchTableSuccess = (formField, searchField, val, formRef) => {
   nextTick(() => {
@@ -258,18 +232,16 @@ const handleDateChange=async(value)=> {
 // form表单提交
 const formsSuccess = async (formType, data) => {
   console.log(data)
-  // const date = formatDate(data.calendarDate, 'YYYY-MM-DD')
   const dateArray = await handleDateChange(data.calendarDate)
-  console.log(dateArray)
+  datesInCurrentMonth.value.forEach(item => {
-  dayData.value.forEach(item => {
     dateArray.forEach(cur => {
       if (item.day == cur) {
-        item.isShowMoon = false
+        item.isHideMoon = true
-        item.isShowSun = false
+        item.isHideSun = true
       }
     })
-    
   })
+  
   return
   var isHave =ReceivedCalendar.allSchemas.formSchema.some(function (item) {
     return item.field === 'activeTime' || item.field === 'expireTime';
@@ -352,12 +324,22 @@ const searchFormClick = (searchData) => {
   getList() // 刷新当前列表
 }
 // 刪除班次
-const deleteShift=(data,item,type) =>{
+const deleteShift=(day,type) =>{
-  console.log(data)
+  console.log(dayData.value)
   if (type == 1) {
-    item.isShowSun = false
+    datesInCurrentMonth.value.forEach((item => {
+      if (item.day == day) {
+        console.log(day)
+        item.isHideSun = true
+      }
+    }))
   } else if (type == 2) {
-    item.isShowMoon = false
+     datesInCurrentMonth.value.forEach((item => {
+      if (item.day == day) {
+        console.log(day)
+        item.isHideMoon = true
+      }
+    }))
   }
   console.log(item)
 }