jkzdzx_wjwapp/pages/weeklySubmit/weeklySubmit.vue

<template>
	<view style="width: 100vw;height:100vh;">
		<view style="height: calc(100% - 104rpx);">
			<view style="padding: 20rpx;background-color: #fff;">
				<u--form labelPosition="left" labelAlign="center" :model="content" ref="uForm"
					:labelStyle="{fontSize:'32rpx'}" labelWidth="120">
					<u-form-item label="周数:" borderBottom ref="item1">
						<view class="content">
							第 {{content.periods}} 周
						</view>
					</u-form-item>
					<u-form-item label="提交人:" borderBottom ref="item1">
						<view class="content">
							{{content.createBy}}
						</view>
					</u-form-item>
					<u-form-item label="部门名称:" borderBottom ref="item1">
						<view class="content">
							<view>
								{{content.deptName}}
							</view>
						</view>
					</u-form-item>
					<u-divider textColor="#2979ff" lineColor="#a8c7fa" :dashed="true" text="周报事务信息"></u-divider>

					<!-- v-if="ywWeeklyItemList.length!=0" -->
					<view v-if="title=='周报新增'" class="">
						<uni-card v-for="(item, index) in ywWeeklyItemList" :key="index" style="height: 800rpx;"
							:style="{ backgroundColor: item.submitState == 0 ? '#fde2e2' : (item.submitState == 1 ||item.submitState==3)? '#e1f3d8' : 'white' }">
							<span
								style="font-size: 16px;padding-top: 15rpx;display: inline-block;color:black">事项{{index+1}}</span>
							<span v-if="showNo != 'no'">
								<u-button v-if="item.submitState == null" @click="delThis(item,index)" size="small"
									style="width: 150rpx;float:right;margin-top: 8rpx;margin-left: 10rpx;" type="error"
									text="删除"></u-button>
								<!-- <u-button style="float:right;margin-top: 8rpx;width: 150rpx;" v-if="
							  item.supervistionId == null ||
							  item.supervistionId == '' ||
							  item.supervistionId == undefined
							" @click="addThing(item)" size="small" type="primary">快速填写</u-button> -->
							</span>
							<u-divider></u-divider>
							<view style="font-size: 28rpx;" class="">
								<view style="line-height: 80rpx;display: flex;" class="">
									<span style="width:200rpx;text-align: center;">事务名称：</span> <u--textarea height="50"
										style="width: 500rpx;" v-model="item.itemName" placeholder="请输入事务名称">
									</u--textarea>
								</view>
								<view style="line-height: 80rpx;display: flex;margin-top: 10rpx;" class="">
									<span style="width:200rpx;text-align: center;">本周推进情况：</span> <u--textarea
										v-model="item.weekPace" placeholder="请输入本周推进情况">
									</u--textarea>
								</view>
								<view style="line-height: 80rpx;display: flex;margin-top: 10rpx;" class="">
									<span style="width:200rpx;text-align: center;">下周计划：</span> <u--textarea
										v-model="item.weekNextPlan" placeholder="请输入下周计划"></u--textarea>
								</view>
								<view style="line-height: 80rpx;display: flex;margin-top: 10rpx;" class="">
									<span style="width:200rpx;text-align: center;">完成时限：</span> <uni-datetime-picker
										type="date" :clear-icon="false" v-model="item.doneTime"
										@maskClick="maskClick" />
								</view>

							</view>

						</uni-card>

						<view v-if="showNo != 'no'" style="display: flex;margin-top: 20rpx;" class="">
							<u-button @click="handleAddYwWeeklyItem" size="small"
								style="width: 200rpx;margin-top: 20rpx;" type="primary" text="添加事项"></u-button>
							<u-button @click="submitForm" size="small" style="width: 200rpx;margin-top: 20rpx;"
								type="primary" text="提交"></u-button>
						</view>

					</view>
					<view v-else class="">
						<uni-card v-for="(item, index) in ywWeeklyItemList" :key="index" style="height: 800rpx;"
							:style="{ backgroundColor:item.ywSupervisionItem==null?'white': item.ywSupervisionItem.submitState == 0 ? '#fde2e2' : (item.ywSupervisionItem.submitState == 1||item.ywSupervisionItem.submitState == 3) ? '#e1f3d8' : 'white' }">
							<span
								style="font-size: 16px;padding-top: 15rpx;display: inline-block;color:black">事项{{index+1}}</span>
							<span v-if="showNo != 'no'">
								<u-button v-if="item.submitState == null" @click="delThis(item,index)" size="small"
									style="width: 150rpx;float:right;margin-top: 8rpx;margin-left: 10rpx;" type="error"
									text="删除"></u-button>
								<!-- <u-button style="float:right;margin-top: 8rpx;width: 150rpx;" v-if="
							  item.supervistionId == null ||
							  item.supervistionId == '' ||
							  item.supervistionId == undefined
							" @click="addThing(item)" size="small" type="primary">快速填写</u-button> -->
							</span>
							<u-divider></u-divider>
							<view style="font-size: 28rpx;" class="">
								<view style="line-height: 80rpx;display: flex;" class="">
									<span style="width:200rpx;text-align: center;">事务名称：</span> <u--textarea height="50"
										style="width: 500rpx;" v-model="item.itemName" placeholder="请输入事务名称">
									</u--textarea>
								</view>
								<view style="line-height: 80rpx;display: flex;margin-top: 10rpx;" class="">
									<span style="width:200rpx;text-align: center;">本周推进情况：</span> <u--textarea
										v-model="item.weekPace" placeholder="请输入本周推进情况">
									</u--textarea>
								</view>
								<view style="line-height: 80rpx;display: flex;margin-top: 10rpx;" class="">
									<span style="width:200rpx;text-align: center;">下周计划：</span> <u--textarea
										v-model="item.weekNextPlan" placeholder="请输入下周计划"></u--textarea>
								</view>
								<view style="line-height: 80rpx;display: flex;margin-top: 10rpx;" class="">
									<span style="width:200rpx;text-align: center;">完成时限：</span> <uni-datetime-picker
										type="date" :clear-icon="false" v-model="item.doneTime"
										@maskClick="maskClick" />
								</view>

							</view>

						</uni-card>

						<view v-if="showNo != 'no'" style="display: flex;margin-top: 20rpx;" class="">
							<u-button @click="handleAddYwWeeklyItem" size="small"
								style="width: 200rpx;margin-top: 20rpx;" type="primary" text="添加事项"></u-button>
							<u-button @click="submitForm" size="small" style="width: 200rpx;margin-top: 20rpx;"
								type="primary" text="提交"></u-button>
						</view>

					</view>

					<!-- 	<uni-table ref="myTable" style="margin-top: 20rpx;" :loading="loading" border stripe
						type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
						<uni-tr>
							<uni-th width="50" align="center">序号</uni-th>
							<uni-th width="150" align="center">事务名称</uni-th>
							<uni-th width="200" align="center">本周推进情况</uni-th>
							<uni-th width="170" align="center">下周计划</uni-th>
							<uni-th width="155" align="center">完成时限</uni-th>
							<uni-th width="120" align="center">督办事项</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in ywWeeklyItemList" :key="index">
							<uni-td align="center">{{ index+1 }}</uni-td>
							<uni-td align="center">
								<view class="name">
									<u--textarea v-model="item.itemName" placeholder="请输入事务名称" autoHeight border="none">
									</u--textarea>
								</view>
							</uni-td>
							<uni-td align="center">
								<u--textarea v-model="item.weekPace" placeholder="请输入本周推进情况" autoHeight border="none">
								</u--textarea>
							</uni-td>
							<uni-td align="center">
								<u--textarea v-model="item.weekNextPlan" placeholder="请输入下周计划" autoHeight border="none">
								</u--textarea>
							</uni-td>
							<uni-td align="center">
								<uni-datetime-picker type="date" :clear-icon="false" v-model="item.doneTime"
									@maskClick="maskClick" />
							</uni-td>
							<uni-td align="center">
								<view class="uni-group">
									<button style="margin-top: 10rpx;" v-if="
                  item.supervistionId == null ||
                  item.supervistionId == '' ||
                  item.supervistionId == undefined
                " @click="addThing(item)" class="uni-button" size="mini" type="primary">快速填写</button>
									<view v-else class="">
									</view>
								</view>
							</uni-td>
						</uni-tr>
					</uni-table> -->


				</u--form>
				<uni-popup ref="popup" background-color="#fff">
					<view style="padding:20rpx;width:600rpx;min-height: 400rpx;" class="popup-content">
						<view style="align-items: center;text-align: center;font-size: 36rpx;" class="">
							督办事项
						</view>
						<uni-table type="selection" ref="dbTable" style="margin-top: 20rpx;" :loading="loading" border
							stripe show-checkbox emptyText="暂无更多数据" @selection-change="handleSelectionChange1">
							<uni-tr>
								<uni-th width="50" align="center">序号</uni-th>
								<uni-th width="150" align="center">事务名称</uni-th>
								<uni-th width="150" align="center">完成时限</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in gridData" :key="index">
								<uni-td align="center">{{ index+1 }}</uni-td>
								<uni-td align="center">
									<view class="name">
										{{item.title}}
									</view>
								</uni-td>
								<uni-td align="center">
									<view class="name">
										{{item.doneTime}}
									</view>
								</uni-td>
							</uni-tr>
						</uni-table>
						<view style="display: flex;margin-top: 20rpx;" class="">
							<u-button @click="cancel" style="width: 200rpx;" text="取消"></u-button>
							<u-button @click="submitInfo" style="width: 200rpx;" type="primary" text="确认"></u-button>
						</view>

					</view>
				</uni-popup>
			</view>
		</view>
		<u-modal :show="showDel" :showCancelButton='true' @cancel="showDel=false"
			@confirm="handleDeleteYwWeeklyItem(indexDel)" title="提示" content='是否确认删除？'></u-modal>
		<!-- <u-button >打开</u-button> -->
	</view>
</template>

<script>
	import {
		getWeekInYear,
		getNowWeekList
	} from "@/utils/wjw.js"
	export default {
		data() {
			return {
				showNo: null,
				title: '',
				selectionValue: null,
				loading: false,
				showDel: false,
				gridData: [],
				rowValue: null,
				indexDel: null,
				dialogTableVisible: false,
				ywWeeklyItemList: [],
				checkedYwWeeklyItem: [],
				lastSelectedRow: null,
				content: {
					periods: getWeekInYear(uni.$u.timeFormat(new Date().toLocaleDateString(), 'yyyy-mm-dd')),
					deptName: uni.getStorageSync('userInfo').dept.deptName,
					createBy: uni.getStorageSync('userInfo').nickName,
					ywSupervisionItemList: []
				}
			}
		},
		onLoad(options) {
			this.title = options.title
			console.log(options)
			if (options.id != null && options.id != '' && options.id != undefined) {
				uni.$u.http.get('/offcial/weekly/' + options.id).then((res) => {
					console.log('res', res)
					this.content = res.data
					this.ywWeeklyItemList = []
					this.ywWeeklyItemList = this.content.ywWeeklyItemList;
				})
			}
			if (options.showNo != '' && options.showNo != null && options.showNo != undefined) {
				this.showNo = options.showNo
				console.log(this.showNo)
			}

			uni.setNavigationBarTitle({
				title: options.title
			})
			if (options.title == '周报新增') {
				this.addThing()
			}
		},

		methods: {
			delThis(item, index) {
				this.showDel = true
				this.indexDel = index
			},
			submitForm() {
				var sumflg = true
				this.ywWeeklyItemList.forEach((item) => {
					if (!sumflg) return; // 如果sumflg为false，直接返回

					if (
						item.weekPace == null ||
						item.weekPace == "" ||
						item.weekPace == undefined
					) {
						uni.showToast({
							title: "督办事项“" + item.itemName + "”本周推进情况不能为空",
							icon: "none",
							mask: true,
							duration: 3000
						})

						sumflg = false;
						return;
					}
					if (
						item.weekNextPlan == null ||
						item.weekNextPlan == "" ||
						item.weekNextPlan == undefined
					) {
						uni.showToast({
							title: "督办事项“" + item.itemName + "”下周计划不能为空",
							icon: "none",
							mask: true,
							duration: 3000
						})
						sumflg = false;
						return;
					}
				});
				if (sumflg) {
					if (this.content.id != null && this.content.id != undefined && this.content.id != '') {
						this.content.ywWeeklyItemList = this.ywWeeklyItemList;
						uni.showLoading({
							title: "提交中...",
							mask: true
						})
						uni.$u.http.put('/offcial/weekly', this.content).then((res) => {
							uni.hideLoading()
							uni.showToast({
								title: "修改成功",
								icon: "none",
								mask: true,
								duration: 3000
							})
							setTimeout(() => {
								uni.$emit('query', {
									a: 2
								})
								uni.navigateBack()
							}, 3000)
						}).catch(res => {
							uni.$emit('query', {
								a: 2
							})
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						})
					} else {
						this.content.ywWeeklyItemList = this.ywWeeklyItemList;
						uni.showLoading({
							title: "提交中...",
							mask: true
						})
						uni.$u.http.post('/offcial/weekly', this.content).then((res) => {
							uni.hideLoading()
							uni.showToast({
								title: "提交成功",
								icon: "none",
								mask: true,
								duration: 3000
							})
							setTimeout(() => {
								uni.$emit('query', {
									a: 1
								})
								uni.navigateBack()
							}, 3000)
						}).catch(res => {
							uni.hideLoading()
							uni.$emit('query', {
								a: 1
							})
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						})
					}

				}

			},
			cancel() {
				this.$refs.popup.close()
			},
			submitInfo() {
				console.log(this.selectionValue)
				this.rowValue.itemName = this.selectionValue.title;
				this.rowValue.weekPace =
					this.selectionValue.ywSupervisionItemList[0].progress;
				this.rowValue.doneTime = this.selectionValue.doneTime;
				this.rowValue.supervistionId = this.selectionValue.id;
				this.$refs.popup.close()
				this.$refs.dbTable.clearSelection();
			},
			handleSelectionChange1(selection) {
				// this.selectionValue = selection;
				console.log('sel', selection)
				if (selection.detail.index.length > 1) {
					// 如果选择了多于一行，取消之前的选择
					this.$refs.dbTable.toggleRowSelection(this.lastSelectedRow, false);
				}
				if (selection.detail.index.length > 0) {
					// 更新最后选择的行
					this.lastSelectedRow = selection.detail.index[selection.detail.index.length - 1];
				}
				this.selectionValue = this.gridData[selection.detail.index[0]]
				console.log(this.selectionValue)
			},
			// 快速填写
			addThing(row) {
				this.ywWeeklyItemList = []
				this.rowValue = row;
				uni.$u.http.get(`/offcial/supervision/sel/myselfDb`, {
					params: {
						orderByColumn: "createTime",
						isAsc: "Desc"
					}
				}).then((res) => {
					console.log('res69', res)
					if (res.rows.length > 0) {
						// this.$refs.popup.open()
						// this.gridData = res.rows;
						for (let i = 0; i < res.rows.length; i++) {
							this.ywWeeklyItemList.push({
								itemName: res.rows[i].title,
								weekPace: res.rows[i].ywSupervisionItemList[0].progress,
								doneTime: res.rows[i].doneTime,
								submitState: res.rows[i].ywSupervisionItemList[0].submitState,
								supervistionId: res.rows[i].ywSupervisionItemList[0].id,
							});
						}
					} else {
						uni.showToast({
							title: "暂无可选督办事项，请手动填写",
							icon: "none",
							mask: true,
							duration: 3000
						})
					}
				});
			},
			handleDeleteYwWeeklyItem(index1) {
				console.log('item', index1)
				console.log('ywWeeklyItemList', this.ywWeeklyItemList)
				const ywWeeklyItems = this.ywWeeklyItemList;
				const checkedYwWeeklyItems = [index1]
				this.ywWeeklyItemList = ywWeeklyItems.filter(function(item, index) {
					return checkedYwWeeklyItems.indexOf(index) == -1;
				});
				this.showDel = false
			},
			selectionChange(selection) {
				console.log('selection', selection)
				this.checkedYwWeeklyItem = selection.detail.index.map((item) => item);
				console.log(this.checkedYwWeeklyItem)
			},
			handleAddYwWeeklyItem() {
				let obj = {};
				obj.itemName = "";
				obj.weekPace = "";
				obj.weekNextPlan = "";
				obj.doneTime = "";
				obj.isDb = "";
				obj.remark = "";
				this.ywWeeklyItemList.push(obj);
				console.log(this.ywWeeklyItemList)
			},
			maskClick(val) {

			}
		}
	}
</script>

<style>

</style>