Web_TracerMethodology/components/tm-checked-group/check-group.vue

<template>
	<view class="radio-group-view">
		<view v-if="label" class="label-view">
			<text>{{ label }}</text>
		</view>
		<view class="radio-group">
			<template v-for="(item, i) in list">
				<view :class="{'radio-item':true}" :key="i" @click="toggleSelect(item, i)">
					<text class="text">{{ item[setting.name] }}</text>
					<image class="icon"
						:src="`/static/${checkedValues.includes(item[setting.value]) ? 'check-checkbox' : 'check-no'}.png`">
					</image>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	/**
	 * 单选列表组合
	 * 芦荟
	 * 2021.2.2
	 * props：属性说明看tm-radio-gruop.vue
	 */
	export default {
		props: ['list', 'defaultValue', 'label', 'setting', 'pIndex'],
		data:function(){
			 return {
				 //已选中的项
				 checkedList:[]
			 }
		},
		computed:{
			checkedValues(){
				 // console.log('this.defaultValue',this.defaultValue);
				 this.checkedList = this.defaultValue;
				 return this.defaultValue.map(item=>item[this.setting.value]);
			}
		},
		methods: {
			/**
			 * 选中变化调用
			 * @param {Object} selectData 当前选中的对象
			 * @param {Object} index 当前选中下标
			 *
			 * 返回的参数
			 * selectData[this.setting.value]: 当前选中的值
			 * selectData： 当前选中的整条数据
			 * index：      当前选中的下标
			 */
			toggleSelect(selectData, index) {
				
				const positionIndex = this.checkedList.findIndex(item=>item[this.setting.value] == selectData[this.setting.value]);
				console.log({selectData, index,positionIndex});
				
				if(positionIndex != -1){
					   this.checkedList.splice(positionIndex,1);
				}else {
					   this.checkedList.push(selectData);
				}
				
				this.$emit(
					'change',
					{
					   checkedList:this.checkedList,  //已选中的集合
					   parentIndex:this.pIndex   //父级index
					}
				);
			}
		}
	}
</script>

<style lang="less">
	.radio-group-view {

		.label-view {
			height: 47.5rpx;
			line-height: 45rpx;
			padding-left: 25rpx;

			>text {
				font-size: 22.5rpx;
				color: #666F80;
			}
		}

		.radio-group {
			padding-left: 25rpx;
			background-color: #fff;
			border-bottom: 0.62rpx solid #DADEE6;

			.radio-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 87.5rpx;
				border-bottom: 0.62rpx solid #DADEE6;
				padding-right: 25rpx;

				.text {
					font-size: 22.5rpx;
					color: #292C33;
				}

				.icon {
					width: 25rpx;
					height: 25rpx;
				}

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
</style>