From d44b083e83ce8e17b681fa8e3f4ea3ed0f1572ec Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期六, 27 七月 2024 09:59:26 +0800
Subject: [PATCH] 修改班次分页
---
src/components/view/b3-classes.vue | 199 +++++++++++++++++++++++++++++++++----------------
1 files changed, 134 insertions(+), 65 deletions(-)
diff --git a/src/components/view/b3-classes.vue b/src/components/view/b3-classes.vue
index 45d37c3..3a2811d 100644
--- a/src/components/view/b3-classes.vue
+++ b/src/components/view/b3-classes.vue
@@ -50,7 +50,7 @@
</div>
</div>
<div class="center" v-loading="pageLoading">
- <scroll-pagination @load="init" :finishLoding="finishLoding" v-show="query.month&&list.length>0" style="height: 100%;" :key="'123'" :list="list">
+ <!-- <scroll-pagination @load="init" :finishLoding="finishLoding" v-show="query.month&&list.length>0" style="height: 100%;" :key="'123'" :list="list">
<div class="clearfix">
<div class="fixed-left">
<div class="content-title" style="padding-left: 16px;box-sizing: border-box;">
@@ -97,10 +97,101 @@
</div>
</div>
</div>
- </scroll-pagination>
- <scroll-pagination @load="initYear" :finishLoding="finishLoding" v-show="!query.month&&yearList.length>0" style="width: 100%;" :key="'111'" :list="yearList">
- <div class="clearfix year-table">
+ </scroll-pagination> -->
+ <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>
+ <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.charAt(0) }}</div>
+ <div class="user-info">
+ <p style="font-size: 14px;color: #3A7BFA;line-height: 24px;">{{ item.name }}</p>
+ <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;overflow-x: show;">鏃�:{{ item.day0 }},涓�:{{ item.day1 }},澶�:{{ item.day2 }},浼�:{{ item.day3 }},鍋�:{{ item.day4 }},宸�:{{ item.day6 }}</p>
+ <p style="margin-top: 4px;"><span style="color: #999999;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></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-item" v-for="(item,index) in weeks" :key="'b'+index">
+ <span class="month" style="position: absolute;top: 4px;" v-if="item.week=='鍛ㄦ棩'">{{ item.weekNum }}鍛�</span>
+ <p style="height: 26px;position: absolute;bottom: 12px;">
+ <span class="day">{{ item.day }}</span>
+ <span class="week">{{ item.week.charAt(1) }}</span>
+ </p>
+ </div>
+ </div>
+ <div class="content-body" v-for="(item,index) in list" :key="'c'+index"
+ v-on:mouseenter="onMouseEnter(index)"
+ v-on:mouseleave="currentUserIndex=null">
+ <div class="content-body-item" v-for="(m,i) in item.list" :key="'d'+i" :class="{hoverType:currentUserIndex==index}">
+ <el-dropdown trigger="click" placement="bottom" @command="e=>handleCommand(e,m)" :disabled="!upPower" style="width: 100%;height: 100%;cursor: pointer;">
+ <div class="work-box" :class="{type0:m.shift==='0',type1:m.shift==='1',type2:m.shift==='2',type3:m.shift==='3',type4:m.shift==='4',type5:m.shift==='5',type6:m.shift==='6'}">
+ <span style="cursor: pointer;" :style="`opacity: ${getShiftByDic(m.shift)=='鏃�'?0:1};`">{{ getShiftByDic(m.shift) }}</span>
+ </div>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item v-for="(n,j) in classType" :key="'h'+j" :command="n.value">{{ n.label }}</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div>
+ </div>
+ </div>
+ </div>
+ </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>
+ <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.charAt(0) }}</div>
+ <div class="user-info">
+ <p style="font-size: 14px;color: #3A7BFA;line-height: 24px;">{{ item.name }}</p>
+ <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;overflow-x: show;">鏃�:{{ item.day0 }},涓�:{{ item.day1 }},澶�:{{ item.day2 }},浼�:{{ item.day3 }},鍋�:{{ item.day4 }},宸�:{{ item.day6 }}</p>
+ <p style="margin-top: 4px;"><span style="color: #999999;font-size: 12px;display: inline-block;transform: scale(0.8) translateX(-10px);">鍚堣鍑哄嫟: </span><span style="font-size: 16px;
+ color: #FF4902;">{{ item.work_time }}澶�</span></p>
+ </div>
+ </div>
+ </div>
+ <div class="scroll-right">
+ <div class="content">
+ <div>
+ <div class="content-title content-title-right" style="border-bottom: 0;height: 52px;" :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;">
+ <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" :class="{hoverType:currentUserIndex==index}">
+ <p style="color:rgb(153, 153, 153);font-size: 12px;">鍚堣鍑哄嫟锛�<span style="font-size: 14px;color:#000">{{ m.totalMonthAttendance }}</span></p>
+ <p style="color:rgb(153, 153, 153);font-size: 12px;">
+ 鏃�:{{ m.day0 }},涓�:{{ m.day1 }},澶�:{{ m.day2 }},浼�:{{ m.day3 }},鍋�:{{ m.day4 }},宸�:{{ m.day6 }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- <scroll-pagination @load="initYear" :finishLoding="finishLoding" v-show="!query.month&&yearList.length>0" style="width: 100%;" :key="'111'" :list="yearList">
+ <div class="clearfix year-table">
+ <div class="fixed-left">
<div class="content-title" style="padding-left: 16px;box-sizing: border-box;">
浜哄憳鍚嶇О
</div>
@@ -144,9 +235,17 @@
</div>
</div>
</div>
- </scroll-pagination>
- <span style="color:#909399;font-size:14px;position: absolute;left:50%;top: 50%;transform: translate(-59%,-50%);" v-if="(query.month&&list.length==0)||(!query.month&&yearList.length==0)">鏆傛棤鏁版嵁</span>
+ </scroll-pagination> -->
+ <!-- <span style="color:#909399;font-size:14px;position: absolute;left:50%;top: 50%;transform: translate(-59%,-50%);" v-if="(query.month&&list.length==0)||(!query.month&&yearList.length==0)">鏆傛棤鏁版嵁</span> -->
</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>
+
<el-dialog title="鏃堕棿閰嶇疆" :visible.sync="configTimeVisible" width="620px">
<div v-loading="configTimeVisibleLoading" style="min-height: 200px;">
<div v-for="(item, index) in timeQuery">
@@ -325,19 +424,18 @@
},
list:[],
currentPage: 1, // 褰撳墠椤�
- pageSize: 10, // 涓�椤�10鏉�
- total: '',
+ pageSize: 6, // 涓�椤�10鏉�
+ total: 0,
pageLoading: false, // 缁勪欢loading鐨勫睍绀�,榛樿涓簍rue
finishLoding: false, // 鍔犺浇瀹屾垚锛屾樉绀哄凡缁忔病鏈夋洿澶氫簡
monthList:[],
yearList:[],
downLoading:false,
- keyMap:{},
configTimeVisible: false, // 鏃堕棿閰嶇疆寮规
configTimeVisibleLoading: false, // 鏃堕棿閰嶇疆寮规loading
timeTypeList: [],
timeQuery: [],
- listPower:false
+ listPower:false,
}
},
watch: {
@@ -382,8 +480,6 @@
refresh(){
this.list = [];
this.yearList = []
- this.keyMap = {};
- this.finishLoding = false;
this.currentPage = 1
this.query = {
userName:'',
@@ -398,14 +494,20 @@
}
},
refreshTable(){
- this.keyMap = {};
this.currentPage = 1
- this.finishLoding = false;
if(this.query.month){
this.list = [];
this.init()
}else{
this.yearList = []
+ this.initYear()
+ }
+ },
+ currentChange(num){
+ this.currentPage = num
+ if(this.query.month){
+ this.init()
+ }else{
this.initYear()
}
},
@@ -427,17 +529,7 @@
return overWan ? getWan(overWan) + "涓�" + getWan(noWan) : getWan(num)
},
init(){
- const key = `_${this.currentPage}`
- const value = this.keyMap[key]
- // 濡傛灉value瀛樺湪锛岃〃绀虹紦瀛樻湁鍊硷紝閭ｄ箞闃绘璇锋眰
- if(value) {
- return
- }
- // value涓嶅瓨鍦紝琛ㄧず绗竴娆¤姹�,璁剧疆鍗犱綅
- this.keyMap[key] = 'temp'
- if(this.currentPage==1){
- this.pageLoading = true
- }
+ this.pageLoading = true
let year = this.query.year.getFullYear()
let month0 = this.query.month?this.query.month:new Date().getMonth()+1
let month = month0>9?month0:'0'+month0
@@ -450,8 +542,8 @@
}).then(res => {
this.pageLoading = false
if (res.code == 201) return
- this.total = res.data.total
- let list = res.data.page.records.map(item=>{
+ 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){
@@ -470,33 +562,10 @@
}
this.weeks.push(obj)
})
- if(list.length==0){
- this.finishLoding = true;
- }else{
- if(list.length<this.pageSize){
- this.finishLoding = true;
- }
- this.list = this.list.concat(list)
- if(this.total==this.list.length){
- this.finishLoding = true;
- }
- this.currentPage++;
- }
})
},
initYear(){
- const key = `_${this.currentPage}`
- const value = this.keyMap[key]
- // 濡傛灉value瀛樺湪锛岃〃绀虹紦瀛樻湁鍊硷紝閭ｄ箞闃绘璇锋眰
- if(value) {
- return
- }
- // value涓嶅瓨鍦紝琛ㄧず绗竴娆¤姹�,璁剧疆鍗犱綅
- this.keyMap[key] = 'temp'
- // pageYear
- if(this.currentPage==1){
- this.pageLoading = true
- }
+ this.pageLoading = true
let year = this.query.year.getFullYear()
this.$axios.post(this.$api.performanceShift.pageYear, {
size:this.pageSize,
@@ -508,7 +577,7 @@
this.pageLoading = false
if (res.code == 201) return
this.total = res.data.total
- let list = res.data.records.map(item=>{
+ this.yearList = res.data.records.map(item=>{
for (let key in item.year) {
let type = this.getDayByDic(key)
if(type!=undefined||type!=null){
@@ -529,18 +598,18 @@
}
return item
});
- if(list.length==0){
- this.finishLoding = true;
- }else{
- if(list.length<this.pageSize){
- this.finishLoding = true;
- }
- this.yearList = this.yearList.concat(list)
- if(this.total==this.yearList.length){
- this.finishLoding = true;
- }
- this.currentPage++;
- }
+ // if(list.length==0){
+ // this.finishLoding = true;
+ // }else{
+ // if(list.length<this.pageSize){
+ // this.finishLoding = true;
+ // }
+ // this.yearList = this.yearList.concat(list)
+ // if(this.total==this.yearList.length){
+ // this.finishLoding = true;
+ // }
+ // this.currentPage++;
+ // }
})
},
getPower() {
@@ -883,7 +952,7 @@
}
.center {
width: 100%;
- height: calc(100% - 50px );
+ height: calc(100% - 100px );
background-color: #fff;
overflow-y: auto;
display: flex;
--
Gitblit v1.9.3