日历

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

@@ -16,28 +16,39 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-calendar>
+    <el-calendar ref='calendar'>
+      <template #header="{ date }">
+        <div style="display: flex;justify-content: center;align-items: center;width: 100%;">
+          <el-button size="small" text @click="selectDate('prev-month')">
+            <Icon icon="ep:arrow-left" size="18px"/>
+          </el-button>
+          <span style="padding: 0px 20px;">{{ date }}</span>
+          <el-button size="small" text @click="selectDate('next-month')">
+            <Icon icon="ep:arrow-right" size="18px"/>
+          </el-button>
+        </div>
+      </template>
       <template #date-cell="{ data }">
-        <!-- <p :class="data.isSelected ? 'is-selected' : ''" >
-          {{ Number(data.day.split('-').slice(2).join('-')) }}
-          {{ data.isSelected ? '✔️' : '' }}
-        </p> -->
-        <!-- {{data}} -->
         <div v-if="data.type == 'current-month'">
-          <div :class="data.isSelected ? 'is-selected' : ''" style="color:#aaa">
+          <div :class="data.isSelected ? 'is-selected' : 'day'" >
             {{ Number(data.day.split('-').slice(2).join('-')) }}
           </div>
-          <div class="sun">
+          <div v-for="(item,index) in dayData" :key='index'>
+            <div v-if="data.day == item.day">
+              <div class="sun" v-if="item.isShowSun">
                 <el-image style="width: 1.1vw; height: 1.1vw" src="/src/assets/svgs/sun.svg" />
                 <div class="text">白班</div>
-              <Icon class="mr-5px" icon="ep:delete" color="#409eff" size="14px" @click=""/>
+                  <Icon class="mr-5px" icon="ep:delete" color="#409eff" size="14px" @click="deleteShift(data,item,1)"/>
               </div>
-          <div class="sun">
+              <div class="sun" v-if="item.isShowMoon">
                 <el-image style="width: 1.1vw; height: 1.1vw" src="/src/assets/svgs/moon.svg" />
                 <div class="text">夜班</div>
-              <Icon class="mr-5px" icon="ep:delete" color="#409eff" size="14px" />
+                  <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>
       </template>
@@ -72,6 +83,8 @@ import TableHead from '@/components/TableHead/src/TableHead.vue'
 import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
 import Detail from '@/components/Detail/src/Detail.vue'
 import { ElCalendar } from 'element-plus'
+import { formatDate } from '@/utils/formatTime'
+import type { CalendarDateType, CalendarInstance } from 'element-plus'
 
 defineOptions({ name: 'ReceivedCalendar' })
 
@@ -83,6 +96,76 @@ const routeName = ref()
 routeName.value = route.name
 const tableColumns = ref(ReceivedCalendar.allSchemas.tableColumns)
 
+const dayData = ref([{
+  day:'2025-01-01',
+  isShowSun:true,
+  isShowMoon:true,
+},{
+  day:'2025-01-02',
+  isShowSun:true,
+  isShowMoon:true,
+},{
+  day:'2025-01-03',
+  isShowSun: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,
+  isShowMoon:true,
+}])
+
 // 查询页面返回
 const searchTableSuccess = (formField, searchField, val, formRef) => {
   nextTick(() => {
@@ -158,9 +241,36 @@ const basicFormRef = ref()
 const openForm = (type: string, row?: any) => {
   basicFormRef.value.open(type, row)
 }
-
+const handleDateChange=async(value)=> {
+  if (value && value.length === 2) {
+    const [start, end] = value;
+    let middleDays = (end - start) / (24 * 60 * 60 * 1000) - 1;
+    if (middleDays > 0) {
+      let middleDates = [];
+      for (let i = 1; i <= middleDays; i++) {
+        let middleDate = new Date(start.getTime() + i * 24 * 60 * 60 * 1000);
+        middleDates.push(formatDate(middleDate, 'YYYY-MM-DD'));
+      }
+      return [formatDate(start, 'YYYY-MM-DD'), ...middleDates, formatDate(end, 'YYYY-MM-DD')];
+    }
+  }
+}
 // 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)
+  dayData.value.forEach(item => {
+    dateArray.forEach(cur => {
+      if (item.day == cur) {
+        item.isShowMoon = false
+        item.isShowSun = false
+      }
+    })
+    
+  })
+  return
   var isHave =ReceivedCalendar.allSchemas.formSchema.some(function (item) {
     return item.field === 'activeTime' || item.field === 'expireTime';
   });
@@ -241,7 +351,21 @@ const searchFormClick = (searchData) => {
   }
   getList() // 刷新当前列表
 }
-
+// 刪除班次
+const deleteShift=(data,item,type) =>{
+  console.log(data)
+  if (type == 1) {
+    item.isShowSun = false
+  } else if (type == 2) {
+    item.isShowMoon = false
+  }
+  console.log(item)
+}
+const calendar = ref<CalendarInstance>()
+const selectDate = (val: CalendarDateType) => {
+  if (!calendar.value) return
+  calendar.value.selectDate(val)
+}
 /** 初始化 **/
 onMounted(async () => {
   getList()
@@ -261,4 +385,10 @@ onMounted(async () => {
     margin-left: 6px;
   }
 }
+.day{
+  color:#aaa
+}
+.is-selected{
+  color:#409eff
+}
 </style>

src/views/wms/basicDataManage/supplierManage/receivedCalendar/receivedCalendar.data.ts

@@ -31,8 +31,8 @@ export const ReceivedCalendar = useCrudSchemas(reactive<CrudSchema[]>([
     form: {
       component: 'DatePicker',
       componentProps: {
-        type: 'datetime',
-        valueFormat: 'x'
+        type: 'daterange',
+        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
       }
     },
   },