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

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

@@ -0,0 +1,107 @@
+<!--
+/**
+ * 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

@@ -0,0 +1,93 @@
+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

@@ -0,0 +1,314 @@
+<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

@@ -0,0 +1,93 @@
+<!--
+/**
+ * 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

@@ -0,0 +1,24 @@
+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)
+})