feat: 试卷可拖拽排序及编辑

client/package.json

@@ -27,10 +27,12 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "pdfobject": "^2.3.0",
+    "sortablejs": "^1.15.2",
     "vod-js-sdk-v6": "^1.4.12",
-    "vue": "2.6.10",
+    "vue": "2.7",
     "vue-pdf": "^4.2.0",
     "vue-router": "3.0.6",
+    "vuedraggable": "^2.24.3",
     "vuex": "3.1.0",
     "xlsx": "^0.15.5"
   },

client/src/views/exam/questionupdate.vue

@@ -86,7 +86,7 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm('Form')" :loading="submitLoding">保存</el-button>
-        <el-button type="warning" @click="goBack()">返回</el-button>
+        <el-button type="warning" @click="goBack()" v-if="qid==null">返回</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -97,6 +97,7 @@ import { upUrl } from "@/api/file";
 import { getToken } from "@/utils/auth";
 export default {
   components:{  },
+  props:["qid"],
   data() {
     return {
       upHeaders: { Authorization: "JWT " + getToken() },
@@ -135,7 +136,12 @@ export default {
   watch:{
   },
   created() {
+    if(this.qid) {
+      this.Form.id = this.qid
+    }else{
       this.Form.id = this.$route.query.id  //接收参数
+    }
+    
     this.getQuestion();
     this.getQuestioncatAll()
   },
@@ -169,8 +175,13 @@ export default {
                 type: "success",
                 message: "修改成功!"
                 });
+                if (this.qid){
+                  this.$emit("updateQuestion", this.Form)
+                }else{
                   this.goBack()
                 }
+                
+                }
               });
         } else {
           return false;

client/src/views/exam/testPaperCreate.vue

@@ -87,10 +87,11 @@
           </div>
         </el-dialog>
           </div>
+          <draggable v-model="questions">
           <el-card style="margin-top: 4px" shadow="never" v-for="(item, index) in questions" v-bind:key="index">
             <div slot="header" style="display: flex;">
               <span>第{{ index+1 }}题</span>
-              <el-link style="margin-left: auto; margin-right: 8px" type="primary" @click="handleEdit(index)" icon="el-icon-edit"></el-link>
+              <el-link style="margin-left: auto; margin-right: 8px" type="primary" @click="handleEdit(item, index)" icon="el-icon-edit"></el-link>
               <el-link style="margin-right: 4px" type="danger" @click="handleDelete(index)" icon="el-icon-delete"></el-link>
             </div>
             <div style="font-weight: bold;">
@@ -100,21 +101,30 @@
             </div>
             <div style="font-size: 14px;" v-for="(value, name) in item.options">{{ name }}: {{ value }}</div>
           </el-card>
+          </draggable>
         </el-card>
         </el-col>
       </el-row>
       <Questionchoose v-bind:chooseVisible="chooseVisible" @closeDg="closeDg" @choseQ="choseQ"></Questionchoose>
+      <el-dialog title="编辑题目" :visible.sync="qDialog"> 
+        <QuestionUpdate v-if="qDialog" :qid="qid" @updateQuestion="updateQuestion"></QuestionUpdate>
+      </el-dialog>
     </div>
+
   </template>
   <script>
   import { getQuestioncatList, createPaper, UploadPaper } from "@/api/exam";
   import Questionchoose from "@/views/exam/questionChoose";
   import { upUrl, upHeaders } from "@/api/file";
-  import { VueDraggable } from 'vue-draggable-plus';
+  import draggable from 'vuedraggable';
+  import QuestionUpdate from "./questionupdate.vue";
   export default {
-    components: { Questionchoose },
+    components: { Questionchoose, draggable, QuestionUpdate },
     data() {
       return {
+        qDialog: false,
+        qid: null,
+        currentEditIndex: null,
         questions: [],
         Form: {
             name: "",
@@ -165,6 +175,15 @@
       this.getQuestioncat();
     },
     methods: {
+      updateQuestion(data){
+        this.qDialog = false;
+        this.questions[this.currentEditIndex] = data;
+      },
+      handleEdit(item, index) {
+        this.qDialog = true;
+        this.qid = item.id;
+        this.currentEditIndex = index;
+      },
       getQuestioncat() {
         getQuestioncatList().then(response => {
           this.workscopeData = response.data.results;

client/src/views/exam/testPaperUpdate.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="app-container">
-      <el-row>
+      <el-row :gutter="6">
         <el-col :span="8">
-          <h3>基本信息</h3>
+          <el-card header="试卷信息">
           <el-form :model="Form" :rules="rules" ref="Form" label-width="100px" status-icon>
             <el-form-item label="名称" prop="name">
               <el-input v-model="Form.name" style="width:80%"></el-input>
@@ -42,38 +42,48 @@
               <el-button type="warning" @click="goBack()">返回</el-button>
             </el-form-item>
           </el-form>
+          </el-card>
         </el-col>
         <el-col :span="16">
-          <h3>选题信息</h3>
+          <el-card header="试题信息">
           <el-button type="primary" @click="handleChoose" icon="el-icon-plus">选择试题</el-button>
-          <div v-for="(item, index) in questions">
-            <h4>
-              <el-button
-                type="danger"
-                size="small"
-                @click="handleDelete(index)"
-                icon="el-icon-delete"
-              ></el-button>
-              {{ index+1 }} -
+          <draggable v-model="questions">
+          <el-card style="margin-top: 4px" shadow="never" v-for="(item, index) in questions" v-bind:key="index">
+            <div slot="header" style="display: flex;">
+              <span>第{{ index+1 }}题</span>
+              <el-link style="margin-left: auto; margin-right: 8px" type="primary" @click="handleEdit(item, index)" icon="el-icon-edit"></el-link>
+              <el-link style="margin-right: 4px" type="danger" @click="handleDelete(index)" icon="el-icon-delete"></el-link>
+            </div>
+              <div style="font-weight: bold;">
               <el-tag>{{item.type}}</el-tag>
               {{ item.name }}
               <span>(正确答案:{{item.right}})</span>
-            </h4>
-            <div v-for="(value, name) in item.options">{{ name }}: {{ value }}</div>
             </div>
+            <div style="font-size: 14px;" v-for="(value, name) in item.options">{{ name }}: {{ value }}</div>
+          </el-card>
+        </draggable>
+          </el-card>
         </el-col>
       </el-row>
       <Questionchoose v-bind:chooseVisible="chooseVisible" @closeDg="closeDg" @choseQ="choseQ"></Questionchoose>
+      <el-dialog title="编辑题目" :visible.sync="qDialog"> 
+        <QuestionUpdate v-if="qDialog" :qid="qid" @updateQuestion="updateQuestion"></QuestionUpdate>
+      </el-dialog>
     </div>
   </template>
   <script>
   import { getQuestioncatList, updatePaper,getPaperDetail } from "@/api/exam";
   import { genTree } from "@/utils";
   import Questionchoose from "@/views/exam/questionChoose";
+  import draggable from 'vuedraggable';
+  import QuestionUpdate from "./questionupdate.vue";
   export default {
-    components: { Questionchoose },
+    components: { Questionchoose, draggable, QuestionUpdate },
     data() {
       return {
+        qDialog: false,
+        qid: null,
+        currentEditIndex: null,
         questions: [],
         Form: {
             name: "",
@@ -116,6 +126,16 @@
       this.getPaperDetail();
     },
     methods: {
+      updateQuestion(data){
+        this.qDialog = false;
+        data["question"] = data["id"]
+        this.questions[this.currentEditIndex] = data;
+      },
+      handleEdit(item, index) {
+        this.qDialog = true;
+        this.qid = item.question;
+        this.currentEditIndex = index;
+      },
         getQuestioncat() {
             getQuestioncatList().then(response => {
             this.workscopeData = genTree(response.data);