ShutongInterconnectedChemicalCloudPlatform/src/views/hr/orgUserRole/rolePage.vue

<!--
@ 作者: 秦东
@ 时间: 2024-05-27 15:34:29
@ 备注: 
-->
<script lang='ts' setup>
import { Search,ArrowRight  } from '@element-plus/icons-vue'	//搜索图标
import { userOrgRole,crumb } from '@/api/hr/search/types'
import { gainSunOrgAndUser,gainAllRole,searchOrgUser } from '@/api/hr/people/index'

const props = defineProps({
	pickList:{
		type:Object,
		default(){
			return {}
		}
	},
	orgTrue:{
		type:Number,
		default:1
	}
})
const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
const emits = defineEmits(["update:pickList","updataPickLog"]);

const listRoleAry = ref<userOrgRole[]>([])	//待选择数据 
const pickLists = ref<userOrgRole[]>([])	//待选择数据 

/**
@ 作者: 秦东
@ 时间: 2024-05-27 11:48:32
@ 功能: 获取角色
*/
const gainSysRole = (val?:string) => {
	// console.log("获取角色---1",val)
	gainAllRole({name:val})
		.then((data) =>{
			// console.log("获取角色",data)
			listRoleAry.value = data.data
			// console.log("获取角色",listRoleAry)
		})
		.finally(() =>{
			if(pickLists.value.length > 0){
			listRoleAry.value.forEach((item:userOrgRole)=>{
				let isTrue = true
				pickLists.value.forEach((val:userOrgRole)=>{
					if(val.id == item.id){
						item.isPick = 1;
						isTrue = false;
					}
				})
				if(isTrue){
					item.isPick = 2;
				}
			})
		}
		})
}
//初始加载
onMounted(()=>{
	
	if(props.pickList.value.length > 0){
		pickLists.value = props.pickList.value
		nextTick(() => {
			gainSysRole()
		})
	}else{
		gainSysRole()
	}
})
/**
@ 作者: 秦东
@ 时间: 2024-05-24 15:04:01
@ 功能: 选择项目
*/
const pickCont = (val:userOrgRole) => {
	if(val.isPick != 1){
		val.isPick = 1
		if(pickLists.value.length > 0){
			let isTrue = true
			pickLists.value.forEach((item:userOrgRole)=>{
				if(item.id == val.id){
					isTrue = false;
				}
			})
			if(isTrue){
				pickLists.value.push(val)
			}
		}else{
			pickLists.value.push(val)
		}
	}else{
		val.isPick = 2
		if(pickLists.value.length > 0){
			pickLists.value.forEach((item:userOrgRole,index:number)=>{
				if(item.id == val.id){
					pickLists.value.splice(index,1)
				}
			})
		}
	}
	// emits('update:pickList', pickLists)
	// console.log("选择项目-------->",pickLists.value)
	emits('updataPickLog', pickLists.value)
}
/**
@ 作者: 秦东
@ 时间: 2024-05-24 15:25:58
@ 功能: 监听已选择的选项
*/
watch(() => props.pickList, (val:userOrgRole[])=>{
	// console.log("监听已选择的选项-------->",val)
	pickLists.value = val
	listRoleAry.value.forEach((item)=>{
		let isTrue = true
		val.forEach((itemVal:userOrgRole)=>{
				if(item.id == itemVal.id){
					item.isPick = 1;
					isTrue = false;
				}
			})
		if(isTrue){
			item.isPick = 2;
		}
	})
},{
	deep: true
})
/**
@ 作者: 秦东
@ 时间: 2024-05-27 15:11:07
@ 功能: 搜索信息
*/
const searchOrgRolePeople = (val:any) => {

		gainSysRole(val)

}
defineExpose({
	searchOrgRolePeople
})
</script>
<template>
	<div>
		<el-scrollbar  v-loading="loading"  class="contentBox">
				<ul>
					<li v-for="item in listRoleAry" :key="item.id" :class="item.isPick==1?'active':''">
						<el-space v-if="orgTrue!=1&&item.types!=2" wrap @click="pickCont(item)">
							<i v-if="item.isPick==1" class="fa fa-check-square-o"></i><i v-else class="fa fa-square-o"></i>
							<svg-icon v-if="item.types==2"  icon-class="fenZhu" :size="20" />
							<svg-icon  v-if="item.types==3" icon-class="tasp" :size="20" />
							<el-avatar v-if="item.types==1" shape="square" :size="20" :src="circleUrl" />
							<el-text>{{ item.title }}</el-text>
						</el-space>
						<el-space v-if="orgTrue!=1&&item.types==2" wrap>
							<i  class="fa fa-minus-square-o"></i>
							<svg-icon v-if="item.types==2"  icon-class="fenZhu" :size="20" />
							<svg-icon  v-if="item.types==3" icon-class="tasp" :size="20" />
							<el-avatar v-if="item.types==1" shape="square" :size="20" :src="circleUrl" />
							<el-text>{{ item.title }}</el-text>
						</el-space>
						<el-space v-if="orgTrue==1" wrap @click="pickCont(item)">
							<i v-if="item.isPick==1" class="fa fa-check-square-o"></i><i v-else class="fa fa-square-o"></i>
							<svg-icon v-if="item.types==2"  icon-class="fenZhu" :size="20" />
							<svg-icon  v-if="item.types==3" icon-class="tasp" :size="20" />
							<el-avatar v-if="item.types==1" shape="square" :size="20" :src="circleUrl" />
							<el-text>{{ item.title }}</el-text>
						</el-space>
						<div v-if="item.types==2" class="contentLiLeft">
							<svg-icon  icon-class="cascader" />
							<el-text  @click="pickSunCont(item.id)">下级</el-text>
						</div>
					</li>	
				</ul>
			</el-scrollbar>
	</div>
</template>
<style  lang='scss' scoped>
.mianbaoxue{
	display: flex;
	white-space: nowrap;
	padding: 0px 5px 10px 5px;
	overflow: auto;
	cursor: pointer;
}
.contentBox{
	height: 400px;
	padding: 0 5px;
	li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 5px 5px;
		cursor: pointer;
		i {
			font-size: 15px;
		}
	}
	li:hover {
		background-color: #EBEEF5;
		color: #409EFF;
		.el-text{
			color: #409EFF;
		}
	}
	li.active{
		background-color: #EBEDF0;
		color: #409EFF;
		
		.el-text{
			color: #409EFF;
		}
	}
}
.contentLiLeft{
	border-left: 1px dashed #909399;
	padding-left: 10px;
}
.pickBox{
	height: 420px;
	padding: 10px 0px 0px 0px;
	li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 5px 5px;
		cursor: pointer;
		i {
			font-size: 15px;
		}
	}
	li:hover {
		background-color: #F56C6C;
		color: #FFFFFF;
		.el-text{
			color: #FFFFFF;
		}
	}
}
</style>