yiliangyiyun-app/pages/user/depotAcquisition/grainDeliveryRegistration.vue

<template>
	<view @click='hidden' class="content">
		<view class="content1">
			<view class="row1">
				<view class="title">{{dataList.warehouseName}}</view>
				<view class="validityDate"> {{dataList.validityDate}} 0时前有效</view>
			</view>
			<view class="row2">
				<view class="start-time">{{startDate}}创建</view>
			</view>
			<view class="row3">
				<view class='locationwrap'>
					<image class='location' src="../../../static/img/liangmai/icon_ditu.png" mode=""></image>
					<view class="position">{{warehouseNameAddress}}</view>
				</view>
			</view>
			<view style='justify-content: space-between;' class="flex">
				<view class="left">货名</view>
				<view class="flex" @click='showgoodsName'>
					<view>{{goodsName}}</view>
					<u-picker @confirm="goodsnameConfirm" range-key='goodsName' mode="selector"
						v-model="goodsNameshow" :range="goodsnameList"></u-picker>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="content2">
			<view v-if='!status'>
				<view  class="wrap wrap1" v-for="(item,index) in dataList.shippingInformationList" :key='index'>
					<view class="row1 row">
						<!-- -{{item.customerName}} -->
						<view class="customerName">货主-{{index+1}}</view>
						<image src="../../../static/img/sign/shanchu@2x.png" @click="reduceBtn(index)"></image>
					</view>
					<view class="row2 row">
						<view class="left">姓名</view>
						<view class="right" @click='showCustomerName(item,index)'>
							<view>{{item.shipperName}}</view>
							<u-picker @confirm="nameConfirm" range-key='customerName' mode="selector"
								v-model="item.showCustomerName" :range="nameList"></u-picker>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="row3 row">
						<view class="left">
							供应商（送粮人）
						</view>
						<view class="right">{{item.supplier}}</view>
					</view>
					<view class="row4 row" v-for="(item1,index1) in item.carNumberList" :key='index1'>
						<view class="left">
							车牌号-{{index1+1}}
						</view>
						<view class="right">
							<input v-model='item1.carNo' @click.stop="handleShowKeyboard(index,index1)":disabled="true" placeholder="输入7位车牌号" name="input"></input>
							
							<!-- <u-input v-model="item1.carNo" placeholder="输入7位车牌号" /> -->
							<view class="btn">
								<view @click="addCarNumber(item.carNumberList)" style="margin-right: 20rpx;">
									<image class='row4-img'
										src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/jia%402x.png"></image>
								</view>
								<view @click="delCarNumber(item.carNumberList,index1)">
									<image class='row4-img'
										src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/jian%402x.png"></image>
								</view>
							</view>
						</view>
				
					</view>
					
				</view>
			</view>
			<view  v-if='!status' class='add-good-people' @click='addGoodPeople'>
				<image class="img"
					src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/ic_join_dialing_norm%402x.png"
					@click="reduceBtn(index)"></image>增加货主
			</view>
		</view>
		<master-keyboard ref="keyboard" keyboardtype="car" :randomNumber="true" :newCar="false" :defaultValue="carNo" @keyboardClick="handleClick"></master-keyboard>
		<u-button class='submit' @click='submit'>提交</u-button>
		<u-modal v-model="isShowAlert" :title-style="{fontSize: '18px',fontWeight:'500'}"
			:content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='提示'
			showCancelButton='false' :content="content" @confirm="alertBtn" @cancel="cancelClick"></u-modal>
		<u-modal v-model="isShowAlert1" :title-style="{fontSize: '18px',fontWeight:'500'}"
			:content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#22C572' confirm-text='确定' title='提示'
			showCancelButton='false' :content="content1" @confirm="alertBtn" @cancel="cancelClick"></u-modal>

	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import keyboard from "@/components/master-keyboard/master-keyboard.vue";
	export default {
		components: {
			keyboard
		},
		data() {
			return {
				isShowAlert: false,
				isShowAlert1: false,
				index:0,
				index1:0,
				content: '当前登入信息验证失败，是否重新登录？',
				content1: '确定提交送粮信息？',
				// show: false,
				show1: false,
				cargoOwner: [{
					name: '123'
				}],
				nameList: [],
				carNo:'',
				warehouseNameAddress: '',
				startDate: "",
				goodsName:'',
				status:false,
				dataList: {
					warehouseName: "",
					validityDate: '',
					commonId: uni.getStorageSync("userInfo").id,
					shippingInformationList: [{
						identityId: '',
						shipperName: '',
						supplier: '无',
						carNo: '',
						showCustomerName: false,
						carNumberList: [{
							carNo: ''
						}]
					}]
				},
				goodsnameList:[],
				selectObj: {},
				goodsNameshow:false,
				nameListCopy: []
			}
		},

		onLoad(options) {
			
			let _pageToData = JSON.parse(options.itemValue)
			this.warehouseId=_pageToData.warehouseId
			this.dataList.warehouseName = _pageToData.warehouseName
			this.startDate = this.getTime()[0]
			this.dataList.validityDate = this.getTime()[1]
			this.warehouseNameAddress = _pageToData.warehousePrivate + _pageToData.warehouseCity + _pageToData
				.warehouseArea + _pageToData.detailedAddress
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		onShow() {
			this.$api.doRequest('get', '/commonUser/api/checkSession').then(res => {
				console.log("checkSession", res)
				if (res.data.data == "INVALID") {
					this.isShowAlert = true;
				}
				this.getCustomer()
			})
			this.$api.doRequest('get', '/qualityInspectionManagement/api/goodsName', {
				warehouseId: this.warehouseId
			}).then(res => {
				if (res.data.code == 200) {
					this.goodsName=res.data.data[0].goodsName
					this.goodsnameList = res.data.data
				}
			})
			console.log("hasLogin", this.hasLogin)
		},
		methods: {
			goodsnameConfirm(e){
				this.goodsName=this.goodsnameList[e[0]].goodsName
				this.getCustomer()
			},
			showgoodsName(){
				this.goodsNameshow=true
			},
			hidden(){
				this.carNo=''
				if(this.$refs.keyboard.open){
					this.$refs.keyboard.open(false)//true 键盘显示 false 键盘隐藏
				}else{
					this.$refs.keyboard[0].open(false)
				}
			},
			handleShowKeyboard(index,index1){
				if(this.dataList.shippingInformationList[this.index].carNumberList[this.index1].carNo==''){
					this.carNo=''
					
				}else{
					this.carNo=this.dataList.shippingInformationList[this.index].carNumberList[this.index1].carNo
				}
				if(this.$refs.keyboard.open){
						this.$refs.keyboard.open(false)//true 键盘显示 false 键盘隐藏
					}else{
						this.$refs.keyboard[0].open(false)
					}
				this.index=index
				this.index1=index1
				if(this.$refs.keyboard.open){
					this.$refs.keyboard.open(true)//true 键盘显示 false 键盘隐藏
				}else{
					this.$refs.keyboard[0].open(true)
				}
				
			},
			handleClick(e){
				this.carNo=e.value
				this.dataList.shippingInformationList[this.index].carNumberList[this.index1].carNo = e.value //键盘输入值
			},
			showCustomerName(value, index) {
				this.selectObj = value
				this.selectObj.index = index
				value.showCustomerName = true
			},
			getCustomer() {
				var that=this
				let _data = {
					commonId: uni.getStorageSync("userInfo").id,
					warehouseId:this.warehouseId,
					goodsName:this.goodsName
				}
				this.$api.doRequest('get', '/identityAuthenticationInfo/identityAuthenticationInfoUser', _data).then(
					res => {
						if (res.data.code == 200) {
							this.nameList = res.data.data
							if(res.data.data.length>0){
							that.status=false
								this.dataList.shippingInformationList[0].identityId = res.data.data[0].id
								this.dataList.shippingInformationList[0].shipperName = res.data.data[0].customerName
								this.dataList.shippingInformationList[0].supplier = res.data.data[0].supplier ? res.data
									.data[0].supplier : '无'
							}else{
								that.status=true
								this.$api.msg('当前客户的'+this.goodsName+'送粮量达到上限')
							}
						}
					})
			},
			getTime() {
				let _startTime = new Date().format("yyyy-MM-dd");
				var _endTime = new Date();
				_endTime.setDate(_endTime.getDate() + 3);
				_endTime = _endTime.format("yyyy-MM-dd");
				return [_startTime, _endTime]
			},
			reduceBtn(index) {
				if (this.dataList.shippingInformationList.length > 1) {
					this.dataList.shippingInformationList.splice(index, 1)
					this.$forceUpdate()
				} else {
					this.$api.msg('至少保留一位货主！')
				}
			},
			submit() {
				this.isShowAlert1 = true
			},
			nameConfirm(e) {
				console.log(e)
				this.dataList.shippingInformationList[this.selectObj["index"]].shipperName = this.nameList[e[0]]
					.customerName
				this.dataList.shippingInformationList[this.selectObj["index"]].supplier = this.nameList[e[0]].supplier
				this.dataList.shippingInformationList[this.selectObj["index"]].identityId = this.nameList[e[0]].id
				// 备份货主列表,用于删除货主操作
				this.nameListCopy = this.$u.deepClone(this.nameList);
				this.nameListCopy.splice(e[0], 1)

			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},
			alertBtn() {
				let _isCanSubmit = this.validate()
				if (_isCanSubmit) {
					// 处理车牌号数据
					for (let i = 0; i < this.dataList.shippingInformationList.length; i++) {
						let _data = this.dataList.shippingInformationList[i]
						let _index = 0
						for (let k = 0; k < _data.carNumberList.length; k++) {
							_index++
							if (_data.carNumberList.length < 1) {
								_data.carNo = _data.carNumberList[k].carNo
							} else if (k < _data.carNumberList.length - 1) {
								_data.carNo += _data.carNumberList[k].carNo + ','
							} else {
								_data.carNo += _data.carNumberList[k].carNo
							}
						}
					}
					//拷贝dataList用于提交数据
					let _dataList = this.$u.deepClone(this.dataList);
					for (let i = 0; i < _dataList.shippingInformationList.length; i++) {
						let _data = _dataList.shippingInformationList[i]
						delete _data.carNumberList
						delete _data.index
						delete _data.showCustomerName
					}
					this.$api.doRequest('post', '/grainDeliveryRegistration/api/insertInfo', _dataList).then(res => {
						if (res.data.code == 200) {
							this.$api.msg('添加成功！')
							setTimeout(function() {
								uni.navigateBack()
							}, 1000)
						} else {
							this.$api.msg('添加失败！')
						}
					})
				}
			},
			validate() {
				let _val = true
				for (let i = 0; i < this.dataList.shippingInformationList.length; i++) {
					let _data = this.dataList.shippingInformationList[i]
					for (let k = 0; k < _data.carNumberList.length; k++) {
						if (!_data.carNumberList[k].carNo) {
							this.$api.msg('车牌号不能为空！')
							return false
						} else if (_data.carNumberList[k].carNo.length != 7) {
							this.$api.msg('车牌号输入错误！')
							return false
						}
					}
				}
				return _val
			},
			cancelClick() {
				this.isShowAlert = false
				this.isShowAlert1 = false
			},
			addGoodPeople() {
				if(this.status==true){
					this.$api.msg('当前客户的'+this.goodsName+'送粮量达到上限')
					return
				}
				// 判断是否还有剩余的货主
				if (this.nameList.length != this.dataList.shippingInformationList.length) {
					this.dataList.shippingInformationList.push({
						shipperName: '',
						supplier: '无',
						carNo: '',
						showCustomerName: false,
						carNumberList: [{
							carNo: ''
						}]
					})
					this.$forceUpdate()
				} else {
					this.$api.msg('无更多认证货主！')
				}

			},
			addCarNumber(val) {
				val.push({
					carNo: ''
				})
			},
			delCarNumber(val, index) {
				if (val.length > 1) {
					val.splice(index, 1)
					this.$forceUpdate()
				} else {
					this.$api.msg('至少保留一个车牌号！')
				}
			}
		}
	}
</script>
<style lang='scss' scoped>
	page {
		background: #F5F6FA;
	}

	.wrap {
		background: #fff;
		margin: 10px;
		border-radius: 10px;
		padding: 10px;
	}

	.location {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
		position: absolute;
		left: 20rpx
	}

	.locationwrap {
		display: flex;
		align-items: center;
		position: relative;
	}

	.position {
		font-size: 24rpx;
		padding: 6rpx 16rpx 6rpx 60rpx;
		border-radius: 30rpx;
		background: #F5F6FA;
	}

	.content1 {
		background: white;
		margin: 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 20rpx;

		.row1 {
			display: flex;
			justify-content: space-between;

			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: 700;
			}

			.validityDate {
				font-size: 24rpx;
				color: #FD714F;
				position: relative;
				top: -10rpx;
			}
		}

		.row2 {
			.start-time {
				font-size: 24rpx;
				color: #878C9C;
				margin: 6rpx 0;
			}
		}
	}

	.content2 {
		.row {
			margin: 20rpx 0;
		}

		.row1 {
			display: flex;
			justify-content: space-between;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			.customerName {
				font-size: 28rpx;
				font-weight: 700;
				color: #333333;
			}
		}

		.row2,
		.row3,
		.row4 {
			display: flex;
			justify-content: space-between;

			.right {
				display: flex;
			}
		}
	}

	.row4 {
		display: flex;
		align-items: center;

		.right {
			.btn {
				display: flex;
				align-items: center;
			}
		}
	}

	.row4-img {
		width: 32rpx;
		height: 32rpx;
	}

	.add-good-people {
		border-radius: 45rpx;
		width: 96%;
		margin: 20rpx auto;
		text-align: center;
		background-color: white;
		font-size: 34rpx;
		font-weight: 500;
		color: #00C265;
		padding: 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.submit {
		position: fixed;
		bottom: 20rpx;
		background: #22C572;
		border-radius: 46px;
		font-size: 34rpx;
		font-weight: 500;
		color: #FFFFFF;
		width: 96%;
		margin-left: 2%;
	}

	.content {
		padding-bottom: 200rpx;
	}
</style>