kh-one-ui 2.0.0

package/packages/one-ui-form/code-editor/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="ace-container">
+    <!-- 官方文档中使用id，这里禁止使用，在后期打包后容易出现问题，使用 ref 或者 DOM 就行 -->
+    <div class="ace-editor" ref="ace"></div>
+  </div>
+</template>
+
+<script>
+  import ace from 'ace-builds'
+  /* 启用此行后webpack打包回生成很多动态加载的js文件，不便于部署，故禁用！！
+     特别提示：禁用此行后，需要调用ace.config.set('basePath', 'path...')指定动态js加载URL！！
+   */
+  //import 'ace-builds/webpack-resolver'
+
+  //import 'ace-builds/src-min-noconflict/theme-monokai' // 默认设置的主题
+  import 'ace-builds/src-min-noconflict/theme-sqlserver' // 新设主题
+  import 'ace-builds/src-min-noconflict/mode-javascript' // 默认设置的语言模式
+  import 'ace-builds/src-min-noconflict/mode-json' //
+  import 'ace-builds/src-min-noconflict/mode-css' //
+  import 'ace-builds/src-min-noconflict/ext-language_tools'
+  import {ACE_BASE_PATH} from "../utils/config";
+
+  export default {
+    name: 'CodeEditor',
+    props: {
+      value: {
+        type: String,
+        required: true
+      },
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      mode: {
+        type: String,
+        default: 'javascript'
+      },
+      userWorker: {  //是否开启语法检查，默认开启
+        type: Boolean,
+        default: true
+      },
+
+    },
+    mounted() {
+      //ace.config.set('basePath', 'https://ks3-cn-beijing.ksyun.com/vform2021/ace')
+      ace.config.set('basePath', ACE_BASE_PATH)
+
+      this.addAutoCompletion(ace)  //添加自定义代码提示！！
+
+      this.aceEditor = ace.edit(this.$refs.ace, {
+        maxLines: 20, // 最大行数，超过会自动出现滚动条
+        minLines: 5, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+        fontSize: 12, // 编辑器内字体大小
+        theme: this.themePath, // 默认设置的主题
+        mode: this.modePath, // 默认设置的语言模式
+        tabSize: 2, // 制表符设置为2个空格大小
+        readOnly: this.readonly,
+        highlightActiveLine: true,
+        value: this.codeValue
+      })
+
+      this.aceEditor.setOptions({
+        enableBasicAutocompletion: true,
+        enableSnippets: true,  // 设置代码片段提示
+        enableLiveAutocompletion: true,  // 设置自动提示
+      })
+
+      if (this.mode === 'json') {
+        this.setJsonMode()
+      } else if (this.mode === 'css') {
+        this.setCssMode()
+      }
+
+      if (!this.userWorker) {
+        this.aceEditor.getSession().setUseWorker(false)
+      }
+
+      //编辑时同步数据
+      this.aceEditor.getSession().on('change',(ev)=>{
+        //this.$emit('update:value', this.aceEditor.getValue())  // 触发更新事件, 实现.sync双向绑定！！
+        this.$emit('input', this.aceEditor.getValue())
+      })
+    },
+    data() {
+      return {
+        aceEditor: null,
+        themePath: 'ace/theme/sqlserver', // 不导入 webpack-resolver，该模块路径会报错
+        modePath: 'ace/mode/javascript', // 同上
+        codeValue: this.value
+      }
+    },
+    watch: {
+      //
+    },
+    methods: {
+      addAutoCompletion(ace) {
+        let acData = [
+          {meta: 'VForm API', caption: 'getWidgetRef', value: 'getWidgetRef()', score: 1},
+          {meta: 'VForm API', caption: 'getFormRef', value: 'getFormRef()', score: 1},
+          //TODO: 待补充！！
+        ]
+        let langTools = ace.require('ace/ext/language_tools')
+        langTools.addCompleter({
+          getCompletions: function(editor, session, pos, prefix, callback) {
+            if (prefix.length === 0) {
+              return callback(null, []);
+            }else {
+              return callback(null, acData);
+            }
+          }
+        })
+      },
+
+      setJsonMode() {
+        this.aceEditor.getSession().setMode('ace/mode/json')
+      },
+
+      setCssMode() {
+        this.aceEditor.getSession().setMode('ace/mode/css')
+      },
+
+      getEditorAnnotations() {
+        return this.aceEditor.getSession().getAnnotations()
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .ace-editor {
+    min-height: 300px;
+  }
+</style>

package/packages/one-ui-form/extension/extension-helper.js

@@ -0,0 +1,22 @@
+import {
+  addContainerWidgetSchema,
+  addBasicFieldSchema,
+  addAdvancedFieldSchema,
+  addCustomWidgetSchema
+} from '../form-designer/widget-panel/widgetsConfig'
+import {
+  registerCommonProperty,
+  registerAdvancedProperty,
+  registerEventProperty
+} from '../form-designer/setting-panel/propertyRegister'
+
+export default {
+  addContainerWidgetSchema,
+  addBasicFieldSchema,
+  addAdvancedFieldSchema,
+  addCustomWidgetSchema,
+
+  registerCommonProperty,
+  registerAdvancedProperty,
+  registerEventProperty,
+}

package/packages/one-ui-form/extension/extension-loader.js

@@ -0,0 +1,116 @@
+import Vue from 'vue'
+
+import {
+  addContainerWidgetSchema,
+  addCustomWidgetSchema
+} from '../form-designer/widget-panel/widgetsConfig'
+import * as PERegister from '../form-designer/setting-panel/propertyRegister'
+import * as PEFactory from '../form-designer/setting-panel/property-editor-factory'
+
+import {cardSchema} from "./samples/extension-schema"
+import CardWidget from './samples/card/card-widget'
+import CardItem from './samples/card/card-item'
+import {registerCWGenerator} from '../utils/sfc-generator'
+import {cardTemplateGenerator} from './samples/extension-sfc-generator'
+
+import {alertSchema} from "./samples/extension-schema"
+import AlertWidget from './samples/alert/alert-widget'
+import {registerFWGenerator} from '../utils/sfc-generator'
+import {alertTemplateGenerator} from './samples/extension-sfc-generator'
+
+export const loadExtension = function () {
+
+  /**
+   * 加载容器组件步骤：
+   * 1. 加载组件Json Schema;
+   * 2. 全局注册容器组件，容器组件有两种状态——设计期和运行期，故需要注册两个组件；
+   * 3. 全局注册属性编辑器组件（基本属性、高级属性、事件属性）；
+   * 4. 注册容器组件的代码生成器；
+   * 5. 加载完毕。
+   */
+  addContainerWidgetSchema(cardSchema)  //加载组件Json Schema
+  /* -------------------------------------------------- */
+  Vue.component(CardWidget.name, CardWidget)  //注册设计期的容器组件
+  Vue.component(CardItem.name, CardItem)  //注册运行期的容器组件
+  /* -------------------------------------------------- */
+  PERegister.registerCPEditor('card-folded', 'card-folded-editor',
+      PEFactory.createBooleanEditor('folded', 'extension.setting.cardFolded'))
+
+  PERegister.registerCPEditor('card-showFold', 'card-showFold-editor',
+      PEFactory.createBooleanEditor('showFold', 'extension.setting.cardShowFold'))
+
+  PERegister.registerCPEditor('card-cardWidth', 'card-cardWidth-editor',
+      PEFactory.createInputTextEditor('cardWidth', 'extension.setting.cardWidth'))
+
+  let shadowOptions = [
+    {label: 'never', value: 'never'},
+    {label: 'hover', value: 'hover'},
+    {label: 'always', value: 'always'},
+  ]
+  PERegister.registerCPEditor('card-shadow', 'card-shadow-editor',
+      PEFactory.createSelectEditor('shadow', 'extension.setting.cardShadow',
+          {optionItems: shadowOptions}))
+  /* -------------------------------------------------- */
+  registerCWGenerator('card', cardTemplateGenerator)  //注册容器组件的代码生成器
+  /* -------------------------------------------------- */
+  /* 容器组件加载完毕 end */
+
+  /**
+   * 加载字段组件步骤：
+   * 1. 加载组件Json Schema;
+   * 2. 全局注册字段组件，字段组件设计期和运行期共用，故需要仅需注册一个组件；
+   * 3. 全局注册属性编辑器组件（基本属性、高级属性、事件属性）；
+   * 4. 注册字段组件的代码生成器；
+   * 5. 加载完毕。
+   */
+  addCustomWidgetSchema(alertSchema)  //加载组件Json Schema
+  /* -------------------------------------------------- */
+  Vue.component(AlertWidget.name, AlertWidget)  //注册组件
+  /* -------------------------------------------------- */
+  PERegister.registerCPEditor('alert-title', 'alert-title-editor',
+      PEFactory.createInputTextEditor('title', 'extension.setting.alertTitle'))
+
+  let typeOptions = [
+    {label: 'success', value: 'success'},
+    {label: 'warning', value: 'warning'},
+    {label: 'info', value: 'info'},
+    {label: 'error', value: 'error'},
+  ]
+  // PERegister.registerCPEditor('alert-type', 'alert-type-editor',
+  //     PEFactory.createSelectEditor('type', 'extension.setting.alertType',
+  //         {optionItems: typeOptions}))
+  /* type属性映射已存在，无须再注册，故只需注册属性编辑器即可！！ */
+  Vue.component('alert-type-editor',
+      PEFactory.createSelectEditor('type', 'extension.setting.alertType',
+          {optionItems: typeOptions}))
+
+  PERegister.registerCPEditor('alert-description', 'alert-description-editor',
+      PEFactory.createInputTextEditor('description', 'extension.setting.description'))
+
+  PERegister.registerCPEditor('alert-closable', 'alert-closable-editor',
+      PEFactory.createBooleanEditor('closable', 'extension.setting.closable'))
+
+  PERegister.registerCPEditor('alert-closeText', 'alert-closeText-editor',
+      PEFactory.createInputTextEditor('closeText', 'extension.setting.closeText'))
+
+  PERegister.registerCPEditor('alert-center', 'alert-center-editor',
+      PEFactory.createBooleanEditor('center', 'extension.setting.center'))
+
+  PERegister.registerCPEditor('alert-showIcon', 'alert-showIcon-editor',
+      PEFactory.createBooleanEditor('showIcon', 'extension.setting.showIcon'))
+
+  let effectOptions = [
+    {label: 'light', value: 'light'},
+    {label: 'dark', value: 'dark'},
+  ]
+  PERegister.registerCPEditor('alert-effect', 'alert-effect-editor',
+      PEFactory.createRadioButtonGroupEditor('effect', 'extension.setting.effect',
+          {optionItems: effectOptions}))
+
+  PERegister.registerEPEditor('alert-onClose', 'alert-onClose-editor',
+      PEFactory.createEventHandlerEditor('onClose', []))
+  /* -------------------------------------------------- */
+  registerFWGenerator('alert', alertTemplateGenerator)  //注册字段组件的代码生成器
+  /* -------------------------------------------------- */
+  /* 字段组件加载完毕 end */
+}

package/packages/one-ui-form/extension/samples/alert/alert-widget.vue

@@ -0,0 +1,72 @@
+<template>
+  <static-content-wrapper :designer="designer" :field="field" :design-state="designState"
+                          :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                          :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-alert ref="fieldEditor" :title="field.options.title" :type="field.options.type"
+              :description="field.options.description" :closable="field.options.closable"
+              :center="field.options.center" :close-text="field.options.closeText"
+              :show-icon="field.options.showIcon" :effect="field.options.effect" @close="handelCloseCustomEvent"></el-alert>
+  </static-content-wrapper>
+</template>
+
+<script>
+  import StaticContentWrapper from '../../../form-designer/form-widget/field-widget/static-content-wrapper'
+  import emitter from '../../../utils/emitter'
+  import i18n from "../../../utils/i18n"
+  import fieldMixin from "../../../form-designer/form-widget/field-widget/fieldMixin"
+
+  export default {
+    name: "alert-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      StaticContentWrapper,
+    },
+    created() {
+      this.registerToRefList()
+      this.initEventHandler()
+    },
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+    methods: {
+      handelCloseCustomEvent() {
+        if (!!this.field.options.onClose) {
+          let changeFn = new Function(this.field.options.onClose)
+          changeFn.call(this)
+        }
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/packages/one-ui-form/extension/samples/card/card-item.vue

@@ -0,0 +1,100 @@
+<template>
+  <container-item-wrapper :widget="widget">
+    <el-card :key="widget.id" class="card-container" :class="[!!widget.options.folded ? 'folded' : '', customClass]"
+             :shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
+             :ref="widget.id" v-show="!widget.options.hidden">
+      <div slot="header" class="clear-fix">
+        <span>{{widget.options.label}}</span>
+        <i v-if="widget.options.showFold" class="float-right"
+           :class="[!widget.options.folded ? 'el-icon-arrow-down' : 'el-icon-arrow-up']" @click="toggleCard"></i>
+      </div>
+      <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
+        <template v-for="(subWidget, swIdx) in widget.widgetList">
+          <template v-if="'container' === subWidget.category">
+            <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+                       :index-of-parent-list="swIdx" :parent-widget="widget">
+              <!-- 递归传递插槽！！！ -->
+              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                <slot :name="slot" v-bind="scope"/>
+              </template>
+            </component>
+          </template>
+          <template v-else>
+            <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList"
+                       :index-of-parent-list="swIdx" :parent-widget="widget">
+              <!-- 递归传递插槽！！！ -->
+              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                <slot :name="slot" v-bind="scope"/>
+              </template>
+            </component>
+          </template>
+        </template>
+      </template>
+    </el-card>
+  </container-item-wrapper>
+</template>
+
+<script>
+  import emitter from '../../../utils/emitter'
+  import i18n from "../../../utils/i18n"
+  import refMixin from "../../../form-render/refMixin"
+  import ContainerItemWrapper from '../../../form-render/container-item/container-item-wrapper'
+  import containerItemMixin from "../../../form-render/container-item/containerItemMixin"
+  // import FieldComponents from '../../../form-designer/form-widget/field-widget/index'
+
+  export default {
+    name: "card-item",
+    componentName: 'ContainerItem',
+    mixins: [emitter, i18n, refMixin, containerItemMixin],
+    components: {
+      ContainerItemWrapper,
+      // ...FieldComponents,
+    },
+    props: {
+      widget: Object,
+    },
+    inject: ['refList', 'sfRefList', 'globalModel'],
+    computed: {
+      customClass() {
+        return this.widget.options.customClass || ''
+      },
+
+    },
+    created() {
+      this.initRefList()
+    },
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+    methods: {
+      toggleCard() {
+        this.widget.options.folded = !this.widget.options.folded
+      },
+
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .el-card__header {
+    padding: 10px 12px;
+  }
+
+  .folded ::v-deep .el-card__body {
+    display: none;
+  }
+
+  .clear-fix:before, .clear-fix:after {
+    display: table;
+    content: "";
+  }
+
+  .clear-fix:after {
+    clear: both;
+  }
+
+  .float-right {
+    float: right;
+  }
+
+</style>

package/packages/one-ui-form/extension/samples/card/card-widget.vue

@@ -0,0 +1,132 @@
+<template>
+  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
+                     :index-of-parent-list="indexOfParentList">
+    <el-card :key="widget.id" class="card-container" @click.native.stop="selectWidget(widget)"
+             :shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
+             :class="[selected ? 'selected' : '', !!widget.options.folded ? 'folded' : '', customClass]">
+      <div slot="header" class="clear-fix">
+        <span>{{widget.options.label}}</span>
+        <i v-if="widget.options.showFold" class="float-right"
+           :class="[!widget.options.folded ? 'el-icon-arrow-down' : 'el-icon-arrow-up']"
+           @click="toggleCard"></i>
+      </div>
+      <draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
+                 handle=".drag-handler"
+                 @add="(evt) => onContainerDragAdd(evt, widget.widgetList)"
+                 @update="onContainerDragUpdate" :move="checkContainerMove">
+        <transition-group name="fade" tag="div" class="form-widget-list">
+          <template v-for="(subWidget, swIdx) in widget.widgetList">
+            <template v-if="'container' === subWidget.category">
+              <component :is="subWidget.type + '-widget'" :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
+                         :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+            </template>
+            <template v-else>
+              <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
+                         :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></component>
+            </template>
+          </template>
+        </transition-group>
+      </draggable>
+    </el-card>
+  </container-wrapper>
+</template>
+
+<script>
+  import i18n from "../../../utils/i18n"
+  import containerMixin from "../../../form-designer/form-widget/container-widget/containerMixin"
+  import Draggable from 'vuedraggable'
+  import ContainerWrapper from "../../../form-designer/form-widget/container-widget/container-wrapper"
+  // import FieldComponents from '../../../form-designer/form-widget/field-widget/index'
+  import refMixinDesign from "../../../form-designer/refMixinDesign"
+
+  export default {
+    name: "card-widget",
+    componentName: 'ContainerWidget',
+    mixins: [i18n, containerMixin, refMixinDesign],
+    inject: ['refList'],
+    components: {
+      Draggable,
+      ContainerWrapper,
+      // ...FieldComponents,
+    },
+    props: {
+      widget: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+    },
+    computed: {
+      selected() {
+        return this.widget.id === this.designer.selectedId
+      },
+
+      customClass() {
+        return this.widget.options.customClass || ''
+      },
+
+    },
+    created() {
+      this.initRefList()
+    },
+    methods: {
+      /**
+       * 检查接收哪些组件拖放，如不接受某些组件拖放，则根据组件类型判断后返回false
+       * @param evt
+       * @returns {boolean}
+       */
+      checkContainerMove(evt) {
+        return true
+      },
+
+      toggleCard() {
+        this.widget.options.folded = !this.widget.options.folded
+      },
+
+      /**
+       * 设置折叠/打开状态
+       * @param folded
+       */
+      setFolded(folded) {
+        this.widget.options.folded = !!folded
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .card-container.selected {
+    outline: 2px solid #409EFF !important;
+  }
+
+  .card-container {
+    margin: 3px;
+
+    .form-widget-list {
+      min-height: 28px;
+    }
+  }
+
+  ::v-deep .el-card__header {
+    padding: 10px 12px;
+  }
+
+  .folded ::v-deep .el-card__body {
+    display: none;
+  }
+
+  .clear-fix:before, .clear-fix:after {
+    display: table;
+    content: "";
+  }
+
+  .clear-fix:after {
+    clear: both;
+  }
+
+  .float-right {
+    float: right;
+  }
+
+</style>

package/packages/one-ui-form/extension/samples/extension-schema.js

@@ -0,0 +1,36 @@
+export const cardSchema = {
+  type: 'card',
+  category: 'container',
+  icon: 'card',
+  widgetList: [],
+  options: {
+    name: '',
+    label: 'card',
+    hidden: false,
+    folded: false,
+    showFold: true,
+    cardWidth: '100%',
+    shadow: 'never',
+    customClass: '',
+  }
+}
+
+export const alertSchema = {
+  type: 'alert',
+  icon: 'alert',
+  formItemFlag: false,
+  options: {
+    name: '',
+    title: 'Good things are coming...',
+    type: 'info',
+    description: '',
+    closable: true,
+    closeText: '',
+    center: true,
+    showIcon: false,
+    effect: 'light',
+    hidden: false,
+    onClose: '',
+    customClass: '',
+  }
+}

package/packages/one-ui-form/extension/samples/extension-sfc-generator.js

@@ -0,0 +1,50 @@
+import {buildClassAttr, buildContainerWidget, buildFieldWidget} from '../../utils/sfc-generator'
+
+export const cardTemplateGenerator = function (cw, formConfig) {
+  const wop = cw.options
+  //const headerAttr = `header="${wop.label}"`
+  const classAttr = buildClassAttr(cw)
+  const styleAttr = !!wop.cardWidth ? `style="{width: ${wop.cardWidth} !important}"` : ''
+  const shadowAttr = `shadow="${wop.shadow}"`
+  const vShowAttr = !!wop.hidden ? `v-show="false"` : ''
+
+  const cardTemplate =
+`<div class="card-container">
+  <el-card ${classAttr} ${styleAttr} ${shadowAttr} ${vShowAttr}>
+    <div slot="header" class="clear-fix">
+      <span>${wop.label}</span>
+      ${!!wop.showFold ? `<i class="float-right el-icon-arrow-down"></i>` : ''}
+    </div>
+    ${
+      cw.widgetList.map(wItem => {
+        if (wItem.category === 'container') {
+          return buildContainerWidget(wItem, formConfig)
+        } else {
+          return buildFieldWidget(wItem, formConfig)
+        }
+      }).join('')
+    }
+  </el-card>
+</div>`
+
+  return cardTemplate
+}
+
+export const alertTemplateGenerator = function(fw, formConfig) {
+  const wop = fw.options
+  const titleAttr = `title="${wop.title}"`
+  const typeAttr = `type=${wop.type}`
+  const descriptionAttr = !!wop.description ? `description="${wop.description}"` : ''
+  const closableAttr = `:closable="${wop.closable}"`
+  const closeTextAttr = !!wop.closeText ? `close-text="${wop.closeText}"` : ''
+  const centerAttr = `:center="${wop.center}"`
+  const showIconAttr = `:show-icon="${wop.showIcon}"`
+  const effectAttr = `effect="${wop.effect}"`
+
+  const alertTemplate =
+`<el-alert ${titleAttr} ${typeAttr} ${descriptionAttr} ${closableAttr} ${closeTextAttr} ${centerAttr} 
+  ${showIconAttr} ${effectAttr}>
+</el-alert>`
+
+  return alertTemplate
+}