172 lines
5.1 KiB
Vue
172 lines
5.1 KiB
Vue
<template>
|
||
<view class="pad-x120">
|
||
<!-- 头部 -->
|
||
<status-nav :ifReturn="false" :ifHome="true" navBarTitle="工地支出"></status-nav>
|
||
<view class="content" :style="{'padding-top':statusHeight+50+'px'}">
|
||
<!-- 筛选 -->
|
||
<view class="screen-box pay-screen-box">
|
||
<view class="item">
|
||
<picker class="font24" mode="date" :range="date" fields="month" @change="bindDateChange" :start="startDate" :end="endDate">
|
||
<view class="name">
|
||
<text :class="showDate==''?'color-99':''">{{showDate!==''?showDate.split('-')[0]+'年'+showDate.split('-')[1]+'月':'请选择时间'}}</text>
|
||
<image src="/static/icon/icon-arrow-02.png" mode="aspectFit"></image>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="item">
|
||
<picker class="font24" mode="selector" :range="cateList" @change="bindCateChange" :value="cateIndex">
|
||
<view class="name">
|
||
<text class="clips1" :class="cateIndex==0?'color-99':''">{{cateList[cateIndex]}}</text>
|
||
<image src="/static/icon/icon-arrow-02.png" mode="aspectFit"></image>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<!-- 支出信息 -->
|
||
<view class="pay-info font26">
|
||
<view class="item font30">
|
||
<text>工资总金额</text>
|
||
<text>合计：{{payInfo.amount>0?payInfo.amount:0}}元</text>
|
||
</view>
|
||
<view class="item">
|
||
<text>基本工资</text>
|
||
<text>{{payInfo.base_amount>0?payInfo.base_amount:0}}元</text>
|
||
</view>
|
||
<view class="item">
|
||
<text>加班工资</text>
|
||
<text>{{payInfo.overtime_amount>0?payInfo.overtime_amount:0}}元</text>
|
||
</view>
|
||
<view class="item">
|
||
<text>待发工资</text>
|
||
<text>{{payInfo.not_amount>0?payInfo.not_amount:0}}元</text>
|
||
</view>
|
||
<view class="item">
|
||
<text>已发工资</text>
|
||
<text>{{payInfo.done_amount>0?payInfo.done_amount:0}}元</text>
|
||
</view>
|
||
</view>
|
||
<!-- 工资记录 -->
|
||
<view class="sign-record sign-record-other bg-white">
|
||
<view class="item font26" v-for="(item,index) in payList" :key="index">
|
||
<view class="info info-other">
|
||
<text>姓名：{{item.name}}-{{item.date}}</text>
|
||
<text>月份：{{item.date}}</text>
|
||
<text class="color-66" v-if="item.status==2">部分发放：{{item.paid_amount}}元</text>
|
||
<text :class="item.status==0?'color-blue':'color-66'" v-else>{{item.status==0?'待发放':'已发放'}}</text>
|
||
</view>
|
||
<view class="wages-info">
|
||
<view class="text">基本工资：{{item.base_amount}}元</view>
|
||
<view class="text">加班工资：{{item.overtime_amount}}元</view>
|
||
<view class="text">合计：<text class="font32">{{item.amount}}</text>元</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 加载更多 -->
|
||
<view class="more-tips font24">{{payList.length==total?'没有更多数据了':'下滑获取更多'}}</view>
|
||
</view>
|
||
<!-- 尾部 -->
|
||
<tabbar :userType="userType" current="1"></tabbar>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import tabbar from '@/components/tabbar/tabbar';
|
||
function getDate(type) {
|
||
const date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
if (type === 'start') {
|
||
year = year - 2;
|
||
}
|
||
if (type === 'end') {
|
||
year = year + 1;
|
||
}
|
||
month = month > 9 ? month : '0' + month;
|
||
day = day > 9 ? day : '0' + day;
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
export default {
|
||
components:{
|
||
tabbar
|
||
},
|
||
data() {
|
||
return {
|
||
statusHeight:uni.getSystemInfoSync().statusBarHeight, //状态栏高度
|
||
userType:'director', //账户类型 工人：worker 负责人：director 工作台：workbench
|
||
payInfo:{}, //支出总额
|
||
payList:[], //工资列表
|
||
date: getDate({format: true}),
|
||
startDate: getDate('start'),
|
||
endDate: getDate('end'),
|
||
showDate:'', //显示时间
|
||
cateList:['全部','待发放','全部发放','部分发放'], //分类列表
|
||
cateIndex:0, //当前选择
|
||
page:1,
|
||
size:10,
|
||
total:0,
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
if(op.userType){
|
||
this.userType = op.userType;
|
||
}
|
||
// 获取工资列表
|
||
this.getPayList();
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
onReachBottom() {
|
||
if(this.payList.length<this.total){
|
||
this.page++;
|
||
// 获取工资列表
|
||
this.getPayList();
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
this.page = 1;
|
||
// 获取工资列表
|
||
this.getPayList();
|
||
// 关闭下拉刷新
|
||
uni.stopPullDownRefresh();
|
||
},
|
||
methods: {
|
||
// 选择日期
|
||
bindDateChange(e) {
|
||
this.showDate = e.detail.value;
|
||
this.page = 1;
|
||
// 获取工资列表
|
||
this.getPayList();
|
||
},
|
||
|
||
// 选择分类
|
||
bindCateChange(e) {
|
||
this.cateIndex = e.detail.value;
|
||
// 获取工资列表
|
||
this.getPayList();
|
||
},
|
||
|
||
// 获取工资列表
|
||
getPayList(){
|
||
let params = {
|
||
page:this.page,
|
||
size:this.size,
|
||
date:this.showDate,
|
||
status:this.cateIndex-1
|
||
}
|
||
if(this.page==1) this.payList = [];
|
||
this.$requst.post('/api/v1/manager/pay-list',params).then(res=>{
|
||
if(res.code==0){
|
||
console.log(res,'工资列表');
|
||
this.total = res.data.total;
|
||
this.payInfo = res.data.info;
|
||
this.payList = this.payList.concat(res.data.list);
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style> |