|
|
@@ -0,0 +1,491 @@
|
|
|
+<template>
|
|
|
+ <div class="pb_content" style="background: #e6eaf0; margin: 0">
|
|
|
+ <div class="bread">
|
|
|
+ <el-breadcrumb
|
|
|
+ separator-class="el-icon-arrow-right"
|
|
|
+ style="margin-top: 15px"
|
|
|
+ >
|
|
|
+ <el-breadcrumb-item
|
|
|
+ :to="{ path: '/classRoom?userid=' + userid + '&oid=' + oid }"
|
|
|
+ >课堂备课</el-breadcrumb-item
|
|
|
+ >
|
|
|
+ <el-breadcrumb-item>创建课堂</el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ </div>
|
|
|
+ <div class="pb_content_body" style="height: 100%">
|
|
|
+ <div class="pptBody">
|
|
|
+ <div class="pptLeft">
|
|
|
+ <div>课堂备课</div>
|
|
|
+ </div>
|
|
|
+ <div class="pptRight">
|
|
|
+ <div v-if="steps == 0">
|
|
|
+ <div style="background: #fff">
|
|
|
+ <div class="pptName">课堂名称</div>
|
|
|
+ <div class="pptInput">
|
|
|
+ <span style="color: red; margin-right: 10px">*</span>
|
|
|
+ <el-input
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入名称"
|
|
|
+ v-model="upPPT[0].pName"
|
|
|
+ maxlength="50"
|
|
|
+ show-word-limit
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="background: #fff; margin-top: 10px">
|
|
|
+ <div class="pptName">上传课堂封面</div>
|
|
|
+ <div class="pptInput" @click="addImg($event)">
|
|
|
+ <span style="color: red; margin-right: 10px">*</span>
|
|
|
+ <div class="uploadImg" v-if="upPPT[0].pImg.length == 0">
|
|
|
+ <div class="upImg">
|
|
|
+ <img src="../../assets/icon/upImg.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div style="color: #bfc3c7">支持jpg/png格式</div>
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="image/png,image/jpg"
|
|
|
+ style="display: none"
|
|
|
+ @change="beforeUpload1($event, 1)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="isUpImg">
|
|
|
+ <img :src="upPPT[0].pImg[0].url" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 300px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin: 10px 0;
|
|
|
+ text-align: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ upPPT[0].pImg[0].name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="background: #fff; margin-top: 10px">
|
|
|
+ <div class="pptName">上传备课PPT</div>
|
|
|
+ <div class="pptInput" @click="addImg($event)">
|
|
|
+ <span style="color: red; margin-right: 10px">*</span>
|
|
|
+ <div
|
|
|
+ class="uploadImg"
|
|
|
+ style="width: 320px; height: 200px"
|
|
|
+ v-if="upPPT[0].pPPt.length == 0"
|
|
|
+ >
|
|
|
+ <div class="upImg">
|
|
|
+ <img src="../../assets/icon/upPpt.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div style="color: #bfc3c7">上传文件</div>
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="application/.ppt, .pptx"
|
|
|
+ style="display: none"
|
|
|
+ @change="beforeUpload1($event, 2)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="isUpImg"><img :src="mr" alt="" /></div>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 300px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin: 10px 0;
|
|
|
+ text-align: center;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ upPPT[0].pPPt[0].name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rightButton" @click="steps = 1">下一步</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="steps == 1">
|
|
|
+ <div style="background: #fff; margin-top: 10px">
|
|
|
+ <div class="pptName">上传备课PPT</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="proVisible" class="mask">
|
|
|
+ <div class="progressBox">
|
|
|
+ <div class="lbox">
|
|
|
+ <img src="../../assets/loading.gif" />上传中，请稍后
|
|
|
+ </div>
|
|
|
+ <el-progress
|
|
|
+ :text-inside="true"
|
|
|
+ :stroke-width="20"
|
|
|
+ :percentage="progress"
|
|
|
+ style="width: 80%"
|
|
|
+ ></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataVisible: false,
|
|
|
+ isLoading: false,
|
|
|
+ formLabelWidth: "100px",
|
|
|
+ userid: this.$route.query.userid,
|
|
|
+ oid: this.$route.query.oid,
|
|
|
+ total: 0,
|
|
|
+ tableData: [],
|
|
|
+ upPPT: [
|
|
|
+ {
|
|
|
+ pName: "",
|
|
|
+ pImg: [],
|
|
|
+ pPPt: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ now: "",
|
|
|
+ mr: require("../../assets/icon/pptImg.png"),
|
|
|
+ noneBtnImg: false,
|
|
|
+ proVisible: false,
|
|
|
+ progress: 0,
|
|
|
+ steps: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ change(val) {
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
+ goTo(path) {
|
|
|
+ this.$router.push(path);
|
|
|
+ },
|
|
|
+ tableRowClassName({ row, rowIndex }) {
|
|
|
+ if ((rowIndex + 1) % 2 === 0) {
|
|
|
+ return "even_row";
|
|
|
+ } else {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ jump(cid) {
|
|
|
+ window.parent.postMessage({ cid: cid, type: "1" }, "*");
|
|
|
+ },
|
|
|
+ init() {},
|
|
|
+ handleClose(done) {
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ console.log(file, fileList);
|
|
|
+ },
|
|
|
+ onExceed() {
|
|
|
+ this.$message.error("课程海报仅支持上传一张，请删除后再进行上传");
|
|
|
+ },
|
|
|
+ //uuid生成
|
|
|
+ guid() {
|
|
|
+ return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
|
|
|
+ /[xy]/g,
|
|
|
+ function (c) {
|
|
|
+ var r = (Math.random() * 16) | 0,
|
|
|
+ v = c == "x" ? r : (r & 0x3) | 0x8;
|
|
|
+ return v.toString(16);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ time() {
|
|
|
+ if (!this.now) {
|
|
|
+ this.now = new Date().getTime();
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ let time = new Date().getTime();
|
|
|
+ if (time - this.now > 3000) {
|
|
|
+ this.now = time;
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addImg(e) {
|
|
|
+ var el = e.currentTarget;
|
|
|
+ el.getElementsByTagName("input")[0].click();
|
|
|
+ },
|
|
|
+ imgChange(file, fileList, type) {
|
|
|
+ if (type == 1) {
|
|
|
+ var _tmp = this.upPPT[0].pImg;
|
|
|
+ } else if (type == 2) {
|
|
|
+ var _tmp = this.upPPT[0].pPPt;
|
|
|
+ }
|
|
|
+ this.noneBtnImg = _tmp.length >= 1;
|
|
|
+ },
|
|
|
+ beforeUpload1(event, type) {
|
|
|
+ var file = event.target.files[0];
|
|
|
+ var credentials = {
|
|
|
+ accessKeyId: "AKIATLPEDU37QV5CHLMH",
|
|
|
+ secretAccessKey: "Q2SQw37HfolS7yeaR1Ndpy9Jl4E2YZKUuuy2muZR",
|
|
|
+ }; //秘钥形式的登录上传
|
|
|
+ window.AWS.config.update(credentials);
|
|
|
+ window.AWS.config.region = "cn-northwest-1"; //设置区域
|
|
|
+
|
|
|
+ var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
|
|
|
+ var _this = this;
|
|
|
+ _this.progress = 0;
|
|
|
+ _this.proVisible = true;
|
|
|
+
|
|
|
+ if (file) {
|
|
|
+ var params = {
|
|
|
+ Key:
|
|
|
+ file.name.split(".")[0] +
|
|
|
+ new Date().getTime() +
|
|
|
+ "." +
|
|
|
+ file.name.split(".")[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.progress = parseInt((evt.loaded * 80) / evt.total);
|
|
|
+ })
|
|
|
+ .send(function (err, data) {
|
|
|
+ _this.progress = 100;
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.proVisible = false;
|
|
|
+ }, 1000);
|
|
|
+ if (err) {
|
|
|
+ var a = _this.$refs.upload1.uploadFiles;
|
|
|
+ a.splice(a.length - 1, a.length);
|
|
|
+ _this.$message.error("上传失败");
|
|
|
+ } else {
|
|
|
+ if (type == 1) {
|
|
|
+ _this.upPPT[0].pImg.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ uid: file.uid,
|
|
|
+ });
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ } else {
|
|
|
+ _this.upPPT[0].pPPt.push({
|
|
|
+ name: file.name,
|
|
|
+ url: data.Location,
|
|
|
+ uid: file.uid,
|
|
|
+ });
|
|
|
+ _this.imgChange(null, null, type);
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(data.Location);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkData() {
|
|
|
+ this.dataVisible = true;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.upImg > img,
|
|
|
+.isUpImg > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.xls_button {
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-decoration: underline;
|
|
|
+ color: rgb(34, 104, 188);
|
|
|
+}
|
|
|
+.student_search {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: calc(100% / 3);
|
|
|
+}
|
|
|
+.student_search span {
|
|
|
+ margin: 0 10px 0 0;
|
|
|
+ width: 65px;
|
|
|
+}
|
|
|
+.el_cards >>> .el-card__body {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.student_input >>> .el-input__inner {
|
|
|
+ height: 40px;
|
|
|
+ width: 190px;
|
|
|
+ font-size: 13px;
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+.dialog_diy >>> .el-dialog__header {
|
|
|
+ padding: 9px 20px 10px;
|
|
|
+ background: #32455b !important;
|
|
|
+}
|
|
|
+.dialog_diy >>> .el-dialog__title {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+.dialog_diy >>> .el-dialog__headerbtn {
|
|
|
+ top: 14px;
|
|
|
+}
|
|
|
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.dialog_diy >>> .el-dialog__body,
|
|
|
+.dialog_diy >>> .el-dialog__footer {
|
|
|
+ background: #f3f3f3;
|
|
|
+}
|
|
|
+.bread {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.pptBody {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-content: flex-start;
|
|
|
+}
|
|
|
+.pptLeft {
|
|
|
+ background: #fff;
|
|
|
+ width: 20%;
|
|
|
+ height: 55px;
|
|
|
+ border-radius: 5px;
|
|
|
+ line-height: 55px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.pptLeft > div {
|
|
|
+ border-left: 5px solid #418ae4;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ padding-left: 20px;
|
|
|
+}
|
|
|
+.pptRight {
|
|
|
+ width: 80%;
|
|
|
+ margin-left: 25px;
|
|
|
+ background: #e6e9f0;
|
|
|
+ position: relative;
|
|
|
+ min-height: 100%;
|
|
|
+}
|
|
|
+.pptName {
|
|
|
+ height: 40px;
|
|
|
+ padding: 15px 0 0 20px;
|
|
|
+ border-bottom: 1px solid #f9f9f9;
|
|
|
+}
|
|
|
+.pptInput {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 15px;
|
|
|
+ padding: 10px 0 20px 25px;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.pptInput >>> .el-input {
|
|
|
+ width: 80%;
|
|
|
+}
|
|
|
+
|
|
|
+.pptInput >>> .el-input__inner,
|
|
|
+.pptInput >>> .el-input__count-inner {
|
|
|
+ background: #f4f4f4 !important;
|
|
|
+}
|
|
|
+.uploadImg {
|
|
|
+ background: #f2f2f2;
|
|
|
+ width: 300px;
|
|
|
+ height: 150px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.upImg {
|
|
|
+ width: 60px;
|
|
|
+}
|
|
|
+.mask {
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 20000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.progressBox {
|
|
|
+ width: 500px;
|
|
|
+ height: 180px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 0 6px 1px #bfbfbf;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.progressBox .lbox {
|
|
|
+ height: 100px;
|
|
|
+ font-size: 19px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox .lbox img {
|
|
|
+ width: 40px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox >>> .el-progress-bar__outer {
|
|
|
+ background-color: #d1dfff !important;
|
|
|
+}
|
|
|
+.progressBox .lbox {
|
|
|
+ height: 100px;
|
|
|
+ font-size: 19px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.progressBox .lbox img {
|
|
|
+ width: 40px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+.isUpImg {
|
|
|
+ width: 300px;
|
|
|
+ height: 150px;
|
|
|
+}
|
|
|
+.rightButton {
|
|
|
+ background: #30adff;
|
|
|
+ width: 160px;
|
|
|
+ height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 17%;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
zengyicheng
