aizuda-web-vue3/src/components/scWorkflow/select.vue

<template>
	<el-dialog
		v-model="dialogVisible"
		:title="titleMap[type - 1]"
		:width="type == 1 ? 680 : 460"
		destroy-on-close
		append-to-body
		@closed="$emit('closed')"
	>
		<template v-if="type == 1">
			<div class="sc-user-select">
				<div class="sc-user-select__left">
					<div class="sc-user-select__search">
						<el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="搜索成员">
							<template #append>
								<el-button icon="el-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>
						<el-scrollbar>
							<li v-for="(item, index) in selected" :key="item.id">
								<span class="name">
									<el-avatar size="small">{{ item.username }}</el-avatar>
									<label>{{ item.username }}</label>
								</span>
								<span class="delete">
									<el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteSelected(index)"></el-button>
								</span>
							</li>
						</el-scrollbar>
					</ul>
				</div>
			</div>
		</template>

		<template v-if="type == 2">
			<div class="sc-user-select sc-user-select-role">
				<div class="sc-user-select__left">
					<div class="sc-user-select__select">
						<div v-loading="showGrouploading" class="sc-user-select__tree">
							<el-scrollbar>
								<el-tree
									ref="groupTree"
									class="menu"
									:data="role"
									:node-key="roleProps.key"
									:props="roleProps"
									show-checkbox
									check-strictly
									check-on-click-node
									:expand-on-click-node="false"
									:default-checked-keys="selectedIds"
									@check-change="roleClick"
								/>
							</el-scrollbar>
						</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>
						<el-scrollbar>
							<li v-for="(item, index) in selected" :key="item.id">
								<span class="name">
									<label>{{ item.username }}</label>
								</span>
								<span class="delete">
									<el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteSelected(index)"></el-button>
								</span>
							</li>
						</el-scrollbar>
					</ul>
				</div>
			</div>
		</template>

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

<script>
import config from '@/config/workflow'
import department from '@/api/system/department'
import user from '@/api/system/user'

export default {
	props: {
		modelValue: { type: Boolean, default: false }
	},
	data() {
		return {
			groupProps: {
				key: 'id',
				label: 'name',
				children: 'children'
			},
			userProps: {
				key: 'id',
				label: 'username'
			},
			roleProps: {
				key: 'id',
				label: 'label',
				children: 'children'
			},

			titleMap: ['人员选择', '角色选择'],
			dialogVisible: false,
			showGrouploading: false,
			showUserloading: false,
			keyword: '',
			groupId: '',
			pageSize: config.user.pageSize,
			total: 0,
			currentPage: 1,
			group: [],
			user: [],
			role: [],
			type: 1,
			selected: [],
			value: []
		}
	},
	computed: {
		selectedIds() {
			return this.selected.map(t => t.id)
		}
	},
	mounted() {},
	methods: {
		//打开赋值
		open(type, data) {
			this.type = type
			this.value = data || []
			this.selected = JSON.parse(JSON.stringify(data || []))
			this.dialogVisible = true

			if (this.type == 1) {
				this.getGroup()
				this.getUser()
			} else if (this.type == 2) {
				this.getRole()
			}
		},
		//获取组织
		async getGroup() {
			this.showGrouploading = true
			var res = await department.departmentPageApi({ page: 1, pageSize: 20 })
			this.showGrouploading = false
			var allNode = { id: '', name: '所有' }
			res.unshift(allNode)
			this.group = res
		},
		//获取用户
		async 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)
		},
		//获取角色
		async getRole() {
			this.showGrouploading = true
			var res = await config.role.apiObj.get()
			this.showGrouploading = false
			this.role = config.role.parseData(res).rows
		},
		//组织点击
		groupClick(data) {
			this.keyword = ''
			this.currentPage = 1
			this.groupId = data[config.group.props.key]
			this.getUser()
		},
		//用户点击
		userClick(data, checked) {
			if (checked) {
				this.selected.push({
					id: data[config.user.props.key],
					name: data[config.user.props.label]
				})
			} else {
				this.selected = this.selected.filter(item => item.id != data[config.user.props.key])
			}
		},
		//用户分页点击
		paginationChange() {
			this.getUser()
		},
		//用户搜索
		search() {
			this.groupId = ''
			this.$refs.groupTree.setCurrentKey(this.groupId)
			this.currentPage = 1
			this.getUser()
		},
		//删除已选
		deleteSelected(index) {
			this.selected.splice(index, 1)
			if (this.type == 1) {
				this.$refs.userTree.setCheckedKeys(this.selectedIds)
			} else if (this.type == 2) {
				this.$refs.groupTree.setCheckedKeys(this.selectedIds)
			}
		},
		//角色点击
		roleClick(data, checked) {
			if (checked) {
				this.selected.push({
					id: data[config.role.props.key],
					name: data[config.role.props.label]
				})
			} else {
				this.selected = this.selected.filter(item => item.id != data[config.role.props.key])
			}
		},
		//提交保存
		save() {
			this.value.splice(0, this.value.length)
			this.selected.map(item => {
				this.value.push(item)
			})
			this.dialogVisible = false
		}
	}
}
</script>

<style scoped>
.sc-user-select {
	display: flex;
}
.sc-user-select__left {
	width: 400px;
}
.sc-user-select__right {
	flex: 1;
}

.sc-user-select__search {
	padding-bottom: 10px;
}

.sc-user-select__select {
	display: flex;
	border: 1px solid var(--el-border-color-light);
	background: var(--el-color-white);
}
.sc-user-select__tree {
	width: 200px;
	height: 300px;
	border-right: 1px solid var(--el-border-color-light);
}
.sc-user-select__user {
	width: 200px;
	height: 300px;
	display: flex;
	flex-direction: column;
}
.sc-user-select__user__list {
	flex: 1;
	overflow: auto;
}
.sc-user-select__user footer {
	height: 36px;
	padding-top: 5px;
	border-top: 1px solid var(--el-border-color-light);
}

.sc-user-select__toicon {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 10px;
}
.sc-user-select__toicon i {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ccc;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	border-radius: 50%;
	color: #fff;
}

.sc-user-select__selected {
	height: 345px;
	width: 200px;
	border: 1px solid var(--el-border-color-light);
	background: var(--el-color-white);
}
.sc-user-select__selected header {
	height: 43px;
	line-height: 43px;
	border-bottom: 1px solid var(--el-border-color-light);
	padding: 0 15px;
	font-size: 12px;
}
.sc-user-select__selected ul {
	height: 300px;
	overflow: auto;
}
.sc-user-select__selected li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 5px 5px 15px;
	height: 38px;
}
.sc-user-select__selected li .name {
	display: flex;
	align-items: center;
}
.sc-user-select__selected li .name .el-avatar {
	background: #409eff;
	margin-right: 10px;
}
.sc-user-select__selected li .name label {
}
.sc-user-select__selected li .delete {
	display: none;
}
.sc-user-select__selected li:hover {
	background: var(--el-color-primary-light-9);
}
.sc-user-select__selected li:hover .delete {
	display: inline-block;
}

.sc-user-select-role .sc-user-select__left {
	width: 200px;
}
.sc-user-select-role .sc-user-select__tree {
	border: none;
	height: 343px;
}
.sc-user-select-role .sc-user-select__selected {
}

[data-theme='dark'] .sc-user-select__selected li:hover {
	background: rgba(0, 0, 0, 0.2);
}
[data-theme='dark'] .sc-user-select__toicon i {
	background: #383838;
}
</style>