生词自定义增加列

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

@@ -46,6 +46,10 @@
         <div class="table-th" style="width: 100px">
           <label>标签</label>
         </div>
+        <div class="table-th" v-for="(itemC, indexC) in data.addCol" :key="indexC" style="width: 200px">
+          <el-input v-model="itemC.label"></el-input>
+        </div>
+
         <div class="table-th" style="width: 150px">
           <label>操作</label>
         </div>
@@ -164,6 +168,18 @@
         <div class="table-item" style="width: 100px">
           <el-input v-model="item.label" />
         </div>
+        <div class="table-item" style="width: 200px" v-for="(itemN, indexN) in data.addCol" :key="indexN">
+          <RichText
+            ref="richText"
+            v-model="item[itemN.key]"
+            :inline="true"
+            :font-size="data?.unified_attrib?.font_size"
+            :font-family="data?.unified_attrib?.font"
+            :placeholder="'输入内容'"
+            toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+          />
+        </div>
+
         <div class="table-item" style="width: 150px">
           <el-button size="mini" type="text" @click="handleDelete(i)">删除</el-button>
           <el-button size="mini" type="text" @click="moveElement(item, i, 'up')">上移</el-button>
@@ -197,10 +213,16 @@
         </div>
         <div class="table-item" style="width: 100px"></div>
         <div class="table-item" style="width: 100px"></div>
+        <div class="table-item" style="width: 200px" v-for="(itemN, indexN) in data.addCol" :key="indexN">
+          <el-input v-model="data.col_width[6 + indexN].value" />
+        </div>
+
         <div class="table-item" style="width: 150px"></div>
       </div>
     </div>
-    <el-button icon="el-icon-plus" style="margin: 24px 0" @click="addElement">增加一个</el-button>
+    <el-button icon="el-icon-plus" style="margin: 24px 0" @click="addElement">增加一行</el-button>
+    <el-button icon="el-icon-plus" style="margin: 24px 10px" @click="addElementCol">增加一列</el-button>
+
     <div class="btn-box">
       <SelectUpload
         label="生词音频"
@@ -562,15 +584,42 @@ export default {
         )[0];
       }
     },
-    // 增加
+    // 增加行
     addElement() {
       let number =
         this.data.new_word_list.length > 0 ? this.data.new_word_list[this.data.new_word_list.length - 1].number : '0';
-      this.data.new_word_list.push(this.getOption());
+      let old_option = this.getOption();
+      if (this.data.addCol.length > 0) {
+        this.data.addCol.forEach((items) => {
+          this.$set(old_option, items.key, '');
+        });
+      }
+      this.data.new_word_list.push(old_option);
+
       if (!isNaN(number) && !isNaN(parseFloat(number))) {
         this.data.new_word_list[this.data.new_word_list.length - 1].number = Number(number) + 1;
       }
     },
+    // 增加列
+    addElementCol() {
+      let obj = {
+        label: '新增列',
+        index: this.data.addCol[this.data.addCol.length - 1]
+          ? this.data.addCol[this.data.addCol.length - 1].index + 1
+          : 1,
+        key:
+          'newCol' +
+          (this.data.addCol[this.data.addCol.length - 1] ? this.data.addCol[this.data.addCol.length - 1].index + 1 : 1),
+      };
+      this.data.new_word_list.forEach((item) => {
+        this.$set(item, obj.key, '');
+      });
+      this.data.addCol.push(obj);
+      this.data.col_width.push({
+        value: 100, // 新增列
+      });
+    },
+
     // 获取数据
     async handleBlurCon(row) {
       let cons = row.new_word.trim();

src/views/book/courseware/create/components/question/new_word/NewWord.vue

@@ -190,6 +190,10 @@
           <div class="table-th" style="width: 100px">
             <label>标签</label>
           </div>
+          <div class="table-th" v-for="(itemC, indexC) in data.addCol" :key="indexC" style="width: 200px">
+            <el-input v-model="itemC.label"></el-input>
+          </div>
+
           <div class="table-th" style="width: 150px">
             <label>操作</label>
           </div>
@@ -308,6 +312,17 @@
           <div class="table-item" style="width: 100px">
             <el-input v-model="item.label" />
           </div>
+          <div class="table-item" style="width: 200px" v-for="(itemN, indexN) in data.addCol" :key="indexN">
+            <RichText
+              ref="richText"
+              v-model="item[itemN.key]"
+              :inline="true"
+              :font-size="data?.unified_attrib?.font_size"
+              :font-family="data?.unified_attrib?.font"
+              :placeholder="'输入内容'"
+              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+            />
+          </div>
           <div class="table-item" style="width: 150px">
             <el-button size="mini" type="text" @click="handleDelete(i)">删除</el-button>
             <el-button size="mini" type="text" @click="moveElement(item, i, 'up')">上移</el-button>
@@ -341,11 +356,15 @@
           </div>
           <div class="table-item" style="width: 100px"></div>
           <div class="table-item" style="width: 100px"></div>
+          <div class="table-item" style="width: 200px" v-for="(itemN, indexN) in data.addCol" :key="indexN">
+            <el-input v-model="data.col_width[6 + indexN].value" />
+          </div>
           <div class="table-item" style="width: 150px"></div>
         </div>
       </div>
 
-      <el-button icon="el-icon-plus" style="margin: 24px 0" @click="addElement">增加一个</el-button>
+      <el-button icon="el-icon-plus" style="margin: 24px 0" @click="addElement">增加一行</el-button>
+      <el-button icon="el-icon-plus" style="margin: 24px 10px" @click="addElementCol">增加一列</el-button>
       <div class="btn-box">
         <SelectUpload
           label="生词音频"
@@ -634,15 +653,40 @@ export default {
         )[0];
       }
     },
-    // 增加
+    // 增加行
     addElement() {
       let number =
         this.data.new_word_list.length > 0 ? this.data.new_word_list[this.data.new_word_list.length - 1].number : '0';
-      this.data.new_word_list.push(getOption());
+      let old_option = getOption();
+      if (this.data.addCol.length > 0) {
+        this.data.addCol.forEach((items) => {
+          this.$set(old_option, items.key, '');
+        });
+      }
+      this.data.new_word_list.push(old_option);
       if (!isNaN(number) && !isNaN(parseFloat(number))) {
         this.data.new_word_list[this.data.new_word_list.length - 1].number = Number(number) + 1;
       }
     },
+    // 增加列
+    addElementCol() {
+      let obj = {
+        label: '新增列',
+        index: this.data.addCol[this.data.addCol.length - 1]
+          ? this.data.addCol[this.data.addCol.length - 1].index + 1
+          : 1,
+        key:
+          'newCol' +
+          (this.data.addCol[this.data.addCol.length - 1] ? this.data.addCol[this.data.addCol.length - 1].index + 1 : 1),
+      };
+      this.data.new_word_list.forEach((item) => {
+        this.$set(item, obj.key, '');
+      });
+      this.data.addCol.push(obj);
+      this.data.col_width.push({
+        value: 100, // 新增列
+      });
+    },
     // 获取数据
     async handleBlurCon(row) {
       let cons = row.new_word.trim();
@@ -833,6 +877,9 @@ export default {
         this.multilingualText += item.liju_list ? item.liju_list : '<p>&nbsp;</p>';
         this.multilingualText += `<p>${item.header_con}</p>`;
         this.multilingualText += `<p>${item.label}</p>`;
+        this.data.addCol.forEach((items) => {
+          this.multilingualText += `<p>${item[items.key]}</p>`;
+        });
       });
       this.multilingualVisible = true;
     },

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

@@ -150,6 +150,7 @@ export function getArticleData() {
         },
       ], // 列宽
       multilingual: [], // 多语言
+      addCol:[], // 自定义增加的列
     }, // 生词列表
     other_word_list: {
       title_con: '',
@@ -203,6 +204,7 @@ export function getArticleData() {
         },
       ], // 列宽
       multilingual: [], // 多语言
+      addCol:[], // 自定义增加的列
     },
     notes_list: {
       title_con: '',

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

@@ -192,6 +192,8 @@ export function getArticleData() {
           value: 200, // 例句
         },
       ], // 列宽
+      multilingual: [], // 多语言
+      addCol:[], // 自定义增加的列
     }, // 生词列表
     other_word_list: {
       title_con: '',
@@ -244,6 +246,8 @@ export function getArticleData() {
           value: 300, // 例句
         },
       ], // 列宽
+      multilingual: [], // 多语言
+      addCol:[], // 自定义增加的列
     },
     notes_list: {
       title_con: '',

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

@@ -136,5 +136,6 @@ export function getNewWordData() {
       answer_list: [],
     },
     multilingual: [], // 多语言
+    addCol:[], // 自定义增加的列
   };
 }

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -225,10 +225,40 @@
                     <svg-icon size="16" icon-class="eye-invisible"></svg-icon>
                   </i>
                 </li>
+                <li @click="handleShow(item.key)" v-for="(item, index) in data.addCol" :key="index">
+                  <span>{{ item.label }}</span
+                  ><i
+                    slot="suffix"
+                    class="el-icon-view show-icon"
+                    v-if="showObj[item.key]"
+                    size="16"
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  ></i>
+                  <i
+                    slot="suffix"
+                    class="show-icon"
+                    v-else
+                    :style="{
+                      color:
+                        data.unified_attrib && data.unified_attrib.topic_color
+                          ? data.unified_attrib.topic_color
+                          : '#de4444',
+                      marginLeft: '5px',
+                    }"
+                  >
+                    <svg-icon size="16" icon-class="eye-invisible"></svg-icon>
+                  </i>
+                </li>
               </ul>
               <SvgIcon
                 slot="reference"
-                v-if="is_list"
+                v-show="is_list"
                 icon-class="list2"
                 size="24"
                 :style="{
@@ -634,6 +664,33 @@
                             }}
                           </span>
                         </div>
+                        <template v-for="(itemC, indexC) in data.addCol">
+                          <div v-if="sItem[itemC.key] && showObj[itemC.key]" :key="indexC">
+                            <span class="collocation"
+                              ><span>{{ convertText(itemC.label + '：') }}</span>
+                              <div>
+                                <b
+                                  v-html="convertText(sanitizeHTML(sItem[itemC.key]))"
+                                  :style="{
+                                    fontSize:
+                                      data.unified_attrib && data.unified_attrib.font_size
+                                        ? data.unified_attrib.font_size
+                                        : '',
+                                  }"
+                                ></b>
+                              </div>
+                            </span>
+                            <span v-if="showLang" class="">
+                              {{
+                                multilingualTextList[getLang()] &&
+                                multilingualTextList[getLang()][index] &&
+                                multilingualTextList[getLang()][index][5 + indexC]
+                                  ? multilingualTextList[getLang()][index][5 + indexC]
+                                  : ''
+                              }}
+                            </span>
+                          </div>
+                        </template>
                       </div>
                       <div class="right-box">
                         <span>
@@ -1085,6 +1142,41 @@
                           }}
                         </span>
                       </div>
+                      <template v-for="(itemC, indexC) in data.addCol">
+                        <div
+                          :key="indexC"
+                          v-if="showObj[itemC.key] && colHasContent[6 + indexC]"
+                          :style="{
+                            width: data.col_width[6 + indexC].value + 'px',
+                            flex:
+                              !data.col_width[6 + indexC].value || data.col_width[6 + indexC].value === '0' ? '1' : '',
+                          }"
+                        >
+                          <span class="collocation" v-if="sItem[itemC.key]"
+                            ><span>{{ convertText(itemC.label + '：') }}</span>
+                            <div>
+                              <b
+                                v-html="convertText(sanitizeHTML(sItem[itemC.key]))"
+                                :style="{
+                                  fontSize:
+                                    data.unified_attrib && data.unified_attrib.font_size
+                                      ? data.unified_attrib.font_size
+                                      : '',
+                                }"
+                              ></b>
+                            </div>
+                          </span>
+                          <span v-if="showLang" class="">
+                            {{
+                              multilingualTextList[getLang()] &&
+                              multilingualTextList[getLang()][index] &&
+                              multilingualTextList[getLang()][index][5 + indexC]
+                                ? multilingualTextList[getLang()][index][5 + indexC]
+                                : ''
+                            }}
+                          </span>
+                        </div>
+                      </template>
                     </template>
                   </div>
                 </li>
@@ -1339,6 +1431,12 @@
                         <label class="card-label">{{ convertText('例句：') }}</label>
                         <p v-html="convertText(sanitizeHTML(item.liju_list))"></p>
                       </div>
+                      <template v-for="(itemC, indexC) in data.addCol">
+                        <div v-if="item[itemC.key]" :key="indexC">
+                          <label class="card-label">{{ convertText(itemC.label + '：') }}</label>
+                          <p v-html="convertText(sanitizeHTML(item[itemC.key]))"></p>
+                        </div>
+                      </template>
                     </div>
                     <a class="overturn-btn" @click="changeShowLeft(item)"><i class="el-icon-refresh"></i></a>
                   </div>
@@ -1713,6 +1811,20 @@ export default {
       this.hasVoice = false;
       this.rowWidth = 0;
       this.colHasContent = [];
+      this.showObj = {
+        pinyin: true,
+        newWord: true,
+        cixing: true,
+        shiyi: true,
+        collocation: true,
+        liju: true,
+      };
+      if (this.data.addCol) {
+        this.data.addCol.forEach((item) => {
+          this.$set(this.showObj, item.key, true);
+        });
+      }
+
       this.data.col_width.forEach((item, index) => {
         if (
           this.data.property.pinyin_position &&
@@ -1807,6 +1919,12 @@ export default {
         collocation_col ? true : false,
         liju_list_col ? true : false,
       ];
+      if (this.data.addCol) {
+        this.data.addCol.forEach((item) => {
+          let str_col = this.data.new_word_list.reduce((acc, itemss) => `${acc + itemss[item.key]}`, '');
+          this.colHasContent.push(str_col ? true : false);
+        });
+      }
       if (!this.isJudgingRightWrong) {
         this.answer.answer_list = Bookanswer;
       }