pay/ruoyi-uih5/pages/baohuo.vue

<template>
	<view>
		<view class="content">
			<picker class="picker" mode="date" :value="date" fields="month" @change="bindDateChange">
				<view class="date-screen">{{ date }}</view>
			</picker>
			<view class="wagt">
				<text class="strip">包活工资</text>
			</view>
			<view class="warp">
				<view class="box">
					<t-table>
						<t-tr font-size="12">
							<t-th>工单ID</t-th>
							<t-th>工资</t-th>
							<t-th>入库日期</t-th>
						</t-tr>
						<t-tr v-for="(bhgz,index) in bhgongziList" :key="index">
							<t-td>{{bhgz.woId}}</t-td>
							<t-td>{{bhgz.amount}}</t-td>
							<t-td>{{bhgz.intime}}</t-td>
						</t-tr>
					</t-table>
				</view>
			</view>
			<view class="wagt">
				<text class="strip">包活时长</text>
			</view>
			<view class="warp">
				<view class="box">
					<t-table>
						<t-tr font-size="12">
							<t-th>工单ID</t-th>
							<t-th>有效时长</t-th>
							<t-th>入库日期</t-th>
							<t-th>工作日期</t-th>
						</t-tr>
						<t-tr v-for="(bhsc,index) in baohuoList" :key="index">
							<t-td>{{bhsc.woId}}</t-td>
							<t-td>{{bhsc.amount}}</t-td>
							<t-td>{{bhsc.intime}}</t-td>
							<t-td>{{bhsc.date}}</t-td>
						</t-tr>
					</t-table>
				</view>
			</view>
			<view class="wagt">
				<text class="strip">包活帮工</text>
			</view>
			<view class="warp">
				<view class="box">
					<t-table>
						<t-tr font-size="12">
							<t-th>工单ID</t-th>
							<t-th>帮工工资</t-th>
							<t-th>入库日期</t-th>
						</t-tr>
						<t-tr v-for="(bhbg,index) in bhhelpList" :key="index">
							<t-td>{{bhbg.woId}}</t-td>
							<t-td>{{bhbg.amount}}</t-td>
							<t-td>{{bhbg.intime}}</t-td>
						</t-tr>
					</t-table>
				</view>
			</view>
			<!-- <view class="title">日工帮工</view> -->
			<view class="wagt">
				<text class="strip">日工帮工</text>
			</view>
			<view class="warp">
				<view class="box">
					<t-table>
						<t-tr font-size="12">
							<t-th>帮工时长</t-th>
							<t-th>开始时间</t-th>
							<t-th>结束时间</t-th>
						</t-tr>
						<t-tr v-for="(rgbg,index) in rghelpList" :key="index">
							<t-td>{{rgbg.hours}}</t-td>
							<t-td>{{rgbg.startTime}}</t-td>
							<t-td>{{rgbg.endTime}}</t-td>
						</t-tr>
					</t-table>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUserProfile } from "@/api/system/user"
	import { getBaohuo, getBanggong } from "@/api/system/salary"
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth();
		let day = date.getDate();
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}`;
	}
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				user: {},
				date: getDate({
					format: true
				}),
				queryParams: {
					empName: '',
					date: getDate({
						format: true
					})
				},
				bhgongziList: [],
				baohuoList: [],
				bhhelpList: []
			}
		},
		onLoad() {
			this.getUser()
		},
		methods: {
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
					this.queryParams.empName = this.user.nickName
					this.queryParams.date = this.date
					this.getBaohuolist();
					this.getBgList();
				})
			},
			// 日期选择
			bindDateChange: function(e) {
				this.date = e.detail.value;
				this.user = {}
				this.queryParams.empName = ''
				this.queryParams.date = this.date
				this.bhgongziList = []
				this.baohuoList = []
				this.bhhelpList = []
				this.rghelpList = []
				this.getUser();
			},
			getBaohuolist() {
				getBaohuo(this.queryParams).then(response => {
					this.bhgongziList = response.bhEmployees;
					this.baohuoList = response.bhtimes;
				})
			},
			getBgList() {
				getBanggong(this.queryParams).then(response => {
					this.bhhelpList = response.bhHelper;
					this.rghelpList = response.rigongHelper;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}
	
	.picker {
		  width: 55px;
		  height: 25px;
		  background-color: #5383FF;
		  border-radius: 5px;
		  text-align: center;
		  margin-top: 5px;
	}
	
	.date-screen {
		  line-height: 25px;
		  font-size: 11px;
		  color: #ffffff;
	}
	
	/* .title {
		background-color: #3366FF;
		width: 90%;
		height: 50rpx;
		color: #ffffff;
		line-height: 50rpx;
		margin-top: 10px;
	} */
	
	.wagt {
		  width: 90%;
		  border-left: 3px solid #5959C1;
		  margin-top: 20px;
	}
	
	.strip {
		  margin: 5px;
		  font-weight: bold;
		  font-size: 25rpx;
	}
	
	.warp {
		margin-top: 10px;
		width: 90%;
	}
	
	.ordert-detail {
		width: 100%;
		margin-top: 20rpx;
	}
	
	.table {
		border:1px solid #dadada;
		border-right: 0;
		border-bottom: 0;
		width: 90%;
		margin-left: 4%;
	}
	
	.tr {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.th,.td {
		padding: 10px;
		border-bottom: 1px solid #dadada;
		border-right: 1px solid #dadada;
		text-align: center;
		width:100%;
		word-break: break-all;
	}
</style>