cxc-szcx-uniapp/pages/userlist/index.vue

<template>
	<view :class="['content',{'gray':store.isgray==1}]">
		<uni-data-picker @popupclosed="popclose($event)" :step-searh="false" :map="{text:'departName',value:'id'}"
			:localdata="departList" popup-title="请选择部门" placeholder="请选择部门" @nodeclick="onnodeclick">
		</uni-data-picker>
		<view class="search_box">
			<view class="username f-row aic">
				用户姓名：<input v-model="realname" type="text" placeholder="请输入姓名"
					placeholder-style="color: grey;font-size: 28rpx;">
			</view>
			<view class="username f-row aic">
				用户账号：<input v-model="username" type="text" placeholder="请输入账号"
					placeholder-style="color: grey;font-size: 28rpx;">
			</view>
			<view class="btn f-row aic jca">
				<view class="f-row aic" @click="search">
					<uni-icons type="search" size="15" color="#fff"></uni-icons>
					查询
				</view>
				<view class="f-row aic" @click="refresh">
					<uni-icons type="refreshempty" size="15" color="#fff"></uni-icons>
					重置
				</view>
			</view>
		</view>
		<view class="list">
			<view class="title f-row aic box">
				<view class="">

				</view>
				<view class="">
					序号
				</view>
				<view class="username">
					用户账号
				</view>
				<view class="">
					用户姓名
				</view>
			</view>
			<view class="item f-row aic box" v-for="item,i in userlist" :key="i">
				<view class="f-row aic img" @click="choose(item.id)">
					<image v-if="chooseArr.includes(item.id)" src="../../static/login/checked.png" mode=""></image>
					<image v-else src="../../static/login/nocheck.png" mode=""></image>
				</view>
				<view class="order">
					{{i+1}}
				</view>
				<view class="username f-col aic">
					<view class="">
						{{item.username}}
					</view>
				</view>
				<view class="realname">
					<view class="">
						{{item.realname}}
					</view>
				</view>
			</view>
		</view>
		<view class="confirm f-col aic">
			<view class="" @click="handleprocess">
				确认
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		queryMyDeptTreeListApi,
		queryUserByDepIdApi,
		taskEntrustApi,
		processCompleteApi
	} from '@/api/api.js';
	import {
		useStore
	} from '@/store';
	const store = useStore()
	const {
		proxy
	} = getCurrentInstance()
	const departList = ref([])
	/**部门列表*/
	const queryMyDeptTreeList = () => {
		queryMyDeptTreeListApi().then((res) => {
			departList.value = res.result
			currentId = res.result[0].id
			queryUserByDepId(res.result[0].id)
		}).catch((err) => {
			console.log(err);
		})
	}
	const userlist = ref([])
	/**根据部门查询人员*/
	const queryUserByDepId = (id, username, realname) => {
		queryUserByDepIdApi({
			id,
			username: username || '',
			realname: realname || ''
		}).then((res) => {
			if (res.success) {
				userlist.value = res.result
			}
		}).catch((err) => {
			console.log(err);
		})
	}
	let currentId = null
	let departArr = []
	const onnodeclick = (e) => {
		queryUserByDepId(e.id)
		currentId = e.id
		if (departArr.indexOf(e.title) != -1) {
			departArr.splice(departArr.indexOf(e.title), 1, e.title)
		} else {
			departArr.push(e.title)

		}
	}
	const popclose = (e) => {
	}
	const chooseArr = ref([])
	const choose = (id) => {
		if (isradio) { //单选
			if (chooseArr.value.indexOf(id) != -1) return
			chooseArr.value.splice(chooseArr.value.indexOf(id), 1, id)
		} else { //多选
			if (chooseArr.value.indexOf(id) != -1) {
				chooseArr.value.splice(chooseArr.value.indexOf(id), 1)
			} else {
				chooseArr.value.push(id)
			}
		}
	}
	/**0为多选，1单选*/
	let isradio = 0
	/**任务id*/
	let taskId = null
	/**nextnode*/
	let nextnode = null
	/**reason*/
	let reason = null
	onLoad((options) => {
		isradio = options.isradio
		taskId = options.id
		reason = options.reason
		if (options.nextnode) {
			nextnode = JSON.parse(options.nextnode)
		}
		queryMyDeptTreeList()

	})
	const username = ref('')
	const realname = ref('')
	const search = () => {
		if (username.value.trim() || realname.value.trim()) {
			userlist.value = []
			queryUserByDepId(currentId, username.value, realname.value)
		}
	}
	const refresh = () => {
		username.value = ''
		realname.value = ''
		userlist.value = []
		queryUserByDepId(currentId, username.value, realname.value)
	}
	/**委托*/
	const taskEntrust = () => {
		if (!chooseArr.value.length) return proxy.$toast('请选择被委托人')
		taskEntrustApi({
			taskAssignee:  userlist.value.filter(item => item.id == chooseArr.value[0])[0].username,
			taskId
		}).then((res) => {
			if (res.success) {
				proxy.$toast(res.message)
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			}
		})
	}
	const handleprocess = () => {
		if (nextnode) {
			processComplete()
		} else {
			taskEntrust()
		}
	}
	/**流程办理接口*/
	const processComplete = () => {
		processCompleteApi({
			taskId,
			reason,
			processModel: 1,
			nextnode: nextnode[0].nextnode,
			nextUserName: userlist.value.filter(item => item.id == chooseArr.value[0])[0].realname,
			nextUserId: chooseArr.value[0],
		}).then((res) => {
			proxy.$toast(res.message)
			setTimeout(() => {
				uni.navigateBack()
			}, 2000)
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 130rpx;
	}

	.confirm {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background-color: #fff;
		border-top: 1px solid #efefef;
		width: 100%;
		padding: 20rpx 0;

		view {
			width: 630rpx;
			height: 88rpx;
			background: #01508B;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.search_box {

		font-size: 28rpx;

		.username {
			padding: 0 20rpx;
			border-bottom: 1px solid #e5e5e5;
			height: 100rpx;

			input {
				flex: 1;
				height: 100%;
			}
		}

		.btn {
			color: #fff;
			padding: 20rpx 0;

			view {
				width: 178rpx;
				height: 80rpx;
				background-color: #01508B;
				border-radius: 40rpx;
				justify-content: center;
			}
		}
	}

	.list {
		word-break: break-all;
		font-size: 28rpx;
		color: #333333;

		.box {
			view:first-child {
				flex: 0.3;
			}

			view:nth-child(2) {
				flex: 0.3;
			}

			view:nth-child(3) {
				flex: 1;
			}

			view:nth-child(4) {
				flex: 1;
			}
		}

		.title {
			text-align: center;
			border-bottom: 1px solid #e5e5e5;
			background-color: #f8f8f8;
			height: 100rpx;
		}

		.item {
			text-align: center;
			border-bottom: 1px solid #e5e5e5;

			.order {
				border-right: 1px solid #e5e5e5;
				height: 100rpx;
				line-height: 100rpx;
			}

			.username {
				border-right: 1px solid #e5e5e5;
				height: 100rpx;
				justify-content: center;
				overflow-y: auto;
			}

			.realname {
				height: 100rpx;
				line-height: 100rpx;
				overflow-y: auto;
				justify-content: center;
			}

			.img {
				border-right: 1px solid #e5e5e5;
				height: 100rpx;
				justify-content: center;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>