zjugis_OA/client/src/views/OaSystem/personnelManagement/weeklyDetail/WeekCalendar.vue

<template>
  <div class="log-list">
    <div class="title">
      <div class="show-month">{{ moment(thisMonth).format('YYYY 年 M 月') }}</div>
    </div>

    <div class="content" v-loading="isLoading">
      <div
        v-for="(item, index) in thisMonthLogs"
        :key="item.week"
        class="week-item"
        :style="{
          backgroundColor: item.bgColor,
          border: item.endDate == checkItem ? `1.5px solid ${item.color}` : 'none'
        }"
        @click="goToWeeklyPage(item)"
      >
        <div class="left">
          <div class="week-title">{{ weekTitleList[index] }}</div>
          <div class="week-date">{{
            `${moment(item.startDate).format('M月D日')} ~ ${moment(item.endDate).format('M月D日')}`
          }}</div>
        </div>
        <div class="right">
          <div class="icon-box" :style="{ backgroundColor: item.color }">
            <el-icon>
              <Check v-if="item.icon == 'Check'" />
              <Close v-if="item.icon == 'Close'" />
              <EditPen v-if="item.icon == 'EditPen'" />
              <More v-if="item.icon == 'More'" />
            </el-icon>
          </div>
          <span>{{ item.type }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
/**
 * @description 首页周报列表
 * 先获取到最近三个月的工作日列表详情，对工作日进行周数划分
 * 再获取近三个月的周报列表，对周报填报情况进行判断
 */
import moment from 'moment'
import { service, http } from './service'

interface IProp {
  detailTime: any[]
  userId: string
  onChange: any
}
const { detailTime, userId, onChange } = defineProps<IProp>()

const isLoading = ref<boolean>(false)
// 所有的周日报和周划分
// const allWorkDayListAndLogs = ref<any>([])
// 本月日期
const thisMonth = ref<any>(moment(detailTime[1]))
// 本月的周日报和周划分
const thisMonthLogs = ref<any>([])

// 获取工作日列表
onMounted(async () => {
  await initPageList()
  // 初始化的时候进行一些选择
  let nowLog: any = thisMonthLogs.value[0]

  if (detailTime[0] != detailTime[1]) {
    nowLog =
      thisMonthLogs.value.find(
        (item: any) => item.startDate == detailTime[0] && item.endDate == detailTime[1]
      ) ?? thisMonthLogs.value[0]
  } else {
    nowLog =
      thisMonthLogs.value.find((item: any) => moment().isBetween(item.startDate, item.endDate)) ??
      thisMonthLogs.value[0]
  }

  goToWeeklyPage(nowLog)
})

const message = useMessage()

// 获取当月工作日列表详情
const workDayList = async () => {
  const detailTime = [
    thisMonth.value.startOf('month').format('YYYY-MM-DD HH:mm:ss'),
    thisMonth.value.endOf('month').format('YYYY-MM-DD HH:mm:ss')
  ]

  const workDays = await http.getWorkDayList(detailTime[0], detailTime[1])
  const workDayObj = service.setWorkDayListToWeek(workDays)
  return workDayObj
}

// 合并工作日和周报列表并初始化页面
const initPageList = async () => {
  isLoading.value = true
  const workObj = await workDayList()
  const logList = await http.getMonthLogList(thisMonth.value, userId)
  const allWorkDayListAndLogs = service.mergeWorkDayAndLogs(workObj, logList)

  const pointer = moment(thisMonth.value).format('YYYY-M')
  const thisMonthLog = allWorkDayListAndLogs[pointer].map((item: any) => {
    // 默认未填
    item.type = statusObj[1].type
    item.icon = statusObj[1].icon
    item.color = statusObj[1].color
    item.bgColor = statusObj[1].bgColor
    // 如果本周
    const startOfWeek = moment().startOf('week')
    const endOfWeek = moment().endOf('week').add(1, 'day')
    if (moment(item.startDate).isBetween(startOfWeek, endOfWeek)) {
      item.icon = statusObj[2].icon
      item.color = statusObj[2].color
      item.bgColor = statusObj[2].bgColor
      item.type = statusObj[2].type
    }
    // 如果已填，且不是暂存
    if (item.isLog.length > 0 && !item.isLog[0].isTemp) {
      const isLog = item.isLog[0]
      item.id = isLog.id
      item.icon = statusObj[0].icon
      item.color = statusObj[0].color
      item.bgColor = statusObj[0].bgColor
      item.type = statusObj[0].type
    }
    // 如果已填但是是暂存
    if (item.isLog.length > 0 && item.isLog[0].isTemp) {
      // 啥也不做
      item.type = '暂存'
    }
    // 如果未到
    if (moment(item.startDate).isAfter(moment())) {
      item.icon = statusObj[3].icon
      item.color = statusObj[3].color
      item.bgColor = statusObj[3].bgColor
      item.type = statusObj[3].type
    }
    return item
  })

  isLoading.value = false

  thisMonthLogs.value = thisMonthLog

  const nowLog = thisMonthLog.find((item: any) =>
    moment(checkItem.value).isBetween(
      item.startDate,
      moment(item.endDate).add(1, 'day'),
      item.endDate
    )
  )
  if (nowLog) {
    itemOnChange(nowLog)
  }
}
// 颜色列表
const weekTitleList = ['第一周', '第二周', '第三周', '第四周', '第五周']
const statusObj = [
  { type: '已填', icon: 'Check', color: '#0ACE9D', bgColor: '#EAF8F4' },
  { type: '未填', icon: 'Close', color: '#F85638', bgColor: '#F8EAEA' },
  { type: '待填', icon: 'EditPen', color: '#1B80EB', bgColor: '#DDEDFD' },
  { type: '未到', icon: 'More', color: '#BDC7CE', bgColor: '#F2F6FA' }
]
// 跳转到周报填写或详情页面
// const { push } = useRouter()
const checkItem = ref(moment())
const goToWeeklyPage = (item: any) => {
  if (item.type == '未到') {
    message.info('还未到这周！')
    return
  }
  // 修改点击的item
  checkItem.value = item.endDate
  itemOnChange(item)
}

const itemOnChange = (item: any) => {
  const logDetail = item.isLog[0] ?? {}
  const changeData: any = {
    ...logDetail,
    reportStartDate: item.startDate,
    reportEndDate: item.endDate,
    weekDate: [item.startDate, item.endDate],
    isLog: logDetail,
    userId
  }
  onChange(changeData)
}
</script>
<style scoped lang="scss">
.log-list {
  padding: 10px 10px;
  height: calc(100% - 100px);
  .title {
    display: flex;
    .check-btn {
      font-size: 18px;
      font-weight: bold;
      color: #626b70;
      cursor: pointer;
    }
    .show-month {
      margin: 0 10px;
      font-weight: bold;
      font-size: 16px;
      color: #2d333c;
    }
  }
  .content {
    margin-top: 20px;
    height: 100%;
    overflow-y: scroll;

    .week-item {
      height: 90px;
      margin-bottom: 15px;
      border-radius: 4px 4px 4px 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      cursor: pointer;
      .week-title {
        font-weight: bold;
        font-size: 17px;
        color: #121518;
      }
      .week-date {
        font-weight: 400;
        font-size: 16px;
        color: #2b333c;
        margin-top: 8px;
      }
      .right {
        display: flex;
        height: 50px;
        justify-content: space-between;
        align-items: center;
        padding-right: 5px;
      }
      .icon-box {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        margin: 0 10px;
        color: #fff;
      }
    }
  }
  ::-webkit-scrollbar {
    width: 0 !important;
  }
}
</style>