aiot-app/components/Assign.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>
						<input type="text" disabled :value="formData.executorDeptName" @tap="openPicker"
							placeholder="请选择" />
					</view>



					<view class="col  userInp">
						<text class="label">接收人：</text>
                         <!-- multiple -->
						<zxz-uni-data-select :localdata="userList"  v-model="formData.executorId"
							@change="handleUserChange"></zxz-uni-data-select>
					</view>

				

					<view class="col userInp">
						<text class="label">转派原因：</text>
						<textarea v-model="formData.reassignExplain" cols="20" rows="5"></textarea>
					</view>
				</view>
			</view>
		</u-popup>
		<ba-tree-picker ref="treePicker" :multiple="false" @select-change="confirm" title="选择部门" :localdata="listData"
			valueKey="code" textKey="name" childrenKey="children" />
	</view>
</template>

<script>
	import {
		post,
		get,
		postJ
	} from '@/utils/api.js'
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	export default {
		components: {
			baTreePicker
		},
		data() {
			return {
				popShow: false,
				deptPickerShow: false,
				listData: [],
				userList: [],
				formData: {
					executorDeptName: '',
					executorName: '',
					executorId: '',
					reassignExplain: '',
					workOrderId: ''
				},

				selectList: [],
				newArr: []

			}
		},
		created() {
			this.getDept()
		},
		methods: {
			//工单id
			open(id) {
				this.formData.workOrderId = +id
				this.popShow = true
			},
			openPicker() {
				this.$refs.treePicker._show()
				// this.deptPickerShow = true
				// console.log(1111);
			},

			deWeight(arr4) {
				var obj = {};
				arr4 = arr4.reduce(function(a, b) {
					obj[b.userId] ? '' : obj[b.userId] = true && a.push(b);
					return a;
				}, [])
				return arr4;
			},
			handleUserChange(obj) {
	
               this.formData.executorName = obj.text



				// const obj = this.userList.find(i => i.value === id)
				// this.formData.executorName = (obj && obj.text) || ''
			},
			close() {
				this.formData = {
					executorDeptName: '',
					executorName: '',
					executorId: '',
					reassignExplain: '',
					workOrderId: ''
				}
				this.popShow = false
			},
	
			submit() {
			
				if (!this.formData.executorId) {
					uni.showToast({
						icon: 'error',
						title: '请选择接收人'
					})
					return
				}
				if (!this.formData.reassignExplain) {
					uni.showToast({
						icon: 'error',
						title: '请输入转派原因'
					})
					return
				}

				let param = {
					executorDeptName: this.formData.executorDeptName,
					executorName:  this.formData.executorName,
					executorId: this.formData.executorId,
					reassignExplain: this.formData.reassignExplain,
					workOrderId: this.formData.workOrderId,
				}

			

				postJ(this.apiUrl + '/workOrder/anewSendOrders', [param]).then(res => {
					if (res?.success) {
						this.close()
						const _this = this
						uni.showModal({
							title: `此工单已转派成功`,
							content: '',
							confirmText: '确认',
							showCancel: false, // 是否显示取消按钮，默认为 true
							success: function(res) {
								if (res.confirm) {
									_this.$emit('success', _this.formData)
								}
							}
						})
						// uni.showToast({
						//   icon: 'success',
						//   title: '转派成功！',
						//   mask: true
						// })
						// setTimeout(() => {
						// }, 1500)
					}
				})
			},
			confirm(data, name) {
				this.formData.executorDeptName = name
				this.formData.executorDeptCode = data[0]

				this.formData.executorName = ''
				this.formData.executorId = ''
				this.getUser(data[0])
			},
			getDept() {
				get(this.apiUrl + '/main/org/dept/effectiveTree').then(res => {
					if (res?.success) {
						this.listData = res.data
					}
				})
			},
			getUser(deptCode) {
				post(this.apiUrl + '/main/user/list', {
					deptCode,
					page: 1,
					size: 9999
				}).then(res => {
					if (res?.success) {
						this.userList = res.data.items.map(item => {
							item.text = item.trueName
							item.value = item.userId
							return item
						})
					}
				})
			}
		}
	}
</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;

			// .btn-box {
			//   position: absolute;
			//   top: 50%;
			//   right: 10rpx;
			//   transform: translateY(-50%);
			// }
			.btn {
				width: 80rpx;
				height: 32rpx;
				display: inline-block;
				font-size: 32rpx;
				border: 1px solid #fff;
				text-align: center;
				line-height: 30rpx;
			}
		}

		.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 {
					flex: 1;
					border: 1rpx solid #e5e5e5;
					height: 66rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					padding: 8rpx 16rpx;
					box-sizing: border-box;
					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>