zhgdyunapp_vue3/pages/projectEnd/smartBeamField/addPlanTask.vue

<template>
	<!-- 新增制梁台座 -->
	<view class="fullHeight">
		<headers :showBack="true" class="">
			<view class="headerName">
				新增计划任务
				<view class="headerBack" @click="returnBack">
					<u-icon name="arrow-left" color="#333333" size="40"></u-icon>
				</view>
			</view>
		</headers>
		<view class="makeBeamForm">
			<u-form :model="form" ref="uForm">
				<u-form-item label="梁号" label-width="200">
					<span class="mustInput">*</span>
					<u-input v-model="form.beamNo" />
				</u-form-item>
				<u-form-item label="梁板类型" label-width="200">
					<span class="mustInput">*</span>
					<u-input v-model="form.beamAndPlateType" />
				</u-form-item>
				<view class="time-form">
					<span class="mustInput">*</span>
					<view class="form-title">计划制梁时间</view>
					<uni-datetime-picker start-placeholder="选择开始时间" end-placeholder="选择结束时间" :border="false"
						v-model="markTime" type="datetimerange" rangeSeparator="至" @change="confirmMakeTime" />
				</view>
				<view class="time-form">
					<span class="mustInput">*</span>
					<view class="form-title">计划架梁时间</view>
					<uni-datetime-picker start-placeholder="选择开始时间" end-placeholder="选择结束时间" :border="false"
						v-model="erectTime" type="datetimerange" rangeSeparator="至" @change="confirmSetupTime" />
				</view>
				<u-form-item label="跨" label-width="200">
					<u-input v-model="form.stepAstride" />
				</u-form-item>
				<u-form-item label="幅" label-width="200">
					<view class="input-text" @click="showType = true">
						<view v-if="widthName == ''">
							请选择幅
						</view>
						<view style="color: #303133;" v-else>
							{{ widthName }}
						</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<u-select v-model="showType" :list="list" @confirm="confirm"></u-select>
		<view class="submitMakeBeam" @click="addSaveBtn">
			确定
		</view>
	</view>
</template>

<script>
	import multiplePicker from "@/components/multiple-picker/multiple-picker";
	export default {
		components: {
			multiplePicker
		},
		data() {
			return {
				// 桥段ID
				smartBeamFieldBridgeSectionId: "",
				// 幅名称
				widthName: "",
				projectSn: "",
				datetimerange: "",
				showType: false,
				list: [{
						value: 1,
						label: '左幅'
					},
					{
						value: 2,
						label: '右幅'
					}
				],
				erectTime: '',
				markTime: '',
				form: {
					beamNo: '',
					beamAndPlateType: '',
					plannedErectionBeamBeginTime: '',
					plannedErectionBeamEndTime: '',
					plannedMakeBeamBeginTime: '',
					plannedMakeBeamEndTime: '',
					stepAstride: '',
					width: '',
					beamQrCodeUrl: '梁的二维码url',
					makeBeamProcessQrCodeUrl: '梁和制梁进度的二维码页面url'
				},
			};
		},
		onLoad(e) {
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			if (e) {
				console.log("跳转携带参数", e)
				this.smartBeamFieldBridgeSectionId = e.smartBeamFieldBridgeSectionId
			}
		},
		methods: {
			confirmMakeTime(e) {
				this.form.plannedMakeBeamBeginTime = e[0]
				this.form.plannedMakeBeamEndTime = e[1]
				// console.log("制梁时间选择", e)
			},
			confirmSetupTime(e) {
				this.form.plannedErectionBeamBeginTime = e[0]
				this.form.plannedErectionBeamEndTime = e[1]
				// console.log("架梁时间选择", e)
			},
			returnBack() {
				// console.log("返回")
				uni.navigateBack()
			},
			confirm(e) {
				// console.log("下拉确认", e)
				this.form.width = e[0].value
				this.widthName = e[0].label
			},
			//新增保存
			addSaveBtn() {
				if (this.form.beamNo == "") {
					uni.showToast({
						title: "请输入梁号",
						icon: 'error'
					})
					return
				}
				if (this.form.beamAndPlateType == "") {
					uni.showToast({
						title: "请输入梁板类型",
						icon: 'error'
					})
					return
				}
				if (this.markTime == "") {
					uni.showToast({
						title: "请选择制梁时间",
						icon: 'error'
					})
					return
				}
				if (this.erectTime == "") {
					uni.showToast({
						title: "请选择架梁时间",
						icon: 'error'
					})
					return
				}
				
				let data = JSON.parse(JSON.stringify(this.form));
				data.projectSn = this.projectSn;
				data.smartBeamFieldBridgeSectionId = this.smartBeamFieldBridgeSectionId
				console.log('新增提交的数据', data);
				this.sendRequest({
					url: 'xmgl/smartBeamFieldBeam/add',
					method: 'post',
					data: data,
					success: (res) => {
						console.log(res)
						if (res.code == 200) {
							uni.showToast({
								title: '保存成功'
							})
							setTimeout(() => {
								uni.navigateBack({})
							}, 1000)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					}
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.headerBack {
		position: absolute;
		left: 5%;
		top: 5%;
	}

	.makeBeamForm {
		padding: 0 38rpx;

		.input-text {
			color: rgb(192, 196, 204);
		}
	}

	.mustInput {
		color: red;
		position: absolute;
		top: 26rpx;
		left: -20rpx;
	}

	.submitMakeBeam {
		position: fixed;
		bottom: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 665rpx;
		height: 69rpx;
		margin-left: 40rpx;
		color: #fff;
		background: #5181F6;
		border-radius: 142rpx;
	}

	.form {
		width: 100%;
		padding: 40rpx 30rpx;
		box-sizing: border-box;

		.item {
			width: 100%;
			padding: 20rpx 0;

			.select {
				width: 100%;
				border: 1px solid #dadbde;
				padding-top: 6px;
				padding-bottom: 6px;
				padding-left: 9px;
				padding-right: 9px;
				border-radius: 4px;
				font-size: 30rpx;
				box-sizing: border-box;
				color: #CCCCCC;
				line-height: 52rpx;

				&.selected {
					color: black;
				}
			}
		}
	}

	.time-form {
		position: relative;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #e4e7ed;

		.form-title {
			padding-top: 30rpx;
			margin-bottom: 20rpx;
		}
	}
</style>