|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="work" ref="workRef">
|
|
|
+ <div class="work" ref="workRef" v-loading="loading">
|
|
|
<div class="w_nowWork">
|
|
|
<div class="w_nw_header">
|
|
|
<div class="w_nw_h_title">
|
|
|
@@ -39,13 +39,43 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="w_submitWork">
|
|
|
+ <div class="w_sw_header">
|
|
|
+ <div class="w_sw_h_title">
|
|
|
+ <img :src="require('../../../../assets/icon/pblCourse/bookIcon.png')">
|
|
|
+ <span>提交作业</span>
|
|
|
+ <div class="w_sw_h_t_brief">(支持txt、doc、xlsx、png、jpg、jpeg、wav格式的文件上传)</div>
|
|
|
+ </div>
|
|
|
+ <div class="w_sw_h_controls">
|
|
|
+ <span @click="uploadFile">上传</span>
|
|
|
+ <span class="w_sw_h_t_submit" @click.stop="submitTask2()">提交</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="w_sw_fileBox" v-if="task.fileList.length>0">
|
|
|
+ <div :class="['w_sw_fb_item',index%2!==0?'w_sw_fb_item2':'']" v-for="(item,index) in task.fileList" :key="index">
|
|
|
+ <div class="w_sw_fb_i_left" @click="previewFile(item)">
|
|
|
+ <img :src="require('../../../../assets/icon/pblCourse/file1.png')">
|
|
|
+ <span>{{ item.fileName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="w_sw_fb_i_right">
|
|
|
+ <el-tooltip class="item" effect="light" content="删除" placement="top">
|
|
|
+ <span class="w_sw_fb_i_r_delete" @click.stop="delFile(item,index)">
|
|
|
+ <img :src="require('../../../../assets/icon/pblCourse/del.png')">
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import MarkdownIt from "markdown-it";
|
|
|
+ import '@/common/aws-sdk-2.235.1.min.js'
|
|
|
export default {
|
|
|
- emits:['choiceAnswer','submitTask',"getTaskList"],
|
|
|
+ emits:['choiceAnswer','submitTask',"getTaskList","deleteFile","addFile"],
|
|
|
props:{
|
|
|
task:{
|
|
|
type:Object,
|
|
|
@@ -76,6 +106,7 @@
|
|
|
steps:"",
|
|
|
target:"",
|
|
|
tips:"",
|
|
|
+ loading:false,
|
|
|
}
|
|
|
},
|
|
|
computed:{
|
|
|
@@ -112,6 +143,91 @@
|
|
|
submitTask(){
|
|
|
if((this.phase.doPhase>this.phase.atPhase) || this.phase.doPhase>=5)return this.$message.error("该阶段已提交过了")
|
|
|
this.$emit("submitTask")
|
|
|
+ },
|
|
|
+ submitTask2(){
|
|
|
+ return console.log('第二个提交')
|
|
|
+ },
|
|
|
+ uploadFile(){
|
|
|
+ let input = document.createElement("input");
|
|
|
+ input.type = "file";
|
|
|
+ input.accept = "*";
|
|
|
+ input.click();
|
|
|
+ input.onchange = () => {
|
|
|
+ this.uploadFileLoading = true;
|
|
|
+ let file = input.files[0];
|
|
|
+ // if(!/\.(wav|txt|pdf|xlsx|doc|docx)$/i.test(file.name)){
|
|
|
+ // this.uploadFileLoading = false;
|
|
|
+ // return this.$message.info("请上传.wav,.txt,.pdf,.xlsx,.doc,.docx格式的文件")
|
|
|
+ // }
|
|
|
+ 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;
|
|
|
+
|
|
|
+ if (file) {
|
|
|
+ this.loading = true;
|
|
|
+ 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("上传失败");
|
|
|
+ _this.loading = false;
|
|
|
+ } else {
|
|
|
+ _this.loading = false;
|
|
|
+ _this.$emit("addFile",{
|
|
|
+ fileName:data.key,
|
|
|
+ url:data.Location,
|
|
|
+ })
|
|
|
+ // _this.fileList.push({
|
|
|
+ // fileName:data.key,
|
|
|
+ // url:data.Location,
|
|
|
+ // })
|
|
|
+ console.log(data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ delFile(_item,_index){
|
|
|
+ this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.$emit("deleteFile",_index)
|
|
|
+ // this.fileList.splice(_index,1);
|
|
|
+ }).catch(_=>{
|
|
|
+ console.log("取消删除")
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ previewFile(_item){
|
|
|
+ this.$message.info(`预览文件:${_item.filename}`)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -120,10 +236,9 @@
|
|
|
<style scoped>
|
|
|
.work{
|
|
|
width: 100%;
|
|
|
- max-height: 100%;
|
|
|
- overflow: auto;
|
|
|
+ height: auto;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 25px;
|
|
|
+ /* padding: 25px; */
|
|
|
/* background-color: aqua; */
|
|
|
}
|
|
|
|
|
|
@@ -131,6 +246,10 @@
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
margin-bottom: 20px;
|
|
|
+ background-color: #F3F7FD;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
}
|
|
|
|
|
|
.w_nw_header{
|
|
|
@@ -190,7 +309,7 @@
|
|
|
}
|
|
|
|
|
|
.w_nw_introduce>div{
|
|
|
- margin: 10px 0px;
|
|
|
+ margin: 20px 0px;
|
|
|
}
|
|
|
|
|
|
.w_nw_introduce >>> ol{
|
|
|
@@ -222,6 +341,12 @@
|
|
|
.w_doWork{
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #F3F7FD;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.w_dw_header{
|
|
|
@@ -305,7 +430,7 @@
|
|
|
}
|
|
|
|
|
|
.w_dw_w_title{
|
|
|
- font-size: 24px;
|
|
|
+ font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
@@ -324,7 +449,7 @@
|
|
|
}
|
|
|
|
|
|
.w_dw_w_r_g_item>>>.el-radio__label{
|
|
|
- font-size: 22px;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
|
|
|
.w_dw_w_r_g_item>>>.el-radio__inner{
|
|
|
@@ -332,4 +457,168 @@
|
|
|
height: 20px;
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
+
|
|
|
+.w_submitWork{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ background-color: #F3F7FD;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_header{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 35px;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_h_title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_h_title>img{
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_h_title>span{
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ background: linear-gradient(to right, #3673E8, #AD88FD);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_h_t_brief{
|
|
|
+ font-size: 20px !important;
|
|
|
+ color:#00000066 !important;
|
|
|
+ font-weight: 400 !important;
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_h_controls{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_h_controls>span{
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: .3s;
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* padding: 0 15px; */
|
|
|
+ padding: 0 23px;
|
|
|
+ background-color: white;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 100px;
|
|
|
+ border: solid 1px #AD88FD;
|
|
|
+ /* 不可选中 */
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_h_controls>span:hover{
|
|
|
+ background-color: rgb(248, 246, 246);
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_h_t_submit{
|
|
|
+ background:linear-gradient(to right,#6082E5,#A293F3);
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_fileBox{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_fb_item{
|
|
|
+ width: 49.5%;
|
|
|
+ height: 45px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-right: 1%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10px;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border: solid 1px #E7E7E7;
|
|
|
+ border-radius: 4px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_fb_item:hover{
|
|
|
+ border: solid 1px #3681FC;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_fb_item2{
|
|
|
+ margin-right: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_fb_i_left{
|
|
|
+ width: calc(100% - 80px);
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_fb_i_left>span{
|
|
|
+ /* 字体溢出隐藏 */
|
|
|
+ width: 80%;
|
|
|
+ display: block;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_fb_i_left>img{
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_fb_i_right{
|
|
|
+ width: 80px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_fb_item:hover .w_sw_fb_i_r_delete{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_fb_i_right>span{
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ background-color: #F3F7FD;
|
|
|
+ display: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.w_sw_fb_i_right>span>img{
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+}
|
|
|
</style>
|
SanHQin
