文章批量调整样式

src/views/book/courseware/create/components/question/article/CheckStyle.vue

@@ -5,9 +5,18 @@
         <div style="display: flex">
           <b>校对样式</b>
         </div>
-        <!-- <div class="btn-box">
-          <el-button type="primary" @click="savePinyin">保存</el-button>
-        </div> -->
+        <div class="btn-box">
+          <el-button
+            v-if="batch"
+            @click="
+              batch = false;
+              batchList = [];
+            "
+            >取消批量选择</el-button
+          >
+          <el-button v-if="batch" type="primary" @click="sureBatch">批量选择完成</el-button>
+          <el-button v-else type="primary" @click="batch = true">开始批量选择</el-button>
+        </div>
       </div>
       <div class="article">
         <div v-for="(item, index) in indexArr" :key="index + 'paragraph'" class="paragraph">
@@ -16,7 +25,11 @@
               class="sentence"
               :style="{
                 marginRight: items.marginRight ? '8px' : '',
-                color: activeIndex === index + '_' + items.sentenceIndex + '_' + items.wordIndex ? '#F2555A' : '',
+                color:
+                  activeIndex === index + '_' + items.sentenceIndex + '_' + items.wordIndex ||
+                  batchList.findIndex((itemss) => itemss.saveIndex === items.saveIndex) > -1
+                    ? '#F2555A'
+                    : '',
               }"
               @click="selectItem(items, index)"
             >
@@ -50,7 +63,7 @@
     >
       <div class="check-box">
         <div class="content">
-          <div class="words-box">
+          <div class="words-box" v-if="batchList.length < 2">
             <span
               class="words"
               :style="{
@@ -90,7 +103,7 @@
             <SvgIcon icon-class="borderDotted" title="下划虚线" size="16" @click="setActiveTextStyle('border')" />
           </span>
         </div>
-        <div class="match-info">
+        <div class="match-info" v-if="batchList.length < 2">
           <label>关联生词：</label>
           <el-input
             v-model="itemActive.matchWords"
@@ -98,7 +111,7 @@
             @blur="onBlur(itemActive, 'matchWords')"
           ></el-input>
         </div>
-        <div class="match-info">
+        <div class="match-info" v-if="batchList.length < 2">
           <label>关联注释：</label>
           <el-input
             v-model="itemActive.matchNotes"
@@ -165,6 +178,8 @@ export default {
         //   name: '系统字体',
         // },
       ],
+      batch: false, // 批量选择flag
+      batchList: [], // 批量选择列表
     };
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -177,6 +192,7 @@ export default {
     },
     // 获取分析结果
     getArticleData() {
+      this.batchList = [];
       this.loading = true;
       let newdata = [];
       this.data.detail.forEach((item) => {
@@ -258,12 +274,24 @@ export default {
       this.loading = false;
     },
     selectItem(item, index) {
-      this.activeIndex = `${index}_${item.sentenceIndex}_${item.wordIndex}`;
-      this.itemActive = item;
-      this.dialogFlag = true;
-      this.checkPinyinInput = '';
+      if (this.batch) {
+        let isHas = this.batchList.findIndex((itemss) => itemss.saveIndex === item.saveIndex);
+        if (isHas > -1) {
+          this.batchList.splice(isHas, 1);
+        } else {
+          this.batchList.push(item);
+        }
+        this.itemActive = item;
+      } else {
+        this.batchList = [];
+        this.activeIndex = `${index}_${item.sentenceIndex}_${item.wordIndex}`;
+        this.itemActive = item;
+        this.dialogFlag = true;
+        this.checkPinyinInput = '';
+      }
     },
     cancleDialog() {
+      this.batchList = [];
       this.activeIndex = null;
       this.itemActive = null;
       this.checkPinyinInput = '';
@@ -275,26 +303,59 @@ export default {
       this.dialogFlag = false;
     },
     saveStyle() {
-      this.$emit(
-        'saveStyle',
-        this.itemActive.paraIndex,
-        this.itemActive.sentenceIndex,
-        this.itemActive.wordIndex,
-        this.itemActive.fontFamily,
-        this.itemActive.textDecoration,
-        this.itemActive.fontWeight,
-        this.itemActive.border,
-        this.itemActive.color,
-        this.itemActive.matchWords,
-        this.itemActive.matchNotes,
-        this.itemActive.notesColor,
-        this.itemActive.img,
-        this.itemActive.imgPosition,
-      );
+      if (this.batch) {
+        this.batchList.forEach((item) => {
+          this.$emit(
+            'saveStyle',
+            item.paraIndex,
+            item.sentenceIndex,
+            item.wordIndex,
+            this.itemActive.fontFamily,
+            this.itemActive.textDecoration,
+            this.itemActive.fontWeight,
+            this.itemActive.border,
+            this.itemActive.color,
+            this.itemActive.matchWords,
+            this.itemActive.matchNotes,
+            this.itemActive.notesColor,
+            this.itemActive.img,
+            this.itemActive.imgPosition,
+          );
+          item.fontFamily = this.itemActive.fontFamily;
+          item.textDecoration = this.itemActive.textDecoration;
+          item.fontWeight = this.itemActive.fontWeight;
+          item.border = this.itemActive.border;
+          item.color = this.itemActive.color;
+          item.matchWords = this.itemActive.matchWords;
+          item.matchNotes = this.itemActive.matchNotes;
+          item.notesColor = this.itemActive.notesColor;
+          item.img = this.itemActive.img;
+          item.imgPosition = this.itemActive.imgPosition;
+        });
+      } else {
+        this.$emit(
+          'saveStyle',
+          this.itemActive.paraIndex,
+          this.itemActive.sentenceIndex,
+          this.itemActive.wordIndex,
+          this.itemActive.fontFamily,
+          this.itemActive.textDecoration,
+          this.itemActive.fontWeight,
+          this.itemActive.border,
+          this.itemActive.color,
+          this.itemActive.matchWords,
+          this.itemActive.matchNotes,
+          this.itemActive.notesColor,
+          this.itemActive.img,
+          this.itemActive.imgPosition,
+        );
+      }
       this.$message.success('保存成功');
       this.activeIndex = null;
       // this.itemActive = null;
       this.dialogFlag = false;
+      this.batch = false;
+      this.batchList = [];
     },
     // 设置样式
     setActiveTextStyle(type) {
@@ -336,6 +397,13 @@ export default {
         }
       });
     },
+    sureBatch() {
+      if (this.batchList.length === 0) {
+        this.$message.warning('请至少选择一个分词');
+        return;
+      }
+      this.dialogFlag = true;
+    },
   },
 };
 </script>