Web_TracerMethodology/components/tm-checked-group/tm-checked-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 './check-group.vue'
	import radioSelectGroup from './check-select-group.vue'

	export default {
		props: {
			// 渲染的数据
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 选中的数据
			defaultValue: {
				type: Array,
				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: {
			/**
			 * 返回的参数
			 * data :
			 * -- radio-group => {checkedList,parentIndex}
			 * -- radio-select-group => {checkedList,parentIndex,parent}
			 */
			toggleSelect(data) {
				this.$emit('change',data);
			},
			// 更改父级展开的下标
			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>