mirror of
https://github.com/FatttSnake/Pinnacle-OA.git
synced 2026-04-05 15:01:23 +08:00
New Home screen calendar and clock in function
This commit is contained in:
61
ui/src/components/home/AttendanceCard.vue
Normal file
61
ui/src/components/home/AttendanceCard.vue
Normal file
@@ -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>
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
<template #header>
|
<template #header>
|
||||||
<div class="card-header" style="height: 20px">
|
<div class="card-header" style="height: 20px">
|
||||||
<h2>公告</h2>
|
<h2>公告</h2>
|
||||||
<el-button class="button" text @click="pushTodo">查看更多</el-button>
|
<el-button text @click="pushTodo">查看更多</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div v-for="item in tableData" :key="item" class="card-text card-item">
|
<div v-for="item in tableData" :key="item" class="card-text card-item">
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<template #header>
|
<template #header>
|
||||||
<div class="card-header" style="height: 20px">
|
<div class="card-header" style="height: 20px">
|
||||||
<h2>待办工作</h2>
|
<h2>待办工作</h2>
|
||||||
<el-button class="button" text @click="pushTodo">查看更多</el-button>
|
<el-button text @click="pushTodo">查看更多</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div v-for="item in tableData" :key="item" class="card-text card-item">
|
<div v-for="item in tableData" :key="item" class="card-text card-item">
|
||||||
|
|||||||
@@ -5,16 +5,14 @@
|
|||||||
<work-card :tableData="works" />
|
<work-card :tableData="works" />
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<notice-card :tableData="notices" />
|
<attendence-card />
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<affairs-card :tableData="affairs" />
|
<affairs-card :tableData="affairs" />
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12"> <notice-card :tableData="notices" /></el-col>
|
||||||
<work-card :tableData="works" />
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -24,10 +22,11 @@ import request from '@/services'
|
|||||||
import AffairsCard from '@/components/home/AffairsCard.vue'
|
import AffairsCard from '@/components/home/AffairsCard.vue'
|
||||||
import { DATABASE_SELECT_OK } from '@/constants/Common.constants'
|
import { DATABASE_SELECT_OK } from '@/constants/Common.constants'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
|
import AttendenceCard from '@/components/home/AttendanceCard.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'HomePage',
|
name: 'HomePage',
|
||||||
components: { AffairsCard },
|
components: { AttendenceCard, AffairsCard },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
works: [],
|
works: [],
|
||||||
|
|||||||
@@ -52,6 +52,7 @@
|
|||||||
v-model="form.birth"
|
v-model="form.birth"
|
||||||
size="default"
|
size="default"
|
||||||
placeholder="请选择日期"
|
placeholder="请选择日期"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
@@ -239,7 +240,7 @@ export default {
|
|||||||
this.visible = false
|
this.visible = false
|
||||||
},
|
},
|
||||||
checkEmail(rule, value, callback) {
|
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)) {
|
if (mailReg.test(value)) {
|
||||||
callback()
|
callback()
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -36,7 +36,10 @@ const router = createRouter({
|
|||||||
{
|
{
|
||||||
path: '/profile',
|
path: '/profile',
|
||||||
component: async () => await import('@/pages/profile/PersonalProfile.vue'),
|
component: async () => await import('@/pages/profile/PersonalProfile.vue'),
|
||||||
name: 'profile'
|
name: 'profile',
|
||||||
|
meta: {
|
||||||
|
title: '个人档案'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
workRouter,
|
workRouter,
|
||||||
noticeRouter,
|
noticeRouter,
|
||||||
|
|||||||
Reference in New Issue
Block a user