ToDo/pages/dayreport/dayreport.vue

<template>
	<view style="width: 100%;height: 100%;">
		<view id="header">
			<u-row customStyle="border-bottom:1rpx solid lightgrey">
				<u-col span="6">
					<uni-datetime-picker type="date" :value="selectDate" @change="getData" placeholder="请选择汇报日期"
						:border="false"></uni-datetime-picker>
				</u-col>
				<u-col span="6">
					<view style="display: flex;flex-direction: row-reverse;padding-right: 30rpx;">
						<u-icon name="plus" color="blue" size="26px" @click="add"></u-icon>
					</view>
				</u-col>
			</u-row>
		</view>
		<scroll-view :style="{height:s_height+'px'}">
			<uni-group v-for="group in reports" :title="group.taskName+' ---用时:'+group.sumHours">
				<u-row v-for="(item,index) in group.item" customStyle="border-bottom:1rpx solid lightgrey" gutter="4">
					<u-col span="9">
						<text @click="openDetail(item)">{{item.content}}</text>
					</u-col>
					<u-col span="1">
						<text>{{item.workHours}}</text>
					</u-col>
					<u-col span="1">
						<u-icon name="edit-pen" size="26px" color="blue" @click="edit(item)"></u-icon>
					</u-col>
					<u-col span="1">
						<u-icon name="trash" size="26px" color="red" @click="deleteReport(item)"></u-icon>
					</u-col>
				</u-row>
			</uni-group>
		</scroll-view>
		<u-popup :show="showDetail">
			<view style="width: 100%;height: 100%;">
				<uni-group title="汇报任务">
					<u-row customStyle="border-bottom:1rpx solid lightgrey" @click="showTasks">
						<u-col span="3">
							<text>任务名称:</text>
						</u-col>
						<u-col span="9">
							<text>{{currRow.task||'请选择任务'}}</text>
						</u-col>
					</u-row>
				</uni-group>
				<uni-group title="汇报对象">
					<scroll-view scroll-y="true" style="height: 100px;">
						<u-checkbox-group placement="column" v-model="selectObject" :disabled="!allowEdit">
							<u-grid :border="true">
								<u-grid-item v-for="(item,index) in reportObjects">
									<view class="checkbox">
										<u-checkbox :label="item.value" :name="item.id" size="20"></u-checkbox>
									</view>
								</u-grid-item>
							</u-grid>
						</u-checkbox-group>
					</scroll-view>
				</uni-group>
				<uni-group title="汇报内容">
					<u-textarea v-model="currRow.content" autoheight :disabled="!allowEdit"></u-textarea>
				</uni-group>
				<uni-group title="工作时间">
					<u-row>
						<u-col span="6">
							<picker mode="time" :value="beginTime" @change="selectBeginTime" :disabled="!allowEdit">
								<text>开始时间：{{beginTime}}</text>
							</picker>
						</u-col>
						<u-col span="6">
							<picker mode="time" :value="endTime" @change="selectEndTime" :disabled="!allowEdit">
								<text>终止时间：{{endTime}}</text>
							</picker>
						</u-col>
					</u-row>
					<u-row>
						<text>工作时数:</text>
						<u-input type="number" :disabled="!allowEdit" placeholder="请输入工作时数" v-model="currRow.workHours">
						</u-input>
					</u-row>
				</uni-group>
				<!-- <uni-group title="附加文件">
					<u-text text="上传文件" prefixIcon="attach" @click="fileOpen" margin="0rpx 0rpx 30rpx 0rpx">
					</u-text>
					<scroll-view style="height: 100px;">
						<u-row v-for="item in fileList" customStyle="margin-top:5px">
							<u-col span="11">
								<u-text :text="item.fileOriginName" color="blue" @click="downFile(item)"></u-text>
							</u-col>
							<u-col span="1">
								<u-icon name="trash" color="red" size="26px" @click="deleteFile(item)"></u-icon>
							</u-col>
						</u-row>
					</scroll-view>
				</uni-group> -->
				<u-row>
					<u-col span="6">
						<u-button @click="close" text="关闭" color="red"></u-button>
					</u-col>
					<u-col span="6">
						<u-button @click="btnOk" text="确定" type="primary" :disabled="!allowEdit"></u-button>
					</u-col>
				</u-row>
			</view>
		</u-popup>
		<u-popup :show="showTask">
			<scroll-view style="height: 90vh;">
				<uni-group v-for="item in tasks" :title="item.title">
					<view v-for="task in item.children" style="width: 100%;"> 
						<u-row  customStyle="height:80rpx;border-bottom:1rpx solid lightgrey"
							@click="selectTask(task)">
							<text>{{task.title}}</text>
						</u-row>
						<u-row v-for="child in task.children" customStyle="height:80rpx;border-bottom:1rpx solid lightgrey" @click="selectTask(child)">
							<u-col span="1"></u-col>
							<u-col span="11">{{child.title}}</u-col>
						</u-row>
					</view>
					
				</uni-group>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import taskReport from '../../api/taskReport.js'
	import auth from "../../utils/js/auth.js"
	export default {
		data() {
			return {
				selectDate: "", //选定的汇报日期
				s_height: 0, //汇报列表高度，scrollview使用
				reports: [], //任务汇报列表，按照任务分组
				showDetail: false, //是否显示明细
				allowEdit: false, //是否允许编辑，查看明细时不允许编辑
				isAdd: false, //是否是新增汇报
				currRow: {}, //当前处理的汇报行
				beginTime: "", //汇报起始时间
				endTime: "", //汇报终止时间
				reportObjects: [], //汇报服务对象
				selectObject: [], //选定的汇报服务对象
				showTask: false, //是否打开选择任务界面
				tasks: [], //任务
				isReload: false //是否重新加载
			}
		},
		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() {
			var currDate = new Date();
			this.selectDate = currDate.getFullYear() + "-" + (currDate.getMonth() + 1) + "-" + currDate.getDate()
			this.getData(this.selectDate)
			this.getReportObject()
		},
		methods: {
			getData(e) {
				if(this.selectDate!=e){
					this.selectDate=e
				}
				taskReport.getDayReports(e, auth.getId()).then(res => {
					if (res.data.success) {
						this.reports = res.data.data
						this.getReportTasks(e)
					}
				})
			},
			getReportTasks(date) {
				taskReport.getReportTasks(date).then(res => {
					if (res.data.success) {
						this.tasks = res.data.data
					}
				})
			},
			getReportObject() {
				taskReport.getReportObject().then((res) => {
					if (res.data.success) {
						this.reportObjects = res.data.data
					}
				})
			},
			add() {
				this.showDetail = true
				this.allowEdit = true
				this.isAdd = true
				this.currRow = {}
			},
			edit(e) {
				this.currRow = e
				this.beginTime = e.beginTime
				this.endTime = e.endTime
				this.showDetail = true
				this.allowEdit = true
				this.isAdd = false
				if (e.reportObjects) {
					e.reportObjects.forEach((item) => {
						this.selectObject.push(item.id)
					})
				}
			},
			deleteReport(e) {
				let _this = this
				uni.showModal({
					title: "是否确认删除？",
					success(option) {
						if (option.confirm) {
							taskReport.personDayReportDelete([{
								"id": e.id
							}]).then(res => {
								if (res.data.success) {
									uni.showToast({
										title: "删除成功",
										icon: "none"
									})
									
									_this.reports.forEach(group=>{
										_this.removeItem(group.item, e)
										if(group.item.length==0){
											_this.removeItem(_this.reports,group)
										}
									})
								}
							})
						}
					}
				})
			},
			openDetail(e) {
				this.currRow = e
				this.beginTime = e.beginTime
				this.endTime = e.endTime
				this.showDetail = true
				this.allowEdit = false
				this.isAdd = false
				if (e.reportObjects) {
					e.reportObjects.forEach((item) => {
						this.selectObject.push(item.id)
					})
				}
			},
			close() {
				this.currRow = {}
				this.beginTime = ""
				this.endTime = ""
				this.showDetail = false
				this.selectObject = []

				if (this.isReload) {
					this.getData(this.selectDate)
					this.isReload = false
				}
			},
			selectBeginTime(e) {
				this.beginTime = this.currRow.beginTime = e.target.value
				if (this.beginTime && this.endTime) {
					this.calcWorkHours(this.beginTime, this.endTime)
				}
			},
			selectEndTime(e) {
				this.endTime = this.currRow.endTime = e.target.value
				if (this.beginTime && this.endTime) {
					this.calcWorkHours(this.beginTime, this.endTime)
				}
			},
			calcWorkHours(beginTime, endTime) {
				let beginTimeLst = beginTime.split(':')
				let endTimeLst = endTime.split(':')
				let beginTimeStamp = Number(beginTimeLst[0] * 3600) + Number(beginTimeLst[1] * 60)
				let endTimeStamp = Number(endTimeLst[0] * 3600) + Number(endTimeLst[1] * 60)
				let workHours = ((endTimeStamp - beginTimeStamp) / 3600).toFixed(2)
				if (beginTime < '12:00' && endTime > '13:30') {
					workHours -= 1.5
				}
				this.currRow.workHours = workHours
			},
			showTasks() {
				if (this.allowEdit) {
					this.showTask = true
				}
			},
			selectTask(task) {
				this.currRow.task = task.title
				this.currRow.taskId = task.key
				this.showTask = false
			},
			btnOk() {
				if (!this.currRow.taskId) {
					uni.showModal({
						title: "汇报任务不允许为空",
						showCancel: false
					})
					return
				}
				if (this.selectObject.length == 0) {
					uni.showModal({
						title: "汇报对象不允许为空",
						showCancel: false
					})
					return
				}
				if (!this.currRow.content) {
					uni.showModal({
						title: "汇报内容不允许为空",
						showCancel: false
					})
					return
				}
				if (!this.currRow.workHours) {
					uni.showModal({
						title: "工作时数不允许为空",
						showCancel: false
					})
					return
				}

				this.currRow.reportObjects = this.selectObject
				this.currRow.files = []
				this.currRow.needDeleteFileIds = []

				if (this.isAdd) {
					this.currRow.reportDate = this.selectDate
					taskReport.personDayReportAdd(this.currRow).then(res => {
						if (res.data.success) {
							this.isReload = true
							uni.showToast({
								title: "新增成功",
								icon: "none"
							})
							
							this.currRow={}
							this.beginTime=""
							this.endTime=""
							this.selectObject=[]
						}
					})
				} else {
					taskReport.personDayReportEdit(this.currRow).then(res => {
						if (res.data.success) {
							uni.showToast({
								title: "修改成功",
								icon: "none"
							})
						}
					})
				}
			},
		}
	}
</script>

<style>
	.checkbox {
		height: 50rpx;
		width: 100%;

	}
</style>