生词设置列宽

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

@@ -20,7 +20,7 @@
         >
         </el-cascader>
       </div>
-      <el-table :data="data.new_word_list" border style="width: 100%">
+      <!-- <el-table :data="data.new_word_list" border style="width: 100%">
         <el-table-column fixed prop="number" label="序号" width="70">
           <template slot-scope="scope">
             <el-input v-model="scope.row.number" />
@@ -151,7 +151,185 @@
             <el-button size="mini" type="text" @click="moveElement(scope.row, scope.$index, 'down')">下移</el-button>
           </template>
         </el-table-column>
-      </el-table>
+      </el-table> -->
+      <div class="option-list">
+        <div class="table-node">
+          <div class="table-th" style="width: 70px">
+            <label>序号</label>
+          </div>
+          <div class="table-th" style="width: 110px">
+            <label>生词/短语</label>
+          </div>
+          <div class="table-th" style="width: 200px">
+            <label>读音</label>
+          </div>
+          <div class="table-th" style="width: 110px">
+            <label>拼音</label>
+          </div>
+          <div class="table-th" style="width: 110px">
+            <label>词性</label>
+          </div>
+          <div class="table-th" style="width: 200px">
+            <label>图片</label>
+          </div>
+          <div class="table-th" style="width: 200px">
+            <label>释义</label>
+          </div>
+          <div class="table-th" style="width: 200px">
+            <label>搭配</label>
+          </div>
+          <div class="table-th" style="width: 300px">
+            <label>例句</label>
+          </div>
+          <div class="table-th" style="width: 100px">
+            <label>页眉</label>
+          </div>
+          <div class="table-th" style="width: 100px">
+            <label>标签</label>
+          </div>
+          <div class="table-th" style="width: 150px">
+            <label>操作</label>
+          </div>
+        </div>
+        <div v-for="(item, i) in data.new_word_list" :key="i" class="table-node">
+          <div class="table-item" style="width: 70px">
+            <el-input v-model="item.number" />
+          </div>
+          <div class="table-item" style="width: 110px">
+            <el-input v-model="item.new_word" @blur="handleBlurCon(item)" />
+          </div>
+          <div class="table-item" style="width: 200px">
+            <template v-if="data.lrc_arr.length > 0 && data.lrc_arr[i]">
+              <span class="adult-book-lable">字幕时间：</span>
+              <div style="display: flex; align-items: center">
+                <el-input
+                  class="adult-book-input"
+                  style="width: 50px"
+                  v-model.trim="data.lrc_arr[i].bg"
+                  maxlength="200"
+                ></el-input>
+                ~
+                <el-input
+                  class="adult-book-input"
+                  style="width: 50px"
+                  v-model.trim="data.lrc_arr[i].ed"
+                  maxlength="200"
+                ></el-input>
+              </div>
+            </template>
+            <template v-else>
+              <div v-if="item.mp3_list">
+                <SoundRecord :wav-blob.sync="item.mp3_list" />
+              </div>
+              <template v-else>
+                <div :class="['upload-audio-play']">
+                  <UploadAudio
+                    v-if="data.property.audio_generation_method === 'upload'"
+                    :file-id="item.mp3_list"
+                    :item-index="i"
+                    :show-upload="!item.mp3_list"
+                    @upload="uploads"
+                    @deleteFile="deleteFiles"
+                  />
+                  <div
+                    v-else-if="data.property.audio_generation_method === 'auto'"
+                    class="auto-matic"
+                    @click="handleMatic(i)"
+                  >
+                    <SvgIcon icon-class="voiceprint-line" class="record" />
+                    <span class="auto-btn">{{ item.mp3_list ? '已生成' : '生成音频' }}</span
+                    >{{ item.mp3_list ? '成功' : '' }}
+                  </div>
+                  <SoundRecord v-else :wav-blob.sync="item.mp3_list" />
+                </div>
+              </template>
+            </template>
+          </div>
+          <div class="table-item" style="width: 110px">
+            <el-input v-model="item.pinyin" />
+          </div>
+          <div class="table-item" style="width: 110px">
+            <RichText
+              v-model="item.cixing"
+              :inline="true"
+              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+            />
+          </div>
+          <div class="table-item" style="width: 200px">
+            <UploadPicture
+              :file-id="item.file_list[0]"
+              :item-index="i"
+              :show-upload="!item.file_list[0]"
+              @upload="uploadPic"
+              @deleteFile="deletePic"
+            />
+          </div>
+          <div class="table-item" style="width: 200px">
+            <RichText
+              v-model="item.definition_list"
+              :inline="true"
+              :placeholder="'多个释义用；隔开'"
+              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+            />
+          </div>
+          <div class="table-item" style="width: 200px">
+            <RichText
+              v-model="item.collocation"
+              :inline="true"
+              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+            />
+          </div>
+          <div class="table-item" style="width: 300px">
+            <RichText
+              v-model="item.liju_list"
+              :inline="true"
+              :placeholder="'多条例句用回车'"
+              toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
+            />
+          </div>
+          <div class="table-item" style="width: 100px">
+            <el-input v-model="item.header_con" />
+          </div>
+          <div class="table-item" style="width: 100px">
+            <el-input v-model="item.label" />
+          </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>
+            <el-button size="mini" type="text" @click="moveElement(item, i, 'down')">下移</el-button>
+          </div>
+        </div>
+
+        <div class="table-node">
+          <div class="table-item" style="width: 70px">
+            <label style="line-height: 32px">列宽</label>
+          </div>
+          <div class="table-item" style="width: 110px">
+            <el-input v-model="data.col_width[0].value"></el-input>
+          </div>
+          <div class="table-item" style="width: 200px"></div>
+          <div class="table-item" style="width: 110px">
+            <el-input v-model="data.col_width[1].value"></el-input>
+          </div>
+          <div class="table-item" style="width: 110px">
+            <el-input v-model="data.col_width[2].value"></el-input>
+          </div>
+          <div class="table-item" style="width: 200px"></div>
+          <div class="table-item" style="width: 200px">
+            <el-input v-model="data.col_width[3].value"></el-input>
+          </div>
+          <div class="table-item" style="width: 200px">
+            <el-input v-model="data.col_width[4].value"></el-input>
+          </div>
+          <div class="table-item" style="width: 300px">
+            <el-input v-model="data.col_width[5].value"></el-input>
+          </div>
+          <div class="table-item" style="width: 100px"></div>
+          <div class="table-item" style="width: 100px"></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>
       <SelectUpload label="生词音频" type="audio" width="500px" @uploadSuccess="uploadAudioSuccess" />
       <div v-if="data.audio_data.url.length > 0" class="upload-file">
@@ -395,6 +573,7 @@ export default {
     // 增加
     addElement() {
       this.data.new_word_list.push(getOption());
+      console.log(this.data.new_word_list);
     },
     // 获取数据
     handleBlurCon(row) {
@@ -555,6 +734,46 @@ export default {
     cursor: pointer;
   }
 }
+
+.option-list {
+  margin-bottom: 12px;
+  overflow: auto;
+
+  .table-node {
+    display: flex;
+    row-gap: 16px;
+    width: 1850px;
+
+    .table-th {
+      padding: 8px;
+      background: #f2f3f5;
+      border: 1px solid $border-color;
+      border-bottom: none;
+
+      &:not(:last-child) {
+        border-right: 0;
+      }
+    }
+
+    .table-item {
+      padding: 8px;
+      overflow: hidden;
+      border: 1px solid $border-color;
+
+      &:not(:last-child) {
+        border-right: 0;
+      }
+
+      :deep p {
+        margin: 0;
+      }
+    }
+  }
+}
+
+:deep .upload-wrapper {
+  margin-top: 0;
+}
 </style>
 <style lang="scss">
 .tox .tox-editor-header {

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

@@ -61,6 +61,7 @@ export function getOption() {
     ed: 0
   };
 }
+
 export function getNewWordProperty() {
   return {
     serial_number: 1,
@@ -102,6 +103,21 @@ export function getNewWordData() {
     wordTime: [], // 字幕时间节点
     taskId:'',
     file_id_list: [], // 文件 id
+    col_width: [
+      {
+        value:125  // 生词
+      },{
+        value:125  // 拼音
+      },{
+        value:125  // 词性
+      },{
+        value:125  // 释义
+      },{
+        value:150  // 搭配
+      },{
+        value:300  // 例句
+      }
+    ], // 列宽
     mind_map: {
       node_list: [
         { name: '生词组件' }

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

@@ -39,7 +39,12 @@
                 cellpadding="0"
                 v-if="isEnable(data.property.auto_wrap)"
               >
-                <li v-for="(item, index) in data.option_list" :key="'curQue.option' + index" class="NPC-word-tr">
+                <li
+                  v-for="(item, index) in data.option_list"
+                  :key="'curQue.option' + index"
+                  class="NPC-word-tr"
+                  :style="{ width: rowWidth + 'px' }"
+                >
                   <div
                     v-for="(sItem, sIndex) in item"
                     :key="'curQue.option.child' + sIndex"
@@ -64,7 +69,7 @@
                     </template>
 
                     <template v-else>
-                      <span style="width: 16px; height: 16px"></span>
+                      <span style="flex-shrink: 0; width: 16px; height: 16px"></span>
                     </template>
                     <div class="tabNum-box">
                       <template v-if="sItem.mIndex == 0">
@@ -83,13 +88,20 @@
                           v-if="data.property.pinyin_position == 'top'"
                           class="NPC-word-tab-common NPC-word-tab-pinyin"
                           v-html="sItem.pinyin"
+                          :style="{ width: data.col_width[0].value + 'px' }"
+                        >
+                        </span>
+                        <span
+                          :style="{ width: data.col_width[0].value + 'px' }"
+                          class="NPC-word-tab-common NPC-word-tab-word"
+                          v-html="sItem.new_word"
                         >
                         </span>
-                        <span class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"> </span>
                         <span
                           v-if="data.property.pinyin_position == 'bottom'"
                           class="NPC-word-tab-common NPC-word-tab-pinyin"
                           v-html="sItem.pinyin"
+                          :style="{ width: data.col_width[0].value + 'px' }"
                         >
                         </span>
                       </div>
@@ -97,50 +109,74 @@
                         class="NPC-word-tab-common NPC-word-tab-cixing"
                         :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
                         v-html="sItem.cixing"
+                        :style="{ width: data.col_width[2].value + 'px' }"
+                      ></span>
+                      <span
+                        class="NPC-word-tab-common NPC-word-tab-def"
+                        v-html="sItem.def_str"
+                        :style="{ width: data.col_width[3].value + 'px' }"
                       ></span>
-                      <span class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></span>
                     </template>
                     <template v-else>
                       <span
                         v-if="!data.property.pinyin_position || data.property.pinyin_position == 'front'"
                         class="NPC-word-tab-common NPC-word-tab-pinyin"
                         v-html="sItem.pinyin"
+                        :style="{ width: data.col_width[1].value + 'px' }"
+                      >
+                      </span>
+                      <span
+                        class="NPC-word-tab-common NPC-word-tab-word"
+                        :style="{ width: data.col_width[0].value + 'px' }"
+                        v-html="sItem.new_word"
                       >
                       </span>
-                      <span class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"> </span>
                       <span
                         v-if="data.property.pinyin_position == 'back'"
                         class="NPC-word-tab-common NPC-word-tab-pinyin"
                         v-html="sItem.pinyin"
+                        :style="{ width: data.col_width[1].value + 'px' }"
                       >
                       </span>
                       <span
                         class="NPC-word-tab-common NPC-word-tab-cixing"
                         :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
                         v-html="sItem.cixing"
+                        :style="{ width: data.col_width[2].value + 'px' }"
+                      ></span>
+                      <span
+                        class="NPC-word-tab-common NPC-word-tab-def"
+                        v-html="sItem.def_str"
+                        :style="{ width: data.col_width[3].value + 'px' }"
                       ></span>
-                      <span class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></span>
                     </template>
-                    <span>
-                      <!-- :answerRecordList="data.answer.answer_list[index][sIndex].recordList" -->
-                      <SoundRecord
-                        :tm-index="index"
-                        :tms-index="sIndex"
-                        :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
-                        :answer-record-list="[]"
-                        type="mini"
-                        class="luyin-box-wordphrase"
-                        :style="{ marginLeft: '8px' }"
-                        @handleWav="handleWav"
-                      />
-                    </span>
-                    <span v-if="isEnable(data.property.is_has_infor)">
-                      <img src="@/assets/detail-icon.png" class="detail-icon" @click="showDetail(sItem)" />
-                    </span>
-                    <div v-if="sItem.collocation" class="collocation">
+                    <div class="right-box">
+                      <span>
+                        <!-- :answerRecordList="data.answer.answer_list[index][sIndex].recordList" -->
+                        <SoundRecord
+                          :tm-index="index"
+                          :tms-index="sIndex"
+                          :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
+                          :answer-record-list="[]"
+                          type="mini"
+                          class="luyin-box-wordphrase"
+                          :style="{ marginLeft: '8px' }"
+                          @handleWav="handleWav"
+                        />
+                      </span>
+                      <span v-if="isEnable(data.property.is_has_infor)">
+                        <img src="@/assets/detail-icon.png" class="detail-icon" @click="showDetail(sItem)" />
+                      </span>
+                    </div>
+
+                    <div
+                      v-if="sItem.collocation"
+                      class="collocation"
+                      :style="{ width: data.col_width[4].value + 'px' }"
+                    >
                       <span>搭配：</span><b v-html="sItem.collocation"></b>
                     </div>
-                    <div v-if="sItem.liju_list" class="collocation">
+                    <div v-if="sItem.liju_list" class="collocation" :style="{ width: data.col_width[5].value + 'px' }">
                       <span>例句：</span>
                       <div>
                         <b v-html="sItem.liju_list"></b>
@@ -149,128 +185,6 @@
                   </div>
                 </li>
               </ul>
-              <!-- <el-table
-                v-else
-                :data="data.new_word_list"
-                v-fit-columns
-                style="width: 100%"
-                class="newWord-table NPC-word-table"
-              >
-                <el-table-column fixed prop="" width="16px">
-                  <template slot-scope="scope">
-                    <template v-if="scope.row.bg || scope.row.ed">
-                      <a
-                        :class="[
-                          'play-btn',
-                          curTime >= scope.row.bg && curTime < scope.row.ed && stopAudioS ? 'active' : '',
-                        ]"
-                        @click="handleChangeTime(scope.row.bg, scope.row.ed)"
-                      ></a>
-                    </template>
-                    <template v-else-if="scope.row.mp3_list">
-                      <span
-                        :class="['play-btn', playClass && mp3_index === scope.row.sIndex ? 'active' : '']"
-                        @click="palyAudio(scope.row.mp3_list_url, scope.row.sIndex)"
-                      ></span>
-                      <audio :id="'word' + indexStr + scope.row.sIndex" :src="scope.row.mp3_list_url"></audio>
-                    </template>
-                  </template>
-                </el-table-column>
-                <el-table-column fixed prop="">
-                  <template slot-scope="scope">
-                    <b class="tabNum" :style="{ backgroundColor: bookInfo.theme_color }">{{ scope.row.number }}</b>
-                  </template>
-                </el-table-column>
-
-                <el-table-column
-                  fixed
-                  prop=""
-                  v-if="!data.property.pinyin_position || data.property.pinyin_position == 'front'"
-                >
-                  <template slot-scope="scope">
-                    <span class="NPC-word-tab-common NPC-word-tab-pinyin" v-html="scope.row.pinyin"> </span>
-                  </template>
-                </el-table-column>
-                <el-table-column fixed prop="new_word">
-                  <template slot-scope="scope">
-                    <template
-                      v-if="
-                        data.property.pinyin_position &&
-                        (data.property.pinyin_position == 'top' || data.property.pinyin_position == 'bottom')
-                      "
-                    >
-                      <div class="NPC-word-tab-box">
-                        <span
-                          v-if="data.property.pinyin_position == 'top'"
-                          class="NPC-word-tab-common NPC-word-tab-pinyin"
-                          v-html="scope.row.pinyin"
-                        >
-                        </span>
-                        <span class="NPC-word-tab-common NPC-word-tab-word" v-html="scope.row.new_word"> </span>
-                        <span
-                          v-if="data.property.pinyin_position == 'bottom'"
-                          class="NPC-word-tab-common NPC-word-tab-pinyin"
-                          v-html="scope.row.pinyin"
-                        >
-                        </span>
-                      </div>
-                    </template>
-                    <template v-else>
-                      <span class="NPC-word-tab-common NPC-word-tab-word" v-html="scope.row.new_word"> </span>
-                    </template>
-                  </template>
-                </el-table-column>
-                <el-table-column fixed prop="" v-if="data.property.pinyin_position == 'back'">
-                  <template slot-scope="scope">
-                    <span class="NPC-word-tab-common NPC-word-tab-pinyin" v-html="scope.row.pinyin"> </span>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="cixing">
-                  <template slot-scope="scope">
-                    <span
-                      class="NPC-word-tab-common NPC-word-tab-cixing"
-                      :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(scope.row.cixing) ? 'hasCn' : '']"
-                      v-html="scope.row.cixing"
-                    ></span>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="def_str">
-                  <template slot-scope="scope">
-                    <span class="NPC-word-tab-common NPC-word-tab-def" v-html="scope.row.def_str"></span>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="collocation">
-                  <template slot-scope="scope">
-                    <div class="collocation"><span>搭配：</span><b v-html="scope.row.collocation"></b></div>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="collocation">
-                  <template slot-scope="scope">
-                    <div class="collocation"><span>例句：</span><b v-html="scope.row.liju_list"></b></div>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="def_str" fixed="right">
-                  <template slot-scope="scope">
-                    <SoundRecord
-                      :tm-index="scope.$index"
-                      :tms-index="0"
-                      :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
-                      :answer-record-list="[]"
-                      type="mini"
-                      class="luyin-box-wordphrase"
-                      :style="{ marginLeft: '8px' }"
-                      @handleWav="handleWav"
-                    />
-                  </template>
-                </el-table-column>
-                <el-table-column prop="def_str" fixed="right">
-                  <template slot-scope="scope">
-                    <span v-if="isEnable(data.property.is_has_infor)">
-                      <img src="@/assets/detail-icon.png" class="detail-icon" @click="showDetail(scope.row)" />
-                    </span>
-                  </template>
-                </el-table-column>
-              </el-table> -->
             </div>
           </template>
           <template v-else>
@@ -498,6 +412,7 @@ export default {
       is_change: false,
       is_list: true, // 列表还是卡片展示
       courseware_id: this.$route.params.id,
+      rowWidth: 0,
     };
   },
   watch: {
@@ -618,6 +533,11 @@ export default {
       this.$refs.newwordAudio.pause();
     },
     initData() {
+      this.rowWidth = 0;
+      this.data.col_width.forEach((item) => {
+        this.rowWidth += Number(item.value);
+      });
+      this.rowWidth += 132;
       this.is_change = true;
       let resIndex = 0;
       let optionRes = [];
@@ -714,6 +634,8 @@ export default {
   @include preview-base;
 
   .NPC-zhedie {
+    width: 1007px;
+
     // width: 780px;
     margin-bottom: 24px;
 
@@ -735,7 +657,14 @@ export default {
     }
 
     .NPC-word-list {
+      overflow: auto;
       background: #f7f7f7;
+
+      .NPC-word-tab-common,
+      .collocation,
+      .tabNum-box {
+        flex-shrink: 0;
+      }
     }
 
     .NPC-word-table {
@@ -751,10 +680,13 @@ export default {
         border-radius: 8px;
 
         .NPC-word-row {
+          position: relative;
           display: flex;
-          flex-flow: wrap;
+
+          // flex-flow: wrap;
           justify-content: flex-start;
           padding: 8px 13px 8px 12px;
+          padding-right: 80px;
           cursor: pointer;
           border-radius: 8px;
 
@@ -762,6 +694,14 @@ export default {
             background: linear-gradient(0deg, rgba(0, 0, 0, 8%), rgba(0, 0, 0, 8%)), #fff;
           }
 
+          .right-box {
+            position: absolute;
+            top: 8px;
+            right: 5px;
+            display: flex;
+            gap: 5px;
+          }
+
           > span {
             font-size: 16px;
             line-height: 150%;
@@ -917,7 +857,8 @@ export default {
 
   .NPC-word-tab-def {
     box-sizing: border-box;
-    flex: 1;
+
+    // flex: 1;
     font-family: 'robot', 'alabo';
     word-break: break-word;
     white-space: pre-wrap;
@@ -938,7 +879,8 @@ export default {
   .collocation {
     display: flex;
     width: 100%;
-    padding-top: 8px;
+
+    // padding-top: 8px;
 
     > span {
       flex-shrink: 0;