update richInput.js & done 窑车表

src/components/DialogJustForm.vue

@@ -1,5 +1,11 @@
 <template>
-  <el-dialog class="dialog-just-form" :visible.sync="selfVisible" @closed="resetForm" :distory-on-close="true" :close-on-click-modal="configs.clickModalToClose ?? true">
+  <el-dialog
+    class="dialog-just-form"
+    :visible.sync="selfVisible"
+    @closed="resetForm"
+    :distory-on-close="true"
+    :close-on-click-modal="configs.clickModalToClose ?? true"
+  >
     <!-- title  -->
     <div slot="title" class="dialog-title">
       <h1 class="">
@@ -33,8 +39,15 @@
               :disabled="detailMode"
             />
             <el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
-            <div class="" v-if="col.component" style="margin: 42px 0 0;">
+            <div class="" v-if="col.component" style="margin: 42px 0 0">
-              <component :is="col.component" :key="'component_' + col.prop" />
+              <!-- 下面这个 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>
@@ -67,9 +80,9 @@ export default {
     configs: {
       type: Object,
       default: () => ({
-				clickModalToClose: true,
+        clickModalToClose: true,
-				forms: null
+        forms: null,
-			}),
+      }),
     },
   },
   inject: ["urls"],
@@ -143,6 +156,7 @@ export default {
             if (excludeId && key === "id") return;
             this.dataForm[key] = null;
           });
+          console.log("[Dialog Just Form] cleared form...", this.dataForm);
           this.$refs.dataForm.clearValidate();
         },
         immediate ? 0 : 100
@@ -189,9 +203,16 @@ export default {
       // console.log("[dialog] select change: ", col, eventValue);
       this.$forceUpdate();
     },
+
     handleSwitchChange(val) {
       console.log("[dialog] switch change: ", val, this.dataForm);
     },
+
+    handleComponentModelUpdate(propName, { subject, payload: { data } }) {
+      this.dataForm[propName] = JSON.stringify(data);
+      console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
+    },
+
     handleBtnClick(payload) {
       console.log("btn click payload: ", payload);
 

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: '',
+      Placeholder: '在这里输入描述信息...',
-      ScrollingContainer: null
+      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' } })
   }

src/views/modules/pms/car/config.js

@@ -12,7 +12,7 @@ export default function () {
     { prop: "status", label: "状态", subcomponent: switchBtn }, // subcomponent
     // { prop: "currentQty", label: "载量" },
     // { prop: "currentPos", label: "当前位置" },
-    { prop: "description", label: "描述" },
+    // { prop: "description", label: "描述" },
     { prop: "remark", label: "备注" },
     {
       prop: "operations",