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

<template>
	<view class="enterprise-list">
		<view class="list-wrap">
			<u-sticky bgColor="#fff" class="main-sticky">
				<view class="search-wrap">
					<view class="input-wrap">
						<u-search bgColor='#fff' :showAction='false' :placeholder="$t('base.common.inputPlaceholder')"
							@search="searchList" @clear='searchList' v-model="keyword">
						</u-search>
						<view class="sx-btn" @click="searchList">{{ $t("customer_meter.search") }}</view>
					</view>
				</view>
			</u-sticky>
			<template v-if="driverList.length">
				<view class="business-card" v-for="(item, index) in driverList" :key="index">
					<view class="business-card-info" @click="onChangeVehicle(item)">
						<span class="tag-angle" v-if="item.isSelect==1">{{$t("mine.selected")}}</span>
						<view class="info-line" v-if="item.vehicleType != 1">
							<text class="lebel">{{ item.driver }} {{ item.vehicle || '' }}</text>
						</view>
						<view class="info-line" v-if="item.vehicleType == 1">
							<text class="lebel">{{ item.vehicle }} {{ item.driver || '' }}</text>
							<text class="info">{{ $t("driver.fleet") }} {{ item.fleetName || '' }}</text>
						</view>
					</view>
				</view>
				<view class="submit-button">
					<button class="bind-btn" @click="onSubmitClick()">{{ $t('base.common.submit') }}
					</button>
				</view>
			</template>
			<template v-else>
				<u-empty mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</template>
		</view>
		<uni-fab v-if="!isAdjust||isAdjust=='1'&&vehicleType!='101'" ref="fab" buttonColor="#3c9cff" @trigger="trigger"
			@fabClick="onClickRight" />
	</view>
</template>

<script>
	import {
		getDealerVehicleList,
	} from '../../api/dealer'
	import {
		updatePlanVehicle
	} from '../../api/order'
	export default {
		data() {
			return {
				driverList: [],
				selectDriverList: [],
				keyword: '',
				status: undefined,
				vehicles: "",
				isAdjust: "",
				orderId: "",
				vehicleType: '',
				tenantId: '',
				phones: "",
			}
		},
		onShow() {
			this.bindDriver();
		},
		onLoad(option) {
			this.vehicles = option.vehicles;
			this.phones = option.phones
			this.vehicleType = option.vehicleType;
			console.log("多选择车号的当前参数信息、", option);
			if (this.vehicles) {
				let phoneMap = {};
				if(this.phones){
					let pairs = this.phones.split(",");
					for (let pair of pairs) {
						let keyValue = pair.split(":");
						if (keyValue.length == 2) { // 确保键和值都存在
							phoneMap[keyValue[0]] = keyValue[1];
						} else if (keyValue.length == 1) { // 只有键没有值
							phoneMap[keyValue[0]] = "";
						}
					}
				}
				console.log(phoneMap)
				this.vehicles.split(',').forEach(vehicle => {
					this.selectDriverList.push({
						vehicle: vehicle,
						isSelect: 1,
						phone: vehicle+":"+phoneMap[vehicle]
					})
				})
			}
			this.tenantId = option.tenantId;
			this.isAdjust = option.isAdjust;
			this.orderId = option.orderId;
			this.bindDriver()
			this.status = option.status;
		},
		methods: {
			onSubmitClick() {
				console.log("this.isAdjust",)
				if (this.isAdjust == "1") {
					uni.navigateBack({
						url: '/subpages/order/dealerList'
					})
				} else {
					let selectedList = this.selectDriverList.map(item => {
						return item.vehicle
					})
					let phoneList = this.selectDriverList.map(item => {
						return item.phone
					})
					let axleList = this.selectDriverList.map(item =>{
						return item.axle
					})
					this.selectDriverList = []
					if (selectedList && selectedList.length > 0) {
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2]; //上一个页面
						if (this.status == 1) {
							prevPage.$vm.orderForm.batchOrderList[prevPage.$vm.index].vehicle = selectedList.join(
								','); //重点$vm
							prevPage.$vm.orderForm.batchOrderList[prevPage.$vm.index].phone = phoneList.join(','); //重点$vm
							prevPage.$vm.orderForm.batchOrderList[prevPage.$vm.index].axle = axleList.join(','); //重点$vm
						} else {
							prevPage.$vm.orderForm.vehicle = selectedList.join(','); //重点$vm
							prevPage.$vm.orderForm.phone = phoneList.join(','); //重点$vm
							prevPage.$vm.orderForm.axle = axleList.join(','); //重点$vm
						}
						uni.navigateBack();
					}
				}
			},
			onChangeVehicle(vehicleInfo) {
				if (this.isAdjust == "1") {
					let json = {
						orderId: this.orderId,
						vehicle: vehicleInfo.vehicle,
						deleteFlag: vehicleInfo.isSelect,
						tenantId: this.tenantId,
					};
					uni.showLoading({
						mask: true
					});
					updatePlanVehicle(json).then(res => {
						if (res.statusCode == 200 && res.data.code == 0) {
							this.selectVehicle(vehicleInfo)
						}
						uni.hideLoading()
					})
				} else {
					this.selectVehicle(vehicleInfo)
				}
				console.log("选择的司机信息、", this.selectDriverList);
			},

			selectVehicle(vehicleInfo) {
				let index = this.driverList.findIndex(function(item) {
					return vehicleInfo.vehicle === item.vehicle;
				});
				let selectedIndex = this.selectDriverList.findIndex(function(item) {
					return vehicleInfo.vehicle === item.vehicle;
				});
				let isSelect = 0
				if (vehicleInfo.isSelect != 1) {
					isSelect = 1
				} else {
					isSelect = 0
				}
				if (index > -1) {
					if (selectedIndex > -1) {
						this.selectDriverList.splice(selectedIndex, 1)
					} else {
						let phone = vehicleInfo.phone?vehicleInfo.phone:""
						let axle = vehicleInfo.axle?vehicleInfo.axle:""
						this.selectDriverList.push({
							vehicle: vehicleInfo.vehicle,
							isSelect: 1,
							phone: vehicleInfo.vehicle + ":" + phone,
							axle:vehicleInfo.vehicle+ ":" + axle
						})
					}
					this.driverList[index].isSelect = isSelect
				}
			},

			//获取车辆选项列表
			bindDriver() {
				let that = this;
				let json = {
					vehicleType: "0",
					keyword: this.keyword,
					appUserType: 3
				};
				getDealerVehicleList(json).then(res => {
					if (res.statusCode == 200) {
						that.driverList = res.data.data
						that.driverList.forEach(item => {
							let selectedIndex = this.selectDriverList.findIndex(function(driverInfo) {
								return driverInfo.vehicle === item.vehicle;
							});
							let isSelect = 0
							if (selectedIndex > -1) {
								isSelect = this.selectDriverList[selectedIndex].isSelect
							}
							this.$set(item, "isSelect", isSelect);
						});
						console.log("获取到司机列表", that.driverList);
					}
				})
			},
			//搜索列表
			searchList() {
				this.bindDriver()
			},
			//跳转添加司机表单
			onClickRight() {
				uni.navigateTo({
					url: '/subpages/driver/dealerAddVehicle?vehicleType=0'
				})
			}
		},

	}
</script>
<style>
	/* #ifndef H5 */
	page {
		/* height: 100%; */
		background-color: #f2f2f2;
	}

	/* #endif */
</style>
<style lang="scss" scoped>
	@import '../../common/css/public.scss';

	.submit-button {
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 24rpx 24rpx 32rpx;
		z-index: 50;
		background: #fff;
	}

	.list-wrap {
		padding-bottom: 186rpx;
	}
</style>