周报时间控件封装

client/src/views/OaSystem/reportCenter/components/WeekCalendar.vue

@@ -1,12 +1,31 @@
 <template>
   <div class="weeklyCenterBox">
     <div class="selectBox">
-      <el-icon class="icon1" @click="lastClick"><ArrowLeftBold /></el-icon>
+      <el-icon class="icon1" @click="clickHandle(0)"><ArrowLeftBold /></el-icon>
       <p>{{ moment(nowTime).format('YYYY年MM月') }}</p>
-      <el-icon class="icon1" @click="nextClick"><ArrowRightBold /></el-icon>
+      <el-icon class="icon1" @click="clickHandle(1)"><ArrowRightBold /></el-icon>
     </div>
     <div class="contentBox">
-      <div class="ulBox"> </div>
+      <div class="ulBox" v-for="(arr, index) in sourceList" :key="index">
+        <p :class="['title', index === 0 ? 'color1' : 'color2']">第{{ index + 1 }}周</p>
+        <ul>
+          <li
+            v-for="(cItem, cIndex) in arr"
+            :key="index + cIndex"
+            :class="[cItem['w'] >= 6 ? 'disabled' : '']"
+          >
+            <span>
+              {{ cItem['d'] }}
+            </span>
+            <span v-if="cItem['w'] < 6">
+              <Icon icon="fa:check" />
+            </span>
+            <span v-if="cItem['w'] < 6">
+              <Icon icon="fa:check" />
+            </span>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -16,23 +35,33 @@ import moment from 'moment'
 defineOptions({
   name: 'WeekCalendar'
 })
-const daysList: any = ref([])
-const nowTime = ref<string>(moment().format('YYYY-MM'))
 
-interface IDay {
-  d: string
-  m: number
-  w: number
+interface IDate {
+  dm: string //年月日
+  d: number //日期
+  w: number //星期几
+  s?: string //用来标记状态
 }
+//计算当月第一天和最后一天边界日期
+type DayFunType = (dmStr: string, day: number) => Array<IDate>
+
+type DatesFunType = () => Array<Array<IDate>>
+type DaysFunType = (lists: any) => Array<Array<IDate>>
 
-const dateList = ref<
-  Array<{
-    dm: string
-    d: number
-    w: number
-  }>
->([])
-const initDates = async () => {
+const nowTime = ref<string>(moment().format('YYYY-MM'))
+const sourceList = ref<Array<Array<IDate>>>([])
+//如果总周数大于6并且当月第一天星期大于等于6，删除第一周
+const computedDays: DaysFunType = (lists: any) => {
+  const nlists: Array<Array<IDate>> = [].concat(lists)
+  const firstDay: number = moment(nowTime.value).startOf('month').day()
+  if (firstDay === 6 || firstDay === 0) {
+    nlists.splice(0, 1)
+  }
+  return nlists
+}
+const computeDates: DatesFunType = () => {
+  const dateList: Array<IDate> = []
+  const datesArr: Array<Array<IDate>> = []
   const momentDate: moment.Moment = moment(nowTime.value)
   const currentM: string = nowTime.value // 当前月
   const curDays: number = momentDate.daysInMonth() // 当前天数
@@ -43,27 +72,91 @@ const initDates = async () => {
     } else {
       dmStr = `${currentM}-${i + 1}`
     }
-    dateList.value.push({
+    const day: number = moment(dmStr).day()
+    const dayNum: number = day === 0 ? 7 : day
+    if (i === 0) {
+      dateList.push(...getPreDay(dmStr, dayNum))
+    }
+    dateList.push({
       dm: dmStr,
       d: i + 1,
-      w: moment(dmStr).day()
+      w: dayNum
     })
+
+    if (i === curDays - 1) {
+      dateList.push(...getNextDay(dmStr, dayNum))
+    }
+  }
+  const len = Math.ceil(dateList.length / 7) + 1
+  for (let n = 0; n < len; n++) {
+    let arr: Array<IDate> = []
+    for (let m = n * 7; m < dateList.length; m++) {
+      const item: IDate = dateList[m]
+      if (m === 0) {
+        arr.push(item)
+        continue
+      }
+      arr.push(item)
+      if (arr.length % 7 === 0) {
+        datesArr.push(arr)
+        break
+      }
+    }
   }
-  console.log(dateList.value)
+  return datesArr
 }
 
-const lastClick = () => {
-  let time: any = moment(nowTime.value).subtract(1, 'months').format('YYYY-MM')
-  nowTime.value = moment(time).format('YYYY-MM')
-  initDates()
+const getPreDay: DayFunType = (dmStr, day = 0) => {
+  const arr: Array<IDate> = []
+  if (day > 1) {
+    const preDay = day - 1
+    if (preDay > 0) {
+      for (let k = preDay; k > 0; k--) {
+        const kDom: moment.Moment = moment(dmStr).subtract(k, 'days')
+        const kDay: number = kDom.day()
+        const kItem = {
+          dm: kDom.format('yyyy-MM-DD'),
+          d: parseInt(kDom.format('DD')),
+          w: kDay === 0 ? 7 : kDay
+        }
+        arr.push(kItem)
+      }
+    }
+  }
+  return arr
 }
-const nextClick = () => {
-  let time: any = moment(nowTime.value).add(1, 'months').format('YYYY-MM')
+
+const getNextDay: DayFunType = (dmStr, day = 0) => {
+  const arr: Array<IDate> = []
+  const nextDay = 7 - day
+  if (nextDay > 0) {
+    for (let k = 1; k <= nextDay; k++) {
+      const kDom: moment.Moment = moment(dmStr).add(k, 'days')
+      const kDay: number = kDom.day()
+      const kItem = {
+        dm: kDom.format('yyyy-MM-DD'),
+        d: parseInt(kDom.format('DD')),
+        w: kDay === 0 ? 7 : kDay
+      }
+      arr.push(kItem)
+    }
+  }
+  return arr
+}
+/**
+ * @param type 0 减法 1 加法
+ * @return void
+ * **/
+const clickHandle: Function = (type: number): void => {
+  const typeStr = type === 0 ? 'subtract' : 'add'
+  const time: string = moment(nowTime.value)[typeStr](1, 'months').format('YYYY-MM')
   nowTime.value = moment(time).format('YYYY-MM')
-  initDates()
+  sourceList.value = computedDays(computeDates())
+  console.log(sourceList.value)
 }
 onMounted(() => {
-  initDates()
+  sourceList.value = computedDays(computeDates())
+  console.log(sourceList.value)
 })
 </script>
 <style lang="scss" scoped>
@@ -86,13 +179,47 @@ onMounted(() => {
   }
   .contentBox {
     width: 100%;
-    height: 80px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border: 1px solid #dee0e3;
-
+    background-color: #f7f8fa;
+    padding: 20px;
     .ulBox {
+      flex: 1;
+      margin-left: 15px;
+      &:first-child {
+        margin-left: 0px;
+      }
+      > .title {
+        padding: 3px 0px;
+        text-align: center;
+        color: #fff;
+        &.color1 {
+          background-color: #34c17d;
+        }
+        &.color2 {
+          background-color: #e94a34;
+        }
+      }
+      > ul {
+        display: flex;
+        > li {
+          flex: 1;
+          padding: 8px 0px;
+          text-align: center;
+          display: flex;
+          flex-direction: column;
+          &.disabled {
+            color: #b9c3c9;
+          }
+          > span {
+            flex: 1;
+            text-align: center;
+            padding-top: 4px;
+          }
+        }
+      }
     }
   }
 }