parking_operation/pages/dataOverview/statisticalReport/components/checkWorkAttendance.vue

<!-- 考勤统计 -->
<template>
	<view class="container">
		<view class="table">
			<view class="table-date" v-if="currentDate">{{ currentDate.join(' 至 ') }}</view>
			<view class="table-search">
				<view class="table-search-item">
					<u--input class="input" placeholder="请输入工号" v-model="payeeNo"></u--input>
				</view>
				<view class="table-search-item">
					<u--input class="input" placeholder="请输入姓名" v-model="payeeName"></u--input>
				</view>
				<view class="table-search-item">
					<u-button class="btn" text="确认"
						color="linear-gradient(157deg, #FECF4C 4%, #FECF4B 5%, #FCA225 100%)" :loading="loading" @click="confirm"></u-button>
				</view>
			</view>
			<view class="table-box">
				<TableRanking :loading="loading" :padding="'0'" :tableTh="tableTh" :tableData="tableData"
					@pageChange="pageChange" />
			</view>
		</view>
	</view>
</template>

<script>
	import TableRanking from '@/components/tableRanking.vue'
	export default {
		components: {
			TableRanking
		},
		props: {
			tableTh: {
				type: Array,
				default: () => {
					return [{
							field: '工号',
							width: 80,
							key: 'payeeNo'
						},
						{
							field: '姓名',
							width: 90,
							key: 'payeeName'
						},
						{
							field: '实出勤(天)',
							width: 70,
							key: 'realDays'
						},
						{
							field: '缺勤(天)',
							width: 70,
							key: 'missDays'
						},
						{
							field: '缺卡(次)',
							width: 70,
							key: 'missPunchCount'
						},
						{
							field: '早退(次)',
							width: 70,
							key: 'leavePunchCount'
						},
					]
				}
			}
		},
		data() {
			return {
				loading: false,
				tableData: {
					current: 1,
					total: 0,
					list: []
				},
				currentDate: [],
				beginTime: undefined,
				endTime: undefined,
				payeeNo: undefined,
				payeeName: undefined
			}
		},
		methods: {
			getData(data) {
				if (data.length) {
					this.beginTime = data[0]
					this.endTime = data[1]
				} else {
					this.beginTime = undefined
					this.endTime = undefined
				}
				this.currentDate = data
				this.tableData.current = 1
				this.getPunchList()
			},
			getPunchList() {
				this.loading = true
				uni.$u.api.statisticalReportApi.getPunchListApi({
					beginTime: this.beginTime,
					endTime: this.endTime,
					payeeNo: this.payeeNo,
					payeeName: this.payeeName,
					pageNum: this.tableData.current,
					pageSize: 10
				}).then(res => {
					if (res.code === 200) {
						this.tableData.list = res.rows
						this.tableData.total = res.total
					}
					this.loading = false
				})
			},
			pageChange(cur) {
				this.tableData.current = cur
				this.getPunchList()
			},
			confirm() {
				this.tableData.current = 1
				this.getPunchList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './report.scss';
</style>