提交评分功能

src/components/easy2/studyStudent.vue

@@ -8057,9 +8057,13 @@
           <img src="../../assets/close1.png" alt="" />
         </div> -->
         <div class="checkbox">
-          <div class="check" style="font-size: 25px; position: unset">
+           <!-- <div class="check" style="font-size: 25px; position: unset">
             评论
-          </div>
+          </div> -->
+					<div class="cb-tabList">
+						<div :class="[commentTagShow==0?'cb-tabItem':'']" @click="commentTagShow=0">评论</div>
+						<div :class="[commentTagShow==1?'cb-tabItem':'']" @click="commentTagShow=1">评分</div>
+					</div>
           <el-select v-model="pzStype" @change="selectPz" class="selectBox">
             <el-option label="时间降序" :value="1"></el-option>
             <el-option label="时间升序" :value="2"></el-option>
@@ -8068,7 +8072,7 @@
           <img src="../../assets/pzBtn.png" @click="pzDialog = false" alt="" />
         </div>
       </div>
-      <div :class="pzList && pzList.length ? 'pzBox' : 'noPzBox'">
+			<div :class="pzList && pzList.length ? 'pzBox' : 'noPzBox'" v-if="commentTagShow==0">
         <div class="pzListBox" v-if="pzList && pzList.length">
           <div class="pzList" v-for="(pz, pzIndex) in pzList" :key="pzIndex">
             <div class="pzNavTop">
@@ -8162,6 +8166,9 @@
           </div> -->
         </div>
       </div>
+			<div class="scoreList" v-if="commentTagShow==1">
+				<scoreItem v-for="item in scoreList.datalist" @refresh="getScoreList" :data="item" :isScore="scoreList.isScoreList.filter(i=>(i.userid==item.userid && i.courseid == item.courseId))" :key="item.courseId"/>
+			</div>
     </div>
     <div
       v-if="toolDialogVisible == true"
@@ -11873,6 +11880,7 @@ import * as Diff from 'diff'
 import EnglishVoice from '../EnglishVoice2/index.vue'
 import checkEnglishVoice from '../checkEnglishVoice/index.vue'
 import correctText from '../components/correctText.vue'
+import scoreItem from '../scoreList/scoreItem.vue'
 
 const getFile = (url) => {
   return new Promise((resolve, reject) => {
@@ -11945,7 +11953,8 @@ export default {
     englishEva,
     EnglishVoice,
     checkEnglishVoice,
-		correctText
+		correctText,
+		scoreItem
   },
   data() {
     return {
@@ -12227,6 +12236,7 @@ export default {
       isHovered: false,
       isHovered1: false,
       isHovered2: false,
+			commentTagShow:0,
       timer: null,
       opertimer: null,
       showType: 0,
@@ -12304,7 +12314,11 @@ export default {
       correctWord: [],
       EnglishVoiceDialog: false,
       englishVoiceJson: {},
-      englishVoiceJsonWork:[]
+      englishVoiceJsonWork:[],
+			scoreList:{
+				listdata:[],
+				isScoreList:[],	
+			},
     };
   },
   methods: {
@@ -19917,6 +19931,21 @@ export default {
         return c;
       };
     },
+		getScoreList(){
+			let params = {
+        cid: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTestCourseByCid", params)
+        .then((res) => {
+					let result = res.data;
+					this.scoreList.datalist = result[0];
+					this.scoreList.isScoreList = result[1];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+		}
   },
   mounted() {
     document.body.addEventListener("click", (e) => {
@@ -19943,6 +19972,8 @@ export default {
       this.pzDialog = true;
       this.selectPz();
     }
+		// 获取评分列表
+		this.getScoreList()
     document.scrollingElement.scrollTop = 0;
     window.addEventListener("resize", () => {
       var a = document.getElementsByClassName("box_course")[0].offsetHeight;
@@ -22595,6 +22626,15 @@ export default {
   overflow: hidden;
 }
 
+.newDialogCss>.scoreList{
+	width:100%;
+	height:auto;
+	box-sizing:border-box;
+	padding:10px 15px;
+	overflow:auto;
+	padding-bottom:80px;
+}
+
 .pzTop {
   color: #fff;
   background: #000;
@@ -22618,6 +22658,33 @@ export default {
   justify-content: space-between;
 }
 
+.checkbox>.cb-tabList{
+	display:flex;
+	align-items:center;
+	
+}
+
+.cb-tabList>div{
+	margin-right:20px;
+	font-weight:400;
+	cursor:pointer;
+}
+
+.cb-tabList>.cb-tabItem{
+	color:#1684FC;
+	position:relative;
+}
+
+.cb-tabItem::after{
+	content:"";
+	width:100%;
+	height:2px;
+	background:#1684FC;
+	position:absolute;
+	bottom:-5px;
+	left:0
+}
+
 .pzTop2 .check {
   text-align: center;
   cursor: pointer;

src/components/easy3/studyStudent.vue

@@ -8044,9 +8044,13 @@
           <img src="../../assets/close1.png" alt="" />
         </div> -->
         <div class="checkbox">
-          <div class="check" style="font-size: 25px; position: unset">
+          <!-- <div class="check" style="font-size: 25px; position: unset">
             评论
-          </div>
+          </div> -->
+					<div class="cb-tabList">
+						<div :class="[commentTagShow==0?'cb-tabItem':'']" @click="commentTagShow=0">评论</div>
+						<div :class="[commentTagShow==1?'cb-tabItem':'']" @click="commentTagShow=1">评分</div>
+					</div>
           <el-select v-model="pzStype" @change="selectPz" class="selectBox">
             <el-option label="时间降序" :value="1"></el-option>
             <el-option label="时间升序" :value="2"></el-option>
@@ -8055,7 +8059,7 @@
           <img src="../../assets/pzBtn.png" @click="pzDialog = false" alt="" />
         </div>
       </div>
-      <div :class="pzList && pzList.length ? 'pzBox' : 'noPzBox'">
+      <div :class="pzList && pzList.length ? 'pzBox' : 'noPzBox'" v-if="commentTagShow==0">
         <div class="pzListBox" v-if="pzList && pzList.length">
           <div class="pzList" v-for="(pz, pzIndex) in pzList" :key="pzIndex">
             <div class="pzNavTop">
@@ -8149,6 +8153,9 @@
           </div> -->
         </div>
       </div>
+			<div class="scoreList" v-if="commentTagShow==1">
+				<scoreItem v-for="item in scoreList.datalist" @refresh="getScoreList" :data="item" :isScore="scoreList.isScoreList.filter(i=>(i.userid==item.userid && i.courseid == item.courseId))" :key="item.courseId"/>
+			</div>
     </div>
     <div
       v-if="toolDialogVisible == true"
@@ -11864,6 +11871,7 @@ import * as Diff from 'diff'
 import EnglishVoice from '../EnglishVoice2/index.vue'
 import checkEnglishVoice from '../checkEnglishVoice/index.vue'
 import correctText from '../components/correctText.vue'
+import scoreItem from '../scoreList/scoreItem.vue'
 
 const getFile = (url) => {
   return new Promise((resolve, reject) => {
@@ -11936,7 +11944,8 @@ export default {
     englishEva,
     EnglishVoice,
     checkEnglishVoice,
-		correctText
+		correctText,
+		scoreItem
   },
   data() {
     return {
@@ -12217,6 +12226,7 @@ export default {
       isHovered: false,
       isHovered1: false,
       isHovered2: false,
+			commentTagShow:0,
       timer: null,
       opertimer: null,
       showType: 0,
@@ -12296,7 +12306,11 @@ export default {
       correctWord: [],
       EnglishVoiceDialog: false,
       englishVoiceJson: {},
-      englishVoiceJsonWork:[]
+      englishVoiceJsonWork:[],
+			scoreList:{
+				listdata:[],
+				isScoreList:[],	
+			},
     };
   },
   methods: {
@@ -19785,7 +19799,22 @@ export default {
       }
       // console.log(_url)
       return _url 
-    }
+    },
+		getScoreList(){
+			let params = {
+        cid: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTestCourseByCid", params)
+        .then((res) => {
+					let result = res.data;
+					this.scoreList.datalist = result[0];
+					this.scoreList.isScoreList = result[1];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+		}
   },
   directives: {
     // 使用局部注册指令的方式
@@ -19967,6 +19996,8 @@ export default {
       this.pzDialog = true;
       this.selectPz();
     }
+		// 获取评分列表
+		this.getScoreList()
     document.scrollingElement.scrollTop = 0;
     window.addEventListener("resize", () => {
       var a = document.getElementsByClassName("box_course")[0].offsetHeight;
@@ -22619,6 +22650,15 @@ export default {
   overflow: hidden;
 }
 
+.newDialogCss>.scoreList{
+	width:100%;
+	height:100%;
+	box-sizing:border-box;
+	padding:10px 15px;
+	overflow:auto;
+	padding-bottom:80px;
+}
+
 .pzTop {
   color: #fff;
   background: #000;
@@ -22642,6 +22682,35 @@ export default {
   justify-content: space-between;
 }
 
+.checkbox>.cb-tabList{
+	display:flex;
+	align-items:center;
+	
+}
+
+.cb-tabList>div{
+	margin-right:20px;
+	font-weight:400;
+	cursor:pointer;
+}
+
+.cb-tabList>.cb-tabItem{
+	color:#1684FC;
+	position:relative;
+}
+
+.cb-tabItem::after{
+	content:"";
+	width:100%;
+	height:2px;
+	background:#1684FC;
+	position:absolute;
+	bottom:-5px;
+	left:0
+}
+
+
+
 .pzTop2 .check {
   text-align: center;
   cursor: pointer;

src/components/scoreList/commpont/choice.vue

@@ -0,0 +1,244 @@
+<template>
+    <div class="c_box">
+        <!-- <div class="mask"></div> -->
+        <div v-if="!checkJson">暂未设置题目</div>
+        <div v-else class="choice_box">
+            <div class="c_title">
+                <div class="title" style="display: flex;">
+                    <!-- + `（${option[checkJson.type].name}）` -->
+                    <span style="min-width: fit-content;">{{ tindex + 1 + "、" }}</span>
+                    <span>{{ checkJson.title }}</span>
+                    <!-- {{ tindex + 1 + "、" + `（${option[checkJson.type].name}）` + checkJson.title }} -->
+                    <span style="min-width: fit-content;" v-if="checkJson.type == 2">{{
+            `（${option[checkJson.type].name}）` }}</span>
+                    <span style="color: #efa030;min-width: fit-content;" v-if="checkJson.score">（{{ '分值：' +
+            checkJson.score + '分' }}）</span>
+                </div>
+                <div class="p_box" v-if="isTeacher == 1 && checkJson.score">
+                    <el-input v-model="score2" class="c_input" disabled></el-input><span
+                        style="margin: 0 10px;">/</span><span>{{ checkJson.score }}分</span>
+                </div>
+                <div class="p_box" v-if="isTeacher == 2 && checkJson.score2">
+                    <span>{{ checkJson.score2 }}分</span><span style="margin: 0 10px;">/</span><span>{{ checkJson.score
+                        }}分</span>
+                </div>
+            </div>
+            <div class="choices">
+                <div class="choice" v-for="(item, index) in checkJson.array" :key="index">
+                    <div class="choice_c" v-if="checkJson.type == 2"><el-checkbox v-model="checkJson.answer2"
+                            :label="index" :disabled="checktype == 2" @change="changeJson"></el-checkbox><span
+                            :class="{ right: see && cJson.answer.indexOf(index) != -1 }"
+                            @click="check(checkJson.type, index)">{{ item.option }}</span></div>
+                    <div class="choice_c" v-if="checkJson.type == 1"><el-radio v-model="checkJson.answer2[0]"
+                            :label="index" :disabled="checktype == 2" @change="changeJson"></el-radio><span
+                            :class="{ right: see && cJson.answer.indexOf(index) != -1 }"
+                            @click="check(checkJson.type, index)">{{ item.option }}</span></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        tindex: {
+            type: Number
+        },
+        cJson: {
+            type: Object,
+        },
+        checktype: {
+            type: Number,
+            default: 1
+        },
+        see: {
+            type: Boolean,
+            default: false
+        },
+        isTeacher: {
+            type: Number,
+            default: 2
+        }
+    },
+    data() {
+        return {
+            option: {
+                1: { name: '单选题' },
+                2: { name: '多选题' }
+            },
+            checkJson: undefined
+        }
+    },
+    computed: {
+        score2() {
+            let answer2 = this.checkJson.answer2 ? this.checkJson.answer2.sort().join(',') : ''
+            let answer = this.checkJson.answer ? this.checkJson.answer.sort().join(',') : ''
+            this.checkJson.score2 = (answer2 == answer ? this.checkJson.score : 0)
+            this.$forceUpdate();
+            return answer2 == answer ? this.checkJson.score : 0
+        }
+    },
+    watch: {
+        checkJson: {
+            handler(newValue) {
+                console.log(1);
+                this.$emit('update:cJson', newValue)
+                this.$forceUpdate()
+            },
+            deep: true
+        },
+        cJson: {
+            handler(newValue) {
+                if (JSON.stringify(newValue.answer2) !== JSON.stringify(this.checkJson.answer2)) {
+                    this.checkJson = this.depthCopy(newValue)
+                    this.$forceUpdate()
+                }
+            },
+            deep: true
+        },
+    },
+    methods: {
+        changeJson() {
+            console.log(1);
+            this.$forceUpdate()
+            this.$emit('update:cJson', this.checkJson)
+            this.$forceUpdate()
+        },
+        depthCopy(s) {
+            return JSON.parse(JSON.stringify(s));
+        },
+        check(type, index) {
+            if (this.checktype == 2) {
+                return;
+            }
+            if (type == 2) {
+                if (this.checkJson.answer2.indexOf(index) == -1) {
+                    this.checkJson.answer2.push(index)
+                } else {
+                    this.checkJson.answer2.splice(this.checkJson.answer2.indexOf(index), 1)
+                }
+            } else if (type == 1) {
+                this.checkJson.answer2[0] = index
+            }
+            console.log(1);
+            this.$emit('update:cJson', this.checkJson)
+            this.$forceUpdate()
+        }
+    },
+    mounted() {
+        this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
+    }
+}
+</script>
+
+<style scoped>
+.c_box {
+    width: 100%;
+    position: relative;
+}
+
+.mask {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+}
+
+.choice_box {
+    white-space: pre-line;
+}
+
+.choice_box>.c_title .title {
+    font-weight: bold;
+    width: 100%;
+    word-break: break-all;
+}
+
+.choice_box>.c_title {
+    display: flex;
+    justify-content: space-between;
+}
+
+.choice_box>.c_title .p_box {
+    margin-left: 5px;
+    min-width: fit-content;
+    display: flex;
+    align-items: center;
+}
+
+.choice_box>.choices {
+    margin-top: 10px;
+    padding: 0 10px;
+}
+
+.choice_box>.choices>.choice {
+    word-break: break-all;
+}
+
+.choice_box>.choices>.choice+.choice {
+    margin-top: 5px;
+}
+
+.choice_box>.choices>.choice>.choice_c {
+    display: flex;
+}
+
+.choice_box>.choices>.choice>.choice_c>span {
+    /* margin-left: 10px; */
+    cursor: pointer;
+}
+
+.choice_box>.choices>.choice>.choice_c>.el-checkbox {
+    margin-top: 4px;
+    margin-right: 10px;
+}
+
+.choice_box>.choices>.choice>.choice_c>.el-radio {
+    margin-top: 4px;
+    margin-right: 10px;
+}
+
+.choice_c>>>.el-checkbox__label {
+    display: none;
+}
+
+.choice_c>>>.el-radio__label {
+    display: none;
+}
+
+.choice_c .right {
+    color: #efa030;
+}
+
+.choice_c .right::after {
+    content: '（正确答案）';
+}
+
+.choice_box>.choices>.choice>>>.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
+    border-color: #fff !important;
+}
+
+.choice_box>.choices>.choice>>>.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+    background-color: #409EFF !important;
+    border-color: #409EFF !important;
+}
+
+.choice_box>.choices>.choice>>>.el-radio__input.is-disabled.is-checked .el-radio__inner {
+    background-color: #409EFF !important;
+    border-color: #409EFF !important;
+}
+
+.choice_box>.choices>.choice>>>.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
+    background-color: #fff !important;
+}
+
+.c_input {
+    width: 90px;
+}
+
+.c_input>>>.el-input__inner {
+    padding: 0 5px;
+    text-align: right;
+}
+</style>

src/components/scoreList/commpont/course.vue

@@ -0,0 +1,287 @@
+<template>
+    <div class="c_box">
+        <div class="choice_box" v-loading="isloading" v-if="checkJson">
+            <div class="title" style="display: flex;">
+                <span style="min-width: fit-content;">{{ tindex + 1 + "、" }}</span>
+                <span>{{ checkJson.title }}</span>
+            </div>
+            <div class="detail" v-if="checkJson.detail" v-html="checkJson.detail"
+                style="color: #00000099;margin-top: 5px;">
+            </div>
+            <div class="choices" v-if="checkJson.courses.length">
+                <div class="course" @click="openCourse()">
+                    <div class="banner">
+                        <div v-if="tid" class="isRate">已评分</div>
+                        <img :src="courseDetail.cover" alt="">
+                    </div>
+                    <div class="content">
+                        <div class="c_c">
+                            <span>课程名称：</span>
+                            <el-tooltip :content="courseDetail.title" placement="top" effect="dark">
+                                <span>{{ courseDetail.title }}</span>
+                            </el-tooltip>
+                        </div>
+                        <div class="c_c">
+                            <span>课程类型：</span>
+                            <span v-if="!courseDetail.name">{{ '暂无' }}</span>
+                            <el-tooltip v-else :content="courseDetail.name" placement="top" effect="dark">
+                                <span>{{ courseDetail.name }}</span>
+                            </el-tooltip>
+                        </div>
+                        <div class="c_c">
+                            <span>创建人：</span>
+                            <span>{{ courseDetail.username }}</span>
+                        </div>
+                        <div class="c_c">
+                            <span>协作者：</span>
+                            <span v-if="!courseDetail.xieName">{{ '暂无' }}</span>
+                            <el-tooltip v-else :content="courseDetail.xieName" placement="top" effect="dark">
+                                <span>{{ courseDetail.xieName }}</span>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                </div>
+                <!-- <div class="page" v-if="checktype == '1'">
+                    <el-button type="primary" size="mini" :disabled="page == 0" @click="setPage('-1')">上一个</el-button>
+                    <div class="p_page"><span>{{ page + 1 }}</span><span>/</span><span>{{ checkJson.courses.length
+                            }}</span>
+                    </div>
+                    <el-button type="primary" size="mini" :disabled="page == (checkJson.courses.length - 1)"
+                        @click="setPage('1')">下一个</el-button>
+                </div> -->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        tindex: {
+            type: Number
+        },
+        cJson: {
+            type: Object,
+        },
+        checktype: {
+            type: Number,
+            default: 1
+        },
+        see: {
+            type: Boolean,
+            default: false
+        },
+        issetPage: {
+            type: Boolean,
+            default: false
+        },
+        tid: {
+            type: String
+        }
+    },
+    data() {
+        return {
+            option: {
+                1: { name: '附件' },
+            },
+            userid: this.$route.query.userid,
+            checkJson: undefined,
+            progress: 0,
+            isFinishSize: 0,
+            proVisible: false,
+            isAllSize: 0,
+            wurl: "",
+            isTong: false,
+            page: 0,
+            isloading: false,
+            courseDetail: {},
+            courseid: ''
+        }
+    },
+    computed: {
+
+    },
+    watch: {
+        checkJson: {
+            handler(newValue) {
+                this.$emit('update:cJson', newValue)
+            },
+            deep: true
+        },
+        cJson: {
+            handler(newValue) {
+                if (newValue.answer2 != this.checkJson.answer2) {
+                    this.checkJson = this.depthCopy(newValue)
+                    if (this.checkJson.courses.length) {
+                        this.page = this.checkJson.courses.indexOf(this.courseid)
+                        this.checkJson.answer2 = this.courseid
+                    }
+                    this.$forceUpdate()
+                }
+            },
+            deep: true
+        },
+        courseid: {
+            handler(newValue) {
+                if (this.issetPage) {
+                    this.$emit('update:issetPage', false)
+                } else {
+                    this.$emit('getTestWorkByCid', newValue)
+                }
+            },
+            deep: true
+        }
+    },
+    methods: {
+        depthCopy(s) {
+            return JSON.parse(JSON.stringify(s));
+        },
+        openFileBox() {
+            this.dialogVisiblefile = true
+        },
+        setPage(index) {
+            this.$emit('publish2')
+            setTimeout(() => {
+                if (index == '1') {
+                    this.page++
+                } else if (index == '-1') {
+                    this.page--
+                }
+                this.checkJson.answer2 = this.checkJson.courses[this.page]
+                this.courseid = this.checkJson.answer2
+                this.$forceUpdate()
+                this.getCourse(this.checkJson.answer2)
+            }, 500);
+        },
+        openCourse() {
+            top.postMessage({ cid: this.checkJson.answer2, screenType: "3" }, "*");
+        },
+        getCourse(id) {
+            this.isloading = true
+            let params = {
+                cid: id,
+            };
+            this.ajax
+                .get(this.$store.state.api + "getCourseInfoTest", params)
+                .then((res) => {
+                    this.isloading = false
+                    this.courseDetail = res.data[0][0]
+                    this.courseDetail.cover = JSON.parse(this.courseDetail.cover)[0].url
+                })
+                .catch((err) => {
+                    this.isloading = false
+                    console.error(err);
+                });
+        }
+    },
+    mounted() {
+        this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
+        if (this.checkJson.courses.length) {
+            this.page = this.checkJson.courses.indexOf(this.checkJson.answer2)
+            this.courseid = this.checkJson.answer2
+            this.getCourse(this.checkJson.answer2)
+        }
+    }
+}
+</script>
+
+<style scoped>
+.c_box {
+    width: 100%;
+    position: relative;
+}
+
+/* .mask {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+} */
+
+.choice_box {
+    white-space: pre-line;
+}
+
+.choice_box>.title {
+    font-weight: bold;
+    width: 100%;
+    word-break: break-all;
+}
+
+.choice_box>.choices {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.choices>.page {
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.p_page {
+    margin: 0 10px;
+}
+
+.course {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.course>.banner {
+    width: 200px;
+    height: 120px;
+    border-radius: 5px;
+    overflow: hidden;
+    border: 1px solid #3896fc;
+    box-sizing: border-box;
+    padding: 5px;
+    margin-right: 15px;
+    position: relative;
+}
+
+.isRate {
+    position: absolute;
+    background: #0061FF;
+    width: 70px;
+    height: 30px;
+    border-radius: 5px;
+    color: #fff;
+    font-size: 14px;
+    text-align: center;
+    line-height: 30px;
+    top: 5px;
+    left: 5px;
+}
+
+.course>.banner>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.course>.content {}
+
+.course>.content>.c_c {
+    display: flex;
+    align-items: center;
+}
+
+.course>.content>.c_c+.c_c {
+    margin-top: 5px;
+}
+
+.course>.content>.c_c span:nth-child(1) {}
+
+.course>.content>.c_c span:nth-child(2) {
+    max-width: 250px;
+    overflow: hidden;
+    white-space: nowrap;
+    display: block;
+    text-overflow: ellipsis;
+}
+</style>

src/components/scoreList/commpont/eva.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="c_box">
+        <div class="choice_box" v-if="checkJson">
+            <div class="title" style="display: flex;">
+                <span style="min-width: fit-content;">{{ tindex + 1 + "、" }}</span>
+                <span>{{ checkJson.title }}</span>
+            </div>
+            <div class="detail" v-if="checkJson.detail" v-html="checkJson.detail"
+                style="color: #00000099;margin-top: 5px;">
+            </div>
+            <div class="choices">
+                <div class="score" :class="{active: (checkJson.answer2 || checkJson.answer2 === 0) && (checkJson.answer2 > index || checkJson.answer2 === index)}" @click="score(index)" v-for="(item, index) in (parseInt(checkJson.big) - parseInt(checkJson.small) + 1)" :key="index">{{ parseInt(checkJson.small) + index }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        tindex: {
+            type: Number
+        },
+        cJson: {
+            type: Object,
+        },
+        checktype: {
+            type: Number,
+            default: 1
+        },
+        see: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            option: {
+                1: { name: '附件' },
+            },
+            userid: this.$route.query.userid,
+            checkJson: undefined,
+            progress: 0,
+            isFinishSize: 0,
+            proVisible: false,
+            isAllSize: 0,
+            wurl: "",
+            isTong: false
+        }
+    },
+    watch: {
+        checkJson: {
+            handler(newValue) {
+                this.$emit('update:cJson', newValue)
+            },
+            deep: true
+        },
+        cJson: {
+            handler(newValue) {
+                if(newValue.answer2 !== this.checkJson.answer2){
+                    this.checkJson = this.depthCopy(newValue)
+                    this.$forceUpdate()
+                }
+            },
+            deep: true
+        },
+    },
+    methods: {
+        depthCopy(s) {
+            return JSON.parse(JSON.stringify(s));
+        },
+        openFileBox() {
+            this.dialogVisiblefile = true
+        },
+        score(index){
+            if(this.checktype == '2'){
+                return
+            }
+            this.checkJson.answer2 = index
+        }
+    },
+    mounted() {
+        this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
+
+    }
+}
+</script>
+
+<style scoped>
+.c_box {
+    width: 100%;
+    position: relative;
+}
+
+/* .mask {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+} */
+
+.choice_box {
+    white-space: pre-line;
+}
+
+.choice_box>.title {
+    font-weight: bold;
+    width: 100%;
+    word-break: break-all;
+}
+
+.choice_box>.choices {
+    margin-top: 10px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 90%;
+    margin: 0 auto;
+}
+
+.choices > .score{
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 20px 10px 0;
+    border-radius: 5px;
+    background: #dee0e3;
+    font-size: 18px;
+    font-weight: bold;
+    color: #fff;
+    cursor: pointer;
+}
+
+.choices > .score.active{
+    background: #65b1ff;
+}
+
+</style>

src/components/scoreList/commpont/file.vue

@@ -0,0 +1,900 @@
+<template>
+    <div class="c_box" v-loading="isloading">
+        <!-- <div class="mask"></div> -->
+        <div v-if="!checkJson">暂未设置题目</div>
+        <div v-else class="choice_box">
+            <!-- <div class="title"><div>{{ `（${option[checkJson.type].name}）` }}</div><div v-html="checkJson.title"></div></div> -->
+            <div class="c_title">
+                <div class="title" style="display: flex;">
+                    <!-- + `（${option[checkJson.type].name}）` -->
+                    <span style="min-width: fit-content;">{{ tindex + 1 + "、" }}</span>
+                    <span>{{ checkJson.title }}</span>
+                    <span style="color: #efa030;min-width: fit-content;" v-if="checkJson.score">（{{ '分值：' + checkJson.score
+                        + '分' }}）</span>
+                </div>
+
+                <!-- </div><div v-html="checkJson.title"></div> -->
+                <div class="p_box" v-if="checkJson.file && checkJson.file.length > 1">
+                    <span class="btnU" @click="uploadCourse">批量下载</span>
+                </div>
+                <div class="p_box" v-if="isTeacher == 1 && checkJson.score">
+                    <el-input v-model="checkJson.score2" class="c_input" @change="numberPan"
+                        placeholder="请输入得分"></el-input><span style="margin: 0 10px;">/</span><span>{{ checkJson.score
+                        }}分</span>
+                </div>
+                <div class="p_box" v-if="isTeacher == 2 && checkJson.score2">
+                    <span>{{ checkJson.score2 }}分</span><span style="margin: 0 10px;">/</span><span>{{ checkJson.score
+                    }}分</span>
+                </div>
+            </div>
+            <div class="detail" v-if="checkJson.detail" v-html="checkJson.detail" style="color: #00000099;margin-top: 5px;">
+            </div>
+            <div class="choices">
+                <div class="uploadBtn" v-if="checktype == 1">
+                    <div class="btn" @click.stop="addImg($event)">
+                        <span>添加本地文件</span>
+                        <input type="file" accept="*" style="display: none" multiple="multiple"
+                            @change="beforeUpload($event)" />
+                    </div>
+                    <div class="btn" @click="openFileBox()">
+                        <span>从资源库添加</span>
+                    </div>
+                    <div class="switch">
+                        <el-switch
+                            active-color="#3681fc"
+                            v-model="isTong">
+                        </el-switch>
+                        <span @click="isTong = !isTong">同步至资源库</span>
+                    </div>
+                </div>
+                <div class="binfo_input">
+                    <div class="fileBox" v-if="checkJson.file && checkJson.file.length">
+                        <div class="fileC">
+                            <div class="file" v-for="(item, index) in checkJson.file" :key="index"
+                                v-loading="downLoading == item.url" @click.stop="checkFile(item)">
+                                <img class="del" src="../../../assets/icon/fileIcon/deleteworks.png"
+                                    @click.stop="delFile(index)" v-if="checktype == 1" />
+                                <img class="download" src="../../../assets/icon/fileIcon/download.png"
+                                    @click.stop="downloadFile(item)" :style="{ right: checktype != 1 ? '10px' : '45px' }" />
+                                <img class="img" :src="wordIcon" alt="" v-if="item.type == 1" />
+                                <img class="img" :src="videoIcon" alt="" v-if="item.type == 2" />
+                                <img class="img" :src="item.url" alt="" v-if="item.type == 3" />
+                                <img class="img" :src="wordIcon" alt="" v-if="item.type == 4" />
+                                <img class="img" :src="fileIcon" alt="" v-if="item.type == 5" />
+                                <div class="name">
+                                    <el-tooltip :content="item.name" placement="top" effect="dark">
+                                        <span>{{ item.name }}</span>
+                                    </el-tooltip>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- <div class="btn" @click.stop="openFileBox()" v-if="checktype == 1">
+                            <span>点击添加文件</span>
+                            <input type="file" accept="*" style="display: none" @change="beforeUpload($event)" />
+                        </div> -->
+                    </div>
+                    <div class="uploadQ" v-else-if="checktype == 1">
+                        <span>填写者上传区</span>
+                        <!-- <input type="file" accept="*" style="display: none" @change="beforeUpload($event)" /> -->
+                    </div>
+                    <div class="uploadQ" v-else>
+                        <span>暂无添加附件</span>
+                    </div>
+                    <div v-if="proVisible" class="mask">
+                        <div class="progressBox">
+                            <div class="lbox">
+                                <img src="../../../assets/loading.gif" />上传中，请稍后
+                            </div>
+                            <!-- <div style="margin-bottom: 10px">
+                                <span>{{
+                                    isFinishSize
+                                }}M</span>
+                                /
+                                <span>{{
+                                    isAllSize
+                                }}M</span>
+                            </div>
+                            <el-progress :text-inside="true" :stroke-width="20" :percentage="progress
+                                ? progress
+                                : 0
+                                " style="width: 80%"></el-progress> -->
+                        </div>
+                    </div>
+                </div>
+                <!-- <textarea  :readonly="checktype == 2" rows="2" v-autoHeight="68" class="binfo_input binfo_textarea" cols v-model="checkJson.answer2"
+                    placeholder=""></textarea> -->
+            </div>
+        </div>
+        <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
+        <wVideo :dialogVisibleVideo.sync="dialogVisibleVideo" :url="wurl"></wVideo>
+        <wOffice :dialogVisibleOffice.sync="dialogVisibleOffice" :url="wurl"></wOffice>
+        <checkfile :dialogVisiblefile.sync="dialogVisiblefile" @setCheckJson="setCheckJson"></checkfile>
+    </div>
+</template>
+
+<script>
+import "../../../common/aws-sdk-2.235.1.min.js";
+
+import videoIcon from '../../../assets/icon/fileIcon/isVideo.png'
+import wordIcon from '../../../assets/icon/fileIcon/isWord.png'
+import fileIcon from '../../../assets/icon/fileIcon/word2.png'
+import wpdf from "./file/wPdf2.vue";
+import wVideo from "./file/wVideo.vue";
+import wOffice from "./file/wOffice.vue";
+import checkfile from "./file/checkfile.vue";
+import JSZip from "jszip";
+import FileSaver from "file-saver";
+
+const getFile = (url) => {
+    return new Promise((resolve, reject) => {
+        var credentials = {
+            accessKeyId: "AKIATLPEDU37QV5CHLMH",
+            secretAccessKey: "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",
+        }; //秘钥形式的登录上传
+        window.AWS.config.update(credentials);
+        window.AWS.config.region = "cn-northwest-1"; //设置区域
+        let url2 = url;
+        let _url2 = "";
+        if (
+            url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+        ) {
+            _url2 = url2.split(
+                "https://view.officeapps.live.com/op/view.aspx?src="
+            )[1];
+        } else {
+            _url2 = url2;
+        }
+        var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+        let name = decodeURIComponent(_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1])
+        var params = {
+            Bucket: "ccrb",
+            Key: name
+        };
+        s3.getObject(params, function (err, data) {
+            if (err) {
+                console.log(err, err.stack)
+                resolve({ data: 1 });
+            } else {
+                resolve({ data: data.Body });
+                console.log(data);
+            }          // sxuccessful response
+
+        });
+        // axios({
+    });
+};
+
+export default {
+    components: {
+        wpdf,
+        wVideo,
+        wOffice,
+        checkfile
+    },
+    props: {
+        tindex: {
+            type: Number
+        },
+        cJson: {
+            type: Object,
+        },
+        checktype: {
+            type: Number,
+            default: 1
+        },
+        see: {
+            type: Boolean,
+            default: false
+        },
+        isTeacher: {
+            type: Number,
+            default: 2
+        }
+    },
+    data() {
+        return {
+            option: {
+                1: { name: '附件' },
+            },
+            userid: this.$route.query.userid,
+            checkJson: undefined,
+            progress: 0,
+            isFinishSize: 0,
+            proVisible: false,
+            isAllSize: 0,
+            videoIcon: videoIcon,
+            wordIcon: wordIcon,
+            fileIcon: fileIcon,
+            downLoading: '',
+            dialogVisiblePdf: false,
+            dialogVisibleVideo: false,
+            dialogVisibleOffice: false,
+            dialogVisiblefile: false,
+            wurl: "",
+            isloading: false,
+            isTong: false
+        }
+    },
+    watch: {
+        checkJson: {
+            handler(newValue) {
+                this.$emit('update:cJson', newValue)
+            },
+            deep: true
+        },
+        cJson: {
+            handler(newValue,oldVal) {
+                if(newValue.file && this.checkJson.file && newValue.file.length !== this.checkJson.file.length){
+                    this.checkJson = this.depthCopy(newValue)
+                    this.$forceUpdate()
+                }else if(newValue.file && !this.checkJson.file){
+                    this.checkJson = this.depthCopy(newValue)
+                    this.$forceUpdate()
+                }else if(!newValue.file && this.checkJson.file){
+                    this.checkJson = this.depthCopy(newValue)
+                    this.$forceUpdate()
+                }else if (JSON.stringify(newValue) !== JSON.stringify(oldVal)) {
+                    this.checkJson = this.depthCopy(newValue)
+                    this.$forceUpdate()
+                }
+            },
+            deep: true
+        },
+    },
+    methods: {
+        depthCopy(s) {
+            return JSON.parse(JSON.stringify(s));
+        },
+        openFileBox() {
+            this.dialogVisiblefile = true
+        },
+        addImg(e) {
+            var el = e.currentTarget;
+            el.getElementsByTagName("input")[0].click();
+            e.target.value = "";
+        },
+        numberPan() {
+            if (/[^\d]/.test(this.checkJson.score2) || this.checkJson.score2 < 0) {
+                this.$message.error('请输入大于0的数字')
+                this.checkJson.score2 = ''
+            }
+            if (parseInt(this.checkJson.score2) > parseInt(this.checkJson.score)) {
+                this.$message.error('不能输入大于得分的数字')
+                this.checkJson.score2 = this.checkJson.score
+            }
+        },
+        beforeUpload(event, type) {
+            // const loading = this.openLoading();
+            let file = "";
+            let cfindex2 = 0;
+            for (var cfindex = 0; cfindex < event.target.files.length; cfindex++) {
+                file = event.target.files[cfindex];
+
+                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;
+
+                // _this.progress = 0;
+                _this.proVisible = true;
+                // _this.isFinishSize = 0;
+                // _this.isAllSize = (file.size / 1024 / 1024).toFixed(2);
+                let _name = file.name
+                let size = file.size;
+                _this.$forceUpdate();
+                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.progress = parseInt((evt.loaded / evt.total) * 100);
+                            // _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
+                            // _this.$forceUpdate();
+                        })
+                        .send(function (err, data) {
+                            cfindex2++;
+
+                            // _this.progress = 100;
+                            // _this.isFinishSize = _this.isAllSize;
+                            // _this.$forceUpdate();
+                            // setTimeout(() => {
+                            //     _this.proVisible = false;
+                            //     _this.$forceUpdate();
+                            // }, 1000);
+                            setTimeout(() => {
+                                if (
+                                    cfindex2 == event.target.files.length ||
+                                    cfindex2 > event.target.files.length
+                                ) {
+                                    _this.proVisible = false;
+                                }
+                            }, 1000);
+                            // loading.close();
+                            if (err) {
+                                _this.$message.error("上传失败");
+                            } else {
+                                let _type = 2;
+                                var imgA = [
+                                    "png",
+                                    "jpg",
+                                    "jpeg",
+                                    "bmp",
+                                    "gif",
+                                    "webp",
+                                    "psd",
+                                    "svg",
+                                    "tiff",
+                                ];
+                                var fileA = [
+                                    "DOC",
+                                    "DOCX",
+                                    "DOCM",
+                                    "DOTM",
+                                    "DOTX",
+                                    "PPTX",
+                                    "PPSX",
+                                    "PPT",
+                                    "PPS",
+                                    "PPTM",
+                                    "POTM",
+                                    "PPAM",
+                                    "POTX",
+                                    "PPSM",
+                                    "XLSX",
+                                    "XLS",
+                                ];
+                                var videoA = [
+                                    "AVI",
+                                    "NAVI",
+                                    "MPEG",
+                                    "ASF",
+                                    "MOV",
+                                    "WMV",
+                                    "3GP",
+                                    "RM",
+                                    "RMVB",
+                                    "FLV",
+                                    "F4V",
+                                    "H.264",
+                                    "H.265",
+                                    "REAL VIDEO",
+                                    "MKV",
+                                    "WebM",
+                                    "HDDVD",
+                                    "MP4",
+                                    "MPG",
+                                    "M4V",
+                                    "MGV",
+                                    "OGV",
+                                    "QTM",
+                                    "STR",
+                                    "AMC",
+                                    "DVX",
+                                    "EVO",
+                                    "DAT",
+                                    "OGG",
+                                    "OGM",
+                                ];
+                                if (
+                                    fileA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleUpperCase()
+                                    ) != -1
+                                ) {
+                                    _type = 1; //word 文件
+                                } else if (
+                                    videoA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleUpperCase()
+                                    ) != -1
+                                ) {
+                                    _type = 2; //视频
+                                } else if (
+                                    imgA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleLowerCase()
+                                    ) != -1
+                                ) {
+                                    _type = 3; //图片
+                                } else if (
+                                    'pdf'.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleLowerCase()
+                                    ) != -1
+                                ) {
+                                    _type = 4; //pdf
+                                } else {
+                                    _type = 5; //文件
+                                }
+                                if (_this.checkJson.file) {
+                                    _this.checkJson.file.push({
+                                        name: _name,
+                                        url: data.Location,
+                                        type: _type,
+                                    });
+                                } else {
+                                    _this.checkJson.file = []
+                                    _this.checkJson.file.push({
+                                        name: _name,
+                                        url: data.Location,
+                                        type: _type,
+                                    });
+                                }
+                                if(_this.isTong){
+                                    let _file = {
+                                        name: _name,
+                                        url: data.Location,
+                                        type: _type,
+                                        size: _this.formatFileSize(size)
+                                    }
+                                    _this.addSource(_file)
+                                }
+                                _this.$forceUpdate();
+
+                                _this.$emit('update:cJson', _this.checkJson)
+                                console.log(_this.checkJson);
+                                console.log(data.Location);
+                            }
+                        });
+                }
+            }
+        },
+        addSource(file) {
+            let params = [{
+                n: file.name,
+                file: file.url,
+                type: file.type,
+                pid: '0',
+                uid: this.userid,
+                size: file.size,
+            }];
+            this.ajax
+                .post(this.$store.state.api + "addSourceFile", params)
+                .then((res) => {
+                    // if (_ctype == 2) {
+                    //     this.$message.success('上传成功');
+                    // }
+                })
+                .catch((err) => {
+                    console.error(err);
+                });
+        },
+        formatFileSize(bytes) {
+            if (bytes < 1024) {
+                return bytes + "B";
+            } else if (bytes < 1048576) {
+                return (bytes / 1024).toFixed(2) + "KB";
+            } else if (bytes < 1073741824) {
+                return (bytes / 1048576).toFixed(2) + "MB";
+            } else {
+                return (bytes / 1073741824).toFixed(2) + "GB";
+            }
+        },
+        downloadFile(f) {
+            var credentials = {
+                accessKeyId: "AKIATLPEDU37QV5CHLMH",
+                secretAccessKey: "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",
+            }; //秘钥形式的登录上传
+            window.AWS.config.update(credentials);
+            window.AWS.config.region = "cn-northwest-1"; //设置区域
+            let url2 = f.url;
+            let _url2 = "";
+            if (
+                url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+            ) {
+                _url2 = url2.split(
+                    "https://view.officeapps.live.com/op/view.aspx?src="
+                )[1];
+            } else {
+                _url2 = url2;
+            }
+            let _this = this;
+
+            _this.downLoading = _url2
+            var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+            let name = decodeURIComponent(_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1])
+            var params = {
+                Bucket: "ccrb",
+                Key: name
+            };
+            s3.getObject(params, function (err, data) {
+                _this.downLoading = ''
+                if (err) console.log(err, err.stack); // an error occurred
+                else {
+                    let url = window.URL.createObjectURL(new Blob([data.Body]));
+                    let a = document.createElement("a");
+                    a.name = f.name;
+                    a.href = url;
+                    a.download = f.name;
+                    a.click();
+                    console.log(data);
+                }          // sxuccessful response
+
+            });
+        },
+        setCheckJson(name, url, type) {
+            if (this.checkJson.file) {
+                this.checkJson.file.push({
+                    name: name,
+                    url: url,
+                    type: type,
+                });
+            } else {
+                this.checkJson.file = []
+                this.checkJson.file.push({
+                    name: name,
+                    url: url,
+                    type: type,
+                });
+            }
+            this.$forceUpdate();
+        },
+        checkFile(item) {
+            if (item.type == 3) {
+                this.$hevueImgPreview(item.url);
+            } else if (item.type == 5) {
+                this.downloadFile(item);
+            } else if (item.type == 1) {
+                this.dialogVisibleOffice = true
+                this.wurl = item.url
+            } else if (item.type == 2) {
+                this.dialogVisibleVideo = true
+                this.wurl = item.url
+            } else if (item.type == 4) {
+                this.dialogVisiblePdf = true
+                this.wurl = item.url
+            }
+        },
+        delFile(index) {
+            this.checkJson.file.splice(index, 1)
+            this.$emit('update:cJson', this.checkJson)
+            this.$forceUpdate();
+        },
+        uploadCourse() {
+            this.isloading = true;
+            const _chapInfo = this.checkJson.file;
+            let url = [];
+            for (let i = 0; i < _chapInfo.length; i++) {
+                url.push({
+                    name: _chapInfo[i].name,
+                    url: _chapInfo[i].url,
+                });
+            }
+            console.log(url);
+            this.downLoadAll(url);
+        },
+        downLoadAll(url) {
+            const data = url; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
+            const zip = new JSZip();
+            const cache = {};
+            const promises = [];
+            data.forEach((item) => {
+                const promise = getFile(item.url).then((data) => {
+                    if (data.data != 1) {
+                        // 下载文件, 并存成ArrayBuffer对象
+                        const file_name = item.name; // 获取文件名
+                        zip.file(file_name, data.data, { binary: true }); // 逐个添加文件
+                        cache[file_name] = data.data;
+                    }
+                });
+                promises.push(promise);
+            });
+            Promise.all(promises).then(() => {
+                zip.generateAsync({ type: "blob" }).then((content) => {
+                    // 生成二进制流
+                    FileSaver.saveAs(content, "附件.zip"); // 利用file-saver保存文件  自定义文件名
+                    setTimeout(() => {
+                        this.isloading = false;
+                    }, 2000);
+                });
+            });
+        },
+    },
+    mounted() {
+        this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
+
+    }
+}
+</script>
+
+<style scoped>
+.c_box {
+    width: 100%;
+    position: relative;
+}
+
+/* .mask {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+} */
+
+.choice_box {
+    white-space: pre-line;
+}
+
+.choice_box>.title {
+    font-weight: bold;
+    width: 100%;
+    word-break: break-all;
+}
+
+.choice_box>.choices {
+    margin-top: 10px;
+}
+
+.binfo_input {
+    width: 100%;
+    margin: 0;
+    padding: 10px;
+    display: block;
+    min-width: 0;
+    outline: none;
+    box-sizing: border-box;
+    background: none;
+    border: none;
+    border-radius: 5px;
+    background: #fff;
+    font-size: 16px;
+    resize: none;
+    font-family: 'Microsoft YaHei';
+    min-height: 120px;
+    /* border: 1px solid #3682fc00; */
+    border: 1.5px solid #e0e0e0;
+    position: relative;
+}
+
+.binfo_input>.uploadQ {
+    /* border: 1.5px dashed #d1fdfdf; */
+    height: 120px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f9fafb;
+    color: rgb(124, 124, 124);
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.mask {
+    background-color: rgb(0 0 0 / 30%);
+    /* position: fixed; */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 90;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.progressBox {
+    width: 300px;
+    height: 150px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 6px 1px #bfbfbf;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+    color: #6c6c6c;
+}
+
+.progressBox>>>.el-progress-bar__outer {
+    background-color: #d1dfff !important;
+}
+
+.progressBox .lbox {
+    height: 50px;
+    font-size: 19px;
+    display: flex;
+    align-items: center;
+    color: #747474;
+}
+
+.progressBox .lbox img {
+    width: 40px;
+    margin-right: 20px;
+}
+
+.closeCss {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+}
+
+.closeCss>img {
+    width: 100%;
+    height: 100%;
+}
+
+.binfo_input>.fileBox {}
+
+.binfo_input>.fileBox .fileC {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    cursor: pointer;
+}
+
+.binfo_input>.fileBox .fileC>.file {
+    width: 200px;
+    height: 140px;
+    margin: 10px 10px 10px 0px;
+    border-radius: 15px;
+    box-shadow: rgb(223, 218, 218) 0px 0px 6px 1px;
+    overflow: hidden;
+    margin-right: 15px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.binfo_input>.fileBox .fileC>.file>.img {
+    width: 100%;
+    height: calc(100% - 35px);
+    object-fit: cover;
+}
+
+.binfo_input>.fileBox .fileC>.file>.del {
+    position: absolute;
+    width: 25px;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+}
+
+.binfo_input>.fileBox .fileC>.file>.download {
+    position: absolute;
+    width: 25px;
+    top: 10px;
+    right: 35px;
+    cursor: pointer;
+    opacity: .8;
+}
+
+.binfo_input>.fileBox .fileC>.file>.name {
+    height: 35px;
+    width: 100%;
+    background: #f9f9f9;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+
+.binfo_input>.fileBox .fileC>.file>.name>span {
+    display: block;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.binfo_input>.fileBox .btn {
+    width: 100%;
+    height: 40px;
+    background: #007bff;
+    color: #fff;
+    border-radius: 15px;
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.choice_box>.c_title {
+    display: flex;
+    justify-content: space-between;
+}
+
+.choice_box>.c_title .title {
+    font-weight: bold;
+    width: 100%;
+    word-break: break-all;
+}
+
+.choice_box>.c_title .p_box {
+    margin-left: 5px;
+    min-width: fit-content;
+    display: flex;
+    align-items: center;
+}
+
+.p_box>.btnU {
+    color: #fff;
+    background-color: #0061FF;
+    padding: 0 24px;
+    font-size: 14px;
+    min-width: 64px;
+    font-weight: 500;
+    border-radius: 4px;
+    box-sizing: border-box;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+
+.c_input {
+    width: 90px;
+}
+
+.c_input>>>.el-input__inner {
+    padding: 0 5px;
+    text-align: right;
+}
+
+.uploadBtn {
+    display: flex;
+    margin-bottom: 10px;
+    align-items: center;
+    width: 100%;
+    justify-content: flex-end;
+}
+
+.uploadBtn .btn {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    height: 30px;
+    padding: 0 8px;
+    background: #fff;
+    color: #3681FC;
+    border: 1px solid #3681FC;
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-size: 14px;
+    align-items: center;
+    margin-right: 10px;
+}
+
+.uploadBtn .switch{
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+.uploadBtn .switch > span{
+    margin-left: 5px;
+}
+</style>

src/components/scoreList/commpont/file/checkfile.vue

@@ -0,0 +1,104 @@
+<template>
+    <el-dialog title="素材库" :visible.sync="dialogVisiblefile" :append-to-body="true" width="100%"
+        :before-close="handleClose" class="dialog_diy">
+        <div style="width: 100%;height: 100%;">
+            <fileBox type="2" @addFile="addFile"></fileBox>
+        </div>
+    </el-dialog>    
+</template>
+  
+<script>
+import fileBox from './library.vue';
+export default {
+    components: {
+        fileBox,
+    },
+    props: {
+        dialogVisiblefile: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            progress: 0,
+            isFinishSize: 0,
+            proVisible: false,
+            isAllSize: 0,
+            dialogVisiblefile2: false,
+            userid: this.$route.query.userid,
+            page: 1,
+            isLoading: false,
+            total: 0,
+            chapInfo: [],
+            choose: 0,
+            mtp: require("../../../../assets/tup1.png"),
+            msp: require("../../../../assets/icon/fileIcon/isVideo.png"),
+            mfj: require("../../../../assets/icon/fileIcon/word2.png"),
+        };
+    },
+    methods: {
+        handleClose(done) {
+            this.close();
+            done();
+        },
+        handleClose2(done) {
+            done();
+        },
+        close() {
+            this.$emit("update:dialogVisiblefile", false);
+        },
+        addFile(file){
+            for(var i = 0; i < file.length; i++){
+                this.$emit("setCheckJson", file[i].name, file[i].file, file[i].type);
+            }
+            this.close();
+            this.$message.success('添加成功');
+            // this.$emit("setCheckJson", name, url, _type);
+        }
+
+    }   
+};
+</script>
+  
+<style scoped>
+.dialog_diy>>>.el-dialog {
+    height: 100%;
+    margin: 0 auto !important;
+}
+
+.dialog_diy>>>.el-dialog__header {
+    background: #454545 !important;
+    padding: 15px 20px;
+}
+
+.dialog_diy>>>.el-dialog__body {
+    height: calc(100% - 55px);
+    box-sizing: border-box;
+    padding: 0px;
+}
+
+.dialog_diy>>>.el-dialog__title {
+    color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn {
+    top: 19px;
+}
+
+.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: #fafafa;
+}
+
+
+</style>
+  

src/components/scoreList/commpont/file/checkfileJiu.vue

@@ -0,0 +1,765 @@
+<template>
+    <el-dialog title="上传文件" :visible.sync="dialogVisiblefile" :append-to-body="true" width="600px"
+        :before-close="handleClose" class="dialog_diy">
+        <div class="fileCss">
+            <div>
+                <button class="info_btn" @click="addImg($event)">
+                    选择本地文件
+                    <input type="file" accept="*" style="display: none" multiple="multiple" @change="beforeUpload" />
+                </button>
+                <div class="spanName">选择本地文件</div>
+            </div>
+            <!-- <div>
+                <el-button @click="openFile">选择素材库文件</el-button>
+                <div class="spanName">选择素材库文件</div>
+            </div> -->
+        </div>
+        <div v-if="proVisible" class="mask">
+            <div class="progressBox">
+                <div class="lbox">
+                    <img src="../../../../assets/loading.gif" />上传中，请稍后
+                </div>
+                <!-- <div style="margin-bottom: 10px">
+                    <span>{{
+                        isFinishSize
+                    }}M</span>
+                    /
+                    <span>{{
+                        isAllSize
+                    }}M</span>
+                </div>
+                <el-progress :text-inside="true" :stroke-width="20" :percentage="progress
+                    ? progress
+                    : 0
+                    " style="width: 80%"></el-progress> -->
+            </div>
+        </div>
+        <el-dialog title="选择素材库文件" :visible.sync="dialogVisiblefile2" :append-to-body="true" width="710px"
+            :before-close="handleClose2" class="dialog_diy">
+            <div class="file_box">
+                <div class="student_head">
+                    <div class="three">
+                        <div :class="choose == 0 ? 'choose' : ''" @click="sMtl(0)">图片</div>
+                        <div :class="choose == 1 ? 'choose' : ''" @click="sMtl(1)">视频</div>
+                        <div :class="choose == 2 ? 'choose' : ''" @click="sMtl(2)">附件</div>
+                    </div>
+                </div>
+                <div class="student_table" v-loading="isLoading">
+                    <div v-if="this.choose == 0" class="boxCss">
+                        <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
+                            <div class="tup">
+                                <img :src="item.chapdataInfo ? JSON.parse(item.chapdataInfo).url : mtp
+                                    " alt="" @click="checkJson(JSON.parse(item.chapdataInfo))" />
+                                <div class="deleteWord">
+                                    <img src="../../../../assets/icon/delete.png" alt="" />
+                                </div>
+                            </div>
+                            <div class="bottom_box">
+                                <el-tooltip :content="item.chapdataInfo
+                                    ? JSON.parse(item.chapdataInfo).name
+                                    : '暂无名称'" placement="top" effect="dark">
+                                    <div>
+                                        {{
+                                            item.chapdataInfo
+                                            ? JSON.parse(item.chapdataInfo).name
+                                            : "暂无名称"
+                                        }}
+                                    </div>
+                                </el-tooltip>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-if="this.choose == 1" class="boxCss">
+                        <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
+                            <div class="tup">
+                                <img :src="msp" alt="" @click="checkJson(JSON.parse(item.chapdataInfo))" />
+                                <div class="deleteWord">
+                                    <img src="../../../../assets/icon/delete.png" alt="" />
+                                </div>
+                            </div>
+                            <div class="bottom_box">
+                                <el-tooltip :content="item.chapdataInfo
+                                    ? JSON.parse(item.chapdataInfo).name
+                                    : '暂无名称'" placement="top" effect="dark">
+                                    <div>
+                                        {{
+                                            item.chapdataInfo
+                                            ? JSON.parse(item.chapdataInfo).name
+                                            : "暂无名称"
+                                        }}
+                                    </div>
+                                </el-tooltip>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-if="this.choose == 2" class="boxCss">
+                        <div class="out_box" v-for="(item, index) in chapInfo" :key="index">
+                            <div class="tup">
+                                <img :src="mfj" alt="" @click="checkJson(JSON.parse(item.chapdataInfo))" />
+                                <div class="deleteWord">
+                                    <img src="../../../../assets/icon/delete.png" alt="" />
+                                </div>
+                            </div>
+                            <div class="bottom_box">
+                                <el-tooltip :content="item.chapdataInfo
+                                    ? JSON.parse(item.chapdataInfo).name
+                                    : '暂无名称'" placement="top" effect="dark">
+                                    <div>
+                                        {{
+                                            item.chapdataInfo
+                                            ? JSON.parse(item.chapdataInfo).name
+                                            : "暂无名称"
+                                        }}
+                                    </div>
+                                </el-tooltip>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="student_page">
+                    <el-pagination background layout="prev, pager, next" :page-size="10" :total="total"
+                        v-if="page && chapInfo.length" @current-change="handleCurrentChange">
+                    </el-pagination>
+                </div>
+            </div>
+        </el-dialog>
+    </el-dialog>
+</template>
+  
+<script>
+export default {
+    props: {
+        dialogVisiblefile: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            progress: 0,
+            isFinishSize: 0,
+            proVisible: false,
+            isAllSize: 0,
+            dialogVisiblefile2: false,
+            userid: this.$route.query.userid,
+            page: 1,
+            isLoading: false,
+            total: 0,
+            chapInfo: [],
+            choose: 0,
+            mtp: require("../../../../assets/tup1.png"),
+            msp: require("../../../../assets/icon/fileIcon/isVideo.png"),
+            mfj: require("../../../../assets/icon/fileIcon/word2.png"),
+        };
+    },
+    methods: {
+        handleClose(done) {
+            this.close();
+            done();
+        },
+        handleClose2(done) {
+            done();
+        },
+        close() {
+            this.$emit("update:dialogVisiblefile", false);
+        },
+        openFile() {
+            this.dialogVisiblefile2 = true
+            this.selectMtl();
+        },
+        sMtl(choose) {
+            this.choose = choose
+            this.page = 1
+            this.selectMtl()
+        },
+        handleCurrentChange(val) {
+            this.page = val
+            this.selectMtl()
+        },
+        selectMtl() {
+            this.isLoading = true;
+            let params = {
+                t: this.choose,
+                uid: this.userid,
+                page: this.page,
+            };
+            this.ajax
+                .get(this.$store.state.api + "selectMtl2", params)
+                .then((res) => {
+                    this.isLoading = false;
+                    this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+                    this.chapInfo = res.data[0];
+                })
+                .catch((err) => {
+                    this.isLoading = false;
+                    console.error(err);
+                });
+        },
+        addImg(e) {
+            var el = e.currentTarget;
+            el.getElementsByTagName("input")[0].click();
+            e.target.value = "";
+        },
+        beforeUpload(event, type) {
+            // const loading = this.openLoading();
+            let cfindex2 = 0;
+            for (var cfindex = 0; cfindex < event.target.files.length; cfindex++) {
+                let file = event.target.files[cfindex];
+                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;
+
+                // _this.progress = 0;
+                _this.proVisible = true;
+                // _this.isFinishSize = 0;
+                // _this.isAllSize = (file.size / 1024 / 1024).toFixed(2);
+                _this.$forceUpdate();
+                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.progress = parseInt((evt.loaded / evt.total) * 100);
+                            // _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
+                            // _this.$forceUpdate();
+                        })
+                        .send(function (err, data) {
+                            cfindex2++;
+
+                            // _this.progress = 100;
+                            // _this.isFinishSize = _this.isAllSize;
+                            // _this.$forceUpdate();
+                            // setTimeout(() => {
+                            //     _this.proVisible = false;
+                            //     _this.$forceUpdate();
+                            // }, 1000);
+                            setTimeout(() => {
+                                if (
+                                cfindex2 == event.target.files.length - 1 ||
+                                cfindex2 > event.target.files.length - 1
+                                ) {
+                                _this.proVisible = false;
+                                _this.close();
+                                }
+                            }, 1000);
+                            // loading.close();
+                            if (err) {
+                                _this.$message.error("上传失败");
+                            } else {
+                                let _type = 2;
+                                var imgA = [
+                                    "png",
+                                    "jpg",
+                                    "jpeg",
+                                    "bmp",
+                                    "gif",
+                                    "webp",
+                                    "psd",
+                                    "svg",
+                                    "tiff",
+                                ];
+                                var fileA = [
+                                    "DOC",
+                                    "DOCX",
+                                    "DOCM",
+                                    "DOTM",
+                                    "DOTX",
+                                    "PPTX",
+                                    "PPSX",
+                                    "PPT",
+                                    "PPS",
+                                    "PPTM",
+                                    "POTM",
+                                    "PPAM",
+                                    "POTX",
+                                    "PPSM",
+                                    "XLSX",
+                                    "XLS",
+                                ];
+                                var videoA = [
+                                    "AVI",
+                                    "NAVI",
+                                    "MPEG",
+                                    "ASF",
+                                    "MOV",
+                                    "WMV",
+                                    "3GP",
+                                    "RM",
+                                    "RMVB",
+                                    "FLV",
+                                    "F4V",
+                                    "H.264",
+                                    "H.265",
+                                    "REAL VIDEO",
+                                    "MKV",
+                                    "WebM",
+                                    "HDDVD",
+                                    "MP4",
+                                    "MPG",
+                                    "M4V",
+                                    "MGV",
+                                    "OGV",
+                                    "QTM",
+                                    "STR",
+                                    "AMC",
+                                    "DVX",
+                                    "EVO",
+                                    "DAT",
+                                    "OGG",
+                                    "OGM",
+                                ];
+                                if (
+                                    fileA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleUpperCase()
+                                    ) != -1
+                                ) {
+                                    _type = 1; //word 文件
+                                } else if (
+                                    videoA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleUpperCase()
+                                    ) != -1
+                                ) {
+                                    _type = 2; //视频
+                                } else if (
+                                    imgA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleLowerCase()
+                                    ) != -1
+                                ) {
+                                    _type = 3; //图片
+                                } else if (
+                                    'pdf'.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleLowerCase()
+                                    ) != -1
+                                ) {
+                                    _type = 4; //pdf
+                                } else {
+                                    _type = 5; //文件
+                                }
+                                // if (_this.checkJson.file) {
+                                // _this.checkJson.file.push({
+                                //     name: file.name,
+                                //     url: data.Location,
+                                //     type: _type,
+                                // });
+                                // } else {
+                                //     _this.checkJson.file = []
+                                //     _this.checkJson.file.push({
+                                //         name: file.name,
+                                //         url: data.Location,
+                                //         type: _type,
+                                //     });
+                                // }
+                                _this.$emit("setCheckJson", file.name, data.Location, _type);
+                                _this.$forceUpdate();
+
+                                console.log(_this.checkJson);
+                                console.log(data.Location);
+                            }
+                        });
+                }
+            }
+        },
+        checkJson(json) {
+            let _type = 2;
+            let url = "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/"+encodeURIComponent(json.url.split(
+          "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/"
+        )[1]);
+            let name = json.name
+            var imgA = [
+                "png",
+                "jpg",
+                "jpeg",
+                "bmp",
+                "gif",
+                "webp",
+                "psd",
+                "svg",
+                "tiff",
+            ];
+            var fileA = [
+                "DOC",
+                "DOCX",
+                "DOCM",
+                "DOTM",
+                "DOTX",
+                "PPTX",
+                "PPSX",
+                "PPT",
+                "PPS",
+                "PPTM",
+                "POTM",
+                "PPAM",
+                "POTX",
+                "PPSM",
+                "XLSX",
+                "XLS",
+            ];
+            var videoA = [
+                "AVI",
+                "NAVI",
+                "MPEG",
+                "ASF",
+                "MOV",
+                "WMV",
+                "3GP",
+                "RM",
+                "RMVB",
+                "FLV",
+                "F4V",
+                "H.264",
+                "H.265",
+                "REAL VIDEO",
+                "MKV",
+                "WebM",
+                "HDDVD",
+                "MP4",
+                "MPG",
+                "M4V",
+                "MGV",
+                "OGV",
+                "QTM",
+                "STR",
+                "AMC",
+                "DVX",
+                "EVO",
+                "DAT",
+                "OGG",
+                "OGM",
+            ];
+            if (
+                fileA.indexOf(
+                    url.split(".")[
+                    url.split(".").length - 1
+                    ].toLocaleUpperCase()
+                ) != -1
+            ) {
+                _type = 1; //word 文件
+            } else if (
+                videoA.indexOf(
+                    url.split(".")[
+                    url.split(".").length - 1
+                    ].toLocaleUpperCase()
+                ) != -1
+            ) {
+                _type = 2; //视频
+            } else if (
+                imgA.indexOf(
+                    url.split(".")[
+                    url.split(".").length - 1
+                    ].toLocaleLowerCase()
+                ) != -1
+            ) {
+                _type = 3; //图片
+            } else if (
+                'pdf'.indexOf(
+                    url.split(".")[
+                    url.split(".").length - 1
+                    ].toLocaleLowerCase()
+                ) != -1
+            ) {
+                _type = 4; //pdf
+            } else {
+                _type = 5; //文件
+            }
+            this.$emit("setCheckJson", name, url, _type);
+            this.dialogVisiblefile2 = false
+            this.close();
+        }
+    }
+};
+</script>
+  
+<style scoped>
+.dialog_diy>>>.el-dialog {
+    /* height: 100%; */
+    margin: 10vh auto !important;
+}
+
+.dialog_diy>>>.el-dialog__header {
+    background: #454545 !important;
+    padding: 15px 20px;
+}
+
+.dialog_diy>>>.el-dialog__body {
+    height: calc(100% - 124px);
+    box-sizing: border-box;
+    padding: 0px;
+}
+
+.dialog_diy>>>.el-dialog__title {
+    color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn {
+    top: 19px;
+}
+
+.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: #fafafa;
+}
+
+
+.fileCss {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-around;
+    align-items: center;
+    padding: 40px 0;
+    box-sizing: border-box;
+}
+
+.fileCss>div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.fileCss .spanName {
+    margin-top: 10px
+}
+
+
+.info_btn,
+.teacherWord {
+    color: #fff;
+    background-color: #0f7eff;
+    padding: 8px 24px;
+    font-size: 0.9375rem;
+    box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%),
+        0px 3px 1px -2px rgb(0 0 0 / 12%);
+    min-width: 64px;
+    font-weight: 500;
+    border-radius: 4px;
+    box-sizing: border-box;
+    border: none;
+    cursor: pointer;
+}
+
+.mask {
+    background-color: rgb(0 0 0 / 30%);
+    /* position: fixed; */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 90;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.progressBox {
+    width: 300px;
+    height: 150px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 6px 1px #bfbfbf;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+    color: #6c6c6c;
+}
+
+.progressBox>>>.el-progress-bar__outer {
+    background-color: #d1dfff !important;
+}
+
+.progressBox .lbox {
+    height: 50px;
+    font-size: 19px;
+    display: flex;
+    align-items: center;
+    color: #747474;
+}
+
+.progressBox .lbox img {
+    width: 40px;
+    margin-right: 20px;
+}
+
+.closeCss {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+}
+
+.closeCss>img {
+    width: 100%;
+    height: 100%;
+}
+
+.file_box {
+    width: 100%;
+    padding: 15px;
+    box-sizing: border-box;
+}
+
+.student_head>>>.el-button--primary {
+    background-color: #2268bc;
+}
+
+.student_head {
+    display: flex;
+    justify-content: space-between;
+}
+
+.three {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 200px;
+    height: 30px;
+}
+
+.three>div {
+    cursor: pointer;
+}
+
+.choose {
+    border-bottom: 5px solid #3994fd;
+}
+
+.student_table {
+    width: 100%;
+    height: 100%;
+    background: #f2f2f2;
+    margin-top: 10px;
+}
+
+.tup {
+    width: calc(100% - 20px);
+    height: 120px;
+    margin: 0 auto;
+    position: relative;
+}
+
+.out_box:hover .deleteWord {
+    /* display: block; */
+}
+
+.deleteWord {
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    right: -25px;
+    top: -10px;
+    cursor: pointer;
+    display: none;
+}
+
+.tup>img,
+.deleteWord>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.out_box {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    width: 216px;
+    padding: 10px 0;
+    background: #fff;
+    margin: 0 10px 10px 0;
+    height: fit-content;
+    cursor: pointer;
+}
+
+.out_box:nth-child(3n){
+    margin-right: 0;
+}
+
+.bottom_box {
+    display: flex;
+    text-align: center;
+    margin: 0 auto;
+    padding: 10px 0 5px 0;
+}
+
+.bottom_box>div:nth-child(1) {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+    width: 200px;
+}
+
+.uploadThing {
+    background: #2268bc;
+    width: 90px;
+    height: 35px;
+    color: #fff;
+    font-size: 12px;
+    text-align: center;
+    line-height: 35px;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.top {
+    display: flex;
+    justify-content: space-between;
+}
+
+.student_page {
+    margin-top: 30px;
+}
+
+.boxCss {
+    padding: 15px 5px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    min-height: 250px;
+}
+</style>
+  

src/components/scoreList/commpont/file/fileBox.vue

@@ -0,0 +1,1326 @@
+<template>
+    <div class="f_box">
+        <div class="f_box_top">
+            <div class="f_box_top_left">
+                <div class="btn" @click="addImg($event)" v-if="type == '1'">
+                    上传本地文件
+                    <input type="file" accept="*" style="display: none" multiple="multiple"
+                        @change="beforeUpload($event)" />
+                </div>
+                <div class="btn" @click="addFileToTest()" :style="{opacity: checkArray.length ? 1 : .5}" v-if="type == '2'">
+                    添加至表单
+                </div>
+                <div class="btn2" v-if="checkArray.length && type == '1'" @click="openMoveBox">移动到</div>
+                <div class="btn2" v-if="checkArray.length && type == '1'" @click="downPan">下载</div>
+                <div class="delBtn" v-if="checkArray.length && type == '1'" @click="deleteFile"></div>
+            </div>
+            <div class="f_box_top_right">
+                <div class="input">
+                    <input type="text" v-model="fileName" placeholder="请输入你需要搜索的文件名字" @keyup.enter="serchFile">
+                    <div class="serch" @click="serchFile"></div>
+                </div>
+                <div class="tab">
+                    <div class="list" :class="{ active: stype == '2' }" @click="stype = '2'"></div>
+                    <div class="table" :class="{ active: stype == '1' }" @click="stype = '1'"></div>
+                </div>
+            </div>
+        </div>
+        <div class="none_box" v-if="fileArray.length == 0">
+            暂无上传文件
+        </div>
+        <div class="f_box_file_square" v-if="stype == '1' && fileArray.length" v-loading.body="isLoading">
+            <div class="f_box_file_allCheck" @click="checkAll" v-if="fileArray.length">
+                <img :src="checkImg" alt="" v-if="checkArray.length != fileArray.length">
+                <img :src="checkIsImg" alt="" v-else>
+                <span>全部文件</span>
+            </div>
+            <div class="f_box_file" v-for="(item, index) in fileArray" :key="index"
+                :class="{ check: checkArray.indexOf(item.id) != -1 }" @click.stop="selectFile(item)">
+                <img :src="officeImg" alt="" v-if="item.type == 1">
+                <img :src="pdfImg" alt="" v-if="item.type == 4">
+                <img :src="videoImg" alt="" v-if="item.type == 2">
+                <img :src="otherImg" alt="" v-if="item.type == 5">
+                <img :src="item.file" alt="" v-if="item.type == 3">
+                <el-tooltip :content="item.name" placement="top" effect="dark">
+                    <!-- content to trigger tooltip here -->
+                    <div class="name">{{ item.name }}</div>
+                </el-tooltip>
+                <div class="check" @click.stop="checkFile(item.id)">
+                    <img :src="checkImg" alt="" v-if="checkArray.indexOf(item.id) == -1">
+                    <img :src="checkIsImg" alt="" v-else>
+                </div>
+            </div>
+        </div>
+        <div class="f_box_file_list" v-else-if="stype == '2' && fileArray.length" v-loading.body="isLoading">
+            <div class="list_file_box">
+                <div class="list_top">
+                    <div class="check">
+                        <div class="list_allcheck" @click="checkAll" v-if="fileArray.length">
+                            <img :src="checkImg" alt="" v-if="checkArray.length != fileArray.length">
+                            <img :src="checkIsImg" alt="" v-else>
+                        </div>
+                    </div>
+                    <div class="name">文件名</div>
+                    <div class="size">大小</div>
+                    <div class="type">类型</div>
+                    <div class="time">上传时间</div>
+                </div>
+                <div class="list_content" :class="{ active: checkArray.indexOf(item.id) != -1 }"
+                    @click="checkFile(item.id)" v-for="(item, index) in fileArray" :key="index">
+                    <div class="check">
+                        <div class="list_allcheck">
+                            <img :src="checkImg" alt="" v-if="checkArray.indexOf(item.id) == -1">
+                            <img :src="checkIsImg" alt="" v-else>
+                        </div>
+                    </div>
+                    <div class="name">
+                        <div class="list_file_name">
+                            <img :src="officeImg" alt="" v-if="item.type == 1">
+                            <img :src="pdfImg" alt="" v-if="item.type == 4">
+                            <img :src="videoImg" alt="" v-if="item.type == 2">
+                            <img :src="otherImg" alt="" v-if="item.type == 5">
+                            <img :src="item.file" alt="" v-if="item.type == 3">
+                            <el-tooltip :content="item.name" placement="top" effect="dark">
+                                <div>{{ item.name }}</div>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                    <div class="size">
+                        {{ item.size }}
+                    </div>
+                    <div class="type">
+                        {{ retrunType(item) }}
+                    </div>
+                    <div class="time">
+                        {{ item.time }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-if="proVisible" class="mask">
+            <div class="progressBox">
+                <div class="lbox">
+                    <img src="../../../../assets/loading.gif" />上传中，请稍后
+                </div>
+                <!-- <div style="margin-bottom: 10px">
+                                <span>{{
+                                    isFinishSize
+                                }}M</span>
+                                /
+                                <span>{{
+                                    isAllSize
+                                }}M</span>
+                            </div> -->
+                <!-- <el-progress :text-inside="true" :stroke-width="20" :percentage="progress
+                                ? progress
+                                : 0
+                                " style="width: 80%"></el-progress> -->
+            </div>
+        </div>
+        <wpdf :dialogVisiblePdf.sync="dialogVisiblePdf" :url="wurl"></wpdf>
+        <wVideo :dialogVisibleVideo.sync="dialogVisibleVideo" :url="wurl"></wVideo>
+        <wOffice :dialogVisibleOffice.sync="dialogVisibleOffice" :url="wurl"></wOffice>
+        <el-dialog title="移动至" :visible.sync="moveBox" width="400px" @close="moveBox = false" class="dialog">
+            <div>
+                <div class="type_nav_box" v-for="(item, index) in checkTypeArray" :key="index">
+                    <div class="nav" :class="{ active: item.open }" @click.stop="openChild(index)">
+                        <span class="down"></span>
+                        <span class="file"></span>
+                        <el-tooltip :content="item.name" placement="top" effect="dark">:
+                            <!-- content to trigger tooltip here -->
+                            <span class="name">{{ item.name }}</span>
+                        </el-tooltip>
+                    </div>
+                    <div class="child" v-if="item.open">
+                        <div class="nav" v-for="(item2, index2) in item.child" :key="index + '-' + index2"
+                            :class="{ active: moveChild.id == item2.id }" @click.stop="checkMoveChild(item2)">
+                            <span class="file"></span>
+                            <el-tooltip :content="item2.name" placement="top" effect="dark">:
+                                <!-- content to trigger tooltip here -->
+                                <span class="name">{{ item2.name }}</span>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <span slot="footer">
+                <el-button @click="moveBox = false">取 消</el-button>
+                <el-button type="primary" @click="confirmMove">确 定</el-button>
+            </span>
+        </el-dialog>
+
+    </div>
+</template>
+
+<script>
+import officeImg from '../../../../assets/icon/sourceFile/office.png'
+import pdfImg from '../../../../assets/icon/sourceFile/pdf.png'
+import videoImg from '../../../../assets/icon/sourceFile/video.png'
+import otherImg from '../../../../assets/icon/sourceFile/other.png'
+import checkImg from '../../../../assets/icon/sourceFile/check.png'
+import checkIsImg from '../../../../assets/icon/sourceFile/check_is.png'
+
+
+import wVideo from "./wVideo.vue";
+import wpdf from "./wPdf2.vue";
+import wOffice from "./wOffice.vue";
+
+import JSZip from "jszip";
+import FileSaver from "file-saver";
+
+const getFile = (url) => {
+    return new Promise((resolve, reject) => {
+        var credentials = {
+            accessKeyId: "AKIATLPEDU37QV5CHLMH",
+            secretAccessKey: "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",
+        }; //秘钥形式的登录上传
+        window.AWS.config.update(credentials);
+        window.AWS.config.region = "cn-northwest-1"; //设置区域
+        let url2 = url;
+        let _url2 = "";
+        if (
+            url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+        ) {
+            _url2 = url2.split(
+                "https://view.officeapps.live.com/op/view.aspx?src="
+            )[1];
+        } else {
+            _url2 = url2;
+        }
+        var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+        let name = decodeURIComponent(_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1])
+        var params = {
+            Bucket: "ccrb",
+            Key: name
+        };
+        s3.getObject(params, function (err, data) {
+            if (err) {
+                console.log(err, err.stack)
+                resolve({ data: 1 });
+            } else {
+                resolve({ data: data.Body });
+                console.log(data);
+            }          // sxuccessful response
+
+        });
+        // axios({
+    });
+};
+export default {
+    components: {
+        wVideo,
+        wpdf,
+        wOffice,
+    },
+    props: {
+        userid: {
+            type: String,
+        },
+        typeArray: {
+            type: Array,
+        },
+        pid: {
+            type: String,
+        },
+        type: {
+            type: String
+        }
+    },
+    watch: {
+        pid: {
+            immediate: true,
+            deep: true,
+            handler(newValue, oldValue) {
+                this.fileArray = []
+                this.checkArray = []
+                this.fileName = ''
+                this.getData()
+            },
+        },
+    },
+    data() {
+        return {
+            isLoading: false,
+            proVisible: false,
+            stype: 1,
+            fileArray: [],
+            officeImg: officeImg,
+            pdfImg: pdfImg,
+            videoImg: videoImg,
+            otherImg: otherImg,
+            checkImg: checkImg,
+            checkIsImg: checkIsImg,
+            checkArray: [],
+            dialogVisiblePdf: false,
+            dialogVisibleVideo: false,
+            dialogVisibleOffice: false,
+            wurl: '',
+            moveBox: false,
+            checkTypeArray: [],
+            moveChild: '',
+            fileName: '',
+        }
+    },
+    computed: {
+        retrunType() {
+            return function (item) {
+                if (item.type == 1) {
+                    return 'OFFICE文件'
+                } else if (item.type == 2) {
+                    return '视频文件'
+                } else if (item.type == 3) {
+                    return '图片'
+                } else if (item.type == 4) {
+                    return 'PDF文件'
+                } else if (item.type == 5) {
+                    return '其他文件'
+                }
+            };
+        }
+    },
+    methods: {
+        getData() {
+            let type = this.pid.split('-')
+            let id = ''
+            if (type.length == 1) {
+                if (type[0] == 'wu') {
+                    id = '0'
+                } else {
+                    id = this.typeArray[type[0]].id
+                }
+            } else {
+                id = this.typeArray[type[0]].child[type[1]].id
+            }
+            this.isLoading = true;
+            let params = {
+                uid: this.userid,
+                pid: id,
+                n: this.fileName
+            };
+            this.ajax
+                .get(this.$store.state.api + "getSourceFile", params)
+                .then((res) => {
+                    this.isLoading = false;
+                    this.fileArray = res.data[0];
+                })
+                .catch((err) => {
+                    this.isLoading = false;
+                    console.error(err);
+                });
+        },
+        addImg(e) {
+            var el = e.currentTarget;
+            el.getElementsByTagName("input")[0].click();
+            e.target.value = "";
+        },
+        serchFile() {
+            this.getData();
+        },
+        beforeUpload(event) {
+            // const loading = this.openLoading();
+            let file = "";
+            let cfindex2 = 0;
+            for (var cfindex = 0; cfindex < event.target.files.length; cfindex++) {
+                file = event.target.files[cfindex];
+
+                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;
+                let _name = file.name;
+                // _this.progress = 0;
+                _this.proVisible = true;
+                // _this.isFinishSize = 0;
+                // _this.isAllSize = (file.size / 1024 / 1024).toFixed(2);
+                let size = file.size;
+                _this.$forceUpdate();
+                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.progress = parseInt((evt.loaded / evt.total) * 100);
+                            // _this.isFinishSize = (evt.loaded / 1024 / 1024).toFixed(2);
+                            // _this.$forceUpdate();
+                        })
+                        .send(function (err, data) {
+                            cfindex2++;
+
+                            // _this.progress = 100;
+                            // _this.isFinishSize = _this.isAllSize;
+                            // _this.$forceUpdate();
+                            // setTimeout(() => {
+                            //     _this.proVisible = false;
+                            //     _this.$forceUpdate();
+                            // }, 1000);
+                            setTimeout(() => {
+                                if (
+                                    cfindex2 == event.target.files.length ||
+                                    cfindex2 > event.target.files.length
+                                ) {
+                                    _this.proVisible = false;
+                                }
+                            }, 1000);
+                            // loading.close();
+                            if (err) {
+                                _this.$message.error("上传失败");
+                            } else {
+                                let _type = 2;
+                                var imgA = [
+                                    "png",
+                                    "jpg",
+                                    "jpeg",
+                                    "bmp",
+                                    "gif",
+                                    "webp",
+                                    "psd",
+                                    "svg",
+                                    "tiff",
+                                ];
+                                var fileA = [
+                                    "DOC",
+                                    "DOCX",
+                                    "DOCM",
+                                    "DOTM",
+                                    "DOTX",
+                                    "PPTX",
+                                    "PPSX",
+                                    "PPT",
+                                    "PPS",
+                                    "PPTM",
+                                    "POTM",
+                                    "PPAM",
+                                    "POTX",
+                                    "PPSM",
+                                    "XLSX",
+                                    "XLS",
+                                ];
+                                var videoA = [
+                                    "AVI",
+                                    "NAVI",
+                                    "MPEG",
+                                    "ASF",
+                                    "MOV",
+                                    "WMV",
+                                    "3GP",
+                                    "RM",
+                                    "RMVB",
+                                    "FLV",
+                                    "F4V",
+                                    "H.264",
+                                    "H.265",
+                                    "REAL VIDEO",
+                                    "MKV",
+                                    "WebM",
+                                    "HDDVD",
+                                    "MP4",
+                                    "MPG",
+                                    "M4V",
+                                    "MGV",
+                                    "OGV",
+                                    "QTM",
+                                    "STR",
+                                    "AMC",
+                                    "DVX",
+                                    "EVO",
+                                    "DAT",
+                                    "OGG",
+                                    "OGM",
+                                ];
+                                if (
+                                    fileA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleUpperCase()
+                                    ) != -1
+                                ) {
+                                    _type = 1; //word 文件
+                                } else if (
+                                    videoA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleUpperCase()
+                                    ) != -1
+                                ) {
+                                    _type = 2; //视频
+                                } else if (
+                                    imgA.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleLowerCase()
+                                    ) != -1
+                                ) {
+                                    _type = 3; //图片
+                                } else if (
+                                    'pdf'.indexOf(
+                                        data.Location.split(".")[
+                                            data.Location.split(".").length - 1
+                                        ].toLocaleLowerCase()
+                                    ) != -1
+                                ) {
+                                    _type = 4; //pdf
+                                } else {
+                                    _type = 5; //文件
+                                }
+                                let _file = {
+                                    name: _name,
+                                    url: data.Location,
+                                    type: _type,
+                                    size: _this.formatFileSize(size)
+                                }
+                                // if (_this.checkJson.file) {
+                                //     _this.checkJson.file.push({
+                                //         name: file.name,
+                                //         url: data.Location,
+                                //         type: _type,
+                                //     });
+                                // } else {
+                                //     _this.checkJson.file = []
+                                //     _this.checkJson.file.push({
+                                //         name: file.name,
+                                //         url: data.Location,
+                                //         type: _type,
+                                //     });
+                                // }
+                                let type = 1
+                                if (
+                                    cfindex2 == event.target.files.length ||
+                                    cfindex2 > event.target.files.length
+                                ) {
+                                    type = 2
+                                }
+                                _this.addSource(_file, type)
+                                _this.$forceUpdate();
+
+                                console.log(_file);
+                                console.log(data.Location);
+                            }
+                        });
+                }
+            }
+        },
+        addSource(file, ctype) {
+            let _ctype = ctype
+            let type = this.pid.split('-')
+            let id = ''
+            if (type.length == 1) {
+                if (type[0] == 'wu') {
+                    id = '0'
+                } else {
+                    id = this.typeArray[type[0]].id
+                }
+            } else {
+                id = this.typeArray[type[0]].child[type[1]].id
+            }
+            let params = [{
+                n: file.name,
+                file: file.url,
+                type: file.type,
+                pid: id,
+                uid: this.userid,
+                size: file.size,
+            }];
+            this.ajax
+                .post(this.$store.state.api + "addSourceFile", params)
+                .then((res) => {
+                    if (_ctype == 2) {
+                        this.$message.success('上传成功');
+                        this.getData()
+                    }
+                })
+                .catch((err) => {
+                    console.error(err);
+                });
+        },
+        formatFileSize(bytes) {
+            if (bytes < 1024) {
+                return bytes + "B";
+            } else if (bytes < 1048576) {
+                return (bytes / 1024).toFixed(2) + "KB";
+            } else if (bytes < 1073741824) {
+                return (bytes / 1048576).toFixed(2) + "MB";
+            } else {
+                return (bytes / 1073741824).toFixed(2) + "GB";
+            }
+        },
+        checkFile(id) {
+            if (this.checkArray.indexOf(id) == -1) {
+                this.checkArray.push(id)
+            } else {
+                this.checkArray.splice(this.checkArray.indexOf(id), 1)
+            }
+        },
+        selectFile(item) {
+            if (item.type == 3) {
+                this.$hevueImgPreview(item.file);
+            } else if (item.type == 5) {
+                this.downloadFile(item);
+            } else if (item.type == 1) {
+                this.dialogVisibleOffice = true
+                this.wurl = item.file
+            } else if (item.type == 2) {
+                this.dialogVisibleVideo = true
+                this.wurl = item.file
+            } else if (item.type == 4) {
+                this.dialogVisiblePdf = true
+                this.wurl = item.file
+            }
+        },
+        downloadFile(f) {
+            this.isLoading = true;
+            var credentials = {
+                accessKeyId: "AKIATLPEDU37QV5CHLMH",
+                secretAccessKey: "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",
+            }; //秘钥形式的登录上传
+            window.AWS.config.update(credentials);
+            window.AWS.config.region = "cn-northwest-1"; //设置区域
+            let url2 = f.file;
+            let _url2 = "";
+            if (
+                url2.indexOf("https://view.officeapps.live.com/op/view.aspx?src=") != -1
+            ) {
+                _url2 = url2.split(
+                    "https://view.officeapps.live.com/op/view.aspx?src="
+                )[1];
+            } else {
+                _url2 = url2;
+            }
+            let _this = this;
+
+            var s3 = new window.AWS.S3({ params: { Bucket: "ccrb" } });
+            let name = decodeURIComponent(_url2.split("https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/")[1])
+            var params = {
+                Bucket: "ccrb",
+                Key: name
+            };
+            s3.getObject(params, function (err, data) {
+                _this.isLoading = false
+                if (err) console.log(err, err.stack); // an error occurred
+                else {
+                    let url = window.URL.createObjectURL(new Blob([data.Body]));
+                    let a = document.createElement("a");
+                    a.name = f.name;
+                    a.href = url;
+                    a.download = f.name;
+                    a.click();
+                    console.log(data);
+                }          // sxuccessful response
+
+            });
+        },
+        checkAll() {
+            if (this.checkArray.length === this.fileArray.length) {
+                this.checkArray = []
+            } else {
+                this.checkArray = []
+                this.fileArray.forEach(item => {
+                    this.checkArray.push(item.id)
+                });
+            }
+        },
+        deleteFile() {
+            this.$confirm("确定删除这些文件吗?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    let params = [
+                        { ids: this.checkArray.join(",") }
+                    ]
+                    this.ajax
+                        .post(this.$store.state.api + "deleteSourceFile", params)
+                        .then((res) => {
+                            this.$message({
+                                message: "删除成功",
+                                type: "success",
+                            });
+                            this.checkArray = []
+                            this.getData();
+                        })
+                        .catch((err) => {
+                            this.$message.error("删除失败");
+                            console.error(err);
+                        });
+                })
+                .catch(() => { });
+        },
+        openMoveBox() {
+            if (this.checkArray.length == 0) {
+                this.$message.error("请添加分类再移动");
+                return
+            }
+            let type = this.pid.split('-')
+            let id = ''
+            if (type.length == 1) {
+                if (type[0] == 'wu') {
+                    id = '0'
+                } else {
+                    id = this.typeArray[type[0]].id
+                }
+            } else {
+                id = this.typeArray[type[0]].child[type[1]].id
+            }
+            let array = JSON.parse(JSON.stringify(this.typeArray)).filter((item) => {
+                item.open = false
+                return item.child.length > 0
+            })
+
+            array = array.filter((item) => {
+                item.child = item.child.filter((item2) => {
+                    return item2.id != id
+                })
+                return item.child.length > 0
+            })
+            this.moveChild = ''
+            this.checkTypeArray = array
+            this.moveBox = true
+        },
+        openChild(index) {
+            this.checkTypeArray[index].open = !this.checkTypeArray[index].open
+        },
+        checkMoveChild(item) {
+            this.moveChild = item
+        },
+        confirmMove() {
+            if (!this.moveChild) {
+                this.$message.error("请选择移动的分类");
+                return
+            }
+            this.$confirm("确定将文件移动到" + this.moveChild.name + "下吗?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    let params = [
+                        {
+                            ids: this.checkArray.join(","),
+                            pid: this.moveChild.id
+                        }
+                    ]
+                    this.ajax
+                        .post(this.$store.state.api + "updateSourceFilePid", params)
+                        .then((res) => {
+                            this.$message({
+                                message: "移动成功",
+                                type: "success",
+                            });
+                            this.checkArray = []
+                            this.moveChild = ''
+                            this.moveBox = false
+                            this.getData();
+                        })
+                        .catch((err) => {
+                            this.$message.error("删除失败");
+                            console.error(err);
+                        });
+                })
+                .catch(() => { });
+        },
+        downPan() {
+            this.downloadFile({file:'https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/icons1712477416633.png',name:"icons1712477416633.png"})
+            // let array = []
+            // this.fileArray.forEach(item => {
+            //     if (this.checkArray.includes(item.id)) {
+            //         array.push(item)
+            //     }
+            // })
+            // if (array.length == 1) {
+            //     this.downloadFile(array[0])
+            // } else {
+            //     this.uploadCourse(array)
+            // }
+        },
+        uploadCourse(item) {
+            this.isLoading = true;
+            const _chapInfo = item;
+            let url = [];
+            for (let i = 0; i < _chapInfo.length; i++) {
+                url.push({
+                    name: _chapInfo[i].name,
+                    url: _chapInfo[i].file,
+                });
+            }
+            console.log(url);
+            this.downLoadAll(url);
+        },
+        downLoadAll(url) {
+            const data = url; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
+            const zip = new JSZip();
+            const cache = {};
+            const promises = [];
+            data.forEach((item) => {
+                const promise = getFile(item.url).then((data) => {
+                    if (data.data != 1) {
+                        // 下载文件, 并存成ArrayBuffer对象
+                        const file_name = item.name; // 获取文件名
+                        zip.file(file_name, data.data, { binary: true }); // 逐个添加文件
+                        cache[file_name] = data.data;
+                    }
+                });
+                promises.push(promise);
+            });
+            Promise.all(promises).then(() => {
+                zip.generateAsync({ type: "blob" }).then((content) => {
+                    // 生成二进制流
+                    FileSaver.saveAs(content, "附件.zip"); // 利用file-saver保存文件  自定义文件名
+                    setTimeout(() => {
+                        this.isLoading = false;
+                    }, 2000);
+                });
+            });
+        },
+        addFileToTest(){
+            if(!this.checkArray.length){
+                return
+            }
+            let file = []
+            for(let i = 0; i < this.fileArray.length; i++){
+                if(this.checkArray.includes(this.fileArray[i].id)){
+                    file.push(this.fileArray[i])
+                }
+            }
+            this.$emit('addFile', file)
+            this.checkArray = []
+        }
+    },
+    mounted() {
+        this.getData();
+    },
+}
+</script>
+
+<style scoped>
+.f_box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.f_box_top {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.f_box_top_left {
+    display: flex;
+    align-items: center;
+}
+
+.f_box_top_left .btn {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    height: 30px;
+    padding: 0 8px;
+    background: rgb(0, 97, 255);
+    color: #fff;
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-size: 14px;
+    align-items: center;
+}
+
+.f_box_top_left .btn2 {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    height: 30px;
+    padding: 0 8px;
+    background: #fff;
+    color: rgb(0, 97, 255);
+    border: 1px solid rgb(0, 97, 255);
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-size: 14px;
+    align-items: center;
+}
+
+.f_box_top_left .delBtn {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: block;
+    background-image: url('../../../../assets/icon/sourceFile/delete.png');
+    background-size: 100% 100%;
+}
+
+.f_box_top_left .btn+.btn2,
+.f_box_top_left .btn2+.btn2,
+.f_box_top_left .btn2+.delBtn {
+    margin-left: 15px;
+}
+
+.f_box_top_right {
+    margin-left: auto;
+    max-width: calc(100% - 280px);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.f_box_top_right>.input {
+    position: relative;
+    width: 250px;
+    height: 35px;
+}
+
+.f_box_top_right>.input>input {
+    width: 100%;
+    height: 100%;
+    border: 1px solid #D9D9D9;
+    border-radius: 5px;
+    padding: 0 45px 0 10px;
+    box-sizing: border-box;
+    font-size: 12px;
+    outline: none;
+}
+
+.f_box_top_right>.input>.serch {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url('../../../../assets/icon/sourceFile/search.png');
+    background-size: 100% 100%;
+    position: absolute;
+    right: 13px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+}
+
+.f_box_top_right>.tab {
+    height: 30px;
+    width: 80px;
+    margin-left: 15px;
+    background: #e7e7e7;
+    border: 2px solid #D9D9D9;
+    border-radius: 5px;
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.f_box_top_right>.tab>.table,
+.f_box_top_right>.tab>.list {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.f_box_top_right>.tab>.list::before {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url('../../../../assets/icon/sourceFile/list.png');
+    background-size: 100% 100%;
+}
+
+.f_box_top_right>.tab>.list.active,
+.f_box_top_right>.tab>.table.active {
+    background: #fff;
+}
+
+.f_box_top_right>.tab>.table::before {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-image: url('../../../../assets/icon/sourceFile/table.png');
+    background-size: 100% 100%;
+}
+
+.mask {
+    background-color: rgb(0 0 0 / 30%);
+    /* position: fixed; */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 90;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.progressBox {
+    width: 300px;
+    height: 150px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 6px 1px #bfbfbf;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+    color: #6c6c6c;
+}
+
+.progressBox>>>.el-progress-bar__outer {
+    background-color: #d1dfff !important;
+}
+
+.progressBox .lbox {
+    height: 50px;
+    font-size: 19px;
+    display: flex;
+    align-items: center;
+    color: #747474;
+}
+
+.progressBox .lbox img {
+    width: 40px;
+    margin-right: 20px;
+}
+
+.closeCss {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+}
+
+.closeCss>img {
+    width: 100%;
+    height: 100%;
+}
+
+
+.f_box_file_square {
+    height: calc(100% - 55px);
+    overflow: auto;
+    width: 100%;
+    padding: 55px;
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    position: relative;
+}
+
+.f_box_file_square>.f_box_file {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 160px;
+    height: 160px;
+    cursor: pointer;
+    margin: 0 36px 36px 0;
+    border-radius: 20px;
+    position: relative;
+}
+
+.f_box_file_square>.f_box_file:hover {
+    background: #F0F2F5;
+}
+
+.f_box_file_square>.f_box_file:hover>.check {
+    display: block;
+}
+
+.f_box_file_square>.f_box_file.check {
+    background: #E0EAFB;
+}
+
+.f_box_file_square>.f_box_file.check>.check {
+    display: block;
+}
+
+.f_box_file_square>.f_box_file>.check {
+    position: absolute;
+    left: 15px;
+    top: 15px;
+    width: 16px;
+    height: 16px;
+    background-size: 100%;
+    display: none;
+}
+
+.f_box_file_square>.f_box_file>.check>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.f_box_file_square>.f_box_file>img {
+    width: 90px;
+    height: 90px;
+    object-fit: cover;
+}
+
+.f_box_file_square>.f_box_file>.name {
+    white-space: nowrap;
+    font-size: 14px;
+    max-width: 80%;
+    overflow: hidden;
+    margin: 4px auto 0;
+    text-overflow: ellipsis;
+    text-align: center;
+}
+
+.f_box_file_list {
+    height: calc(100% - 55px);
+    overflow: auto;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.f_box_file_list>.f_box_file {}
+
+
+.f_box_file_allCheck {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    font-size: 14px;
+    top: 20px;
+    left: 10px;
+    cursor: pointer;
+}
+
+.f_box_file_allCheck>img {
+    width: 16px;
+    height: 16px;
+    object-fit: cover;
+    margin-right: 5px;
+}
+
+.dialog>>>.el-dialog__body {
+    padding: 10px 20px;
+}
+
+.type_nav_box {}
+
+.type_nav_box>.nav {
+    height: 40px;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 10px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    font-size: 16px;
+    color: #000;
+}
+
+.type_nav_box>.nav>.down {
+    min-width: 14px;
+    height: 14px;
+    background-image: url('../../../../assets/icon/sourceFile/icon_arrow.png');
+    background-size: 100% 100%;
+    margin-right: 10px;
+    transition: all 0.3s;
+    transform: rotate(-90deg);
+}
+
+.type_nav_box>.nav.active>.down {
+    transform: rotate(0deg);
+}
+
+.type_nav_box>.nav>.file {
+    min-width: 18px;
+    height: 18px;
+    background-image: url('../../../../assets/icon/sourceFile/file.png');
+    background-size: 100% 100%;
+    margin-right: 10px;
+}
+
+.type_nav_box>.nav>.name {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.type_nav_box>.child {}
+
+.type_nav_box>.child>.nav {
+    height: 40px;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0 10px 0 50px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    font-size: 16px;
+    color: #000;
+}
+
+.type_nav_box>.child>.nav.active {
+    background: #e0eafb;
+}
+
+.type_nav_box>.child>.nav>.file {
+    min-width: 18px;
+    height: 18px;
+    background-image: url('../../../../assets/icon/sourceFile/file.png');
+    background-size: 100% 100%;
+    margin-right: 10px;
+}
+
+.type_nav_box>.child>.nav>.name {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.none_box {
+    height: calc(100% - 55px);
+    overflow: auto;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.list_file_box {
+    width: 100%;
+}
+
+.list_file_box>.list_top {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 50px;
+}
+
+.list_file_box .check {
+    width: 21px;
+    margin: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.list_allcheck {
+    cursor: pointer;
+    width: 14px;
+    height: 14px;
+}
+
+.list_allcheck>img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.list_file_box .name {
+    width: calc(100% - 21px - 100px - 100px - 200px - 50px);
+    margin-right: 10px;
+}
+
+.list_file_box .size {
+    width: 100px;
+    margin-right: 10px;
+}
+
+.list_file_box .type {
+    width: 100px;
+    margin-right: 10px;
+}
+
+.list_file_box .time {
+    width: 200px;
+}
+
+.list_top>.check,
+.list_top>.name,
+.list_top>.size,
+.list_top>.type,
+.list_top>.time {
+    font-size: 16px;
+}
+
+.list_content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 50px;
+    cursor: pointer;
+}
+
+.list_content:hover {
+    background: #f0f2f5;
+}
+
+.list_content.active {
+    background: #e0eafb;
+}
+
+.list_content>.name {
+    font-size: 14px;
+    color: #000000e6;
+}
+
+.list_content>.size,
+.list_content>.type,
+.list_content>.time {
+    font-size: 12px;
+    color: #00000099;
+}
+
+.list_file_name {
+    display: flex;
+    align-items: center;
+}
+
+.list_file_name>img {
+    width: 24px;
+    height: 24px;
+    object-fit: cover;
+    margin-right: 5px;
+}
+
+.list_file_name>div {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+</style>

src/components/scoreList/commpont/file/library.vue

@@ -0,0 +1,754 @@
+<template>
+  <div class="l_box">
+    <div class="l_type_box" v-loading="isLoading">
+      <div class="header">
+        <span class="title">我的资源库</span>
+        <span class="add" @click="addClick" ref="divToHide3">添加分类</span>
+      </div>
+      <div class="nav">
+        <div class="nav_b">
+          <div class="nav_box" :class="{ active1: pid == 'wu' }" @click="checkType('wu')"><span
+              class="icon no"></span><span class="name">未分类</span>
+          </div>
+        </div>
+        <div class="nav_b" v-for="(item, index) in typeArray" :key="index">
+          <div class="nav_box" :class="{ open: item.open, active2: pid.split('-')[0] == index }"
+            @click="checkType(index + '')"><span class="icon" :class="{ haveL: item.child.length }"
+              @click.stop="typeOpen(index)"></span>
+            <input class="renameInput" v-model="renameInput" v-if="renameType == (index + '')" ref="renameInput"
+              @change="rename" @keyup.enter="rename">
+            <el-tooltip :content="item.name" placement="top" effect="dark" v-else>
+              <span class="name">{{ item.name }}</span>
+            </el-tooltip>
+            <span ref="divToHide5" class="icon more" @click.stop="showActions($event, index + '')"></span>
+          </div>
+          <div class="nav_child_box" v-if="item.open && item.child.length">
+            <div class="nav_box" :class="{ active: pid == index + '-' + index2 }" v-for="(item2, index2) in item.child"
+              :key="index + '-' + index2" @click="checkType(index + '-' + index2)">
+              <span class="icon"></span>
+              <input class="renameInput" v-model="renameInput" v-if="renameType == (index + '-' + index2)"
+                ref="renameInput" @change="rename" @keyup.enter="rename">
+              <el-tooltip :content="item2.name" placement="top" effect="dark" v-else>
+                <span class="name">{{ item2.name }}</span>
+              </el-tooltip>
+              <span ref="divToHide5" class="icon more" @click.stop="showActions($event, index + '-' + index2)"></span>
+            </div>
+          </div>
+          <div class="add_box" v-if="addVisbile2 === index" ref="divToHide2">
+            <input type="text" v-model="addInput" @change="addType" @keyup.enter="addType">
+          </div>
+        </div>
+        <div class="add_box" v-if="addVisbile" ref="divToHide">
+          <input type="text" v-model="addInput" @change="addType" @keyup.enter="addType">
+        </div>
+      </div>
+      <div v-if="showActionDiv" ref="actionDiv" :style="actionDivStyle" class="action-div">
+        <div @click="actionDelete">删除</div>
+        <div @click="actionRename">重命名</div>
+        <div @click="actionAdd" v-if="actionType.split('-').length == 1" ref="addTypeAction">添加分类</div>
+        <div class="move" v-if="pidArray.length">
+          <span>移动</span>
+          <div class="pid_box">
+            <div v-for="(item, index) in pidArray" :key="index" @click="actionMove(item)">
+              <!-- <el-tooltip :content="item.name" placement="right" effect="dark"> -->
+              <span>{{ item.name }}</span>
+              <!-- </el-tooltip> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="l_file_box">
+      <div class="l_none" v-if="pid != 'wu' && pid.split('-').length == 1">请添加二级分类</div>
+      <fileBox :userid="userid" :typeArray="typeArray" :pid="pid" :type='type' @addFile="addFile" ref="fileBox" v-else>
+      </fileBox>
+    </div>
+  </div>
+</template>
+
+<script>
+import fileBox from './fileBox.vue';
+export default {
+  components: {
+    fileBox,
+  },
+  props: {
+    type: {
+      type: String,
+      default: '1'
+    },
+  },
+  data() {
+    return {
+      userid: this.$route.query.userid,
+      pid: 'wu',
+      addInput: '',
+      addVisbile: false,
+      addVisbile2: '',
+      isLoading: false,
+      typeArray: [],
+      showActionDiv: false,
+      actionDivStyle: {
+        top: '0px',
+        left: '0px'
+      },
+      actionType: '',
+      renameType: '',
+      renameInput: '',
+      pidArray: [],
+    }
+  },
+  methods: {
+    getData() {
+      this.isLoading = true;
+      let params = {
+        uid: this.userid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "getSourceFileType", params)
+        .then((res) => {
+          this.isLoading = false;
+          let pid = res.data[0];
+          let child = res.data[1];
+          for (var i = 0; i < pid.length; i++) {
+            let pidChild = []
+            pid[i].open = (this.typeArray.length && this.typeArray[i]) ? this.typeArray[i].open : false
+            for (var j = 0; j < child.length; j++) {
+              if (pid[i].id == child[j].pid) {
+                pidChild.push(child[j])
+              }
+            }
+            pid[i].child = pidChild
+          }
+          this.typeArray = pid
+          this.$forceUpdate()
+
+          let _pid = this.pid.split('-')
+          if (_pid.length === 1 && this.pid != 'wu') {
+            if (pid[_pid[0]]) {
+              pid[_pid[0]].open = true
+              this.pid = this.pid + '-0'
+            } else {
+              this.pid = 'wu'
+            };
+            this.checkType(this.pid);
+          } else if (_pid.length > 1) {
+            if (this.typeArray[_pid[0]].child.length > 0 && (parseInt(_pid[1]) + 1) > this.typeArray[_pid[0]].child.length) {
+              this.pid = _pid[0] + '-0';
+              this.checkType(this.pid);
+            } else if ((parseInt(_pid[1]) + 1) > this.typeArray[_pid[0]].child.length) {
+              this.checkType(_pid[0]);
+            }
+          }
+          this.$refs['fileBox'].getData()
+          console.log(this.$refs['fileBox']);
+        })
+        .catch((err) => {
+          this.isLoading = false;
+          console.error(err);
+        });
+    },
+    addClick() {
+      // if (this.pid == 'wu') {
+      this.addVisbile = true;
+      this.addInput = '一级分类标签'
+      setTimeout(() => {
+        this.$refs.divToHide.children[0].select()
+      }, 500);
+      // } else {
+      //   let check = this.pid.split('-')
+      //   this.addVisbile2 = parseInt(check[0]);
+      //   this.addInput = '二级分类标签'
+      //   setTimeout(() => {
+      //     this.$refs.divToHide2[0].children[0].select()
+      //   }, 500);
+      // }
+
+    },
+    addType() {
+      let pid = ''
+      if (!this.addInput) {
+        this.$message.error('请输入分类名字');
+        return
+      }
+      if (this.addVisbile) {
+        pid = '0'
+      } else if (this.addVisbile2 === 0 || this.addVisbile2) {
+        let check = this.pid.split('-')
+        pid = this.typeArray[check[0]].id
+      }
+      let params = [{
+        pid: pid,
+        name: this.addInput,
+        uid: this.userid
+      }];
+      this.ajax
+        .post(this.$store.state.api + "addSourceFileType", params)
+        .then((res) => {
+          this.$message.success('添加成功');
+          this.addVisbile = false
+          this.addVisbile2 = ''
+          this.getData()
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    typeOpen(index) {
+      if (this.typeArray[index].child.length > 0) {
+        this.typeArray[index].open = !this.typeArray[index].open
+      }
+    },
+    checkType(pid) {
+      if (this.pid == pid) {
+        return
+      }
+      let _pid = pid.split('-')
+      if (_pid.length === 1 && pid != 'wu') {
+        if (this.typeArray[_pid[0]].child.length > 0) {
+          this.pid = pid + '-0';
+          this.typeArray[_pid[0]].open = true;
+        } else {
+          this.pid = pid;
+        }
+      } else {
+        this.pid = pid;
+      }
+    },
+    handleClickOutside(event) {
+      const target = event.target;
+      const divToHide = this.$refs.divToHide; // 获取需要隐藏的 div 的引用
+      const divToHide2 = this.$refs.divToHide2; // 获取需要隐藏的 div 的引用
+      const addTypeAction = this.$refs.addTypeAction
+      const divToHide3 = this.$refs.divToHide3; // 获取需要隐藏的 div 的引用
+      const divToHide4 = this.$refs.actionDiv; // 获取需要隐藏的 div 的引用
+      const divToHide5 = this.$refs.divToHide5; // 获取需要隐藏的 div 的引用
+      const renameInput = this.$refs.renameInput; // 获取需要隐藏的 div 的引用
+      console.log('1')
+      if (divToHide && !divToHide.contains(target) && divToHide3 && !divToHide3.contains(target)) {
+        // 点击的不是需要隐藏的 div，则隐藏它
+        this.addVisbile = false
+      }
+      // if (divToHide2 && divToHide2[0] && !divToHide2[0].contains(target) && divToHide3 && !divToHide3.contains(target)) {
+      //   // 点击的不是需要隐藏的 div，则隐藏它
+      //   this.addVisbile2 = ''
+      // }
+      if (divToHide2 && divToHide2[0] && !divToHide2[0].contains(target) && addTypeAction && !addTypeAction.contains(target)) {
+        // 点击的不是需要隐藏的 div，则隐藏它
+        this.addVisbile2 = ''
+      }
+
+      if (divToHide4 && !divToHide4.contains(target) && divToHide5 && !divToHide5[0].contains(target)) {
+        // 点击的不是需要隐藏的 div，则隐藏它
+        this.showActionDiv = false;
+      }
+
+      if (renameInput && renameInput[0] && !renameInput[0].contains(target) && (!divToHide4 || (divToHide4 && !divToHide4.contains(target)))) {
+        // 点击的不是需要隐藏的 div，则隐藏它
+        this.renameType = ''
+      }
+    },
+    showActions(event, type) {
+      this.showActionDiv = true;
+      const buttonRect = event.target.getBoundingClientRect();
+      this.actionDivStyle.top = `${buttonRect.bottom - 30}px`;
+      this.actionDivStyle.left = `${buttonRect.left + 25}px`;
+      this.pidArray = []
+      let _type = type.split('-')
+      if (_type.length > 1) {
+        let pid = this.typeArray[_type[0]].child[_type[1]].pid
+        this.typeArray.forEach(item => {
+          item.id != pid && this.pidArray.push(item)
+        })
+      }
+      this.actionType = type;
+      this.$forceUpdate();
+    },
+    actionMove(pid) {
+      let type = this.actionType.split('-')
+      let id = this.typeArray[type[0]].child[type[1]].id
+      this
+        .$confirm('确定移动到' + pid.name + '吗？并且此分类的底下的文件也会跟随！', "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+        .then(() => {
+          let params = [{
+            id: id,
+            pid: pid.id
+          }];
+          this.ajax
+            .post(this.$store.state.api + "updateSourceFileTypePid", params)
+            .then((res) => {
+              this.$message.success('移动成功');
+              this.showActionDiv = false
+              this.getData()
+            })
+            .catch((err) => {
+              console.error(err);
+            });
+        })
+        .catch(() => {
+        });
+    },
+    actionRename() {
+      let type = this.actionType.split('-')
+      if (type.length == 1) {
+        this.renameInput = this.typeArray[type[0]].name
+      } else {
+        this.renameInput = this.typeArray[type[0]].child[type[1]].name
+      }
+      this.renameType = this.actionType
+      if (this.pid != this.renameType) {
+        this.checkType(this.renameType)
+      }
+      console.log(this.renameType);
+      setTimeout(() => {
+        this.$refs.renameInput[0].select();
+        this.showActionDiv = false
+      }, 500);
+    },
+    actionAdd() {
+      let type = this.actionType.split('-')
+      if (type.length > 1) {
+        return
+      }
+      let check = type
+      this.checkType(this.actionType)
+      this.addVisbile2 = parseInt(check[0]);
+      this.addInput = '二级分类标签'
+      this.showActionDiv = false
+      setTimeout(() => {
+        this.$refs.divToHide2[0].children[0].select()
+      }, 500);
+    },
+    rename() {
+      if (!this.renameInput) {
+        this.$message.error('请输入分类名字');
+        return
+      }
+      let type = this.renameType.split('-')
+      let id = ''
+      if (type.length == 1) {
+        id = this.typeArray[type[0]].id
+      } else {
+        id = this.typeArray[type[0]].child[type[1]].id
+      }
+      let params = [{
+        id: id,
+        name: this.renameInput
+      }];
+      this.ajax
+        .post(this.$store.state.api + "updateSourceFileName", params)
+        .then((res) => {
+          this.$message.success('修改成功');
+          this.renameType = ''
+          this.getData()
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+    actionDelete() {
+      let type = this.actionType.split('-')
+      let id = ''
+      let msg = ''
+      if (type.length == 1) {
+        if (this.typeArray[type[0]].child.length) {
+          msg = '删除此分类后，该分类下的所有子分类将全部删除，确定删除此分类吗？'
+        } else {
+          msg = '确定删除此分类吗？'
+        }
+        id = this.typeArray[type[0]].id
+      } else {
+        msg = '确定删除此分类吗？'
+        id = this.typeArray[type[0]].child[type[1]].id
+      }
+      this
+        .$confirm(msg, "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+        .then(() => {
+          let params = [{
+            id: id,
+          }];
+          this.ajax
+            .post(this.$store.state.api + "deleteSoureFileType", params)
+            .then((res) => {
+              this.$message.success('删除成功');
+              this.showActionDiv = false
+              this.getData()
+            })
+            .catch((err) => {
+              console.error(err);
+            });
+        })
+        .catch(() => {
+        });
+    },
+    addFile(file) {
+      this.$emit('addFile', file)
+    }
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleClickOutside);
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside);
+    this.getData();
+  },
+}
+</script>
+
+<style scoped>
+.l_box {
+  width: 100%;
+  height: 100%;
+  background: #f0f2f5;
+  box-sizing: border-box;
+  display: flex;
+  padding: 20px;
+}
+
+.l_type_box {
+  width: 300px;
+  height: 100%;
+  background: #fff;
+  border-radius: 5px;
+}
+
+.l_type_box>.header {
+  width: 100%;
+  padding: 15px 15px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #E7E7E7;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.l_type_box>.header>.title {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.l_type_box>.header>.add {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  height: 30px;
+  padding: 0 8px;
+  background: rgb(0, 97, 255);
+  color: #fff;
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-size: 14px;
+  align-items: center;
+}
+
+.l_type_box>.header>.add::before {
+  content: '';
+  display: block;
+  width: 14px;
+  height: 14px;
+  margin-right: 7px;
+  background-image: url('../../../../assets/icon/sourceFile/icon_add.png');
+  background-size: 100% 100%;
+}
+
+.l_type_box>.nav {
+  width: 100%;
+  height: calc(100% - 62px);
+  box-sizing: border-box;
+  padding: 15px;
+  overflow: auto;
+}
+
+.l_type_box>.nav>.nav_b {
+  margin-top: 10px;
+}
+
+.l_type_box>.nav>.nav_b>.nav_box {
+  height: 44px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.l_type_box>.nav>.nav_b>.nav_box>.name {
+  font-size: 16px;
+  color: #000000e6;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.l_type_box .active2 {
+  background: #fff;
+}
+
+.l_type_box .active2 .name {
+  color: #3681FC !important;
+}
+
+.l_type_box .active {
+  background: #3681fc;
+}
+
+.l_type_box .active1 {
+  background: #3681fc !important;
+}
+
+.l_type_box .active .name,
+.l_type_box .active1 .name {
+  color: #fff !important;
+}
+
+
+.l_type_box>.nav>.nav_b>.nav_box:hover {
+  background: #e0eafb;
+}
+
+.l_type_box>.nav>.nav_b>.nav_box:hover .more {
+  display: block;
+}
+
+.l_type_box>.nav>.nav_b>.nav_box>.icon {
+  min-width: 16px;
+  height: 16px;
+  background-size: 100% 100%;
+  margin-right: 10px;
+  /* background: #000; */
+  transition: all 0.3s;
+}
+
+.l_type_box>.nav>.nav_b>.nav_box>.no {
+	background-image: url('../../../../assets/icon/sourceFile/icon_no.png');
+  /* background-image: url('../../../assets/icon/sourceFile/icon_no.png'); */
+}
+
+
+.l_type_box>.nav>.nav_b>.nav_box.active1>.no {
+  background-image: url('../../../../assets/icon/sourceFile/icon_no_active.png');
+}
+
+.l_type_box>.nav>.nav_b>.nav_box>.more {
+  cursor: pointer;
+  margin: 0 0 0 auto;
+  display: none;
+  background-image: url('../../../../assets/icon/sourceFile/icon_select.png');
+}
+
+.l_type_box>.nav>.nav_b>.nav_box>.haveL {
+  transform: rotate(-90deg);
+	background-image: url('../../../../assets/icon/sourceFile/icon_arrow.png');
+
+  /* background-image: url('../../../../assets/icon/sourceFile/icon_arrow.png'); */
+}
+
+.l_type_box>.nav>.nav_b>.nav_box.active2>.haveL {
+  transform: rotate(-90deg);
+  background-image: url('../../../../assets/icon/sourceFile/icon_arrow_active.png');
+}
+
+
+.l_type_box>.nav>.nav_b>.nav_box.open>.haveL {
+  transform: rotate(0deg);
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box {
+  margin-top: 10px;
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box+.nav_box {
+  margin-top: 10px;
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box {
+  height: 44px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.name {
+  font-size: 16px;
+  color: #000000e6;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover {
+  background: #e0eafb;
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active:hover {
+  background: #5E9AFC;
+}
+
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box:hover .more {
+  display: block;
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.icon {
+  min-width: 16px;
+  height: 16px;
+  background-size: 100% 100%;
+  margin-right: 10px;
+  transition: all 0.3s;
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box>.more {
+  margin: 0 0 0 auto;
+  display: none;
+  background-image: url('../../../../assets/icon/sourceFile/icon_select.png');
+}
+
+.l_type_box>.nav>.nav_b>.nav_child_box>.nav_box.active>.more {
+  background-image: url('../../../../assets/icon/sourceFile/icon_select_active.png');
+}
+
+
+
+.add_box {
+  height: 44px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 5px;
+  padding: 0 3px 0 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: #E1EDFD;
+  margin-top: 10px;
+}
+
+.add_box>input {
+  width: calc(100% - 16px);
+  height: calc(100% - 6px);
+  box-sizing: border-box;
+  border: none;
+  margin-left: 16px;
+  border-radius: 5px;
+  padding: 0 12px;
+  font-size: 16px;
+  outline: none;
+}
+
+.renameInput {
+  width: calc(100% - 16px);
+  height: calc(100% - 6px);
+  box-sizing: border-box;
+  border: none;
+  border-radius: 5px;
+  padding: 0 12px;
+  font-size: 16px;
+  outline: none;
+}
+
+.action-div {
+  position: absolute;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  border-radius: 5px;
+  /* overflow: hidden; */
+  padding: 5px 0;
+  box-shadow: 0 0 2px 0px #00000021;
+}
+
+.action-div>div {
+  width: 115px;
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 14px;
+  position: relative;
+  z-index: 999;
+}
+
+.action-div>div:hover {
+  background: #e0eafb;
+}
+
+.action-div>.move::after {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 14px;
+  height: 14px;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%) rotate(-90deg);
+  background-image: url('../../../../assets/icon/sourceFile/icon_arrow.png');
+}
+
+.action-div>.move:hover .pid_box {
+  display: flex;
+}
+
+.pid_box {
+  position: absolute;
+  right: 0;
+  transform: translateX(100%);
+  background: #ffffff;
+  flex-direction: column;
+  border-radius: 5px;
+  /* overflow: hidden; */
+  padding: 5px 0;
+  box-shadow: 0 0 2px 0px #00000021;
+  top: 0;
+  display: none;
+}
+
+.pid_box>div {
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pid_box>div:hover {
+  background: #e0eafb;
+}
+
+
+.l_file_box {
+  width: calc(100% - 320px);
+  margin-left: 20px;
+  background: #fff;
+  height: 100%;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.l_none {
+  color: #00000069;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/components/scoreList/commpont/file/wOffice.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-dialog
+    title="文档查看"
+    :visible.sync="dialogVisibleOffice"
+    :append-to-body="true"
+    width="95%"
+    :before-close="handleClose"
+    class="dialog_diy"
+  >
+    <div style="height: 100%;">
+        <iframe ref="viframe" style="width: 100%; height: 99%; border: none"
+                :src="'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(url)"></iframe>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="close()">关 闭</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    dialogVisibleOffice: {
+      type: Boolean,
+      default: false
+    },
+    url: {
+      type: String
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    handleClose(done) {
+      this.close();
+      done();
+    },
+    close() {
+      this.$emit("update:dialogVisibleOffice", false);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dialog_diy >>> .el-dialog {
+  height: 100%;
+  margin: 0 auto !important;
+}
+
+.dialog_diy >>> .el-dialog__header {
+  background: #454545 !important;
+  padding: 15px 20px;
+}
+
+.dialog_diy >>> .el-dialog__body {
+  height: calc(100% - 124px);
+  box-sizing: border-box;
+  padding: 0px;
+}
+
+.dialog_diy >>> .el-dialog__title {
+  color: #fff;
+}
+
+.dialog_diy >>> .el-dialog__headerbtn {
+  top: 19px;
+}
+
+.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: #fafafa;
+}
+</style>

src/components/scoreList/commpont/file/wPdf.vue

@@ -0,0 +1,80 @@
+<template>
+    <el-dialog title="PDF查看" :visible.sync="dialogVisiblePdf" :append-to-body="true" width="95%" :before-close="handleClose"
+        class="dialog_diy">
+        <div style="height: 100%;">
+            <iframe ref="viframe" style="width: 100%; height: 99%; border: none"
+                :src="'https://cloud.cocorobo.cn/pdf.js/web/viewer.html?file=' + encodeURIComponent(url)"></iframe>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisiblePdf = false;">关 闭</el-button>
+        </span>
+    </el-dialog>
+</template>
+  
+<script>
+export default {
+    props: {
+        dialogVisiblePdf: {
+            type: Boolean,
+            default: false
+        },
+        url: {
+            type: String,
+        }
+    },
+    data() {
+        return {
+        }
+    },
+    methods: {
+        handleClose(done) {
+            this.close()
+            done();
+        },
+        close() {
+            this.$emit('update:dialogVisiblePdf', false)
+        }
+    },
+}
+</script>
+  
+<style scoped>
+.dialog_diy>>>.el-dialog {
+    height: 100%;
+    margin: 0 auto !important;
+}
+
+.dialog_diy>>>.el-dialog__header {
+    background: #454545 !important;
+    padding: 15px 20px;
+}
+
+.dialog_diy>>>.el-dialog__body {
+    height: calc(100% - 124px);
+    box-sizing: border-box;
+    padding: 0px;
+}
+
+
+.dialog_diy>>>.el-dialog__title {
+    color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn {
+    top: 19px;
+}
+
+.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: #fafafa;
+}
+</style>

src/components/scoreList/commpont/file/wPdf2.vue

@@ -0,0 +1,80 @@
+<template>
+    <el-dialog title="PDF查看" :visible.sync="dialogVisiblePdf" :append-to-body="true" width="95%" :before-close="handleClose"
+        class="dialog_diy">
+        <div style="height: 100%;">
+            <iframe ref="viframe" style="width: 100%; height: 99%; border: none"
+                :src="'https://cloud.cocorobo.cn/pdf.js/web/viewer.html?file=' + encodeURIComponent(url)"></iframe>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisiblePdf = false;">关 闭</el-button>
+        </span>
+    </el-dialog>
+</template>
+  
+<script>
+export default {
+    props: {
+        dialogVisiblePdf: {
+            type: Boolean,
+            default: false
+        },
+        url: {
+            type: String,
+        }
+    },
+    data() {
+        return {
+        }
+    },
+    methods: {
+        handleClose(done) {
+            this.close()
+            done();
+        },
+        close() {
+            this.$emit('update:dialogVisiblePdf', false)
+        }
+    },
+}
+</script>
+  
+<style scoped>
+.dialog_diy>>>.el-dialog {
+    height: 100%;
+    margin: 0 auto !important;
+}
+
+.dialog_diy>>>.el-dialog__header {
+    background: #454545 !important;
+    padding: 15px 20px;
+}
+
+.dialog_diy>>>.el-dialog__body {
+    height: calc(100% - 124px);
+    box-sizing: border-box;
+    padding: 0px;
+}
+
+
+.dialog_diy>>>.el-dialog__title {
+    color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn {
+    top: 19px;
+}
+
+.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: #fafafa;
+}
+</style>

src/components/scoreList/commpont/file/wVideo.vue

@@ -0,0 +1,126 @@
+<template>
+    <el-dialog title="视频查看" :visible.sync="dialogVisibleVideo" :append-to-body="true" width="95%"
+        :before-close="handleClose" class="dialog_diy">
+        <div  style="height: 100%;position: relative;" v-if="dialogVisibleVideo">
+            <video-player class="video-player vjs-custom-skin" :playsinline="true" :options="playerOptions"
+                @play="onPlayerPlay($event)"></video-player>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="close">关 闭</el-button>
+        </span>
+    </el-dialog>
+</template>
+  
+<script>
+export default {
+    props: {
+        dialogVisibleVideo: {
+            type: Boolean,
+            default: false
+        },
+        url: {
+            type: String,
+        }
+    },
+    data() {
+        return {
+            playerOptions: {
+                playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+                autoplay: false, //如果true,浏览器准备好时开始回放。
+                muted: false, // 默认情况下将会消除任何音频。
+                loop: false, // 导致视频一结束就重新开始。
+                preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+                language: "zh-CN",
+                aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+                sources: [
+                    {
+                        type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
+                        src: "", //url地址require("../../assets/media/aaa.mp4")
+                    },
+                ],
+                // poster: require("../../assets/tu31.png"), //你的封面地址
+                // poster: dataRes.imgUrl, //你的封面地址
+                notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+                controlBar: {
+                    timeDivider: true, //当前时间和持续时间的分隔符
+                    durationDisplay: true, //显示持续时间
+                    remainingTimeDisplay: false, //是否显示剩余时间功能
+                    fullscreenToggle: true, //全屏按钮
+                },
+            },
+        }
+    },
+    watch: {
+        dialogVisibleVideo(newValue, oldValue) {
+            this.playerOptions.sources[0].src = this.url
+        }
+    },
+    methods: {
+        handleClose(done) {
+            this.close()
+            done();
+        },
+        close() {
+            this.$emit('update:dialogVisibleVideo', false)
+        },
+        onPlayerPlay() { },
+    },
+    mounted() {
+        this.playerOptions.sources[0].src = this.url;
+    },
+}
+</script>
+  
+<style scoped>
+.dialog_diy>>>.el-dialog {
+    height: 100%;
+    margin: 0 auto !important;
+}
+
+.dialog_diy>>>.el-dialog__header {
+    background: #454545 !important;
+    padding: 15px 20px;
+}
+
+.dialog_diy>>>.el-dialog__body {
+    height: calc(100% - 124px);
+    box-sizing: border-box;
+    padding: 0px;
+}
+
+
+.dialog_diy>>>.el-dialog__title {
+    color: #fff;
+}
+
+.dialog_diy>>>.el-dialog__headerbtn {
+    top: 19px;
+}
+
+.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: #fafafa;
+}
+
+.video-player {
+  width: 100%;
+  height: 100%;
+}
+
+.video-player >>> .video-js.vjs-fluid{
+    height: 100% !important;
+    padding: 0 !important;
+}
+
+
+</style>

src/components/scoreList/commpont/gap.vue

@@ -0,0 +1,211 @@
+<template>
+    <div class="c_box">
+        <!-- <div class="mask"></div> -->
+        <div v-if="!checkJson">暂未设置题目</div>
+        <div v-else class="choice_box">
+            <!-- <div class="title"><div>{{ `（${option[checkJson.type].name}）` }}</div><div v-html="checkJson.title"></div></div> -->
+            <div class="c_title">
+                <div class="title">
+                    <div  style="display: flex;">
+                        <!-- + `（${option[checkJson.type].name}）` -->
+                    <span style="min-width: fit-content;">{{ tindex + 1 + "、" }}</span>
+                    <span>{{ checkJson.title }}</span>
+                    <span style="min-width: fit-content;color: #efa030;">{{ checkJson.score ? '（分值：'+checkJson.score+'分）' : '' }}</span>
+                </div>
+                <span style="color: #efa030;display: flex;margin-top: 5px;line-height: 18px;">
+                    <span style="min-width: fit-content;" v-if="!checkJson.answer && see">暂无参考答案</span>
+                    <span style="min-width: fit-content;display: flex;" v-else-if="see">
+                        <span style="min-width: fit-content;">参考答案：</span> 
+                        <span>{{ checkJson.answer }}</span>
+                    </span> 
+                    <!-- <span style="min-width: fit-content;margin-left: 10px;">{{ checkJson.score ? '分值：'+checkJson.score+'分' : '' }}</span> -->
+                </span>
+                    <!-- </div><div v-html="checkJson.title"></div> -->
+                </div>
+                <div class="p_box" v-if="isTeacher == 1 && checkJson.score">
+                    <el-input v-model="checkJson.score2" class="c_input" @change="numberPan" placeholder="请输入得分"></el-input><span style="margin: 0 10px;">/</span><span>{{ checkJson.score }}分</span>
+                </div>
+                <div class="p_box" v-if="isTeacher == 2 && checkJson.score2">
+                    <span>{{ checkJson.score2 }}分</span><span style="margin: 0 10px;">/</span><span>{{ checkJson.score }}分</span>
+                </div>
+            </div>
+            <div class="choices">
+                <textarea  :readonly="checktype == 2" rows="2" v-autoHeight="68" class="binfo_input binfo_textarea" cols v-model="checkJson.answer2"
+                    placeholder=""></textarea>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        tindex:{
+            type: Number
+        },
+        cJson: {
+            type: Object,
+        },
+        checktype: {
+            type: Number,
+            default: 1
+        },
+        see:{
+            type:Boolean,
+            default:false
+        },
+        isTeacher: {
+            type: Number,
+            default: 2
+        }
+    },
+    data() {
+        return {
+            option: {
+                1: { name: '问答题' },
+            },
+            checkJson: undefined
+        }
+    },
+    watch: {
+        checkJson: {
+            handler(newValue) {
+                this.$emit('update:cJson', newValue)
+            },
+            deep: true
+        },
+        cJson: {
+            handler(newValue) {
+                if(newValue.answer2 !== this.checkJson.answer2){
+                    this.checkJson = this.depthCopy(newValue)
+                    this.$forceUpdate()
+                }
+            },
+            deep: true
+        },
+    },
+    directives: {
+        autoHeight: {
+            update(el, binding) {
+                const { value } = binding
+                if (value && typeof value === 'number') {
+                    el.style.height = `${value}px`
+                } else {
+                    el.style.height = 'auto'
+                }
+            },
+            componentUpdated(el) {
+                el.style.height = `${el.scrollHeight + 5}px`
+            },
+        },
+    },
+    methods: {
+        depthCopy(s) {
+            return JSON.parse(JSON.stringify(s));
+        },
+        numberPan() {
+            if (/[^\d]/.test(this.checkJson.score2) || parseInt(this.checkJson.score2) < 0) {
+                this.$message.error('请输入大于0的数字')
+                this.checkJson.score2 = ''
+            }
+
+            if(parseInt(this.checkJson.score2) > parseInt(this.checkJson.score)){
+                this.$message.error('不能输入大于得分的数字')
+                this.checkJson.score2 = this.checkJson.score
+            }
+        },
+    },
+    mounted() {
+        this.checkJson = this.cJson ? this.depthCopy(this.cJson) : undefined
+        if(this.checkJson.answer2){
+            setTimeout(() => {
+                this.checkJson.answer2 += "*0*%*";
+                setTimeout(() => {
+                    this.checkJson.answer2 = this.checkJson.answer2.replaceAll("*0*%*", "");
+                }, 0);
+            }, 100);
+        }
+    }
+}
+</script>
+
+<style scoped>
+.c_box {
+    width: 100%;
+    position: relative;
+}
+
+.mask {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 2;
+}
+
+.choice_box {
+    white-space: pre-line;
+}
+
+.choice_box> .c_title .title {
+    font-weight: bold;
+    width: 100%;
+    word-break: break-all;
+}
+
+.choice_box> .c_title {
+    display: flex;
+    justify-content: space-between;
+}
+
+.choice_box> .c_title .p_box{
+    margin-left: 5px;
+    min-width: fit-content;
+    display: flex;
+    align-items: center;
+}
+
+.choice_box>.choices {
+    margin-top: 10px;
+}
+
+.binfo_input {
+    width: 100%;
+    margin: 0;
+    padding: 12px 14px;
+    display: block;
+    min-width: 0;
+    outline: none;
+    box-sizing: border-box;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    background: #fff;
+    font-size: 16px;
+    resize: none;
+    font-family: 'Microsoft YaHei';
+    min-height: 48px;
+    /* border: 1px solid #3682fc00; */
+    border: 1.5px solid #CAD1DC;
+}
+
+.binfo_textarea {
+    border: 1.5px solid #CAD1DC;
+    font-size: 16px;
+    resize: none;
+    /* background: #f6f6f6; */
+    font-family: 'Microsoft YaHei';
+}
+
+.binfo_input:focus-visible {
+    border: 1.5px solid #3681FC !important;
+}
+
+.c_input {
+    width: 90px;
+}
+
+.c_input >>> .el-input__inner{
+    padding: 0 5px;
+    text-align: right;
+}
+</style>

src/components/scoreList/commpont/topic.vue

@@ -0,0 +1,401 @@
+<template>
+  <div class="c_box">
+    <div class="c_box_title">{{ title }}</div>
+    <div class="c_box_brief" v-if="brief">{{ brief }}</div>
+    <div class="c_box_score">
+      <span>总分：{{ score }}</span>
+      <span v-if="name" style="margin-left: 10px;">答题人：{{ name }}</span>
+      <span style="margin-left: 10px;">总得分：{{ score2 }}</span>
+    </div>
+    <div class="c_body" v-if="isloading">
+      <div v-if="type == 3">
+        <div v-for="(item, index) in checkArray[page].array" :key="index" class="check_box">
+          <div class="title" v-if="item.ttype != 1 || (!item.json && item.ttype == 1)"
+            :style="{ fontSize: item.ttype == 1 && '16px' }">{{ selectType(item, index) }}</div>
+          <div v-if="item.ttype == 1" class="answerBox">
+            <choiceV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-if="item.type == 1" :see="see"
+              :isTeacher="isTeacher"></choiceV>
+            <gapV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 3" :see="see"
+              :isTeacher="isTeacher"></gapV>
+            <fileV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 5" :see="see"
+              :isTeacher="isTeacher"></fileV>
+            <courseV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 6"
+              :see="see" :isTeacher="isTeacher" @getTestWorkByCid="getTestWorkByCid" @publish2="publish2" :issetPage.sync="issetPage" :tid="tid"></courseV>
+            <evaV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 7" :see="see"
+              :isTeacher="isTeacher"></evaV>
+            <!-- <span v-else>暂未设置题目</span> -->
+          </div>
+          <div v-for="(item2, index2) in item.array" :key="`${index}-${index2}`" class="check_box_xia">
+            <div class="title" v-if="item2.ttype != 1 || (!item2.json && item2.ttype == 1)"
+              :style="{ fontSize: item2.ttype == 1 && '16px' }">{{ selectType(item2, index2) }}</div>
+            <div v-if="item2.ttype == 1" class="answerBox">
+              <choiceV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-if="item2.type == 1"
+                :see="see" :isTeacher="isTeacher"></choiceV>
+              <gapV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 3"
+                :see="see" :isTeacher="isTeacher"></gapV>
+              <fileV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 5"
+                :see="see" :isTeacher="isTeacher"></fileV>
+              <courseV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 6"
+                :see="see" :isTeacher="isTeacher" @getTestWorkByCid="getTestWorkByCid" @publish2="publish2" :issetPage.sync="issetPage" :tid="tid"></courseV>
+              <evaV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 7"
+                :see="see" :isTeacher="isTeacher"></evaV>
+              <!-- <span v-else>暂未设置题目</span> -->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <div v-for="(item, index) in checkArray" :key="index" class="check_box">
+          <div class="title" v-if="item.ttype != 1 || (!item.json && item.ttype == 1)"
+            :style="{ fontSize: item.ttype == 1 && '16px' }">{{ selectType(item, index) }}</div>
+          <div v-if="item.ttype == 1" class="answerBox">
+            <choiceV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-if="item.type == 1" :see="see"
+              :isTeacher="isTeacher"></choiceV>
+            <gapV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 3" :see="see"
+              :isTeacher="isTeacher"></gapV>
+            <fileV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 5" :see="see"
+              :isTeacher="isTeacher"></fileV>
+            <courseV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 6"
+              :see="see" :isTeacher="isTeacher" @getTestWorkByCid="getTestWorkByCid" @publish2="publish2" :issetPage.sync="issetPage" :tid="tid"></courseV>
+            <evaV :tindex="index" :cJson.sync="item.json" :checktype="checktype" v-else-if="item.type == 7" :see="see"
+              :isTeacher="isTeacher"></evaV>
+            <!-- <span v-else>暂未设置题目</span> -->
+          </div>
+          <div v-for="(item2, index2) in item.array" :key="`${index}-${index2}`" class="check_box_xia">
+            <div class="title" v-if="item2.ttype != 1 || (!item2.json && item2.ttype == 1)"
+              :style="{ fontSize: item2.ttype == 1 && '16px' }">{{ selectType(item2, index2) }}</div>
+            <div v-if="item2.ttype == 1" class="answerBox">
+              <choiceV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-if="item2.type == 1"
+                :see="see" :isTeacher="isTeacher"></choiceV>
+              <gapV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 3"
+                :see="see" :isTeacher="isTeacher"></gapV>
+              <fileV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 5"
+                :see="see" :isTeacher="isTeacher"></fileV>
+              <courseV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 6"
+                :see="see" :isTeacher="isTeacher" @getTestWorkByCid="getTestWorkByCid" @publish2="publish2" :issetPage.sync="issetPage" :tid="tid"></courseV>
+              <evaV :tindex="index2" :cJson.sync="item2.json" :checktype="checktype" v-else-if="item2.type == 7"
+                :see="see" :isTeacher="isTeacher"></evaV>
+              <!-- <span v-else>暂未设置题目</span> -->
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="checkArray.length > 1 && type == 3" class="page">
+        <el-button type="primary" size="mini" :disabled="page == 0" @click="setPage('-1')">上一页</el-button>
+        <div class="p_page">
+          <span>{{ page + 1 }}</span><span>/</span><span>{{ checkArray.length }}</span>
+        </div>
+        <el-button type="primary" size="mini" :disabled="page == checkArray.length - 1"
+          @click="setPage('1')">下一页</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import choiceV from "./choice.vue";
+import gapV from './gap.vue';
+import fileV from './file.vue';
+import courseV from './course.vue';
+import evaV from './eva.vue';
+export default {
+  props: {
+    cJson: {
+      type: Array,
+    },
+    title: {
+      type: String,
+    },
+    brief: {
+      type: String
+    },
+    checktype: {
+      type: Number,
+      default: 1,
+    },
+    see: {
+      type: Boolean,
+      default: false
+    },
+    isTeacher: {
+      type: Number,
+      default: 2
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+    tid: {
+      type: String,
+      default: ''
+    },
+    gcourseid: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    choiceV,
+    gapV,
+    fileV,
+    courseV,
+    evaV
+  },
+  data() {
+    return {
+      checkArray: [],
+      type: 1,
+      page: 0,
+      options2: {
+        1: "选择题",
+        // 2: "问答题",
+        3: "问答题",
+        4: "添加文档",
+        5: "附件",
+        6: "课程",
+        7: "评分",
+      },
+      isloading: true,
+      issetPage: false
+    };
+  },
+  computed: {
+    selectType() {
+      return function (item, index) {
+        if (item.ttype == 1) {
+          return index + 1 + "、" + this.options2[item.type];
+        } else if (item.ttype == 2) {
+          return `${item.name ? item.name : `第${index + 1}组`}（共${item.array.length}题）`;
+        } else if (item.ttype == 3) {
+          return `分页${index + 1}`;
+        }
+      };
+    },
+    score() {
+      let score = 0
+      this.checkArray.forEach(el => {
+        if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
+          el.array.forEach(item => {
+            if (item.ttype == 2 && item.array.length > 0) {
+              item.array.forEach(item2 => {
+                if (item2.ttype == 1 && item2.json) {
+                  score += item2.json.score ? parseFloat(item2.json.score) : 0
+                }
+              })
+            } else if (item.ttype == 1 && item.json) {
+              score += item.json.score ? parseFloat(item.json.score) : 0
+            }
+          })
+        } else if (el.ttype == 1 && el.json) {
+          score += el.json.score ? parseFloat(el.json.score) : 0
+        }
+      })
+      return score > 0 ? score + '分' : '未设置分数'
+    },
+    score2() {
+      let score = 0
+      // let type = 1
+      this.checkArray.forEach(el => {
+        if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
+          el.array.forEach(item => {
+            if (item.ttype == 2 && item.array.length > 0) {
+              item.array.forEach(item2 => {
+                if (item2.ttype == 1 && item2.json) {
+                  score += item2.json.score2 ? parseFloat(item2.json.score2) : 0
+                }
+              })
+            } else if (item.ttype == 1 && item.json) {
+              score += item.json.score2 ? parseFloat(item.json.score2) : 0
+            }
+          })
+        } else if (el.ttype == 1 && el.json) {
+          score += el.json.score2 ? parseFloat(el.json.score2) : 0
+        }
+      })
+      return score + '分'
+    }
+  },
+  watch: {
+    cJson: {
+      handler(newVal, oldVal) {
+        console.log(newVal);
+        console.log(oldVal);
+        this.checkArray = this.setJson(this.depthCopy(newVal));
+        this.$forceUpdate()
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    setPage(index) {
+      this.issetPage = true
+      this.isloading = false
+      if (index == '1') {
+        this.page++
+      } else if (index == '-1') {
+        this.page--
+      }
+      setTimeout(() => {
+        this.isloading = true
+      }, 50)
+      this.$forceUpdate()
+    },
+    depthCopy(s) {
+      return JSON.parse(JSON.stringify(s));
+    },
+    setJson(json) {
+      if (json.length > 0) {
+        let _json = this.depthCopy(json);
+        this.type = _json[0].ttype;
+        let checkArray = _json.filter((item) => {
+          if (item.array) {
+            item.array = item.array.filter((item2) => {
+              if (item2.ttype == 1 && item2.json && !item2.json.answer2 && item2.type != 6 && item.type != 7) {
+                item2.json.answer2 = [];
+              } else if (item2.ttype == 1 && item2.json && !item2.json.answer2 && item2.type == 6) {
+                item2.json.answer2 = this.gcourseid ? this.gcourseid : item2.json.courses[0];
+              } else if (item2.ttype == 1 && item2.json && !item2.json.answer2 && item2.json.answer2 !== 0 && item2.type == 7) {
+                item2.json.answer2 = '';
+              }
+              if (item2.array) {
+                item2.array = item2.array.filter((item3) => {
+                  if (item3.ttype == 1 && item3.json && !item3.json.answer2 && item3.type != 6 && item3.type != 7) {
+                    item3.json.answer2 = [];
+                  } else if (item3.ttype == 1 && item3.json && !item3.json.answer2 && item3.type == 6) {
+                    item3.json.answer2 = this.gcourseid ? this.gcourseid : item3.json.courses[0];
+                  } else if (item3.ttype == 1 && item3.json && !item3.json.answer2 && item3.json.answer2 !== 0 && item3.type == 7) {
+                    item3.json.answer2 = '';
+                  }
+                  return item3;
+                });
+              }
+              return (
+                (item2.ttype != 1 && item2.array.length > 0) || item2.ttype == 1
+              );
+            });
+          }
+          if (item.ttype == 1 && item.json && !item.json.answer2 && item.type != 6 && item.type != 7) {
+            item.json.answer2 = [];
+          } else if (item.ttype == 1 && item.json && !item.json.answer2 && item.type == 6) {
+            item.json.answer2 = this.gcourseid ? this.gcourseid : item.json.courses[0];
+          } else if (item.ttype == 1 && item.json && !item.json.answer2 && item.json.answer2 !== 0 && item.type == 7) {
+            item.json.answer2 = '';
+          }
+          console.log(item.array);
+          return (item.ttype != 1 && item.array.length > 0) || item.ttype == 1;
+        });
+        console.log(checkArray);
+        return checkArray;
+      } else {
+        return [];
+      }
+    },
+    getTestWorkByCid(cid){
+      this.$emit('getTestWorkByCid', cid)
+    },
+    publish2(){
+      this.$emit('publish2')
+    }
+  },
+  mounted() {
+    this.checkArray = this.setJson(this.depthCopy(this.cJson));
+  },
+};
+</script>
+
+<style scoped>
+.c_box {
+  width: 95%;
+  margin: 0 auto;
+  background: #fff;
+  height: calc(100% - 55px);
+  overflow: auto;
+}
+
+.c_box_title {
+  width: 90%;
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  word-break: break-all;
+  margin: 10px auto;
+}
+
+.c_box_brief {
+  width: 90%;
+  text-align: left;
+  font-size: 14px;
+  word-break: break-all;
+  margin: 10px auto;
+  color: #373737;
+}
+
+.c_box_score {
+  width: 90%;
+  text-align: center;
+  word-break: break-all;
+  margin: 0 auto 20px;
+  font-size: 16px;
+  color: #373737;
+}
+
+.c_body {
+  width: 90%;
+  margin: 0 auto;
+}
+
+.check_box {}
+
+.check_box+.check_box {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #eee;
+}
+
+.check_box>.title {
+  font-size: 20px;
+  word-break: break-all;
+  font-weight: bold;
+}
+
+.check_box>.answerBox {
+  margin-top: 10px;
+}
+
+.check_box>.noanswerBox {
+  margin-top: 10px;
+}
+
+.check_box_xia {
+  padding: 15px 0;
+}
+
+.check_box_xia+.check_box_xia {
+  border-top: 1px solid #eee;
+}
+
+.check_box_xia>.title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.check_box_xia>.answerBox {
+  margin-top: 10px;
+}
+
+.check_box_xia>.noanswerBox {
+  margin-top: 10px;
+}
+
+.page {
+  margin: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.p_page {
+  margin: 0 10px;
+}
+</style>

src/components/scoreList/scoreItem.vue

@@ -0,0 +1,496 @@
+<template>
+	<div class="scoreItem">
+		<div class="si-title"  @click="openDialog">
+			<div class="si-t-avatar">评</div>
+			<span>{{ this.data.title }}</span>
+		</div>
+		<div class="si-content"  @click="openDialog">
+
+		</div>
+		<div class="si-footer"  @click="openDialog">
+			<div class="si-f-time">{{isScoreList.length>0?isScoreList[0]['update_at']:''}}</div>
+			<div class="si-f-status">{{ isScoreList.length>0?"已提交":"未提交" }}</div>
+		</div>
+		<div v-if="showDialog == true" class="addDialogCss" v-el-drag-dialog>
+      <div class="pzTop">
+        <div class="teacherPz">
+          <div class="teacherPzImg">
+            <img src="../../assets/icon/teacherPz.png" alt="" />
+          </div>
+          <div style="margin-left: 10px; height: 25px">教师评分</div>
+        </div>
+        <div @click="close">
+          <img src="../../assets/close1.png" class="pzClose" alt="" />
+        </div>
+      </div>
+      <div class="addPzBox">
+				<div class="scoreTop">{{ this.data.title }}</div>
+       	<div class="scoreMain">
+					<div class="step_box">
+          	<div class="edit_top">
+          	  <div class="op_btn">
+          	    <el-button type="primary" size="small" @click="reset">重置</el-button>
+          	    <el-button type="primary" size="small" @click="publish">提交</el-button>
+          	  </div>
+          	</div>
+          <topicVue :cJson.sync="cJson" :title="this.data.title" :brief="brief" ref="topicVue" v-if="!loading" @publish2="publish2" :tid="tid" :gcourseid="data.groupid"></topicVue>
+        </div>
+					<!-- <topicVue :cJson.sync="cJson" :title="data.title" :brief="data.brief" ref="topicVue" v-if="!loading"
+            @getTestWorkByCid="getTestWorkByCid" @publish2="publish2" :tid="data.typeid" :gcourseid="data.groupid"></topicVue> -->
+			 	</div>
+        <div class="addTextCss" @click="submit">
+          确定
+        </div>
+      </div>
+    </div>
+	</div>
+</template>
+
+<script>
+import topicVue from "./commpont/topic.vue";
+export default {
+	components:{
+		topicVue
+	},
+	emits:["refresh"],
+	props:{
+		data:{
+			type:Object,
+			default:()=>{}
+		},
+		isScore:{
+			type:Array,
+			default:()=>[]
+		}
+	},
+	data(){
+		return {
+			showDialog:false,
+			loading:false,
+			cJson:[],
+			cJson2:[],
+			tid:"",
+			gcourseid:"",
+			brief:"",
+			isScoreList:[],
+			isReset:false,
+			userid: this.$route.query.userid,
+      oid: this.$route.query.oid,
+      org: this.$route.query.org,
+      role: this.$route.query.role,
+      cid: "",
+      type: this.$route.query.type,
+		}
+	},
+	watch:{
+		isScore(value){
+			this.isScoreList = [];
+			if(value.length){
+				this.isScoreList = value;
+			}
+		}
+	},
+	methods:{
+		openDialog(){
+			if(this.isScoreList.length){
+				this.cJson = this.isScoreList[0].courseJson?JSON.parse(this.isScoreList[0].courseJson):[];
+				this.tid = this.isScoreList[0].id;
+			}else{
+				this.cJson = this.data.chapters?JSON.parse(this.data.chapters):[];
+				this.tid = "";
+			}
+			this.showDialog = true;
+			// 
+			// this.getData();
+			
+		},
+		submit(){
+			this.close()
+		},
+		close(){
+			this.showDialog = false;
+		},
+		publish2() {
+      this.loading = true
+      let cjson = this.$refs['topicVue'].checkArray
+      let _cjson = this.JSONSetting(JSON.parse(JSON.stringify(cjson)));
+      let pan = this.panJSON(_cjson)
+      if(!pan){
+        setTimeout(() => {
+            this.loading = false
+          }, 500);
+        return
+      }
+      console.log(cjson);
+      let params = [
+        {
+          uid: this.data.userid,
+          cid: this.data.courseId,
+          cjson: JSON.stringify(cjson),
+          type: '2',
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + ((this.tid) ? "addTestWorks2" : "addTestWorks"), params)
+        .then((res) => {
+          this.$message.success('保存成功')
+          setTimeout(() => {
+            this.loading = false
+          }, 500);
+        })
+        .catch((err) => {
+          this.$message.error("网络不佳");
+          this.loading = false
+          console.error(err);
+        });
+    },
+		reset(){
+			this
+        .$confirm("是否将已经填写的内容重置？", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+        .then(() => {
+          if(this.tid){
+            this.deleteTest(this.tid)
+          }else{
+            // if(this.courseid){
+            //   this.cJson = this.setCourseid(JSON.parse(JSON.stringify(this.cJson2)));
+            // }else{
+            //   this.cJson = JSON.parse(JSON.stringify(this.cJson2));
+            // }
+						this.cJson = this.data.chapters?JSON.parse(this.data.chapters):[];
+						this.$message.success('重置成功')
+            this.loading = true
+            this.isReset = false
+            setTimeout(() => {
+              this.loading = false
+            }, 0);
+            this.$forceUpdate()
+          }
+        })
+        .catch(() => {
+
+        });
+		},
+		deleteTest(tid) {
+      let _this = this;
+      let params = [
+        {
+          tid: tid
+        }
+      ];
+      _this.ajax
+        .post(_this.$store.state.api + "deleteTestCourseWorks", params)
+        .then(res => {
+          _this.cJson = _this.data.chapters?JSON.parse(_this.data.chapters):[];
+					_this.isScoreList = [];
+					_this.tid = "";
+					this.$emit("refresh")
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    },
+		save() {
+      let cjson = this.$refs['topicVue'].checkArray
+      let params = [
+        {
+          uid: this.data.userid,
+          cid: this.data.courseId,
+          cjson: JSON.stringify(cjson),
+          type: '1',
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "addTestWorks", params)
+        .then((res) => {
+          this.$message.success('保存成功')
+					this.showDialog = false;
+					this.$emit("refresh")
+        })
+        .catch((err) => {
+          this.$message.error("网络不佳");
+          console.error(err);
+        });
+    },
+		publish() {
+      let cjson = this.$refs['topicVue'].checkArray
+      let params = [
+        {
+          uid: this.tid ? this.tid : this.data.userid,
+          cid: this.data.courseId,
+          cjson: JSON.stringify(cjson),
+          type:'2',
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + ((this.tid) ? "addTestWorks2" : "addTestWorks"), params)
+        .then((res) => {
+          this.$message.success('提交成功')
+          this.showDialog = false;
+					this.$emit("refresh")
+        })
+        .catch((err) => {
+          this.$message.error("网络不佳");
+          console.error(err);
+        });
+    },
+		// getData() {
+    //   this.loading = true
+    //   let params = {
+    //     cid: this.data.courseId,
+    //   };
+    //   this.ajax
+    //     .get(this.$store.state.api + "getTestCourseDetail", params)
+    //     .then((res) => {
+    //       this.cJson = JSON.parse(res.data[0][0].chapters);
+    //       this.cJson2 = JSON.parse(res.data[0][0].chapters);
+    //       this.title = res.data[0][0].title;
+    //       this.brief = res.data[0][0].brief;
+    //       if (this.type == 3) {
+    //         this.getTestWorks2()
+    //       } else {
+		// 				console.log("👇")
+    //         this.getTestWorks()
+    //       }
+    //       this.$forceUpdate();
+    //     })
+    //     .catch((err) => {
+    //       this.loading = false
+    //       console.error(err);
+    //     });
+    // },
+		// getTestWorks() {
+    //   let params = {
+    //     cid: this.data.courseId,
+    //     uid: this.userid,
+    //   };
+    //   this.ajax
+    //     .get(this.$store.state.api + "getTestWorks", params)
+    //     .then((res) => {
+    //       // this.cJson = JSON.parse(res.data[0][0].chapters);
+    //       if (res.data[2].length) {
+    //         this.cJson = JSON.parse(res.data[2][0].courseJson)
+
+    //         let cJson = this.setJSON(JSON.parse(JSON.stringify(this.cJson)))
+    //         let cJson2 = this.setJSON(this.setJson2(JSON.parse(JSON.stringify(this.cJson2))))
+
+    //         if (JSON.stringify(cJson) != JSON.stringify(cJson2)) {
+    //           this.isReset = true
+    //         }
+    //       }
+
+    //       this.$forceUpdate()
+
+    //       this.loading = false
+
+    //     })
+    //     .catch((err) => {
+    //       this.loading = false
+    //       console.error(err);
+    //     });
+    // },
+    // getTestWorks2() {
+    //   let params = {
+    //     cid: this.data.courseId,
+    //     tid: this.data.typeid,
+    //   };
+    //   this.ajax
+    //     .get(this.$store.state.api + "getTestWorks2", params)
+    //     .then((res) => {
+    //       // this.cJson = JSON.parse(res.data[0][0].chapters);
+    //       if (res.data[2].length) {
+    //         this.cJson = JSON.parse(res.data[2][0].courseJson)
+
+    //         let cJson = this.setJSON(JSON.parse(JSON.stringify(this.cJson)))
+    //         let cJson2 = this.setJSON(this.setJson2(JSON.parse(JSON.stringify(this.cJson2))))
+
+    //         if (JSON.stringify(cJson) != JSON.stringify(cJson2)) {
+    //           this.isReset = true
+    //         }
+
+
+    //       }
+
+    //       this.$forceUpdate()
+
+    //       this.loading = false
+
+    //     })
+    //     .catch((err) => {
+    //       this.loading = false
+    //       console.error(err);
+    //     });
+    // },
+
+	}
+}
+</script>
+
+<style scoped>
+.scoreItem{
+	width:100%;
+	height:auto;
+	/* height:100px; */
+	background:#F7F7F7;
+	border-radius:5px;
+	margin-top:15px;
+	padding:10px;
+	box-sizing:border-box;
+}
+.si-title{
+	width:100%;
+	height:35px;
+	display:flex;
+	align-items:center;
+  text-align: center;
+
+}
+.si-t-avatar{
+	width:35px;
+	height:35px;
+	background: #3E61AA;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color:white;
+	font-size:14px;
+	margin-right: 5px;
+	border-radius: 50%;
+}
+.si-title>span{
+	font-size: 14px;
+	width: calc(100% - 50px);
+	display: block;
+	text-align: left;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.si-content{
+	width: 100%;
+	height: 50px;
+  text-align: center;
+
+}
+
+.si-footer{
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 5px;
+  text-align: center;
+
+}
+.si-f-time{
+	color: #C0C0C0;
+}
+.si-f-status{
+	margin-right: 10px;
+	font-size: 14px;
+}
+
+.addDialogCss {
+  position: fixed;
+  width: 80%;
+  height: 90%;
+  min-height: 600px;
+  box-shadow: 0px 0 8px 0px #555555;
+  border-radius: 15px;
+  z-index: 999;
+  left: 30%;
+  top: 40%;
+  margin: -18% 0 0 -300px;
+}
+.pzTop {
+  color: #fff;
+  background: #000;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  border-radius: 15px 15px 0 0;
+  user-select: none;
+}
+.teacherPz {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.teacherPzImg {
+  width: 30px;
+  height: 30px;
+}
+
+.addPzBox {
+  height: calc(100% - 40px);
+  background: #ededed;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+	display: flex;
+	flex-direction: column;
+}
+
+.addTextCss {
+  background: #4b79ce;
+  width: 100px;
+  height: 40px;
+  color: #fff;
+  display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 20px;
+  border-radius: 15px;
+  margin: 10px auto 10px;
+  cursor: pointer;
+}
+.pzClose{
+	width: 50%;
+	cursor: pointer;
+}
+.scoreTop{
+	width: 100%;
+	height: auto;
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	padding: 10px;
+	font-size: 26px;
+}
+
+.scoreMain{
+	width: 100%;
+	flex: 1;
+	overflow: auto;
+	background-color: white;
+}
+
+.step_box {
+  width: calc(100%);
+  margin: 0 auto;
+  height: calc(100% - 50px);
+}
+.edit_top {
+  height: 50px;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  padding: 0 30px;
+  border-top: 2px solid #eee;
+  border-bottom: 2px solid #eee;
+  width: 95%;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+</style>

src/components/studyStudent.vue

@@ -8053,9 +8053,13 @@
           <img src="../assets/close1.png" alt="" />
         </div> -->
         <div class="checkbox">
-          <div class="check" style="font-size: 25px; position: unset">
+          <!-- <div class="check" style="font-size: 25px; position: unset">
             评论
-          </div>
+          </div> -->
+					<div class="cb-tabList">
+						<div :class="[commentTagShow==0?'cb-tabItem':'']" @click="commentTagShow=0">评论</div>
+						<div :class="[commentTagShow==1?'cb-tabItem':'']" @click="commentTagShow=1">评分</div>
+					</div>
           <el-select v-model="pzStype" @change="selectPz" class="selectBox">
             <el-option label="时间降序" :value="1"></el-option>
             <el-option label="时间升序" :value="2"></el-option>
@@ -8064,7 +8068,7 @@
           <img src="../assets/pzBtn.png" @click="pzDialog = false" alt="" />
         </div>
       </div>
-      <div :class="pzList && pzList.length ? 'pzBox' : 'noPzBox'">
+      <div :class="pzList && pzList.length ? 'pzBox' : 'noPzBox'" v-if="commentTagShow==0">
         <div class="pzListBox" v-if="pzList && pzList.length">
           <div class="pzList" v-for="(pz, pzIndex) in pzList" :key="pzIndex">
             <div class="pzNavTop">
@@ -8158,6 +8162,9 @@
           </div> -->
         </div>
       </div>
+			<div class="scoreList" v-if="commentTagShow==1">
+				<scoreItem v-for="item in scoreList.datalist" @refresh="getScoreList" :data="item" :isScore="scoreList.isScoreList.filter(i=>(i.userid==item.userid && i.courseid == item.courseId))" :key="item.courseId"/>
+			</div>
     </div>
     <div
       v-if="toolDialogVisible == true"
@@ -11845,6 +11852,7 @@ import * as Diff from 'diff'
 import EnglishVoice from './EnglishVoice2/index.vue'
 import checkEnglishVoice from './checkEnglishVoice/index.vue'
 import correctText from './components/correctText.vue'
+import scoreItem from './scoreList/scoreItem.vue'
 
 const getFile = (url) => {
   return new Promise((resolve, reject) => {
@@ -11917,7 +11925,8 @@ export default {
     englishEva,
     EnglishVoice,
     checkEnglishVoice,
-		correctText
+		correctText,
+		scoreItem
   },
   data() {
     return {
@@ -12195,6 +12204,7 @@ export default {
       isHovered: false,
       isHovered1: false,
       isHovered2: false,
+			commentTagShow:0,
       timer: null,
       opertimer: null,
       showType: 0,
@@ -12275,7 +12285,11 @@ export default {
       isUpdateText: "",
       EnglishVoiceDialog: false,
       englishVoiceJson: {},
-      englishVoiceJsonWork:[]
+      englishVoiceJsonWork:[],
+			scoreList:{
+				listdata:[],
+				isScoreList:[],	
+			},
     };
   },
   methods: {
@@ -19754,7 +19768,22 @@ export default {
       }
       // console.log(_url)
       return _url 
-    }
+    },
+		getScoreList(){
+			let params = {
+        cid: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectTestCourseByCid", params)
+        .then((res) => {
+					let result = res.data;
+					this.scoreList.datalist = result[0];
+					this.scoreList.isScoreList = result[1];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+		}
   },
   directives: {
     // 使用局部注册指令的方式
@@ -19906,6 +19935,7 @@ export default {
         return c;
       };
     },
+		
   },
   mounted() {
     document.body.addEventListener("click", (e) => {
@@ -19932,6 +19962,8 @@ export default {
       this.pzDialog = true;
       this.selectPz();
     }
+		// 获取评分列表
+		this.getScoreList()
     document.scrollingElement.scrollTop = 0;
     window.addEventListener("resize", () => {
       var a = document.getElementsByClassName("box_course")[0].offsetHeight;
@@ -22585,6 +22617,15 @@ export default {
   overflow: hidden;
 }
 
+.newDialogCss>.scoreList{
+	width:100%;
+	height:100%;
+	box-sizing:border-box;
+	padding:10px 15px;
+	overflow:auto;
+	padding-bottom:80px;
+}
+
 .pzTop {
   color: #fff;
   background: #000;
@@ -22608,6 +22649,33 @@ export default {
   justify-content: space-between;
 }
 
+.checkbox>.cb-tabList{
+	display:flex;
+	align-items:center;
+	
+}
+
+.cb-tabList>div{
+	margin-right:20px;
+	font-weight:400;
+	cursor:pointer;
+}
+
+.cb-tabList>.cb-tabItem{
+	color:#1684FC;
+	position:relative;
+}
+
+.cb-tabItem::after{
+	content:"";
+	width:100%;
+	height:2px;
+	background:#1684FC;
+	position:absolute;
+	bottom:-5px;
+	left:0
+}
+
 .pzTop2 .check {
   text-align: center;
   cursor: pointer;