aizuda-web-vue3/src/components/FlowUserSelect/index.vue

<template>
	<el-dialog v-model="dialogVisible" title="人员选择" :width="680" destroy-on-close append-to-body @closed="emit('closed')">
		<div class="sc-user-select">
			<div class="sc-user-select__left">
				<div class="sc-user-select__search">
					<el-input v-model="keyword" prefix-icon="Search" placeholder="搜索成员">
						<template #append>
							<el-button icon="Search" @click="search"></el-button>
						</template>
					</el-input>
				</div>
				<div class="sc-user-select__select">
					<div v-loading="showGrouploading" class="sc-user-select__tree">
						<el-scrollbar>
							<el-tree
								ref="groupTree"
								class="menu"
								:data="group"
								:node-key="groupProps.key"
								:props="groupProps"
								highlight-current
								:expand-on-click-node="false"
								:current-node-key="groupId"
								@node-click="groupClick"
							/>
						</el-scrollbar>
					</div>
					<div v-loading="showUserloading" class="sc-user-select__user">
						<div class="sc-user-select__user__list">
							<el-scrollbar ref="userScrollbar">
								<el-tree
									ref="userTree"
									class="menu"
									:data="user"
									:node-key="userProps.key"
									:props="userProps"
									:default-checked-keys="selectedIds"
									show-checkbox
									check-on-click-node
									@check-change="userClick"
								></el-tree>
							</el-scrollbar>
						</div>
						<footer>
							<el-pagination
								v-model:currentPage="currentPage"
								background
								layout="prev,next"
								small
								:total="total"
								:page-size="pageSize"
								@current-change="paginationChange"
							></el-pagination>
						</footer>
					</div>
				</div>
			</div>
			<div class="sc-user-select__toicon">
				<el-icon><arrow-right /></el-icon>
			</div>
			<div class="sc-user-select__selected">
				<header>已选 ({{ selected.length }})</header>
				<ul style="margin: 0; padding: 0">
					<el-scrollbar>
						<li v-for="(item, index) in selected" :key="item.id">
							<span class="name">
								<el-avatar size="small">{{ item.name.substring(0, 1) }}</el-avatar>
								<label>{{ item.name }}</label>
							</span>
							<span class="delete">
								<el-button type="danger" icon="Delete" circle size="small" @click="deleteSelected(index)" />
							</span>
						</li>
					</el-scrollbar>
				</ul>
			</div>
		</div>

		<template #footer>
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="save">确 认</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['closed'])

const groupTreeRef = ref()

const dialogVisible = ref(false)
const keyword = ref('')
const groupId = ref('')
const currentPage = ref(1)
const showUserloading = ref(false)

const search = () => {
	groupId.value = ''
	groupTreeRef.value.setCurrentKey(groupId.value)
	currentPage.value = 1
	getUser()
}

const  getUser = () =>{
			this.showUserloading = true
			var params = {
				data: {
					keyword: this.keyword || null,
					departmentId: this.groupId || null
				},
				page: this.currentPage,
				pageSize: this.pageSize
			}
			var res = await user.userPageApi(params)
			this.showUserloading = false
			this.user = res.records
			this.total = res.total || 0
			this.$refs.userScrollbar.setScrollTop(0)
		}
</script>

<style scoped lang="scss"></style>