merge table

src/components/Adult/inputModules/Table.vue

@@ -98,6 +98,25 @@
           </div>
         </div>
         <div class="adult-book-input-item">
+          请输入每一列的宽度占比,最多为100,最少为0
+        </div>
+        <div
+          class="adult-book-input-item"
+          v-for="(item, i) in curQue.colWidthList"
+          :key="'Colwid' + i"
+        >
+          <span class="adult-book-lable">第{{ i + 1 }}列</span>
+           <el-input
+            type="textarea"
+            placeholder="请输入列的宽度"
+            v-model="item.con"
+            class="adult-book-input"
+            :autosize="{ minRows: 2 }"
+            @blur="item.con = item.con.trim()"
+          ></el-input>
+        </div>
+
+        <div class="adult-book-input-item">
           <span class="adult-book-lable">提示标题：</span>           
           <el-input
             type="textarea"
@@ -292,6 +311,11 @@ export default {
             },
           ],
         ],
+        colWidthList: [
+          {
+            width: "",
+          },
+        ],
         img_list: [],
         hintTitle: "",
         hintOtion: [
@@ -429,7 +453,7 @@ export default {
     // 删除列
     removeCol(index) {
       if (this.curQue.option[0].length <= 1) {
-        this.$message.warning("至少要保留一格");
+        this.$message.warning("至少要保留一列");
         return;
       }
       this.curQue.option.forEach((item) => {
@@ -444,6 +468,7 @@ export default {
           this.curQue.headerList.splice(i, 1);
         }
       });
+      this.curQue.colWidthList.splice(index, 1);
     },
     //   删除td
     removeTd(rowi, coli) {
@@ -481,11 +506,15 @@ export default {
     //   增加列
     addCol() {
       let obj = JSON.parse(JSON.stringify(this.data_structure.option[0][0]));
+      let widthObj = JSON.parse(
+        JSON.stringify(this.data_structure.colWidthList[0])
+      );
+      this.curQue.colWidthList.push(widthObj);
       this.curQue.option.forEach((item, i) => {
         item.push(obj);
       });
     },
-    // 删除其中一个选项
+    // 删除其中一个表头
     deleteHeader(index) {
       if (this.curQue.headerList.length <= 1) {
         this.$message.warning("至少要保留一个表头");
@@ -495,6 +524,7 @@ export default {
       this.curQue.option.forEach((item) => {
         item.splice(index, 1);
       });
+      this.curQue.colWidthList.splice(index, 1);
     },
     //添加一个表头
     addHeader() {
@@ -506,6 +536,10 @@ export default {
       this.curQue.option.forEach((item) => {
         item.push(obj);
       });
+      let widthObj = JSON.parse(
+        JSON.stringify(this.data_structure.colWidthList[0])
+      );
+      this.curQue.colWidthList.push(widthObj);
     },
     // 关闭弹窗并清空数据
     handleClose() {

src/components/Adult/preview/Ligature.vue

@@ -505,7 +505,7 @@ export default {
           span {
             width: 24px;
             height: 24px;
-            font-family: Roboto;
+            font-family: 'robot';
             font-style: normal;
             font-weight: normal;
             font-size: 16px;
@@ -548,7 +548,7 @@ export default {
           > span {
             width: 24px;
             height: 24px;
-            font-family: Roboto;
+            font-family: 'robot';
             font-style: normal;
             font-weight: normal;
             font-size: 16px;

src/components/Adult/preview/TableView.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="TableView" v-if="curQue">
+    <div class="table">
+      <table>
+        <template v-if="curQue.headerList.length > 0">
+          <tr>
+            <th
+              v-for="(item, headIndex) in curQue.headerList"
+              :key="'header' + headIndex"
+              :style="{ width: curQue.colWidthList[headIndex].con + '%' }"
+            >
+              {{ item.con }}
+            </th>
+          </tr>
+        </template>
+        <tr v-for="(row, rowIndex) in curQue.option" :key="'row' + rowIndex">
+          <td
+            v-for="(col, colIndex) in row"
+            :key="'col' + colIndex"
+            :style="{ width: curQue.colWidthList[colIndex].con + '%' }"
+          >
+            <template v-if="!col.isNumll">
+              {{ col.con }}
+            </template>
+            <template v-else>
+              <input type="text" v-model="col.con" />
+            </template>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div class="hint">
+      <p>{{ curQue.hintTitle }}</p>
+      <div>
+        <div v-for="(item, i) in curQue.hintOtion" :key="'hint' + i">
+          <p>{{ item.pinyin }}</p>
+          <p>{{ item.con }}</p>
+        </div>
+      </div>
+    </div>
+    <div class="record">
+      <Soundrecord @handleWav="handleWav" type="pro-plus" class="luyin-box" />
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    Soundrecord,
+  },
+  props: ["curQue"],
+
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    handleWav(data) {},
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.curQue.option.forEach((item) => {
+      item.forEach((it) => {
+        if (it.con == "") {
+          it.isNumll = true;
+        }
+      });
+    });
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.TableView {
+  .hint {
+    p {
+      font-family: "robot";
+      font-style: normal;
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 150%;
+      color: #000000;
+    }
+    > div {
+      display: flex;
+      > div {
+        min-width: 82px;
+        min-height: 70px;
+        padding: 8px 16px;
+        background: #f7f7f7;
+        border-radius: 8px;
+        margin-right: 8px;
+        p {
+          margin: 0;
+        }
+        > :nth-child(1) {
+          font-family: "GB-PINYINOK-B";
+          font-style: normal;
+          font-weight: normal;
+          font-size: 16px;
+          line-height: 150%;
+          text-align: center;
+          color: #000000;
+        }
+        > :nth-child(2) {
+          font-family: "FZJCGFKTK";
+          font-style: normal;
+          font-weight: normal;
+          font-size: 20px;
+          line-height: 150%;
+          text-align: center;
+          color: #000000;
+        }
+      }
+    }
+  }
+  .record {
+    margin-top: 11px;
+    width: 292px;
+    height: 40px;
+    padding: 0 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    border-radius: 8px;
+  }
+  .table {
+    width: 100%;
+    table {
+      width: 100%;
+      border-collapse: collapse; //取消单元格之间的间距
+      tr {
+        width: 100%;
+        th {
+          background: rgba(236, 157, 99, 0.1);
+          border: 1px solid #e2cfc1;
+          height: 40px;
+        }
+        td {
+          background: #ffffff;
+          border: 1px solid #e2cfc1;
+          height: 64px;
+          text-align: center;
+          input {
+            width: 80%;
+            outline: none;
+            border: none;
+            border-bottom: 1px solid black;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/adultInput.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="Big-Book-container adult-book-input-sty">
+  <div class="Big-Book-container adult-book-input-sty" v-loading="loading">
     <Header />
     <div class="Big-Book-content">
       <div class="content-tree">
@@ -547,7 +547,13 @@
                       :changeCurQue="changeCurQue"
                     />
                   </template>
-                  <template v-else> </template>
+                  <template v-else>
+                    <TableView
+                      :curQue="topicIitem.data"
+                      :type="topicIitem.type"
+                      :fn_data="fn_data"
+                    />
+                  </template>
                 </template>
               </div>
               <div
@@ -712,6 +718,7 @@ import NewordPhraseview from "@/components/Adult/preview/WordPhrase.vue";
 import UploadControlView from "@/components/Adult/preview/UploadControlView.vue";
 import VideoControlView from "@/components/Adult/preview/VideoControl.vue";
 import SentenceSortQP from "@/components/Adult/preview/SentenceSortQP.vue";
+import TableView from "@/components/Adult/preview/TableView.vue";
 
 import DialogueAnswerViewChs from "@/components/Adult/preview/DialogueArticleViewChs/DialogueAnswerViewChs.vue";
 import Preview from "@/components/Adult/Preview.vue";
@@ -778,6 +785,7 @@ export default {
     VideoControlView,
     SentenceSortQP,
     Table,
+    TableView,
   },
   data() {
     return {
@@ -848,6 +856,7 @@ export default {
       tmInde: "",
       FatherTreeData: null,
       themeColor: "", // 主题颜色
+      loading: false,
     };
   },
   computed: {
@@ -1035,6 +1044,8 @@ export default {
     },
     // 当前目录id  name    父级name/当前 name
     changeId(id, name, fatherName) {
+      this.loading = true;
+
       this.TopicIndex = null;
       this.RowIndex = null;
       this.LineIndex = null;
@@ -1055,11 +1066,14 @@ export default {
           if (this.previewVisible) {
             this.onPreview();
           }
+          this.loading = false;
 
           // this.cur_page_que_index =
           //   this.question_list[this.tabIndex].cur_fn_data.length - 1;
         })
-        .catch((error) => {});
+        .catch((error) => {
+          this.loading = false;
+        });
     },
     handleTabsEdit(targetName, action) {
       if (action === "add") {