custom-variant-form 2.3.1 → 2.3.2

package/src/components/form-designer/form-widget/container-widget/container-wrapper.vue

@@ -1,107 +0,0 @@
-<!--
-/**
- * author: vformAdmin
- * email: vdpadmin@163.com
- * website: https://www.vform666.com
- * date: 2021.08.18
- * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
- */
--->
-
-<template>
-  <div class="container-wrapper" :class="[customClass]">
-    <slot></slot>
-
-    <div class="container-action" v-if="designer.selectedId === widget.id && !widget.internal">
-      <i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')"
-         @click.stop="selectParentWidget(widget)"></i>
-      <i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
-         @click.stop="moveUpWidget()"></i>
-      <i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
-         @click.stop="moveDownWidget()"></i>
-      <i v-if="widget.type === 'table'" class="iconfont icon-insertrow" :title="i18nt('designer.hint.insertRow')"
-         @click.stop="appendTableRow(widget)"></i>
-      <i v-if="widget.type === 'table'" class="iconfont icon-insertcolumn" :title="i18nt('designer.hint.insertColumn')"
-         @click.stop="appendTableCol(widget)"></i>
-      <i class="el-icon-copy-document" v-if="(widget.type === 'grid') || (widget.type === 'table')"
-         :title="i18nt('designer.hint.cloneWidget')" @click.stop="cloneContainer(widget)"></i>
-      <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget"></i>
-    </div>
-
-    <div class="drag-handler" v-if="designer.selectedId === widget.id && !widget.internal">
-      <i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
-      <i>{{i18n2t(`designer.widgetLabel.${widget.type}`, `extension.widgetLabel.${widget.type}`)}}</i>
-      <i v-if="widget.options.hidden === true" class="iconfont icon-hide"></i>
-    </div>
-  </div>
-</template>
-
-<script>
-  import i18n from "@/utils/i18n";
-  import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin";
-
-  export default {
-    name: "container-wrapper",
-    mixins: [i18n, containerMixin],
-    props: {
-      widget: Object,
-      parentWidget: Object,
-      parentList: Array,
-      indexOfParentList: Number,
-      designer: Object,
-    },
-    computed: {
-      customClass() {
-        return !!this.widget.options.customClass ? this.widget.options.customClass.join(' ') : ''
-      },
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .container-wrapper {
-    position: relative;
-    margin-bottom: 5px;
-
-    .container-action{
-      position: absolute;
-      //bottom: -30px;
-      bottom: 0;
-      right: -2px;
-      height: 28px;
-      line-height: 28px;
-      background: $--color-primary;
-      z-index: 999;
-
-      i {
-        font-size: 14px;
-        color: #fff;
-        margin: 0 5px;
-        cursor: pointer;
-      }
-    }
-
-    .drag-handler {
-      position: absolute;
-      top: -2px;
-      //bottom: -24px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
-      left: -2px;
-      height: 22px;
-      line-height: 22px;
-      background: $--color-primary;
-      z-index: 9;
-
-      i {
-        font-size: 14px;
-        font-style: normal;
-        color: #fff;
-        margin: 4px;
-        cursor: move;
-      }
-    }
-
-  }
-
-
-</style>

package/src/components/form-designer/form-widget/container-widget/containerMixin.js

@@ -1,93 +0,0 @@
-export default {
-  inject: ['getGlobalDsv'],
-  methods: {
-    appendTableRow(widget) {
-      this.designer.appendTableRow(widget)
-    },
-
-    appendTableCol(widget) {
-      this.designer.appendTableCol(widget)
-    },
-
-    onContainerDragAdd(evt, subList) {
-      const newIndex = evt.newIndex
-      if (!!subList[newIndex]) {
-        this.designer.setSelected( subList[newIndex] )
-      }
-
-      this.designer.emitHistoryChange()
-      this.designer.emitEvent('field-selected', this.widget)
-    },
-
-    onContainerDragUpdate() {
-      this.designer.emitHistoryChange()
-    },
-
-    checkContainerMove(evt) {
-      return this.designer.checkWidgetMove(evt)
-    },
-
-    selectWidget(widget) {
-      this.designer.setSelected(widget)
-    },
-
-    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()
-    },
-
-    cloneContainer(widget) {
-      if (!!this.parentList) {
-        let newCon = this.designer.cloneContainer(widget)
-        this.parentList.splice(this.indexOfParentList + 1, 0, newCon)
-        this.designer.setSelected(newCon)
-
-        this.designer.emitHistoryChange()
-      }
-    },
-
-    removeWidget() {
-      if (!!this.parentList) {
-        const widgetRefName = 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)
-          this.designer.setSelected(nextSelected)
-
-          this.designer.formWidget.deleteWidgetRef(widgetRefName)  //删除组件ref！！！
-          this.designer.emitHistoryChange()
-        })
-      }
-    },
-
-    setWidgetOption(optionName, optionValue) { //通用组件选项修改API
-      if (this.widget.options.hasOwnProperty(optionName)) {
-        this.widget.options[optionName] = optionValue
-      }
-    },
-
-  }
-}

package/src/components/form-designer/form-widget/container-widget/grid-col-widget.vue

@@ -1,314 +0,0 @@
-<template>
-  <el-col v-if="widget.type === 'grid-col'" class="grid-cell" v-bind="layoutProps"
-          :class="[selected ? 'selected' : '', customClass]" :style="colHeightStyle"
-          :key="widget.id" @click.native.stop="selectWidget(widget)">
-    <draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
-               handle=".drag-handler" @end="(evt) => onGridDragEnd(evt, widget.widgetList)"
-               @add="(evt) => onGridDragAdd(evt, widget.widgetList)"
-               @update="onGridDragUpdate" :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>
-
-    <div class="grid-col-action" v-if="designer.selectedId === widget.id && widget.type === 'grid-col'">
-      <i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')"
-         @click.stop="selectParentWidget(widget)"></i>
-      <i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
-         @click.stop="moveUpWidget()"></i>
-      <i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
-         @click.stop="moveDownWidget()"></i>
-      <i class="el-icon-copy-document" :title="i18nt('designer.hint.cloneWidget')" @click.stop="cloneGridCol(widget)"></i>
-      <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget"></i>
-    </div>
-
-    <div class="grid-col-handler" v-if="designer.selectedId === widget.id && widget.type === 'grid-col'">
-      <i>{{i18nt('designer.widgetLabel.' + widget.type)}}</i>
-    </div>
-  </el-col>
-</template>
-
-<script>
-  import Draggable from 'vuedraggable'
-  import i18n from "@/utils/i18n";
-  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
-  import refMixinDesign from "@/components/form-designer/refMixinDesign"
-
-  export default {
-    name: "GridColWidget",
-    componentName: "GridColWidget",
-    mixins: [i18n, refMixinDesign],
-    inject: ['refList'],
-    components: {
-      Draggable,
-      ...FieldComponents,
-    },
-    props: {
-      widget: Object,
-      parentWidget: Object,
-      parentList: Array,
-      indexOfParentList: Number,
-      designer: Object,
-
-      colHeight: {
-        type: String,
-        default: null
-      },
-
-    },
-    data() {
-      return {
-        layoutProps: {
-          span: this.widget.options.span || 12,
-          // md: this.widget.options.md || 12,
-          // sm: this.widget.options.sm || 12,
-          // xs: this.widget.options.xs || 12,
-          offset: this.widget.options.offset || 0,
-          push: this.widget.options.push || 0,
-          pull: this.widget.options.pull || 0,
-        }
-      }
-    },
-    computed: {
-      selected() {
-        return this.widget.id === this.designer.selectedId
-      },
-
-      customClass() {
-        return this.widget.options.customClass || ''
-      },
-
-      colHeightStyle() {
-        return !!this.colHeight ? {height: this.colHeight + 'px'} : {}
-      },
-
-    },
-    watch: {
-      'designer.formConfig.layoutType': {
-        handler(val) {
-          if (!!this.widget.options.responsive) {
-            if (val === 'H5') {
-              this.layoutProps.span = this.widget.options.xs || 12
-            } else if (val === 'Pad') {
-              this.layoutProps.span = this.widget.options.sm || 12
-            } else {
-              this.layoutProps.span = this.widget.options.md || 12
-            }
-          } else {
-            this.layoutProps.span = this.widget.options.span || 12
-          }
-        }
-      },
-
-      'widget.options.responsive': {
-        handler(val) {
-          let lyType = this.designer.formConfig.layoutType
-          if (!!val) {
-            if (lyType === 'H5') {
-              this.layoutProps.span = this.widget.options.xs || 12
-            } else if (lyType === 'Pad') {
-              this.layoutProps.span = this.widget.options.sm || 12
-            } else {
-              this.layoutProps.span = this.widget.options.md || 12
-            }
-          } else {
-            this.layoutProps.span = this.widget.options.span || 12
-          }
-        }
-      },
-
-      'widget.options.span': {
-        handler(val) {
-          this.layoutProps.span = val
-        }
-      },
-
-      'widget.options.md': {
-        handler(val) {
-          this.layoutProps.span = val
-        }
-      },
-
-      'widget.options.sm': {
-        handler(val) {
-          this.layoutProps.span = val
-        }
-      },
-
-      'widget.options.xs': {
-        handler(val) {
-          this.layoutProps.span = val
-        }
-      },
-
-      'widget.options.offset': {
-        handler(val) {
-          this.layoutProps.offset = val
-        }
-      },
-
-      'widget.options.push': {
-        handler(val) {
-          this.layoutProps.push = val
-        }
-      },
-
-      'widget.options.pull': {
-        handler(val) {
-          this.layoutProps.pull = val
-        }
-      },
-
-    },
-    created() {
-      this.initRefList()
-      this.initLayoutProps()
-    },
-    methods: {
-      initLayoutProps() {
-        if (!!this.widget.options.responsive) {
-          let lyType = this.designer.formConfig.layoutType
-          if (lyType === 'H5') {
-            this.layoutProps.span = this.widget.options.xs || 12
-          } else if (lyType === 'Pad') {
-            this.layoutProps.span = this.widget.options.sm || 12
-          } else {
-            this.layoutProps.span = this.widget.options.md || 12
-          }
-        } else {
-          this.layoutProps.span = this.widget.options.span
-        }
-      },
-
-      onGridDragEnd(evt, subList) {
-        //
-      },
-
-      onGridDragAdd(evt, subList) {
-        const newIndex = evt.newIndex
-        if (!!subList[newIndex]) {
-          this.designer.setSelected( subList[newIndex] )
-        }
-
-        this.designer.emitHistoryChange()
-        this.designer.emitEvent('field-selected', this.widget)
-      },
-
-      onGridDragUpdate() {
-        this.designer.emitHistoryChange()
-      },
-
-      selectWidget(widget) {
-        console.log('id: ' + widget.id)
-        this.designer.setSelected(widget)
-      },
-
-      checkContainerMove(evt) {
-        return this.designer.checkWidgetMove(evt)
-      },
-
-      selectParentWidget() {
-        if (this.parentWidget) {
-          this.designer.setSelected(this.parentWidget)
-        } else {
-          this.designer.clearSelected()
-        }
-      },
-
-      moveUpWidget() {
-        this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
-      },
-
-      moveDownWidget() {
-        this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
-      },
-
-      cloneGridCol(widget) {
-        this.designer.cloneGridCol(widget, this.parentWidget)
-      },
-
-      removeWidget() {
-        if (!!this.parentList) {
-          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.emitHistoryChange()
-          })
-        }
-      },
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .grid-cell {
-    min-height: 38px;
-    //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
-    padding: 3px;
-    outline: 1px dashed #336699;
-    position: relative;
-
-    .form-widget-list {
-      min-height: 28px;
-    }
-
-    .grid-col-action{
-      position: absolute;
-      bottom: 0;
-      right: -2px;
-      height: 28px;
-      line-height: 28px;
-      background: $--color-primary;
-      z-index: 999;
-
-      i {
-        font-size: 14px;
-        color: #fff;
-        margin: 0 5px;
-        cursor: pointer;
-      }
-    }
-
-    .grid-col-handler {
-      position: absolute;
-      top: -2px;
-      left: -2px;
-      height: 22px;
-      line-height: 22px;
-      background: $--color-primary;
-      z-index: 9;
-
-      i {
-        font-size: 14px;
-        font-style: normal;
-        color: #fff;
-        margin: 4px;
-        cursor: default;
-      }
-    }
-  }
-</style>

package/src/components/form-designer/form-widget/container-widget/grid-widget.vue

@@ -1,93 +0,0 @@
-<!--
-/**
- * author: vformAdmin
- * email: vdpadmin@163.com
- * website: https://www.vform666.com
- * date: 2021.08.18
- * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
- */
--->
-
-<template>
-  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
-                     :index-of-parent-list="indexOfParentList">
-
-    <el-row :key="widget.id" :gutter="widget.options.gutter" class="grid-container"
-            :class="[selected ? 'selected' : '', customClass]"
-            @click.native.stop="selectWidget(widget)">
-      <template v-for="(colWidget, colIdx) in widget.cols">
-        <grid-col-widget :widget="colWidget" :designer="designer" :key="colWidget.id" :parent-list="widget.cols"
-                         :index-of-parent-list="colIdx" :parent-widget="widget"
-                         :col-height="widget.options.colHeight"></grid-col-widget>
-      </template>
-    </el-row>
-
-  </container-wrapper>
-</template>
-
-<script>
-  import i18n from "@/utils/i18n"
-  import GridColWidget from "@/components/form-designer/form-widget/container-widget/grid-col-widget"
-  import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
-  import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
-  import refMixinDesign from "@/components/form-designer/refMixinDesign"
-
-  export default {
-    name: "grid-widget",
-    componentName: 'ContainerWidget',
-    mixins: [i18n, containerMixin, refMixinDesign],
-    inject: ['refList'],
-    components: {
-      ContainerWrapper,
-      GridColWidget
-    },
-    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 || ''
-      },
-
-    },
-    watch: {
-      //
-    },
-    created() {
-      this.initRefList()
-    },
-    mounted() {
-      //
-    },
-    methods: {
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .el-row.grid-container {
-    min-height: 50px;
-    //line-height: 48px;
-    //padding: 6px;
-    outline: 1px dashed #336699;
-
-    .form-widget-list {
-      min-height: 28px;
-    }
-
-  }
-
-  .grid-container.selected, .grid-cell.selected {
-    outline: 2px solid $--color-primary !important;
-  }
-
-</style>

package/src/components/form-designer/form-widget/container-widget/index.js

@@ -1,24 +0,0 @@
-import Vue from 'vue'
-
-const requireComponent = require.context('./', false, /\w+\.vue$/)
-
-/**
- * 容器组件时递归组件，且内部可以嵌套其他容器，局部注册会找不到组件，必须注册为全局组件，原因不明？！
- * begin
- *
-let comps = {}
-
-requireComponent.keys().map(fileName => {
-  let comp = requireComponent(fileName).default;
-  comps[comp.name] = comp
-})
-
-export default comps;
-
-end */
-
-/* 全局注册！！ */
-requireComponent.keys().map(fileName => {
-  let comp = requireComponent(fileName).default;
-  Vue.component(comp.name, comp)
-})