smartmeter-app/pages_teacher/teacher_teachers/teacher_addOperation.vue

<template>
	<view class="concent">
		<view class="view_body">
			<u-navbar :is-back="true"
					  title='添加作业'
					  title-color="#000"
					  :border-bottom="false"
					  :background="bgc"
					  id="navbar">
			</u-navbar>
			<view class="view_header">
				<view class="view_title">标题</view>
				<view class="view_input">
					<u-form-item prop="value">
						<u-input v-model="worktit"
								 :type="type"
								 :border="border"
								 placeholder="输入作业标题" />
					</u-form-item>
				</view>
			</view>
			<!-- 班级安排 -->
			<view>
				<view class="view_tubiao">
					<view class="view_title">班级安排</view>
					<view class="view_tb"
						  @click="addclass()">
						+
					</view>
				</view>
				<view class="noting"
					  v-if="classinfo.length <= 0">
					<image src="https://file.langsi.online/yasiimg/web/static/ulqScWZvBYd22CW5uV0H"></image>
					<view class="text1">
						暂未安排哦！
					</view>
					<view class="text2"
						  @click="addclass()">
						去安排
					</view>
				</view>
				<view class="class_bj">

					<view class="class_images">
						<view class="class_ys"
							  v-for="(item, index) in classinfo"
							  :key="index"
							  style="position: relative;">
							<view class="close"
								  style="position: absolute;top: 0rpx;right: 8rpx;width: 20rpx;height: 20rpx;"
								  @click="delcls(item.id)">
								<image src="https://file.langsi.online/yasiimg/web/static/ueH3qwYazyVXmiYoVPJE"
									   mode="">
								</image>
							</view>
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw"
									   mode="">
								</image>
							</view>
							<view class="class_wz">{{ item.name }}</view>
						</view>


					</view>
				</view>
			</view>
			<!-- 学员安排 -->
			<view>
				<view class="view_tubiao">
					<view class="view_title">学员安排</view>
					<view class="view_tb"
						  @click="toaddstu()">

						+
					</view>
				</view>
				<view class="noting"
					  v-if="stuinfo.length <= 0">
					<image src="https://file.langsi.online/yasiimg/web/static/ulqScWZvBYd22CW5uV0H"></image>
					<view class="text1">
						暂未安排哦！
					</view>
					<view class="text2"
						  @click="toaddstu()">
						去安排
					</view>
				</view>
				<view class="class_bj">
					<view class="class_images">
						<view class="class_ys"
							  v-for="(item, index) in stuinfo"
							  :key="index"
							  style="position: relative;">
							<view class="close"
								  style="position: absolute;top: 0rpx;right: 8rpx;width: 20rpx;height: 20rpx;"
								  @click="delstu(item.id)">
								<image src="https://file.langsi.online/yasiimg/web/static/ueH3qwYazyVXmiYoVPJE"
									   mode="">
								</image>
							</view>
							<view class="class_tp">
								<image :src="item.avatar"
									   mode=""></image>
							</view>
							<view class="class_wz">{{ item.name }}</view>
						</view>

					</view>


				</view>
			</view>
			<!-- 作业安排 -->
			<view>
				<view>
					<view>
						<view class="view_tubiao">
							<view class="view_title">作业安排</view>
						</view>
						
					</view>
					<view>
						<view  v-for="(item,index) in selectreadlist" :key="index">
							<view class="Ielts">{{item.papername}}</view>
							<view
								  style="background-color: #fff; padding: 32rpx 40rpx;border-radius: 20rpx 20rpx 20rpx 20rpx;">
								<u-time-line>
									<u-time-line-item nodeTop="2"
													 v-for="(items,indexs) in item.message" :key="indexs">
										<template v-slot:content>
											<view>
												<view style="display: flex;flex-wrap: nowrap;">
					
													<view class="Test"
														 >{{items.testname}}</view>
					
													<view class="ellipses">阅读</view>
													
													
												</view>
												<view class="u-order-desc">
														<text>{{items.questionname}} {{items.typeName}}</text>
												</view>
											</view>
										</template>
									</u-time-line-item>
					
								</u-time-line>
							</view>
						</view>
					</view>
					<view>
						<view  v-for="(item,index) in selectlistenlist" :key="index">
							<view class="Ielts">{{item.papername}}</view>
							<view
								  style="background-color: #fff; padding: 32rpx 40rpx;border-radius: 20rpx 20rpx 20rpx 20rpx;">
								<u-time-line>
									<u-time-line-item nodeTop="2"
													 v-for="(items,indexs) in item.message" :key="indexs">
										<template v-slot:content>
											<view>
												<view style="display: flex;flex-wrap: nowrap;">
					
													<view class="Test"
														 >{{items.testname}}</view>
					
													<view class="greener">听力</view>
													
					
												</view>
												<view class="u-order-desc">
														<text>{{items.questionname}} {{items.typeName}}</text>
												</view>
											</view>
										</template>
									</u-time-line-item>
					
								</u-time-line>
							</view>
						</view>
					</view>
					<view>
						<view  v-for="(item,index) in selectwritelist" :key="index">
							<view class="Ielts">{{item.examName}}</view>
							<view
								  style="background-color: #fff; padding: 32rpx 40rpx;border-radius: 20rpx 20rpx 20rpx 20rpx;">
								<u-time-line>
									<u-time-line-item nodeTop="2"
													 v-for="(items,indexs) in item.message" :key="indexs">
										<template v-slot:content>
											<view>
												<view style="display: flex;flex-wrap: nowrap;">
					
													<view class="Test"
														 >{{items.test}}</view>
					
													<view class="ellipses" style="background: rgba(63,122,242,0.2);color: #3F7AF2;">写作</view>
					
												</view>
												<view class="u-order-desc">
														<text>{{items.task}}</text>
												</view>
											</view>
										</template>
									</u-time-line-item>
					
								</u-time-line>
							</view>
						</view>
					</view>
					<view>
						<view>
							<view class="Ielts"></view>
							<view
								  style="background-color: #fff; padding: 32rpx 40rpx;border-radius: 20rpx 20rpx 20rpx 20rpx;">
								<u-time-line>
									<u-time-line-item nodeTop="2"
													  v-for="(item, index) in selectspeak"
													  :key="index">
										<template v-slot:content>
											<view>
												<view style="display: flex;flex-wrap: nowrap;">

													<view class="Test"
														  style="width: 80%;">{{ item.part }}-{{ item.introduction }}</view>

													<view class="erotic">口语</view>

												</view>
												<view class="u-order-desc">
													<view style="display: inline;">
														<view class="txt">{{ item.topicEn }}:</view>
														<view v-for="(items, indexs) in item.speakingType"
															  :key="indexs"
															  class="type"
															  style="display: inline;">
															<view v-if="items == 1">串题</view>
															<view v-else-if="items == 2">跟读</view>
															<view v-else-if="items == 3">模考</view>
														</view>
													</view>
												</view>
											</view>
										</template>
									</u-time-line-item>

								</u-time-line>
							</view>
						</view>
					</view>
					<!--按钮 -->
					<view style="display: flex; justify-content: center; margin-top: 32rpx;"
						  @click="addwork()">
						<view class="increase">
							<u-icon name="plus"></u-icon>
							添加
						</view>
					</view>
				</view>

			</view>
			<!-- 截止时间 -->
			<view>
				<view class="view_tubiao">
					<view class="view_title">截止时间</view>
				</view>
				<view>
					<view class="view_form">
						<u-picker mode="time"
								  v-model="show"
								  :params="params"
								  @confirm="printValue"></u-picker>
						<u-form-item prop="times">
							<u-input v-model="times"
									 :type="type"
									 :border="border"
									 placeholder="选择作业截止的时间"
									 @click="show = true"
									 placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;" />
						</u-form-item>


					</view>
				</view>
			</view>
			<!-- 描述 -->
			<view>
				<view class="view_tubiao">
					<view class="view_title">描述</view>
				</view>
				<view class="view_textrea">
					<textarea value=""
							  placeholder="输入你的描述... "
							  placeholder-style="color: rgba(46,73,117,0.4);font-size: 24rpx;" />
				</view>
			</view>
		</view>

		<!-- 按钮 -->
		<view class="zhanwei"
			  style="width: 100%;height: 230rpx;">

		</view>
		<view class="botbtn">
			<view class="btn"
				  @click="addclassinfo()">
				确定添加
			</view>
		</view>

	</view>
</template>
<script>
export default {
	data() {
		return {
			bgc: {
				backgroundColor: "#F6F9FC",
			},
			// prick 时间选择框数据
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: false,
				second: false
			},
			show: false,
			radio: '',
			switchVal: false,
			classinfo: [],
			stuinfo: [],
			worktit: '',
			times: '',
			selectspeak: [],
			selectwrite: [],
			selectlisten: [],
			selectread: [],
			selectwritelist: [],
			selectlistenlist: [],
			selectreadlist: [],

		}
	},
	onLoad(option) {
		uni.removeStorageSync('selectedClassInfo');
		uni.removeStorageSync('selectedStuInfo');
		// this.classinfo=JSON.parse(decodeURIComponent(option.classinfo))
		let classinofs = [{
			name: '阅读5班',
			avatar: 'Excepteur',
			id: 15,

		}]
		this.classinfo = classinofs

	},
	onShow() {
		// Read selectedClassInfo data
		const selectedClassInfo = uni.getStorageSync('selectedClassInfo');

		if (selectedClassInfo && selectedClassInfo.length > 0) {
			this.classinfo = selectedClassInfo
			// Remove duplicates from this.classinfo
			//     this.classinfo = this.classinfo.filter(item => !selectedClassInfo.some(selectedItem => selectedItem.id === item.id));

			//     // Add non-duplicate items from selectedClassInfo to this.classinfo
			//     this.classinfo = this.classinfo.concat(selectedClassInfo);

		}
		const selectedstuInfo = uni.getStorageSync('selectedStuInfo');

		if (selectedstuInfo && selectedstuInfo.length > 0) {
			this.stuinfo = selectedstuInfo
			// Remove duplicates from this.classinfo
			// this.stuinfo = this.stuinfo.filter(item => !selectedstuInfo.some(selectedItem => selectedItem.id === item.id));

			// // Add non-duplicate items from selectedClassInfo to this.classinfo
			// this.stuinfo = this.stuinfo.concat(selectedstuInfo);

		}
		const selectforwork = uni.getStorageSync('selectforwork');
		console.log(selectforwork, 'selectedClassInfoselectedClassInfo');
		if (selectforwork) {
			this.selectspeak = selectforwork.selectspeak
			this.selectwrite = selectforwork.selectwrite
			this.selectlisten = selectforwork.selectlisten
			this.selectread = selectforwork.selectread
			// this.selectwrite = selectforwork.selectwrite;
			//处理写作数据
			const groupedItems = {};

			this.selectwrite.forEach(item => {
				const examName = item.examName;

				if (!groupedItems[examName]) {
					groupedItems[examName] = {
						examName: examName,
						message: []
					};
				}

				groupedItems[examName].message.push({
					test: item.test,
					task: item.task,
					id: item.id
				});
			});
			
			
			this.selectwritelist = Object.values(groupedItems);
			//处理听力数据
			const groupedItems1 = {};
			
			this.selectlisten.forEach(item => {
				const papername = item.papername;
			
				if (!groupedItems1[papername]) {
					groupedItems1[papername] = {
						papername: papername,
						message: []
					};
				}
			
				groupedItems1[papername].message.push({
					id: item.id,
					paperId: item.paperId,
					// papername: paperTitle,
					partId: item.partId,
					testId: item.testId,
					testname: item.testname,
					typeName: item.typeName,
					questionname:item. questionname,
				});
			});
			
			// Convert groupedItems object to an array
			this.selectlistenlist = Object.values(groupedItems1);
			
			const groupedItems2 = {};
			
			this.selectread.forEach(item => {
				const papername = item.papername;
			
				if (!groupedItems2[papername]) {
					groupedItems2[papername] = {
						papername: papername,
						message: []
					};
				}
			
				groupedItems2[papername].message.push({
					id: item.id,
					paperId: item.paperId,
					// papername: paperTitle,
					partId: item.partId,
					testId: item.testId,
					testname: item.testname,
					typeName: item.typeName,
					questionname:item. questionname,
				});
			});
			
			// Convert groupedItems object to an array
			this.selectreadlist = Object.values(groupedItems2);

			console.log(this.selectreadlist, 'this.selectread');
				console.log(this.selectlistenlist, 'this.selectlisten');
			// Remove duplicates from this.classinfo
			// this.stuinfo = this.stuinfo.filter(item => !selectedstuInfo.some(selectedItem => selectedItem.id === item.id));

			// // Add non-duplicate items from selectedClassInfo to this.classinfo
			// this.stuinfo = this.stuinfo.concat(selectedstuInfo);

		}

	},
	methods: {
	
		addwork() {
			const dataToSave = {
			  selectspeak: this.selectspeak,
			  selectwrite: this.selectwrite,
			  selectlisten: this.selectlisten,
			  selectread: this.selectread
			};
			uni.navigateTo({
				url: "/pages_teacher/teacher_teachers/teacher_writeadd?dataToSave=" + encodeURIComponent(JSON.stringify(dataToSave))
			}).then(res => {

			}).catch(err => {

			});
		},
		delcls(id) {
			this.classinfo = this.classinfo.filter(item => item.id !== id);
		},
		delstu(id) {
			this.stuinfo = this.stuinfo.filter(item => item.id !== id);
		},
		toaddstu() {
			uni.navigateTo({
				url: "/pages_teacher/pages_add/add_studentsforwork?stuinfo=" + encodeURIComponent(JSON.stringify(this.stuinfo))

			}).then(res => {

			}).catch(err => {

			});
		},
		addclass() {
			uni.navigateTo({
				url: "/pages/Mystudent/addclassforwork?classinfo=" + encodeURIComponent(JSON.stringify(this
					.classinfo))
			}).then(res => {

			}).catch(err => {

			});
		},

		// 获取截止时间
		printValue(e) {
			this.times = `${e.year}-${e.month}-${e.day}`
		},
		submit() {

		}
	}
}
</script>
<style lang="scss" scoped>
.botbtn {
	padding: 32rpx 32rpx 0 32rpx;
	// margin-left: -32rpx;
	position: fixed;
	bottom: 0;
	width: 750rpx;
	height: 200rpx;
	background: #FFFFFF;
	box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202, 202, 202, 0.25);
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	z-index: 999;

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: 'PingFang', 'PingFang';
		font-weight: 800;
		color: #FFFFFF;
		width: 686rpx;
		height: 80rpx;
		background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
		border-radius: 104rpx 104rpx 104rpx 104rpx;
	}
}

// 样式穿透
::v-deep .u-dot {
	background: #2D7CE6 !important;
}

.concent {
	width: 100vw;
	background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
}

.view_body {
	width: 91.3%;
	margin: 0 auto;
}

.view_title {
	font-size: 28rpx;
	font-family: 'PingFang';
	font-weight: 800;
	color: #2E4975;
}

.view_input {
	line-height: 70rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin-top: 16rpx;
	padding: 0 24rpx;
}

.view_tubiao {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 46rpx;

	.view_tb {
		display: flex;
		padding-left: 24rpx;
		// align-items: center;
		// padding: 11rpx  24rpx 11rpx 24rpx;
		width: 120rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 26rpx 26rpx 26rpx 26rpx;

		border: 2rpx solid #F1F1F1;

		color: #F18F21;
		font-size: 30rpx;
	}
}

.noting {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	margin-top: 16rpx;
	width: 686rpx;
	height: 124rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 20rpx 20rpx;

	image {
		width: 58.19rpx;
		height: 60rpx;
	}

	.text1 {
		margin-left: 12rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #627698;
	}

	.text2 {
		margin-left: 12rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #2D7CE6;
		border-bottom: 2px solid #2D7CE6;
	}
}

.class_bj {
	margin-top: 16rpx;
}

.class_images {
	display: flex;
	flex-wrap: wrap;
	// justify-content: space-between;
	// margin-top: 20rpx;
}

.class_tp {
	width: 56rpx;
	height: 56rpx;
	margin-right: 12rpx;
}

.Ielts {
	font-size: 40rpx;
	font-weight: 400;
	color: #2E4975;
	margin: 20rpx 0;
}

.class_ys:nth-child(3n) {
	margin-right: 0;
}

.class_ys {
	margin-top: 20rpx;
	margin-right: 20rpx;
	width: 215rpx;
	height: 96rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20rpx;
	// width: 215rpx;
	height: 96rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}


.class_wz {
	width: 125rpx;
	font-size: 28rpx;
	font-family: 'PingFang';
	font-weight: 500;
	color: #072F5A;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.view_form {
	padding: 0rpx 32rpx;
	background: #FFFFFF;
	margin-top: 16rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.view_textrea {
	height: 260rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	;
	margin-top: 16rpx;
	padding: 28rpx 32rpx;
}

.view_button {
	width: 93.1%;
	margin: auto;
	text-align: center;
	line-height: 80rpx;
	background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
	border-radius: 104rpx 104rpx 104rpx 104rpx;
	color: #FFFFFF;
}

.view_footer {
	width: 100%;
	padding: 0 16rpx;
	height: 144rpx;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	padding: 32rpx 0rpx;
	background-color: #fff;
	box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202, 202, 202, 0.25);
	margin-top: 8rpx;
}

.u-node {
	width: 44rpx;
	height: 44rpx;
	border-radius: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #d0d0d0;
}

.u-order-desc {
	display: block;
	// flex-wrap: nowrap;
	padding: 20rpx;
	background: #F9F9F9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 12rpx 0rpx;

	.txt {

		font-size: 24rpx;
		font-weight: 500;
		color: #2E4975;
	}
}

.u-order-time {
	color: rgb(200, 200, 200);
	font-size: 26rpx;
}

.yuandi {
	width: 18rpx;
	height: 18rpx;
	background: #2D7CE6;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}

.Test {
	font-size: 28rpx;
	font-weight: 800;
	color: #2E4975;
	margin-left: 12rpx;
}

.ellipses {
	font-size: 20rpx;
	background: rgba(242, 170, 2, 0.2);
	margin-left: 12rpx;
	padding: 8rpx 20rpx;
	color: #F2AA02;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.erotic {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80rpx;
	height: 36rpx;
	font-size: 20rpx;
	background: rgba(242, 63, 170, 0.1);
	margin-left: 12rpx;
	// padding: 8rpx 20rpx;
	color: #F23FEB;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.greener {
	font-size: 20rpx;
	background: rgba(27, 225, 178, 0.1);
	margin-left: 12rpx;
	padding: 8rpx 20rpx;
	color: #1BE1B2;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}

.increase {
	padding: 26rpx 125rpx;
	color: #FFFFFF;
	background-color: #F39852;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	text-align: center;
}
</style>