zhgdyunapp/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="梁号" prop="name" label-width="200">
					<span class="mustInput">*</span>
					<u-input v-model="form.name" />
				</u-form-item>
				<u-form-item label="梁板类型" prop="name" label-width="200">
					<span class="mustInput">*</span>
					<u-input v-model="form.name" />
				</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="datetimerange" type="datetimerange" rangeSeparator="至"
						@change="confirmTime"/>
				</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="datetimerange" type="datetimerange" rangeSeparator="至"
						@change="confirmTime"/>
				</view>
				<u-form-item label="跨" prop="name" label-width="200">
					<u-input v-model="form.name" />
				</u-form-item>
				<u-form-item label="幅" prop="name" label-width="200">
					<view class="input-text" @click="showType = true">
						<view v-if="form.width == ''">
							请选择幅
						</view>
						<view style="color: #303133;" v-else>
							{{ form.width }}
						</view>
					</view>
				</u-form-item>
				<u-form-item label="存梁台座编号" prop="name" label-width="200">
					<u-input v-model="form.name" />
				</u-form-item>
			</u-form>
		</view>
		<u-select v-model="showType" :list="list" @confirm="confirm"></u-select>
		<multiple-picker title="请选择" :show="selectMultiple.show" :columns="selectMultiple.columns"
			:defaultIndex="selectMultiple.index" @confirm="confirmMultiple" @cancel="selectMultiple.show = false"
			@change="changeMultiple"></multiple-picker>
		<view class="submitMakeBeam" @click="submit">
			确定
		</view>
	</view>
</template>

<script>
	import multiplePicker from "@/components/multiple-picker/multiple-picker";
	export default {
		components: {
			multiplePicker
		},
		data() {
			return {
				datetimerange: "",
				showType: false,
				list: [{
						value: '1',
						label: '左幅'
					},
					{
						value: '2',
						label: '右幅'
					}
				],
				form: {
					width: "",
					plannedMakeBeamBeginTime: "",
					plannedMakeBeamEndTime: "",
					plannedErectionBeamBeginTime: "",
					plannedErectionBeamEndTime: "",
					selectValue: '', //回显输入框
					selectIndex: [], //回显下拉框
				},
				selectMultiple: {
					show: false,
					index: [],
					columns: [{
							label: '测试1',
							value: '1',
						},
						{
							label: '测试2',
							value: '2',
						},
						{
							label: '测试3',
							value: '3',
						},
						{
							label: '测试4',
							value: '4',
						},
						{
							label: '测试5',
							value: '5',
						},
						{
							label: '测试6',
							value: '6',
						},
						{
							label: '测试7',
							value: '7',
						}
					],
				},
			};
		},
		methods: {
			confirmTime(e) {
				this.form.plannedMakeBeamBeginTime = e[0]
				this.form.plannedMakeBeamEndTime = e[1]
				console.log("时间选择", e)
			},
			returnBack() {
				console.log("返回")
				uni.navigateBack()
			},
			confirm(e) {
				console.log("下拉确认", e)
				this.form.width = e[0].label
			},
			openTypeSelect() {
				this.showType = true
			},
			handleMultiple(val) {
				console.log(val);

				this.selectMultiple.index = val || [];
				this.selectMultiple.show = true;
			},
			confirmMultiple(e) {
				console.log(e);

				let temp = [];
				e.selected.forEach(item => {
					temp.push(item.label);
				})
				this.form.selectValue = temp.toString();
				this.form.selectIndex = e.value;
				this.selectMultiple.show = false;
			},
			changeMultiple(e) {
				console.log("选择改变", e);
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {}
	};
</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: 15px;
				box-sizing: border-box;
				color: #CCCCCC;
				line-height: 26px;

				&.selected {
					color: black;
				}
			}
		}
	}
	.time-form {
		position: relative;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #e4e7ed;
		.form-title {
			padding-top: 30rpx;
			margin-bottom: 20rpx;
		}
	}
</style>