update

src/components/Adult/Preview.vue

@@ -325,7 +325,15 @@
                   />
                 </template>
                 <template v-if="itemss.type === 'fill_drag'">
-                  <FillDrag
+                  <fill-drag
+                    v-if="refresh"
+                    :cur-que="itemss.data"
+                    :theme-color="themeColor"
+                    :task-model="TaskModel"
+                  />
+                </template>
+                <template v-if="itemss.type === 'config_table'">
+                  <configurable-table
                     v-if="refresh"
                     :cur-que="itemss.data"
                     :theme-color="themeColor"
@@ -545,8 +553,9 @@ import SentenceListenRead from "./preview/SentenceListenRead.vue"; // 听并朗
 import SentenceSortQP from "./preview/SentenceSortQP.vue"; // 句子拖拽排序
 import Checkbox from "./preview/CheckBoxModule.vue"; // 问卷调查-多选题
 import VoiceMatrix from "./preview/VoiceMatrix.vue"; // 语音矩阵
-import SelectDrag from './preview/SelectDrag.vue'; // 选择 -> 拖拽
-import FillDrag from './preview/FillDrag.vue'; // 填空 -> 拖拽
+import SelectDrag from "./preview/SelectDrag.vue"; // 选择 -> 拖拽
+import FillDrag from "./preview/FillDrag.vue"; // 填空 -> 拖拽
+import ConfigurableTable from "./preview/ConfigurableTable.vue"; // 可配置表格
 import RecordModule from "./preview/RecordModule.vue"; // 录音组件
 import UploadControlView from "./preview/UploadControlView.vue"; // 预览控件
 import DialogueAnswerViewChs from "./preview/DialogueArticleViewChs/DialogueAnswerViewChs.vue"; // 文章模板
@@ -585,6 +594,7 @@ export default {
     VoiceMatrix,
     FillDrag,
     SelectDrag,
+    ConfigurableTable,
     RecordModule,
     UploadControlView,
     DialogueAnswerViewChs,

src/components/Adult/common/data.js

@@ -75,10 +75,10 @@ let fnData = [
     type: "fill_drag",
     name: "填空-拖拽"
   },
-  {
-    type: 'config_table',
-    name: '可配置表格'
-  },
+  // {
+  //   type: 'config_table',
+  //   name: '可配置表格'
+  // },
   //  {
   //     type: "divider",
   //     name: "分割线",

src/components/Adult/inputModules/ConfigurableTable.vue

@@ -1,10 +1,78 @@
 <!-- 可配置表格 -->
 <template>
   <div class="config-table">
-    <div>
-      <el-input v-model="curQue.val" />
+    <div class="config-table-options">
+      <div>
+        表格阴影：
+        <el-radio v-model="curQue.isShadow" :label="true">有</el-radio>
+        <el-radio v-model="curQue.isShadow" :label="false">无</el-radio>
+      </div>
+      <div>
+        表格标题：
+        <el-radio v-model="curQue.isTitle" :label="true">有</el-radio>
+        <el-radio v-model="curQue.isTitle" :label="false">无</el-radio>
+        <el-input v-show="curQue.isTitle" v-model="curQue.title" type="text" />
+      </div>
+      <div>
+        表头行背景色：
+        <el-color-picker
+          v-model="curQue.headerBgColor"
+          size="mini"
+          :predefine="predefineColors"
+        />
+      </div>
+      <div>
+        内容对齐方式：
+        <el-radio v-model="curQue.textAlign" label="left">左对齐</el-radio>
+        <el-radio v-model="curQue.textAlign" label="center">居中</el-radio>
+        <el-radio v-model="curQue.textAlign" label="right">右对齐</el-radio>
+      </div>
+      <div>
+        外层边框突出显示：
+        <el-radio v-model="curQue.isTitle" :label="true">是</el-radio>
+        <el-radio v-model="curQue.isTitle" :label="false">否</el-radio>
+      </div>
+      <div>
+        <el-button>增加一行表头</el-button>
+        <el-button>增加一列</el-button>
+        <el-button>增加一行</el-button>
+      </div>
+    </div>
+    <div class="config-table-preview">
+      <table class="preview-table">
+        <caption v-if="curQue.isTitle">
+          {{
+            curQue.title
+          }}
+        </caption>
+        <thead>
+          <tr v-for="(item, i) in curQue.tableData.headers" :key="i">
+            <th v-for="(header, j) in item.content" :key="j">
+              {{ header.text }}
+            </th>
+            <th>
+              <el-switch v-model="item.isMerge" active-text="合并" />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(row, i) in curQue.tableData.body"
+            :key="`row-${i}`"
+          >
+            <td v-for="(col, j) in row.content" :key="`col-${j}`">
+              <el-button size="mini">编辑</el-button>
+            </td>
+            <td>
+              <el-button size="mini">删除</el-button>
+              <el-input v-model.number="row.width">
+                <template slot="prepend">宽度</template>
+              </el-input>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-    <div />
   </div>
 </template>
 
@@ -15,10 +83,40 @@ export default {
       type: Object,
       default: () => {
         return {
+          isFirst: true,
           type: "config_table",
           name: "可配置表格",
-          val: "",
-          isFirst: true
+          isShadow: false,
+          isTitle: false,
+          title: "",
+          textAlign: "center",
+          headerBgColor: "#fff",
+          tableData: {
+            headers: [
+              {
+                isMerge: false,
+                content: [
+                  {
+                    text: "apple"
+                  },
+                  {
+                    text: "table"
+                  }
+                ]
+              },
+              {
+                isMerge: true,
+                content: [{ text: "banner" }, { text: "text" }]
+              }
+            ],
+            body: [
+              {
+                width: 100,
+                content: [{ text: 1 }, { text: 2 }]
+              },
+              { width: 100, content: [{ text: 3 }, { text: 4 }] }
+            ]
+          }
         };
       }
     },
@@ -28,7 +126,9 @@ export default {
     }
   },
   data() {
-    return {};
+    return {
+      predefineColors: ["#f6d5a4", "#efeff9", "#e2e1c8"]
+    };
   },
   created() {
     if (this.curQue.isFirst) {
@@ -40,4 +140,38 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.config-table {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 8px 12px;
+
+  &-options {
+    > div {
+      margin-bottom: 12px;
+    }
+  }
+
+  &-preview {
+    border-top: 1px solid #ccc;
+    padding-top: 12px;
+
+    .preview-table {
+      border-collapse: collapse;
+
+      td,
+      th {
+        padding: 8px;
+      }
+
+      td {
+        border: 1px solid #aaa;
+      }
+
+      th {
+        border: 1px solid #aaa;
+      }
+    }
+  }
+}
+</style>

src/components/Adult/preview/ConfigurableTable.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="config-table">
+    <table
+      :style="{
+        'box-shadow': `${
+          curQue.isShadow ? '4px 4px 4px rgba(0, 0, 0, 0.3)' : ''
+        }`
+      }"
+    >
+      <caption v-if="curQue.isTitle">
+        {{
+          curQue.title
+        }}
+      </caption>
+
+      <thead>
+        <tr
+          v-for="(header, i) in curQue.tableData.headers"
+          :key="`thead-${i}`"
+          :style="{
+            'background-color': `${curQue.headerBgColor}`
+          }"
+        >
+          <template v-if="header.isMerge">
+            <th :colspan="header.content.length">
+              <span v-for="(item, j) in header.content" :key="`th-${i}-${j}`">
+                {{ item.text }}
+              </span>
+            </th>
+          </template>
+          <template v-else>
+            <th v-for="(item, j) in header.content" :key="`th-${i}-${j}`">
+              {{ item.text }}
+            </th>
+          </template>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="(data, i) in curQue.tableData.body" :key="`tr-${i}`">
+          <td v-for="(item, j) in data" :key="`td-${i}-${j}`">
+            {{ item.text }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    curQue: {
+      type: Object,
+      required: true
+    },
+    themeColor: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.config-table {
+  width: 100%;
+
+  table {
+    font-size: 16px;
+    color: #404040;
+    border-collapse: collapse;
+
+    caption {
+      font-size: 20px;
+      color: #000;
+      font-weight: bold;
+      line-height: 1.95;
+    }
+
+    th,
+    td {
+      border: 1px solid #e6e6e6;
+      padding: 8px 12px;
+    }
+  }
+}
+</style>