@lambo-design/variant-form 2.2.9-beta.0

package/src/components/form-render/refMixin.js

@@ -0,0 +1,30 @@
+export default {
+  methods: {
+    initRefList() {
+      if ((this.refList !== null) && !!this.widget.options.name) {
+        this.refList[this.widget.options.name] = this
+      }
+    },
+
+    getWidgetRef(widgetName, showError = false) {
+      let foundRef = this.refList[widgetName]
+      if (!foundRef && !!showError) {
+        this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)
+      }
+      return foundRef
+    },
+
+    getFormRef() { /* 获取VFrom引用，必须在VForm组件created之后方可调用 */
+      return this.refList['v_form_ref']
+    },
+
+    getComponentByContainer(con) {
+      if (con.type === 'grid') {  //grid-item跟VueGridLayout全局注册组件重名，故特殊处理！！
+        return 'vf-grid-item'
+      }
+
+      return con.type + '-item'
+    },
+
+  }
+}

package/src/components/svg-icon/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName"></use>
+    <title v-if="!!title">{{title}}</title>
+  </svg>
+</template>
+
+<script>
+  export default {
+    name: 'SvgIcon',
+    props: {
+      iconClass: {
+        type: String,
+        required: true
+      },
+      className: {
+        type: String
+      },
+      title: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      iconName() {
+        return `#icon-${this.iconClass}`
+      },
+      svgClass() {
+        if (this.className) {
+          return 'svg-icon ' + this.className
+        } else {
+          return 'svg-icon'
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .svg-icon {
+    width: 1.1em;
+    height: 1.1em;
+    margin-left: 0.35em;
+    margin-right: 0.35em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+  }
+</style>

package/src/components/v-table/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-container id="commonTable">
+    <el-main>
+      <el-table :data="data" :height="height" :max-height="maxHeight" border stripe tooltip-effect="light"
+                @selection-change="handleSelectionChange" :size="tableSize" :style="{width: tableWidth}">
+        <el-table-column v-if="showCheckBox" type="selection" width="45"></el-table-column>
+        <template v-for="(item, index) in columns">
+          <el-table-column
+                  v-if="item.show !== false"
+                  :key="index"
+                  :fixed="item.fixed"
+                  :prop="item.prop"
+                  :label="item.label"
+                  :align="item.align ? item.align:'center'"
+                  :width="item.width"
+                  :show-overflow-tooltip="true"
+                  :formatter="item.formatter ? item.formatter : formatterValue">
+          </el-table-column>
+        </template>
+        <slot name="table_operation"/>
+      </el-table>
+    </el-main>
+
+    <el-footer id="simpleTableFooter" v-if="showPager" style="height: 42px;padding-top: 6px; background: white">
+      <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              style="text-align: right;margin:0;"
+              :current-page="pagination.pageNo"
+              :page-size="pagination.limit"
+              :page-sizes="pagination.sizes"
+              :total="pagination.total"
+              layout="total, sizes, prev, pager, next, jumper">
+      </el-pagination>
+    </el-footer>
+  </el-container>
+</template>
+
+<script>
+  export default {
+    name: 'VTable',
+    props: {
+      tableWidth: [String, Number],
+      columns: Array,
+      data: Array,
+      showPager: {
+        type: Boolean,
+        default: true
+      },
+      showCheckBox: {
+        type: Boolean,
+        default: false
+      },
+      pagination: Object,
+      height: {
+        type: String,
+        default: "100%"
+      },
+      maxHeight: {
+        type: Number,
+        default: 2000
+      },
+      tableSize: {
+        type: String,
+        default: 'medium'
+      },
+    },
+    methods: {
+      handleSelectionChange(val) {
+        this.$emit('handleSelectionChange', val);
+      },
+      handleSizeChange(val) {
+        this.$emit('handleSizeChange', val);
+      },
+      handleCurrentChange(val) {
+        this.$emit('handleCurrentChange', val);
+      },
+      formatterValue(row, column, cellValue) {
+        return cellValue;
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+  .el-table {
+    // 解决table组件内容滚动时页面滚动条同步滚动
+    overflow: auto;
+    // 必须设置
+    position: relative;
+
+    ::v-deep .el-table__fixed-header-wrapper thead th > .cell {
+      white-space: nowrap !important;  /* 禁止表头换行 */
+    }
+
+    ::v-deep .el-table__header-wrapper thead th > .cell {
+      white-space: nowrap !important;  /* 禁止表头换行 */
+    }
+
+    ::v-deep .el-table__body-wrapper {
+      //height: 100% !important;
+    }
+  }
+
+</style>

package/src/extension/extension-helper.js

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

package/src/extension/extension-loader.js

@@ -0,0 +1,116 @@
+import Vue from 'vue'
+
+import {
+  addContainerWidgetSchema,
+  addCustomWidgetSchema
+} from '@/components/form-designer/widget-panel/widgetsConfig'
+import * as PERegister from '@/components/form-designer/setting-panel/propertyRegister'
+import * as PEFactory from '@/components/form-designer/setting-panel/property-editor-factory'
+
+import {cardSchema} from "@/extension/samples/extension-schema"
+import CardWidget from '@/extension/samples/card/card-widget'
+import CardItem from '@/extension/samples/card/card-item'
+import {registerCWGenerator} from '@/utils/sfc-generator'
+import {cardTemplateGenerator} from '@/extension/samples/extension-sfc-generator'
+
+import {alertSchema} from "@/extension/samples/extension-schema"
+import AlertWidget from '@/extension/samples/alert/alert-widget'
+import {registerFWGenerator} from '@/utils/sfc-generator'
+import {alertTemplateGenerator} from '@/extension/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/src/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="handleCloseCustomEvent"></el-alert>
+  </static-content-wrapper>
+</template>
+
+<script>
+  import StaticContentWrapper from '@/components/form-designer/form-widget/field-widget/static-content-wrapper'
+  import emitter from '@/utils/emitter'
+  import i18n from "@/utils/i18n"
+  import fieldMixin from "@/components/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: {
+      handleCloseCustomEvent() {
+        if (!!this.field.options.onClose) {
+          let changeFn = new Function(this.field.options.onClose)
+          changeFn.call(this)
+        }
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/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="getComponentByContainer(subWidget)" :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 "@/components/form-render/refMixin"
+  import ContainerItemWrapper from '@/components/form-render/container-item/container-item-wrapper'
+  import containerItemMixin from "@/components/form-render/container-item/containerItemMixin"
+  import FieldComponents from '@/components/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/src/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 "@/components/form-designer/form-widget/container-widget/containerMixin"
+  import Draggable from 'vuedraggable'
+  import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
+  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+  import refMixinDesign from "@/components/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 $--color-primary !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/src/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: '',
+  }
+}