count-pass-app/pages/other/addOrder.vue

<template>
	<view class="order">
		<view class="example">
			<u-form labelPosition="left" :model="orderForm" :rules="rules" ref="form1" labelWidth='60'>

<!-- 车道，品种，客户，车号，预装数 -->
				<!-- 选择车道 -->
				<u-form-item label="车道" borderBottom prop="roadId"
					@click="showPopup('popupLane')">
					<u-input readonly v-model="orderForm.roadName" border="none"
						placeholder="请选择车道" />
				</u-form-item>
				<u-form-item label="品种" borderBottom prop="materialId" @click="showPopup('popupMater')"
					>
					<u-input readonly v-model="orderForm.materialName" border="none"
						placeholder="请选择品种"/>
						<view slot="right" @click.stop="addOpen(true)">
							<u-button
								type="primary"
								size="mini"
							>
								新增品种
							</u-button>
						</view>
				</u-form-item>
				<u-form-item label="客户" borderBottom prop="companyId" @click="showPopup('popupCompany')">
					<u-input readonly v-model="orderForm.companyName" border="none"
						placeholder="请选择客户"/>
						<view slot="right" @click.stop="addOpen(false)">
							<u-button
								
								type="primary"
								size="mini"
							>
								新增客户
							</u-button>
						</view>
				</u-form-item>
				<u-form-item label="车号" borderBottom prop="vehicle"
					@click="carKeyboardShow = true">
					<u-input readonly v-model="orderForm.vehicle" border="none"
						placeholder="请选择车号" />
				</u-form-item>
				<u-form-item label="预装数" borderBottom prop="number">
					<u-input type="number" v-model="orderForm.number" border="none"
						placeholder="请输入预装数" />
				</u-form-item>
			</u-form>
				<u-button type="primary" style="margin: 16px 0;" @click="submit('form1')">{{$t('base.common.submit')}}
				</u-button>
		</view>
		<!-- 车道选项 -->
		<PopupSelect ref="popupLane" kind="road" :hasSearch='true' :option="laneOption" @onConfirm="onConfirm" />
		<!-- 品种选项 -->
		<PopupSelect ref="popupMater" kind="material" :hasSearch='true' :option="materOption" @onConfirm="onConfirm" />
		<!-- 客户选项 -->
		<PopupSelect ref="popupCompany" kind="company" :hasSearch='true' :option="companyOption" @onConfirm="onConfirm" />
		<!-- 车号 -->
		<CarKeyboard :show.sync="carKeyboardShow" :isProvince="false" :vehicleNo="orderForm.vehicle"
			@confirm="carConfirm" vehicleType="car">
		</CarKeyboard>
		<u-modal @confirm="addConfirm" @cancel="addCancel" :show="addShow" :showCancelButton="true" :closeOnClickOverlay="true" :title="addTitle">
			<view class="add-input" slot="default">
				<u-input type="text" v-model="keyName" placeholder="请输入名称"/>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import PopupSelect from '../../components/popup-select/index'
	import CarKeyboard from '../../components/carKeyboard/carKeyboard'
	import dayjs from 'dayjs'
	import {
		getCompanyList,
		getMaterialList,
		getLaneList,
		saveCompany,
		saveMaterial,
		saveOrder
	} from '../../api/order'

	export default {
		components: {
			PopupSelect,
			CarKeyboard
		},
		data() {
			return {
				carKeyboardShow: false,
				start: dayjs().format('YYYY-MM-DD'),
				addShow: false,
				addTitle:"",
				keyName:"",
				orderForm: {
					roadId: '',
					roadName: '',
					companyId:'',
					companyName:"",
					materialId:"",
					materialName:"",
					number:"",
					vehicle:"",
				},
				rules: {
					
				},
				laneOption:[],
				companyOption:[],
				materOption:[],
			}
		},
		onLoad(options) {
			this.getCompany()
			this.getMater()
			this.getLane()
		},
		methods: {
			//显示选择
			showPopup(refs) {
				this.$refs[refs].showPicker = true
			},
			//新增
			addOpen(boo){
				this.addShow = true
				this.addType = boo
				if(boo){
					this.addTitle = "新增品种"
				}else{
					this.addTitle = "新增客户"
				}
			},
			addCancel(){
				this.addShow = false
				this.keyName = ''
			},
			//新增
			addConfirm(){
				let that = this
				if(!that.keyName){
					uni.showToast({
						title: '请输入名称',
						icon: 'none',
						mask: true
					})
					return
				}
				uni.showLoading({
					title: '保存中',
					mask:true,
				});
				if(this.addType){
					saveMaterial({name:that.keyName}).then(res=>{
						if(res.statusCode == '200'){
							uni.showToast({
								title: '保存成功',
								icon: 'none',
								mask: true
							})
							that.addShow = false
							that.keyName = ''
							that.getMater()
						}
						uni.hideLoading();
					}).finally(()=>{
							uni.hideLoading();
					});
				}else{
					saveCompany({name:that.keyName}).then(res=>{
						if(res.statusCode == '200'){
							uni.showToast({
								title: '保存成功',
								icon: 'none',
								mask: true
							})
							that.addShow = false
							that.keyName = ''
							that.getCompany()
						}
						uni.hideLoading();
					}).finally(()=>{
							uni.hideLoading();
					});
				}
			},
			//获取客户
			getCompany(){
				getCompanyList().then(res=>{
					if(res.statusCode === 200){
						this.companyOption = res.data.data.map(item=>{
							return {
								text:item.name,
								value:item.id,
								...item
							}
						})
					}
				})
			},
			//获取物料
			getMater(){
				getMaterialList().then(res=>{
					if(res.statusCode === 200){
						this.materOption = res.data.data.map(item=>{
							return {
								text:item.name,
								value:item.id,
								...item
							}
						})
					}
				})
			},
			//获取车道
			getLane(){
				getLaneList().then(res=>{
					if(res.statusCode === 200){
						this.laneOption = res.data.data.map(item=>{
							return {
								text:item.roadName,
								value:item.id,
								...item
							}
						})
					}
				})
			},
			onConfirm(value,kind){
				this.orderForm[kind+'Id'] = ''
				this.orderForm[kind+'Name'] = ''
				if(value.value){
					this.orderForm[kind+'Id'] = value.value
					this.orderForm[kind+'Name'] = value.text
				}
			},
			carConfirm(id){
				this.orderForm.vehicle = id
			},
			submit(){
				let _this = this
				// this.$refs.form1.validate().then(() => {
					let data = JSON.parse(JSON.stringify(_this.orderForm))
					uni.showLoading({
						title: '保存中',
						mask:true,
					});
					saveOrder(data).then(res => {
						if (res.statusCode === 200) {
							uni.showModal({
								// title: '提示',
								content: "任务保存成功,是否继续添加任务",
								showCancel: true,
								cancelText: "返回上一页",
								confirmText: "继续添加",
								success: function(res) {
									if (res.confirm) {
										_this.orderForm = {
												roadId: '',
												roadName: '',
												companyId:'',
												companyName:"",
												materialId:"",
												materialName:"",
												number:"",
												vehicle:"",
											},
											console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
										uni.redirectTo({
											url: '/pages/home/home'
										})
									}
								}
							})
						}
						uni.hideLoading();
					}).finally(()=>{
							uni.hideLoading();
					});
				// })
			},
		}
	}
</script>

<style lang="less" scoped>
	.order {
		padding: 32rpx;

		.picker-title {
			display: flex;
			padding: 0 32rpx;
			line-height: 84rpx;
			justify-content: space-between;

			.confirm {
				color: #4680F9;
			}
		}

		.picker-wrap {
			height: 440rpx;

			.picker-view {
				height: 100%;

				.item {
					display: flex;
					justify-content: space-between;
					height: 88rpx;
					line-height: 88rpx;
					padding: 0 32rpx;

					.text {
						width: 33%;
					}

					.text1 {
						width: 33%;
						text-align: center;
					}

					.text2 {
						width: 33%;
						text-align: right;
					}
				}

				.btn-item {
					display: flex;
					justify-content: center;
					height: 88rpx;
					line-height: 88rpx;
					padding: 0 32rpx;
					align-items: center;

					.add-vehicle {
						line-height: 64rpx;
						height: 64rpx;
						background: #4680F9;
						width: 25%;
						font-size: 28rpx;
					}
				}
			}
		}

		.form-wrap {
			height: 444rpx;
			padding: 0 32rpx;
		}
	}
	.add-input{
		width: 100%;
	}

	// button {
	// 	// background:linear-gradient(to right,#4680F9 0%,#00e2fa 80%,#00e2fa 100%);
	// 	background: #4680F9;
	// 	line-height: 100rpx;
	// 	color: #fff;
	// 	border: none;
	// }

	uni-button:after {
		border: none;
	}

	uni-input {
		height: 72rpx;
		padding: 0 10rpx 0 20rpx;
	}

	.uni-forms-item__inner {
		padding: 20rpx 0;
	}

	// /deep/ .u-button--primary {
	// 	background-color: #4680F9;
	// 	border-color: #4680F9;
	// }
</style>