From 081c4613bff928b14b4b3bc5b490b9c241732ae6 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Mon, 19 Aug 2024 11:35:31 +0800
Subject: [PATCH] fix

---
 src/pages/testPaper/detail/index.vue  | 27 ++++++++++++------
 src/pages/testPaper/list/index.vue    |  3 +-
 src/pages/testPaper/preview/index.vue | 41 +++++++++++++++++++++++----
 src/styles/common.scss                |  3 --
 4 files changed, 56 insertions(+), 18 deletions(-)

diff --git a/src/pages/testPaper/detail/index.vue b/src/pages/testPaper/detail/index.vue
index 5be14c1..b570d1d 100644
--- a/src/pages/testPaper/detail/index.vue
+++ b/src/pages/testPaper/detail/index.vue
@@ -123,13 +123,15 @@
               <el-button type="primary" @click="allocation(item)">一键分配分值</el-button>
               <el-button type="primary" @click="showManualDia(item)">批量添加</el-button>
               <el-button type="danger" @click="batchDelQues(item)">批量删除试题</el-button>
-              <i class="arrow el-icon-arrow-down" @click="item.shrink = !item.shrink"></i>
+              <img :class="['shrink', { active: item.shrink }]" src="@/assets/images/shrink.svg" alt=""
+                @click="item.shrink = !item.shrink">
             </div>
           </div>
           <p class="sum">本大题共{{ item.questionNum }}小题，共{{ item.targetScore }}分</p>
 
           <div :class="['ques-wrap', { hide: item.shrink }]">
-            <draggable v-model="item.examQuestions" :group="dragGroup" @update="e => updateSort(e, item)">
+            <draggable v-model="item.examQuestions" :group="dragGroup" chosenClass="chosen" animation="1000"
+              @update="e => updateSort(e, item)">
               <div v-for="(ques, j) in item.examQuestions" :key="j" class="ques-item">
                 <el-checkbox v-model="ques.check"></el-checkbox>
                 <div :class="['ques-info', { disabled: !ques.status, del: ques.isDel, repeat: ques.isRepeat }]">
@@ -894,7 +896,6 @@ export default {
 <style lang="scss" scoped>
 .ques {
   li {
-    padding: 15px;
     margin: 20px 0 10px;
     border: 1px solid #dbdbdb;
   }
@@ -903,6 +904,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 15px;
   }
 
   .serial {
@@ -910,15 +912,18 @@ export default {
     font-size: 13px;
   }
 
-  .arrow {
+  .shrink {
     margin-left: 10px;
-    font-size: 16px;
-    color: #a9a9a9;
     cursor: pointer;
+    transition: .5s;
+
+    &.active {
+      transform: rotate(180deg);
+    }
   }
 
   .sum {
-    margin: 15px 0;
+    margin: 0 15px 15px;
     font-size: 13px;
     color: $main-color;
   }
@@ -933,11 +938,15 @@ export default {
     }
   }
 
+  .chosen {
+    box-shadow: 0 0 7px rgba(239, 239, 239, .8);
+    // border: solid 2px #3089dc !important;
+  }
+
   .ques-item {
     display: flex;
     align-items: flex-start;
-
-    margin-bottom: 20px;
+    padding: 15px;
   }
 
   .ques-info {
diff --git a/src/pages/testPaper/list/index.vue b/src/pages/testPaper/list/index.vue
index bc1ce7e..45d4911 100644
--- a/src/pages/testPaper/list/index.vue
+++ b/src/pages/testPaper/list/index.vue
@@ -120,7 +120,8 @@
           <el-table-column prop="questionCount" label="试题总数" align="center" width="70"></el-table-column>
           <el-table-column prop="score" label="总分" align="center" width="60"></el-table-column>
           <el-table-column prop="medianScore" label="中分位数" align="center" width="70"></el-table-column>
-          <el-table-column prop="questionType" label="题型" align="center" min-width="90"></el-table-column>
+          <el-table-column prop="questionType" label="题型" align="center" min-width="90"
+            show-overflow-tooltip></el-table-column>
           <el-table-column prop="difficult" label="试卷难度" align="center" width="100" sortable="custom">
             <template slot-scope="scope">{{ difficults.find(e => e.id === scope.row.difficult) ? difficults.find(e =>
               e.id === scope.row.difficult).name : '' }}</template>
diff --git a/src/pages/testPaper/preview/index.vue b/src/pages/testPaper/preview/index.vue
index 184d8c7..8d59624 100644
--- a/src/pages/testPaper/preview/index.vue
+++ b/src/pages/testPaper/preview/index.vue
@@ -30,7 +30,8 @@
               <template v-for="(ques, j) in item.examQuestions">
                 <li
                   v-if="!sheetStatus || (sheetStatus === 1 && !ques.answered) || (sheetStatus === 2 && ques.answered) || (sheetStatus === 3 && ques.partAnswer) || (sheetStatus === 4 && ques.sign)"
-                  :key="j" :class="{ answered: ques.answered, partAnswer: ques.partAnswer }">
+                  :key="j" :class="{ answered: ques.answered, partAnswer: ques.partAnswer }"
+                  @click="scrollToQues(ques)">
                   <img v-if="ques.sign" class="tag" src="@/assets/images/tag-active.svg" alt="">
                   {{ j + 1 }}
                 </li>
@@ -47,7 +48,7 @@
         </ul>
       </div>
 
-      <ul v-if="form.paperOutline" class="ques-wrap">
+      <ul v-if="form.paperOutline" class="ques-wrap" id="quesWrap">
         <li v-for="(item, i) in form.paperOutline" :key="i">
           <div class="outline">
             {{ arabicToChinese(i + 1) }}、{{ item.questionTypeName }}（本题共{{ item.questionNum }}小题，共{{
@@ -56,11 +57,11 @@
               @click="item.shrink = !item.shrink">
           </div>
           <div :class="['ques', { hide: item.shrink }]">
-            <div v-for="(ques, j) in item.examQuestions" :key="j" class="item">
+            <div v-for="(ques, j) in item.examQuestions" :key="j" class="item" :id="'ques' + ques.id">
               <div class="stem-wrap">
                 <span class="label">{{ j + 1 }} / {{ item.questionNum }}</span>
                 <span class="label">{{ item.questionTypeName }}</span>
-                <div :id="'stem' + ques.id" v-html="getQuesStem(ques)"></div>
+                <div class="stem" :id="'stem' + ques.id" v-html="getQuesStem(ques)"></div>
                 <p v-if="item.questionType !== 'fill_blank'">（{{ ques.score }}分）</p>
                 <img class="tag" :src="require('@/assets/images/' + (ques.sign ? 'tag-active' : 'tag') + '.svg')" alt=""
                   @click="ques.sign = ques.sign ? 0 : 1">
@@ -259,6 +260,26 @@ export default {
     progressFormat (e) {
       return this.totalAnswered + '/' + this.form.questionCount
     },
+    scrollToSmooth (position, duration) {
+      let startTime = Date.now()
+
+      function scroll () {
+        let now = Date.now()
+        let progress = Math.min(1, (now - startTime) / duration)
+        document.querySelector('#quesWrap').scrollTo(0, position * progress)
+
+        if (progress < 1) {
+          window.requestAnimationFrame(scroll)
+        }
+      }
+
+      window.requestAnimationFrame(scroll)
+    },
+    // 答题卡题目点击滚动
+    scrollToQues (e) {
+      const el = document.querySelector('#ques' + e.id)
+      el && this.scrollToSmooth(el.offsetTop - document.querySelector('#quesWrap').offsetTop, 200)
+    },
     // 答题卡筛选
     filterStatus (e) {
       this.sheetStatus = this.sheetStatus === e ? '' : e
@@ -418,6 +439,11 @@ export default {
         line-height: 35px;
         color: #505050;
         border: 1px solid #d3d3d3;
+        cursor: pointer;
+
+        &:hover {
+          opacity: .9;
+        }
 
         &.answered {
           color: #fff;
@@ -533,7 +559,7 @@ export default {
 
     .stem-wrap {
       display: flex;
-      align-items: center;
+      align-items: baseline;
       margin-bottom: 10px;
     }
 
@@ -552,10 +578,15 @@ export default {
       font-size: 12px;
       line-height: 1;
       color: $main-color;
+      white-space: nowrap;
       border: 1px solid;
       border-radius: 2px;
     }
 
+    .stem {
+      max-width: calc(100% - 191px);
+    }
+
     .fill-input {
       width: 100px;
       height: 28px;
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 8d2434a..e20ccd2 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -368,9 +368,6 @@
     padding-bottom: 50px;
   }
 }
-.el-tooltip__popper {
-  width: 300px;
-}
 @media(max-width: 1600px) {
   .el-table {
     .el-switch__label--right.is-active {