知识点作答接口对接

src/http/api/target.js

@@ -40,6 +40,14 @@ const targetImprove = {
   studentTargeExerciseQuestion(data) {
     return get( base.prefix+ `/api/v1/studentTarge/exercise_question`, data)
   },
+  // 提交练习答案
+  studentTargeQuestionAnswering(data) {
+    return get( base.prefix+ `/api/v1/studentTarge/question_answering`, data)
+  },
+  // 提交作答
+  studentTargeSubmitExercise(data) {
+    return get( base.prefix+ `/api/v1/studentTarge/submit_exercise`, data)
+  },
   // 知识图谱
   knowledgeGraph(data) {
     return post( base.prefix+ `/api/v1/studentTarge/knowledge_graph`, data)

src/views/targetImprove/practice/practiceAnswer.vue

@@ -38,7 +38,7 @@
               <el-button plain class="download_btn" @click="downloadPaper"
                 >下载试卷</el-button
               >
-              <el-button type="primary">提交作答</el-button>
+              <el-button type="primary" @click="SubmitAnswer">提交作答</el-button>
             </div>
           </div>
           <div class="question_list">
@@ -89,11 +89,14 @@
                   <el-upload
                     class="img_uploader"
                     list-type="picture-card"
-                    :auto-upload="false"
                     :show-file-list="false"
-                    action="https://jsonplaceholder.typicode.com/posts/"
+                    :headers="{'Authorization': getToken}"
+                    :action="uploadUrl"
+                    accept="image/*"
                     multiple
-                    :on-success="handleAvatarSuccess"
+                    :limit="10"
+                    :on-exceed="HandleExceed"
+                    :on-success="(response, file, fileList)=>HandleUploadSuccess(response, file, fileList,item)"
                   >
                     <el-button slot="default" class="upload_btn" plain
                       >拍照/上传答案</el-button
@@ -101,13 +104,13 @@
                   </el-upload>
                   <div
                     class="upload_list_item"
-                    v-for="(item, index) in fileList"
+                    v-for="(url, index) in item.answer"
                     :key="index"
-                    @click="handlePictureCardPreview(item)"
+                    @click="HandlePictureCardPreview(url)"
                   >
-                    <img :src="item.url" />
+                    <img :src="url" />
                     <i
-                      @click.stop="handleRemove(file)"
+                      @click.stop="HandleRemove(item.answer,index)"
                       class="el-icon-error upload_list_item_delete"
                     ></i>
                   </div>
@@ -122,7 +125,7 @@
       <el-dialog :visible.sync="dialogVisible">
         <div class="dialog_center padding_20">
           <div class="dialog_img">
-            <img style="width: 100%" :src="dialogImageUrl" />
+            <img style="max-width: 100%" :src="dialogImageUrl" />
           </div>
         </div>
       </el-dialog>
@@ -161,6 +164,8 @@
 </template>
 <script>
 import QuestionItem from "@/views/targetImprove/components/QuestionItem.vue"; //题目公共组件
+import { getToken } from "@/utils/auth";
+import base from '@/http/common/base.js';
 import { mapState } from "vuex";
 export default {
   components: {
@@ -203,17 +208,8 @@ export default {
         "Y",
         "Z",
       ],
-      checkbox: [],
-      fileList: [
-        {
-          name: "food.jpeg",
-          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-        },
-        {
-          name: "food2.jpeg",
-          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
-        },
-      ],
+      getToken: getToken(),
+      uploadUrl: '',//上传图片地址
       dialogImageUrl: "", //图片预览
       dialogVisible: false, //图片预览
       dialogPaperVisible: false, //下载试卷
@@ -222,9 +218,14 @@ export default {
   },
   watch: {},
   mounted() {
+    this.GetUploadUrl();
     this.GetStudentTargeWaitExercise();
   },
   methods: {
+    //获取上传图片地址
+    GetUploadUrl(){
+      this.uploadUrl = `${base.prefix}/api/v1/student_upload/oss/upload_filesSele`;
+    },
     //待练习知识点
     GetStudentTargeWaitExercise() {
       this.$api.target
@@ -289,21 +290,58 @@ export default {
     //判断题改变
     HandleJudgeChange(item) {
       item.answer = item.answer || "";
+      this.SubmitQuestionAnswering(item.exerciseQueId,item.answer);
     },
     //选择题改变
     HandleCheckChange(item) {
       item.answer = item.answer || [];
+      const answer = item?.answer?.join('') || '';
+      this.SubmitQuestionAnswering(item.exerciseQueId,answer);
+    },
+    // 超出最大数量触发
+    HandleExceed(files, fileList) {
+      this.$message.warning(`最多只能上传10张图片`)
+    },
+    //上传图片成功
+    HandleUploadSuccess(res, file, fileList,item){
+      if(res.code == 200){
+        const url = res?.data?.url || '';
+        item.answer.push(url);
+        const answer = item?.answer?.join(',') || '';
+        this.SubmitQuestionAnswering(item.exerciseQueId,answer);
+      }
     },
     //删除图片
-    handleRemove(file) {
-      console.log(file);
+    HandleRemove(answer,index) {
+      answer.splice(index, 1);
+    },
+    //提交答案
+    SubmitQuestionAnswering(exerciseQueId,stuAnswer) {
+      this.$api.target.studentTargeQuestionAnswering({
+        exerciseQueId: exerciseQueId, // 练习试题id	
+        stuAnswer: stuAnswer, // 学生答案
+      }).then((res) => {
+        if (res.code == 200) {
+          // this.$message.success('提交成功');
+        }  
+      });
+    },
+    //提交作答
+    SubmitAnswer(){
+      this.$api.target.studentTargeSubmitExercise({
+        exerciseId: this.exerciseId, // 练习id
+      }).then((res) => {
+        if (res.code == 200) {
+          this.$message.success('提交成功');
+          this.GetStudentTargeWaitExercise();//获取待练习知识点
+        }  
+      });
     },
     //图片预览
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
+    HandlePictureCardPreview(url) {
+      this.dialogImageUrl = url;
       this.dialogVisible = true;
     },
-    handleAvatarSuccess() {},
     //下载试卷
     downloadPaper() {
       this.dialogPaperVisible = true;
@@ -656,6 +694,7 @@ export default {
 
 .dialog_img {
   height: 70vh;
+  text-align: center;
   overflow: auto;
 }