ToDo/pages/dayreportform/dayreportform.vue

<template>
	<view style="width: 100%;height: 100%;">
		<view id="header">
			<u-row customStyle="border-bottom:1rpx solid lightgrey;height:80rpx">
				<u-col span="3">
					<picker mode="date" fields="year" @change="(e)=>{year=e.target.value;getdata()}">
						<text>{{year}}年</text>
					</picker>
				</u-col>
				<u-col span="2">
					<picker mode="selector" :range="months" :value="index"
						@change="(e)=>{index= e.target.value ;month=months[e.target.value];getdata()}">
						<text>{{months[index]}}月</text>
					</picker>
				</u-col>
				<u-col span="3" @click="showChooseUser">
					<text>{{user.name}}</text>
				</u-col>
				<u-col span="2">
					<view style="display: flex;">
						<u-tag :text="leaveTime" borderColor = "#DA2424" bgColor="#DA2424"></u-tag>
					</view>
				</u-col>
				<u-col span="2" style="display: flex;">
					<view>
						<u-tag :text="overTime" bgColor="#62D557" borderColor="#62D557"></u-tag>
					</view>
				</u-col>
			</u-row>
		</view>
		<scroll-view :style="{height:s_height+'px'}" scroll-y="true">
			<uni-card v-for="(item,index) in reports">
				<view slot="title">
					<view class="title">
						<text>{{item.reportDate}}</text>
						<u-tag :text="item.sumHours" :bgColor="calcColor(item)" :borderColor="calcColor(item)"></u-tag>
					</view>
				</view>
				<u-row v-for="(child,index1) in item.reportDetails" customStyle="border-bottom:1rpx solid lightgrey;min-height:60rpx">
				<!-- 	<u-col span="3">
						<text>{{child.taskName}}</text>
					</u-col> -->
					<u-col span="10">
						<text>{{child.content}}</text>
					</u-col>
					<u-col span="2">
						<view style="display: flex;justify-content:flex-end">
							<u-tag :text="child.workHours" size="mini" borderColor="lightgrey" bgColor="lightgrey"></u-tag>
						</view>
					</u-col>
				</u-row>
			</uni-card>
		</scroll-view>
		<u-popup :show="isShowUser">
			<scroll-view style="height: 90vh;" scroll-y="true">
				<view class="item" v-for="dept in users">
					<view class="content" @click="chooseUser(dept)">
						<text>{{dept.title}}</text>
					</view>
					<view class="item" v-for="cs in dept.children">
						<view class="content" @click="chooseUser(cs)">
							<text>{{cs.title}}</text>
						</view>
						<view class="item" v-for="user in cs.children">
							<view class="content" @click="chooseUser(user)">
								<text>{{user.title}}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import taskReport from '../../api/taskReport.js'
	import auth from "../../utils/js/auth.js"
	export default {
		data() {
			return {
				s_height: 0,
				year: "",
				month: "",
				index: 0,
				months: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
				user: {
					"id": "",
					"name": ""
				},
				isShowUser: false,
				users: [],
				reports: [],
				overTime: 0,
				leaveTime: 0
			}
		},
		onReady() {
			let that = this
			uni.getSystemInfo({
				success(res) {
					const w_height = res.windowHeight;
					var query = uni.createSelectorQuery();
					query.select('#header').boundingClientRect();
					query.exec(function(res) {
						that.s_height = w_height - res[0].height;
					})
				}
			})
		},
		onLoad() {
			this.user.id = auth.getId()
			this.user.name = auth.getName()

			let date = new Date();
			this.year = date.getFullYear()
			let mon = date.getMonth() + 1
			let day = date.getDate()
			if(day>26){
				mon+=1
			}
			this.month = mon.toString()
			this.index = this.months.indexOf(this.month)

			this.getUser()
			this.getdata()
		},
		methods: {
			getUser() {
				taskReport.getEmpTree().then(res => {
					if (res.data.success) {
						this.users = res.data.data
					}
				})
			},
			getdata() {
				let param = {
					"year": this.year,
					"month": this.month,
					"userId": this.user.id
				}
				taskReport.getPersonReportDetail(param).then(res => {
					if (res.data.success) {
						this.reports = res.data.data
					}
				})
				taskReport.getLeaveTime(param).then(res => {
					if (res.data.success) {
						this.leaveTime = res.data.data
					}
				})
				taskReport.getOverTime(param).then(res => {
					if (res.data.success) {
						this.overTime = res.data.data
					}
				})
			},
			showChooseUser() {
				this.isShowUser = true
			},
			chooseUser(e) {
				if (e.children.length == 0) {
					this.user.id = e.id
					this.user.name = e.title
					this.isShowUser = false
					this.getdata()
				}
			},
			calcColor(item) {
				if (item.isWork == 0) {
					return item.sumHours >= 8 ? '#62D557' : '#DA2424'
				} else if (item.isWork == 1) {
					return item.sumHours >= 4 ? '#62D557' : '#DA2424'
				} else if (item.isWork == 2) {
					return '#62D557'
				}
			}

		}
	}
</script>

<style>
	.item {
		margin-top: 12rpx;
		margin-left: 12px;
		width: calc(100%-12px);
	}

	.content {
		height: 60rpx;
		line-height: 60rpx;
	}

	.title {
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content:space-between;
		align-items: center;
	}
</style>