update richInput.js & done 窑车表

src/components/noTemplateComponents/richInput.js

@@ -4,13 +4,13 @@ import 'quill/dist/quill.snow.css'
 // 富文本组件
 export default {
   name: 'QuillRichInput',
-  props: ['readonly', 'placeholder', 'scroll']
-  ,
+  props: ['readonly', 'placeholder', 'scroll', 'modelValue', 'mode'],
   data() {
     return {
       ReadOnlyMode: false,
-      Placeholder: '',
-      ScrollingContainer: null
+      Placeholder: '在这里输入描述信息...',
+      ScrollingContainer: null,
+      editor: null
     }
   },
   watch: {
@@ -18,14 +18,30 @@ export default {
       this.ReadOnlyMode = val
     },
     placeholder(val) {
-      this.Placeholder = val
+      if (val) this.Placeholder = val
     },
     scroll(val) {
       this.ScrollingContainer = val
+    },
+    // modelValue(val) {
+    //   // 这样不行，会导致编辑时富文本内容是反过来的...
+    //   console.log('[modelValue] val is: ', val)
+    //   this.editor && this.editor.setContents(JSON.parse(val), "user")
+    // }
+    modelValue(val) {
+      // 如果 mode 是 detail 就不允许编辑
+      if (this.mode === 'detail') this.editor && this.editor.enable(false)
+      // 只在 mode 不为 create 的时候，才加载数据
+      if (val && this.mode !== 'create') {
+        // this.mode 会比 modelValue 先获得值
+        this.editor && this.editor.setContents(JSON.parse(val), "user")
+      } else if (val === null || val === undefined) {
+        // 当 modelValue 传入空时，清空内容
+        this.editor && this.editor.setContents('\n', "user")
+      }
     }
   },
   mounted() {
-    console.log('[Quill Editor] ref:', this.$refs['quill-editor'])
     /** https://blog.csdn.net/qq_36947168/article/details/119486710 */
     /** https://quilljs.com/docs/modules/toolbar/ */
     const toolbarOptions = [
@@ -35,16 +51,16 @@ export default {
       [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
       ['blockquote', 'code-block'],
       [{ 'header': 1 }, { 'header': 2 }],               // custom button values
-      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
       // [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
-      [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
+      [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
       [{ 'direction': 'rtl' }],                         // text direction
       // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
       [{ 'align': [] }],
       // ['clean']                                         // remove formatting button
     ];
-    // const editor = new Quill(this.$refs['quill-editor'], this.defaultConfig)
-    const editor = new Quill(this.$refs['quill-editor'], {
+
+    this.editor = new Quill(this.$refs['quill-editor'], {
       modules: {
         toolbar: toolbarOptions
       },
@@ -53,8 +69,13 @@ export default {
       placeholder: this.Placeholder,
       scrollingContainer: this.ScrollingContainer
     })
+
+    this.editor.on('text-change', (delta, oldDelta, source) => {
+      this.$emit('update:modelValue', { subject: 'richInput', payload: { data: this.editor.getContents() } })
+    })
+  },
+  methods: {
   },
-  methods: {},
   render: function (h) {
     return h('div', { ref: 'quill-editor', domProps: { id: 'quill-editor' } })
   }