表格两种模式合并为一种

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

@@ -10,56 +10,100 @@
           >{{ label }}</a
         >
       </div> -->
-      <template v-if="data.mode === 'short'">
-        <div class="table-rich-toolbar">
-          <el-select v-model="data.styles.fontFamily" placeholder="请选择" style="width: 130px">
-            <el-option v-for="{ value, label } in fontFamilyList" :key="value" :label="label" :value="value" />
-          </el-select>
-          <el-select v-model="data.styles.fontSize" placeholder="请选择" style="width: 130px">
-            <el-option
-              v-for="(value, index) in 16"
-              :key="index"
-              :label="6 + value * 2 + 'pt'"
-              :value="6 + value * 2 + 'pt'"
-            />
-          </el-select>
-          <el-form :model="property" inline>
-            <el-form-item label="文字颜色">
-              <el-color-picker v-model="data.styles.fontColor" />
-            </el-form-item>
-            <el-form-item label="背景色">
-              <el-color-picker v-model="data.styles.bgColor" />
-            </el-form-item>
-          </el-form>
-          <span
-            :class="[data.styles.isUnderline ? 'active' : '']"
-            @click="data.styles.isUnderline = !data.styles.isUnderline"
-          >
-            <SvgIcon icon-class="underline" size="20" />
-          </span>
-          <span :class="[data.styles.isBold ? 'active' : '']" @click="data.styles.isBold = !data.styles.isBold">
-            <SvgIcon icon-class="font-bold" size="20" />
-          </span>
-          <span :class="[data.styles.isItalic ? 'active' : '']" @click="data.styles.isItalic = !data.styles.isItalic">
-            <SvgIcon icon-class="font-italic" size="20" />
-          </span>
-          <span
-            :class="[data.styles.isStrikethrough ? 'active' : '']"
-            @click="data.styles.isStrikethrough = !data.styles.isStrikethrough"
-          >
-            <SvgIcon icon-class="strikethrough" size="20" />
-          </span>
-          <span :class="[data.styles.textAlign === 'start' ? 'active' : '']" @click="data.styles.textAlign = 'start'">
-            <SvgIcon icon-class="align-left" size="20" />
-          </span>
-          <span :class="[data.styles.textAlign === 'center' ? 'active' : '']" @click="data.styles.textAlign = 'center'">
-            <SvgIcon icon-class="align-center" size="20" />
-          </span>
-          <span :class="[data.styles.textAlign === 'end' ? 'active' : '']" @click="data.styles.textAlign = 'end'">
-            <SvgIcon icon-class="align-right" size="20" />
-          </span>
-        </div>
-      </template>
+      <div class="table-rich-toolbar">
+        <el-select
+          v-model="data.styles.fontFamily"
+          placeholder="请选择"
+          style="width: 130px"
+          @change="BatchSetFormat('fontFamily', data.styles.fontFamily)"
+        >
+          <el-option v-for="{ value, label } in fontFamilyList" :key="value" :label="label" :value="value" />
+        </el-select>
+        <el-select
+          v-model="data.styles.fontSize"
+          placeholder="请选择"
+          style="width: 130px"
+          @change="BatchSetFormat('fontSize', data.styles.fontSize)"
+        >
+          <el-option
+            v-for="(value, index) in 16"
+            :key="index"
+            :label="6 + value * 2 + 'pt'"
+            :value="6 + value * 2 + 'pt'"
+          />
+        </el-select>
+        <el-form :model="property" inline>
+          <el-form-item label="文字颜色">
+            <el-color-picker v-model="data.styles.fontColor" @change="BatchSetFormat('color', data.styles.fontColor)" />
+          </el-form-item>
+          <el-form-item label="背景色">
+            <el-color-picker v-model="data.styles.bgColor" />
+          </el-form-item>
+        </el-form>
+        <span
+          :class="[data.styles.isUnderline ? 'active' : '']"
+          @click="
+            data.styles.isUnderline = !data.styles.isUnderline;
+            BatchSetFormat('underline');
+          "
+        >
+          <SvgIcon icon-class="underline" size="20" />
+        </span>
+        <span
+          :class="[data.styles.isBold ? 'active' : '']"
+          @click="
+            data.styles.isBold = !data.styles.isBold;
+            BatchSetFormat('bold');
+          "
+        >
+          <SvgIcon icon-class="font-bold" size="20" />
+        </span>
+        <span
+          :class="[data.styles.isItalic ? 'active' : '']"
+          @click="
+            data.styles.isItalic = !data.styles.isItalic;
+            BatchSetFormat('italic');
+          "
+        >
+          <SvgIcon icon-class="font-italic" size="20" />
+        </span>
+        <span
+          :class="[data.styles.isStrikethrough ? 'active' : '']"
+          @click="
+            data.styles.isStrikethrough = !data.styles.isStrikethrough;
+            BatchSetFormat('strikethrough');
+          "
+        >
+          <SvgIcon icon-class="strikethrough" size="20" />
+        </span>
+        <span
+          :class="[data.styles.textAlign === 'LEFT' ? 'active' : '']"
+          @click="
+            data.styles.textAlign = 'LEFT';
+            BatchSetFormat('align', 'LEFT');
+          "
+        >
+          <SvgIcon icon-class="align-left" size="20" />
+        </span>
+        <span
+          :class="[data.styles.textAlign === 'MIDDLE' ? 'active' : '']"
+          @click="
+            data.styles.textAlign = 'MIDDLE';
+            BatchSetFormat('align', 'MIDDLE');
+          "
+        >
+          <SvgIcon icon-class="align-center" size="20" />
+        </span>
+        <span
+          :class="[data.styles.textAlign === 'RIGHT' ? 'active' : '']"
+          @click="
+            data.styles.textAlign = 'RIGHT';
+            BatchSetFormat('align', 'RIGHT');
+          "
+        >
+          <SvgIcon icon-class="align-right" size="20" />
+        </span>
+      </div>
       <div class="option-list">
         <div v-for="(item, i) in data.option_list" :key="i" class="table-node">
           <div v-for="li in item" :key="li.mark" class="table-item">
@@ -279,8 +323,26 @@ export default {
           });
       },
     },
+    'data.unified_attrib': {
+      handler(val) {
+        if (val) {
+          this.data.styles.fontFamily = this.data?.unified_attrib?.font || '楷体,微软雅黑';
+          this.data.styles.fontSize = this.data?.unified_attrib?.font_size || '12pt';
+          this.data.styles.fontColor = this.data?.unified_attrib?.text_color || '#1d2129';
+          this.data.styles.textAlign = this.data?.unified_attrib?.align || 'LEFT';
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   methods: {
+    // 设置样式
+    BatchSetFormat(type, val = '') {
+      this.$refs.richText.forEach((richText) => {
+        richText.setRichFormat(type, val);
+      });
+    },
     // 识别文本
     identifyText() {
       let text = '';

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

@@ -50,7 +50,7 @@
                       ? data.property.first_line_color
                       : j === 0
                         ? data.property.first_column_color
-                        : data.mode === 'short' && data.styles.bgColor
+                        : data.styles.bgColor
                           ? data.styles.bgColor
                           : '',
                 }"
@@ -285,7 +285,7 @@
                         ? data.property.first_line_color
                         : j === 0
                           ? data.property.first_column_color
-                          : data.mode === 'short' && data.styles.bgColor
+                          : data.styles.bgColor
                             ? data.styles.bgColor
                             : '',
                   }"
@@ -511,23 +511,23 @@ export default {
   computed: {
     tdStyle() {
       let obj = {};
-      if (this.data.mode === 'short') {
-        let styles = this.data.styles;
-        obj = {
-          fontFamily: styles.fontFamily,
-          fontSize: styles.fontSize,
-          color: styles.fontColor,
-          textDecoration: styles.isUnderline ? 'underline' : styles.isStrikethrough ? 'line-through' : '',
-          fontWeight: styles.isBold ? 'bold' : '',
-          fontStyle: styles.isItalic ? 'italic' : '',
-          justifyContent: styles.textAlign,
-          textAlign: styles.textAlign,
-        };
-      } else {
-        obj = {
-          width: '100%',
-        };
-      }
+      // if (this.data.mode === 'short') {
+      let styles = this.data.styles;
+      obj = {
+        fontFamily: styles.fontFamily,
+        fontSize: styles.fontSize,
+        color: styles.fontColor,
+        textDecoration: styles.isUnderline ? 'underline' : styles.isStrikethrough ? 'line-through' : '',
+        fontWeight: styles.isBold ? 'bold' : '',
+        fontStyle: styles.isItalic ? 'italic' : '',
+        justifyContent: styles.textAlign === 'MIDDLE' ? 'center' : styles.textAlign === 'RIGHT' ? 'end' : 'left',
+        textAlign: styles.textAlign === 'MIDDLE' ? 'center' : styles.textAlign === 'RIGHT' ? 'end' : 'left',
+      };
+      // } else {
+      //   obj = {
+      //     width: '100%',
+      //   };
+      // }
       return obj;
     },
   },
@@ -657,7 +657,7 @@ export default {
       this.writeMark = mark;
     },
     computedRichStyle(content) {
-      if (this.data.mode === 'short') return {};
+      // if (this.data.mode === 'short') return {};
       if (!content) return {};
       // 提取首个标签的 style 样式属性
       let styleMatch = content.match(/<\w+\s+[^>]*style=["']([^"']*)["'][^>]*>/i);
@@ -794,7 +794,7 @@ $border-color: #e6e6e6;
           // font-size: 16pt;
           color: $font-color;
           text-align: center;
-          background-color: #fff;
+          background-color: transparent;
           border-width: 0;
           border-bottom: 1px solid $font-color;
           border-radius: 0;