aiot-app/pages/salesServiceManagement/workOrder/components/forWork/transfer.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="转派工单" @clickLeft="backAdd">
			<template slot="right">
				<u-button type="success" size="small" class="u-reset-button" @click="classification"
					text="选择部门"></u-button>
			</template>
		</uni-nav-bar>
		<view class="top-wrapper">
			<uni-section>
				<uni-easyinput prefixIcon="search" style="width: 460rpx" v-model="searchVal" placeholder="搜索名称">
				</uni-easyinput>
			</uni-section>
			<button class="search_btn" @click="getData()">搜索</button>
			<image class="menu_icon" src="~@/static/pda/menu.svg"></image>
		</view>
		<view class="wrapper">
			<u-list @scrolltolower="scrolltolower" class="listContent">
				<checkbox-group v-for="(item, index) in tableList" :key="index"
					@change="e => selectVal(e, item, index)">
					<label>
						<view class="listBox">
							<view class="listBox-sel">
								<checkbox :value="item.id" color="#fff" :checked="item.checked" />
							</view>
							<myCard :columns="columns" :item="item" :index="index+1">
							</myCard>
						</view>
					</label>
				</checkbox-group>
				<u-empty class="noDate" style="margin-top: 20vh" v-if="!tableList.length"></u-empty>
			</u-list>
		</view>
		<view class="footerButton">
			<u-button type="default" text="返回" @click="backAdd"></u-button>
			<u-button type="primary" @click="save" text="保存"></u-button>
		</view>
		<ba-tree-picker ref="treePicker" key="verify" :multiple="false" @select-change="confirm" title="选择分类"
			:selectedData="selectedData" :localdata="classificationList" valueKey="id" textKey="name"
			childrenKey="children" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import myCard from '@/pages/saleManage/components/myCard.vue'
	import {
		treeByPid
	} from '@/api/pda/workOrder.js'
	import {
		listOrganizations,
		reassignmentSalesWorkOrder
	} from '@/api/salesServiceManagement/workOrder/index.js'
	import {
		toTreeData
	} from '@/utils/utils.js'
	import {
		getUserPage
	} from '@/api/common.js'
	export default {
		components: {
			myCard,
		},
		data() {
			return {
				selectedData: [''],
				classificationList: [],
				searchVal: '',
				isEnd: false,
				pageNum: 1,
				categoryLevelId: '',
				tableList: [],
				columns: [
					[{
						label: '姓名：',
						prop: 'name',
						type: 'title',
						className: 'perce100',
					}],
					[{
						label: '工号：',
						prop: 'jobNumber'
					}],
					[{
						label: '电话：',
						prop: 'phone'
					}],
					[{
						label: '部门：',
						prop: 'groupName'
					}],
				],
				checkData: {},
				id: ''
			}
		},
		onLoad(params) {
			this.id = params.id;
		},
		created() {
			this.getTreeList();
		},
		methods: {
			getData() {
				this.isEnd = false;
				this.pageNum = 1;
				this.tableList = [];
				this.getList();
			},
			async getList() {
				if (this.isEnd) {
					return
				}
				uni.showLoading({
					title: '加载中'
				})
				try {
					let params = {
						groupId: this.categoryLevelId,
						name: this.searchVal,
						pageNum: this.pageNum,
						size: 15
					}
					let res = await getUserPage(params);
					if (this.pageNum == 1) {
						this.tableList = res.list;
					} else {
						this.tableList.push(...res.list);
					}
					this.pageNum += 1;
					this.isEnd = this.tableList.length >= res.count;
					uni.hideLoading();
				} catch (error) {
					uni.hideLoading();
				}
			},
			selectVal(e, val, index) {
				this.$set(this.tableList[index], 'checked', !this.tableList[index].checked);
				this.tableList.forEach((item, i) => {
					if (item.id != val.id) {
						this.$set(this.tableList[i], 'checked', false)
					}
				});
				this.checkData = val.checked ? val : {};
			},
			scrolltolower() {
				if (this.isEnd) {
					return;
				}
				this.getList();
			},
			//返回添加页
			backAdd() {
				uni.navigateBack();
			},
			classification() {
				this.$refs.treePicker._show();
			},
			confirm(id) {
				this.categoryLevelId = id;
				this.getData();
			},
			async getTreeList() {
				const data = await listOrganizations({});
				let treeList = toTreeData({
					data: data || [],
					idField: 'id',
					parentIdField: 'parentId'
				});
				this.classificationList = treeList;
				this.confirm('');
				// this.confirm(treeList[0].id);
			},
			async save() {
				if (!this.checkData.id) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请选择转派人员",
					})
					return;
				}
				try {
					uni.showLoading({
						title: '加载中'
					})
					let data = {
						id: this.id,
						executeGroupId: this.checkData.groupId,
						executeGroupName: this.checkData.groupName,
						executeUserId: this.checkData.id,
						executeUserName: this.checkData.name,
					}
					const res = await reassignmentSalesWorkOrder(data);
					if (!res) return;
					this.$refs.uToast.show({
						type: "success",
						message: "操作成功",
					})
					this.backAdd();
					uni.hideLoading();

				} catch (error) {
					uni.hideLoading();
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url('@/pages/salesServiceManagement/demandList/components/invoice.scss');

	.mainBox {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.wrapper {
			// flex: 1;
			height: calc(100vh - 250rpx);
			overflow: hidden;
		}

		.footerButton {
			width: 100%;
			height: 84rpx;
			display: flex;
			position: fixed;
			bottom: 0;
			z-index: 10;

			/deep/.u-button {
				height: 100%;
			}

			>view {
				flex: 1;

			}
		}

		.top-wrapper {
			background-color: #fff;
			display: flex;
			width: 750rpx;
			height: 88rpx;
			padding: 16rpx 32rpx;
			align-items: center;
			gap: 16rpx;

			/deep/.uni-section {
				margin-top: 0px;
			}

			/deep/.uni-section-header {
				padding: 0px;

			}

			.search_btn {
				width: 120rpx;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 24rpx;
				background: $theme-color;
				font-size: 32rpx;
				color: #fff;
				margin: 0;
				margin-left: 26rpx;
			}

			.menu_icon {
				width: 44rpx;
				height: 44rpx;
				margin-left: 14rpx;
			}
		}

		.card_box {
			padding: 0;
			border-bottom: none;
		}
	}
</style>