<template>
|
<view>
|
<page-nav title="计时工资"></page-nav>
|
<view class="mainContent" :style="{maxHeight:'1600rpx',overflow: 'scroll'}">
|
<view>
|
<u-gap height="10" bgColor="#eff0f1"></u-gap>
|
<view class="head">
|
<view class="head_block" style="height: 120rpx; display: flex;justify-content: space-around;">
|
<u-button :plain='today' @click="dateChange('today')" type="primary" shape="circle" text="今日">
|
</u-button>
|
<u-button :plain='month' @click="dateChange('month')" type="primary" shape="circle" text="本月">
|
</u-button>
|
<u-button :plain='custom' @click="dateChange('custom')" type="primary" shape="circle"
|
text="自定义"></u-button>
|
</view>
|
</view>
|
<u-gap height="10" bgColor="#eff0f1"></u-gap>
|
<view class="head">
|
<view class="head_block flex_column" :style="{minHeight:!custom?'310rpx':'230rpx'}">
|
<view v-if="!custom" class="flex_column"
|
style="display: flex;justify-content: space-around;width: 100%;">
|
<view class="" style="display: flex;justify-content: center;width: 100%;">
|
<view class="titleFont">开始日期</view>
|
<view class="titleFont">~</view>
|
<view class="titleFont">结束日期</view>
|
</view>
|
<!-- <view class='inputClass' style="margin:10rpx auto 0;">
|
<u--input placeholder="请选择" border="surround" v-model="startDate"></u--input>
|
</view> -->
|
<!-- icon='calendar' -->
|
<u-button type="info" iconColor="#0659FF" size="" @click="calendarClick"
|
:text="calendarRange">
|
</u-button>
|
|
</view>
|
<view style="display: flex;justify-content: space-around;width: 100%;">
|
<view class="head_block_item flex_column">
|
<view class="titleFont">上班(小时)</view>
|
<view class="number">{{ parseFloat(form.workcount)}}</view>
|
</view>
|
<view class="head_block_item flex_column">
|
<view class="titleFont">工价(元/小时)</view>
|
<view class="number">{{ parseFloat(form.workprice)}}</view>
|
</view>
|
<view class="head_block_item flex_column">
|
<view class="titleFont">加班(小时)</view>
|
<view class="number">{{parseFloat(form.overcount)}}</view>
|
</view>
|
<view class="head_block_item flex_column">
|
<view class="titleFont">工价(小时)</view>
|
<view class="number">{{parseFloat(form.overprice)}}</view>
|
</view>
|
</view>
|
|
<view style="display: flex;justify-content: space-around;width: 100%;">
|
<view class="head_block_item flex_column">
|
<view class="titleFont">扣除(小时)</view>
|
<view class="number">{{ parseFloat(form.deductcount)}}</view>
|
</view>
|
<view class="head_block_item flex_column">
|
<view class="titleFont">扣除(元)</view>
|
<view class="number">{{ parseFloat(form.deductmoney)}}</view>
|
</view>
|
<view class="head_block_item flex_column">
|
<view class="titleFont">计时(元)</view>
|
<view class="number">{{parseFloat(form.timimoney)}}</view>
|
</view>
|
<view class="head_block_item flex_column">
|
<view class="titleFont">结算(元)</view>
|
<view class="number">{{parseFloat(form.total)}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<u-gap height="10" bgColor="#eff0f1"></u-gap>
|
<view :style="{maxHeight:!custom?'830rpx':'960rpx',overflow: 'scroll'}">
|
<view v-for="(item,index) in detailOrderArray" :key="item.checkindate">
|
<view class="head">
|
<view
|
style="min-height: 100rpx; display: flex;justify-content: space-between; margin: 20rpx;">
|
<view class="flex_column" style="width: 50%;">
|
<view class="lineH60">
|
<view class="titleFont">
|
打卡日期：
|
</view>
|
<view class="contentFont">
|
{{item.checkindate.substring(0,11)}}
|
</view>
|
</view>
|
<view class="lineH60">
|
<view class="titleFont">
|
上班(小时)：
|
</view>
|
<view class="contentFont">
|
{{ parseFloat(item.workcount)}}
|
</view>
|
</view>
|
<view class="lineH60">
|
<view class="titleFont">
|
加班(小时)：
|
</view>
|
<view class="contentFont">
|
{{ parseFloat(item.overcount)}}
|
</view>
|
</view>
|
<view class="lineH60">
|
<view class="titleFont">
|
扣除(小时)：
|
</view>
|
<view class="contentFont">
|
{{parseFloat(item.deductcount)}}
|
</view>
|
</view>
|
<view class="lineH60">
|
<view class="titleFont">
|
计时(小时)：
|
</view>
|
<view class="contentFont">
|
{{parseFloat(item.timimoney)}}
|
</view>
|
</view>
|
</view>
|
<view class="flex_column" style="width: 50%;">
|
<view class="lineH60">
|
<view class="titleFont" style="color: transparent;">
|
1
|
</view>
|
<view class="contentFont" style="color: transparent;">
|
1
|
</view>
|
</view>
|
<view class="lineH60">
|
<view class="titleFont">
|
工价(元/小时)：
|
</view>
|
<view class="contentFont">
|
{{ parseFloat(item.workprice)}}
|
</view>
|
</view>
|
<view class="lineH60">
|
<view class="titleFont">
|
工价(小时)：
|
</view>
|
<view class="contentFont">
|
{{ parseFloat(item.overprice)}}
|
</view>
|
</view>
|
<view class="lineH60">
|
<view class="titleFont">
|
扣除(小时)：
|
</view>
|
<view class="contentFont">
|
{{parseFloat(item.deductcount)}}
|
</view>
|
</view>
|
|
<view class="lineH60">
|
<view class="titleFont">
|
结算(元)：
|
</view>
|
<view class="contentFont">
|
{{ parseFloat((parseFloat(item.timimoney) - parseFloat(item.deductmoney)).toFixed(2))}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<u-gap height="10" v-if="index!==detailOrderArray.length" bgColor="#eff0f1"></u-gap>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
|
|
<uni-calendar ref="calendar" :range='true' :insert="false" @confirm="calendarConfirm" />
|
|
</view>
|
</template>
|
|
|
<script>
|
import {
|
AppDailyWageReportSearch
|
} from '../../config/api.js';
|
|
export default {
|
onLoad(option) {},
|
|
onPullDownRefresh() {
|
setTimeout(() => {
|
this.init(() => {
|
uni.stopPullDownRefresh();
|
})
|
}, 1000);
|
},
|
|
data() {
|
return {
|
topRightMessageCount: '',
|
|
today: true,
|
month: false,
|
custom: true,
|
|
username: uni.getStorageSync('username'),
|
usercode: uni.getStorageSync('usercode'),
|
group_name: uni.getStorageSync('group_name'),
|
|
form: {
|
workcount: 0,
|
workprice: 0,
|
overcount: 0,
|
overprice: 0,
|
deductcount: 0,
|
deductmoney: 0,
|
timimoney: 0,
|
total: 0
|
},
|
|
calendarRange: new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(
|
2, '0') + '-01' + '~' + new Date().toISOString().slice(0, 10),
|
|
detailOrderArray: [],
|
|
|
|
|
|
key: new Date().getTime()
|
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
this.init()
|
|
// uni.getSystemInfo({
|
// success: (res) => {
|
// console.log(res);
|
// }
|
// })
|
this.getData()
|
},
|
methods: {
|
init() {
|
uni.stopPullDownRefresh();
|
},
|
// 获取安灯消息列表长度
|
getTopRightMessageCountIsChange(val) {
|
this.topRightMessageCount = val
|
},
|
switchChange() {
|
this.getData()
|
},
|
// 请求数据
|
async getData() {
|
const data = {
|
creatdate: this.calendarRange
|
}
|
const res = await AppDailyWageReportSearch(data)
|
if (res.code === '200') {
|
this.detailOrderArray = res.data
|
for (const key in this.form) {
|
this.form[key] = res.data.map(item => item[key]).reduce((acc, current) => acc + current,
|
0).toFixed(2)
|
}
|
this.form.total = parseFloat((parseFloat(this.form.timimoney) - parseFloat(this.form.deductmoney))
|
.toFixed(
|
2))
|
this.key = new Date().getTime()
|
}
|
},
|
// 按钮切换
|
dateChange(val) {
|
if (val === 'today') {
|
this.today = false
|
this.month = true
|
this.custom = true
|
this.calendarRange = new Date().toISOString().slice(0, 10) + '~' + new Date().toISOString().slice(0,
|
10)
|
} else if (val === 'month') {
|
this.today = true
|
this.month = false
|
this.custom = true
|
|
this.calendarRange = new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(
|
2, '0') + '-01' + '~' + new Date().toISOString().slice(0, 10)
|
|
} else if (val === 'custom') {
|
this.today = true
|
this.month = true
|
this.custom = false
|
this.calendarRange = new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(
|
2, '0') + '-01' + '~' + new Date().toISOString().slice(0, 10)
|
}
|
this.getData()
|
},
|
calendarConfirm(val) {
|
if (val.range.before < val.range.after) {
|
this.calendarRange = val.range.before + '~' + val.range.after
|
} else {
|
this.calendarRange = val.range.after + '~' + val.range.before
|
}
|
|
if (val.range.before === '') {
|
this.calendarRange = new Date().toISOString().slice(0, 10) + '~' + val.range.after
|
}
|
if (val.range.after === '') {
|
this.calendarRange = val.range.before + '~' + new Date().toISOString().slice(0, 10)
|
}
|
if (val.range.before === '' && val.range.after === '') {
|
this.calendarRange = new Date().toISOString().slice(0, 10) + '~' + new Date().toISOString().slice(0,
|
10)
|
}
|
this.getData()
|
},
|
calendarClick() {
|
this.$refs.calendar.open();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import url('@/style/global.css');
|
|
::v-deep .uicon-arrow-left>span {
|
display: block;
|
}
|
|
.u-button--circle {
|
margin: 0;
|
width: 180rpx;
|
border-radius: 20rpx;
|
}
|
|
.head_block_item {
|
text-align: center;
|
|
.number {
|
font-weight: bolder;
|
color: red;
|
}
|
}
|
|
.u-button--info {
|
width: 50%;
|
height: 40rpx;
|
border: 1px solid #0659FF;
|
border-radius: 10rpx;
|
}
|
|
::v-deep .uicon-calendar {
|
font-size: 20rpx !important;
|
}
|
|
.lineH60 {
|
line-height: 60rpx;
|
height: 56rpx;
|
display: flex;
|
}
|
</style>
|
