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

<template>
	<view class="radio-slect-group">
		<template v-for="(item, i) in list">
			<view class="radio-slect-item" :key="i">
				<view class="p-view" @click="changeOpenKey(i)">
					<image class="icon" :src="`/static/${isOpen(i) ? 'up-icon' : 'down-icon'}.png`"></image>
					<text>{{ item[setting.pName] }}</text>
				</view>
				<template v-if="isOpen(i)">
					<view class="child-radio-group">
						<child-radio-group :pIndex="i" :list="item[setting.child] || []" :defaultValue="defaultValue"
							:label="label" :setting="setting" @change="toggleSelect" />
					</view>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
	/**
	 * 下拉式单选列表组合
	 * 芦荟
	 * 2021.2.3
	 * props：属性说明看tm-radio-gruop.vue
	 */

	import childRadioGroup from './check-group.vue'
	export default {
		props: ['list', 'defaultValue', 'label', 'setting', 'openkeys'],
		created() {},
		methods: {
			/**
			 * 选中变化调用
			 * @param {Object} selectData 当前选中的对象
			 * @param {Object} index 当前选中下标
			 */
			toggleSelect(data) {
				this.$emit('change',{
					...data,
					parent:(pIndex || pIndex == 0) ? this.list[pIndex] : {}
				});
			},
			changeOpenKey(key) {
				let openKey = this.openkeys.find(openKey => openKey === key);
				this.$emit('changeOpenPKey', (openKey || openKey === 0 ? 'close' : 'open'), key)
			},
			isOpen(key) {
				let openKey = this.openkeys.find(openKey => openKey === key);
				return openKey || openKey === 0
			}
		},
		components: {
			childRadioGroup
		}
	}
</script>

<style lang="less">
	.radio-slect-group {
		background: #ffffff;

		.radio-slect-item {

			.p-view {
				display: flex;
				align-items: center;
				height: 75rpx;
				padding-left: 25rpx;

				.icon {
					margin-right: 15rpx;
					width: 21.25rpx;
					height: 12.5rpx;
				}

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

		.child-radio-group {
			padding-left: 62.5rpx;
		}
	}
</style>