update quill editor

2023-02-08 11:03:26 +08:00
parent 64274e0743
commit 5f84d1da6f
7 changed files with 149 additions and 12 deletions
--- a/src/components/DialogJustForm.vue
+++ b/src/components/DialogJustForm.vue
@@ -56,6 +56,15 @@
              v-bind="col.elparams"
            />

+            <quillEditor
+              v-if="col.richInput"
+              ref="quill-editor"
+              v-model="dataForm[col.prop]"
+              :options="col.quillConfig ?? defaultQuillConfig"
+              style="margin-top: 42px"
+              :disabled="detailMode"
+            />
+
            <div class="" v-if="col.component" style="margin: 42px 0 0">
              <!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO：后续可能会根据业务需求创建新的版本  -->
              <component
@@ -89,6 +98,12 @@ import { pick as __pick } from "@/utils/filters";
 import Cookies from "js-cookie";
 import uploadBtn from "@/components/uploadBtn";

+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+
+import { quillEditor } from "vue-quill-editor";
+
 function reConstructTreeData(listObj) {
  const entry = [];
  Object.keys(listObj).map((key) => {
@@ -110,7 +125,7 @@ function reConstructTreeData(listObj) {

 export default {
  name: "DialogJustForm",
-  components: { uploadBtn },
+  components: { uploadBtn, quillEditor },
  props: {
    configs: {
      type: Object,
@@ -127,10 +142,17 @@ export default {
  inject: ["urls"],
  data() {
    const dataForm = {};
+    const uploadComponentsList = []; // 保存当前窗口里的上传组件的配置信息的引用
+
    this.configs.form.rows.forEach((row) => {
      row.forEach((col) => {
-        if (col.upload) dataForm[col.prop] = col.default ?? [];
-        else dataForm[col.prop] = col.default ?? null;
+        // if (col.upload) dataForm[col.prop] = col.default ?? [];
+        // else dataForm[col.prop] = col.default ?? null;
+        dataForm[col.prop] = col.default ?? null;
+
+        if (col.upload) {
+          uploadComponentsList.push(col);
+        }

        if (col.fetchData)
          col.fetchData().then(({ data: res }) => {
@@ -173,8 +195,31 @@ export default {
      loadingStatus: false,
      dataForm,
      detailMode: false,
-
+      uploadComponentsList,
      baseDialogConfig: null,
+      defaultQuillConfig: {
+        modules: {
+          toolbar: [
+            [{ font: [] }],
+            [{ size: ["small", false, "large", "huge"] }], // custom dropdown
+            ["bold", "italic", "underline", "strike"], // toggled buttons
+            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+            ["blockquote", "code-block"],
+            [{ header: 1 }, { header: 2 }], // custom button values
+            [{ list: "ordered" }, { list: "bullet" }],
+            // [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
+            [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
+            // [{ 'direction': 'rtl' }],                         // text direction
+            // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+            // [{ 'align': [] }],
+            // ['clean']                                         // remove formatting button
+          ],
+        },
+        theme: "snow",
+        readOnly: false,
+        placeholder: "在这里输入描述信息...",
+        scrollingContainer: null,
+      },
    };
  },
  created() {
@@ -241,6 +286,8 @@ export default {
        if (this.dataForm.id) {
          // 如果是编辑
          this.loadingStatus = true;
+
+          // 获取基本信息
          this.$http.get(this.urls.base + `/${this.dataForm.id}`).then(({ data: res }) => {
            if (res && res.code === 0) {
              const dataFormKeys = Object.keys(this.dataForm);
@@ -252,6 +299,21 @@ export default {
            }
            this.loadingStatus = false;
          });
+
+          // 获取文件信息
+          this.uploadComponentsList.forEach((col) => {
+            this.$http
+              .get(col.fetchUrl, {
+                params: {
+                  limit: 999,
+                  page: 1,
+                  [col.paramName]: this.dataForm.id,
+                },
+              })
+              .then(({ data: res }) => {
+                console.log("fetch filelist:", res);
+              });
+          });
        } else {
          // 如果不是编辑
        }
--- a/src/components/DialogWithMenu.vue
+++ b/src/components/DialogWithMenu.vue
@@ -89,6 +89,25 @@
                      :disabled="disableCondition(col.prop)"
                      v-bind="col.elparams"
                    />
+                    <quillEditor
+                      v-if="col.richInput"
+                      ref="quill-editor"
+                      v-model="dataForm[col.prop]"
+                      :options="col.quillConfig ?? defaultQuillConfig"
+                      style="margin-top: 42px"
+                      :disabled="disableCondition(col.prop)"
+                    />
+
+                    <div class="" v-if="col.component" style="margin: 42px 0 0">
+                      <!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO：后续可能会根据业务需求创建新的版本  -->
+                      <component
+                        :is="col.component"
+                        :key="'component_' + col.prop"
+                        @update:modelValue="handleComponentModelUpdate(col.prop, $event)"
+                        :modelValue="dataForm[col.prop]"
+                        :mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create'"
+                      />
+                    </div>
                    <!-- add more...  -->
                  </el-form-item>
                </el-col>
@@ -131,6 +150,12 @@ import { pick as __pick } from "@/utils/filters";
 import SmallDialog from "@/components/SmallDialog.vue";
 import BaseListTable from "@/components/BaseListTable.vue";

+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+import "quill/dist/quill.bubble.css";
+
+import { quillEditor } from "vue-quill-editor";
+
 function reConstructTreeData(listObj) {
  const entry = [];
  Object.keys(listObj).map((key) => {
@@ -152,7 +177,7 @@ function reConstructTreeData(listObj) {

 export default {
  name: "DialogWithMenu",
-  components: { SmallDialog, BaseListTable },
+  components: { SmallDialog, BaseListTable, quillEditor },
  props: {
    configs: {
      type: Object,
@@ -241,6 +266,29 @@ export default {
      subList: [],
      showSubDialog: false,
      disableXXX: false,
+      defaultQuillConfig: {
+        modules: {
+          toolbar: [
+            [{ font: [] }],
+            [{ size: ["small", false, "large", "huge"] }], // custom dropdown
+            ["bold", "italic", "underline", "strike"], // toggled buttons
+            [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+            ["blockquote", "code-block"],
+            [{ header: 1 }, { header: 2 }], // custom button values
+            [{ list: "ordered" }, { list: "bullet" }],
+            // [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
+            [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
+            // [{ 'direction': 'rtl' }],                         // text direction
+            // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+            // [{ 'align': [] }],
+            // ['clean']                                         // remove formatting button
+          ],
+        },
+        theme: "snow",
+        readOnly: false,
+        placeholder: "在这里输入描述信息...",
+        scrollingContainer: null,
+      },
    };
  },
  computed: {
@@ -371,6 +419,10 @@ export default {
      // 出发 upload 界面
    },

+    handleComponentModelUpdate(propName, { subject, payload: { data } }) {
+      this.dataForm[propName] = JSON.stringify(data);
+      console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
+    },
    handleSelectChange(col, eventValue) {
      console.log("[dialog] select change: ", col, eventValue);
    },
--- a/src/components/noTemplateComponents/richInput.js
+++ b/src/components/noTemplateComponents/richInput.js
@@ -10,7 +10,8 @@ export default {
      ReadOnlyMode: false,
      Placeholder: '在这里输入描述信息...',
      ScrollingContainer: null,
-      editor: null
+      editor: null,
+      content: ''
    }
  },
  watch: {
@@ -34,11 +35,15 @@ export default {
      // 只在 mode 不为 create 的时候，才加载数据
      if (val && this.mode !== 'create') {
        // this.mode 会比 modelValue 先获得值
-        this.editor && this.editor.setContents(JSON.parse(val), "user")
+        this.content = JSON.parse(val)
+        this.editor && this.editor.setContents(this.content, "user")
      } else if (val === null || val === undefined) {
        // 当 modelValue 传入空时，清空内容
        this.editor && this.editor.setContents('\n', "user")
      }
+    },
+    content(val) {
+      this.$emit('update:modelValue', { subject: 'richInput', payload: { data: val } })
    }
  },
  mounted() {
@@ -71,7 +76,8 @@ export default {
    })

    this.editor.on('text-change', (delta, oldDelta, source) => {
-      this.$emit('update:modelValue', { subject: 'richInput', payload: { data: this.editor.getContents() } })
+      this.content = this.editor.getContents()
+      // this.$emit('update:modelValue', { subject: 'richInput', payload: { data: this.editor.getContents() } })
    })
  },
  methods: {