zhgdyunapp_vue3/pages/projectEnd/smartBeamField/addMakeBeam.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="150">
					<span class="mustInput">*</span>
					<u-input v-model="form.type" v-if="form.type !==  ''" @click="openTypeSelect" />
				</u-form-item>
				<u-form-item label="台座工序" prop="intro" label-width="150">
					<span class="mustInput">*</span>
					<view :class="['select', form.selectValue ? 'selected' : '']"
						@tap="handleMultiple(form.selectIndex)">
						{{form.selectValue || '请选择'}}
					</view>
				</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>
			</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 {
				showType: false,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				form: {
					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: {
			returnBack() {
				console.log("返回")
				uni.navigateBack()
			},
			confirm(e) {
				console.log("下拉确认",e)
				this.form.type = 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;
	}

	.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;
				}
			}
		}
	}
</style>