pco/app/pages/disinfect/addDisinfect.vue

<template>
	<view>
		<view class="box">
			<view class="top">
				<text class="title">消毒申报单录入</text>
			</view>
			<view class="item">
				<view class="l" style="flex: 7;"><text style="color: red;">*</text>发货人名称：</view>
				<view class="r">
					<u-input placeholder="发货人名称" @input="handler()" v-model="form.sendPeople">
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="l" style="flex: 7;"><text style="color: red;">*</text>收货人名称：</view>
				<view class="r">
					<u-input placeholder="收货人名称" @input="handler()" v-model="form.receivePeople">
					</u-input>
				</view>
			</view>


			<view class="item">
				<view class="l"><text style="color: red;">*</text>品名：</view>
				<view class="r">
					<u-input placeholder="输入品名" @input="handler()" v-model="form.goodsName">
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>数量：</view>
				<view class="r">
					<u-input type="number" placeholder="输入数量" @input="handler()" v-model="form.num">
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>重量：</view>
				<view class="r">
					<u-input type="number" placeholder="输入毛重" @input="handler()" v-model="form.grossWeight">
						<text slot="suffix">吨</text>
					</u-input>
				</view>
			</view>

			<view class="item">
				<view class="l"><text style="color: red;">*</text>产地：</view>
				<view class="r">
					<u-input placeholder="输入产地" @input="handler()" v-model="form.origin">
					</u-input>
				</view>
			</view>

			<view class="item">
				<view class="l"><text style="color: red;">*</text>规格：</view>
				<view class="r">
					<u-input type="number" placeholder="输入规格" @input="handler()" v-model="form.unit">
						<text slot="suffix">米</text>
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>包装：</view>
				<view class="r">
					<view class="r">
						<u-input placeholder="输入包装" @input="handler()" v-model="form.pack" />
					</view>
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>标记：</view>
				<view class="r">
					<u-input placeholder="标记" @input="handler()" v-model="form.flag" />
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>号码：</view>
				<view class="r">
					<u-input type="number" placeholder="号码" @input="handler()" v-model="form.phone" />
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>启运地：</view>
				<view class="r">
					<u-input placeholder="启运地" @input="handler()" v-model="form.sourceAddress" />
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>到货口岸：</view>
				<view class="r">
					<u-input placeholder="到货口岸" @input="handler()" v-model="form.arrivePart" />
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>运输工具：</view>
				<view class="r">
					<u-input placeholder="运输工具" @input="handler()" v-model="form.carName" />
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>工具号码：</view>
				<view class="r">
					<u-input placeholder="运输工具号码" @input="handler()" v-model="form.carNo" />
				</view>
			</view>
			<view class="item">
				<view class="l" style="flex: 7;"><text style="color: red;">*</text>国内运输工具：</view>
				<view class="r">
					<u-input placeholder="国内运输工具" @input="handler()" v-model="form.chinaCarName" />
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>工具号码：</view>
				<view class="r">
					<u-input placeholder="工具号码" @input="handler()" v-model="form.chinaCarNo" />
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>申报人：</view>
				<view class="r">
					<u-input placeholder="申报人" @input="handler()" v-model="form.declarePeople">
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>申报电话：</view>
				<view class="r">
					<u-input type="number" placeholder="申报电话" @input="handler()" v-model="form.declarePhone">
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>申报单位：</view>
				<view class="r">
					<u-input placeholder="申报单位" @input="handler()" v-model="form.applyUnit">
					</u-input>
				</view>
			</view>
			<view class="item">
				<view class="l" style="flex: 7;">其他要求：</view>
				<view class="r">
					<u--textarea @input="handler()" v-model="form.remark" placeholder="其他要求及备注">
					</u--textarea>
				</view>
			</view>
		</view>
		<u-button type="primary" text="确定" @click="saveFn"></u-button>
		<u-button type="info" text="重置" @click="cleanFn" style="margin-top: 20rpx;"></u-button>
		<!-- ---------------------------------------------------------- -->
		<view class="bottom-safety"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					declarePeople: '',
					declarePhone: '',
					goodsName: '',
					grossWeight: '',
					num: '',
					origin: '',
					unit: '',
					pack: '',
					flag: '',
					phone: '',
					sourceAddress: '',
					arrivePart: '',
					carName: '',
					carNo: '',
					chinaCarName: '',
					chinaCarNo: '',
					remark: ''
				},
			}
		},
		onShow() {},

		mounted() {
			this.checkStore();
		},
		onBackPress() {
			this.$common.to('/pages/index/index');
			return true;
		},
		methods: {
			createModal() {
				return {
					sendPeople:'',
					receivePeople:'',
					declarePeople: '',
					declarePhone: '',
					goodsName: '',
					grossWeight: '',
					num: '',
					origin: '',
					unit: '',
					pack: '',
					flag: '',
					phone: '',
					sourceAddress: '',
					arrivePart: '',
					carName: '',
					carNo: '',
					chinaCarName: '',
					chinaCarNo: '',
					remark: ''
				}
			},
			cleanFn() {
				this.form = this.createModal();
				this.cleanStore();
				this.setInfo();
			},
			cleanStore() {
				uni.removeStorageSync('disinfect')
				uni.removeStorageSync('declare')
			},
			handler() {
				let cacheObj = {
					count: 0,
					cache: this.form
				}
				uni.setStorageSync('info',{declarePeople:this.form.declarePeople,declarePhone:this.form.declarePhone})
				uni.setStorageSync('disinfect', cacheObj);
			},
			addStoreCount() {
				let cacheObj = {
					count: 1,
					cache: this.form
				}
				uni.setStorageSync('disinfect', cacheObj);
			},
			setInfo(){
				let info=uni.getStorageSync('info');
				if(info){
					this.form.declarePeople=info.declarePeople;
					this.form.declarePhone=info.declarePhone
				}
			},
			checkStore() {
				this.setInfo();
				let disinfectStore = uni.getStorageSync('disinfect');
				if (disinfectStore && disinfectStore.count == 0) {
					let that = this;
					let cache=disinfectStore.cache;
					uni.showModal({
						title: '提示',
						content: '检测到您有未完成表单，是否继续？',
						success(resp) {
							if (resp.confirm) {
								that.form =cache 
							} else {
								that.cleanFn();
							}
						}
					})
				}
				let declareStore = uni.getStorageSync('declare');
				if(declareStore){
					let that = this;
					let cache=declareStore.cache;
					that.form.declarePeople=cache.declarePeople
					that.form.declarePhone=cache.declarePhone
					uni.showModal({
						title: '提示',
						content: '检测到最近有相似申报信息，是否导入？',
						success(resp) {
							if (resp.confirm) {
								that.form=cache;
							} else {
								that.cleanFn();
							}
						}
					})
				}
			},
			saveFn() {
				if(!this.check()){
					return;
				}
				this.$api.addDisinfect(this.$common.removeNull(this.form)).then(resp => {
					this.addStoreCount();
					this.$common.to('/pages/disinfect/addDisinfectSuccess')
				})
			},
			check(){
				if (!this.form.sendPeople) {
					this.$common.toast('请填写发货人信息');
					return false;
				}
				if (!this.form.receivePeople) {
					this.$common.toast('请填写接货人信息');
					return false;
				}
				if (!this.form.goodsName) {
					this.$common.toast('请填写品名');
					return false;
				}
				if (!this.$common.isNum(this.form.num)) {
					this.$common.toast('数量请填写数字');
					return false;
				}
				if (!this.$common.isNum(this.form.grossWeight)) {
					this.$common.toast('请填写重量');
					return false;
				}
				if (!this.form.origin) {
					this.$common.toast('请填写原产地');
					return false;
				}
				if (!this.$common.isNum(this.form.unit)) {
					this.$common.toast('规格只能填写数字');
					return false;
				}
				if (!this.form.pack) {
					this.$common.toast('请填写包装');
					return false;
				}
				if (!this.form.flag) {
					this.$common.toast('请填写标记');
					return false;
				}
				if (!this.$common.isPhone(this.form.phone)) {
					this.$common.toast('请填写正确号码');
					return false;
				}
				if (!this.form.sourceAddress) {
					this.$common.toast('请填写启运地');
					return false;
				}
				if (!this.form.arrivePart) {
					this.$common.toast('请填写到货口岸');
					return false;
				}
				if (!this.form.carName) {
					this.$common.toast('请填写运输工具');
					return false;
				}
				if (!this.form.carNo) {
					this.$common.toast('请填写工具号码');
					return false;
				}
				if (!this.form.chinaCarName) {
					this.$common.toast('请填写国内运输工具');
					return false;
				}
				if (!this.form.chinaCarNo) {
					this.$common.toast('请填写国内运输工具号码');
					return false;
				}
				if (!this.form.declarePeople) {
					this.$common.toast('请填写申请人');
					return false;
				}
				if (!this.$common.isPhone(this.form.declarePhone)) {
					this.$common.toast('请填写正确申请电话');
					return false;
				}
				if (!this.form.applyUnit) {
					this.$common.toast('请填写申请单位');
					return false;
				}
				return true;
			}
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.hs-item {
		text-align: center;
	}

	.item-line {
		color: #a2a2a2;
		padding: 5px 0 10px 29px;
		border-bottom: 1px solid #E5E5E5;
	}

	.hj {
		padding: 50rpx;
		font-size: 40rpx;
		color: red;
		font-weight: bold;
	}

	.save-btn {
		background-color: #ff4200;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 60rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 10rpx;
	}

	@import '@/common/common.scss'
</style>