| | |
| | | </el-option> |
| | | </el-select> |
| | | <el-input v-model="query.userName" placeholder="请输入人员名称" size="small" style="width: 140px;margin: 0 16px;" clearable @keyup.enter.native="refreshTable()"></el-input> |
| | | <el-select v-model="query.laboratory" placeholder="请选择实验室" style="width: 140px;" size="small" clearable @change="refreshTable()"> |
| | | <!-- <el-select v-model="query.laboratory" placeholder="请选择实验室" style="width: 140px;" size="small" clearable @change="refreshTable()"> |
| | | <el-option |
| | | v-for="item in laboratory" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-select> --> |
| | | </div> |
| | | </div> |
| | | <div class="search_thing" style="padding-left: 30px;"> |
| | |
| | | <el-button size="small" type="primary" @click="refreshTable()">查 询</el-button> |
| | | </div> |
| | | <div class="search_thing btns" style="padding-left: 30px;"> |
| | | <el-button size="small" type="primary" v-if="downPower" @click="configTime" :loading="downLoading">时间配置</el-button> |
| | | <el-button size="small" type="primary" v-if="listPower" @click="configTime" :loading="downLoading">时间配置</el-button> |
| | | <el-button size="small" type="primary" v-if="downPower" @click="handleDown" :loading="downLoading">导 出</el-button> |
| | | <el-button size="small" type="primary" @click="schedulingVisible = true" v-if="addPower">排 班</el-button> |
| | | </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;"> |
| | |
| | | </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> |
| | |
| | | </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" ></div> |
| | | <div v-if="!configTimeVisibleLoading"> |
| | | <div v-loading="configTimeVisibleLoading" style="min-height: 200px;"> |
| | | <div v-for="(item, index) in timeQuery"> |
| | | <div class="form" style="display: flex;justify-content: space-between"> |
| | | <div style="margin-bottom: 12px;width: 200px;"> |
| | |
| | | </div> |
| | | <div style="width: calc(100% - 260px);"> |
| | | <span class="form_label">时间:</span> |
| | | <span v-if="!item.isEdit"> {{item.time === null ? '' : item.time[0] + '~' + item.time[1]}} </span> |
| | | <span v-if="!item.isEdit"> {{item.startTime&&item.endTime ? item.startTime + '~' + item.endTime:''}} </span> |
| | | <span class="form_input" v-if="item.isEdit"> |
| | | <el-time-picker |
| | | <!-- <el-time-picker |
| | | style="width: 200px;" |
| | | is-range |
| | | size="small" |
| | |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间" |
| | | placeholder="选择时间范围"> |
| | | </el-time-picker> |
| | | </el-time-picker> --> |
| | | <el-time-select |
| | | placeholder="起始时间" |
| | | v-model="item.startTime" |
| | | size="small" |
| | | :picker-options="{ |
| | | start: '00:00', |
| | | step: '00:15', |
| | | end: '24:00' |
| | | }" style="width: 120px;"> |
| | | </el-time-select> |
| | | <el-time-select |
| | | style="width: 120px;" |
| | | placeholder="结束时间" |
| | | v-model="item.endTime" |
| | | size="small" |
| | | :picker-options="{ |
| | | start: '00:00', |
| | | step: '00:15', |
| | | end: '24:00' |
| | | }"> |
| | | </el-time-select> |
| | | </span> |
| | | </div> |
| | | <span> |
| | |
| | | }, |
| | | list:[], |
| | | currentPage: 1, // 当前页 |
| | | pageSize: 10, // 一页10条 |
| | | total: '', |
| | | pageSize: 6, // 一页10条 |
| | | total: 0, |
| | | pageLoading: false, // 组件loading的展示,默认为true |
| | | finishLoding: false, // 加载完成,显示已经没有更多了 |
| | | monthList:[], |
| | | yearList:[], |
| | | downLoading:false, |
| | | keyMap:{}, |
| | | configTimeVisible: false, // 时间配置弹框 |
| | | configTimeVisibleLoading: false, // 时间配置弹框loading |
| | | timeTypeList: [], |
| | | timeQuery: [], |
| | | listPower:false, |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | this.monthList.push(i) |
| | | } |
| | | this.monthList.reverse() |
| | | // this.getPower() |
| | | this.getPower() |
| | | }, |
| | | methods: { |
| | | refresh(){ |
| | | this.list = []; |
| | | this.yearList = [] |
| | | this.keyMap = {}; |
| | | this.finishLoding = false; |
| | | this.currentPage = 1 |
| | | this.query = { |
| | | userName:'', |
| | |
| | | } |
| | | }, |
| | | 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() |
| | | } |
| | | }, |
| | |
| | | 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 |
| | |
| | | }).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){ |
| | |
| | | } |
| | | 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, |
| | |
| | | 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){ |
| | |
| | | } |
| | | 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() { |
| | |
| | | let add = false |
| | | let up = false |
| | | let down = false |
| | | let listPower = false |
| | | for (var i = 0; i < power.length; i++) { |
| | | if (power[i].menuMethod == 'update') { |
| | | if (power[i].menuMethod == 'performanceShiftUpdate') { |
| | | up = true |
| | | } |
| | | if (power[i].menuMethod == 'delDeviceParameter') { |
| | | down = true |
| | | } |
| | | if (power[i].menuMethod == 'add') { |
| | | if (power[i].menuMethod == 'performanceShiftAdd') { |
| | | add = true |
| | | } |
| | | if (power[i].menuMethod == 'shiftTimeList') { |
| | | listPower = true |
| | | } |
| | | } |
| | | this.addPower = add |
| | | this.upPower = up |
| | | this.downPower = down |
| | | this.listPower = listPower |
| | | }, |
| | | onMouseEnter(index){ |
| | | this.currentUserIndex = index |
| | |
| | | if (res.data.length > 0) { |
| | | res.data.forEach(item => { |
| | | item.isEdit = false |
| | | item.time = [] |
| | | item.time.push(item.startTime) |
| | | item.time.push(item.endTime) |
| | | // item.time = [] |
| | | // item.time.push(item.startTime) |
| | | // item.time.push(item.endTime) |
| | | const index = this.timeTypeList.findIndex(val => val.value === item.shift) |
| | | if (index > -1) { |
| | | item.type = this.timeTypeList[index].label |
| | |
| | | } |
| | | } |
| | | delete item.orderBy |
| | | delete item.time |
| | | const isEmpty = this.isObjectEmpty(item) |
| | | if (isEmpty) { |
| | | this.$message.error('请填写完整') |
| | |
| | | let newObj = {} |
| | | let url = '' |
| | | newObj.shift = item.shift |
| | | newObj.startTime = item.time[0] |
| | | newObj.endTime = item.time[1] |
| | | newObj.startTime = item.startTime |
| | | newObj.endTime = item.endTime |
| | | url = this.$api.performanceShift.shiftAdd |
| | | if (item.id) { |
| | | // 有id为修改 |
| | |
| | | } |
| | | .center { |
| | | width: 100%; |
| | | height: calc(100% - 50px ); |
| | | height: calc(100% - 100px ); |
| | | background-color: #fff; |
| | | overflow-y: auto; |
| | | display: flex; |