表格预览

src/views/book/courseware/create/components/question/table/Table.vue

@@ -49,13 +49,13 @@
           >
             <SvgIcon icon-class="strikethrough" size="20" />
           </span>
-          <span :class="[data.styles.textAlign === 'left' ? 'active' : '']" @click="data.styles.textAlign = 'left'">
+          <span :class="[data.styles.textAlign === 'start' ? 'active' : '']" @click="data.styles.textAlign = 'left'">
             <SvgIcon icon-class="align-left" size="20" />
           </span>
           <span :class="[data.styles.textAlign === 'center' ? 'active' : '']" @click="data.styles.textAlign = 'center'">
             <SvgIcon icon-class="align-center" size="20" />
           </span>
-          <span :class="[data.styles.textAlign === 'right' ? 'active' : '']" @click="data.styles.textAlign = 'right'">
+          <span :class="[data.styles.textAlign === 'end' ? 'active' : '']" @click="data.styles.textAlign = 'right'">
             <SvgIcon icon-class="align-right" size="20" />
           </span>
         </div>
@@ -83,12 +83,24 @@
       </div>
       <p class="tips">在需要作答的单元格内输入三个以上下划线“___”</p>
       <el-button @click="identifyText">识别</el-button>
+      <template v-if="isEnable(data.has_identify)">
+        <p class="tips">在需要作答的单元格内录入标准答案，多个填空答案用换行录入，同一个填空有多个答案用斜线“/”隔开</p>
+        <div class="option-list">
+          <div v-for="(item, i) in data.answer_list" :key="i" class="table-node">
+            <div v-for="(li, j) in item" :key="i + 'col' + j" class="table-item">
+              <el-input v-model="li.answer" type="textarea"></el-input>
+            </div>
+          </div>
+        </div>
+      </template>
     </template>
   </ModuleBase>
 </template>
 
 <script>
+import { isEnable } from '@/views/book/courseware/data/common';
 import ModuleMixin from '../../common/ModuleMixin';
+import { getRandomNumber } from '@/utils';
 
 import {
   getTableData,
@@ -104,6 +116,7 @@ export default {
   mixins: [ModuleMixin],
   data() {
     return {
+      isEnable,
       data: getTableData(),
       tableTypeList,
       fontFamilyList,
@@ -155,21 +168,39 @@ export default {
   methods: {
     // 识别文本
     identifyText() {
-      this.data.model_essay = [];
-      this.data.answer.answer_list = [];
-
-      this.data.content
-        .split(/<(p|div)[^>]*>(.*?)<\/(p|div)>/g)
-        .filter((s) => s && !s.match(/^(p|div)$/))
-        .forEach((item) => {
-          if (item.charCodeAt() === 10) return;
-          let str = item
-            // 去除所有的 font-size 样式
-            .replace(/font-size:\s*\d+(\.\d+)?px;/gi, '')
-            // 匹配 class 名为 rich-fill 的 span 标签和三个以上的_，并将它们组成数组
-            .replace(/<span class="rich-fill".*?>(.*?)<\/span>|([_]{3,})/gi, '###$1$2###');
-          this.data.model_essay.push(this.splitRichText(str));
+      this.data.has_identify = 'true';
+      this.data.option_list.forEach((item, index) => {
+        item.forEach((items, indexs) => {
+          items.model_essay = [];
+          // this.data.answer_list[index][indexs].answer_list = [];
+          if (items.content) {
+            items.content
+              .split(/<(p|div)[^>]*>(.*?)<\/(p|div)>/g)
+              .filter((s) => s && !s.match(/^(p|div)$/))
+              .forEach((itemss) => {
+                if (itemss.charCodeAt() === 10) return;
+                let strArr = itemss.split(/_{3,}/g);
+                strArr.forEach((itemS, index) => {
+                  items.model_essay.push({
+                    value: itemS,
+                    type: 'text',
+                  });
+                  if (index !== strArr.length - 1) {
+                    items.model_essay.push({
+                      value: '',
+                      type: 'input',
+                      mark: getRandomNumber(),
+                    });
+                  }
+                });
+                // // 去除所有的 font-size 样式
+                // .replace(/font-size:\s*\d+(\.\d+)?px;/gi, '')
+                // // 匹配 class 名为 rich-fill 的 span 标签和三个以上的_，并将它们组成数组
+                // .replace(/<span class="rich-fill".*?>(.*?)<\/span>|([_]{3,})/gi, '###$1$2###');
+              });
+          }
         });
+      });
     },
     // 分割富文本
     splitRichText(str) {

src/views/book/courseware/data/table.js

@@ -85,6 +85,7 @@ export function getTableData() {
       }
     ], // 列宽
     property: getTableProperty(),
+    has_identify:'false', // 是否已识别
     mind_map: {
       node_list: [{ name: '表格' }],
     },

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -48,7 +48,22 @@
                         : '',
                 }"
               >
-                <div :style="[tdStyle]" class="cell-wrap" v-html="col.content"></div>
+                <div :style="[tdStyle]" class="cell-wrap">
+                  <p v-for="(item, index) in col.model_essay" :key="index">
+                    <span v-if="item.type === 'text'" :key="index" v-html="sanitizeHTML(item.value)"></span>
+                    <template v-if="item.type === 'input'">
+                      <el-input
+                        :key="index"
+                        v-model="item.value"
+                        :disabled="disabled"
+                        :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
+                      />
+                      <!-- <span v-show="computedAnswerText(li.mark).length > 0" :key="`answer-${indexs}`" class="right-answer">
+                {{ computedAnswerText(li.mark) }}
+              </span> -->
+                    </template>
+                  </p>
+                </div>
               </td>
             </template>
           </tr>
@@ -86,7 +101,7 @@ export default {
           textDecoration: styles.isUnderline ? 'underline' : styles.isStrikethrough ? 'line-through' : '',
           fontWeight: styles.isBold ? 'bold' : '',
           fontStyle: styles.isItalic ? 'italic' : '',
-          textAlign: styles.textAlign,
+          justifyContent: styles.textAlign,
         };
       }
       return obj;
@@ -105,6 +120,17 @@ export default {
         this.table_width += Number(item.value);
       });
     },
+    computedAnswerText(mark) {
+      if (!this.isShowRightAnswer) return '';
+      let selectOption = this.answer.answer_list.find((item) => item.mark === mark);
+      let answerOption = this.data.answer.answer_list.find((item) => item.mark === mark);
+      if (!selectOption) return '';
+      let selectValue = selectOption.value;
+      let answerValue = answerOption.value;
+      let isRight = selectValue === answerValue;
+      if (isRight) return '';
+      return `（${answerValue}）`;
+    },
   },
 };
 </script>
@@ -129,6 +155,67 @@ $border-color: #e6e6e6;
       // border-spacing: 3px;
       border-collapse: separate;
     }
+
+    .cell-wrap {
+      display: flex;
+      grid-area: fill;
+
+      p {
+        margin: 0;
+      }
+
+      .el-input {
+        display: inline-flex;
+        align-items: center;
+        width: 120px;
+        margin: 0 2px;
+
+        &.pinyin :deep input.el-input__inner {
+          font-family: 'PINYIN-B', sans-serif;
+        }
+
+        &.chinese :deep input.el-input__inner {
+          font-family: 'arial', sans-serif;
+        }
+
+        &.english :deep input.el-input__inner {
+          font-family: 'arial', sans-serif;
+        }
+
+        &.right {
+          :deep input.el-input__inner {
+            color: $right-color;
+          }
+        }
+
+        &.wrong {
+          :deep input.el-input__inner {
+            color: $error-color;
+          }
+        }
+
+        & + .right-answer {
+          position: relative;
+          left: -4px;
+          display: inline-block;
+          height: 32px;
+          line-height: 28px;
+          vertical-align: bottom;
+          border-bottom: 1px solid $font-color;
+        }
+
+        :deep input.el-input__inner {
+          padding: 0;
+          font-size: 16pt;
+          color: $font-color;
+          text-align: center;
+          background-color: #fff;
+          border-width: 0;
+          border-bottom: 1px solid $font-color;
+          border-radius: 0;
+        }
+      }
+    }
   }
 }
 </style>