Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue

@@ -1,5 +1,5 @@
<template>
  <div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid">
  <div :id="'UI-dynamic-'+areasName+componentVO.oid" class="UI-dynamic">
    <avue-form v-model="form" :option="option">
      <template v-for="item in slotData" :slot="item.prop + 'Label'">
        <span>
@@ -16,13 +16,13 @@
        </span>
      </template>
      <template slot="menuForm">
        <dynamic-button type="form" :butttonList="componentVO.buttons" @buttonClick="buttonClick"></dynamic-button>
        <dynamic-button :butttonList="componentVO.buttons" type="form" @buttonClick="buttonClick"></dynamic-button>
      </template>

      <template v-for="item in slotData" :slot="item.prop + ''">
        <vciWebRefer v-if="item.type == 'refer'"
                     :key="item.prop"
                     referType="master"
                     :ref="'referFormRef'+item.prop"
                     :data-key="item.prop"
                     :disabled="item.disabled || false"
                     :display="item.display || true"
@@ -30,10 +30,12 @@
                     :reloadFormKey="(item.referConfig.useFormKey && item.referConfig.formValues && item.referConfig.formValues[item.referConfig.useFormKey]) || ''"
                     :text="item.referConfig.showProp"
                     :value="item.prop || item.value"
                     @setReferValue="setReferValue"
                     :ref="'referFormRef'+item.prop">
                     referType="master"
                     @setReferValue="setReferValue">

        </vciWebRefer>
        <quill-editor ref="customQuillEditor" v-model="content" :options="editorOption" class="editor">
        </quill-editor>
      </template>
    </avue-form>
  </div>
@@ -43,6 +45,26 @@
import vciWebRefer from '@/components/refer/vciWebRefer'
import VciWebRefer from "@/components/refer/vciWebRefer";
import {verifyNull, verifySlash} from "@/util/validate";

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['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

  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}, {'background': []}],          // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  ['clean']                                         // remove formatting button
];
export default {
  name: "dynamic-form",
  components: {VciWebRefer},
@@ -81,7 +103,40 @@
  },
  data() {
    return {
      form: {}
      form: {},
      content: '',
      editorOption: {
        placeholder: '你想说什么？',
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          toolbar: {
            container: toolbarOptions,  // 工具栏
            handlers: {
              'image': function (value) {
                if (value) {
                  document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
                } else {
                  this.quill.format('image', false);
                }
              },
              'video': function (value) {
                if (value) {
                  document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
                } else {
                  this.quill.format('video', false);
                }
              },
            }
          }
        }
      }
    }
  },
  mounted() {