FE_DQmini-code/guaranteePages/pages/reviewJudges/reviewJudges.vue

<template>
	<view class="ass-content">
		<view>
			<view class="ass-label">
				<text>步骤一：选择固定参会评委</text>
			</view>
			<view class="assign-view mat15">
				<view class="cu-bar search">
					<view class="search-form round">
						<input type="text" v-model="searchFixed" placeholder="请输入" confirm-type="search"></input>
						<text class="cuIcon-search"></text>
					</view>
				</view>
				<mix-tree :multiple="true" class="wd60" :limit = "4" @checkedRund = "getFixed" :unChecked="delFixedName" :fliter="searchFixed" :list="data" @delstr="changeDelStr"></mix-tree>
			</view>
		</view>
		
		<view class="mat15">
			<view class="ass-label">
				<text>参会评委</text>
			</view>
			<view class="assign-view mat15 judges-view">
				<view class="flex-between judgesList-view" v-for="(item,index) in fixedName" :key="index">
					<text class="jud-label">{{item}}</text>
					<!-- <text class="cuIcon-roundclosefill" @click="clearJudge(index)"></text> -->
				</view>
			</view>
		</view>
		
		<view class="mat15">
			<view class="ass-label">
				<text>步骤二：选择备选评委</text>
			</view>
			<view class="assign-view mat15">
				<view class="cu-bar search">
					<view class="search-form round">
						<input type="text" v-model="searchUnFixed" placeholder="请输入" confirm-type="search"></input>
						<text class="cuIcon-search"></text>
					</view>
				</view>
				<mix-tree :multiple="true" class="wd60" @checkedRund = "getUnfixed" :unChecked="delUnfixedName" :limit = "99" :fliter="searchUnFixed" :list="data" @delstr="changeDelStr"></mix-tree>
			</view>
		</view>
		
		<view class="mat15">
			<view class="ass-label">
				<text>备选评委</text>
			</view>
			<view class="assign-view mat15 judges-view">
				<view class="flex-between judgesList-view" v-for="(item,index) in unfixedName" :key="index">
					<text class="jud-label">{{item}}</text>
					<!-- <text class="cuIcon-roundclosefill" @click="clearJudge(index)"></text> -->
				</view>
			</view>
		</view>	
		
		<view class="flex-align-start mat15">
			<view class="ass-label">
				<text>步骤三：选取人数</text>
			</view>
			<view class="AB-input">
				<view class="flex">
					<input type="text" v-model="lotteryScope" placeholder="请输入抽取人数"/>
					<text class="cuIcon-roundclosefill" @click="lotteryScope=''"></text>
				</view>
			</view>
		</view>
		
		<view class="lottery-btn mat15">
			<button class="cu-btn round def-btn" @click="lotteryHandle">摇号</button>
		</view>
		
		<view class="mat15">
			<view class="ass-label">
				<text>选取评委会成员</text>
			</view>
			<view class="assign-view mat15 judges-view">
				<view class="flex-between judgesList-view" v-for="(item,index) in winLottery" :key="index">
					<text class="jud-label">{{item}}</text>
					<!-- <text class="cuIcon-roundclosefill" @click="clearJudge(index)"></text> -->
				</view>
			</view>
		</view>
		
		<view class="mat15">
			<view class="ass-label">
				<text>贷审会参会评委</text>
			</view>
			<view class="assign-view mat15 judges-view">
				<view class="flex-between judgesList-view" v-for="(item,index) in FinallyJudge" :key="index">
					<text class="jud-label">{{item}}</text>
					<!-- <text class="cuIcon-roundclosefill" @click="clearJudge(index)"></text> -->
				</view>
			</view>
		</view>
		
		<view class="mat40 flex-justify-center ass-foot-btn">
			<navigator url="/pages/user/user" open-type="redirect">
				<button class="cu-btn block def-btn margin-tb-sm lg round mar15" @click="workExtract">确定</button>
			</navigator>
			<navigator url="/pages/investigation/investigation" open-type="redirect">
				<button class="cu-btn block cancel-btn margin-tb-sm lg round mal15" @click="back()">取消</button>
			</navigator>
		</view>
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		components: {
			LyTree
		},
		data() {
			return {
				filterNodeData: null,
				// filterText: '',
				lotteryScope: '',// 摇号范围
				B: '小红',
				data: [],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				judgesList: [
				
				],
				searchFixed:'',// 固定评委搜索框
				delFixedName:'',// 名称重复时，传递给组件，删除对应的值
				searchUnFixed:'',// 非固定评委搜索框
				delUnfixedName:'',// 名称重复时，传递给组件，删除对应的值
				
				fixedName:[],// 固定评委名称
				unfixedName:[],// 非固定评委名称
				
				FinallyJudge:[],// 最终获取的摇号评委
				winLottery:[],// 摇号选出的值
				
				getItem:{},// 获取值
				
			};
		},
		onShow() {
			this.trees()// 每次展示调用树数据
		},
		created() {
			if(uni.getStorageSync('decideIndex')){
				let data = JSON.parse(uni.getStorageSync('decideIndex'))
				this.getItem.id = data.detailId
				uni.removeStorageSync('decideIndex')
			}else if(uni.getStorageSync('applyMsg')){ // 取得传参,取得ID等
				this.getItem = JSON.parse(uni.getStorageSync('applyMsg')) 
			}
		},
		// 如果不需要不用到这些方法，需要删除相应代码，打印大量日志会造成性能损耗
		methods: {
			// 只有在"点击"修改的指定节点会触发(也就是说这个方法只会触发一次)，obj中包含当前选中
			handleCheck(obj) {
			},
			clearJudge(index){// 删除选择人员--未完成
				this.judgesList.splice(index,1)
			},
			
			getFixed(nameList,idsList){// 固定评委选择
				this.fixedName = nameList
				let len = this.unfixedName.length
				
				for(let i=0;i<len;i++){
					if(this.fixedName.includes(this.unfixedName[i])){
						// 限制固定评委和摇号评委不能相同
						this.delfixedName = this.unfixedName[i] // 删除该勾选
						// this.$nextTick(function(){
						// 	this.delfixedName = ''
						// })
						this.fixedName.splice(this.fixedName.indexOf(this.unfixedName[i]),1)
						// this.delFixedName 
						return uni.showToast({
							title:'请勿选择与摇号评委相同的人员',icon:'none'
						})
					}
				}
			},
			getUnfixed(nameList,idsList){// 摇号评委选择
				this.unfixedName = nameList
				let len = this.fixedName.length
				for(let i=0;i<len;i++){
					// 匹配是否有已选中的固定评委的值
					if(this.unfixedName.includes(this.fixedName[i])){
						// 限制固定评委和摇号评委不能相同
						// 1，点击时，会触发勾选否 ------ 
						// 2  前提：需要先勾选，触发该次行为，让父级获取值，进行判断
						// 3  一个变量：让组件触发阻止该行为，然后传递给父级，重置该值
						this.delUnfixedName = this.fixedName[i] // 删除该勾选
						// this.$nextTick(function(){
						// 	this.delUnfixedName = ''
						// })
						this.unfixedName.splice(this.unfixedName.indexOf(this.fixedName[i]),1)
						return uni.showToast({
							title:'请勿选择与固定评委相同的人员',icon:'none'
						})
					}
				}
			},
			changeDelStr(val){// 改变 勾选的字段--判断俩组件重复勾选的值
				this.delUnfixedName = ''
				this.delFixedName = ''
			},
			// 摇号
			lotteryHandle(){
				// 如果输入了摇号的范围，以及备选评委，进入摇号
				if(this.unfixedName.length!==0&&this.lotteryScope){
					this.winLottery=[]
					if(this.lotteryScope>=this.unfixedName.length){
						return uni.showToast({
							title:'请不要输入大于备选评委选中人数!',icon:"none"
						})
					}else{
						let random,arr = JSON.parse(JSON.stringify(this.unfixedName)) 
						this.shuffle(arr)
						for(let i=0;i<this.lotteryScope;i++){
							random = Math.floor(Math.random()*arr.length)
							this.winLottery.push(arr[random])
							arr.splice(random,1)
						}
					}
					this.theFinallyJudge()
				}else{
					return uni.showToast({
						title:"请先输入抽取人数!",icon:'none'
					})
				}
			},
			// 最终取得评委数据
			theFinallyJudge(){
				let arr = []
				if(this.fixedName&&this.fixedName.length!==0){
					arr = this.fixedName.map(e=>{
						return e
					})
				}
				let arr1 = []
				// 把摇号的内容也push进去
				if(this.winLottery&&this.winLottery.length!==0){
					arr1 = this.winLottery.map(e=>{
						return e
					})
				}
				arr = [...arr,...arr1]
				this.FinallyJudge = arr
			},
			// 获取树结构数据
			trees(){	
				this.$http.get('/api-hrms//hrms/dept/empTrees').then(res=>{
					this.data = res.data 
					this.disposeData(this.data)// 处理数据
				})
			},
			// 处理树结构数据
			disposeData(data){// children和员工分开，整合到一个children里
				let len = data.length
				for(let i = 0;i<len;i++){
					if(data[i].children){ // children有值则---进入整合，实际上可能没有children，也需要整合
						if(data[i].userDept){//有员工就整合
							if(data[i].userDept.length!==0){//多个员工处理
								let len = data[i].userDept.length
								for(let a=0;a<len;a++){
									data[i].userDept[a].name=data[i].userDept[a].account
								}
							}
							data[i].children = [...data[i].children,...data[i].userDept] 
							data[i].children = [...new Set(data[i].children)]
						}
						if(data[i].children.length!==0){//有子级则进入子级，继续循环
							this.disposeData(data[i].children)
						}
					}else if(!data[i].children&&data[i].userDept&&data[i].userDept.length!==0){//没有子级，而有员工时，创建新的children
						data[i].children = []
						let len = data[i].userDept.length
						for(let a=0;a<len;a++){
							data[i].userDept[a].name=data[i].userDept[a].account
						}
						data[i].children = [...data[i].children,...data[i].userDept] 
						data[i].children =[...new Set(data[i].children)]
					}
				}
			},
			// 洗牌
			shuffle(arr){
				var length = arr.length,
					temp,
					random;
				while(0 != length){// 取随机下标，重复的和递减末位交换
					random = Math.floor(Math.random() * length)
					length--;
					// 交换
					temp = arr[length];
					arr[length] = arr[random];
					arr[random] = temp;
				}
				return arr;
			},
			// '/api-guarantee/work/conference/theJudgesDrawn'
			// 工作会-抽取评委
			workExtract(){
				let obj = {id:this.getItem.id}
				if(this.FinallyJudge&&this.FinallyJudge.length!==0){
					obj.empNames = this.FinallyJudge
					this.$http.post('/api-guarantee/work/conference/theJudgesDrawn',obj).then(res=>{
						if(res.success){
							uni.showToast({
								title:'操作成功！'
							})
							this.back()
						}
					}).catch(err=>{
						uni.showToast({
							title:'操作失败，请重新操作！',icon:'none'
						})
					})
				}else{
					uni.showToast({
						title:'请先选择评委再提交！',icon:'none'
					})
				}
				
			},
		}
	};
</script>

<style lang="scss" scoped>
	.ass-content{
		padding: 40rpx 40rpx;
		.ass-foot-btn .cu-btn.lg{
			padding: 0 100rpx;
		}
	}
	.ass-label{
		color: #00B9FF;
		font-size: 28rpx;
		margin-right: 40rpx;
	}
	.assign-view{
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 0 16rpx #ccc;
		height: 600rpx;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	.cu-bar .search-form{
		border-radius: 20rpx;
		background-color: #f5f5f5;
		height: 72rpx;
		line-height: 72rpx;
		input{
			height: 72rpx;
			line-height: 72rpx;
			padding: 0 40rpx;
		}
		.cuIcon-search{
			margin: 0 20rpx;
		}
	}
	.AB-input{
		view{
			background-color: #f5f5f5;
			color: #666;
			padding: 20rpx 40rpx;
			border-radius: 20rpx;
			text{
				color: #B2B2B2;
			}
		}
	}
	.judges-view{
		height: 300rpx;
		padding: 30rpx 30rpx;
		.judgesList-view{
			color: #B2B2B2;
			margin-top: 20rpx;
			&:first-child{
				margin-top: 0;
			}
			.jud-label{
				color: #666;
			}
		}
	}
	.lottery-btn{
		text-align: right;
	}
</style>