时间控件方法抽离

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

@@ -33,6 +33,7 @@
 </template>
 <script setup lang="ts">
 import moment from 'moment'
+import { useComputedDates, isWeekend } from './calendar'
 
 defineOptions({
   name: 'WeekCalendar'
@@ -45,10 +46,6 @@ interface IDate {
   w: number | number //星期几
   s?: string //用来标记状态
 }
-//计算当月第一天和最后一天边界日期
-type DayFunType = (dmStr: string, day: number) => Array<IDate>
-
-type DatesFunType = () => Array<Array<IDate>>
 type DaysFunType = (lists: any) => Array<Array<IDate>>
 
 const nowTime = ref<string>(moment().format('YYYY-MM'))
@@ -56,99 +53,12 @@ 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)
+  const index = isWeekend(nowTime.value)
+  if (index !== -1) {
+    nlists.splice(index, 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() // 当前天数
-  for (let i = 0; i < curDays; i++) {
-    let dmStr = ''
-    if (i < 9) {
-      dmStr = `${currentM}-0${i + 1}`
-    } else {
-      dmStr = `${currentM}-${i + 1}`
-    }
-    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,
-      m: moment(dmStr).format('MM'),
-      d: i + 1,
-      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
-      }
-    }
-  }
-  return datesArr
-}
-
-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'),
-          m: kDom.format('MM'),
-          d: kDom.format('DD'),
-          w: kDay === 0 ? 7 : kDay
-        }
-        arr.push(kItem)
-      }
-    }
-  }
-  return arr
-}
-
-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'),
-        m: kDom.format('MM'),
-        d: kDom.format('DD'),
-        w: kDay === 0 ? 7 : kDay
-      }
-      arr.push(kItem)
-    }
-  }
-  return arr
-}
 /**
  * @param type 0 减法 1 加法
  * @return void
@@ -157,12 +67,10 @@ 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')
-  sourceList.value = computedDays(computeDates())
-  console.log(sourceList.value)
+  sourceList.value = computedDays(useComputedDates(nowTime.value))
 }
 onMounted(() => {
-  sourceList.value = computedDays(computeDates())
-  console.log(sourceList.value)
+  sourceList.value = computedDays(useComputedDates(nowTime.value))
 })
 </script>
 <style lang="scss" scoped>

client/src/views/OaSystem/reportCenter/components/calendar.ts

@@ -0,0 +1,141 @@
+import moment from 'moment'
+
+interface IDate {
+  dm: string //年月日
+  m: string | number //月份
+  d: string | number //日期
+  w: number | number //星期几
+}
+
+type DayFunType = (dmStr: string, day: number) => Array<IDate>
+type DatesFunType = (dateStr: string) => IDate[][]
+
+const getPreDate: 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 kItem = {
+          dm: kDom.format('yyyy-MM-DD'),
+          m: kDom.format('MM'),
+          d: kDom.format('DD'),
+          w: useMomentDay(kDom)
+        }
+        arr.push(kItem)
+      }
+    }
+  }
+  return arr
+}
+
+const getNextDate: 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 kItem = {
+        dm: kDom.format('yyyy-MM-DD'),
+        m: kDom.format('MM'),
+        d: kDom.format('DD'),
+        w: useMomentDay(kDom)
+      }
+      arr.push(kItem)
+    }
+  }
+  return arr
+}
+
+/**
+ * 获取当前时间处于星期几，并转将星期日转换成7
+ * @param dateStr YYYY-MM-DD
+ * @return number
+ * **/
+type dateType = string | moment.Moment
+export const useMomentDay = (date: dateType): number => {
+  let cDate: moment.Moment
+  if (typeof date === 'string') {
+    cDate = moment(date)
+  } else {
+    cDate = date
+  }
+  const day = cDate.day()
+
+  return day === 0 ? 7 : day
+}
+/**
+ * 根据月份计算每天的时间
+ * @param date 'YYYY' 统计当月 'YYYY-MM/YYYY-MM-DD' 统计传入的月份
+ * @return IDate[]
+ * **/
+export const useComputedDates: DatesFunType = (date: dateType) => {
+  const dateList: Array<IDate> = []
+  const datesArr: Array<Array<IDate>> = []
+
+  let momentDate: moment.Moment
+  if (typeof date === 'string') {
+    momentDate = moment(date)
+  } else {
+    momentDate = date
+  }
+  const currentM: string = momentDate.format('YYYY-MM') // 当前月
+  const curDays: number = momentDate.daysInMonth() // 当前天数
+  for (let i = 0; i < curDays; i++) {
+    let dmStr = ''
+    if (i < 9) {
+      dmStr = `${currentM}-0${i + 1}`
+    } else {
+      dmStr = `${currentM}-${i + 1}`
+    }
+    const day: number = moment(dmStr).day()
+    const dayNum: number = day === 0 ? 7 : day
+    if (i === 0) {
+      dateList.push(...getPreDate(dmStr, dayNum))
+    }
+    dateList.push({
+      dm: dmStr,
+      m: moment(dmStr).format('MM'),
+      d: i + 1,
+      w: dayNum
+    })
+
+    if (i === curDays - 1) {
+      dateList.push(...getNextDate(dmStr, dayNum))
+    }
+  }
+  const len = Math.ceil(dateList.length / 7) + 1
+  for (let n = 0; n < len; n++) {
+    const 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
+      }
+    }
+  }
+  return datesArr
+}
+/**
+ * 计算某月第一天是否处于周六或周日
+ * **/
+export const isWeekend = (date: dateType): number => {
+  let cDate: moment.Moment
+  if (typeof date === 'string') {
+    cDate = moment(date)
+  } else {
+    cDate = date
+  }
+  const firstDay: number = useMomentDay(cDate.startOf('month'))
+  if (firstDay >= 6) {
+    return 0
+  }
+  return -1
+}