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

<template>
	<view :class="[{'gray':store.isgray==1}]">
		<view style="margin-top: 10px;margin-bottom: 10px;">
			<picker fields="month" mode="date" @change="bindPickerChange" :value="index">
				<view class="date">{{index}} 点击选择月份</view>
			</picker>
		</view>
		<uni-row>
			<uni-col :span="7">
				<view class="titleStyle">
					日期
				</view>
			</uni-col>
			<uni-col :span="4">
				<view class="titleStyle">
					带班领导
				</view>
			</uni-col>
			<uni-col :span="4">
				<view class="titleStyle">
					值班领导
				</view>
			</uni-col>
			<uni-col :span="9">
				<view class="titleStyle">
					值班干部
				</view>
			</uni-col>
		</uni-row>
		<uni-row>
			<view v-for="(item,index) in zhibanArr">
				<uni-col :span="7">
					<view class="dataStyle">
						{{item.date}}
					</view>
				</uni-col>
				<uni-col :span="4">
					<view class="dataStyle">
						{{item.dbld_dictText}}
					</view>
				</uni-col><uni-col :span="4">
					<view class="dataStyle">
						{{item.zbld_dictText}}
					</view>
				</uni-col><uni-col :span="9">
					<view class="dataStyle">
						{{item.zbgbrealname}}
					</view>
				</uni-col>
			</view>
		</uni-row>
	</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';


	let column = ref([{
			name: 'date',
			label: '日期',
			width: 70,
			align: 'center'
		},

		{
			name: 'dbld_dictText',
			label: '带班领导',
			align: 'center',
			width: 60
		},
		{
			name: 'zbld_dictText',
			label: '值班领导',
			align: 'center',
			width: 60
		},
		{
			name: 'zbgbrealname',
			label: '值班干部',
			align: 'center',
			width: 150
		}

	])

	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>
  // 使用变量来定义颜色，便于统一修改
  $primary-color: #0056b3;
  $secondary-color: #f2f9fc;
  $border-color: #d1e7ff;
  $text-color: #333;

  .date {
    width: 100%; // 让宽度更具响应性
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    color: $text-color;
    text-align: center; // 文字居中
    background: $secondary-color; // 使用变量代替直接颜色值
    border-bottom: 1px solid $border-color; // 调整边框颜色
  }

  .titleStyle {
    font-size: 14px; // 增加字体大小以提高可读性
    color: $primary-color; // 更清晰的颜色
    line-height: 2;
    height: auto; // 根据内容自动调整高度
    background: $secondary-color;
    text-align: center; // 文字居中
    vertical-align: middle;
    border-left: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
  }

  /* 内容样式 */
  .dataStyle {
    font-size: 14px;
    color: $text-color;
    line-height: 1.5; // 改进行高以提升阅读体验
    height: auto; // 动态高度
    font-weight: normal; // 减少字体重量
    text-align: center; // 文字居中
    vertical-align: middle;
    border-bottom: 1px solid $border-color;
    border-left: 1px solid $border-color;
    padding: 10rpx; // 添加内边距

    // 当内容超出容器大小时，显示省略号
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>