pbl-teacher-table/src/components/pages/classroomObservation/components/baseMessage.vue

<template>
	<div class="message">
		<div class="m-header" @click.stop="changeShowMain(!showMain)">
			<span :class="['m-h-icon', showMain ? 'm-h-icon-active' : '']"></span>
			<span class="m-h-title">{{ title }}</span>
		</div>
		<div class="m-main" v-show="showMain">
			<div class="m-m-form">
				<div class="m-m-formItem" style="width: clamp(50%, 50%, 50%)">
					<div class="m-m-fi-label">课堂名称</div>
					<div class="m-m-fi-input">
						<el-input
							v-model="data.courseName"
							placeholder="请输入课堂名称"
							@change="changeData()"
						></el-input>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(21%,21%,21%)">
					<div class="m-m-fi-label">授课老师</div>
					<div class="m-m-fi-input">
						<el-input
							v-model="data.teacherName"
							placeholder="请输入授课老师"
							@change="changeData()"
						></el-input>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(22%,22%,22%)"">
					<div class="m-m-fi-label">授课时间</div>
					<div class="m-m-fi-input">
						<el-date-picker
							v-model="data.time"
							type="datetime"
							format="yyyy-MM-dd HH:mm:ss"
							value-format="yyyy-MM-dd HH:mm:ss"
							style="width: 100%"
							@change="changeData()"
							placeholder="请选择授课时间"
						>
						</el-date-picker>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(24%,24%,24%)"">
					<div class="m-m-fi-label">授课年级</div>
					<div class="m-m-fi-input">
						<el-select
							style="width: 100%"
							v-model="data.grade"
							@change="changeData()"
							placeholder="请选择年级"
						>
							<el-option
								v-for="(item, index) in gradeList"
								:key="index"
								:value="item.value"
								:label="item.label"
							></el-option>
						</el-select>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(24.5%,24.5%,24.5%)">
					<div class="m-m-fi-label">授课科目</div>
					<div class="m-m-fi-input">
						<el-select
							style="width: 100%"
							v-model="data.subject"
							@change="changeData()"
							placeholder="请选择年级"
						>
							<el-option
								v-for="(item, index) in subjectList"
								:key="index"
								:value="item.value"
								:label="item.label"
							></el-option>
						</el-select>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(21%,21%,21%)"">
					<div class="m-m-fi-label">教材版本</div>
					<div class="m-m-fi-input">
						<el-input
							v-model="data.textbook"
							placeholder="请输入教材版本"
							@change="changeData()"
						></el-input>
					</div>
				</div>

				<div class="m-m-formItem" style="width: clamp(22%,22%,22%)"">
					<div class="m-m-fi-label">学生人数</div>
					<div class="m-m-fi-input">
						<el-input
							v-model.number="data.studentNum"
							placeholder="请输入学生人数"
							@change="changeData()"
						></el-input>
					</div>
				</div>
			</div>
			<div class="fileList">
				<div class="fl_img">
					<div class="imgTit">
						<span>课堂图片</span>
						<span>（建议图片比例16:9，最多上传3张）</span>
					</div>
					<div class="m-m-formImage" v-loading="uploadImageLoading">
								<div
									class="m-m-fi-imageItem"
									v-for="(value, key, index) in imageList"
									:key="index"
									v-if="(key == 'fileList1' || key == 'fileList2' || key == 'fileList3') && value.length >0"
									@click.stop="previewImg(value[0].url)"
									style="max-width:32%;"
								>
									<el-image
										class="itemUrl"
										:src="value[0].url"
										fit="cover"
										style="width: 100%;"
									></el-image>
									<span @click.stop="delImage(key)"></span>
									<!-- <img class="itemUrl" :src="value[0].url" alt="" /> -->
								</div>
								<!-- 图片区域 -->

							<div
								class="m-m-fi-imageItem"
								@click.stop="addImage()"
								style="max-width:32%;"
								v-if="
									imageList.fileList1 &&
									imageList.fileList1.length +
										imageList.fileList2.length +
										imageList.fileList3.length <
										3
								"
							>
								<img
									src="../../../../assets/icon/classroomObservation/Union.svg"
									alt=""
								/>
								<div
									style="
										font-size: 12px;
										font-weight: 400;
										margin-top: 5px;
										color: rgba(0, 0, 0, 0.4);
									"
								>
									点击上传图片
								</div>
							</div>
							<!-- 图片区域 -->
						<!-- <div class="m-m-fi-btn" >添加课堂图片</div> -->
					</div>
				</div>
				<div class="fl_video">
					<div class="imgTit">
						<span>课堂视频</span>
						<span></span>
						<!-- <span>（建议视频比例16:9，最多上传1个）</span> -->
					</div>
					<div class="m-m-formImage" v-loading="uploadVideoLoading">
								<div
									class="m-m-fi-imageItem"
									style="max-width:33%;"
									v-if="!imageList.videoList.length==0"
									v-for="(item, index) in imageList.videoList?imageList.videoList:[]"
									:key="index"
									@click.stop="previewVideo(item.url)"
								>
								<!-- <div>{{ item }}</div> -->
									<el-image
										class="itemUrl"
										:src="require('../../../../assets/icon/classroomObservation/isVideo.png')"
										fit="cover"
									></el-image>
									<span @click.stop="delVideo('videoList')"></span>
								</div>
							<!-- <el-progress v-if="progressData.uploadVideo && !imageList.videoList.length" class="m_m_fi_progress" :percentage="progressData.value"></el-progress> -->
							<div
								class="m-m-fi-imageItem"
								@click.stop="addVideo()"
								style="max-width:33%;"
								v-if="(((imageList.videoList&&imageList.videoList.length<=0) || !imageList.videoList) && !progressData.uploadVideo)"
							>
								<img
									src="../../../../assets/icon/classroomObservation/Union.svg"
									alt=""
								/>
								<div
									style="
										font-size: 12px;
										font-weight: 400;
										margin-top: 5px;
										color: rgba(0, 0, 0, 0.4);
									"
								>
									点击上传视频
								</div>
							</div>

							<div
								class="m-m-fi-imageItem"
								style="max-width:33%;border-radius: 8px;overflow: hidden;"
								v-if="progressData.uploadVideo && !imageList.videoList.length""
							>
							<el-image
								class="itemUrl"
								:src="require('../../../../assets/icon/classroomObservation/videoFile.svg')"
								fit="cover"
							></el-image>
							<div class="m_m_fi_progress">
									<div>{{ progressData.value }}%</div>
									<span>上传中...</span>
									<div class="m_m_fi_p_bar">
										<div :style="{width:progressData.value+'%'}"></div>
									</div>
							</div>
						</div>
						<!-- <div class="m-m-fi-btn" >添加课堂图片</div> -->
					</div>
				</div>
			</div>
		</div>
		<previewVideoDialog ref="previewVideoDialogRef"/>
	</div>
</template>

<script>
import previewVideoDialog from './previewVideoDialog.vue';
export default {
	emits: ["saveData", "saveImage", "saveVideo","delImage"],
	components:{
		previewVideoDialog
	},
	props: {
		data: {
			type: Object,
			default: () => {
				return {};
			},
		},
		tid:{
			type:String,
			default:"",
		},
		imageList: {
			type: Object,
			default: () => {
				return {
					fileList:[],
					fileList1:[],
					fileList2:[],
					fileList3:[],
					videoList:[],
				};
			},
		},
	},
	data() {
		return {
			title: "基本信息",
			showMain: true,
			uploadImageLoading: false,
			uploadVideoLoading:false,
			from: {
				courseName: "",
				teacherName: "",
				grade: "",
				subject: "",
				class: "",
				studentNum: 0,
			},
			gradeList: [
				{ value: "小学一年级", label: "小学一年级" },
				{ value: "小学二年级", label: "小学二年级" },
				{ value: "小学三年级", label: "小学三年级" },
				{ value: "小学四年级", label: "小学四年级" },
				{ value: "小学五年级", label: "小学五年级" },
				{ value: "小学六年级", label: "小学六年级" },
			],
			subjectList: [
				{ value: "语文", label: "语文" },
				{ value: "数学", label: "数学" },
				{ value: "英语", label: "英语" },
				{ value: "科学", label: "科学" },
				{ value: "信息技术", label: "信息技术" },
				{ value: "心理", label: "心理" },
				{ value: "物理", label: "物理" },
				{ value: "化学", label: "化学" },
				{ value: "生物", label: "生物" },
				{ value: "历史", label: "历史" },
				{ value: "地理", label: "地理" },
				{ value: "通用技术", label: "通用技术" },
				{ value: "政治", label: "政治" },
				{ value: "STEM", label: "STEM" },
				{ value: "美术", label: "美术" },
				{ value: "音乐", label: "音乐" },
				{ value: "其他", label: "其他" },
			],
			progressData:{
				uploadVideo:false,
				value:0,
			}
		};
	},
	watch:{
		imageList(){
			this.$forceUpdate();
		}
	},
	methods: {
		// 添加图片
		addImage() {
			if(!this.tid)return this.$message.error("请选择课堂")
			// 上传录音
			let input = document.createElement("input");
			input.type = "file";
			input.accept = "image/*";
			input.click();
			input.onchange = () => {
				this.uploadImageLoading = true;
				let file = input.files[0];
				var credentials = {
					accessKeyId: "AKIATLPEDU37QV5CHLMH",
					secretAccessKey: "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",
				}; //秘钥形式的登录上传
				window.AWS.config.update(credentials);
				window.AWS.config.region = "cn-northwest-1"; //设置区域

				var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
				var _this = this;

				if (file) {
					var params = {
						Key:
							file.name.split(".")[0] +
							new Date().getTime() +
							"." +
							file.name.split(".")[file.name.split(".").length - 1],
						ContentType: file.type,
						Body: file,
						"Access-Control-Allow-Credentials": "*",
						ACL: "public-read",
					}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
					var options = {
						partSize: 2048 * 1024 * 1024,
						queueSize: 2,
						leavePartsOnError: true,
					};
					bucket
						.upload(params, options)
						.on("httpUploadProgress", function (evt) {
							//这里可以写进度条
							// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
						})
						.send(function (err, data) {
							if (err) {
								_this.$message.error("上传失败");
							} else {
								_this.$emit("saveImage", {
									name: data.key,
									status: "success",
									uid: "1",
									url: data.Location,
								});
								// _this.from.audioUrl = data.Location;
								// _this.from.audioName = file.name;
								// _this.from.audioSize = file.size;
								// _this.from.audioTime = file.lastModified;

								// console.log(data.Location)
							}
							_this.uploadImageLoading = false;
						});
				}
			};
			// this.mainBtnStatus = 1;
			// this.barNum = 4;
		},
		// 添加视频
		addVideo(){
			if(!this.tid)return this.$message.error("请选择课堂")
			let input = document.createElement("input");
			input.type = "file";
			input.accept = "video/*";
			input.click();
			input.onchange = () => {
				this.progressData.uploadVideo = true;
				// this.uploadVideoLoading = true;
				let file = input.files[0];
				var credentials = {
					accessKeyId: "AKIATLPEDU37QV5CHLMH",
					secretAccessKey: "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",
				}; //秘钥形式的登录上传
				window.AWS.config.update(credentials);
				window.AWS.config.region = "cn-northwest-1"; //设置区域

				var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
				var _this = this;

				if (file) {
					var params = {
						Key:
							file.name.split(".")[0] +
							new Date().getTime() +
							"." +
							file.name.split(".")[file.name.split(".").length - 1],
						ContentType: file.type,
						Body: file,
						"Access-Control-Allow-Credentials": "*",
						ACL: "public-read",
					}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
					var options = {
						partSize: 2048 * 1024 * 1024,
						queueSize: 2,
						leavePartsOnError: true,
					};
					
					bucket
						.upload(params, options)
						.on("httpUploadProgress", function (evt) {
							//这里可以写进度条
							// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
							_this.progressData.value = parseInt((evt.loaded * 100) / evt.total)
						})
						.send(function (err, data) {
							if (err) {
								_this.$message.error("上传失败");
							} else {
								_this.$emit('saveVideo',{
										name: data.key,
										status: "success",
										uid: "1",
										url: data.Location,
								})
							}
							_this.progressData.uploadVideo = false;
							_this.progressData.value = 0;
							// _this.uploadVideoLoading = false;
						});
				}
			};
		},

		// 删除图片
		delImage(key) {
			this.$confirm("确定删除该图片吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				this.$emit("delImage", key);
			});
		},
		// 删除视频
		delVideo(key){
			this.$confirm("确定删除该视频吗？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				this.$emit("delImage", key);
			}).catch(e=>{
				console.log("取消删除")
			});
		},
		changeShowMain(newValue) {
			this.showMain = newValue;
		},
		previewImg(url) {
			this.$hevueImgPreview(url);
		},
		previewVideo(url){
			this.$refs.previewVideoDialogRef.open(url)
			// this.$message.info(`预览:${url}`)
		},
		changeData() {
			if(!this.tid)return this.$message.error("请选择课堂")
			this.$emit("saveData");
		},
	},
	mounted() {},
};
</script>

<style scoped>
.message {
	width: 100%;
	height: auto;
}
.imgTit {
	height: 40px;
	line-height: 40px;
}
.imgTit :first-child {
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	text-align: right;
}
.imgTit :last-child {
	font-family: PingFang SC;
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	color: rgba(0, 0, 0, 0.4);
}
.baseInfoLeft {
	display: flex;
	width: 70%;
	flex-direction: column;
	/* justify-content: space-between; */
	margin-right: 10px;
}
.baseInfoLeft >>> .baseInfoLeftBot {
	display: flex;
	justify-content: space-between;
	margin: 10px 0;
}
.m-m-formItemBot {
	width: 30%;
	/* height: auto; */
	/* display: flex; */
	/* flex-direction: column; */
	/* align-items: left; */
	/* margin-bottom: 20px; */
}
.baseInfoRight {
	display: flex;
	flex: 1;
	flex-direction: column;
	/* justify-content: space-between; */
}

.m-header {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.m-h-icon {
	width: 16px;
	height: 16px;
	background: url("../../../../assets/icon/classroomObservation/right.svg")
		no-repeat;
	background-size: 100% 100%;
	margin-right: 5px;
	transition: 0.3s;
}

.m-h-icon-active {
	transform: rotate(90deg);
}

.m-h-title {
	font-size: 18px;
}

.m-main {
	width: calc(100% - 10px);
	height: auto;
	border-radius: 5px;
	background-color: #ffffff;
	padding: 20px 20px 0 20px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

.m-m-form {
	display: flex;
	flex-wrap: wrap;
	width: 100%;

}

.m-m-formItem {
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: left;
	margin-top: 10px;
	margin-right: 1.5%;
	/* margin-bottom: 10px; */
}

.m-m-fi-input {
	max-width: 100%;
}

.m-m-fi-label {
	font-size: 16px;
	display: flex;
	padding-bottom: 5px;
	/* justify-content: center; */
	/* align-items: center; */
	box-sizing: border-box;
	/* padding: 0 10px; */
	text-wrap: nowrap;
	min-width: fit-content;
}

.m-m-formImage {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.m-m-fi-imageList {
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap;
}

.m-m-fi-imageItem {
	width: auto;
	height: auto;
	background-color: rgba(238, 238, 238, 1);
	width: 140px;
	height: 100px;
	margin-right: 1%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-sizing: border-box;
	font-size: 14px;
	cursor: pointer;
	position: relative;
	margin-bottom: 10px;
}
.m-m-fi-imageItem > .itemUrl {
	width: 100%;
	height: 100%;
}

.m-m-fi-imageItem > span {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 4px;
	top: 4px;
	background-image: url("../../../../assets/icon/classroomObservation/delFile.svg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: none;
	/* display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	box-sizing: border-box;
	padding: 2px 10px;
	color: #666666;
	font-size: 18px;
	background-color: #FFBBBB;
	cursor: pointer;
	border-radius: 100%;
	display: none; */
}

.m-m-fi-imageItem:hover > span {
	display: flex;
}

/* .m-m-fi-i-icon {
	width: 20px;
	height: 20px;
	background: url("../../../../assets/icon/classroomObservation/file.png")
		no-repeat;
	background-size: 100% 100%;
	margin-right: 5px;
} */

.m-m-fi-btn {
	width: auto;
	height: 35px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 18px;
	font-size: 14px;
	border: solid 1px #c5c5c5;
	background-color: white;
	cursor: pointer;
	padding: 0 10px;
}

.fileList{
	width: 100%;
	position: relative;
	display: flex;
}

.fl_img{
	width: 50%;
	height: auto;
}

.fl_video{
	width: 48.5%;
	margin-left: 1.5%;
	height: auto;
}


.m_m_fi_progress{
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* 加载 */
	cursor:wait !important;
	background-color: #00000099;
}

.m_m_fi_progress>div:nth-child(1){
	font-size: 20px;
	color: white;
}

.m_m_fi_progress>span:nth-child(2){
	font-size: 16px;
	color: #FFFFFF8C;
}

.m_m_fi_p_bar{
	width: 100%;
	height: 5px;
	position: absolute;
	bottom: 0;
	background-color: #D8E3F7;
}

.m_m_fi_p_bar>div{
	background-color: #3975CE;
	max-width: 100%;
	height: 100%;
}
</style>