pco/app/pages/declare/add.vue

<template>
	<view>
		<view class="box">
			<view class="top">
				<text class="title">申报单录入</text>
			</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 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.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.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 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">
					<view class="r">
						<uni-datetime-picker placeholder="请选择" @input="handler()" :clear-icon="false" type="date"
							v-model="form.productionDate" />
					</view>
				</view>
			</view>
			<view class="item">
				<view class="l" style="flex: 7;"><text style="color: red;">*</text>保质期(天)：</view>
				<view class="r">
					<view class="r">
						<u-input placeholder="输入保质期" type="number" @input="handler()" v-model="form.expirationDate" />
					</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.storageMode" />
				</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.productionMode" />
				</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" />
				</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.sendUnit" />
				</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.producerCode" />
				</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.receiveUnit" />
				</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.route" />
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>运输车辆（车头牌）：</view>
				<view class="r">
					<u--textarea @input="handler()" v-model="form.chinaCarNo" placeholder="运输车车头牌,多个请用逗号隔开">
					</u--textarea>
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>运输车辆（车尾牌）：</view>
				<view class="r">
					<u--textarea @input="handler()" v-model="form.chinaCarNoSuff" placeholder="运输车车尾牌,多个请用逗号隔开">
					</u--textarea>
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>司机姓名：</view>
				<view class="r">
					<u--textarea @input="handler()" v-model="form.driverName" placeholder="司机姓名,多个请用逗号隔开"></u--textarea>
				</view>
			</view>
			<view class="item">
				<view class="l"><text style="color: red;">*</text>司机电话：</view>
				<view class="r">
					<u--textarea @input="handler()" v-model="form.driverPhone" placeholder="司机电话,多个请用逗号隔开">
					</u--textarea>
				</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.agentPhone" />
				</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.customProof" />
				</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.quarantineProof" />
				</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.shop" />
				</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.productionCode" />
				</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.containerCode" />
				</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>
		<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: '',
					productionDate: '',
					expirationDate: '',
					productionMode: '',
					origin: '',
					sendUnit: '',
					producerCode: '',
					receiveUnit: '',
					route: '',
					storageMode: '',
					driverName: '',
					driverPhone: '',
					agent: '',
					chinaCarNo: '',
					chinaCarNoSuff:'',
					carNo: '',
					customProof: '',
					quarantineProof: '',
					shop: '',
					productionCode: '',
					containerCode: ''
				},
			}
		},
		onShow() {},

		mounted() {
			this.checkStore();
		},
		methods: {
			createModal() {
				return {
					declarePeople: '',
					declarePhone: '',
					goodsName: '',
					grossWeight: '',
					num: '',
					productionDate: '',
					expirationDate: '',
					productionMode: '',
					origin: '',
					sendUnit: '',
					producerCode: '',
					receiveUnit: '',
					route: '',
					storageMode: '',
					driverName: '',
					driverPhone: '',
					agent: '',
					chinaCarNo: '',
					chinaCarNoSuff:'',
					carNo: '',
					customProof: '',
					quarantineProof: '',
					shop: '',
					productionCode: '',
					containerCode: ''
				}
			},
			cleanFn() {
				this.form = this.createModal();
				this.cleanStore();
			},
			cleanStore() {
				uni.removeStorageSync('declare')
				uni.removeStorageSync('disinfect')
			},
			handler() {
				let cacheObj = {
					count: 0,
					cache: this.form
				}
				uni.setStorageSync('declare', cacheObj);
			},
			addStoreCount() {
				let cacheObj = {
					count: 1,
					cache: this.form
				}
				uni.setStorageSync('declare', cacheObj);
			},
			checkStore() {
				let store = uni.getStorageSync('declare');
				if (store && store.count == 0) {
					let that = this;
					let cache = store.cache;
					uni.showModal({
						title: '提示',
						content: '检测到您有未完成表单，是否继续？',
						success(resp) {
							if (resp.confirm) {
								that.form = cache
							} else {
								that.cleanFn();
							}
						}
					})
				}
				let disinfectStore = uni.getStorageSync('disinfect');
				if (disinfectStore) {
					let that = this;
					let cache = disinfectStore.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.form.declarePeople) {
					this.$common.toast('请填写申报人');
					return;
				}
				if (!this.$common.isPhone(this.form.declarePhone)) {
					this.$common.toast('请填写正确的申报电话');
					return;
				}
				if (!this.form.goodsName) {
					this.$common.toast('请填写产品');
					return;
				}
				if (!this.form.grossWeight || !this.$common.isNum(this.form.grossWeight)) {
					this.$common.toast('毛重只能填写数字');
					return;
				}
				if (!this.form.num || !this.$common.isNum(this.form.num)) {
					this.$common.toast('件数只能填整数');
					return;
				}

				if (!this.form.productionDate) {
					this.$common.toast('请选择生产日期');
					return;
				}
				if (!this.form.expirationDate || !this.$common.isNum(this.form.expirationDate)) {
					this.$common.toast('保质期为正数');
					return;
				}
				if (!this.form.storageMode) {
					this.$common.toast('请填写储藏条件');
					return;
				}
				if (!this.form.productionMode) {
					this.$common.toast('请填写生产方式');
					return;
				}
				if (!this.form.origin) {
					this.$common.toast('请输入原产国');
					return;
				}
				if (!this.form.sendUnit) {
					this.$common.toast('请填写货主单位');
					return;
				}
				if (!this.form.producerCode) {
					this.$common.toast('请填写生产商注册号');
					return;
				}
				if (!this.form.receiveUnit) {
					this.$common.toast('请填写收货单位');
					return;
				}
				if (!this.form.route) {
					this.$common.toast('请填写货物流向');
					return;
				}
				let chinaCarNo = this.form.chinaCarNo;
				if (!chinaCarNo) {
					this.$common.toast('请填写运输车辆车头牌');
					return;
				}
				let noArray=chinaCarNo.replace("，", ",").split(",");
				for(let i in noArray){
					if (!this.$common.isCarNo(noArray[i])) {
						this.$common.toast('运输车头牌不正确');
						return;
					}
				}
				let chinaCarNoSuff = this.form.chinaCarNoSuff;
				if (!chinaCarNoSuff) {
					this.$common.toast('请填写运输车辆车尾牌');
					return;
				}
				let suffArray=chinaCarNoSuff.replace("，", ",").split(",");
				for(let i in suffArray){
					if (!this.$common.isCarNo(suffArray[i])) {
						this.$common.toast('运输车尾牌不正确');
						return;
					}
				}
				if (!this.form.driverName) {
					this.$common.toast('请填写司机姓名');
					return;
				}
				let driverPhone = this.form.driverPhone;
				if (!driverPhone) {
					this.$common.toast('请填写司机号码');
					return;
				}
				let phoneArray=driverPhone.replace("，", ",").split(",");
				for(let i in phoneArray){
					let phone=phoneArray[i];
					if (!this.$common.isPhone(phone)) {
						this.$common.toast('司机联系号码不正确');
						return;
					}
				}
				if (!this.$common.isPhone(this.form.agentPhone)) {
					this.$common.toast('代理商联系号码不正确');
					return;
				}
				if (!this.form.customProof) {
					this.$common.toast('海关报关单据');
					return;
				}
				if (!this.form.quarantineProof) {
					this.$common.toast('请填写检验检疫证');
					return;
				}
				if (!this.form.shop) {
					this.$common.toast('请填写商铺');
					return;
				}
				if (!this.form.productionCode) {
					this.$common.toast('请填写生产批号');
					return;
				}
				if (!this.form.containerCode) {
					this.$common.toast('请填写柜号');
					return;
				}

				if (!this.form.carNo) {
					this.$common.toast('请填写越南车牌号');
					return;
				}
				this.$api.addDeclare(this.$common.removeNull(this.form)).then(resp => {
					this.addStoreCount();
					this.$common.to('/pages/declare/addDeclareSuccess')
				})
			},
		},

	}
</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>