custom-variant-form 2.3.1 → 2.3.3

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

@@ -1,123 +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">
-
-    <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

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

@@ -1,116 +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">
-
-    <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

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