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

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

@@ -0,0 +1,123 @@
+<!--
+/**
+ * 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">
+
+    <div :key="widget.id" class="tab-container"
+         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
+      <el-tabs :type="widget.displayType" v-model="activeTab" @tab-click="onTabClick">
+
+        <el-tab-pane v-for="(tab, index) in widget.tabs" :key="index" :label="tab.options.label" :name="tab.options.name"
+                     @click.native.stop="selectWidget(widget)">
+          <draggable :list="tab.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
+                     handle=".drag-handler"
+                     @add="(evt) => onContainerDragAdd(evt, tab.widgetList)"
+                     @update="onContainerDragUpdate" :move="checkContainerMove">
+            <transition-group name="fade" tag="div" class="form-widget-list">
+              <template v-for="(subWidget, swIdx) in tab.widgetList">
+                <template v-if="'container' === subWidget.category">
+                  <component :is="subWidget.type + '-widget'" :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="tab.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="tab.widgetList"
+                                :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></component>
+                </template>
+              </template>
+            </transition-group>
+          </draggable>
+        </el-tab-pane>
+
+      </el-tabs>
+    </div>
+
+  </container-wrapper>
+</template>
+
+<script>
+  import Draggable from 'vuedraggable'
+  import i18n from "@/utils/i18n"
+  import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
+  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: "tab-widget",
+    componentName: 'ContainerWidget',
+    mixins: [i18n, containerMixin, refMixinDesign],
+    inject: ['refList'],
+    components: {
+      ContainerWrapper,
+      Draggable,
+
+      ...FieldComponents,
+    },
+    props: {
+      widget: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+    },
+    data() {
+      return {
+        activeTab: 'tab1',
+        //
+      }
+    },
+    computed: {
+      selected() {
+        return this.widget.id === this.designer.selectedId
+      },
+
+      customClass() {
+        return this.widget.options.customClass || ''
+      },
+
+    },
+    watch: {
+      //
+    },
+    created() {
+      this.initRefList()
+    },
+    mounted() {
+      //
+    },
+    methods: {
+      onTabClick(evt) {
+        let paneName = evt.paneName
+        this.widget.tabs.forEach((tp) => {
+          tp.options.active = tp.options.name === paneName;
+        })
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tab-container {
+    //padding: 5px;
+    margin: 2px;
+
+    .form-widget-list {
+      min-height: 28px;
+    }
+  }
+
+  .tab-container.selected {
+    outline: 2px solid $--color-primary !important;
+  }
+
+</style>

package/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue

@@ -0,0 +1,347 @@
+<template>
+  <td class="table-cell" :class="[selected ? 'selected' : '', customClass]"
+      :style="{width: widget.options.cellWidth + '!important' || '', height: widget.options.cellHeight + '!important' || '', 'word-break': !!widget.options.wordBreak ? 'break-all' : 'normal'}"
+      :colspan="widget.options.colspan || 1" :rowspan="widget.options.rowspan || 1"
+      @click.stop="selectWidget(widget)">
+    <draggable :list="widget.widgetList" class="draggable-div" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
+               handle=".drag-handler" @end="(evt) => onTableDragEnd(evt, widget.widgetList)"
+               @add="(evt) => onTableDragAdd(evt, widget.widgetList)"
+               @update="onTableDragUpdate" :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="table-cell-action" v-if="designer.selectedId === widget.id && widget.type === 'table-cell'">
+      <i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')"
+         @click.stop="selectParentWidget()"></i>
+      <el-dropdown trigger="click" @command="handleTableCellCommand" size="small">
+        <i class="el-icon-menu" :title="i18nt('designer.hint.cellSetting')"></i>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="insertLeftCol">{{i18nt('designer.setting.insertColumnToLeft')}}</el-dropdown-item>
+          <el-dropdown-item command="insertRightCol">{{i18nt('designer.setting.insertColumnToRight')}}</el-dropdown-item>
+          <el-dropdown-item command="insertAboveRow">{{i18nt('designer.setting.insertRowAbove')}}</el-dropdown-item>
+          <el-dropdown-item command="insertBelowRow">{{i18nt('designer.setting.insertRowBelow')}}</el-dropdown-item>
+          <el-dropdown-item command="mergeLeftCol" :disabled="mergeLeftColDisabled" divided>{{i18nt('designer.setting.mergeLeftColumn')}}</el-dropdown-item>
+          <el-dropdown-item command="mergeRightCol" :disabled="mergeRightColDisabled">{{i18nt('designer.setting.mergeRightColumn')}}</el-dropdown-item>
+          <el-dropdown-item command="mergeWholeRow" :disabled="mergeWholeRowDisabled">{{i18nt('designer.setting.mergeEntireRow')}}</el-dropdown-item>
+          <el-dropdown-item command="mergeAboveRow" :disabled="mergeAboveRowDisabled" divided>{{i18nt('designer.setting.mergeRowAbove')}}</el-dropdown-item>
+          <el-dropdown-item command="mergeBelowRow" :disabled="mergeBelowRowDisabled">{{i18nt('designer.setting.mergeRowBelow')}}</el-dropdown-item>
+          <el-dropdown-item command="mergeWholeCol" :disabled="mergeWholeColDisabled">{{i18nt('designer.setting.mergeEntireColumn')}}</el-dropdown-item>
+          <el-dropdown-item command="undoMergeRow" :disabled="undoMergeRowDisabled" divided>{{i18nt('designer.setting.undoMergeRow')}}</el-dropdown-item>
+          <el-dropdown-item command="undoMergeCol" :disabled="undoMergeColDisabled">{{i18nt('designer.setting.undoMergeCol')}}</el-dropdown-item>
+          <el-dropdown-item command="deleteWholeCol" :disabled="deleteWholeColDisabled" divided>{{i18nt('designer.setting.deleteEntireCol')}}</el-dropdown-item>
+          <el-dropdown-item command="deleteWholeRow" :disabled="deleteWholeRowDisabled">{{i18nt('designer.setting.deleteEntireRow')}}</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+
+    <div class="table-cell-handler" v-if="designer.selectedId === widget.id && widget.type === 'table-cell'">
+      <i>{{i18nt('designer.widgetLabel.' + widget.type)}}</i>
+    </div>
+  </td>
+</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: "TableCellWidget",
+    componentName: "TableCellWidget",
+    mixins: [i18n, refMixinDesign],
+    inject: ['refList'],
+    components: {
+      Draggable,
+      ...FieldComponents,
+    },
+    props: {
+      widget: Object,
+      parentWidget: Object,
+      parentList: Array,
+
+      rowIndex: Number,
+      colIndex: Number,
+      rowLength: Number,
+      colLength: Number,
+      colArray: Array,
+      rowArray: Array,
+
+      designer: Object,
+    },
+    computed: {
+      selected() {
+        return this.widget.id === this.designer.selectedId
+      },
+
+      customClass() {
+        return this.widget.options.customClass || ''
+      },
+
+      mergeLeftColDisabled() {
+        return (this.colIndex <= 0) || (this.colArray[this.colIndex - 1].options.rowspan !== this.widget.options.rowspan)
+      },
+
+      mergeRightColDisabled() {
+        let rightColIndex = this.colIndex + this.widget.options.colspan
+        return (this.colIndex >= this.colLength - 1) || (rightColIndex > this.colLength -1)
+            || (this.colArray[rightColIndex].options.rowspan !== this.widget.options.rowspan)
+      },
+
+      mergeWholeRowDisabled() {
+        return (this.colLength <= 1) || (this.colLength === this.widget.options.colspan)
+      },
+
+      mergeAboveRowDisabled() {
+        return (this.rowIndex <= 0) || (this.rowArray[this.rowIndex - 1].cols[this.colIndex].options.colspan
+            !== this.widget.options.colspan)
+
+        //return this.rowIndex <= 0
+        //return (this.rowIndex <= 0) || (this.widget.options.colspan !== this.rowArray) //TODO
+      },
+
+      mergeBelowRowDisabled() {
+        let belowRowIndex = this.rowIndex + this.widget.options.rowspan
+        return (this.rowIndex >= this.rowLength - 1) || (belowRowIndex > this.rowLength -1)
+            || (this.rowArray[belowRowIndex].cols[this.colIndex].options.colspan !== this.widget.options.colspan)
+      },
+
+      mergeWholeColDisabled() {
+        return (this.rowLength <= 1) || (this.rowLength === this.widget.options.rowspan)
+      },
+
+      undoMergeColDisabled() {
+        return this.widget.merged || (this.widget.options.colspan <= 1)
+      },
+
+      undoMergeRowDisabled() {
+        return this.widget.merged || (this.widget.options.rowspan <= 1)
+      },
+
+      deleteWholeColDisabled() {
+        //return this.colLength === 1
+        return (this.colLength === 1) || (this.widget.options.colspan === this.colLength)
+      },
+
+      deleteWholeRowDisabled() {
+        return (this.rowLength === 1) || (this.widget.options.rowspan === this.rowLength)
+      },
+
+    },
+    watch: {
+      //
+    },
+    created() {
+      this.initRefList()
+    },
+    methods: {
+      selectWidget(widget) {
+        this.designer.setSelected(widget)
+      },
+
+      checkContainerMove(evt) {
+        return this.designer.checkWidgetMove(evt)
+      },
+
+      onTableDragEnd(obj, subList) {
+        //
+      },
+
+      onTableDragAdd(evt, subList) { //重复代码，可合并
+        const newIndex = evt.newIndex
+        if (!!subList[newIndex]) {
+          this.designer.setSelected( subList[newIndex] )
+        }
+
+        this.designer.emitHistoryChange()
+        this.designer.emitEvent('field-selected', this.widget)
+      },
+
+      onTableDragUpdate() {
+        this.designer.emitHistoryChange()
+      },
+
+      selectParentWidget() {
+        if (this.parentWidget) {
+          this.designer.setSelected(this.parentWidget)
+        } else {
+          this.designer.clearSelected()
+        }
+      },
+
+      handleTableCellCommand(command) {
+        if (command === 'insertLeftCol') {
+          this.insertLeftCol()
+        } else if (command === 'insertRightCol') {
+          this.insertRightCol()
+        } else if (command === 'insertAboveRow') {
+          this.insertAboveRow()
+        } else if (command === 'insertBelowRow') {
+          this.insertBelowRow()
+        } else if (command === 'mergeLeftCol') {
+          this.mergeLeftCol()
+        } else if (command === 'mergeRightCol') {
+          this.mergeRightCol()
+        } else if (command === 'mergeWholeCol') {
+          this.mergeWholeCol()
+        } else if (command === 'mergeAboveRow') {
+          this.mergeAboveRow()
+        } else if (command === 'mergeBelowRow') {
+          this.mergeBelowRow()
+        } else if (command === 'mergeWholeRow') {
+          this.mergeWholeRow()
+        } else if (command === 'undoMergeCol') {
+          this.undoMergeCol()
+        } else if (command === 'undoMergeRow') {
+          this.undoMergeRow()
+        } else if (command === 'deleteWholeCol') {
+          this.deleteWholeCol()
+        } else if (command === 'deleteWholeRow') {
+          this.deleteWholeRow()
+        }
+      },
+
+      insertLeftCol() {
+        this.designer.insertTableCol(this.parentWidget, this.colIndex, this.rowIndex, true)
+      },
+
+      insertRightCol() {
+        this.designer.insertTableCol(this.parentWidget, this.colIndex, this.rowIndex, false)
+      },
+
+      insertAboveRow() {
+        this.designer.insertTableRow(this.parentWidget, this.rowIndex, this.rowIndex, this.colIndex, true)
+      },
+
+      insertBelowRow() {
+        this.designer.insertTableRow(this.parentWidget, this.rowIndex, this.rowIndex, this.colIndex, false)
+      },
+
+      mergeLeftCol() {
+        //this.designer.mergeTableColumn(this.colArray, this.colIndex, true)
+        this.designer.mergeTableCol(this.rowArray, this.colArray, this.rowIndex, this.colIndex, true, this.widget)
+      },
+
+      mergeRightCol() {
+        //this.designer.mergeTableColumn(this.colArray, this.colIndex, false)
+        this.designer.mergeTableCol(this.rowArray, this.colArray, this.rowIndex, this.colIndex, false, this.widget)
+      },
+
+      mergeWholeRow() {
+        this.designer.mergeTableWholeRow(this.rowArray, this.colArray, this.rowIndex, this.colIndex)
+      },
+
+      mergeAboveRow() {
+        this.designer.mergeTableRow(this.rowArray, this.rowIndex, this.colIndex, true, this.widget)
+      },
+
+      mergeBelowRow() {
+        this.designer.mergeTableRow(this.rowArray, this.rowIndex, this.colIndex, false, this.widget)
+      },
+
+      mergeWholeCol() {
+        this.designer.mergeTableWholeCol(this.rowArray, this.colArray, this.rowIndex, this.colIndex)
+      },
+
+      undoMergeCol() {
+        this.designer.undoMergeTableCol(this.rowArray, this.rowIndex, this.colIndex,
+            this.widget.options.colspan, this.widget.options.rowspan)
+      },
+
+      undoMergeRow() {
+        this.designer.undoMergeTableRow(this.rowArray, this.rowIndex, this.colIndex,
+            this.widget.options.colspan, this.widget.options.rowspan)
+      },
+
+      deleteWholeCol() {
+        this.designer.deleteTableWholeCol(this.rowArray, this.colIndex)
+      },
+
+      deleteWholeRow() {
+        this.designer.deleteTableWholeRow(this.rowArray, this.rowIndex)
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .table-cell {
+    //padding: 3px;
+    border: 1px dashed #336699;
+    display: table-cell;
+    position: relative;
+
+    .draggable-div {
+      position: relative;
+      height: 100%;
+    }
+
+    .form-widget-list {
+      border: 1px dashed #336699;
+      margin: 3px;
+
+      //min-height: 36px;
+      height: 100%;
+
+      /*position: absolute;*/
+      /*top: 0;*/
+      /*right: 0;*/
+      /*bottom: 0;*/
+      /*left: 0;*/
+    }
+
+    .table-cell-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;
+      }
+    }
+
+    .table-cell-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: default;  //cursor: move;
+      }
+    }
+
+  }
+
+  .table-cell.selected {
+    outline: 2px solid $--color-primary !important;
+  }
+</style>

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

@@ -0,0 +1,116 @@
+<!--
+/**
+ * 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">
+
+    <div :key="widget.id" class="table-container"
+         :class="[selected ? 'selected' : '', customClass]" @click.stop="selectWidget(widget)">
+      <table class="table-layout">
+        <tbody>
+        <tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
+          <template v-for="(colWidget, colIdx) in row.cols">
+            <table-cell-widget v-if="!colWidget.merged" :widget="colWidget" :designer="designer"
+                               :key="colWidget.id" :parent-list="widget.cols"
+                               :row-index="rowIdx" :row-length="widget.rows.length"
+                               :col-index="colIdx" :col-length="row.cols.length"
+                               :col-array="row.cols" :row-array="widget.rows"
+                               :parent-widget="widget"></table-cell-widget>
+          </template>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+  </container-wrapper>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
+  import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
+  import TableCellWidget from "@/components/form-designer/form-widget/container-widget/table-cell-widget"
+  import refMixinDesign from "@/components/form-designer/refMixinDesign"
+
+  export default {
+    name: "table-widget",
+    componentName: 'ContainerWidget',
+    mixins: [i18n, containerMixin, refMixinDesign],
+    inject: ['refList'],
+    components: {
+      ContainerWrapper,
+      TableCellWidget,
+    },
+    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>
+  div.table-container {
+    padding: 5px;
+    border: 1px dashed #336699;
+    box-sizing: border-box;
+
+    table.table-layout {
+      width: 100%;
+      text-align: center;
+      //border: 1px solid #c8ebfb;
+      border-collapse: collapse;
+      table-layout: fixed;
+
+      ::v-deep td {
+        height: 48px;
+        border: 1px dashed #336699;
+        padding: 3px;
+        display: table-cell;
+      }
+
+      .form-widget-list {
+        border: 1px dashed #336699;
+        min-height: 36px;
+      }
+    }
+  }
+
+  .table-container.selected {
+    outline: 2px solid $--color-primary !important;
+  }
+
+</style>

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

@@ -0,0 +1,87 @@
+<template>
+  <static-content-wrapper :designer="designer" :field="field" :design-state="designState" :display-style="field.options.displayStyle"
+                     :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-button ref="fieldEditor" :type="field.options.type" :size="field.options.size"
+               :plain="field.options.plain" :round="field.options.round"
+               :circle="field.options.circle" :icon="field.options.icon"
+               :disabled="field.options.disabled"
+               @click.native="handleButtonWidgetClick">
+      {{field.options.label}}</el-button>
+  </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: "button-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>