富文本以及路由改造

 Source/ProjectWeb/package.json

@@ -24,10 +24,12 @@
    "node-gyp": "^5.0.6",
    "nprogress": "^0.2.0",
    "portfinder": "^1.0.23",
    "quill": "^1.3.7",
    "script-loader": "^0.7.2",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.2",
    "vue-i18n": "^8.7.0",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.1"
  },

 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},
@@ -59,14 +81,14 @@
      type: String,
      default: ''
    },
    sourceData:{
    sourceData: {
      //所属区域的上一区域选中数据
      type:Object,
      type: Object,
      default: {}
    },
    dataStore:{
    dataStore: {
      //弹窗时按钮所属区域选中数据
      type:Array,
      type: Array,
      default: []
    },
    paramVOS: {
@@ -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() {
@@ -99,10 +154,10 @@
      return this.getColumnData()
    }
  },
  watch:{
    slotData:{
      handler(newV){
       this.getDictList(newV)
  watch: {
    slotData: {
      handler(newV) {
        this.getDictList(newV)
      },
      immediate: true,
    },
@@ -129,7 +184,7 @@
      deep: true,
      immediate: true,
    },
    sourceData:{
    sourceData: {
      handler(newval) {
        //源数据有变化时变更当前区域数据
        console.log(this.areasName);
@@ -140,39 +195,39 @@
  methods: {
    //转化数据
    formColumn(formList) {
        return formList.map(item => {
          const typeValue = item.type === 'text' ? 'input' : item.type === 'combox' ? 'select' : item.type;
      return formList.map(item => {
        const typeValue = item.type === 'text' ? 'input' : item.type === 'combox' ? 'select' : item.type;

          const focusFunc = item.type === 'refer' ? (i) => {
        const focusFunc = item.type === 'refer' ? (i) => {

          } : undefined;
        } : undefined;


          return {
            label: item.text,
            prop: item.field,
            type: typeValue,
            labelWidth:item.text.length >= 6 ? 115 : 90,
            value: item.defaultValue,
            dicData: item.type === 'combox' ? item.dicData : item.dicUrl,
            readonly: item.readOnly,
            disabled: item.disabled,
            display: !item.hidden,
            labelSuffix: item.suffix,
            suffixIcon: item.prefix,
            placeholder: item.placeholder,
            clearable: item.clearable,
            tip: item.tooltips,
            keyAttr: item.keyAttr,
            focus:focusFunc,
            referConfig:item.referConfig,
            rules: [{
              required: item.required,
              message: `请输入${item.text}!`,
              trigger: "blur"
            }]
          };
        });
        return {
          label: item.text,
          prop: item.field,
          type: typeValue,
          labelWidth: item.text.length >= 6 ? 115 : 90,
          value: item.defaultValue,
          dicData: item.type === 'combox' ? item.dicData : item.dicUrl,
          readonly: item.readOnly,
          disabled: item.disabled,
          display: !item.hidden,
          labelSuffix: item.suffix,
          suffixIcon: item.prefix,
          placeholder: item.placeholder,
          clearable: item.clearable,
          tip: item.tooltips,
          keyAttr: item.keyAttr,
          focus: focusFunc,
          referConfig: item.referConfig,
          rules: [{
            required: item.required,
            message: `请输入${item.text}!`,
            trigger: "blur"
          }]
        };
      });
    },

    //数据判空

 Source/ProjectWeb/src/main.js

@@ -31,6 +31,13 @@
import dynamicTableForm from '@/components/dynamic-components/dynamic-table-form'
//固定表单组件
import dynamicForm from '@/components/dynamic-components/dynamic-form'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)
// 注册全局crud驱动
window.$crudCommon = crudCommon;
// 加载Vue拓展

 Source/ProjectWeb/src/router/avue-router.js

@@ -96,9 +96,9 @@
      // 设置 props默认值 作用就是将字段设置成配置的
      const propsDefault = {
        label: propsConfig.label || 'name',
        path:'code',
        path: 'code',
        code: 'code',
        pathValue:'pathValue',
        pathValue: 'pathValue',
        icon: propsConfig.icon || 'icon',
        children: propsConfig.children || 'children',
        meta: propsConfig.meta || 'meta',
@@ -121,16 +121,33 @@
        let code = (() => {
          return oMenu[propsDefault.code]
        })();
        // 将字符串分割成数组，以'?'作为分隔符
        let parts = path.split("?");
        // 如果数组的长度大于1，表示有'?'，则取第一个元素的第一个部分，否则直接取整个字符串
        let bsValue = parts.length > 1 ? parts[0].split("=")[1] : path.split("=")[1];
        if (bsValue === '' || bsValue === undefined || bsValue === null) {
          bsValue = "UI";

        let component = '';
        let parts = '';

        // 如果路径中存在 '?'，则取问号前面部分给 parts
        if (path.includes('?')) {
          parts = path.split("?")[0];
        } else {
          parts = path; // 不存在 '?' 整条路径就是 parts
        }
        //特殊处理组件 执行完这个 component 也就是精确到具体的文件了  views文件夹下面就是具体的页面代码
        let component = bsValue === 'UI' ? 'views/base/UIContentViewer' : `views/custom-ui/${bsValue}`,
          name = oMenu[propsDefault.label],

        // 如果问号前面部分不在 ['ui', 'UI', 'base'] 中，则是自定义组件
        if (!['ui', 'UI', 'base'].includes(parts)) {
          component = `views/custom-ui/${parts}`;
        }

        // 如果问号前面等于空，则默认为UI引擎
        if (!parts) {
          component = 'views/base/UIContentViewer';
        }

        // 如果问号前面等于 UI、ui 则为UI引擎
        if (['UI', 'ui'].includes(parts)) {
          component = 'views/base/UIContentViewer';
        }

        let name = oMenu[propsDefault.label],
          icon = oMenu[propsDefault.icon],
          children = oMenu[propsDefault.children],
          meta = oMenu[propsDefault.meta] || {};

 Source/ProjectWeb/src/views/custom-ui/test.vue

@@ -1,15 +1,93 @@
<template>
  <div>
    测试自定义组件展示ddddd
    <quill-editor
      class="editor"
      v-model="content"
      ref="quillEditor"
      :options="editorOptions"
    ></quill-editor>
  </div>
</template>

<script>
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
  ['blockquote', 'code-block'], // 引用  代码块
  [{ header: 1 }, { header: 2 }], // 1、2 级标题
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标
  [{ indent: '-1' }, { indent: '+1' }], // 缩进
  // [{'direction': 'rtl'}],                         // 文本方向
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
  [{ font: [] }], // 字体种类
  [{ align: [] }], // 对齐方式
  ['clean'], // 清除文本格式
  // ['link', 'image', 'video'] // 链接、图片
  ['link', 'image'] // 链接、图片
]
export default {
  name: "test"
}
</script>
  name:'test',
  data() {
    return {
      content: '',
      editorOptions: {
        // Quill编辑器的选项
        placeholder: '请输入内容！',
        modules:{
          toolbar:{
            container:toolbarOptions
          }
        }

<style scoped>
      }
    };
  },
  mounted() {
    let self = this;
    const editor = this.$refs.quillEditor.quill;
    const toolbar = editor.getModule('toolbar');
    toolbar.addHandler('image', () => {
      self.selectLocalImage();
    });
  },
  methods: {
    selectLocalImage() {
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.click();
      input.onchange = () => {
        const file = input.files[0];
        if (file) {
          // 在这里调用你的图片上传逻辑，并获取图片的URL
          // 假设你上传后得到了图片URL
          const url = '你的图片URL';
          // 插入图片到编辑器
          this.insertToEditor(url);
        }
      };
    },
    insertToEditor(url) {
      const range = this.$refs.quillEditor.quill.getSelection();
      this.$refs.quillEditor.quill.insertEmbed(range.index, 'image', url);
    }
  }
};
</script>
<style lang="scss" scoped>
.editor {
  line-height: normal !important;
  height: 400px;
  margin-bottom: 50px;
}
//.ql-snow .ql-tooltip[data-mode="link"]::before {
//  content: "请输入链接地址:";
//}
//.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
//  border-right: 0px;
//  content: "保存";
//  padding-right: 0px;
//}

</style>