zjugis_OA/client/src/views/OaSystem/home/components/daily/index.vue

<template>
  <div class="log-list">
    <el-calendar ref="calendar" v-model="thisMonth">
      <template #header="{ date }">
        <div class="title">
          <div class="check-btn" @click="checkMonth('prev')">
            <el-icon><ArrowLeft /></el-icon>
          </div>
          <div class="show-month">{{ date }}</div>
          <div class="check-btn" @click="checkMonth('next')">
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </template>
      <template #date-cell="{ data }">
        <!-- 仅工作日显示角标 -->
        <div>
          <div class="date-type">
            <div
              class="icon-box"
              :style="{ backgroundColor: backgroundColorObj[iconType(data.day)] }"
            >
              <el-icon>
                <Check v-if="iconType(data.day) == '已填'" />
                <Close v-if="iconType(data.day) == '未填'" />
                <EditPen v-if="iconType(data.day) == '当天'" />
                <!-- <More v-if="iconType(data.day) == '未到'" /> -->
              </el-icon>
            </div>
          </div>
          <div>{{ moment(data.day).format('DD') }}</div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>
<script lang="ts" setup>
/**
 * @description 首页日志概况
 */
import moment from 'moment'
import { http } from '../weekly/service'
import PubsubService from '@/utils/PubsubService'

const { push } = useRouter()
const message = useMessage()

// 本月日期
const thisMonth = ref<any>(moment())

// 日志填报列表
const logObj = ref<any>({})

// 获取工作日列表
onMounted(async () => {
  const logList = await http.getLogList('daily')
  logList.map((item: any) => {
    const date = item.reportStartDate
    const dateKey = moment(date).format('YYYY-MM-DD')
    logObj.value[dateKey] = item
  })

  // 订阅点击更多事件
  PubsubService.subscribe('homepage-click-weeklyAndDaily-more', () => {
    // 跳转到日志填报页面
    push('oaSystem/PersonalCenter/dailyCenter')
  })
})

// 仅能查看近三个月的
const checkMonth = (type: 'prev' | 'next') => {
  if (
    type == 'prev' &&
    moment(thisMonth.value).format('YYYY-MM') == moment().subtract(2, 'month').format('YYYY-MM')
  ) {
    message.info('仅能查看近三个月的周报，点击更多以查看全部！')
    return
  }
  if (type == 'next' && moment(thisMonth.value).format('YYYY-MM') == moment().format('YYYY-MM')) {
    message.info('还未到下个月！')
    return
  }
  if (type == 'prev') {
    thisMonth.value = moment(thisMonth.value).subtract(1, 'month')
  } else {
    thisMonth.value = moment(thisMonth.value).add(1, 'month')
  }
}

const iconType = (date) => {
  const formatDate = moment(date).format('YYYY-MM-DD')
  let text = ''
  if (!logObj.value[formatDate]) {
    text = '未填'
  }
  if (moment(formatDate).isAfter(moment())) {
    text = '未到'
  }
  if (formatDate == moment().format('YYYY-MM-DD')) {
    text = '当天'
  }
  if (logObj.value[formatDate]) {
    text = '已填'
  }
  return text
}
const backgroundColorObj = {
  未填: '#F85638',
  当天: '#1B80EB',
  已填: '#0ACE9D',
  未到: ''
  // 未到: '#BDC7CE'
}
</script>
<style scoped lang="scss">
.log-list {
  .title {
    width: 100%;
    height: 48px;
    line-height: 48px;
    background: #f3f6fa;
    border-radius: 40px 40px 40px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .show-month {
    }
    .check-btn {
      width: 30px;
      height: 30px;
      background-color: #fff;
      border-radius: 50%;
      line-height: 30px;
      text-align: center;
      font-size: 18px;
      margin: 0 10px;
      color: #5b656f;
    }
  }

  :deep(.el-calendar-table tr td) {
    border: 0;
  }
  :deep(.el-calendar-day) {
    padding: 0;
    text-align: center;
    height: 40px;
    .date-type {
      font-size: 12px;
      display: flex;
      justify-content: right;
    }
  }

  .icon-box {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
  }
}
</style>