表格

src/components/Adult/inputModules/ConfigurableTable/components/CellEdit.vue

@@ -3,6 +3,7 @@
     title="单元格编辑"
     :visible="visible"
     :before-close="close"
+    :close-on-click-modal="false"
     :modal="false"
   >
     <label>内容类型：</label>
@@ -45,6 +46,18 @@
           :is-hide-py-position="true"
         />
       </template>
+
+      <template v-else-if="cellData.type === 'prePinyin'">
+        <el-input v-model="cellData.prefix">
+          <template slot="prepend">前缀</template>
+        </el-input>
+
+        <sentence-segword-chs
+          :cur-que="cellData.sentence_data"
+          type="adultinput"
+          :is-hide-py-position="true"
+        />
+      </template>
     </div>
     <div slot="footer">
       <el-button type="primary" @click="confirm">确定</el-button>
@@ -89,6 +102,10 @@ export default {
         {
           label: '中文 + 英文 + 拼音',
           value: 'twoAnnotation'
+        },
+        {
+          label: '前缀 + 拼音',
+          value: 'prePinyin'
         }
       ]
     };

src/components/Adult/inputModules/HeaderSeparate/components/CellEdit.vue

@@ -3,6 +3,7 @@
     title="单元格编辑"
     :visible="visible"
     :before-close="close"
+    :close-on-click-modal="false"
     :modal="false"
   >
     <label>内容类型：</label>

src/components/Adult/preview/ConfigurableTable.vue

@@ -5,7 +5,7 @@
         'box-shadow': `${
           curQue.isShadow ? '4px 4px 4px rgba(0, 0, 0, 0.3)' : ''
         }`,
-        border: `${curQue.marginHighlight ? '1.1px solid #949494' : ''}`
+        border: `${curQue.marginHighlight ? '1.1px solid #949494' : ''}`,
       }"
     >
       <colgroup>
@@ -27,7 +27,7 @@
           v-for="(header, i) in curQue.tableData.headers"
           :key="`thead-${i}`"
           :style="{
-            'background-color': `${curQue.headerBgColor}`
+            'background-color': `${curQue.headerBgColor}`,
           }"
         >
           <template v-if="header.isMerge">
@@ -49,7 +49,7 @@
 
       <tbody
         :style="{
-          'text-align': `${curQue.textAlign}`
+          'text-align': `${curQue.textAlign}`,
         }"
       >
         <tr v-for="(data, i) in curQue.tableData.body" :key="`tr-${i}`">
@@ -62,7 +62,7 @@
                 <el-input
                   v-model="item.answer"
                   type="textarea"
-                  :placeholder="`${isAnswerMode ? '':'输入'}`"
+                  :placeholder="`${isAnswerMode ? '' : '输入'}`"
                   :disabled="isAnswerMode"
                   :autosize="{ minRows: 1, maxRows: 6 }"
                   @input="enterAnswer(i, j, $event)"
@@ -70,7 +70,7 @@
               </template>
             </template>
 
-            <div v-else-if="item.type == 'preContent'" class="preContent">
+            <div v-else-if="item.type === 'preContent'" class="preContent">
               <span>{{ item.prefix }}</span>
               <template v-if="item.text.length > 0">
                 {{ item.text }}
@@ -79,7 +79,7 @@
                 <el-input
                   v-model="item.answer"
                   type="textarea"
-                  :placeholder="`${isAnswerMode ? '':'输入'}`"
+                  :placeholder="`${isAnswerMode ? '' : '输入'}`"
                   :disabled="isAnswerMode"
                   :autosize="{ minRows: 1, maxRows: 6 }"
                   @input="enterAnswer(i, j, $event)"
@@ -97,21 +97,19 @@
               <div>
                 <span
                   v-for="({ pinyin, chs }, k) in item.sentence_data.wordsList"
-                  :key="
-                    `${
-                      curQue.pinyinPosition === 'top' ||
-                      curQue.pinyinPosition === 'left'
-                        ? 'pinyin'
-                        : 'chs'
-                    }-${k}`
-                  "
+                  :key="`${
+                    curQue.pinyinPosition === 'top' ||
+                    curQue.pinyinPosition === 'left'
+                      ? 'pinyin'
+                      : 'chs'
+                  }-${k}`"
                   :class="[
                     `${
                       curQue.pinyinPosition === 'top' ||
                       curQue.pinyinPosition === 'left'
                         ? 'pinyin'
                         : 'chs'
-                    }`
+                    }`,
                   ]"
                 >
                   {{
@@ -135,21 +133,19 @@
               <div>
                 <span
                   v-for="({ pinyin, chs }, k) in item.sentence_data.wordsList"
-                  :key="
-                    `${
-                      curQue.pinyinPosition === 'top' ||
-                      curQue.pinyinPosition === 'left'
-                        ? 'chs'
-                        : 'pinyin'
-                    }-${k}`
-                  "
+                  :key="`${
+                    curQue.pinyinPosition === 'top' ||
+                    curQue.pinyinPosition === 'left'
+                      ? 'chs'
+                      : 'pinyin'
+                  }-${k}`"
                   :class="[
                     `${
                       curQue.pinyinPosition === 'top' ||
                       curQue.pinyinPosition === 'left'
                         ? 'chs'
                         : 'pinyin'
-                    }`
+                    }`,
                   ]"
                 >
                   {{
@@ -171,6 +167,29 @@
                 </span>
               </div>
             </div>
+
+            <div v-else-if="item.type === 'prePinyin'" class="pre-pinyin">
+              <span>{{ item.prefix }}</span>
+              <div class="right-pinyin">
+                <div>
+                  <span
+                    v-for="({ pinyin }, k) in item.sentence_data.wordsList"
+                    :key="`pre-pinyin-${k}`"
+                    class="pinyin"
+                  >
+                    {{ pinyin }}
+                  </span>
+                </div>
+                <div>
+                  <span
+                    v-for="({ pinyin, chs }, k) in item.sentence_data.wordsList"
+                    :key="`pre-chs-${k}`"
+                  >
+                    {{ chs }}
+                  </span>
+                </div>
+              </div>
+            </div>
           </td>
         </tr>
       </tbody>
@@ -183,16 +202,16 @@ export default {
   props: {
     curQue: {
       type: Object,
-      required: true
+      required: true,
     },
     themeColor: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
-      isAnswerMode: false
+      isAnswerMode: false,
     };
   },
   computed: {
@@ -200,28 +219,28 @@ export default {
       let pyPos = this.curQue.pinyinPosition;
       if (pyPos === "left") {
         return {
-          "column-gap": "16px"
+          "column-gap": "16px",
         };
       }
 
       if (pyPos === "top") {
         return {
-          "flex-direction": "column"
+          "flex-direction": "column",
         };
       }
 
       if (pyPos === "right") {
         return {
-          "column-gap": "16px"
+          "column-gap": "16px",
         };
       }
 
       if (pyPos === "bottom") {
         return {
-          "flex-direction": "column"
+          "flex-direction": "column",
         };
       }
-    }
+    },
   },
   created() {
     const Bookanswer = this.curQue.Bookanswer;
@@ -240,10 +259,10 @@ export default {
       this.curQue.Bookanswer[`${i}-${j}`] = {
         col: i,
         row: j,
-        value
+        value,
       };
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -290,17 +309,29 @@ export default {
       .sentence {
         display: flex;
 
-        .pinyin {
-          font-family: "GB-PINYINOK-B";
+        .english {
           opacity: 0.6;
         }
+      }
 
-        .chs {
-          font-family: "FZJCGFKTK";
-        }
+      .pinyin {
+        font-family: "GB-PINYINOK-B";
+        opacity: 0.6;
+      }
 
-        .english {
-          opacity: 0.6;
+      .chs {
+        font-family: "FZJCGFKTK";
+      }
+      // 前缀 + 拼音
+      .pre-pinyin {
+        display: flex;
+        align-items: flex-end;
+
+        .right-pinyin {
+          row-gap: 2px;
+          flex-direction: column;
+          text-align: center;
+          display: flex;
         }
       }
     }