jkzdzx_wjwapp/pages/zhibananpai/zhibananpai.vue

<template>
	<view style="width: 100vw;height:100vh;">
		<view style="height: calc(100% - 104rpx);">
			<view style="padding: 20rpx;background-color: #fff;">
				<view style="display: flex;" class="">
					<!-- 	<u-search v-model="dateChange" disabled placeholder="请选择月份" :showAction="true" actionText="搜索"
						:animation="false" @custom="confirmSearch"
						@clear="clearSearch"></u-search> -->
					<view shape="round" @click="openDatePicker"
						style="background-color: #f2f2f2;width: 600rpx;height:60rpx;display: flex;border-radius: 2%;"
						class="">
						<u-icon style="margin-left: 10rpx;" size="23" name="search"></u-icon>
						<span style="display: inline-block;margin-top: 12rpx;">{{dateChange}}</span>
					</view>
					<view @click="confirmSearch(dateChange)"
						style="font-size: 30rpx; line-height: 60rpx;margin-left: 30rpx;" class="">
						搜索
					</view>
				</view>

				<uni-table style="margin-top: 15rpx;overflow-x: auto;" ref="table" :loading="loading" border
					emptyText="暂无更多数据">
					<uni-tr>
						<uni-th style="position: sticky;left: 0;background-color: #fff;" width="70"
							align="center">日期</uni-th>
						<uni-th width="50" align="center">星期</uni-th>
						<uni-th width="120" align="center">白天</uni-th>
						<uni-th width="120" align="center">夜晚</uni-th>
						<uni-th width="120" align="center">应急值班</uni-th>
						<uni-th width="120" align="center">带班干部</uni-th>
						<uni-th width="120" align="center">值班司机</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td style="position: sticky;left: 0;background-color: #fff;" :style="getRowStyle(item)"
							align="center">{{ item.dateForApp }}</uni-td>
						<uni-td :style="getRowStyle(item)" align="center">
							<view class="weekForApp">{{ item.weekForApp }}</view>
						</uni-td>
						<uni-td :style="getRowStyle(item)" align="center">{{ item.dutyDay }}</uni-td>
						<uni-td :style="getRowStyle(item)" align="center">{{ item.dutyNight }}</uni-td>
						<uni-td :style="getRowStyle(item)" align="center">
							<view class="dutyEmergency">{{ item.dutyEmergency }}</view>
						</uni-td>
						<uni-td :style="getRowStyle(item)" align="center">{{ item.dutyLeader }}</uni-td>
						<uni-td :style="getRowStyle(item)" align="center">{{ item.dutyDriver }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<u-datetime-picker :formatter="formatter" :show="showDatePicker" v-model="selectedDate" mode="year-month"
				@confirm="handleDateConfirm" @cancel="showDatePicker = false"></u-datetime-picker>

		</view>

		<!-- <u-action-sheet :actions="morelist" :closeOnClickOverlay="true" :closeOnClickAction="true" cancelText="取消"  title="申请" :show="show"  @select="selectClick" @close="show = false"></u-action-sheet> -->
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	export default {
		data() {
			return {
				loading: false,
				tableData: [],
				dateChange: '', // 绑定到搜索框的值
				showDatePicker: false, // 控制日期选择器的显示
				selectedDate: Number(new Date()), // 选择的日期
			}
		},
		onLoad() {
			const date = new Date();
			const year = date.getFullYear();
			const month = date.getMonth() + 1; // getMonth() 返回的月份是从0开始的
			const formattedDate = `${year}-${month.toString().padStart(2, '0')}`;
			this.dateChange = formattedDate; // 确认日期后，更新搜索框的显示值
			this.confirmSearch(this.dateChange)
		},
		onNavigationBarButtonTap(e) {},
		onShow() {

		},
		methods: {
			getRowStyle(row) {
				console.log('row', row)
				if (row.selfDuty == 1) { // 根据条件设置背景色
					return {
						backgroundColor: '#fae018'
					};
				} else {
					return {};
				}
			},
			openDatePicker() {
				this.showDatePicker = true; // 点击搜索框时打开日期选择器
			},
			handleDateConfirm(value) {
				console.log('value', value)
				const date = new Date(value.value);
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // getMonth() 返回的月份是从0开始的
				const formattedDate = `${year}-${month.toString().padStart(2, '0')}`;
				this.dateChange = formattedDate; // 确认日期后，更新搜索框的显示值
				this.showDatePicker = false; // 关闭日期选择器
			},
			confirmSearch(value) {
				// 处理搜索逻辑
				console.log('搜索月份:', value);
				uni.$u.http.get('/duty/duty/app/selectList', {
					params: {
						month: value + '-01'
					}
				}).then((res) => {
					console.log('res', res)
					this.tableData = res.rows
				})
			},
			clearSearch() {
				// 清除搜索框内容
				this.dateChange = '';
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},

		}
	}
</script>

<style lang="scss" scoped>
	.grid-text {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 36rpx;
		color: #606266;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.choose {
		color: #409EFF
	}

	.uni-table thead {
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: #fff;
	}

	.uni-table th:first-child,
	.uni-table td:first-child {
		position: sticky;
		left: 0;
		background-color: #fff;
		z-index: 5;
	}
</style>