znyc.dispatching.wx/pages/vehicle_personnels/vehicle_personnels.vue

<template>
	<view id="warp">
		<view class="top_indexList">
			<index-list
				ref="indexListRefs"
				:list="indexList"
				multi="true"
				:selectList="selectList"
				@change="changeUser"
				@clearSelectedList="clearSelectedList"
			></index-list>
		</view>
		<view class="bottom">
			<view class="bottom_top">
				<view class="bottom_top_l"> 车组人员 </view>
				<view class="bottom_top_r" @click="remove"> 清除 </view>
			</view>
			<view class="bottom_items">
				<view 
					class="bottom_item" 
					v-for="(item,index) in selectList" 
					:key="index" 
					@click="is_driver(item.userId,index)"
				>
					{{item.userName||item.employeeName}}
					<view class="personnels_sj" v-if="item.userId==driver_id"> 司机 </view>
				</view>
			</view>
			<view class="btn_css" @tap="nextHandle">确定</view>
		</view>
	</view>
</template>

<script>
	import {IndexList} from "@/components/index-list/index-list.vue";
	const {urlList,https} = require("@/static/api");
	export default {
		components: {
			IndexList,
		},
		data() {
			return {
				currentPage: 1,
				pageSize: 999,
				roleId:1001,
				indexList: [],
				selectList: [],
				detailSelectList:[],
				driver_id:'',
				
				isDispatch:false,      //是否是派工选择车组人员过来的
				vehicleId:'',		//车辆ID
				vehicleCode:'',
				
				isReplaceOrderVehicle:false,   //默认车组人员和选择的车组人员是否一致
				noClick:false,
				isChange:false,     //是否是编辑任务选择车组人员
				
			};
		},
		onLoad(options) {
			const that = this;
			console.log('车组人员options',options);
			that.isChange = options.isChange?true:false;
			if(options.isDispatch == 1){
				that.isDispatch = true;
				that.vehicleCode = options.vehicleCode;
				that.vehicleId = options.vehicleId;
			}else{
				that.isDispatch = false;
			};
			that.selectList = JSON.parse(options.selectList);
			that.detailSelectList = JSON.parse(options.selectList);
			if(that.selectList.length > 0){
				that.selectList.forEach((item2) => {
					if(item2.isDriver){
						that.driver_id = item2.userId;
					}
				});
			};
			that.getList();
		},
		methods: {
			change(data) {
				this.selectList = data;
			},
			is_driver(id,index){
				this.driver_id = id;
			},
			remove(){
				this.selectList = [];
				this.$refs.indexListRefs.clearSelectList()
			},
			changeUser(item) {
				console.log(item);
				this.selectList = item;
				if(this.selectList.length==1){
					this.selectList[0].isDriver = true;
					this.driver_id=this.selectList[0].userId;
				}

			},
			nextHandle() {
				const that = this;
				var haveDriver = false;
				this.selectList.map( item => {
					if(item.userId==this.driver_id){
						item.isDriver = true;
						haveDriver = true;
					}else{
						item.isDriver = false;
					};
				});
				if(!haveDriver){
					uni.showToast({
						title:"请选择一位司机",
						icon:'none'
					})
					return;
				}
				if(that.detailSelectList.length > 0){
					that.selectList.map(item=>{
						that.detailSelectList.forEach((val,index) => {
							if(item.userId == val.userId){
								if(item.isDriver == val.isDriver){
									that.isReplaceOrderVehicle = false;
								}else{
									that.isReplaceOrderVehicle = true;
								}
							}else{
								that.isReplaceOrderVehicle = true;
							}
						})
					})
				}else{
					that.isReplaceOrderVehicle = true;
				};
				if(that.isDispatch){// 指派
					if(!that.noClick){
						that.noClick = true;
						if(that.selectList.length == 0){
							uni.showToast({
								title:'请选择人员',
								icon:'none',
								duration:1500
							})
							return;
						};
						let orderVehicles = [];
						let selectList = that.selectList;
						let orderVehiclePerson = selectList.map(item=>{
							orderVehicles.push({
								"userId":item.userId,
								"userName": item.employeeName||item.userName,
								"userPhone": item.employeePhone||item.userPhone,
								"isDriver": item.isDriver
							})
							return item.employeeName||item.userName
						}).join(" ");
						if(that.isChange){
							var pages = getCurrentPages();
							var prevPage = pages[pages.length - 2];  //上一个页面
							prevPage.$vm._data.orderVehicles = orderVehicles;
							prevPage.$vm._data.orderVehiclePerson = orderVehiclePerson;
							prevPage.$vm._data.isReplaceOrderVehicle = that.isReplaceOrderVehicle;
							uni.navigateBack();//返回上一页面
						}else{
							let taskInfo = uni.getStorageSync('taskInfo');
							let postData = {
								"projectId":taskInfo.projectId,
								"constructionId":taskInfo.constructionId,
								"constructionName":taskInfo.constructionName,
								"projectName":taskInfo.projectName,
								"salesmanId":taskInfo.salesmanId,
								"arriveDate":taskInfo.arriveDate,
								"longitude":taskInfo.longitude,
								"latitude":taskInfo.latitude,
								"address":taskInfo.address,
								"orderContent":taskInfo.orderContent,
								"id":taskInfo.id,
								"vehicleType":taskInfo.vehicleType,
								"vehicleId": that.vehicleId,        //车辆id
								"vehicleCode":that.vehicleCode,      //车牌号
								"isOutside": false,         	//是否为外请车
								"orderVehiclePerson":orderVehiclePerson,
								"orderVehicles": orderVehicles,
								"isReplaceOrderVehicle":that.isReplaceOrderVehicle,
							};	
							https(urlList.addDisPatch,'POST',postData,'正在指派...').then(data => {
								console.log('指派任务',data)
								uni.showToast({
									title:'指派成功',
									icon:'none',
									duration:1500
								})
								setTimeout(()=>{
									that.noClick = false;
									uni.reLaunch({
										url:'/pages/taskList/taskList'
									})
								},1500)
								uni.removeStorage({
									key:'taskInfo',
									success() {
										console.log('派单缓存删除成功')
									}
								})
							}).catch(err => {
								uni.showToast({
									title:err,
									icon:'none',
									duration:1500
								})
								that.noClick = false;
							})
						}
					}
				}else{
					// console.log(that.selectList)
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2]; //上一个页面
					prevPage.$vm._data.selectList = that.selectList;
					uni.navigateBack(); //返回上一页面
				};
			},
			getList(){
				let url = urlList.getemployee + 
							"?currentPage=" + this.currentPage + 
							"&pageSize=" + this.pageSize + 
							"&status=1&roleId=" + this.roleId;
				https(url, "GET", "","").then((res) => {
					let list = res.data.employeeList.map((item) => {
						item.list.map(itemm => {
							itemm.isDriver = false;
							return itemm;
						})
						return item;
					});
					this.indexList = list;
				}).catch((err) => {
					console.log(err);
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	
	/* 隐藏滚动条 */
	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	}
	#warp {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.top_indexList {
			width: 100%;
			height: calc(100vh - 400rpx);
			.item {
				height: 50rpx;
				line-height: 50rpx;
				padding: 20rpx;
				border-bottom: 2rpx solid #C0C0C0;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				.item_1 {
					flex: 1;
					display: flex;
					.item_1_1 {
						flex: 1;
					}
		
					.item_1_2 {
						width: 200rpx;
						color: #45b1e2;
					}
				}
			}
		}

		.bottom {
			border-top: 20rpx solid #eeee;
			width: 750rpx;
			box-sizing: border-box;
			height: 380rpx;
			.bottom_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
				.bottom_top_l {
					
				}

				.bottom_top_r {
					color: #1b64f8;
				}
			}

			.bottom_items {
				height: 170rpx;
				display: block;
				width: 100%;
				box-sizing: border-box;
				padding: 5rpx 60rpx;
				.bottom_item {
					display: inline-block;
					padding: 10rpx 16rpx;
					color: #5298e6;
					position: relative;
					border: solid #5298e6 2rpx;
					border-radius: 8rpx;
					margin-top: 15rpx;
					margin-right: 15rpx;
					.personnels_sj {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
						background: #5298e6;
						font-size: 16rpx;
						padding: 4rpx;
						border-radius: 4rpx;
						color: #fff;
					}
				}
			}
			.btn_css {
				width: 700rpx;
				height: 90rpx;
				margin: 0 auto;
				margin-bottom: 10rpx;
				background-color: #1b64f8ff;
				color: white;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>