aiot-app/pages/pcs/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 userInp">
						<text class="label">类型：</text>
						<!-- multiple -->
						<zxz-uni-data-select :localdata="[{text:'执行人',value:'0'},{text:'班组',value:'1'}]"
							v-model="Usertype" @change="changeUserType"></zxz-uni-data-select>
					</view>
					<!-- fromValue  Transfer  -->
					<view class="col deptInp" v-if="Usertype=='0'">
						<text class="label">部门：</text>
						<!-- <input type="text" disabled :value="formData.executorDeptName" placeholder="请选择" /> -->
						<text class="input_text"
							@click="openPicker">{{ formData.executorDeptName ? formData.executorDeptName : '请选择' }}</text>
					</view>

					<view class="col userInp" v-if="Usertype=='0'">
						<text class="label">接收人：</text>
						<!-- multiple -->
						<zxz-uni-data-select :localdata="userList" v-model="formData.executorId"
							@change="handleUserChange" :multiple="true"></zxz-uni-data-select>
					</view>
					<view class="col userInp" v-if="Usertype=='1'">
						<text class="label">班组：</text>
						<!-- multiple -->
						<zxz-uni-data-select :localdata="teamAllList" v-model="formData.teamId"
							@change="handleTeamId"></zxz-uni-data-select>
					</view>

				</view>
			</view>
		</u-popup>
		<ba-tree-picker ref="treePicker" :multiple="false" @select-change="confirm" title="选择部门" :localdata="listData"
			valueKey="id" textKey="name" childrenKey="children" />
	</view>
</template>

<script>
	import {
		listOrganizations,
		getUserPage,

	} from '@/api/myTicket/index.js'
	import {
		getTeamPage
	} from '@/api/pda/workOrderHandover.js'
	import {
		recordrulesplanReManualDispatchOrder,
	} from "@/api/recordRules/index";
	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: '',
					teamId: ''
				},

				selectList: [],
				teamAllList: [],
				Usertype: '0',
			}
		},
		created() {
			this.getDept()
			this.getAllTeamList()
		},
		methods: {
			async getAllTeamList() {
				const {
					list
				} = await getTeamPage({
					pageNum: 1,
					size: -1
				});
				this.teamAllList = list.map(item => {
					item.text = item.name
					item.value = item.id
					return item
				});
			},
			//工单id
			open(row) {
				this.formData.workOrderId = row.id
				this.popShow = true
			},
			openPicker() {
				this.$refs.treePicker._show()
			},
			changeUserType() {
				this.formData.executorId = ''
				this.executeUsers = []
			},

			handleUserChange(obj) {
				this.executeUsers = obj

			},
			close() {
				this.formData = {
					executorDeptName: '',
					executorId: '',
					teamId: '',
					workOrderId: ''
				}
				this.executeUsers = []
				this.popShow = false
			},
			handleTeamId(data) {
				this.formData.teamId = data.id
				this.formData.teamName = data.name


			},

			submit() {


				if (this.Usertype == '0' && this.formData.executorId.length == 0) {
					uni.showToast({
						icon: 'error',
						title: '请选择转派人员'
					})
					return
				}

				if (this.Usertype == '1' && !this.formData.teamId) {
					uni.showToast({
						icon: 'error',
						title: '请选择班组'
					})
					return
				}

				let executeUsers = null;


				if (this.Usertype == '0') {
					executeUsers = this.executeUsers.map((i) => {
						return {
							groupId: i.groupId,
							groupName: i.groupName,
							userId: i.id,
							userName: i.name
						};
					});
				}
				this.btnLoading = true;
				let params = {
					executeUsers,
					teamName: this.formData.teamName,
					teamId: this.formData.teamId,
					id: this.formData.workOrderId,
					type: this.Usertype
				};
				// 0个人 1班组

				if (this.Usertype == 1) {
					params = {
						executeUsers: [],
						teamName: this.formData.teamName,
						teamId: this.formData.teamId,
						id: this.formData.workOrderId,
						type: this.Usertype
					};
				} else {
					params = {
						executeUsers,
						teamName: '',
						teamId: '',
						id: this.formData.workOrderId,
						type: this.Usertype
					};
				}

				// if (this.Usertype == 1) {
				recordrulesplanReManualDispatchOrder(params).then(() => {
					this.$emit("refresh");
					this.close()
				})
			},
			confirm(data, name) {
				console.log(data)
				console.log(name)
				this.formData.executorDeptName = name
				this.formData.executorDeptCode = data[0]

				this.formData.executorName = ''
				this.formData.executorId = ''
				this.getUser(data[0])
			},
			getDept() {
				listOrganizations(1).then(data => {

					this.listData = data
				})

			},
			getUser(deptCode) {
				getUserPage({
					pageNum: 1,
					size: -1,
					groupId: deptCode
				}).then(data => {
					this.userList = data.list.map(item => {
						item.text = item.name
						item.value = item.id
						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;
			padding: 0 20rpx;
			position: relative;
			font-size: 32rpx;
			color: #fff;

			.btn {
				padding: 10rpx 20rpx;

				display: inline-block;
				font-size: 32rpx;
				border: 1px solid #fff;
				text-align: center;
				line-height: 30rpx;
				margin: 0;
			}
		}

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