hz_crm_web/src/views/custom_manage/compontents/CauthList.vue

 <template>
	<div class="CauthList_container" >
		<span style="fontSize:16px;">请选择新增试用的品种：</span>
		<!-- 权益合并的和FICC -->
		<ul class="menu_lists" style="marginBottom:40px;" v-if="autharr[0] && autharr[0].RaiMerge != 2">
			<li v-for="item in autharr" :key="item.ClassifyName" class="menu_item">
				<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" :disabled="item.defaultAuth.length" style="marginRight:30px;fontWeight:bold;minWidth:90px;" @change="handleCheckAll(item)">{{item.ClassifyName+':'}}</el-checkbox>
				<el-checkbox-group v-model="item.CheckList"  @change="handleChecked(item)">
					<!-- PermissionType 为2 代表的是权益区分主客观的客观 1表示权益区分主客观的主观 0表示为不区分主客观的行业包括FICC的 -->
					<el-checkbox v-for="list in item.Items.filter(it => it.PermissionType!=2)" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item" :disabled="item.defaultAuth.indexOf(list.ChartPermissionId)!=-1" >{{list.PermissionName}}</el-checkbox>
				</el-checkbox-group>
			</li>
		</ul>
		<!-- 权益拆分 -->
		<div v-if="autharr[0] && autharr[0].RaiMerge == 2" class="qy_menuList">
			<el-table :data="autharr[0].dataList" :show-header="false" border :span-method="spanMethod">
				<el-table-column align="center">
					<template slot-scope="scope">
						<span v-if="!scope.row.PermissionTypeName">
							{{scope.row.PermissionTypeName}}
						</span>
						<el-checkbox :label="scope.row.PermissionTypeName.value" v-else @change="handleCheckQY(scope.row.PermissionTypeName)"
						v-model="scope.row.PermissionTypeName.isCheckAll" :disabled="scope.row.PermissionTypeName.isDisabled"
						:indeterminate="scope.row.PermissionTypeName.isIndeterminate"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column align="center" v-if="autharr[0].existIds.includes(22)">
					<template slot-scope="scope">
						<el-checkbox v-if="scope.row.medicine.value === '医药'" :label="scope.row.medicine.value" :indeterminate="scope.row.medicine.isIndeterminate"
						@change="handleCheckQY(scope.row.medicine)" v-model="scope.row.medicine.isCheckAll" :disabled="scope.row.medicine.isDisabled"></el-checkbox>
						<el-checkbox-group v-model="qyCheckList" v-else >
							<el-checkbox :label="scope.row.medicine.value" class="checkbox-flex"
							:disabled="scope.row.medicine.isDisabled">{{''}}</el-checkbox>
						</el-checkbox-group>
					</template>
				</el-table-column>
				<el-table-column align="center" v-if="autharr[0].existIds.includes(21)">
					<template slot-scope="scope">
						<el-checkbox v-if="scope.row.consumption.value === '消费'" :label="scope.row.consumption.value" :indeterminate="scope.row.consumption.isIndeterminate"
						@change="handleCheckQY(scope.row.consumption)" v-model="scope.row.consumption.isCheckAll" :disabled="scope.row.consumption.isDisabled"></el-checkbox>
						<el-checkbox-group v-model="qyCheckList" v-else >
							<el-checkbox :label="scope.row.consumption.value" class="checkbox-flex"
							:disabled="scope.row.consumption.isDisabled">{{''}}</el-checkbox>
						</el-checkbox-group>
					</template>
				</el-table-column>
				<el-table-column align="center" v-if="autharr[0].existIds.includes(20)">
					<template slot-scope="scope">
						<el-checkbox v-if="scope.row.technology.value === '科技'" :label="scope.row.technology.value" :indeterminate="scope.row.technology.isIndeterminate"
						@change="handleCheckQY(scope.row.technology)" v-model="scope.row.technology.isCheckAll" :disabled="scope.row.technology.isDisabled"></el-checkbox>
						<el-checkbox-group v-model="qyCheckList" v-else >
							<el-checkbox :label="scope.row.technology.value" class="checkbox-flex"
							:disabled="scope.row.technology.isDisabled">{{''}}</el-checkbox>
						</el-checkbox-group>
					</template>
				</el-table-column>
				<el-table-column align="center" v-if="autharr[0].existIds.includes(19)">
					<template slot-scope="scope">
						<el-checkbox v-if="scope.row.smart.value === '智造'" :label="scope.row.smart.value" :indeterminate="scope.row.smart.isIndeterminate"
						@change="handleCheckQY(scope.row.smart)" v-model="scope.row.smart.isCheckAll" :disabled="scope.row.smart.isDisabled"></el-checkbox>
						<el-checkbox-group v-model="qyCheckList" v-else >
							<el-checkbox :label="scope.row.smart.value" class="checkbox-flex"
							:disabled="scope.row.smart.isDisabled">{{''}}</el-checkbox>
						</el-checkbox-group>
					</template>
				</el-table-column>
				<el-table-column align="center" v-if="autharr[0].existIds.includes(23)">
					<template slot-scope="scope">
						<span v-if="scope.row.strategy.value === '策略'">
							{{scope.row.strategy.value}}
						</span>
						<el-checkbox-group v-model="qyCheckList" v-else >
							<el-checkbox :label="scope.row.strategy.value" class="checkbox-flex"
							:disabled="scope.row.strategy.isDisabled">{{''}}</el-checkbox>
						</el-checkbox-group>
					</template>
				</el-table-column>
				<el-table-column align="center" v-if="autharr[0].existIds.includes(29)">
					<template slot-scope="scope">
						<span v-if="scope.row.experts.value === '专家'">
							{{scope.row.experts.value}}
						</span>
						<el-checkbox-group v-model="qyCheckList" v-else >
							<el-checkbox :label="scope.row.experts.value" class="checkbox-flex"
							:disabled="scope.row.experts.isDisabled">{{''}}</el-checkbox>
						</el-checkbox-group>
					</template>
				</el-table-column>
				<el-table-column align="center" v-if="autharr[0].existIds.includes(30)">
					<template slot-scope="scope">
						<span v-if="scope.row.roadshow.value === '路演服务'">
							{{scope.row.roadshow.value}}
						</span>
						<el-checkbox-group v-model="qyCheckList" v-else >
							<el-checkbox :label="scope.row.roadshow.value" class="checkbox-flex"
							:disabled="scope.row.roadshow.isDisabled">{{''}}</el-checkbox>
						</el-checkbox-group>
					</template>
				</el-table-column>
				<el-table-column align="center" v-if="autharr[0].existIds.includes(53)">
					<template slot-scope="scope">
						<span v-if="scope.row.fixedCrop.value === '固收'">
							{{scope.row.fixedCrop.value}}
						</span>
						<el-checkbox-group v-model="qyCheckList" v-else >
							<el-checkbox :label="scope.row.fixedCrop.value" class="checkbox-flex"
							:disabled="scope.row.fixedCrop.isDisabled">{{''}}</el-checkbox>
						</el-checkbox-group>
					</template>
				</el-table-column>
				<el-table-column align="center" v-if="autharr[0].existIds.includes(31)">
					<template slot-scope="scope">
						<span v-if="scope.row.choose.value === '研选订阅'">
							{{scope.row.choose.value}}
						</span>
						<el-checkbox-group v-model="qyCheckList" v-else >
							<el-checkbox :label="scope.row.choose.value" class="checkbox-flex"
							:disabled="scope.row.choose.isDisabled">{{''}}</el-checkbox>
						</el-checkbox-group>
					</template>
				</el-table-column>
				<el-table-column align="center" width="100px" v-if="autharr[0].existIds.includes(52)">
					<template slot-scope="scope">
						<span v-if="scope.row.points.value === '研选扣点包'">
							{{scope.row.points.value}}
						</span>
						<el-checkbox-group v-model="qyCheckList" v-else >
							<el-checkbox :label="scope.row.points.value" class="checkbox-flex"
							:disabled="scope.row.points.isDisabled">{{''}}</el-checkbox>
						</el-checkbox-group>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div style="display:flex;justify-content:center;margin:75px 0 26px;">
			<el-button type="primary" style="width:80px;marginRight:24px;" @click="addHandle">确定</el-button>
			<el-button  style="width:80px;" @click="$emit('close')">取消</el-button>
		</div>
	</div>
</template>

<script>
// 权益的ID：
/**
 * 科技-主观(20)-客观(37)
 * 消费-主观(21)-客观(38)
 * 医药-主观(22)-客观(39)
 * 智造-主观(19)-客观(36)
 * 策略(23)
 * 专家(29)
 * 固收(53)
 * 调研(54)
 * 路演服务(30)
 * 研选订阅(31)
 * 研选扣点包(52)
 */
import { customInterence } from '@/api/api.js'
export default {
	name:'',
	props:{
		id: {
			type:Number,
		},
		autharr:{
			type:Array,
			default:[]
		}
	},
	watch: {
		autharr(value){
			if(value[0] && value[0].customType=='权益') this.qyCheckList = value[0].CheckList
		},
		qyCheckList(value){
			// 根据复选框选择的情况 改变医药、消费、科技、智造、主客观复选框的状态
			let arr = ['medicine','consumption','technology','smart']
			for (let i = 0; i < arr.length; i++) {
				let element = arr[i];
				let arrLength = value.filter(item => {
					return item == this.autharr[0].dataList[1][element].value || item == this.autharr[0].dataList[2][element].value
				}).length
				if(arrLength == 2){
					this.autharr[0].dataList[0][element].isCheckAll=true
					this.autharr[0].dataList[0][element].isIndeterminate=false
				}else if(arrLength == 1){
					this.autharr[0].dataList[0][element].isCheckAll=false
					this.autharr[0].dataList[0][element].isIndeterminate=true
				}else{
					this.autharr[0].dataList[0][element].isCheckAll=false
					this.autharr[0].dataList[0][element].isIndeterminate=false
				}
			}
			for (let i = 0; i < 2; i++) {
				let arrLength = value.filter(item => {
					return item == this.autharr[0].dataList[i+1].medicine.value || item == this.autharr[0].dataList[i+1].consumption.value ||
						item == this.autharr[0].dataList[i+1].technology.value || item == this.autharr[0].dataList[i+1].smart.value
				}).length
				if(arrLength == 4){
					this.autharr[0].dataList[i+1].PermissionTypeName.isCheckAll=true
					this.autharr[0].dataList[i+1].PermissionTypeName.isIndeterminate=false
				}else if(arrLength == 0){
					this.autharr[0].dataList[i+1].PermissionTypeName.isCheckAll=false
					this.autharr[0].dataList[i+1].PermissionTypeName.isIndeterminate=false
				}else{
					this.autharr[0].dataList[i+1].PermissionTypeName.isCheckAll=false
					this.autharr[0].dataList[i+1].PermissionTypeName.isIndeterminate=true
				}
			}
		}
	},
	data () {
		return {
			qyCheckList:[],
			permissionIds:{
				19:36, //智造
				20:37, //科技
				21:38, //消费
				22:39, //医药
			} //主观:客观
		};
	},
	methods: {
		/* 确认新增 */
		addHandle() {
			let checkArr = [];
			// ficc和权益合并
			if(this.autharr[0] && this.autharr[0].RaiMerge != 2){
				this.autharr.forEach(item => {
					if(item.CheckList.length) {
						checkArr.push(item.CheckList)
					}
				})
			}else{
				// 权益拆分
				checkArr = this.qyCheckList
			}

			customInterence.addTryout({
				CompanyId:this.id,
				ChartPermissionId:checkArr.join()
			}).then(res => {
				if(res.Ret===200) {
					this.$message.success(res.Msg)
					this.$emit('addOver')
				}
			})
		},
		/* 选择全选或取消全选 */
		handleCheckAll(item) {
			// 取到所有的子菜单id
			let ids = item.Items.map(item =>{
				return item.ChartPermissionId
			})
			item.CheckList = item.checkAll ? ids : [];
        	item.isIndeterminate = false;
		},
		/* 复选框組选中时 */
		handleChecked(item) {
			if(item.RaiMerge==1){
				// 权益合并
				item.Items.map((it,i)=>{
					if(item.CheckList.includes(it.ChartPermissionId) && it.PermissionType==1){
						// 主观被选上，将客观的ID也push上
						item.CheckList.push(this.permissionIds[it.ChartPermissionId])
					}else if(!item.CheckList.includes(it.ChartPermissionId) && it.PermissionType==1){
						if(item.CheckList.indexOf(this.permissionIds[it.ChartPermissionId])!=-1){
							item.CheckList.splice(item.CheckList.indexOf(this.permissionIds[it.ChartPermissionId]),1)
						}
					}
				})
			}
			item.CheckList = [...new Set(item.CheckList)]
			let len = item.Items.filter(it => item.CheckList.includes(it.ChartPermissionId)).length
			item.checkAll = len === item.Items.length;
			item.isIndeterminate = len > 0 && len < item.Items.length;
		},
		// 权益选择套餐方法
		// 合并单元格
		spanMethod({ row, rowIndex, column,columnIndex  }){
			if([5,6,7,8,9].includes(columnIndex)){
				if(rowIndex == 1){
					return [2,1]
				}else if(rowIndex == 2){
					return [0,0]
				}
			}
		},
		handleCheckQY(item){
			let arr = ['medicine','consumption','technology','smart']
			let arrCh = ['医药','消费','科技','智造']
			// 全选
			if(item.isCheckAll){
				if(item.value == '主观'){
					for (let i = 0; i < arr.length; i++) {
						const element = arr[i];
						this.qyCheckList.push(this.autharr[0].dataList[1][element].value)
						this.qyCheckList = [...new Set(this.qyCheckList)]
					}
				}else if(item.value == '客观'){
					for (let i = 0; i < arr.length; i++) {
						const element = arr[i];
						this.qyCheckList.push(this.autharr[0].dataList[2][element].value)
						this.qyCheckList = [...new Set(this.qyCheckList)]
					}
				}else{
					for (let i = 0; i < arr.length; i++) {
						const element = arr[i];
						const elementCh = arrCh[i];
						if(item.value == elementCh){
							this.qyCheckList.push(this.autharr[0].dataList[1][element].value,this.autharr[0].dataList[2][element].value)
							this.qyCheckList = [...new Set(this.qyCheckList)]
							break
						}
					}
				}
			}else{ //全部不选
				if(item.value == '主观'){
					for (let i = 0; i < arr.length; i++) {
						const element = arr[i];
						// 需要删除的索引
						let deleteIndex = this.qyCheckList.findIndex(id=> {
							return id == this.autharr[0].dataList[1][element].value && (!this.autharr[0].dataList[2][element].isDisabled)
						});
						if(deleteIndex!=-1) this.qyCheckList.splice(deleteIndex,1)
					}
				}else if(item.value == '客观'){
					for (let i = 0; i < arr.length; i++) {
						const element = arr[i];
						let deleteIndex = this.qyCheckList.findIndex(id=> {
							return id == this.autharr[0].dataList[2][element].value && (!this.autharr[0].dataList[2][element].isDisabled)
						});
						if(deleteIndex!=-1) this.qyCheckList.splice(deleteIndex,1)
					}
				}else{
					for (let i = 0; i < arr.length; i++) {
						const element = arr[i];
						const elementCh = arrCh[i];
						if(item.value == elementCh){
							for (let i = 0; i < 2; i++) {
								let deleteIndex = this.qyCheckList.findIndex(id=> {
									return id == this.autharr[0].dataList[i+1][element].value && (!this.autharr[0].dataList[i+1][element].isDisabled)
								});
								if(deleteIndex!=-1) this.qyCheckList.splice(deleteIndex,1)
							}
							break
						}
					}
				}
			}
		}
	},
	created() {},
	mounted() {},
}
</script>
<style lang='scss' scoped>
.CauthList_container {
	.menu_lists {
		padding: 30px 0;
		border-radius: 4px;
		.menu_item {
			display: flex;
			// align-items: center;
			margin-bottom: 30px;
			&:last-child {
				margin-bottom: 0;
			}
			.list_item {
				margin-right: 20px;
				margin-bottom: 10px;
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
	.qy_menuList{
		margin-top:45px;
		.checkbox-flex{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>