smartmeter-app/pages_teacher/teacher_teachers/teacher_addOperation.vue

783 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 class="Ielts">IELTS 18</view>
<view
style="background-color: #fff; padding: 32rpx 40rpx; border-radius: 20rpx 20rpx 20rpx 20rpx;">
<u-time-line>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="Test">Test 2</view>
<view class="greener">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1多选题</text>
</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="Test">Test 2</view>
<view class="greener">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1多选题</text>
</view>
</view>
</template>
</u-time-line-item>
<u-time-line-item nodeTop="2">
<template v-slot:content>
<view>
<view style="display: flex;">
<view class="Test">Test 2</view>
<view class="greener">听力</view>
</view>
<view class="u-order-desc">
<text>Part 1多选题</text>
</view>
</view>
</template>
</u-time-line-item>
</u-time-line>
</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;" v-for="(items,indexs) in item.message" :key="indexs">
<view style="display: flex; align-items: center;">
<view class="yuandi"></view>
<view class="Test">{{items.test}}</view>
<view class="ellipses">写作</view>
</view>
<view class="u-order-desc">
<text>{{items.task}}</text>
</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: []
}
},
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
});
});
// Convert groupedItems object to an array
this.selectwritelist = Object.values(groupedItems);
console.log(this.selectwritelist, 'selectwritelist');
// 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: {
mergeObjectsByExamName(existingArray, newArray) {
const mergedArray = [];
newArray.forEach(newObj => {
const existingObjIndex = existingArray.findIndex(existingObj => existingObj.examName === newObj.examName);
if (existingObjIndex !== -1) {
// 如果存在相同的 examName则合并对象
const existingObj = existingArray[existingObjIndex];
existingObj.message.push({
test: newObj.test,
task: newObj.task,
id: newObj.id,
// 其他属性...
});
// 更新数组中的对象
existingArray[existingObjIndex] = existingObj;
} else {
// 如果不存在相同的 examName则直接添加新对象
mergedArray.push({
examName: newObj.examName,
message: [{
test: newObj.test,
task: newObj.task,
id: newObj.id,
// 其他属性...
}],
// 其他属性...
});
}
});
// 添加 existingArray 中未处理的对象
existingArray.forEach(existingObj => {
const existingObjIndex = mergedArray.findIndex(obj => obj.examName === existingObj.examName);
if (existingObjIndex === -1) {
mergedArray.push(existingObj);
}
});
return mergedArray;
},
addwork() {
uni.navigateTo({
url: "/pages_teacher/teacher_teachers/teacher_writeadd?classinfo=" + encodeURIComponent(JSON.stringify(this.classinfo))
}).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>