smartmeter-app/pages_teacher/teacher_teachers/components/compose.vue

<template>
	<!-- 外层循环 -->
	<view>
		<view v-for="(item, index) in transformedData"
			  :key="index">
			<!-- 剑18循环 -->
			<view>
				<view class="view_bages">
					<view>{{ item.examName }}</view>
				</view>
			</view>
			<!-- 渲染Text -->
			<view class="substance">
				<text v-for="text in textArr"
					  :key="text"
					  @click="textClick(item, text)"
					  :class="{ active: item.active == text }">{{ text }}</text>
			</view>
			<!-- 内容 -->
			<view class="compose_bodys">
				<view v-for="text in textArr"
					  :key="text"
					  class="zz">
					<view class="compose_body"
						  v-for="Task in taskArr"
						  :key="Task"
						  v-if="item.active == text">
						<view class="compose_left">
							<view>{{ Task }}</view>
							<view>
								<text class="fickle">{{ item[text][Task].caption }}</text>
								<text class="fickle2">{{ item[text][Task].themeCaption }}</text>
							</view>
						</view>

						<view>
							<u-checkbox @change="checkboxChange(item, text, Task, $event)"
										v-model="item[text][Task].subsetArr">{{ item.name }}</u-checkbox>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			transformedData: [],
			// 复选框
			subsetArr: [],
			textArr: ['test1', 'test2', 'test3', 'test4'],
			taskArr: ['task1', 'task2'],
			// 接口参数
			comsapi: {
				"key": "",
				"mode": "home",
				"exam": "",
				"caption": "0",
				"themeCaption": "",
				"type": "",
				"isStudy": 0,
				"isEval": 0
			},
			orgtransformedData: [],
			selectwrite: [],
		}
	},
	created() {
		this.getCompose()
	},
	
	methods: {
		updatawrite(data){
			this.selectwrite=data
			
		},
		updateSubsetArr() {
		  // 遍历 this.transformedData 中的每个项
		  for (const item of this.transformedData) {
		    // 遍历 this.selectwrite 中的每个对象
		    for (const selectedItem of this.selectwrite) {
		      const { id, test, task } = selectedItem;
		
		      // 检查 task1 中的 id 是否匹配
		      if (item[test] && item[test][task] && String(item[test][task].id) === id) {
		        this.$set(item[test][task], 'subsetArr', true);
		      } else {
		        this.$set(item[test][task], 'subsetArr', false);
		      }
		    }
		  }
		},
		//写作接口	
		getCompose() {
			this.$u.post('https://api.admin-v2.langsi.online/admin-api/writing/all/search', this.comsapi).then(res => {
				let arr = res.data
				for (let a of arr) {
					a.active = 'test1'
				}
				this.transformedData = arr
				this.orgtransformedData = JSON.parse(JSON.stringify(arr));
				let json = JSON.stringify(this.transformedData)
				// console.log(json, 'this.transformedData');
				this.updateSubsetArr()
			})
		},
		textClick(item, text) {
			item.active = text
			this.$forceUpdate()
		},
		checkboxChange(item, text, Task, event) {
			const examName = item.examName;
			const test = text; // text 就是 test 字段的内容
			const taskId = Task; // Task 就是 task 字段的内容
			const id = String(item[test][taskId].id);

			// 构建对象
			const newObject = {
				examName: examName,
				test: test,
				task: taskId,
				id: id,
			};

			// 查找数组中是否已存在相应的对象
			const existingObjectIndex = this.findIndexByFields(this.selectwrite, newObject);

			if (existingObjectIndex === -1) {
				// 如果不存在，添加到数组
				this.selectwrite.push(newObject);
			} else {
				// 如果存在，根据索引删除对象
				this.selectwrite.splice(existingObjectIndex, 1);
			}
			
			this.$parent.updatawrite(this.selectwrite)
			// 更新其他状态...
		},
		findIndexByFields(array, fields) {
			// 根据指定字段值查找对象在数组中的索引
			for (let i = 0; i < array.length; i++) {
				let isEqual = true;
				for (const key in fields) {
					if (fields[key] !== array[i][key]) {
						isEqual = false;
						break;
					}
				}
				if (isEqual) {
					return i;
				}
			}
			return -1;
		},
	}
}
</script>

<style lang="scss" scoped>
.view_bages {
	font-size: 40rpx;
	font-weight: 400;
	color: #2E4975;
}

.substance {
	margin: 20rpx 0;

	text {
		padding: 10rpx 30rpx;
		margin-right: 20rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
}

.compose_bodys {
	margin: 30rpx 0;
}

.compose_body {
	display: flex;
	background: #FFFFFF;
	align-items: center;
	justify-content: space-between;
	margin: 0rpx 20rpx;
	border-bottom: 2rpx solid #F2F2F2;
}

.compose_body:last-child {
	border: none;
}

.zz {
	background: #ffff;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
}

.compose_left {
	display: flex;
	padding: 24rpx 0;
	margin: 0 24rpx;
}

.fickle {
	padding: 4rpx 22rpx;
	font-size: 20rpx;
	font-weight: 500;
	color: #2D7CE6;
	margin-left: 12rpx;
	background: #E1EEFF;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}

.fickle2 {
	padding: 4rpx 32rpx;
	font-size: 20rpx;
	font-weight: 500;
	color: #FB9734;
	margin-left: 12rpx;
	background: #FFEBD7;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}

.active {
	color: #fff;
	background: #007AFF !important;
}
</style>