考勤日历组件

client/package.json

@@ -68,7 +68,8 @@
     "vue-types": "^5.1.1",
     "vuedraggable": "^4.1.0",
     "web-storage-cache": "^1.1.1",
-    "xml-js": "^1.6.11"
+    "xml-js": "^1.6.11",
+    "moment": "^2.29.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",

client/src/main.ts

@@ -42,10 +42,14 @@ import Logger from '@/utils/Logger'
 
 import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
 
+import * as ElementPlusIconsVue from '@element-plus/icons-vue' //导入所有图标并进行全局注册
+
 // 创建实例
 const setupAll = async () => {
   const app = createApp(App)
-
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
   await setupI18n(app)
 
   setupStore(app)

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

@@ -0,0 +1,198 @@
+<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()
+    })
+  }
+  console.log(dateList)
+
+  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>

client/src/views/OaSystem/projectCenter/projectHome/projectHome.vue

@@ -1,6 +1,18 @@
 <template>
-  <div class="_ProjectCenter"> 项目中心首页 </div>
+  <div class="_ProjectCenter">
+    项目中心首页
+    <div class="ssss">
+      <OaCalendar />
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
+import OaCalendar from '@/views/OaSystem/components/OaCalendar/index.vue'
 defineOptions({ name: 'ProjectHome' })
 </script>
+<style lang="scss" scoped>
+.ssss {
+  width: 100%;
+  padding: 50px 220px;
+}
+</style>