169 lines
3.6 KiB
Vue
169 lines
3.6 KiB
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> |