富文本编辑器，内容类型切换，结果类型切换，清空数据

src/components/knowledgeExtra/AddAssess/index.vue

@@ -29,6 +29,42 @@
     font-size: 12px;
     color: red;
   }
+  .change_table_btns {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 10px;
+    box-sizing: border-box;
+    border-top: 10px solid #dee2ea;
+  }
+  .rich_text {
+    padding: 0 10px;
+  }
+}
+.rich_text {
+}
+.quill-editor.ql-editor {
+  padding-left: 0 !important;
+}
+/**富文本编辑器样式修改***/
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before,
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+it .ql-editor,
+.quill-editor {
+  padding-top: 0px !important;
+  margin-top: -8px;
+  min-height: 48px;
+  p {
+    padding-top: 8px;
+  }
+}
+.ql-editor.ql-blank::before {
+  padding-top: 0px;
+}
+.btns {
+  margin-top: 20px;
 }
 </style>  
 <template>
@@ -47,7 +83,11 @@
             </el-form-item>
             <div style="margin: 0 20px">
               <el-form-item label="内容类型：" label-width="100px">
-                <el-select v-model="table.textType" placeholder="请选择">
+                <el-select
+                  v-model="table.textType"
+                  placeholder="请选择"
+                  @change="initializationTableData($event, tableIndex)"
+                >
                   <el-option label="问题选项" :value="11"> </el-option>
                   <el-option label="概述文本" :value="12"> </el-option>
                 </el-select>
@@ -59,7 +99,10 @@
 
             <div v-if="table.textType === 11">
               <el-form-item label="结果类型：" label-width="100px">
-                <el-radio-group v-model="table.resultType">
+                <el-radio-group
+                  v-model="table.resultType"
+                  @change="initializationTableData($event, tableIndex)"
+                >
                   <el-radio :label="1">直接结果</el-radio>
                   <el-radio :label="2">记分结果</el-radio>
                 </el-radio-group>
@@ -70,12 +113,12 @@
             </div>
             <div v-if="table.resultType === 2 && table.textType === 11">
               <el-form-item label="系数：" label-width="100px">
-                <el-input v-model.trim="table.content" />
+                <el-input v-model.trim="table.factor" />
               </el-form-item>
             </div>
             <div v-if="table.resultType === 2 && table.textType === 11">
               <el-form-item label="常数：" label-width="100px">
-                <el-input v-model.trim="table.content" />
+                <el-input v-model.trim="table.constant" />
               </el-form-item>
             </div>
           </div>
@@ -102,9 +145,41 @@
           :tableResultType="table.resultType"
           @CHANGE_FORM_DATA="CHANGE_FORM_DATA"
           @CHANGE_TABLE_ROW="CHANGE_TABLE_ROW"
-          @CHANGE_TABLE="CHANGE_TABLE"
         />
-        <RichText v-if="table.textType === 12" />
+        <div class="rich_text" v-if="table.textType === 12">
+          <el-form-item
+            label="概述："
+            prop="content"
+            label-width="100px"
+            ref="editor"
+          >
+            <quillEditor
+              v-model="table.klScaleSaveGroup[0].content"
+              :options="editorOption"
+              class="ql-editor"
+              ref="quillEditor"
+            ></quillEditor>
+          </el-form-item>
+        </div>
+        <div class="change_table_btns">
+          <el-button
+            icon="el-icon-minus"
+            style="margin-left: 10px"
+            size="small"
+            type="danger"
+            plain
+            @click="CHANGE_TABLE({ tableIndex, type: -1 })"
+            >删除标题</el-button
+          >
+          <el-button
+            @click="CHANGE_TABLE({ tableIndex, type: 1 })"
+            icon="el-icon-plus"
+            size="small"
+            type="success"
+            plain
+            >新增标题</el-button
+          >
+        </div>
       </div>
     </el-form>
   </div>
@@ -112,63 +187,47 @@
 
 <script>
 import ScaleTable from "./scale-table.vue";
-import RichText from "./rich-text.vue";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+import { quillEditor, Quill } from "vue-quill-editor";
+import config from "@api/config";
+import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
+Quill.register("modules/ImageExtend", ImageExtend);
 const defaultDate = {
-  groupId: "0",
-  issueId: "0-0",
-  two_constant: "two-常数",
-  two_content: "two-问题内容",
-  two_factor: "two-系数",
+  groupId: "",
+  issueId: "",
+  two_constant: "",
+  two_content: "",
+  two_factor: "",
   two_orderNo: 0,
-  two_remark: "string",
+  two_remark: "",
   two_resultType: 0,
-  two_ruleCode: "string",
+  two_ruleCode: "",
   two_score: 0,
-  two_selectType: "选择类型(1单选2多选)",
+  two_selectType: 1,
   two_status: 0,
   two_textType: 0,
-  content: "选项内容",
+  content: "",
   orderNo: 0,
-  pushInfo: "建议",
-  remark: "string",
-  result: "结果",
-  ruleCode: "string",
+  pushInfo: "",
+  remark: "",
+  result: "",
+  ruleCode: "",
   score: 0,
   status: 0,
-  textType: 0
+  textType: 11
 };
 const defaultTable = {
   constant: 0,
-  content: "string",
+  content: "",
   factor: 0,
   klScaleSaveGroup: [
     {
-      groupId: "1",
-      issueId: "1-1",
-      two_constant: "two-常数",
-      two_content: "two-问题内容",
-      two_factor: "two-系数",
-      two_orderNo: 0,
-      two_remark: "string",
-      two_resultType: 0,
-      two_ruleCode: "string",
-      two_score: 0,
-      two_selectType: "选择类型(1单选2多选)",
-      two_status: 0,
-      two_textType: 0,
-      content: "选项内容",
-      orderNo: 0,
-      pushInfo: "建议",
-      remark: "string",
-      result: "结果",
-      ruleCode: "string",
-      score: 0,
-      status: 0,
-      textType: 0
+      ...defaultDate
     }
   ],
   orderNo: 0,
-
   remark: "string",
   resultType: 1,
   ruleCode: "string",
@@ -177,7 +236,7 @@ const defaultTable = {
   textType: 0
 };
 export default {
-  components: { ScaleTable, RichText },
+  components: { ScaleTable, quillEditor },
   data() {
     return {
       scaleData: {
@@ -185,29 +244,29 @@ export default {
         klScaleParent: [
           {
             constant: 0,
-            content: "string",
+            content: "",
             factor: 0,
             klScaleSaveGroup: [
               {
-                groupId: "1",
-                issueId: "1-1",
-                two_constant: "two-常数",
-                two_content: "two-问题内容",
-                two_factor: "two-系数",
+                groupId: 0,
+                issueId: 0,
+                two_constant: "",
+                two_content: "",
+                two_factor: "",
                 two_orderNo: 0,
-                two_remark: "string",
+                two_remark: "",
                 two_resultType: 0,
-                two_ruleCode: "string",
+                two_ruleCode: "",
                 two_score: 0,
-                two_selectType: "选择类型(1单选2多选)",
+                two_selectType: 1,
                 two_status: 0,
                 two_textType: 0,
-                content: "选项内容",
+                content: "",
                 orderNo: 0,
-                pushInfo: "建议",
-                remark: "string",
-                result: "结果",
-                ruleCode: "string",
+                pushInfo: "",
+                remark: "",
+                result: "",
+                ruleCode: "",
                 score: 0,
                 status: 0,
                 textType: 0
@@ -223,7 +282,54 @@ export default {
           }
         ],
         modifier: "string"
-      }
+      },
+      toolbars: [
+        [
+          ["bold", "underline", "strike"],
+          [{ list: "ordered" }, { list: "bullet" }],
+          [{ script: "sub" }, { script: "super" }],
+          [{ color: [] }, { background: [] }],
+          [{ align: [] }],
+          ["image"]
+        ]
+      ],
+      editorOption: {
+        modules: {
+          ImageExtend: {
+            loading: true,
+            name: "upfile",
+            size: 1,
+            sizeError: () => {
+              this.$message({
+                showClose: true,
+                message: "请上传 1M 以内的图片！",
+                type: "warning"
+              });
+            },
+            action: config.urls.promptServer,
+            response: (res) => {
+              if (res.code == "0") {
+                return config.imgHost + res.data.url;
+              } else {
+                this.$message({
+                  showClose: true,
+                  message: res.msg,
+                  type: "warning"
+                });
+              }
+            }
+          },
+          toolbar: {
+            container: container,
+            handlers: {
+              image: function () {
+                QuillWatch.emit(this.quill.id);
+              }
+            }
+          }
+        }
+      },
+      toolbarMode: 0
     };
   },
   methods: {
@@ -368,6 +474,13 @@ export default {
         name,
         val
       );
+    },
+    // 清空选项
+    initializationTableData(e, tableIndex) {
+      console.log(this.scaleData.klScaleParent[tableIndex].klScaleSaveGroup);
+      this.$set(this.scaleData.klScaleParent[tableIndex], "klScaleSaveGroup", [
+        { ...defaultDate }
+      ]);
     }
   },
   watch: {
@@ -377,6 +490,10 @@ export default {
       },
       deep: true
     }
+  },
+  created() {
+    this.editorOption.modules.toolbar.container =
+      this.toolbars[this.toolbarMode];
   }
 };
 </script>

src/components/knowledgeExtra/AddAssess/rich-text.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="rich_text">
-    <el-form-item label="内容" prop="content" label-width="160px" ref="editor">
-      <quillEditor
-        v-model="data.content"
-        :options="editorOption"
-        class="ql-editor"
-        ref="quillEditor"
-      ></quillEditor>
-    </el-form-item>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "rich-text "
-};
-</script>
-
-<style lang="less" scoped>
-.rich_text {
-}
-.quill-editor.ql-editor {
-  padding-left: 0 !important;
-}
-/**富文本编辑器样式修改***/
-.ql-snow .ql-picker.ql-size .ql-picker-label::before,
-.ql-snow .ql-picker.ql-size .ql-picker-item::before,
-.ql-snow .ql-picker.ql-header .ql-picker-label::before,
-it .ql-editor,
-.quill-editor {
-  padding-top: 0px !important;
-  margin-top: -8px;
-  min-height: 48px;
-  p {
-    padding-top: 8px;
-  }
-}
-.ql-editor.ql-blank::before {
-  padding-top: 0px;
-}
-.btns {
-  margin-top: 20px;
-}
-</style>

src/components/knowledgeExtra/AddAssess/scale-table.vue

@@ -39,15 +39,6 @@
   /deep/.el-table th {
     padding: 2px 0;
   }
-  .change_table_btns {
-    width: 100%;
-    margin-top: 20px;
-    display: flex;
-    flex-direction: row-reverse;
-    padding: 10px;
-    box-sizing: border-box;
-    border-top: 10px solid #dee2ea;
-  }
 }
 </style>
 <template>
@@ -309,26 +300,6 @@
         </el-table-column>
       </el-table>
     </div>
-
-    <div class="change_table_btns">
-      <el-button
-        icon="el-icon-minus"
-        style="margin-left: 10px"
-        size="small"
-        type="danger"
-        plain
-        @click="$emit('CHANGE_TABLE', { tableIndex, type: -1 })"
-        >删除标题</el-button
-      >
-      <el-button
-        @click="$emit('CHANGE_TABLE', { tableIndex, type: 1 })"
-        icon="el-icon-plus"
-        size="small"
-        type="success"
-        plain
-        >新增标题</el-button
-      >
-    </div>
   </div>
 </template>
 
@@ -354,7 +325,8 @@ export default {
     },
     // 计算表格选项内容的值
     optionLength(val) {
-      if (val) {
+      console.log("console.log();", val);
+      if (val || val === 0) {
         const accordWithThis = this.tableData.filter(
           (item) => item.issueId === val
         );