495 lines
12 KiB
Vue
495 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view :style="{marginTop: titleTop + 'px', backgroundColor:'#ffffff', width: '100%', position: 'relative', height: 'calc(100% - ' + titleTop+'px)'}"
|
|||
|
|
class="xinchou-container">
|
|||
|
|
<view class="title">薪酬明细</view>
|
|||
|
|
<view class="topView">
|
|||
|
|
<view class="headImg" @click="my()"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<scroll-view class="fund-record"
|
|||
|
|
:scroll-top="scrollTop"
|
|||
|
|
scroll-y="true"
|
|||
|
|
:refresher-enabled="isOpenRefresh"
|
|||
|
|
:refresher-triggered="triggered"
|
|||
|
|
@refresherrefresh="refresh"
|
|||
|
|
@scrolltoupper="upper"
|
|||
|
|
@scroll="scroll"
|
|||
|
|
@scrolltolower="loadMore"
|
|||
|
|
@refresherpulling="onPulling">
|
|||
|
|
|
|||
|
|
<view class="fund-item">
|
|||
|
|
<view class="fund-item-title">
|
|||
|
|
<view>我的薪酬</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="fund-item-tbl">
|
|||
|
|
<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
|
|||
|
|
<uni-tr>
|
|||
|
|
<uni-th width="100" align="center">任务名称</uni-th>
|
|||
|
|
<uni-th width="100" align="center">任务日期</uni-th>
|
|||
|
|
<uni-th width="100" align="center">日结单价</uni-th>
|
|||
|
|
<uni-th width="100" align="center">发薪状态</uni-th>
|
|||
|
|
<!-- <uni-th width="100" align="center">实发金额</uni-th>-->
|
|||
|
|
<uni-th width="100" align="center">应发金额</uni-th>
|
|||
|
|
<uni-th width="130" align="center">二次核验备注</uni-th>
|
|||
|
|
</uni-tr>
|
|||
|
|
<uni-tr v-for="(task, i) in taskList" :key="i">
|
|||
|
|
<uni-td align="center">{{ task.taskName }}</uni-td>
|
|||
|
|
<uni-td align="center">{{ task.taskDate }}</uni-td>
|
|||
|
|
<uni-td align="center">{{ task.dayPrice }}</uni-td>
|
|||
|
|
<uni-td align="center"><view :class="'status' + getPayStatus(task.selfSign).status">{{getPayStatus(task.selfSign).text }}</view></uni-td>
|
|||
|
|
<uni-td align="center">{{ task.selfSign.stEmployeeFundRecord == null ? 0 : task.selfSign.stEmployeeFundRecord.realPrice }}</uni-td>
|
|||
|
|
<!-- <uni-td align="center">{{ task.dayPrice }}</uni-td>-->
|
|||
|
|
<uni-td align="center">{{ task.selfSign.remark == null ? "无" : task.selfSign.remark}}</uni-td>
|
|||
|
|
</uni-tr>
|
|||
|
|
</uni-table>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view v-if="showLoading" class="load-more">加载中...</view>
|
|||
|
|
<view v-if="showNoMore" class="no-more">没有更多数据了</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getTaskList } from "@/api/employee/task";
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
titleTop: {type: Number},
|
|||
|
|
nowTab1: {type: Number},
|
|||
|
|
statusBarHeight: {type: Number}
|
|||
|
|
},
|
|||
|
|
nowTab1(newValue) {
|
|||
|
|
// 处理逻辑
|
|||
|
|
this.nowTab = newValue
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// titleTop: 0,
|
|||
|
|
// statusBarHeight: 0,
|
|||
|
|
fundRecord: [],
|
|||
|
|
queryParams: {
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
dateStatus: 0,
|
|||
|
|
taskName: null,
|
|||
|
|
taskDate: null,
|
|||
|
|
xinchou: true,
|
|||
|
|
},
|
|||
|
|
taskList: [],
|
|||
|
|
nowTab: this.nowTab1,
|
|||
|
|
realName: "",
|
|||
|
|
// 是否显示加载更多的loading
|
|||
|
|
showLoading: false,
|
|||
|
|
// 是否显示无更多数据提示
|
|||
|
|
showNoMore: false,
|
|||
|
|
triggered: false,
|
|||
|
|
isOpenRefresh: true,
|
|||
|
|
containerScrollTop: 0,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
created: function() {
|
|||
|
|
this.getList();
|
|||
|
|
this.realName = this.$store.state.user.nickName
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
onPageScroll(e){
|
|||
|
|
this.containerScrollTop = e.scrollTop
|
|||
|
|
if (this.containerScrollTop > 0){
|
|||
|
|
this.isOpenRefresh = false
|
|||
|
|
}else{
|
|||
|
|
this.isOpenRefresh = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onReachBottom(e){
|
|||
|
|
if (this.showLoading || this.showNoMore) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 显示加载更多的loading
|
|||
|
|
this.showLoading = true;
|
|||
|
|
// 请求数据
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
// 刷新函数
|
|||
|
|
refresh() {
|
|||
|
|
// 请求数据
|
|||
|
|
this.triggered = true;
|
|||
|
|
this.queryParams.pageNum = 1;
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
upper(){
|
|||
|
|
// console.log("upper")
|
|||
|
|
},
|
|||
|
|
scroll(e){
|
|||
|
|
// console.log("scroll", e.detail)
|
|||
|
|
},
|
|||
|
|
onPulling(e) {
|
|||
|
|
// console.log("onpulling", e.detail);
|
|||
|
|
if (e.detail.dy < 8) return // 防止上滑页面也触发下拉
|
|||
|
|
this.triggered = true;
|
|||
|
|
},
|
|||
|
|
// 加载更多函数
|
|||
|
|
loadMore() {
|
|||
|
|
// console.log("loadMore")
|
|||
|
|
// 判断是否正在加载更多或已经没有更多数据
|
|||
|
|
if (this.showLoading || this.showNoMore) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 显示加载更多的loading
|
|||
|
|
this.showLoading = true;
|
|||
|
|
// 请求数据
|
|||
|
|
this.getList();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
getList() {
|
|||
|
|
if (this.showNoMore && this.queryParams.pageNum > 1){
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
var that = this;
|
|||
|
|
this.queryParams.self = true;
|
|||
|
|
getTaskList(this.queryParams).then(response => {
|
|||
|
|
if (that.queryParams.pageNum > 1){
|
|||
|
|
that.taskList = that.taskList.concat(response.rows);
|
|||
|
|
}else{
|
|||
|
|
that.taskList = response.rows;
|
|||
|
|
}
|
|||
|
|
that.queryParams.pageNum++;
|
|||
|
|
if (response.rows.length < this.queryParams.pageSize){
|
|||
|
|
that.showNoMore = true;
|
|||
|
|
}else{
|
|||
|
|
that.showNoMore = false;
|
|||
|
|
}
|
|||
|
|
that.showLoading = false;
|
|||
|
|
that.triggered = false;
|
|||
|
|
|
|||
|
|
that.total = response.total;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
filterOpen(){
|
|||
|
|
this.$refs.popup.open('center')
|
|||
|
|
},
|
|||
|
|
search(){
|
|||
|
|
this.getList();
|
|||
|
|
this.$refs.popup.close();
|
|||
|
|
},
|
|||
|
|
reset(){
|
|||
|
|
this.queryParams.taskName = null;
|
|||
|
|
this.queryParams.taskDate = null;
|
|||
|
|
this.getList();
|
|||
|
|
this.$refs.popup.close();
|
|||
|
|
},
|
|||
|
|
timeChange(e) {
|
|||
|
|
this.queryParams.taskDate = e;
|
|||
|
|
},
|
|||
|
|
tabChange(tab){
|
|||
|
|
this.nowTab = tab;
|
|||
|
|
},
|
|||
|
|
getPayStatus(sign){
|
|||
|
|
if (sign.stEmployeeFundRecord == null || sign.stEmployeeFundRecord.payStatus == 0){
|
|||
|
|
return {"text": "未发放", "status": 0};
|
|||
|
|
}
|
|||
|
|
if (sign.stEmployeeFundRecord.payStatus == 1){
|
|||
|
|
return {"text": "已发放", "status": 1};
|
|||
|
|
}
|
|||
|
|
if (sign.stEmployeeFundRecord.payStatus == 2){
|
|||
|
|
return {"text": "发放失败", "status": 2};
|
|||
|
|
}
|
|||
|
|
return {"text": "未发放", "status": 0};
|
|||
|
|
},
|
|||
|
|
my(){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "../employee/my"
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
html, body {
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
page{
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
.load-more, .no-more {
|
|||
|
|
display: grid;
|
|||
|
|
place-content: center;
|
|||
|
|
padding: 10rpx;
|
|||
|
|
color: #999;
|
|||
|
|
height: 80rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.table-thead {
|
|||
|
|
/*background-color: #FFFAF2 !important;*/
|
|||
|
|
position: sticky;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 20;
|
|||
|
|
}
|
|||
|
|
.uni-table-th{
|
|||
|
|
background-color: #f3f3f3 ;
|
|||
|
|
}
|
|||
|
|
.uni-table-td{
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
/deep/ .uni-table-tr {
|
|||
|
|
overflow: visible;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//固定表头第一列
|
|||
|
|
/deep/ .uni-table-tr .uni-table-th:first-child, {
|
|||
|
|
position: sticky;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
/*background-color: #FFFAF2;*/
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
//固定表头第2列（需计算第一列宽度，我这里是200rpx）
|
|||
|
|
/*/deep/ .uni-table-tr .uni-table-th:nth-child(2), {*/
|
|||
|
|
/* position: sticky;*/
|
|||
|
|
/* left: 200rpx;*/
|
|||
|
|
/* top: 0;*/
|
|||
|
|
/* background-color: #FFFAF2;*/
|
|||
|
|
/* z-index: 10;*/
|
|||
|
|
/*}*/
|
|||
|
|
|
|||
|
|
//冻结thead第一列
|
|||
|
|
/deep/ .uni-table-tr .uni-table-td:first-child {
|
|||
|
|
position: sticky;
|
|||
|
|
left: 0;
|
|||
|
|
top: 0;
|
|||
|
|
background-color: #fff;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
//冻结thead第二列（需计算第一列宽度）
|
|||
|
|
/*/deep/ .uni-table-tr .uni-table-td:nth-child(2) {*/
|
|||
|
|
/* position: sticky;*/
|
|||
|
|
/* left: 200rpx;*/
|
|||
|
|
/* top: 0;*/
|
|||
|
|
/* background-color: #fff;*/
|
|||
|
|
/* z-index: 10;*/
|
|||
|
|
/*}*/
|
|||
|
|
.title {
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
color: #000000;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 90rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 1;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
}
|
|||
|
|
.topView{
|
|||
|
|
display: flex;
|
|||
|
|
width: 120rpx;
|
|||
|
|
padding: 0 10rpx 0 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
|
|||
|
|
.headImg{
|
|||
|
|
width: 70rpx;
|
|||
|
|
height: 70rpx;
|
|||
|
|
background-image: url("http://8.155.21.176:9000/yonggong/images/wode.png");
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.xinchou-container{
|
|||
|
|
background-image:url('http://8.155.21.176:9000/yonggong/images/bg.png');
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
.top-tab{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100rpx;
|
|||
|
|
margin-top: 5rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
.tab{
|
|||
|
|
width: 90%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.item-container{
|
|||
|
|
width: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
.item{
|
|||
|
|
width: 50%;
|
|||
|
|
display: grid;
|
|||
|
|
place-items: center;
|
|||
|
|
|
|||
|
|
.tab-title-focus{
|
|||
|
|
/*width: 100%;*/
|
|||
|
|
height: 80rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #519fef;
|
|||
|
|
}
|
|||
|
|
.bottom-line-focus{
|
|||
|
|
height: 10rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
background-color: #519fef;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-title{
|
|||
|
|
/*width: 100%;*/
|
|||
|
|
height: 80rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.bottom-line{
|
|||
|
|
height: 10rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-btn{
|
|||
|
|
width: 10%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/*<view class="fund-record">*/
|
|||
|
|
/*<view class="fund-item">*/
|
|||
|
|
/*<view class="fund-item-title">*/
|
|||
|
|
/*<view>任务名称 {{1}} </view>*/
|
|||
|
|
/*<view>日结单价 {{1}}</view>*/
|
|||
|
|
/*</view>*/
|
|||
|
|
|
|||
|
|
.fund-record{
|
|||
|
|
margin: 0rpx 0rpx 0rpx 10rpx;
|
|||
|
|
height: calc(100% - 70rpx);
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
.fund-item{
|
|||
|
|
.fund-item-title{
|
|||
|
|
display: flex;
|
|||
|
|
color: #454545;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
view{
|
|||
|
|
margin-right: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-popup__wrapper{
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.dialog {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 50rpx;
|
|||
|
|
display: grid;
|
|||
|
|
/*place-items: flex-start;*/
|
|||
|
|
|
|||
|
|
.filter-line1{
|
|||
|
|
width: 80%;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.label{
|
|||
|
|
width: 30%;
|
|||
|
|
}
|
|||
|
|
input{
|
|||
|
|
width: 70%;
|
|||
|
|
border: 1px solid #e5e5e5;
|
|||
|
|
height: 55rpx !important;
|
|||
|
|
line-height: 55rpx !important;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.uni-date-x{
|
|||
|
|
border: 1px solid #e5e5e5;
|
|||
|
|
}
|
|||
|
|
.uni-date__x-input{
|
|||
|
|
height: 55rpx !important;
|
|||
|
|
line-height: 55rpx !important;
|
|||
|
|
}
|
|||
|
|
.uni-date-x--border{
|
|||
|
|
border: none !important;
|
|||
|
|
}
|
|||
|
|
.example-body{
|
|||
|
|
width: 70%;
|
|||
|
|
height: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.filter-line2{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-top: 1rpx solid #cecece;
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
.reset-btn{
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
width: 180rpx;
|
|||
|
|
height: 65rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.submit-btn{
|
|||
|
|
background-color: #11a9ee;
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-weight: 650;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
width: 250rpx;
|
|||
|
|
height: 65rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-left: auto; /* 推动元素到右边 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.status0{
|
|||
|
|
color: #3a8ee6;
|
|||
|
|
}
|
|||
|
|
.status1{
|
|||
|
|
color: #00ce07;
|
|||
|
|
}
|
|||
|
|
.status2{
|
|||
|
|
color: #ea0c0c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|