count-pass-app/subpages/order/batchVehicleAdd.vue

<template>
	<view class="order">
		<view class="example">
			<u-form labelPosition="left" :model="orderForm" :rules="rules" ref="form1" labelWidth='90'>
				<!-- 下单日期 -->
				<u-form-item :label="$t('order.orderDate')" borderBottom prop="setDate">
					<!-- <u-input readonly v-model="orderForm.setDate" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.orderDate')" /> -->
						<span>{{orderForm.setDate}}</span>
				</u-form-item>

				<!-- 有效日期 -->
				<u-form-item v-show="orderForm.orderType !== '1'" :label="$t('order.endDate')" borderBottom prop="orderValidDate"
					@click="showEndDateCalendar = true">
					<!-- <u-input readonly v-model="orderForm.orderValidDate" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.endDate')" /> -->
						<span>{{orderForm.orderValidDate}}</span>
				</u-form-item>


				<!-- 选择企业 -->
				<u-form-item :label="$t('order.enterprise')" borderBottom prop="tenantId"
					@click="showPopup('popupTenantId')">
					<!-- <u-input readonly v-model="orderForm.tenantName" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.enterprise')" /> -->
						<span>{{orderForm.tenantName}}</span>
				</u-form-item>


				<!-- 临时/固定 -->
				<u-form-item :label="$t('order.orderType')" borderBottom prop="orderType"
					@click="showPopup('popupOrderType')">
					<!-- <u-input readonly v-model="orderForm.orderTypeName" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.orderType')" /> -->
						<span>{{orderForm.orderTypeName}}</span>
				</u-form-item>


				<!-- 业务类型 -->
				<!-- 				<u-form-item :label="$t('order.vehicleType')" borderBottom prop="vehicleType"
					@click="showPopup('popupVehicleType')">
					<u-input readonly v-model="orderForm.vehicleTypeName" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.vehicleType')" />
				</u-form-item> -->


				<u-form-item :label="$t('order.vehicleType')" borderBottom prop="vehicleType">
					<!-- <u-radio-group v-model="orderForm.vehicleType" @change="onVehicleTypeConfirm" placement="row"
						class="p-input">
						<u-radio :customStyle="{marginRight: '10px'}" v-for="item in vehicleTypeOption"
							:key="item.value" :label="item.text" :name="item.value">
						</u-radio>
					</u-radio-group> -->
					<view class="uni-list">
								<radio-group v-model="orderForm.vehicleType" @change="onVehicleTypeConfirm" placement="row">
									<label class="uni-list-cell uni-list-cell-pd" v-for="item in vehicleTypeOption" :key="item.value" >
										<view>
											<radio style="transform:scale(0.8)" :value="item.value" :checked="item.value === orderForm.vehicleType"/>{{item.text}}
										</view>
									</label>
								</radio-group>
					</view>
				</u-form-item>

				<template>
					<u-form-item :label="$t('order.companyName')" borderBottom prop="companyId"
						@click="showPopup('popupCompanyId')">
						<span>{{orderForm.companyName}}</span>
						<view v-if="paymentOption && paymentOption.isShow=='1'" style="color: darkgreen;font-size: 9pt;">
									{{paymentOption.total}}
								</view>
						<!-- <u-input readonly v-model="orderForm.companyName" border="none"
							:placeholder="$t('base.common.placeholderS')+$t('order.companyName')">
							<template slot="suffix">
								<view v-if="paymentOption && paymentOption.isShow=='1'" style="color: darkgreen;font-size: 9pt;">
									{{paymentOption.total}}
								</view>
							</template>

						</u-input> -->
					</u-form-item>
					<view v-if="paymentOption && paymentOption.isShow=='1' && paymentOption.agentResponsible=='1'"
						style="display: flex;flex-direction: row-reverse;">
						<view style="color: red;font-size: 9pt;">{{$t('order.source')}}:{{paymentOption.companyName}}
						</view>
					</view>
					
				</template>
					<u-form-item :label="$t('order.materialName')" borderBottom prop="materialId"
					@click="selectMater">
						<span>{{orderForm.materialName}}</span>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				<!-- 订单数量 -->
				<u-form-item :label="$t('order.planNumber')" borderBottom prop="planNumber">
					<u--input v-model="orderForm.orderNumber" border="none" type='digit'
						:placeholder="$t('base.common.placeholderI')+$t('order.planNumber')"></u--input>
				</u-form-item>
				<u-form-item v-if="orderForm.orderType != '4'" u-form-item :label="$t('order.vehicle')" borderBottom
					prop="vehicle" @click="toSelectVehicle">
					<!-- <u--input readonly v-model="orderForm.vehicle" border="none"
						:placeholder="$t('base.common.placeholderS')+$t('order.vehicle')"></u--input> -->
						<span>{{orderForm.vehicle}}</span>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
					<u-form-item :label="$t('order.remarks')" borderBottom prop="remarks">
					<u-input v-model="orderForm.remark" border="none"
						:placeholder="$t('base.common.placeholderI')+$t('order.remarks')" />
				</u-form-item>
			</u-form>
			<view style="margin: 16px 0;">
				<button class="bind-btn" @click="submit('form1')">{{$t('base.common.submit')}}
				</button>
			</view>
		</view>
		<u-toast ref="loadingToast"></u-toast>
		<CarKeyboard :show.sync="carKeyboardShow" :vehicleNo="orderForm.vehicle" @confirm="onKeyBoardConfirm"
			vehicleType="car"></CarKeyboard>
		<!-- 下单日期 -->
		<u-calendar color="#4680F9" round='25' :show="showSetDateCalendar" @confirm="onSetDateConfirm"
			@close="showSetDateCalendar=false"></u-calendar>
		<!-- 有效日期 -->

		<u-datetime-picker :show="showEndDateCalendar" v-model="defaultEndDate" :defaultDate="defaultEndDate"
			mode="datetime" @confirm="onEndDateConfirm" @cancel="showEndDateCalendar=false" />
		<!-- <u-calendar color="#4680F9" :defaultDate="defaultEndDate" :show="showEndDateCalendar"
			@confirm="onEndDateConfirm" @close="showEndDateCalendar=false" /> -->
		<!-- 临时或固定 -->
		<PopupSelect ref="popupOrderType" :option="orderTypeOption" @onConfirm="onOrderTypeConfirm" />
		<!-- 业务类型 -->
		<!-- 	<PopupSelect ref="popupVehicleType" :option="vehicleTypeOption" @onConfirm="onVehicleTypeConfirm" /> -->
		<!-- 客户 -->
		<PopupSelect ref="popupCompanyId" :hasSearch='false' :option="companyOption" @onConfirm="onCompanyConfirm" />
		<!-- 原料 -->
		<PopupSelect ref="popupmaterialId" kind="m" :hasSearch='false' :option="materialOption"
			@onConfirm="onProductConfirm" />
		<!-- 企业选项 -->
		<PopupSelect ref="popupTenantId" :hasSearch='false' :option="tenantOption" @onConfirm="onTenantConfirm" />

	</view>
</template>

<script>
	import PopupSelect from '../../components/popup-select/index'
	import dayjs from 'dayjs'
	import CarKeyboard from '../../components/carKeyboard/carKeyboard'
	import {
		getTenantCacheList
	} from '../../utils/util.js'

	import {
		saveOrder,
		getOption,
		getMaterialsByCompany
	} from '../../api/order'
	export default {
		components: {
			CarKeyboard,
			PopupSelect
		},
		data() {
			return {
				carKeyboardShow: false,
				start: dayjs().format('YYYY-MM-DD'),
				orderForm: {
					setDate: dayjs().format('YYYY-MM-DD'), //订单日期
					orderValidDate: dayjs().add(30, 'day').format('YYYY-MM-DD HH:mm:ss'), //有效日期
					tenantId: '', //企业
					orderType: '1', //订单类型
					companyId: '', //客商
					materialId: "", //物料
					orderNumber: "0", //数量
					vehicle: '', //车号
					driverId: '', //司机id\
					vehicleType: '1',
					xfFlag: '',
					phone: '',
					idcard: "",
					driver: '',
					tenantName: '',
					vehicleTypeName: '', //业务类型
					companyName: "", //客商
					materialName: "", //物料id
					orderTypeName: this.$t('order.tempOrder'),
					sourceId: "", //第三方大订单ID
					remark:"",
				},
				rules: {
					orderType: [{
						required: true,
						message: this.$t('base.common.placeholderS') + this.$t('order.orderType')
					}],
					vehicleType: [{
						required: true,
						message: this.$t('base.common.placeholderS') + this.$t('order.vehicleType')
					}],
					tenantId: [{
						required: true,
						message: this.$t('base.common.placeholderS') + this.$t('order.enterprise')
					}],
					companyId: [{
						required: true,
						message: this.$t('base.common.placeholderS') + this.$t('order.companyName')
					}],
					materialId: [{
						required: true,
						message: this.$t('base.common.placeholderS') + this.$t('order.materialName')
					}],
					orderNumber: [{
						required: true,
						message: this.$t('base.common.placeholderI') + this.$t('order.planNumber')
					}]
				},
				vehicleTypeOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}, ],
				orderTypeOption: [{
						text: this.$t('order.tempOrder'),
						value: '1'
					},
				],
				paymentOption: {},
				//产品选项
				materialOption: [{
					text: this.$t('base.common.noData'),
					value: null,
				}], //物料选项
				//客户选项
				companyOption: [{
					text: this.$t('base.common.noData'),
					compvalueanyId: null
				}], //供应商选项
				// vehicleOption:[{vehicle:this.$t('base.common.noData'),value:null}], //司机选项
				tenantOption: [{
					text: this.$t('base.common.noData'),
					value: null
				}], //企业选项
				showSetDateCalendar: false,
				showEndDateCalendar: false,
				defaultEndDate: dayjs().add(30, 'day').format('YYYY-MM-DD HH:mm:ss'), //默认有效日期
				//业务对应的客户信息
				vehicleTypeCompanyList: [],
				//客户对应的物料信息
				companyMaterialList: [],
			}
		},
		onLoad(options) {
			this.bindTenant()
		},
		methods: {
			//选择品种
			selectMater(){
				uni.navigateTo({
					url: `/subpages/order/materSelect?option=${JSON.stringify(this.materialOption)}`
				})
			},
			//去选择司机
			toSelectVehicle() {
				uni.navigateTo({
					url: '/subpages/order/multipleVehicle?vehicles='+this.orderForm.vehicle+'&phones='+this.orderForm.phone
				})
			},
			//车号键盘输出
			onKeyBoardConfirm(id) {
				this.orderForm.vehicle = id
			},
			//显示车牌键盘
			carKeyboardOut() {
				this.carKeyboardShow = true
			},
			//选择订单类型后加载选项 //获取品种信息 101:销售，102：采购
			bindOption() {
				this.clear(true);
				console.log("订单租户信息、", this.orderForm.tenantId);
				if (!this.orderForm.tenantId) {
					console.log("订单业务租户信息");
					return;
				}
				var that = this;
				console.log("当前租户ID、", that.orderForm.tenantId);
				if (that.orderForm.tenantId) {
					let data = JSON.parse(JSON.stringify(that.orderForm))
					getOption(data).then(res => {
						console.log("查询基础数据返回、", res);
						if (res.statusCode === 200) {
							console.log("用户业务类型、", res.data.data.appVehicleType)
							console.log("用户客户信息、", res.data.data.appCompany)
							console.log("用户品种信息、", res.data.data.appMaterial)
							that.vehicleTypeOption = res.data.data.appVehicleType;
							if (that.vehicleTypeOption && that.vehicleTypeOption.length > 0) {
								that.orderForm.vehicleType = that.vehicleTypeOption[0].value

								that.vehicleTypeCompanyList = res.data.data.appCompany
								that.bindCompany();
								that.bindMaterial();
							}
						}
					})
				}
			},

			bindCompany() {
				var vehicleType = this.orderForm.vehicleType;
				if (vehicleType && this.vehicleTypeCompanyList) {
					this.companyOption = [{
						text: this.$t('order.notSelected'),
						value: null
					}] //物料选项
					var companyInfos = this.vehicleTypeCompanyList.filter(function(company) {
						return company.vehicleType == vehicleType;
					});

					if (companyInfos && companyInfos.length > 0) {
						companyInfos[0].companyList.forEach(item => {
							this.companyOption.push({
								text: item.companyName,
								value: item.companyId
							})
						})
						this.orderForm.companyId = this.companyOption[1].value
						this.orderForm.companyName = this.companyOption[1].text
					}
					console.log("客户信息、", this.companyOption);
				}
			},
			bindMaterial() {
				var companyId = this.orderForm.companyId;
				this.materialOption = []
				this.orderForm.materialId = ''
				this.orderForm.materialName = ''
				this.paymentOption = {}
				if (companyId) {
					getMaterialsByCompany(this.orderForm).then(res => {
						if (res.data.code == 0) {
							this.paymentOption = res.data.hardInfo
							// this.materialOption = [{
							// 	text: this.$t('order.notSelected'),
							// 	value: null
							// }] //物料选项
							var materialInfos = res.data.data;
							console.log("1111213213", materialInfos);
							if (materialInfos && materialInfos.length > 0) {
								materialInfos.forEach(item => {
									this.materialOption.push({
										text: item.name,
										value: item.id,
										type:item.materTypeName?item.materTypeName:'暂无分类',
									})
								})
								if (this.materialOption[1]&&this.materialOption.length==2) {
									this.orderForm.materialId = this.materialOption[1].value
									this.orderForm.materialName = this.materialOption[1].text
								}
							}
							console.log("品种信息、", this.materialOption);
						}
					})
				}
			},
			//
			bindTenant() {
				this.tenantOption = getTenantCacheList();
				if (this.tenantOption.length > 0) {
					this.orderForm.tenantId = this.tenantOption[0].value
					this.orderForm.tenantName = this.tenantOption[0].text
				}
				this.bindOption();
			},
			//提交订单
			submit(ref) {
				let _this = this

				console.log("提交的订单信息、", this.orderForm);
				if (this.orderForm.orderType != "4" && !this.orderForm.vehicle) {
					uni.showToast({
						title: this.$t('base.common.placeholderI') + this.$t('order.vehicle'),
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.orderForm.orderNumber || this.orderForm.orderNumber == '0') {
					uni.showToast({
						title: this.$t('base.common.placeholderI') + this.$t('order.orderNumber'),
						icon: 'none',
						duration: 2000
					})
					return;
				}

				this.$refs[ref].validate().then(() => {
					let data = JSON.parse(JSON.stringify(_this.orderForm))
					console.log("保存订单信息、", data);
					this.$refs.loadingToast.show({
						type: "loading",
						message: this.$t('base.common.loading'),
						duration: "1000000"
					})
					saveOrder(data).then(res => {
						this.$refs.loadingToast.hide()
						if (res.statusCode === 200) {
							uni.showModal({
								// title: '提示',
								content: this.$t("order.isContinueAddOrder"),
								showCancel: true,
								cancelText: this.$t("base.button.goBack"),
								confirmText: this.$t("base.button.continue"),
								success: function(res) {
									if (res.confirm) {
										_this.orderForm = {
												setDate: dayjs().format('YYYY-MM-DD'), //订单日期
												orderValidDate: dayjs().add(30, 'day').format(
													'YYYY-MM-DD HH:mm:ss'), //有效日期
												vehicleType: '101', //订单类型
												vehicleTypeName: '', //业务类型
												companyId: '', //客商
												materialId: "", //物料
												orderNumber: "0", //数量
												vehicle: '', //车号
												driverId: '', //司机id\
												orderType: '1',
												orderTypeName: this.$t('order.tempOrder'),
												phone: '',
												idcard: "",
												driver: '',
												companyName: "", //客商
												materialName: "", //物料id
											},
											console.log('用户点击确定');
									} else if (res.cancel) {
										console.log('用户点击取消');
										uni.redirectTo({
											url: '/subpages/order/dealerList?index=0'
										})
									}
								}
							})
						}
					})
				}).catch(err => {
					console.log('err', err);
					this.$refs.loadingToast.hide()
				})
			},
			formatOption(data) {
				let arr = []
				data.forEach(item => {
					arr.push({
						text: item.name || item.label,
						value: item.value || item.id
					})
				})
				if (arr.length) {
					arr.unshift({
						text: this.$t('order.notSelected'),
						value: null
					})
				} else {
					arr.unshift({
						text: this.$t('base.common.noData'),
						value: null
					})
				}
				return arr
			},
			//显示选择
			showPopup(refs) {
				this.$refs[refs].showPicker = true
			},
			//选择下单日期
			onSetDateConfirm(date) {
				this.orderForm.setDate = dayjs(date).format('YYYY-MM-DD');
				this.showSetDateCalendar = false;
			},
			//选择下单日期
			onEndDateConfirm(date) {
				this.orderForm.orderValidDate = dayjs(date.value).format('YYYY-MM-DD HH:mm:ss');
				this.showEndDateCalendar = false;
			},
			//选择订单类型
			onOrderTypeConfirm(value) {
				this.orderForm.orderType = ''
				this.orderForm.orderTypeName = ''
				if (value.value) {
					this.orderForm.orderType = value.value
					this.orderForm.orderTypeName = value.text
				}
			},
			//选择订单类型
			onVehicleTypeConfirm(value) {
				this.orderForm.vehicleType = value.detail.value
				this.clear(false)
				this.bindCompany();
				this.bindMaterial();
			},
			//选择客户
			onCompanyConfirm(value) {
				this.orderForm.companyId = ''
				this.orderForm.companyName = ''
				if (value.value) {
					this.orderForm.companyId = value.value
					this.orderForm.companyName = value.text
				}
				this.bindMaterial();
			},

			//选择原料
			onProductConfirm(value) {
				console.log("选择的物料信息、", value);
				this.orderForm.materialId = ''
				this.orderForm.materialName = ''
				if (value.value) {
					this.orderForm.materialId = value.value
					this.orderForm.materialName = value.text
				}
			},
			//选择企业
			onTenantConfirm(value) {
				this.orderForm.tenantId = ''
				this.orderForm.tenantName = ''
				if (value.value) {
					this.orderForm.tenantId = value.value
					this.orderForm.tenantName = value.text

				}
				this.bindOption();
			},

			clear(isVehicleType) {
				if (isVehicleType == true) {
					this.vehicleTypeOption = [{
						text: this.$t('base.common.noData'),
						value: null
					}]
					this.orderForm.vehicleType = ''
				}
				this.companyOption = [{
					text: this.$t('base.common.noData'),
					value: null
				}] //客户选项
				this.materialOption = [{
					text: this.$t('base.common.noData'),
					value: null
				}] //物料选项

				this.orderForm.companyId = ''
				this.orderForm.materialId = ''
				this.orderForm.companyName = ''
				this.orderForm.materialName = ''
				this.orderForm.orderNumber = '0';
				this.orderForm.driver = '';
				this.orderForm.driverId = '';
				this.orderForm.vehicle = '';

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

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