hxgksystemapp/src/views/public/orguser/orguser.vue

<!--
@ 作者: 秦东
@ 时间: 2023-11-21 13:01:56
@ 备注: 选择人员
-->
<script lang='ts' setup>
const state = reactive({
  circleUrl:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['small', '', 'large'] as const,
})
const { circleUrl, squareUrl, sizeList } = toRefs(state)
const props = defineProps({
	openclose:{
		type:Boolean,
		default:false
	},
	presetPersonnel: {
		type: Array,
		default: () => []
	},
	selectedPeople: {
		type: Array,
		default: () => []
	}
})
const emits = defineEmits(["update:openclose","updateNode"]);
const isShow =   computed({
	get: () => props.openclose,
	set: (val) => {
		emits("update:openclose", val);
	},
});
//指定人员
const prePers =  ref<any>([]);
//选择人员
const setUpPrePers = ref<any>([]);

watch(() =>props.openclose,(val:boolean)=>{
	// console.log("props.openclose--1-->",val)
	// console.log("props.openclose--2-->",props.selectedPeople)
	// console.log("props.openclose--3-->",props.presetPersonnel)
	if(props.openclose){
		if(props.selectedPeople && props.selectedPeople.length > 0){
			setUpPrePers.value = props.selectedPeople
		}else{
			setUpPrePers.value = new Array
			if(props.presetPersonnel && props.presetPersonnel.length > 0){
				console.log("props.openclose--4-->",props.presetPersonnel)
				props.presetPersonnel.forEach((item)=>{
					item.isTrue = false
				})
			}
		}
	}
	
	
})

const setUpUser = (val:any) => {
	// console.log("setUpUser---->",val,prePers.value)
	let isNewAdd = true;
	if(setUpPrePers.value && setUpPrePers.value.length > 0){
		setUpPrePers.value.forEach((item:any,index:number) => {
			if(val.id == item.id){
				isNewAdd = false;
				if(!item.noedit){
					val.isTrue = false
					setUpPrePers.value.splice(index,1)
				}else{
					val.isTrue = true
				}
			}
		})
	}
	if(isNewAdd){
		val.isTrue = true
		setUpPrePers.value.push(val)
	}
}

//初始化数据
const initDataUser = () => {
	// console.log("销毁---->",prePers.value,setUpPrePers.value)
}
onMounted(() => {
	if(props.openclose){
		if(props.selectedPeople && props.selectedPeople.length > 0){
			setUpPrePers.value = props.selectedPeople
		}else{
			setUpPrePers.value = new Array
			if(props.presetPersonnel && props.presetPersonnel.length > 0){
				// console.log("props.openclose--4-->",props.presetPersonnel)
				props.presetPersonnel.forEach((item)=>{
					item.isTrue = false
				})
			}
		}
	}
})
const closeBox = () => {
	emits("update:openclose", false);
}
//确定选择
const saveFlowUser = () => {
	emits("updateNode", setUpPrePers);
	closeBox();
}
</script>
<template>
	<el-dialog
		v-model="isShow"
		title="选择人员"
		width="800"
		draggable
		:before-close="handleClose"
	>
		<el-row :gutter="20">
			<el-col :span="12" >
				<div class="bianKuan">
					<ul>
						<li v-for="item in props.presetPersonnel" :key="item.id"  :class="item.isTrue?'xuanZeUser active':'xuanZeUser'"  @click="setUpUser(item)">
							<table>
								<tr>
									<td valign="top" align="center" width="50">
										<el-avatar v-if="item.iconbase64==''&&item.icon!=''" shape="square" fit="cover" :src="item.icon" />
										<el-avatar v-else-if="item.iconbase64!=''" shape="square" fit="cover" :src="item.iconbase64" />
										<el-avatar v-else shape="square" fit="cover" :src="squareUrl" />
									</td>
									<td>
										<el-text>{{ item.name }}（{{ item.number }}）</el-text><br>
										<el-text v-if="item.departmentname">{{ item.departmentname }}</el-text>
										<el-text v-if="item.postname"><span v-if="item.departmentname"> - </span>{{ item.postname }}</el-text>
									</td>
								</tr>
							</table>
						</li>
					</ul>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="bianKuan">
					
					<ul>
						<li v-for="item in setUpPrePers" :key="item.id" class="xuanZeUser" @click="setUpUser(item)">
							<table>
								<tr>
									<td valign="top" align="center" width="50">
										<el-avatar v-if="item.iconbase64==''&&item.icon!=''" shape="square" fit="cover" :src="item.icon" />
										<el-avatar v-else-if="item.iconbase64!=''" shape="square" fit="cover" :src="item.iconbase64" />
										<el-avatar v-else shape="square" fit="cover" :src="squareUrl" />
									</td>
									<td style="width:100%">
										<el-text>{{ item.name }}（{{ item.number }}）</el-text><br>
										<el-text v-if="item.departmentname">{{ item.departmentname }}</el-text>
										<el-text v-if="item.postname"><span v-if="item.departmentname"> - </span>{{ item.postname }}</el-text>
									</td>
									<td align="center" width="10">
										<i class="fa fa-close"></i>
									</td>
								</tr>
							</table>
						</li>
					</ul>
					
				</div>
			</el-col>
		</el-row>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeBox">关闭</el-button>
				<el-button type="primary" @click="saveFlowUser">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<style  lang='scss' scoped>
.bianKuan{
	width: 100%;
	height: 500px;
	border: 1px solid #CCCCCC;
	overflow: hidden;
	overflow-y: auto;
}
.xuanZeUser{
	cursor: pointer;
	// background-color: #F56C6C;
	padding-top: 5px;
	margin-bottom: 5px;
}
.xuanZeUser.active{
	background-color: #F56C6C;
}
</style>