zhgdyunapp/pages/projectEnd/markRoom/sampleManage/add.vue

<template>
	<view class="fullHeight">
		<headers :showBack="true">
			<view class="headerName">
				样品录入
			</view>
		</headers>
		<scroll-view scroll-y="true" class="pageContent bgWhite">
			<view class="formBox">
				<form @submit="formSubmit">
					<view class="uni-form-item">
						<view class="uni-form-label">
							<text class="star">*</text>设备
						</view>
						<view class="uni-form-input">
							<picker @change="bindPickerChange3" :value="devIndex" :range="devList" range-key="laboratoryName">
								<view class="uni-input uni-select" v-if="devList.length>0">{{devList[devIndex].laboratoryName}}
									<image class="icon-down" src="../../../../static/icon-down-black.png" mode=""></image>
								</view>
						    <view class="uni-input uni-select cl" v-else>
								请选择 <image class="icon-down" src="../../../../static/icon-down-black.png" mode=""></image>
							</view>
						 </picker>
						</view>
						
					</view>
					<view class="uni-form-item">
						<view class="uni-form-label">
							<text class="star">*</text>样品类型
						</view>
						<view class="uni-form-input">
							<picker @change="bindPickerChange2" v-model="sampleTypeIndex" :range="sampleTypeList" range-key="sampleTypeName">
								<view class="uni-input" v-if="sampleTypeIndex!=null">{{sampleTypeList[sampleTypeIndex].sampleTypeName}}
								<image class="icon-down" src="../../../../static/icon-down-black.png" mode=""></image></view>
						    <view class="uni-input uni-select cl" v-else>
								请选择 <image class="icon-down" src="../../../../static/icon-down-black.png" mode=""></image>
							</view>
						 </picker>
						</view>
						
					</view>
					<view class="uni-form-item">
						<view class="uni-form-label">
							<text class="star">*</text>养护周期(天)
						</view>
						<view class="uni-form-input">
							<input disabled class="uni-input disabled" placeholder-class="cl" name="curingPeriod" v-model="form.curingPeriod" type="number" />
						</view>
						
					</view>
					<view class="uni-form-item">
						<view class="uni-form-label">
							<text class="star">*</text>样品编号
						</view>
						<view class="uni-form-input">
							<input class="uni-input" placeholder-class="cl" name="sampleNo" v-model="form.sampleNo" placeholder="请输入/扫描"/>
							<button type="default" class="floatBtn" @click="scanCodeFn()">扫描</button>
						</view>
						
					</view>
					<view class="uni-form-item">
						<view class="uni-form-label">
							<text class="star">*</text>成型时间
						</view>
						<view class="uni-form-input">
							<picker class="datePickerBox datePickerBox1" mode="date" :value="date" :start="startDate" @change="bindDateChange">
								<view class="uni-input cl" v-if="!date">选择日期</view>
									<view class="uni-input " v-else>{{date}}</view>
								</picker>
							<picker class="datePickerBox datePickerBox2" mode="time" :value="time" start="00:00" end="23:59" @change="bindTimeChange">
								<view class="uni-input cl" v-if="!time">选择时间</view>
									<view class="uni-input" v-else>{{time}}</view>
								</picker>
							</picker>
						</view>
					</view>
					<view class="uni-form-item">
						<view class="uni-form-label">
							<text class="star">*</text>样品数量(组)
						</view>
						<view class="uni-form-input">
							<input class="uni-input" placeholder-class="cl" name="sampleNum" v-model="form.sampleNum" placeholder="请输入" type="number" />
						</view>
						
					</view>
					<view class="uni-form-item">
						<view class="uni-form-label">
							<text class="star">*</text>存放位置
						</view>
						<view class="uni-form-input">
							<picker @change="bindPickerChange" :value="locationIndex" :range="locationData" range-key="locationName">
								<view class="uni-input uni-select cl" v-if="locationIndex==null">
									请选择 <image class="icon-down" src="../../../../static/icon-down-black.png" mode=""></image>
								</view>
						    <view class="uni-input uni-select" v-else>{{locationData[locationIndex].locationName}}<image class="icon-down" src="../../../../static/icon-down-black.png" mode=""></image></view>
						 </picker>
						</view>
						
					</view>
					<view class="uni-form-item">
						<view class="uni-form-label">
							到期通知人
						</view>
						<view class="uni-form-input">
							<button type="default" class="selectBtn" size="mini" @click="goSelectFn">选择人员 (已选{{selectPersonList.length}}人)</button>
						</view>
					</view>
					<button form-type="submit" type="primary" class="btn submitBtn big">保存</button>
				</form>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import headers from "../../../../components/headers/headers.vue"
	import {GetDateStr} from "../../../../static/js/util.js"
	export default {
		components:{headers},
		data() {
			return {
				form:{
					curingPeriod: "",
					devSn: "",
					formingTime: "",
					locationId: "",
					sampleNo: "",
					sampleNum: "",
					sampleTypeId: "",
					projectSn: '',
					secondLocationId:''
				},
				projectDetail:{},
				date:'',
				time:'',
				locationData:[],
				locationDataPicker:[],
				locationIndex:null,
				sampleTypeList:[],
				sampleTypeIndex: null,
				devList:[],
				devIndex:0,
				selectPersonList:[]
			};
		},
		computed: {
			startDate() {
				return GetDateStr(0,'-');
			}
		},
		mounted(){
			this.projectDetail=JSON.parse(uni.getStorageSync('projectDetail'))
			this.getTypeData()
			this.loadDevList()
		},
		onShow() {
				if(uni.getStorageSync('person')){
					var person = uni.getStorageSync('person')
					if(person.indexOf(',')!=-1){
						this.selectPersonList=person.split(',')
					}else{
						this.selectPersonList=[person]
					}
					
				}
		},
		methods:{
			//获取类型列表
			getTypeData(){
				var that = this
				this.sendRequest({
					url: "xmgl/standardSampleType/list",
					data: {projectSn:this.projectDetail.projectSn},
					method: "POST",
					success(res){
						that.sampleTypeList=res.result
					}
				})
			},
			// 获取存放位置数据
			getLocationData(){
				var that = this
				this.sendRequest({
					url: "xmgl/standardLocation/selectChildrenLocationList",
					data: {projectSn:this.projectDetail.projectSn,devSn:this.devList[this.devIndex].devSn},
					method: "POST",
					success(res){
						that.locationData=res.result
					}
				})
			},
			// 获取设备列表
			loadDevList(){
				var that = this
				this.sendRequest({
					url: "xmgl/standardDev/list",
					data: {projectSn: this.projectDetail.projectSn},
					method: "POST",
					success(res){
						that.devList = res.result
						if(that.devList.length>0){
							that.getLocationData()
							// that.isHasVideo()
						}
					}
				})
			},
			bindPickerChange3: function(e) {
			            console.log('picker发送选择改变，携带值为', e.target.value)
			            this.devIndex = e.target.value
						this.getLocationData()
			        },
			bindPickerChange2: function(e) {
			            console.log('picker发送选择改变，携带值为', e.target.value)
			            this.sampleTypeIndex = e.target.value
						this.form.curingPeriod=this.sampleTypeList[this.sampleTypeIndex].sampleCuringPeriod
			        },
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.target.value)
			            this.locationIndex = e.target.value
			        },
			bindDateChange: function(e) {
			            this.date = e.target.value
			        },
			        bindTimeChange: function(e) {
			            this.time = e.target.value
			        },
			formSubmit(e){
				console.log(e)
				var params = e.detail.value
				if(this.devIndex==null){
					uni.showToast({
						title:'请选择设备',
						icon:'none'
					})
					return false;
				}
				if(this.sampleTypeIndex==null){
					uni.showToast({
						title:'请选择样品类型',
						icon:'none'
					})
					return false;
				}
				if(params.curingPeriod==''){
					uni.showToast({
						title:'请填写养护周期',
						icon:'none'
					})
					return false;
				}
				if(params.sampleNo==''){
					uni.showToast({
						title:'请填写样品编号',
						icon:'none'
					})
					return false;
				}
				if(this.date==''||this.time==''){
					uni.showToast({
						title:'请选择成型时间',
						icon:'none'
					})
					return false;
				}
				if(params.sampleNum==''){
					uni.showToast({
						title:'请填写样品数量',
						icon:'none'
					})
					return false;
				}
				if(this.locationIndex.length==0||this.locationIndex==null){
					uni.showToast({
						title:'请选择存放位置',
						icon:'none'
					})
					return false;
				}
				params.devSn=this.devList[this.devIndex].devSn
				params.projectSn = this.projectDetail.projectSn
				params.formingTime = this.date + ' ' + this.time
				params.secondLocationId = this.locationData[this.locationIndex].parentId
				params.locationId = this.locationData[this.locationIndex].id
				params.sampleTypeId=this.sampleTypeList[this.sampleTypeIndex].id
				params.expireNotice=this.selectPersonList.join(',')
				this.sendRequest({
					url: "xmgl/standardSampleRecord/add",
					data: params,
					method: "POST",
					success(res){
						uni.showToast({
							title:'保存成功！'
						})
						
						uni.removeStorageSync('person')
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},800)
					}
				})
			},
			goSelectFn(){
				uni.navigateTo({
					url:'../../selectPerson/selectPerson'
				})
			},
			scanCodeFn(){
				// 允许从相机和相册扫码
				var that = this
				uni.scanCode({
					// onlyFromCamera: true,
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						that.form.sampleNo=res.result
				    }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.datePickerBox{
	float: left;
}
.datePickerBox1{
	width: calc(58% - 5px);
	margin-right: 5px;
}
.datePickerBox2{
	width: 42%;
}
.selectBtn{
	border-radius: 20px;
	border: 1px solid #372D66;
	color: #372D66;
	height: 35px;
	line-height: 35px;
	font-size: 15px;
	padding: 0 15px;
}
.submitBtn{
	margin-top: 40px;
}
</style>