custom-variant-form 2.2.9

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/components/tag/index.js

@@ -0,0 +1,9 @@
+import { tagSchema } from './tag-schema'
+import TagWidget from './tag-widget.vue'
+import TagItem from './tag-item.vue'
+
+export {
+  tagSchema,
+  TagWidget,
+  TagItem
+}

package/src/extension/components/tag/tag-item.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="tag-item">
+    <el-tag
+      :type="field.options.type"
+      :size="field.options.size"
+      :closable="field.options.closable"
+      :disable-transitions="field.options.disableTransitions"
+      :hit="field.options.hit"
+      :effect="field.options.effect"
+      @close="handleClose"
+    >
+      {{ field.options.content || 'Tag' }}
+    </el-tag>
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "tag-item",
+    mixins: [i18n],
+    props: {
+      field: Object,
+      formData: Object,
+      value: [String, Number, Boolean, Array, Object],
+      disabled: Boolean,
+      rules: Array
+    },
+    methods: {
+      handleClose() {
+        if (this.field.options.onClose) {
+          try {
+            let func = new Function('$event', '$field', '$value', this.field.options.onClose)
+            func.call(this, 'close', this.field, this.value)
+          } catch (e) {
+            console.error('Error executing onClose event:', e)
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tag-item {
+    display: inline-block;
+  }
+</style>

package/src/extension/components/tag/tag-schema.js

@@ -0,0 +1,33 @@
+export const tagSchema = {
+  type: 'tag',
+  icon: 'tag-field',
+  formItemFlag: true,
+  options: {
+    name: '',
+    label: 'Tag',
+    labelAlign: '',
+    content: 'Tag',
+    type: '',
+    size: '',
+    closable: false,
+    disableTransitions: false,
+    hit: false,
+    effect: 'plain',
+    columnWidth: '200px',
+    size: '',
+    labelWidth: null,
+    labelHidden: false,
+    disabled: false,
+    hidden: false,
+    //-------------------
+    customClass: '',  //自定义css类名
+    labelIconClass: null,
+    labelIconPosition: 'rear',
+    labelTooltip: null,
+    //-------------------
+    onCreated: '',
+    onMounted: '',
+    onClick: '',
+    onClose: ''
+  }
+}

package/src/extension/components/tag/tag-widget.vue

@@ -0,0 +1,53 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList">
+    <el-tag
+      :key="field.id"
+      :type="field.options.type"
+      :size="field.options.size"
+      :closable="field.options.closable"
+      :disable-transitions="field.options.disableTransitions"
+      :hit="field.options.hit"
+      :effect="field.options.effect"
+      @click="selectWidget(field)"
+    >
+      {{ field.options.content || 'Tag' }}
+    </el-tag>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin"
+  import FormItemWrapper from "@/components/form-designer/form-widget/field-widget/form-item-wrapper"
+  import refMixinDesign from "@/components/form-designer/refMixinDesign"
+
+  export default {
+    name: "tag-widget",
+    componentName: 'FieldWidget',
+    mixins: [i18n, fieldMixin, refMixinDesign],
+    components: {
+      FormItemWrapper
+    },
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+    },
+    computed: {
+      selected() {
+        return this.field.id === this.designer.selectedId
+      }
+    },
+    created() {
+      this.initRefList()
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .selected {
+    outline: 2px solid $--color-primary !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,174 @@
+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'
+
+import {tagSchema} from "@/extension/components/tag/tag-schema"
+import TagWidget from '@/extension/components/tag/tag-widget'
+import TagItem from '@/extension/components/tag/tag-item'
+
+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 */
+
+  /**
+   * 加载Tag字段组件
+   */
+  addCustomWidgetSchema(tagSchema)  //加载组件Json Schema
+  /* -------------------------------------------------- */
+  Vue.component(TagWidget.name, TagWidget)  //注册设计期的字段组件
+  Vue.component(TagItem.name, TagItem)  //注册运行期的字段组件
+  /* -------------------------------------------------- */
+  PERegister.registerCPEditor('tag-content', 'tag-content-editor',
+      PEFactory.createInputTextEditor('content', 'extension.setting.tagContent'))
+
+  let tagTypeOptions = [
+    {label: '', value: ''},
+    {label: 'success', value: 'success'},
+    {label: 'warning', value: 'warning'},
+    {label: 'info', value: 'info'},
+    {label: 'error', value: 'error'},
+  ]
+  Vue.component('tag-type-editor',
+      PEFactory.createSelectEditor('type', 'extension.setting.tagType',
+          {optionItems: tagTypeOptions}))
+
+  let tagSizeOptions = [
+    {label: '', value: ''},
+    {label: 'medium', value: 'medium'},
+    {label: 'small', value: 'small'},
+    {label: 'mini', value: 'mini'},
+  ]
+  Vue.component('tag-size-editor',
+      PEFactory.createSelectEditor('size', 'extension.setting.tagSize',
+          {optionItems: tagSizeOptions}))
+
+  PERegister.registerCPEditor('tag-closable', 'tag-closable-editor',
+      PEFactory.createBooleanEditor('closable', 'extension.setting.tagClosable'))
+
+  PERegister.registerCPEditor('tag-disableTransitions', 'tag-disableTransitions-editor',
+      PEFactory.createBooleanEditor('disableTransitions', 'extension.setting.tagDisableTransitions'))
+
+  PERegister.registerCPEditor('tag-hit', 'tag-hit-editor',
+      PEFactory.createBooleanEditor('hit', 'extension.setting.tagHit'))
+
+  let tagEffectOptions = [
+    {label: 'plain', value: 'plain'},
+    {label: 'dark', value: 'dark'},
+  ]
+  Vue.component('tag-effect-editor',
+      PEFactory.createRadioButtonGroupEditor('effect', 'extension.setting.tagEffect',
+          {optionItems: tagEffectOptions}))
+
+  PERegister.registerEPEditor('tag-onClose', 'tag-onClose-editor',
+      PEFactory.createEventHandlerEditor('onClose', []))
+  /* -------------------------------------------------- */
+  /* Tag字段组件加载完毕 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>