From aae0b49229d8798a2cc31a8449092e2db62e2407 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期四, 26 三月 2026 11:26:41 +0800
Subject: [PATCH] 绩效管理：人员考勤功能模块
---
src/views/performance/class/index.vue | 267 +++++++++++++++++++++++------------------------------
1 files changed, 117 insertions(+), 150 deletions(-)
diff --git a/src/views/performance/class/index.vue b/src/views/performance/class/index.vue
index c398c77..f6c52f0 100644
--- a/src/views/performance/class/index.vue
+++ b/src/views/performance/class/index.vue
@@ -37,13 +37,14 @@
<div class="center" v-loading="pageLoading">
<div class="clearfix" style="width: 100%" v-show="query.month">
<div class="fixed-left">
- <div class="content-title" style="padding-left: 16px; box-sizing: border-box">
+ <div class="content-title" style="padding-left: 16px; box-sizing: border-box;position: fixed;z-index: 1;background-color: #fff;width:220px">
浜哄憳鍚嶇О
+ <span style="color:#ff4949">(浜哄憳鏁伴噺:{{list.length}})</span>
</div>
<div class="content-user" :class="{ hoverType: currentUserIndex == index }" v-for="(item, index) in list"
:key="'e' + index" v-on:mouseenter="onMouseEnter(index)" v-on:mouseleave="currentUserIndex = null">
<div class="user-pic">
- {{ item.name ? item.name.charAt(0) : "" }}
+ {{ item.userName ? item.userName.charAt(0) : "" }}
</div>
<div class="user-info">
<p style="
@@ -52,20 +53,15 @@
line-height: 24px;
margin: 0;
">
- {{ item.name }}
+ {{ item.userName }}
</p>
- <p style="
- color: #999999;
- font-size: 12px;
- transform: scale(0.8) translateX(-20px);
- white-space: nowrap;
- width: 150px;
- overflow-x: show;
- margin: 0;
- ">
- 鏃�:{{ item.day0 }},涓�:{{ item.day1 }},澶�:{{ item.day2 }},浼�:{{
- item.day3
- }},鍋�:{{ item.day4 }},宸�:{{ item.day6 }}
+ <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;margin: 0;">
+ <span>鏃�:{{ item.monthlyAttendance.morningShift}},</span>
+ <span>涓�:{{ item.monthlyAttendance.swingShift}},</span>
+ <span>澶�:{{ item.monthlyAttendance.nightShift}},</span>
+ <span>浼�:{{ item.monthlyAttendance.holidayShift}},</span>
+ <span>鍋�:{{ item.monthlyAttendance.leaveShift}},</span>
+ <span>宸�:0</span>
</p>
<p style="margin-top: 4px; margin: 0">
<span style="
@@ -73,18 +69,14 @@
font-size: 12px;
display: inline-block;
transform: scale(0.8) translateX(-10px);
- ">鍚堣鍑哄嫟: </span><span style="font-size: 16px; color: #ff4902">{{
- query.month
- ? item.monthlyAttendance.totalAttendance
- : item.sidebarAnnualAttendance.totalAttendance
- }}澶�</span>
+ ">鍚堣鍑哄嫟: </span><span style="font-size: 16px; color: #ff4902">{{item.monthlyAttendance.morningShift+item.monthlyAttendance.swingShift+item.monthlyAttendance.nightShift}}澶�</span>
</p>
</div>
</div>
</div>
<div class="scroll-right">
<div class="content">
- <div class="content-title content-title-right" style="border-bottom: 0">
+ <div class="content-title content-title-right" style="border-bottom: 0;position: fixed;z-index: 1;background-color: #fff;">
<div class="content-title-item" v-for="(item, index) in weeks" :key="'b' + index">
<span class="month" style="position: absolute; top: 0px" v-if="item.week == '鍛ㄦ棩'">{{ item.weekNum
}}鍛�</span>
@@ -119,13 +111,14 @@
</div>
<div class="clearfix year-table" style="width: 100%" v-show="!query.month">
<div class="fixed-left">
- <div class="content-title" style="padding-left: 16px; box-sizing: border-box">
+ <div class="content-title" style="padding-left: 16px; box-sizing: border-box;position: fixed;z-index: 1;background-color: #fff;width:220px">
浜哄憳鍚嶇О
+ <span style="color:#ff4949">(浜哄憳鏁伴噺:{{yearList.length}})</span>
</div>
<div class="content-user" :class="{ hoverType: currentUserIndex == index }" v-for="(item, index) in yearList"
:key="'e' + index" v-on:mouseenter="onMouseEnter(index)" v-on:mouseleave="currentUserIndex = null">
<div class="user-pic">
- {{ item.name ? item.name.charAt(0) : "" }}
+ {{ item.userName ? item.userName.charAt(0) : "" }}
</div>
<div class="user-info">
<p style="
@@ -134,20 +127,15 @@
line-height: 24px;
margin: 0;
">
- {{ item.name }}
+ {{ item.userName }}
</p>
- <p style="
- color: #999999;
- font-size: 12px;
- transform: scale(0.8) translateX(-20px);
- white-space: nowrap;
- width: 150px;
- overflow-x: show;
- margin: 0;
- ">
- 鏃�:{{ item.day0 }},涓�:{{ item.day1 }},澶�:{{ item.day2 }},浼�:{{
- item.day3
- }},鍋�:{{ item.day4 }},宸�:{{ item.day6 }}
+ <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;margin: 0;">
+ <span>鏃�:{{ item.sidebarAnnualAttendance.morningShift}},</span>
+ <span>涓�:{{ item.sidebarAnnualAttendance.swingShift}},</span>
+ <span>澶�:{{ item.sidebarAnnualAttendance.nightShift}},</span>
+ <span>浼�:{{ item.sidebarAnnualAttendance.holidayShift}},</span>
+ <span>鍋�:{{ item.sidebarAnnualAttendance.leaveShift}},</span>
+ <span>宸�:0</span>
</p>
<p style="margin-top: 4px; margin: 0">
<span style="
@@ -155,7 +143,7 @@
font-size: 12px;
display: inline-block;
transform: scale(0.8) translateX(-10px);
- ">鍚堣鍑哄嫟: </span><span style="font-size: 16px; color: #ff4902">{{ item.work_time }}澶�</span>
+ ">鍚堣鍑哄嫟: </span><span style="font-size: 16px; color: #ff4902">{{item.sidebarAnnualAttendance.morningShift+item.sidebarAnnualAttendance.swingShift+item.sidebarAnnualAttendance.nightShift}}澶�</span>
</p>
</div>
</div>
@@ -163,27 +151,28 @@
<div class="scroll-right">
<div class="content">
<div>
- <div class="content-title content-title-right" style="border-bottom: 0; height: 52px" :style="`display: grid;
+ <div class="content-title content-title-right" style="border-bottom: 0; height: 63px;position: fixed;z-index: 1;background-color: #fff;width: calc( 100% - 448px );" :style="`display: grid;
grid-template-columns: repeat(${monthList.length}, 1fr);`">
<div class="content-title-item" v-for="(item, index) in monthList" :key="'b' + index"
- style="height: 52px">
+ style="height: 52px;">
<span class="month">{{ item }}鏈�</span>
</div>
</div>
<div class="content-body" v-for="(item, index) in yearList" :key="'c' + index"
v-on:mouseenter="onMouseEnter(index)" v-on:mouseleave="currentUserIndex = null" :style="`display: grid;
grid-template-columns: repeat(${monthList.length}, 1fr);`">
- <div class="content-body-item" v-for="(m, i) in item.monthList" :key="'d' + i"
+ <div class="content-body-item" v-for="(m, i) in item.monthlyAttendance" :key="'d' + i"
:class="{ hoverType: currentUserIndex == index }">
<p style="color: rgb(153, 153, 153); font-size: 12px">
- 鍚堣鍑哄嫟锛�<span style="font-size: 14px; color: #000">{{
- m.totalMonthAttendance
- }}</span>
+ 鍚堣鍑哄嫟锛�<span style="font-size: 14px; color: #000">{{m.morningShift+m.swingShift+m.nightShift}}</span>
</p>
<p style="color: rgb(153, 153, 153); font-size: 12px">
- 鏃�:{{ m.day0 }},涓�:{{ m.day1 }},澶�:{{ m.day2 }},浼�:{{
- m.day3
- }},鍋�:{{ m.day4 }},宸�:{{ m.day6 }}
+ <span>鏃�:{{ m.morningShift}},</span>
+ <span>涓�:{{ m.swingShift}},</span>
+ <span>澶�:{{ m.nightShift}},</span>
+ <span>浼�:{{ m.holidayShift}},</span>
+ <span>鍋�:{{ m.leaveShift}},</span>
+ <span>宸�:0</span>
</p>
</div>
</div>
@@ -192,17 +181,13 @@
</div>
</div>
</div>
- <el-pagination background @current-change="currentChange" :page-size="pageSize" :current-page="currentPage"
- layout="total, prev, pager, next, jumper" :total="total"
- style="margin-top: 10px; text-align: right; margin-right: 30px">
- </el-pagination>
<ul v-show="showMenu"
class="contextmenu"
:style="{left:menuX+'px',top:menuY+'px'}"
@click.stop>
- <li @click="editAnnotation()">缂栬緫鎵规敞</li>
- <li class="divider"></li>
+ <li @click="updateAnnotation('edit')"><i class="el-icon-edit-outline"></i> 缂栬緫鎵规敞</li>
+ <li @click="updateAnnotation('delete')"><i class="el-icon-delete"></i> 鍒犻櫎鎵规敞</li>
</ul>
<el-dialog title="鏃堕棿閰嶇疆" :visible.sync="configTimeVisible" width="620px">
<div v-loading="configTimeVisibleLoading" style="min-height: 200px">
@@ -280,10 +265,26 @@
<span style="color: red; margin-right: 4px">*</span>浜哄憳鍚嶇О锛�
</div>
<div class="search_input" style="width: calc(100% - 90px)">
- <el-select v-model="schedulingQuery.userId" placeholder="璇烽�夋嫨" style="width: 100%" multiple clearable
- collapse-tags>
- <el-option v-for="item in personList" :key="item.id" :label="item.name" :value="item.id">
- </el-option>
+ <el-select v-model="schedulingQuery.userId" popper-class="select-with-all" placeholder="璇烽�夋嫨" style="width: 100%" multiple collapse-tags clearable>
+<!-- <el-option v-for="item in personList" :key="item.id" :label="item.name" :value="item.id">-->
+<!-- </el-option>-->
+ <template slot="prefix">
+ <el-button
+ type="text"
+ size="mini"
+ @click="handleSelectAll"
+ style="margin: 4px 0;"
+ >
+ {{ isAllSelected ? '鍙栨秷鍏ㄩ��' : '鍏ㄩ��' }}
+ </el-button>
+ <el-divider style="margin: 5px 0;" />
+ </template>
+ <el-option
+ v-for="item in personList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id"
+ />
</el-select>
</div>
</div>
@@ -320,7 +321,8 @@
obtainItemParameterList,
update,
selectUserCondition,
- editAnnotationText
+ editAnnotationText,
+ delAnnotationText
} from "@/api/performance/class";
export default {
name: 'Class',
@@ -392,7 +394,7 @@
loading: false,
schedulingQuery: {
week: "",
- userId: null,
+ userId: [],
shift: "",
},
list: [],
@@ -413,6 +415,11 @@
menuY: 0,
selectedTarget: null,
};
+ },
+ computed:{
+ isAllSelected() {
+ return this.schedulingQuery.userId.length === this.personList.length && this.personList.length > 0;
+ },
},
watch: {
@@ -437,6 +444,14 @@
document.removeEventListener('click', this.handleClickOutside)
},
methods: {
+ handleSelectAll() {
+ if (this.isAllSelected) {
+ this.schedulingQuery.userId = [];
+ } else {
+ // 鍙�変腑鍙敤閫夐」鐨剉alue
+ this.schedulingQuery.userId = this.personList.map(item => item.id);
+ }
+ },
handleContextMenu(target,e) {
// 闃绘娴忚鍣ㄩ粯璁ゅ彸閿彍鍗�
e.preventDefault()
@@ -457,29 +472,44 @@
this.selectedTarget = target
this.showMenu = true
},
- editAnnotation() {
+ //缂栬緫鎵规敞
+ updateAnnotation(operation) {
// 鐐瑰嚮鑿滃崟鍚庡叧闂彍鍗�
this.showMenu = false
if(this.selectedTarget && !this.selectedTarget.shift){
this.$message.warning('璇峰厛閫夋嫨鐝')
return
}
- this.$prompt('', '缂栬緫鎵规敞', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- inputType:'textarea',
- inputPlaceholder:'濉啓鎵规敞鍐呭',
- inputPattern: /^.{0,100}$/,
- inputErrorMessage: '鏈�澶ц緭鍏�100涓瓧绗�'
- }).then(({ value }) => {
- editAnnotationText({
- id:this.selectedTarget.id,
- annotationText:value
- }).then(res=>{
- this.refreshTable()
- this.$message.success("鎻愪氦鎴愬姛")
- })
- }).catch(() => { });
+ if(operation && operation==='edit'){
+ this.$prompt('', '缂栬緫鎵规敞', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ inputType:'textarea',
+ inputPlaceholder:'濉啓鎵规敞鍐呭',
+ inputPattern: /^.{0,100}$/,
+ inputErrorMessage: '鏈�澶ц緭鍏�100涓瓧绗�'
+ }).then(({ value }) => {
+ editAnnotationText({
+ id:this.selectedTarget.id,
+ annotationText:value
+ }).then(res=>{
+ this.$message.success("鎻愪氦鎴愬姛")
+ this.refreshTable()
+ })
+ }).catch(() => { });
+ }else if(operation && operation==='delete'){
+ this.$confirm('鏄惁鍒犻櫎鎵规敞鍐呭?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ delAnnotationText(this.selectedTarget.id).then(res=>{
+ this.$message.success("鍒犻櫎鎴愬姛")
+ this.refreshTable()
+ })
+ }).catch(() => {});
+ }
+
},
handleClickOutside() {
this.showMenu = false
@@ -525,40 +555,6 @@
this.initYear();
}
},
- transFromNumber(num) {
- let changeNum = [
- "闆�",
- "涓�",
- "浜�",
- "涓�",
- "鍥�",
- "浜�",
- "鍏�",
- "涓�",
- "鍏�",
- "涔�",
- ]; //changeNum[0] = "闆�"
- let unit = ["", "鍗�", "鐧�", "鍗�", "涓�"];
- num = parseInt(num);
- let getWan = (temp) => {
- let strArr = temp.toString().split("").reverse();
- let newNum = "";
- for (var i = 0; i < strArr.length; i++) {
- newNum =
- (i == 0 && strArr[i] == 0
- ? ""
- : i > 0 && strArr[i] == 0 && strArr[i - 1] == 0
- ? ""
- : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i])) +
- newNum;
- }
- return newNum;
- };
- let overWan = Math.floor(num / 10000);
- let noWan = num % 10000;
- if (noWan.toString().length < 4) noWan = "0" + noWan;
- return overWan ? getWan(overWan) + "涓�" + getWan(noWan) : getWan(num);
- },
init() {
this.pageLoading = true;
let year = this.query.year.getFullYear();
@@ -567,24 +563,12 @@
: new Date().getMonth() + 1;
let month = month0 > 9 ? month0 : "0" + month0;
page({
- size: this.pageSize,
- current: this.currentPage,
time: year + "-" + month + "-01 00:00:00",
userName: this.query.userName,
laboratory: this.query.laboratory,
}).then((res) => {
this.pageLoading = false;
- this.total = res.data.page.total;
- this.list = res.data.page.records.map((item) => {
- for (let key in item.monthlyAttendance) {
- let type = this.getDayByDic(key);
- if (type != undefined || type != null) {
- item[`day${type}`] = item.monthlyAttendance[key];
- }
- }
- return item;
- });
- console.log(this.list)
+ this.list = res.data.page
let headerList = res.data.headerList;
this.weeks = [];
headerList.forEach((item) => {
@@ -603,35 +587,12 @@
this.pageLoading = true;
let year = this.query.year.getFullYear();
pageYear({
- size: this.pageSize,
- current: this.currentPage,
time: year + "-01-01 00:00:00",
userName: this.query.userName,
laboratory: this.query.laboratory,
}).then((res) => {
this.pageLoading = false;
- this.total = res.data.total;
- this.yearList = res.data.records.map((item) => {
- for (let key in item.year) {
- let type = this.getDayByDic(key);
- if (type != undefined || type != null) {
- item[`day${type}`] = item.year[key];
- }
- }
- item.monthList = [];
- for (let m in item.month) {
- let obj = {};
- for (let key in item.month[m]) {
- let type = this.getDayByDic(key);
- if (type != undefined || type != null) {
- obj[`day${type}`] = item.month[m][key];
- }
- }
- obj.totalMonthAttendance = item.month[m].totalMonthAttendance;
- item.monthList.push(obj);
- }
- return item;
- });
+ this.yearList = res.data
});
},
onMouseEnter(index) {
@@ -673,7 +634,7 @@
this.schedulingVisible = false;
this.schedulingQuery = {
week: "",
- userId: null,
+ userId: [],
shift: "",
};
this.refresh();
@@ -943,12 +904,12 @@
min-height: calc(100% - 10px);
/* 瑙嗗彛楂樺害 */
margin-left: 220px;
- overflow-x: scroll;
+ overflow-x: auto;
}
.content {
- min-height: calc(100% - 10px);
/* 瑙嗗彛楂樺害 */
+ min-height: calc(100% - 10px);
}
.content-title {
@@ -1002,6 +963,10 @@
align-items: center;
}
+.content-body:nth-child(2){
+ padding-top:58px;
+}
+
.content-body-item {
height: 70px;
width: 50px;
@@ -1030,7 +995,9 @@
display: flex;
align-items: center;
}
-
+.content-user:nth-child(2){
+ margin-top:58px;
+}
.user-pic {
width: 50px;
height: 50px;
--
Gitblit v1.9.3