表格支持单元格单独设置背景色

src/views/book/courseware/create/components/question/table/Table.vue

@@ -121,6 +121,7 @@
               @handleRichTextBlur="handleBlurCon"
             />
             <el-input v-else v-model="li.content" @blur="handleBlurCon" />
+            <el-button size="mini" @click="editCell(li.cell)">配置</el-button>
           </div>
         </div>
         <div class="table-node">
@@ -150,6 +151,17 @@
           <div v-for="(item, i) in data.answer_lists" :key="i" class="table-node">
             <div v-for="(li, j) in item" :key="i + 'col' + j" class="table-item">
               <el-input v-model="li.answer" type="textarea" :readonly="!data.option_list[i][j].hasInput" />
+              <span
+                v-if="data.option_list[i][j].cell.isCross"
+                style="display: flex; align-items: center; font-size: 14px"
+                >勾叉答案<i
+                  @click="toggle(li)"
+                  :class="[
+                    { 'el-icon-check': li.crossAnswer === statusList[1] },
+                    { 'el-icon-close': li.crossAnswer === statusList[2] },
+                  ]"
+                  style="display: block; width: 14px; height: 14px; border: 1px solid #000"
+              /></span>
             </div>
           </div>
         </div>
@@ -190,6 +202,33 @@
         :font-family="data?.unified_attrib?.font"
         @fillCorrectPinyin="fillCorrectPinyin"
       />
+      <el-dialog
+        title="配置单元格"
+        :visible="editCellFlag"
+        width="460px"
+        :close-on-click-modal="false"
+        v-if="editCellFlag"
+        @close="editCellFlag = false"
+      >
+        <el-form :model="activeCell" :inline="true">
+          <el-form-item label="背景色">
+            <el-color-picker v-model="activeCell.bgColor" />
+          </el-form-item>
+          <el-form-item label="勾叉">
+            <el-switch v-model="activeCell.isCross" />
+          </el-form-item>
+          <el-form-item label="合并行">
+            <el-input v-model="activeCell.rowspan" class="rowspan" type="number" />
+          </el-form-item>
+          <el-form-item label="合并列">
+            <el-input v-model="activeCell.colspan" class="colspan" type="number" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer">
+          <el-button @click="editCellFlag = false">取消</el-button>
+          <el-button type="primary" @click="editCellFlag = false">确定</el-button>
+        </div>
+      </el-dialog>
     </template>
   </ModuleBase>
 </template>
@@ -227,6 +266,9 @@ export default {
       isViewExplanatoryNoteDialog: false,
       oldRichData: {},
       fillTypeList,
+      activeCell: null,
+      editCellFlag: false,
+      statusList: ['normal', 'tick', 'cross'],
     };
   },
   watch: {
@@ -346,6 +388,14 @@ export default {
     },
   },
   methods: {
+    toggle(status) {
+      const index = this.statusList.findIndex((item) => status.crossAnswer === item);
+      status.crossAnswer = index === this.statusList.length - 1 ? this.statusList[0] : this.statusList[index + 1];
+    },
+    editCell(cell) {
+      this.activeCell = cell;
+      this.editCellFlag = true;
+    },
     // 设置样式
     BatchSetFormat(type, val = '') {
       this.$refs.richText.forEach((richText) => {

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

@@ -62,6 +62,13 @@ export function getOption() {
     content: '',
     mark: getRandomNumber(),
     model_essay: [],
+    
+    cell: {
+      bgColor: '',
+      isCross: false,
+      rowspan: 1,
+      colspan: 1,
+    }
   };
 }
 
@@ -69,6 +76,7 @@ export function getAnswerOption() {
   return {
     answer: '',
     answer_list: [],
+    crossAnswer:'normal'
   };
 }
 

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -41,11 +41,13 @@
                           (data.property.decoration_color ? data.property.decoration_color : data.property.border_color)
                         : '1px dotted ' + data.property.border_color,
                   borderRadius: i === 0 && data.property.first_line_color ? '4px ' : '0',
-                  background: data.cols_bg_list[j]
-                    ? data.cols_bg_list[j]
-                    : data.rows_bg_list[i]
-                      ? data.rows_bg_list[i]
-                      : '',
+                  background: col.cell.bgColor
+                    ? col.cell.bgColor
+                    : data.cols_bg_list[j]
+                      ? data.cols_bg_list[j]
+                      : data.rows_bg_list[i]
+                        ? data.rows_bg_list[i]
+                        : '',
                   height: data.property.height + 'px',
                 }"
               >
@@ -272,11 +274,13 @@
                               : data.property.border_color)
                           : '1px dotted ' + data.property.border_color,
                     borderRadius: i === 0 && data.property.first_line_color ? '4px ' : '0',
-                    background: data.cols_bg_list[j]
-                      ? data.cols_bg_list[j]
-                      : data.rows_bg_list[i]
-                        ? data.rows_bg_list[i]
-                        : '',
+                    background: col.cell.bgColor
+                      ? col.cell.bgColor
+                      : data.cols_bg_list[j]
+                        ? data.cols_bg_list[j]
+                        : data.rows_bg_list[i]
+                          ? data.rows_bg_list[i]
+                          : '',
                     height: data.property.height + 'px',
                   }"
                 >

src/views/personal_workbench/template_list/index.vue

@@ -9,11 +9,11 @@
             <el-input v-model="form.name" />
           </el-form-item>
 
-          <el-form-item prop="status" label="状态">
+          <!-- <el-form-item prop="status" label="状态">
             <el-select v-model="form.status">
               <el-option v-for="item in status_list" :key="item.value" :value="item.value" :label="item.label" />
             </el-select>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item class="search-box">
             <el-button class="search-btn" type="primary" @click="queryList">查询</el-button>
           </el-form-item>

src/views/personal_workbench/template_list_manager/index.vue

@@ -7,11 +7,11 @@
             <el-input v-model="form.name" />
           </el-form-item>
 
-          <el-form-item prop="status" label="状态">
+          <!-- <el-form-item prop="status" label="状态">
             <el-select v-model="form.status">
               <el-option v-for="item in status_list" :key="item.value" :value="item.value" :label="item.label" />
             </el-select>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item class="search-box">
             <el-button class="search-btn" type="primary" @click="queryList">查询</el-button>
           </el-form-item>

src/views/personal_workbench/template_list_org/index.vue

@@ -7,11 +7,11 @@
             <el-input v-model="form.name" />
           </el-form-item>
 
-          <el-form-item prop="status" label="状态">
+          <!-- <el-form-item prop="status" label="状态">
             <el-select v-model="form.status">
               <el-option v-for="item in status_list" :key="item.value" :value="item.value" :label="item.label" />
             </el-select>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item class="search-box">
             <el-button class="search-btn" type="primary" @click="queryList">查询</el-button>
           </el-form-item>