Web_TracerMethodology/components/tm-radio-group/tm-radio-group.vue

<template>
	<view class="tm-radio-group">
    <component
      :is="currentComponet"
      :list="list"
      :defaultValue="defaultValue"
      :label="label"
      :setting="setting"
      :openkeys="openPkeys"
      @change="toggleSelect"
      @changeOpenPKey="changeOpenPKey"
     />
	</view>
</template>

<script>
	/**
	 * 单选列表组合/下拉式单选列表组合
	 * 芦荟
	 * 2021.2.2
	 * props：看下面，有注释说明
	 */

import radioGroup from './radio-group.vue'
import radioSelectGroup from './radio-select-group.vue'

	export default {
		props: {
			// 渲染的数据
			list: {
				type: Array,
				default: () => {
          return []
        }
			},
			// 选中的数据
			defaultValue: {
				type: Number | String,
				default: ''
      },
			// 单选列表组合名字
			label: {
				type: String,
				default: ''
			},
			// 单选组配置
			setting: {
				type: Object,
				default: () => {
          return  {
            pName: 'pName',   // 父级显示的文字
            child: 'child',  // 子数据list
				  	value: 'value', // 设置当前选中的值（默认取value）
				  	name: 'name' // 当前显示的文字（默认取name）
				  }
        }
      },
      /**
       *  单选列表组合 或 下拉式单选列表组合
       *  default：单选列表组合(如指派改善任务)  默认值
       *  select:  下拉式单选列表组合(如人员架构)
       */
      type: {
        type: String,
				default: 'default'
      },
      // 默认展开的父级下标(注意: 数组存父级元素下标)
      openkeys: {
        type: Array,
				default: () => {
          return []
        }
      },
    },
    computed: {
      // 当前显示的组件
      currentComponet() {
        return this.type === 'default' ? 'radio-group' : 'radio-select-group'
      }
    },
    data() {
      return {
        // 展开的父级下标
        openPkeys: this.openkeys
      }
    },
		methods: {
			/**
			 * 选中变化调用
			 * @param {Object} selectData 当前选中的对象
			 * @param {Object} index 当前选中下标
			 *
			 * 返回的参数
			 * selectData[this.setting.value]: 当前选中的值
			 * selectData： 当前选中的整条数据
			 * index：      当前选中的下标
			 * pSelect：    选中的父级数据
			 */
			toggleSelect(selectVal, selectData, index, pSelect){
				this.$emit('change', selectVal, selectData, index, pSelect);
      },
      // 更改父级展开的下标
      changeOpenPKey(type, key) {
        this.openPkeys = type === 'open'
          ? [...this.openPkeys, key]
          : this.openPkeys.filter(openKey => openKey != key);
      }
    },
    components: {
      radioGroup,
      radioSelectGroup
    }
	}
</script>

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

		.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;

			.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;
				}
			}
		}
	}
</style>