an_xiao/police_uniapp/pagesC/Encapsulation/Encapsulation.vue

<template>
	<view class="userinform">
		<view class="userItem">
			<u-collapse :value="item.index" accordion v-for="(item, index) in physicalEnumdata" :key="item.index">
				<u-collapse-item :name="item.index" :title="item.name">
					<view class="singleChoice" v-if="item.index === 0">
						<u-checkbox-group v-model="form[item.key]"  placement="column" @change="(arr)=>addgroups(arr,item.index)">
							<u-checkbox  v-for="(items,indexs) in item.dataList" :key="indexs"  :customStyle="{marginBottom: '8px'}"
								iconPlacement="left" size="40" labelSize="24" :label="items.name"
								:name="items.value"></u-checkbox>
						</u-checkbox-group>
					</view>
					
					<view class="singleChoice" v-else>
						<u-radio-group  v-model="form[item.key]"  placement="column" @change="(arr)=>addgroup(arr,item.index)">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(items, indexs) in item.dataList"
								iconPlacement="left" size="40" labelSize="24" :key="indexs" :label="items.name" :name="items.value" >
							</u-radio>
						</u-radio-group>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	import {
		physicalEnum
	} from './enum.js';
	import {
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				physicalEnumdata: physicalEnum,
				form: {
					zoneValue: 0,
					zoneClosed: 0,
					zoneClosedDetail: undefined,
					equipCountValue:undefined,
					equipCount:0,
					equipCountDetail:undefined,
					collisionValue:0,
					collision:0,
					collisionDetail:undefined,
					
				},

			};
		},
		created() {
			this.form = this.daily
		},
		computed: {
			// 取数据/
			...mapGetters({
				// 三色预警数据
			 daily: 'daily/getdailyinspection',
			})
		},
		mounted() {},
		methods: {
			// 存vuex数据
			...mapMutations({
				dailyinspectionList: 'daily/dailyinspectionList'
			}),
			addgroup(arr, index) {
				console.log(arr,index);
				let names = '';
				let conuts = 0;
				if (arr && arr != 0) {
					const dataLists = this.physicalEnumdata[index].dataList
					console.log(dataLists);
					const _list = dataLists.filter(item => arr == item.value)
					names = _list.map(e => e.name).join(',')
					conuts = _list.map(e => e.num).reduce((a, b) => a + b)
				}
				switch (index) {
					case 1:
						this.form.zoneClosedDetail = names;
						this.form.zoneClosed = conuts;
						break;
					case 2:
						this.form.collisionDetail = names;
						this.form.collision = conuts;
						break;
						
				}
				this.dailyinspectionList(this.form)
			},
			addgroups(arr,index){
				console.log(arr,index);
				 let  names = '';
				 let  conuts = 0;
				 if(arr && arr.length > 0){
				 	const dataLists = this.physicalEnumdata[index].dataList
				 	const _list =  dataLists.filter(item =>  arr.includes(item.value))
					console.log(_list,'44');
				 	names = _list.map(e => e.name).join(',')
				 	conuts = _list.map(e => e.num).reduce((a, b) => a + b)
				 }
				 switch (index) {	
				 	case 0:
				 	this.form.equipCountDetail = names;
				 	this.form.equipCount = conuts;
					break;
				 }
				 this.dailyinspectionList(this.form)
			}
		}
	};
</script>

<style scoped lang="scss">
	.userinform {
		height: 100%;
		width: 100%;
	}

	.userItem {
		color: #7b7b7b;
		font-size: 14px;
		margin-bottom: 8px;

		.textIndex {
			margin-left: 20rpx;
		}
	}

	.text {
		width: 96%;
	}

	.singleChoice {
		width: 90%;
	}

	.label {
		margin: 0 20px;
	}

	/deep/ .u-radio-group--row {
		display: flex;
		flex-direction: row;
		text-align: center;
		align-content: center;
		justify-content: space-evenly;
	}
</style>