aiot-app/pages/dispatchManage/taskWork/transfer.vue

<template>
	<view class="assign-container">
		<u-popup :show="popShow" @close="close">
			<view class="select-container">
				<view class="title">
					<text class="btn cancel" @tap="close">取消</text>
					工单转派
					<text class="btn confirm" @tap="submit">确定</text>
				</view>
				<view class="select-wrapper">
					<view class="col deptInp">
						<text class="label">车辆：</text>
						<zxz-uni-data-select :localdata="carList" v-model="formData.trakId" @change="handleCarChange"
							filterable></zxz-uni-data-select>
					</view>

					<view class="col userInp">
						<text class="label">司机：</text>
						<!-- multiple -->
						<zxz-uni-data-select :localdata="driverList" v-model="formData.driverId"
							@change="handleDriverChange" filterable></zxz-uni-data-select>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		carListAPI,
		driverListAPI,
		logistictraklistnoteUpdateAPI
	} from '@/api/pda/dispatchManage/index.js'
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	export default {
		components: {
			baTreePicker
		},
		data() {
			return {
				popShow: false,
				carList: [],
				driverList: [],
				currentRow: {},
				formData: {
					trakId: '',
					trakNumber: '',
					driverId: '',
					driverName: "",
					phone: "",
				},


			}
		},
		created() {

		},
		methods: {
			//工单id
			open(currentRow) {
				this.currentRow = currentRow
				this.popShow = true
				this.getInit()
			},
			openPicker() {
				this.$refs.treePicker._show()
				// this.deptPickerShow = true
				// console.log(1111);
			},


			handleUserChange(obj) {
				this.formData.executorName = obj.text
			},
			close() {
				this.formData = {
					id: '',
					trakId: '',
					trakNumber: '',
					driverId: '',
					driverName: "",
					phone: "",
				}
				this.popShow = false
			},

			submit() {
				if (!this.formData.driverId) {
					uni.showToast({
						icon: 'error',
						title: '请选择司机'
					})
					return
				}
				let params = {
					...this.currentRow,
					...this.formData
				}
				logistictraklistnoteUpdateAPI(params).then(() => {
					this.close()
					const _this = this
					uni.showModal({
						title: `此工单已转派成功`,
						content: '',
						confirmText: '确认',
						showCancel: false, // 是否显示取消按钮，默认为 true
						success: function(res) {
							if (res.confirm) {
								_this.$emit('success')
							}
						}
					})
				})

			},
			getInit() {
				carListAPI().then(data => {
					this.carList = data.map(item => {
						item.text = item.trakNumber
						item.value = item.id
						return item
					})
				})
				driverListAPI().then(data => {
					this.driverList = data.map(item => {
						item.text = item.driverName
						item.value = item.driverId
						return item
					})
				})

			},
			handleCarChange() {
				let find = this.carList.find(item => item.id == this.formData.trakId)
				this.formData.driverId = find.defaultDriverId
				this.formData.driverName = find.defaultDriver
				this.formData.phone = find.phone
				this.formData.trakNumber = find.trakNumber
			},
			handleDriverChange() {
				let find = this.driverList.find(item => item.driverId == this.formData.driverId)
				console.log(find)
				this.formData.driverName = find.driverName
				this.formData.phone = find.phone
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-container {
		min-height: 60vh;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background-color: $j-primary-border-green;
			font-weight: bold;
			position: relative;
			font-size: 32rpx;
			color: #fff;
			padding: 0 30rpx;
			box-sizing: border-box;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 120rpx;
				height: 56rpx;
				font-size: 28rpx;
				border: 1px solid #fff;
				text-align: center;
				line-height: 56rpx;
				border-radius: 8rpx;
				transition: opacity 0.3s;
				cursor: pointer;

				&:active {
					opacity: 0.7;
				}

				&.cancel {
					background-color: transparent;
					color: #fff;
				}

				&.confirm {
					background-color: rgba(255, 255, 255, 0.2);
					color: #fff;
				}
			}
		}

		.select-wrapper {
			.col {
				display: flex;
				// min-height: 0rpx;
				margin-top: 22rpx;
				align-items: center;
				padding-right: 14rpx;

				.label {
					display: inline-block;
					width: 200rpx;
					text-align: right;
				}

				.input_text {
					flex: 1;
					height: 66rpx;
					line-height: 66rpx;
					padding: 0rpx 16rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					border: 1px solid #eceeec;
					border-radius: 8rpx;
				}

				input {
					flex: 1;
					border: 1rpx solid #e5e5e5;
					height: 66rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					padding: 0rpx 16rpx;
					color: #6a6a6a;
				}

				textarea {
					border: 1rpx solid #e5e5e5;
					flex: 1;
					height: 100rpx;
				}

				.tab_box {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					width: 520rpx;

					.tab {
						display: flex;
						flex-direction: row;

						border: 2rpx solid #d9ecff;
						background-color: #f4f4f5;
						border-color: #e9e9eb;
						color: #909399;
						margin-left: 8rpx;
						margin-bottom: 8rpx;
						padding: 2rpx 8rpx;
						font-size: 28rpx;
					}

					.icon {
						margin-left: 6rpx;
					}
				}
			}
		}
	}
</style>