pay/ruoyi-uih5/pages/daywork.vue

<template>
	<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="content-section">
			<view class="warp">
				<view class="box">
					<scroll-view :scroll-x="true" class="scrollview-box" >
						<t-table style="width: 880px;">
							<t-tr font-size="12">
								<t-th>姓名</t-th>
								<t-th>日工日期</t-th>
								<t-th>开始时间</t-th>
								<t-th>结束时间</t-th>
								<t-th>小时数</t-th>
								<t-th>业务员</t-th>
								<t-th>是否帮工</t-th>
							</t-tr>
							<t-tr font-size="12" v-for="(item,index) in dwhoursList" :key="index">
								<t-td>{{item.empName}}</t-td>
								<t-td>{{item.date}}</t-td>
								<t-td class="satar">
									<view v-for="(starthours,index) in item.dwHoursContrasts">
										<view>{{starthours.startTime}}</view>
									</view>
								</t-td>
								<t-td class="satar">
									<view v-for="(endhours,index) in item.dwHoursContrasts">
										<view>{{endhours.endTime}}</view>
									</view>
								</t-td>
								<t-td class="satar">
									<view v-for="(hournum,index) in item.dwHoursContrasts">
										<view>{{hournum.hours}}</view>
									</view>
								</t-td>
								<t-td class="satar">
									<view v-for="(salesman,index) in item.dwHoursContrasts">
										<view v-if="salesman.salesman !== null">{{salesman.salesman}}</view>
									</view>
								</t-td>
								<t-td class="satar">
									<view v-for="(helpers,index) in item.dwHoursContrasts">
										<view v-if="0 === helpers.isHelper">否</view>
										<view v-if="1 === helpers.isHelper">是</view>
									</view>
								</t-td>
							</t-tr>
						</t-table>
					</scroll-view>
				</view>
				<!-- 分页 -->
				<page-pagination v-show="total > 0" :total="total"
					:showAround="true" :btnText="true" :forceEllipses="true" @change="change">
				</page-pagination>
			</view>
		</view>
	</view>
</template>

<script>
	import { getUserProfile } from "@/api/system/user"
	import { listDwhours } 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';
	import pagePagination from '@/components/uni-pagination/uni-pagination.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,
			pagePagination
		},
		data() {
			return {
				user: {},
				date: getDate({
					format: true
				}),
				totalList: [],
				dwhoursList: [],
				index: 10,
				totalContent: 0,
				total: 0, //总页数
				queryParams: {
					empName: '',
					dwYearMonth: getDate({
						format: true
					}),
					pageSize: 10, //每页条数
					pageNum: 1 //默认当前页
				},
			}
		},
		onLoad: function() {
			this.getUser();
		},
		methods: {
			//监听页数变化
			change(pageNum) {
				this.queryParams.pageNum = pageNum.current;
				this.getDwhourslist();
			},
			// 查询用户
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
					this.queryParams.empName = this.user.nickName
					this.getDwhourslist();
				})
			},
			// 日期选择
			bindDateChange: function(e) {
				this.date = e.detail.value;
				this.user = {}
				this.queryParams.empName = ''
				this.queryParams.dwYearMonth = this.date
				this.dwhoursList = []
				this.getUser();
			},
			// 查询日工工时
			getDwhourslist() {
				listDwhours(this.queryParams).then(response => {
					this.dwhoursList = response.rows
					this.total = response.total;
				})
			}
		}
	}
</script>

<style 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;
	}
	
	.wagt {
		  width: 90%;
		  border-left: 3px solid #5959C1;
	}
	
	.strip {
		  margin: 5px;
		  font-weight: bold;
		  font-size: 30rpx;
	}
	
	.content-section {
		  width: 100%;
		  margin-top: 10px;
	}
	
	.satar {
		display: block;
	}
	
	.scrollview-box{
	  white-space: nowrap; // 滚动必须加的属性
	  width: 100%;
	  padding: 20rpx 20rpx 20rpx 20rpx;
	 
	}
</style>