update quill editor

2023-02-08 11:03:26 +08:00 · 2023-02-08 11:03:26 +08:00 · 5f84d1da6f
--- a/package.json
+++ b/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"
  },
--- 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: {
--- a/src/views/modules/pms/car/config.js
+++ b/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: [
--- a/src/views/modules/pms/equipment/config.js
+++ b/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: [
--- a/src/views/modules/pms/equipmentType/config.js
+++ b/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 },