|
@@ -0,0 +1,189 @@
|
|
|
+<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: `calc(100% / ${daysList.length})` }"
|
|
|
+ >
|
|
|
+ <div class="topBox" :class="item.week == 0 || item.week == 6 ? 'topBoxPa' : 'topBox'">
|
|
|
+ <p>{{ item.d }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="bomBox">
|
|
|
+ <img v-if="_iconList[item['state']]" :src="_iconList[item['state']]" />
|
|
|
+ <span v-else class="stop"></span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="infoBox">
|
|
|
+ <span>已填写(天)</span>
|
|
|
+ <p>15</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import moment from 'moment'
|
|
|
+import { getAssetURL } from '@/utils/auth'
|
|
|
+
|
|
|
+const daysList: any = ref([])
|
|
|
+const nowTime: any = ref(moment().format('YYYY-MM'))
|
|
|
+
|
|
|
+const _iconList: Object = {
|
|
|
+ '1': getAssetURL('kq/1'),
|
|
|
+ '2': getAssetURL('kq/2'),
|
|
|
+ '3': getAssetURL('kq/3'),
|
|
|
+ '4': null
|
|
|
+}
|
|
|
+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
|
|
|
+ const dmStr: string = `${currentM}-${days}`
|
|
|
+ dateList.push({
|
|
|
+ d: days,
|
|
|
+ m: currentM,
|
|
|
+ dm: dmStr,
|
|
|
+ state: '1', //1 已填写 2 未填写 3 请假 4 节假日
|
|
|
+ week: moment(currentM + '-' + days).day()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ daysList.value = dateList
|
|
|
+}
|
|
|
+
|
|
|
+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>
|