update quill editor

package.json

@@ -32,6 +32,7 @@
     "vue": "^2.6.11",
     "vue-cron": "^1.0.9",
     "vue-i18n": "^8.18.2",
+    "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.7",
     "vuex": "^3.5.1"
   },

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 {
           // 如果不是编辑
         }

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);
     },

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: {

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

@@ -9,7 +9,7 @@ export default function () {
     { prop: "name", label: "窑车号" },
     { prop: "code", label: "编码" },
     // { prop: "typeDictValue", label: "过渡车", filter: val => ['否', '是'][val] },
-    { prop: "status", label: "状态", subcomponent: switchBtn }, // subcomponent
+    { prop: "enabled", label: "状态", subcomponent: switchBtn }, // subcomponent
     // { prop: "currentQty", label: "载量" },
     // { prop: "currentPos", label: "当前位置" },
     // { prop: "description", label: "描述" },
@@ -78,7 +78,10 @@ export default function () {
             elparams: { placeholder: "请输入料仓编码" },
           },
         ],
-        [{ component: QuillRichInput, label: "描述信息", prop: "description" }],
+        // [{ component: QuillRichInput, label: "描述信息", prop: "description" }],
+        [{
+          richInput: true, label: "描述信息", prop: "description"
+        }],
         [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
       ],
       operations: [

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

@@ -2,7 +2,7 @@ import TableOperaionComponent from '@/components/noTemplateComponents/operationC
 import TableTextComponent from '@/components/noTemplateComponents/detailComponent'
 import switchBtn from '@/components/noTemplateComponents/switchBtn'
 import { timeFilter } from '@/utils/filters'
-
+import QuillRichInput from "@/components/noTemplateComponents/richInput";
 
 export default function () {
 
@@ -72,6 +72,10 @@ export default function () {
             elparams: { placeholder: '选择一个设备类型' }
           },
         ],
+        [{
+          richInput: true, label: "描述信息", prop: "description"
+        }],
+        // [{ component: QuillRichInput, label: "描述信息", prop: "description" }],
         [{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }],
       ],
       operations: [

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

@@ -95,7 +95,16 @@ export default function () {
         ],
         // [{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
         [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
-        [{ upload: true, actionUrl: window.SITE_CONFIG['apiURL'] + '/pms/attachment/uploadFileFormData?typeCode=equipmentType', label: "上传资料", fileList: [], prop: "upload", elparams: null }],
+        [{
+          upload: true,
+          actionUrl: window.SITE_CONFIG['apiURL'] + '/pms/attachment/uploadFileFormData?typeCode=equipmentType',
+          fetchUrl: '/pms/equipmentTypeFile/page',
+          label: "上传资料",
+          fileList: [],
+          prop: "upload",
+          paramName: 'equipmentTypeId',
+          elparams: null
+        }],
       ],
       operations: [
         { name: "add", label: "保存", type: "primary", permission: "pms:equipmentType:save", showOnEdit: false },