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

<template>
  <div class="weeklyCenterBox">
    <div class="selectBox">
      <el-icon class="icon1" @click="clickHandle(0)"><ArrowLeftBold /></el-icon>
      <p>{{ moment(nowTime).format('YYYY年MM月') }}</p>
      <el-icon class="icon1" @click="clickHandle(1)"><ArrowRightBold /></el-icon>
    </div>
    <div class="contentBox">
      <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 || cItem['m'] != moment(nowTime).format('MM') ? '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>
<script setup lang="ts">
import moment from 'moment'
import { useComputedDates, isWeekend } from './calendar'

defineOptions({
  name: 'WeekCalendar'
})

interface IDate {
  dm: string //年月日
  m: string | number //月份
  d: string | number //日期
  w: number | number //星期几
  s?: string //用来标记状态
}
type DaysFunType = (lists: any) => Array<Array<IDate>>

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 index = isWeekend(nowTime.value)
  if (index !== -1) {
    nlists.splice(index, 1)
  }
  return nlists
}
/**
 * @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')
  sourceList.value = computedDays(useComputedDates(nowTime.value))
}
onMounted(() => {
  sourceList.value = computedDays(useComputedDates(nowTime.value))
})
</script>
<style lang="scss" scoped>
.weeklyCenterBox {
  width: 100%;
  .selectBox {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .icon1 {
      cursor: pointer;
    }
    p {
      font-weight: 600;
      color: #2d333c;
      margin: 0 10px;
      user-select: none;
      cursor: pointer;
    }
  }
  .contentBox {
    width: 100%;
    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;
          }
        }
      }
    }
  }
}
</style>