From faea1186aa736e93b7da38e928f64e8d83b56b59 Mon Sep 17 00:00:00 2001
From: yz_08 <yz_0812@outlook.com>
Date: 星期五, 22 一月 2021 18:57:22 +0800
Subject: [PATCH] 添加员工管理
---
src/views/dashboard/index.vue | 264 ++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 214 insertions(+), 50 deletions(-)
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 5e2e5c4..f56b433 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,68 +1,232 @@
<template>
<div class="main">
<el-row>
- <el-col :span="24"><div class="grid-content bg-purple-dark" /></el-col>
+ <el-col :span="8"><div> </div></el-col>
+ <el-col :span="8">
+ <ul class="data-ul">
+ <li>今日</li>
+ <li>本周</li>
+ <li>本月</li>
+ <li>今年</li>
+ </ul>
+ </el-col>
+ <el-col :span="8">
+ <el-date-picker
+ v-model="value2"
+ type="datetimerange"
+ :picker-options="pickerOptions"
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ align="right"
+ /></el-col>
</el-row>
<el-row :gutter="20">
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>在职员工总数</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>离职员工总数</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>新进人员</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>正常离职人员</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>自动离职人员</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>有效合同</p>
+ </el-card>
+ </el-col>
</el-row>
<el-row :gutter="20">
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>到期合同</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>新签合同</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>续签合同</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>历史合同</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>出勤天数</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>员工请假</p>
+ </el-card>
+ </el-col>
</el-row>
<el-row :gutter="20">
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
- <el-col :span="4"><div class="grid-content bg-purple" /></el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>员工加班（天）</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>员工加班（小时）</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>员工旷工</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>证件到期</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>员工调岗</p>
+ </el-card>
+ </el-col>
+ <el-col :span="4">
+ <el-card shadow="always">
+ <p class="card-number">12</p>
+ <p>员工体检</p>
+ </el-card>
+ </el-col>
</el-row>
</div>
</template>
<script>
-
export default {
-
+ data() {
+ return {
+ pickerOptions: {
+ shortcuts: [
+ {
+ text: '最近一周',
+ onClick(picker) {
+ const end = new Date()
+ const start = new Date()
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+ picker.$emit('pick', [start, end])
+ }
+ },
+ {
+ text: '最近一个月',
+ onClick(picker) {
+ const end = new Date()
+ const start = new Date()
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+ picker.$emit('pick', [start, end])
+ }
+ },
+ {
+ text: '最近三个月',
+ onClick(picker) {
+ const end = new Date()
+ const start = new Date()
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+ picker.$emit('pick', [start, end])
+ }
+ }
+ ]
+ },
+ value2: ''
+ }
+ }
}
</script>
<style lang="scss">
- .el-row {
- margin-bottom: 20px;
- &:last-child {
- margin-bottom: 0;
- }
- }
- .el-col {
- border-radius: 4px;
- }
- .bg-purple-dark {
- background: #99a9bf;
- }
- .bg-purple {
- background: #d3dce6;
- }
- .bg-purple-light {
- background: #e5e9f2;
- }
- .grid-content {
- border-radius: 4px;
- min-height: 36px;
- }
- .row-bg {
- padding: 10px 0;
- background-color: #f9fafc;
- }
+.el-card__body{
+ text-align: center;
+}
+.data-ul {
+ margin-top: 1px;
+ list-style: none;
+ li {
+ float: left;
+ border: 1px solid;
+ width: 60px;
+ height: 30px;
+ text-align: center;
+ line-height: 30px;
+ background: #ffffff;
+ border: 1px solid #dcdfe6;
+ }
+ li:hover {
+ border-color: #409eff;
+ }
+}
+.card-number{
+color:#0000BF;
+font-size:20px;
+}
+.el-row {
+ margin-bottom: 20px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+}
+.el-col {
+ border-radius: 4px;
+}
+.bg-purple-dark {
+ background: #99a9bf;
+}
+.bg-purple {
+ background: #d3dce6;
+}
+.bg-purple-light {
+ background: #e5e9f2;
+}
+.grid-content {
+ border-radius: 4px;
+ min-height: 36px;
+}
+.row-bg {
+ padding: 10px 0;
+ background-color: #f9fafc;
+}
</style>
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>
--
Gitblit v1.8.0