From e7d7faba6709f80f213c723495a91d26a8cf2f40 Mon Sep 17 00:00:00 2001
From: ggb <1223416496@qq.com>
Date: Thu, 8 Jun 2023 01:13:16 +0800
Subject: [PATCH] New Home screen calendar and clock in function

---
 ui/src/components/home/AttendanceCard.vue | 61 +++++++++++++++++++++++
 ui/src/components/home/NoticeCard.vue     |  2 +-
 ui/src/components/home/WorkCard.vue       |  2 +-
 ui/src/pages/home/Home.vue                |  9 ++--
 ui/src/pages/profile/PersonalProfile.vue  |  3 +-
 ui/src/router/index.ts                    |  5 +-
 6 files changed, 73 insertions(+), 9 deletions(-)
 create mode 100644 ui/src/components/home/AttendanceCard.vue

diff --git a/ui/src/components/home/AttendanceCard.vue b/ui/src/components/home/AttendanceCard.vue
new file mode 100644
index 0000000..6312344
--- /dev/null
+++ b/ui/src/components/home/AttendanceCard.vue
@@ -0,0 +1,61 @@
+<template>
+    <el-card shadow="hover" class="homeCard">
+        <template #header>
+            <div class="card-header" style="height: 20px">
+                <h2>日历</h2>
+                <div>
+                    <el-button class="button" type="primary" @click="showAttendance"
+                        >打卡</el-button
+                    >
+                    <el-button class="button" text @click="pushTodo">查看个人考勤</el-button>
+                </div>
+            </div>
+        </template>
+        <el-calendar ref="calendar" />
+    </el-card>
+    <el-dialog v-model="attendanceVisible"> </el-dialog>
+</template>
+<script lang="ts">
+export default {
+    data() {
+        return {
+            attendanceVisible: false
+        }
+    },
+    methods: {
+        showAttendance() {
+            this.attendanceVisible = true
+        },
+        pushTodo() {
+            this.$router.push('/attendance/user')
+        }
+    }
+}
+</script>
+
+<style scoped>
+.homeCard {
+    height: calc((100vh - 56px - 40px - 20px) / 2);
+    min-height: calc((500px - 56px - 40px - 20px) / 2);
+}
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.card-text {
+    font-size: 14px;
+}
+.homeCard /deep/ .el-calendar-table .el-calendar-day {
+    height: calc(((100vh - 56px - 40px - 20px) / 2 - 56px - 40px - 24px - 28px) / 6);
+}
+.homeCard /deep/ .el-calendar__header {
+    padding: 0;
+}
+.homeCard /deep/ .el-calendar__body {
+    padding: 0;
+}
+.homeCard /deep/ .el-calendar-table thead th {
+    padding: 5px;
+}
+</style>
diff --git a/ui/src/components/home/NoticeCard.vue b/ui/src/components/home/NoticeCard.vue
index d635dfe..a9142dc 100644
--- a/ui/src/components/home/NoticeCard.vue
+++ b/ui/src/components/home/NoticeCard.vue
@@ -3,7 +3,7 @@
         <template #header>
             <div class="card-header" style="height: 20px">
                 <h2>公告</h2>
-                <el-button class="button" text @click="pushTodo">查看更多</el-button>
+                <el-button text @click="pushTodo">查看更多</el-button>
             </div>
         </template>
         <div v-for="item in tableData" :key="item" class="card-text card-item">
diff --git a/ui/src/components/home/WorkCard.vue b/ui/src/components/home/WorkCard.vue
index 26fec86..22b5df9 100644
--- a/ui/src/components/home/WorkCard.vue
+++ b/ui/src/components/home/WorkCard.vue
@@ -3,7 +3,7 @@
         <template #header>
             <div class="card-header" style="height: 20px">
                 <h2>待办工作</h2>
-                <el-button class="button" text @click="pushTodo">查看更多</el-button>
+                <el-button text @click="pushTodo">查看更多</el-button>
             </div>
         </template>
         <div v-for="item in tableData" :key="item" class="card-text card-item">
diff --git a/ui/src/pages/home/Home.vue b/ui/src/pages/home/Home.vue
index 0b7ea12..507fd83 100644
--- a/ui/src/pages/home/Home.vue
+++ b/ui/src/pages/home/Home.vue
@@ -5,16 +5,14 @@
                 <work-card :tableData="works" />
             </el-col>
             <el-col :span="12">
-                <notice-card :tableData="notices" />
+                <attendence-card />
             </el-col>
         </el-row>
         <el-row :gutter="20">
             <el-col :span="12">
                 <affairs-card :tableData="affairs" />
             </el-col>
-            <el-col :span="12">
-                <work-card :tableData="works" />
-            </el-col>
+            <el-col :span="12"> <notice-card :tableData="notices" /></el-col>
         </el-row>
     </div>
 </template>
@@ -24,10 +22,11 @@ import request from '@/services'
 import AffairsCard from '@/components/home/AffairsCard.vue'
 import { DATABASE_SELECT_OK } from '@/constants/Common.constants'
 import { ElMessage } from 'element-plus'
+import AttendenceCard from '@/components/home/AttendanceCard.vue'
 
 export default {
     name: 'HomePage',
-    components: { AffairsCard },
+    components: { AttendenceCard, AffairsCard },
     data() {
         return {
             works: [],
diff --git a/ui/src/pages/profile/PersonalProfile.vue b/ui/src/pages/profile/PersonalProfile.vue
index 832b079..a66974e 100644
--- a/ui/src/pages/profile/PersonalProfile.vue
+++ b/ui/src/pages/profile/PersonalProfile.vue
@@ -52,6 +52,7 @@
                                     v-model="form.birth"
                                     size="default"
                                     placeholder="请选择日期"
+                                    value-format="YYYY-MM-DD"
                                 />
                             </el-form-item>
                         </el-col>
@@ -239,7 +240,7 @@ export default {
             this.visible = false
         },
         checkEmail(rule, value, callback) {
-            const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
+            const mailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
             if (mailReg.test(value)) {
                 callback()
             } else {
diff --git a/ui/src/router/index.ts b/ui/src/router/index.ts
index b2f2a41..10bf3f1 100644
--- a/ui/src/router/index.ts
+++ b/ui/src/router/index.ts
@@ -36,7 +36,10 @@ const router = createRouter({
                 {
                     path: '/profile',
                     component: async () => await import('@/pages/profile/PersonalProfile.vue'),
-                    name: 'profile'
+                    name: 'profile',
+                    meta: {
+                        title: '个人档案'
+                    }
                 },
                 workRouter,
                 noticeRouter,