chore: 优化考试选择试卷页面

src/modules/exam/components/CheckPaper.vue

 <template>
   <el-card>
-    <el-input v-model="queryItem" style="margin-bottom: 10px; width: 200px" clearable></el-input>
+    <el-input
+      v-model="queryItem"
+      style="margin-bottom: 10px; width: 200px"
+      clearable
+      @change="handleSearch"
+      @clear="handleSearch"
+    ></el-input>
     <el-button type="primary" size="small" style="margin-left: 10px" @click="handleSearch">搜索</el-button>
-    <el-button type="plain" size="small" @click="restValue">重置</el-button>
-    <el-transfer :data="ExamParerList" :titles="['备选栏', '已选栏']" style="margin-top: 10px" v-model="q">
+    <el-button type="plain" size="small" @click="handleReset">重置</el-button>
+    <el-transfer
+      :data="leftData"
+      :titles="['备选栏', '已选栏']"
+      style="margin-top: 10px"
+      v-model="q"
+      :props="transferProps"
+      @change="handleChange"
+    >
     </el-transfer>
     <el-pagination
       :hide-on-single-page="true"
@@ -33,6 +46,9 @@
 <script>
 import { getExamPaperList, updateExam, getExamPaperDetail } from '../api'
 export default {
+  props: {
+    isEdit: { type: String, default: '' }
+  },
   data() {
     return {
       total: 0,
@@ -41,27 +57,34 @@ export default {
       ExamParerList: [],
       queryItem: '',
       q: [],
-      // filterMethod(query, item) {
-      //   return item.label.indexOf(query) > -1
-      // },
-      checkedArrs: []
+      transferProps: { label: 'paper_title', key: 'id' },
+      selectedList: []
     }
   },
-  props: {
-    isEdit: {
-      type: String,
-      default: ''
+  computed: {
+    leftData() {
+      // 合并左右数据
+      const list = this.ExamParerList.filter(item => {
+        return !this.selectedList.find(data => data.id === item.id)
+      })
+      return [...this.selectedList, ...list]
     }
   },
-  computed: {},
-
   methods: {
+    handleChange(ids) {
+      this.selectedList = this.leftData.reduce((result, item) => {
+        if (ids.includes(item.id)) {
+          result.push(item)
+        }
+        return result
+      }, [])
+    },
     handleSearch() {
       this.page = 1
       this.getExamParerList()
     },
-    handleChange() {},
-    restValue() {
+    handleReset() {
+      this.page = 1
       this.queryItem = ''
       this.getExamParerList()
     },
@@ -74,14 +97,9 @@ export default {
       const params = { q: this.queryItem, page: this.page, 'per-page': this.limit }
       this.ExamParerList = []
       getExamPaperList(params).then(res => {
-        this.total = res.data.total
-        this.ExamParerList = res.data.list.reduce((a, b) => {
-          this.ExamParerList.push({ label: b.paper_title, key: b.id })
-          return this.ExamParerList
-        }, [])
-        if (this.$route.query.exam_id && this.$route.query.isEdit === '2') {
-          this.getDetailInfo() // 获取详情
-        }
+        const { total = 0, list = [] } = res.data
+        this.total = total
+        this.ExamParerList = list
       })
     },
     // 上一步
@@ -104,11 +122,9 @@ export default {
           }
         }
       }
-      this.checkedArrs = listArray
-      console.log(this.checkedArrs)
       const qs = this.q.toString()
       this.$emit('getCheckPaper', qs)
-      this.$emit('getCheckPaperList', this.checkedArrs)
+      this.$emit('getCheckPaperList', listArray)
     },
     // 保存
     saveExamInfo() {
@@ -124,23 +140,18 @@ export default {
     // 获取试卷详情
     getDetailInfo() {
       getExamPaperDetail({ id: this.$route.query.exam_id }).then(res => {
-        const parperList = res.data.exam_info.paper_list
-        const arr = []
-        parperList.forEach(element => {
-          console.log(element)
-          const findItem = this.ExamParerList.find(item => {
-            return item.label === element.paper_title
-          }).key
-          console.log(this.ExamParerList)
-          findItem && arr.push(findItem)
-        })
-        this.q = arr
+        const list = res.data.exam_info.paper_list || []
+        this.q = list.map(item => item.id)
+        this.selectedList = list
       })
     }
   },
   mounted() {
     // 获取试卷列表
     this.getExamParerList()
+    if (this.$route.query.exam_id && this.$route.query.isEdit === '2') {
+      this.getDetailInfo() // 获取详情
+    }
   }
 }
 </script>
@@ -149,7 +160,6 @@ export default {
   text-align: right;
   margin-top: 20px;
 }
-
 ul {
   margin-left: 20px;
   li {
@@ -160,8 +170,11 @@ ul {
     color: #000;
   }
 }
-
+::v-deep .el-transfer {
+  display: flex;
+  align-items: center;
+}
 ::v-deep .el-transfer-panel {
-  width: 42%;
+  flex: 1;
 }
 </style>