zjugis_OA/client/src/views/OaSystem/components/OaCalendar/index.vue

<template>
  <div class="OaCalendar">
    <div class="selectBox">
      <el-icon class="icon1" @click="lastClick"><ArrowLeftBold /></el-icon>
      <p>{{ moment(nowTime).format('YYYY年MM月') }}</p>
      <el-icon class="icon1" @click="nextClick"><ArrowRightBold /></el-icon>
    </div>
    <div class="contentBox">
      <div class="ulBox">
        <ul>
          <li v-for="(item, index) in daysList" :key="index" :style="{ width: item.w }">
            <div class="topBox" :class="item.week == 0 || item.week == 6 ? 'topBoxPa' : 'topBox'">
              <p>{{ item.d }}</p>
            </div>
            <div class="bomBox">
              <img :src="imgBoxInit(item, index)" />
            </div>
          </li>
        </ul>
      </div>
      <div class="infoBox">
        <span>已填写&nbsp;(天)</span>
        <p>15</p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getAssetURL } from '@/utils/auth'
import moment from 'moment'
const daysList: any = ref([])
const nowTime: any = ref(moment().format('YYYY-MM'))

const initDates = async () => {
  let curDays: any = moment(nowTime.value).daysInMonth() // 当前天数
  let currentM: any = nowTime.value // 当前月
  let dateList: any = []

  for (let i = 0; i < curDays; i++) {
    let days = i + 1
    dateList.push({
      w: `calc(100% / ${curDays})`,
      d: days,
      m: currentM,
      dm: currentM + '-' + days,
      week: moment(currentM + '-' + days).day()
    })
  }

  daysList.value = dateList
}

const imgBoxInit = (item: any, index: any) => {
  let icon1 = getAssetURL('kq/1')
  let icon2 = getAssetURL('kq/2')
  let icon3 = getAssetURL('kq/3')

  if (item.week == 0 || item.week == 6) {
    return ''
  } else {
    if (index % 2 == 0) {
      return icon2
    } else {
      if (index % 3 == 0) {
        return icon3
      } else {
        return icon1
      }
    }
  }
}

const lastClick = () => {
  let time: any = moment(nowTime.value).subtract(1, 'months').format('YYYY-MM')
  nowTime.value = moment(time).format('YYYY-MM')
  initDates()
}
const nextClick = () => {
  let time: any = moment(nowTime.value).add(1, 'months').format('YYYY-MM')
  nowTime.value = moment(time).format('YYYY-MM')
  initDates()
}
onMounted(() => {
  initDates()
})
</script>
<style lang="scss" scoped>
.OaCalendar {
  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%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dee0e3;

    .ulBox {
      width: calc(100% - 120px);
      height: 100%;
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      li {
        height: 100%;
        .topBox {
          width: 100%;
          height: 50%;
          border: 1px solid #dee0e3;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: 0;
          border-top: 0;
          background-color: #f7f8fa;
          cursor: pointer;
          p {
            color: #121518;
            user-select: none;
          }
        }
        .topBoxPa {
          p {
            color: #b9c3c9;
          }
        }
        .topBox:hover {
          p {
            color: #1b80eb;
          }
        }

        .bomBox {
          width: 100%;
          height: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            user-select: none;
          }
        }
      }
      li:first-child {
        .topBox {
          border-left: 0;
        }
      }
      li:last-child {
        .topBox {
          border-right: 0;
        }
      }
    }
    .infoBox {
      width: 120px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      background-color: #edf0f4;
      border-left: 1px solid #dee0e3;
      span {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 14px;
      }
      p {
        width: 100%;
        text-align: center;
        font-size: 18px;
      }
    }
  }
}
</style>