cxc-szcx-uniapp/pages/views/zhongheguanli/zhiban/index.vue

<template>
	<view :class="['f-col','aic',{'gray':store.isgray==1}]">
		<picker fields="month" mode="date" @change="bindPickerChange" :value="index">
			<view class="date">{{index}} 点击选择月份</view>
		</picker>
		<view class="info">
			<view class="info_title f-row aic">
				<view class="">
					日期
				</view>
				<view class="">
					带班领导
				</view>
				
				<view class="">
					值班领导
				</view>
				<view class="">
					值班干部
				</view>
			</view>
			<view class="data_box">
				<view class="data f-row aic" v-for="item,i in zhibanArr">
					<view class="">
						{{item.date}}
					</view>
					<view class="">
						{{item.dbld_dictText}}
					</view>
					<view class="">
						{{item.zbld_dictText}}
					</view>
					<view class="">
						{{item.zbgbrealname}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		zhibanQueryApi
	} from '@/api/api.js';
	import {
		useStore
	} from '@/store';
	const store = useStore()
	import dayjs from 'dayjs';
	const zhibanArr = ref([])
	onLoad(() => {
		zhibanQuery()
	})
	const index = ref(dayjs().format("YYYY-MM"))
	const bindPickerChange = (e) => {
		index.value = e.detail.value
		zhibanQuery()
	}
	const zhibanQuery = () => {
		let [year, month] = index.value.split('-')
		zhibanQueryApi({
			year,
			month
		}).then((res) => {
			zhibanArr.value = res.result.records
		}).catch((err) => {
			console.log(err);
		})
	}
</script>

<style lang="scss" scoped>
	.date {
		width: 690rpx;
		padding: 20rpx 30rpx 0 30rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.info {
		background: #F8F8F8;
		border-radius: 8rpx;
		text-align: center;
		width: 690rpx;
		margin-top: 23rpx;

		.info_title {
			font-size: 24rpx;
			color: #333333;
			padding: 24rpx 0;
			border-bottom: 1px solid #EFEFEF;

			view {
				flex: 1;
			}
		}

		.data_box {
			font-size: 24rpx;
			padding-bottom: 24rpx;
			color: #888888;

			.data {
				margin-top: 23rpx;

				view {
					flex: 1;
				}
			}
		}
	}
</style>