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/layout/components/Sidebar/Logo.vue | 2
src/views/dashboard/index.vue | 264 +++++++++++++++++++++-----
src/views/user/inemployees.vue | 300 ++++++++++++++++++++++++-----
src/styles/variables.scss | 8
.env.production | 2
src/styles/index.scss | 2
6 files changed, 465 insertions(+), 113 deletions(-)
diff --git a/.env.production b/.env.production
index 9599b1d..2c521fe 100644
--- a/.env.production
+++ b/.env.production
@@ -2,5 +2,5 @@
ENV = 'production'
# base api
-VUE_APP_BASE_API = 'https://apicloud.mrbird.cn:8301/'
+VUE_APP_BASE_API = 'http://120.24.23.155:8301/'
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index efeb842..badcb68 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -45,7 +45,7 @@
width: 100%;
height: 54px;
line-height: 54px;
- background: #272c33;
+ background: rgba(163, 44, 48, 1);
text-align: center;
overflow: hidden;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 60f89bb..f9640f7 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -258,7 +258,7 @@
line-height: 38px;
}
.el-menu-item.is-active {
- background-color: #1f2328 !important;
+ background-color: rgba(0,0,0,.1) !important;
}
.el-button {
padding: 10px 20px;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index f37ee02..0ce0eaf 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -14,11 +14,11 @@
$menuActiveText:#fff;
$subMenuActiveText:#fff; // https://github.com/ElemeFE/element/issues/12951
-$menuBg:#272c33;
-$menuHover:#rgba(0,0,0,.1);
+$menuBg:rgba(163, 44, 48, 1);
+$menuHover:rgba(0,0,0,.1);
-$subMenuBg:#272c33;
-$subMenuHover:#rgba(0,0,0,.1);
+$subMenuBg:rgba(163, 44, 48, 1);
+$subMenuHover:rgba(0,0,0,.1);
$sideBarWidth: 255px;
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>
diff --git a/src/views/user/inemployees.vue b/src/views/user/inemployees.vue
index 36f5fa2..9c00ae6 100644
--- a/src/views/user/inemployees.vue
+++ b/src/views/user/inemployees.vue
@@ -1,62 +1,250 @@
<template>
<div>
- <el-row>
- <el-col :span="18"><h3 class="bu-tian-jia-title">在职员工</h3></el-col>
- <el-col :span="6"><el-input v-model="input" placeholder="请输入内容" style="width:200px" /><el-button type="primary">查询</el-button> <el-button type="danger">高级查询</el-button></el-col>
- </el-row>
- <el-row>
- <el-col :span="3">员工编号：<el-input v-model="input" placeholder="请输入内容" style="width:120px" /></el-col>
- <el-col :span="3">员工编号：<el-input v-model="input" placeholder="请输入内容" style="width:120px" /></el-col>
- <el-col :span="3">员工编号：<el-input v-model="input" placeholder="请输入内容" style="width:120px" /></el-col>
- <el-col :span="3">员工编号：<el-input v-model="input" placeholder="请输入内容" style="width:120px" /></el-col>
- <el-col :span="3">员工编号：<el-input v-model="input" placeholder="请输入内容" style="width:120px" /></el-col>
- <el-col :span="3">员工编号：<el-input v-model="input" placeholder="请输入内容" style="width:120px" /></el-col>
- <el-col :span="6"><el-button type="primary">查询</el-button> <el-button type="danger">高级查询</el-button></el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <form>
- <table>
- <tr><td>性别：</td><td><el-radio-group v-model="radio">
- <el-radio :label="3">备选项</el-radio>
- <el-radio :label="6">备选项</el-radio>
- <el-radio :label="9">备选项</el-radio>
- </el-radio-group></td></tr>
- <tr><td>最高学历：</td><td><el-radio-group v-model="radio">
- <el-radio :label="3">备选项</el-radio>
- <el-radio :label="6">备选项</el-radio>
- <el-radio :label="9">备选项</el-radio>
- </el-radio-group></td></tr>
- <tr><td>政治面貌：</td><td><el-radio-group v-model="radio">
- <el-radio :label="3">备选项</el-radio>
- <el-radio :label="6">备选项</el-radio>
- <el-radio :label="9">备选项</el-radio>
- </el-radio-group></td></tr>
- <tr><td>入职日期：</td><td><el-radio-group v-model="radio">
- <el-radio :label="3">备选项</el-radio>
- <el-radio :label="6">备选项</el-radio>
- <el-radio :label="9">备选项</el-radio>
- </el-radio-group></td></tr>
- <tr><td>年龄：</td><td><el-radio-group v-model="radio">
- <el-radio :label="3">备选项</el-radio>
- <el-radio :label="6">备选项</el-radio>
- <el-radio :label="9">备选项</el-radio>
- </el-radio-group></td></tr>
- <tr><td>档案情况：</td><td><el-radio-group v-model="radio">
- <el-radio :label="3">备选项</el-radio>
- <el-radio :label="6">备选项</el-radio>
- <el-radio :label="9">备选项</el-radio>
- </el-radio-group></td></tr>
- <tr><td>保险类型：</td><td><el-radio-group v-model="radio">
- <el-radio :label="3">备选项</el-radio>
- <el-radio :label="6">备选项</el-radio>
- <el-radio :label="9">备选项</el-radio>
- </el-radio-group></td></tr>
- </table>
- </form>
- </el-col>
- </el-row>
+ <el-container>
+ <el-header :height="headerHeight">
+ <el-row>
+ <el-col :span="16"><h3 class="bu-tian-jia-title">在职员工</h3></el-col>
+ <el-col :span="8">
+ <el-input
+ v-model="input"
+ placeholder="请输入内容"
+ style="width:200px"
+ /><el-button type="primary">查询</el-button>
+ <el-button type="danger" @click="advancedQueryShowMethods">高级查询</el-button></el-col>
+ </el-row>
+ <div v-show="advancedQueryShow">
+ <form>
+ <el-row>
+ <el-col
+ :span="3"
+ >员工编号：<el-input
+ v-model="input"
+ placeholder="请输入内容"
+ style="width:80px"
+ /></el-col>
+ <el-col
+ :span="3"
+ >员工编号：<el-input
+ v-model="input"
+ placeholder="请输入内容"
+ style="width:80px"
+ /></el-col>
+ <el-col
+ :span="3"
+ >员工编号：<el-input
+ v-model="input"
+ placeholder="请输入内容"
+ style="width:80px"
+ /></el-col>
+ <el-col
+ :span="3"
+ >员工编号：<el-input
+ v-model="input"
+ placeholder="请输入内容"
+ style="width:80px"
+ /></el-col>
+ <el-col
+ :span="3"
+ >员工编号：<el-input
+ v-model="input"
+ placeholder="请输入内容"
+ style="width:80px"
+ /></el-col>
+ <el-col
+ :span="3"
+ >员工编号：<el-input
+ v-model="input"
+ placeholder="请输入内容"
+ style="width:80px"
+ /></el-col>
+ <el-col
+ :span="6"
+ ><el-button type="primary">查询</el-button>
+ <el-button type="danger">重置</el-button></el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="24">
+
+ <table>
+ <tr><td>性别：</td><td><el-radio-group v-model="radio">
+ <el-radio :label="3">备选项</el-radio>
+ <el-radio :label="6">备选项</el-radio>
+ <el-radio :label="9">备选项</el-radio>
+ </el-radio-group></td></tr>
+ <tr><td>最高学历：</td><td><el-radio-group v-model="radio">
+ <el-radio :label="3">备选项</el-radio>
+ <el-radio :label="6">备选项</el-radio>
+ <el-radio :label="9">备选项</el-radio>
+ </el-radio-group></td></tr>
+ <tr><td>政治面貌：</td><td><el-radio-group v-model="radio">
+ <el-radio :label="3">备选项</el-radio>
+ <el-radio :label="6">备选项</el-radio>
+ <el-radio :label="9">备选项</el-radio>
+ </el-radio-group></td></tr>
+ <tr><td>入职日期：</td><td><el-radio-group v-model="radio">
+ <el-radio :label="3">备选项</el-radio>
+ <el-radio :label="6">备选项</el-radio>
+ <el-radio :label="9">备选项</el-radio>
+ </el-radio-group></td></tr>
+ <tr><td>年龄：</td><td><el-radio-group v-model="radio">
+ <el-radio :label="3">备选项</el-radio>
+ <el-radio :label="6">备选项</el-radio>
+ <el-radio :label="9">备选项</el-radio>
+ </el-radio-group></td></tr>
+ <tr><td>档案情况：</td><td><el-radio-group v-model="radio">
+ <el-radio :label="3">备选项</el-radio>
+ <el-radio :label="6">备选项</el-radio>
+ <el-radio :label="9">备选项</el-radio>
+ </el-radio-group></td></tr>
+ <tr><td>保险类型：</td><td><el-radio-group v-model="radio">
+ <el-radio :label="3">备选项</el-radio>
+ <el-radio :label="6">备选项</el-radio>
+ <el-radio :label="9">备选项</el-radio>
+ </el-radio-group></td></tr>
+ </table>
+ </el-col>
+ </el-row></form>
+ </div>
+ </el-header>
+ <el-container>
+ <el-aside width="300px">
+ <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
+ </el-aside>
+ <el-main> <el-table
+ :data="tableData"
+ style="width: 100%"
+ >
+ <el-table-column
+ prop="date"
+ label="日期"
+ width="180"
+ />
+ <el-table-column
+ prop="name"
+ label="姓名"
+ width="180"
+ />
+ <el-table-column
+ prop="address"
+ label="地址"
+ />
+ </el-table></el-main>
+ </el-container>
+ </el-container>
</div>
</template>
<script>
+export default {
+ data() {
+ return {
+ headerHeight: '60px',
+ advancedQueryShow: false,
+ tableData: [{
+ date: '2016-05-02',
+ name: '王小虎',
+ address: '上海市普陀区金沙江路 1518 弄'
+ }, {
+ date: '2016-05-04',
+ name: '王小虎',
+ address: '上海市普陀区金沙江路 1517 弄'
+ }, {
+ date: '2016-05-01',
+ name: '王小虎',
+ address: '上海市普陀区金沙江路 1519 弄'
+ }, {
+ date: '2016-05-03',
+ name: '王小虎',
+ address: '上海市普陀区金沙江路 1516 弄'
+ }],
+ data: [
+ {
+ label: '一级 1',
+ children: [
+ {
+ label: '二级 1-1',
+ children: [
+ {
+ label: '三级 1-1-1'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ label: '一级 2',
+ children: [
+ {
+ label: '二级 2-1',
+ children: [
+ {
+ label: '三级 2-1-1'
+ }
+ ]
+ },
+ {
+ label: '二级 2-2',
+ children: [
+ {
+ label: '三级 2-2-1'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ label: '一级 3',
+ children: [
+ {
+ label: '二级 3-1',
+ children: [
+ {
+ label: '三级 3-1-1'
+ }
+ ]
+ },
+ {
+ label: '二级 3-2',
+ children: [
+ {
+ label: '三级 3-2-1'
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ defaultProps: {
+ children: 'children',
+ label: 'label'
+ }
+ }
+ },
+ methods: {
+ handleNodeClick(data) {
+ console.log(data)
+ },
+ advancedQueryShowMethods() {
+ if (this.advancedQueryShow) {
+ this.headerHeight = '60px'
+ this.advancedQueryShow = false
+ } else {
+ this.headerHeight = '300px'
+ this.advancedQueryShow = true
+ }
+ }
+ }
+}
</script>
+<style lang="scss">
+.el-aside{
+padding: 20px;
+background: #f3f5f8;
+height: 600px;
+ .el-tree{
+ height: 100%;
+ }
+}
+.el-main{
+ height: 600px;
+}
+</style>
--
Gitblit v1.8.0