Web_TracerMethodology/components/tm-radio-group/radio-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
						  :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 './radio-group.vue'
	export default {
    props: ['list', 'defaultValue', 'label', 'setting', 'openkeys'],
		created() {
		},
		methods: {
			/**
			 * 选中变化调用
			 * @param {Object} selectData 当前选中的对象
			 * @param {Object} index 当前选中下标
			 */
			toggleSelect(selectVal, selectData, index){
		  	this.$emit('change', selectVal, selectData, index);
      },
      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>