309 lines
7.2 KiB
Vue
309 lines
7.2 KiB
Vue
<template>
|
||
<view class="fullHeight">
|
||
<view class="" style="position: fixed; top: 0; left: 0; width: 100%; z-index: 10;background-color: #fff;">
|
||
<headers :showBack="true" class="fixedHeaderBox">
|
||
<view class="headerName">
|
||
考勤记录
|
||
</view>
|
||
</headers>
|
||
<view class="searchBox selectContent" :style="{ 'padding-top': (statusBarHeight+52) + 'px' }">
|
||
<text>考勤日期：</text>
|
||
<picker mode="date" @change="changeDate" :value="searchForm.attendanceDate" class="selectItem">
|
||
<view class="selectVideoBox">
|
||
<text class="videoName">{{ searchForm.attendanceDate }}</text>
|
||
<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
<!-- <picker mode="selector" :range="personTypeArr" @change="changePersonType" range-key="name"
|
||
:value="personTypeIndex" style="margin-left:10px" class="selectItem">
|
||
<view class="selectVideoBox">
|
||
<text class="videoName">{{ personTypeArr[personTypeIndex].name }}</text>
|
||
<uni-icons class="arrow" type="arrowdown" size="15"></uni-icons>
|
||
</view>
|
||
</picker> -->
|
||
</view>
|
||
<!-- <view class="middleBox" :style="{ 'padding-top': (statusBarHeight+52+40) + 'px' }">
|
||
<view class="box">
|
||
<view class="num">
|
||
{{ statictisData.total_person }}
|
||
</view>
|
||
<view class="txt">
|
||
出勤人数
|
||
</view>
|
||
</view>
|
||
<view class="box">
|
||
<view class="num">
|
||
{{ searchForm.personType == 1 ? statictisData.totalTeamNum : statictisData.totalDepartmentNum }}
|
||
</view>
|
||
<view class="txt">
|
||
{{ searchForm.personType == 1 ? '出勤班组' : '出勤部门' }}
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="listBox" style="padding-top: 100px;">
|
||
<!-- @click="searchPerson(item.id)" -->
|
||
<view class="personItem" v-for="item in list" :key="item.id">
|
||
<image v-if="item.fieldAcquisitionUrl" :src="url_config+'image/'+item.fieldAcquisitionUrl"
|
||
class="profile_photo"></image>
|
||
<image v-else src="/static/profile_photo.png" class="profile_photo"></image>
|
||
<view class="personInfo">
|
||
<view class="name">
|
||
{{ item.workerName }}
|
||
</view>
|
||
<view class="teamName">
|
||
{{ item.teamName ? item.teamName : item.departmentName }}
|
||
</view>
|
||
<view class="small">
|
||
{{ item.sex == 2 ? '女' : '男' }} {{ item.age }}
|
||
</view>
|
||
</view>
|
||
<!-- <image src="/static/icon-right.png" class="icon-right"></image> -->
|
||
</view>
|
||
<view class="placeholderBox" v-show="list.length===0">
|
||
<image src="/static/noData.png" class="noDataImg"></image>
|
||
<view class="text">
|
||
暂无数据
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="loadMoreBox" v-if="isLoadMore&&list.length>0">
|
||
<uni-load-more :status="loadStatus" iconType="auto"></uni-load-more>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headers from "@/components/headers/headers.vue"
|
||
import {
|
||
GetDateStr
|
||
} from "@/static/js/util.js"
|
||
|
||
export default {
|
||
components: {
|
||
headers
|
||
},
|
||
data() {
|
||
return {
|
||
searchForm: {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
projectSn: "",
|
||
attendanceDate: ''
|
||
},
|
||
projectDetail: {},
|
||
list: [],
|
||
statusBarHeight: 0,
|
||
loadStatus: 'more',
|
||
isLoadMore: false,
|
||
personTypeArr: [{
|
||
name: '施工人员',
|
||
value: 1
|
||
}, {
|
||
name: '管理人员',
|
||
value: 2
|
||
}],
|
||
personTypeIndex: 0,
|
||
statictisData: {
|
||
totalDepartmentNum: 0,
|
||
totalTeamNum: 0,
|
||
total_person: 0,
|
||
},
|
||
workerInfo: {}
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
this.workerInfo = JSON.parse(decodeURIComponent(option.item));
|
||
},
|
||
mounted() {
|
||
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight
|
||
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
|
||
this.searchForm.projectSn = this.projectDetail.projectSn
|
||
this.searchForm.attendanceDate = GetDateStr(0, '-')
|
||
this.loadData()
|
||
},
|
||
onShow() {
|
||
uni.removeStorageSync('person')
|
||
},
|
||
onReachBottom() {
|
||
if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
|
||
this.isLoadMore = true
|
||
this.searchForm.pageNo += 1
|
||
this.loadData()
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
this.searchForm.pageNo = 1
|
||
this.list = []
|
||
this.loadData()
|
||
},
|
||
methods: {
|
||
changeDate(e) {
|
||
this.searchForm.attendanceDate = e.target.value
|
||
this.list = []
|
||
this.searchForm.pageNo = 1
|
||
this.loadData()
|
||
},
|
||
changePersonType(e) {
|
||
this.personTypeIndex = e.target.value
|
||
this.searchForm.personType = this.personTypeArr[this.personTypeIndex].value
|
||
this.list = []
|
||
this.searchForm.pageNo = 1
|
||
this.loadData()
|
||
},
|
||
searchPerson(id) {
|
||
uni.navigateTo({
|
||
url: './searchTeam/personDetail?id=' + id
|
||
})
|
||
},
|
||
loadData() {
|
||
var that = this
|
||
let requestData = {
|
||
...this.searchForm,
|
||
personSn: this.workerInfo.personSn
|
||
}
|
||
this.sendRequest({
|
||
url: 'xmgl/workerInfo/selectAttendanceWorkerListByDate',
|
||
data: requestData,
|
||
method: "POST",
|
||
success(res) {
|
||
that.statictisData = res.result.count
|
||
that.list = that.list.concat(res.result.page.records)
|
||
if (res.result.page.records.length < that.searchForm
|
||
.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
|
||
that.isLoadMore = true
|
||
that.loadStatus = 'nomore'
|
||
} else {
|
||
that.isLoadMore = false
|
||
// that.loadStatus='more'
|
||
}
|
||
uni.stopPullDownRefresh()
|
||
console.log('that.isLoadMore', that.isLoadMore)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.searchBox {
|
||
// background-color: #2b8df3;
|
||
padding: 0 15px 5px;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.selectContent {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
|
||
.selectItem {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.listBox {
|
||
margin: 15px;
|
||
}
|
||
|
||
.personItem {
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0px 4px 13px 0px rgba(212, 220, 236, 0.53);
|
||
position: relative;
|
||
margin-bottom: 5px;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
// padding: 0 15px;
|
||
font-size: 15px;
|
||
|
||
.teamName {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.small {
|
||
font-size: 12px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
}
|
||
|
||
.profile_photo {
|
||
width: 50px;
|
||
height: 60px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.icon-right {
|
||
position: absolute;
|
||
width: 8px;
|
||
height: 14px;
|
||
right: 15px;
|
||
top: calc(50% - 7px);
|
||
}
|
||
|
||
.selectVideoBox {
|
||
border: 1px solid rgba(42, 43, 91, 0.2);
|
||
border-radius: 18px;
|
||
height: 35px;
|
||
font-size: 15px;
|
||
// display: inline-block;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.videoName {
|
||
padding: 0 12px 0 15px;
|
||
// border-right: 1px solid rgba(42, 43, 91, 0.2);
|
||
line-height: 35px;
|
||
height: 35px;
|
||
}
|
||
|
||
.arrow {
|
||
padding: 0 12px 0 2px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.middleBox {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 5px 15px 10px;
|
||
|
||
.box {
|
||
flex: 1;
|
||
// display: inline-flex;
|
||
// align-items: center;
|
||
// height: 65px;
|
||
padding: 4px 0 6px;
|
||
|
||
&:first-child {
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.txt {
|
||
color: rgba(55, 45, 102, 0.6);
|
||
font-size: 13px;
|
||
text-align: center;
|
||
}
|
||
|
||
.num {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box {
|
||
box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
|
||
border-radius: 8px;
|
||
}
|
||
</style> |