custom-variant-form 2.3.1 → 2.3.2

package/src/components/form-designer/form-widget/field-widget/static-content-wrapper.vue

@@ -1,196 +0,0 @@
-<template>
-  <div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}" :style="{display: displayStyle}">
-    <div class="static-content-item" v-if="!field.options.hidden || (designState === true)" :style="{display: displayStyle}"
-         :class="[selected ? 'selected' : '', customClass]" @click.stop="selectField(field)">
-      <slot></slot>
-    </div>
-
-    <template v-if="!!this.designer">
-      <div class="field-action" v-if="designer.selectedId === field.id">
-        <i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')" @click.stop="selectParentWidget(field)"></i>
-        <i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
-           @click.stop="moveUpWidget(field)"></i>
-        <i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
-           @click.stop="moveDownWidget(field)"></i>
-        <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeFieldWidget"></i>
-      </div>
-
-      <div class="drag-handler background-opacity" v-if="designer.selectedId === field.id">
-        <i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
-        <i>{{i18n2t(`designer.widgetLabel.${field.type}`, `extension.widgetLabel.${field.type}`)}}</i>
-        <i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-  import i18n from "@/utils/i18n";
-
-  export default {
-    name: "static-content-wrapper",
-    mixins: [i18n],
-    props: {
-      field: Object,
-      designer: Object,
-      parentWidget: Object,
-      parentList: Array,
-      indexOfParentList: Number,
-
-      designState: {
-        type: Boolean,
-        default: false
-      },
-
-      displayStyle: {
-        type: String,
-        default: 'block'
-      },
-
-      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
-        type: Number,
-        default: -1
-      },
-      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
-        type: Number,
-        default: -1
-      },
-      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
-        type: String,
-        default: ''
-      },
-    },
-    computed: {
-      selected() {
-        return !!this.designer && this.field.id === this.designer.selectedId
-      },
-
-      customClass() {
-        return !!this.field.options.customClass ? this.field.options.customClass.join(' ') : ''
-      },
-
-    },
-    methods: {
-
-      selectField(field) {
-        if (!!this.designer) {
-          this.designer.setSelected(field)
-          this.designer.emitEvent('field-selected', this.parentWidget)  //发送选中组件的父组件对象
-        }
-      },
-
-      selectParentWidget() {
-        if (this.parentWidget) {
-          this.designer.setSelected(this.parentWidget)
-        } else {
-          this.designer.clearSelected()
-        }
-      },
-
-      moveUpWidget() {
-        this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
-        this.designer.emitHistoryChange()
-      },
-
-      moveDownWidget() {
-        this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
-        this.designer.emitHistoryChange()
-      },
-
-      removeFieldWidget() {
-        if (!!this.parentList) {
-          const fieldRefName = this.designer.selectedWidgetName
-          let nextSelected = null
-          if (this.parentList.length === 1) {
-            if (!!this.parentWidget) {
-              nextSelected = this.parentWidget
-            }
-          } else if (this.parentList.length === (1 + this.indexOfParentList)) {
-            nextSelected = this.parentList[this.indexOfParentList - 1]
-          } else {
-            nextSelected = this.parentList[this.indexOfParentList + 1]
-          }
-
-          this.$nextTick(() => {
-            this.parentList.splice(this.indexOfParentList, 1)
-            //if (!!nextSelected) {
-            this.designer.setSelected(nextSelected)
-            //}
-
-            this.designer.formWidget.deleteWidgetRef(fieldRefName)  //删除组件ref！！！
-            this.designer.emitHistoryChange()
-          })
-        }
-      },
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  @import "../../../../styles/global.scss";
-
-  .design-time-bottom-margin {
-    margin-bottom: 5px;
-  }
-
-  .field-wrapper {
-    position: relative;
-
-    .field-action{
-      position: absolute;
-      //bottom: -24px;
-      bottom: 0;
-      right: -2px;
-      height: 22px;
-      line-height: 22px;
-      background: $--color-primary;
-      z-index: 9;
-
-      i {
-        font-size: 14px;
-        color: #fff;
-        margin: 0 5px;
-        cursor: pointer;
-      }
-    }
-
-    .drag-handler {
-      position: absolute;
-      top: 0;
-      //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
-      left: -1px;
-      height: 20px;
-      line-height: 20px;
-      //background: $--color-primary;
-      z-index: 9;
-
-      i {
-        font-size: 12px;
-        font-style: normal;
-        color: #fff;
-        margin: 4px;
-        cursor: move;
-      }
-
-      &:hover {
-        //opacity: 1;
-        background: $--color-primary;
-      }
-    }
-  }
-
-  .static-content-item {
-    min-height: 20px;
-    display: flex;  /* 垂直居中 */
-    align-items: center;  /* 垂直居中 */
-
-    ::v-deep .el-divider--horizontal {
-      margin: 0;
-    }
-  }
-
-  .el-form-item.selected, .static-content-item.selected {
-    outline: 2px solid $--color-primary;
-  }
-</style>

package/src/components/form-designer/form-widget/field-widget/static-text-widget.vue

@@ -1,83 +0,0 @@
-<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">
-    <div ref="fieldEditor" :style="!!field.options.fontSize ? `font-size: ${field.options.fontSize};`: ''">
-      <pre :style="{'white-space': !!field.options.preWrap ? 'pre-wrap' : 'pre', 'text-align': !!field.options.textAlign ? field.options.textAlign : 'left'}">{{field.options.textContent}}</pre></div>
-  </static-content-wrapper>
-</template>
-
-<script>
-  import StaticContentWrapper from './static-content-wrapper'
-  import emitter from '@/utils/emitter'
-  import i18n, {translate} from "@/utils/i18n";
-  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
-
-  export default {
-    name: "static-text-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,
-    },
-    computed: {
-
-    },
-    beforeCreate() {
-      /* 这里不能访问方法和属性！！ */
-    },
-
-    created() {
-      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
-         需要在父组件created中初始化！！ */
-      this.registerToRefList()
-      this.initEventHandler()
-
-      this.handleOnCreated()
-    },
-
-    mounted() {
-      this.handleOnMounted()
-    },
-
-    beforeDestroy() {
-      this.unregisterFromRefList()
-    },
-
-    methods: {
-
-    }
-
-  }
-</script>
-
-<style lang="scss" scoped>
-  @import "../../../../styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
-
-</style>

package/src/components/form-designer/form-widget/field-widget/switch-widget.vue

@@ -1,101 +0,0 @@
-<template>
-  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :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-switch ref="fieldEditor" v-model="fieldModel"
-               :disabled="field.options.disabled"
-               :active-text="field.options.activeText" :inactive-text="field.options.inactiveText"
-               :active-color="field.options.activeColor" :inactive-color="field.options.inactiveColor"
-               :width="field.options.switchWidth"
-               @change="handleChangeEvent">
-    </el-switch>
-  </form-item-wrapper>
-</template>
-
-<script>
-  import FormItemWrapper from './form-item-wrapper'
-  import emitter from '@/utils/emitter'
-  import i18n, {translate} from "@/utils/i18n";
-  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
-
-  export default {
-    name: "switch-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: {
-      FormItemWrapper,
-    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
-    data() {
-      return {
-        oldFieldValue: null, //field组件change之前的值
-        fieldModel: null,
-        rules: [],
-      }
-    },
-    computed: {
-
-    },
-    beforeCreate() {
-      /* 这里不能访问方法和属性！！ */
-    },
-
-    created() {
-      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
-         需要在父组件created中初始化！！ */
-      this.initFieldModel()
-      this.registerToRefList()
-      this.initEventHandler()
-      this.buildFieldRules()
-
-      this.handleOnCreated()
-    },
-
-    mounted() {
-      this.handleOnMounted()
-    },
-
-    beforeDestroy() {
-      this.unregisterFromRefList()
-    },
-
-    methods: {
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
-
-  .full-width-input {
-    width: 100% !important;
-  }
-
-</style>

package/src/components/form-designer/form-widget/field-widget/textarea-widget.vue

@@ -1,99 +0,0 @@
-<template>
-  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :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-input type="textarea" ref="fieldEditor" v-model="fieldModel"
-              :disabled="field.options.disabled" :readonly="field.options.readonly"
-              :size="field.options.size"
-              :placeholder="field.options.placeholder" :rows="field.options.rows"
-              :minlength="field.options.minLength" :maxlength="field.options.maxLength"
-              :show-word-limit="field.options.showWordLimit"
-              @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent"
-              @change="handleChangeEvent">
-    </el-input>
-  </form-item-wrapper>
-</template>
-
-<script>
-  import FormItemWrapper from './form-item-wrapper'
-  import emitter from '@/utils/emitter'
-  import i18n, {translate} from "@/utils/i18n"
-  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin"
-
-  export default {
-    name: "textarea-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: {
-      FormItemWrapper,
-    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
-    data() {
-      return {
-        oldFieldValue: null, //field组件change之前的值
-        fieldModel: null,
-        rules: [],
-      }
-    },
-    computed: {
-
-    },
-    beforeCreate() {
-      /* 这里不能访问方法和属性！！ */
-    },
-
-    created() {
-      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
-         需要在父组件created中初始化！！ */
-      this.initFieldModel()
-      this.registerToRefList()
-      this.initEventHandler()
-      this.buildFieldRules()
-
-      this.handleOnCreated()
-    },
-
-    mounted() {
-      this.handleOnMounted()
-    },
-
-    beforeDestroy() {
-      this.unregisterFromRefList()
-    },
-
-    methods: {
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
-
-</style>

package/src/components/form-designer/form-widget/field-widget/time-range-widget.vue

@@ -1,104 +0,0 @@
-<template>
-  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :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-time-picker ref="fieldEditor" is-range v-model="fieldModel" class="full-width-input"
-                    :disabled="field.options.disabled" :readonly="field.options.readonly"
-                    :size="field.options.size"
-                    :clearable="field.options.clearable" :editable="field.options.editable"
-                    :format="field.options.format" value-format="HH:mm:ss"
-                    :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startTimePlaceholder')"
-                    :end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endTimePlaceholder')"
-                    @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                    @change="handleChangeEvent">
-    </el-time-picker>
-  </form-item-wrapper>
-</template>
-
-<script>
-  import FormItemWrapper from './form-item-wrapper'
-  import emitter from '@/utils/emitter'
-  import i18n, {translate} from "@/utils/i18n";
-  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
-
-  export default {
-    name: "time-range-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: {
-      FormItemWrapper,
-    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
-    data() {
-      return {
-        oldFieldValue: null, //field组件change之前的值
-        fieldModel: null,
-        rules: [],
-      }
-    },
-    computed: {
-
-    },
-    beforeCreate() {
-      /* 这里不能访问方法和属性！！ */
-    },
-
-    created() {
-      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
-         需要在父组件created中初始化！！ */
-      this.initFieldModel()
-      this.registerToRefList()
-      this.initEventHandler()
-      this.buildFieldRules()
-
-      this.handleOnCreated()
-    },
-
-    mounted() {
-      this.handleOnMounted()
-    },
-
-    beforeDestroy() {
-      this.unregisterFromRefList()
-    },
-
-    methods: {
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
-
-  .full-width-input {
-    width: 100% !important;
-  }
-
-</style>

package/src/components/form-designer/form-widget/field-widget/time-widget.vue

@@ -1,103 +0,0 @@
-<template>
-  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :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-time-picker ref="fieldEditor" v-model="fieldModel" class="full-width-input"
-                    :disabled="field.options.disabled" :readonly="field.options.readonly"
-                    :size="field.options.size"
-                    :clearable="field.options.clearable" :editable="field.options.editable"
-                    :format="field.options.format" value-format="HH:mm:ss"
-                    :placeholder="field.options.placeholder || i18nt('render.hint.timePlaceholder')"
-                    @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                    @change="handleChangeEvent">
-    </el-time-picker>
-  </form-item-wrapper>
-</template>
-
-<script>
-  import FormItemWrapper from './form-item-wrapper'
-  import emitter from '@/utils/emitter'
-  import i18n, {translate} from "@/utils/i18n";
-  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
-
-  export default {
-    name: "time-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: {
-      FormItemWrapper,
-    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
-    data() {
-      return {
-        oldFieldValue: null, //field组件change之前的值
-        fieldModel: null,
-        rules: [],
-      }
-    },
-    computed: {
-
-    },
-    beforeCreate() {
-      /* 这里不能访问方法和属性！！ */
-    },
-
-    created() {
-      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
-         需要在父组件created中初始化！！ */
-      this.initFieldModel()
-      this.registerToRefList()
-      this.initEventHandler()
-      this.buildFieldRules()
-
-      this.handleOnCreated()
-    },
-
-    mounted() {
-      this.handleOnMounted()
-    },
-
-    beforeDestroy() {
-      this.unregisterFromRefList()
-    },
-
-    methods: {
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
-
-  .full-width-input {
-    width: 100% !important;
-  }
-
-</style>