custom-variant-form 2.3.1 → 2.3.2

package/src/components/form-render/container-item/sub-form-item.vue

@@ -1,417 +0,0 @@
-<template>
-  <container-item-wrapper :widget="widget">
-
-    <div :key="widget.id" class="sub-form-container"
-         v-show="!widget.options.hidden">
-      <el-row class="header-row">
-        <div class="action-header-column">
-          <span class="action-label">{{i18nt('render.hint.subFormAction')}}</span>
-          <el-button :disabled="actionDisabled" round type="primary" size="mini" class="action-button" @click="addSubFormRow"
-                     :title="i18nt('render.hint.subFormAddActionHint')">
-            {{i18nt('render.hint.subFormAddAction')}}<i class="el-icon-plus el-icon-right"></i></el-button>
-        </div>
-        <template v-for="(subWidget) in widget.widgetList">
-          <div :key="subWidget.id + 'thc'" class="field-header-column"
-               :class="[getLabelAlign(widget, subWidget), !!subWidget.options.required ? 'is-required' : '']"
-               :style="{width: subWidget.options.columnWidth}">
-            <span v-if="!!subWidget.options.labelIconClass" class="custom-label">
-              <template v-if="subWidget.options.labelIconPosition === 'front'">
-                <template v-if="!!subWidget.options.labelTooltip">
-                  <el-tooltip :content="subWidget.options.labelTooltip" effect="light">
-                    <i :class="subWidget.options.labelIconClass"></i></el-tooltip>{{subWidget.options.label}}</template>
-                <template v-else>
-                  <i :class="subWidget.options.labelIconClass"></i>{{subWidget.options.label}}</template>
-              </template>
-              <template v-else-if="subWidget.options.labelIconPosition === 'rear'">
-                <template v-if="!!subWidget.options.labelTooltip">
-                  {{subWidget.options.label}}<el-tooltip :content="subWidget.options.labelTooltip" effect="light">
-                  <i :class="subWidget.options.labelIconClass"></i></el-tooltip></template>
-                <template v-else>
-                  {{subWidget.options.label}}<i :class="subWidget.options.labelIconClass"></i></template>
-              </template>
-            </span>
-            <template v-else>
-              <span :title="subWidget.options.labelTooltip">{{subWidget.options.label}}</span></template>
-          </div>
-        </template>
-      </el-row>
-      <el-row v-for="(subFormRowId, sfrIdx) in rowIdData" class="sub-form-row" :key="subFormRowId">
-        <div class="sub-form-action-column hide-label">
-          <div class="action-button-column">
-            <el-button :disabled="actionDisabled" circle type="" icon="el-icon-circle-plus-outline" @click="insertSubFormRow(sfrIdx)"
-                       :title="i18nt('render.hint.insertSubFormRow')"></el-button>
-            <el-button :disabled="actionDisabled" circle type="" icon="el-icon-delete" @click="deleteSubFormRow(sfrIdx)"
-                       :title="i18nt('render.hint.deleteSubFormRow')"></el-button>
-            <span v-if="widget.options.showRowNumber" class="row-number-span">#{{sfrIdx+1}}</span>
-          </div>
-        </div>
-        <template v-for="(subWidget, swIdx) in widget.widgetList">
-          <div class="sub-form-table-column hide-label" :key="subWidget.id + 'tc' + subFormRowId"
-               :style="{width: subWidget.options.columnWidth}">
-            <component :is="subWidget.type + '-widget'" :field="fieldSchemaData[sfrIdx][swIdx]"
-                          :key="fieldSchemaData[sfrIdx][swIdx].id" :parent-list="widget.widgetList"
-                          :index-of-parent-list="swIdx" :parent-widget="widget"
-                          :sub-form-row-id="subFormRowId"
-                          :sub-form-row-index="sfrIdx" :sub-form-col-index="swIdx">
-              <!-- 子表单暂不支持插槽！！！ -->
-            </component>
-          </div>
-        </template>
-      </el-row>
-    </div>
-
-  </container-item-wrapper>
-</template>
-
-<script>
-  import emitter from '@/utils/emitter'
-  import i18n from "../../../utils/i18n"
-  import {deepClone, generateId} from "../../../utils/util"
-  import refMixin from "../../../components/form-render/refMixin"
-  import ContainerItemWrapper from './container-item-wrapper'
-  import containerItemMixin from "./containerItemMixin";
-  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
-
-  export default {
-    name: "sub-form-item",
-    componentName: 'ContainerItem',
-    mixins: [emitter, i18n, refMixin, containerItemMixin],
-    components: {
-      ContainerItemWrapper,
-      ...FieldComponents,
-    },
-    props: {
-      widget: Object,
-    },
-    inject: ['refList', 'sfRefList', 'globalModel'],
-    data() {
-      return {
-        rowIdData: [],
-        fieldSchemaData: [],
-        actionDisabled: false,
-      }
-    },
-    created() {
-      this.initRefList()
-      this.registerSubFormToRefList()
-      this.initRowIdData(true)
-      this.initFieldSchemaData()
-      this.initEventHandler()
-    },
-    mounted() {
-      this.handleSubFormFirstRowAdd()  //默认添加首行后，主动触发相关事件！！
-    },
-    beforeDestroy() {
-      this.unregisterFromRefList()
-    },
-    methods: {
-      getLabelAlign(widget, subWidget) {
-        return subWidget.options.labelAlign || widget.options.labelAlign
-      },
-
-      registerSubFormToRefList() {
-        if (this.widget.type === 'sub-form') {
-          this.sfRefList[this.widget.options.name] = this
-        }
-      },
-
-      initRowIdData(initFlag) {
-        if (this.widget.type === 'sub-form') {
-          this.rowIdData.splice(0, this.rowIdData.length)  //清除数组必须用splice，length=0不会响应式更新！！
-          let subFormModel = this.formModel[this.widget.options.name]
-          if (!!subFormModel && (subFormModel.length > 0)) {
-            subFormModel.forEach(() => {
-              this.rowIdData.push('id' + generateId())
-            })
-
-            if (!!initFlag) {
-              //注意：事件触发需延期执行，SumFormDataChange事件处理代码中可能存在尚未创建完成的组件！！
-              setTimeout(() => {
-                this.handleSubFormRowChange(subFormModel)
-              }, 800)
-            }
-          }
-        }
-      },
-
-      addToRowIdData() {
-        this.rowIdData.push('id' + generateId())
-      },
-
-      insertToRowIdData(rowIndex) {
-        this.rowIdData.splice(rowIndex, 0, 'id' + generateId())
-      },
-
-      deleteFromRowIdData(rowIndex) {
-        this.rowIdData.splice(rowIndex, 1)
-      },
-
-      getRowIdData() {
-        return this.rowIdData
-      },
-
-      getWidgetRefOfSubForm(widgetName, rowIndex) {
-        let realWidgetName = widgetName + '@row' + this.rowIdData[rowIndex]
-        return this.getWidgetRef(realWidgetName)
-      },
-
-      initFieldSchemaData() {  //初始化fieldSchemaData！！！
-        if (this.widget.type !== 'sub-form') {
-          return
-        }
-
-        let rowLength = this.rowIdData.length
-        this.fieldSchemaData.splice(0, this.fieldSchemaData.length)  //清除数组必须用splice，length=0不会响应式更新！！
-        if (rowLength > 0) {
-          for (let i = 0; i < rowLength; i++) {
-            let fieldSchemas = []
-            this.widget.widgetList.forEach(swItem => {
-              fieldSchemas.push( this.cloneFieldSchema(swItem) )
-            })
-            this.fieldSchemaData.push(fieldSchemas)
-          }
-        }
-      },
-
-      addToFieldSchemaData(rowIndex) {
-        let fieldSchemas = []
-        this.widget.widgetList.forEach(swItem => {
-          fieldSchemas.push( this.cloneFieldSchema(swItem) )
-        })
-
-        if (rowIndex === undefined) {
-          this.fieldSchemaData.push(fieldSchemas)
-        } else {
-          this.fieldSchemaData.splice(rowIndex, 0, fieldSchemas)
-        }
-      },
-
-      deleteFromFieldSchemaData(rowIndex) {
-        this.fieldSchemaData.splice(rowIndex, 1)
-      },
-
-      cloneFieldSchema(fieldWidget) {
-        let newFieldSchema = deepClone(fieldWidget)
-        newFieldSchema.id = fieldWidget.type + generateId()
-        return newFieldSchema
-      },
-
-      initEventHandler() {
-        if (this.widget.type !== 'sub-form') {
-          return
-        }
-
-        this.$on('setFormData', (newFormData) => {
-          this.initRowIdData(false)
-          this.initFieldSchemaData()
-
-          let subFormData = newFormData[this.widget.options.name] || []
-          setTimeout(() => {  //延时触发SubFormRowChange事件, 便于更新计算字段！！
-            this.handleSubFormRowChange(subFormData)
-          }, 800)
-        })
-      },
-
-      handleSubFormFirstRowAdd() {
-        if (this.widget.type !== 'sub-form') {
-          return
-        }
-
-        if (!!this.widget.options.showBlankRow && (this.rowIdData.length === 1)) {
-          let oldSubFormData = this.formModel[this.widget.options.name] || []
-          this.handleSubFormRowAdd(oldSubFormData, this.rowIdData[0])
-          this.handleSubFormRowChange(oldSubFormData)
-        }
-      },
-
-      addSubFormRow() {
-        let newSubFormDataRow = {}
-        this.widget.widgetList.forEach(subFormItem => {
-          if (!!subFormItem.formItemFlag) {
-            newSubFormDataRow[subFormItem.options.name] = subFormItem.options.defaultValue
-          }
-        })
-
-        let oldSubFormData = this.formModel[this.widget.options.name] || []
-        oldSubFormData.push(newSubFormDataRow)
-        this.addToRowIdData()
-        this.addToFieldSchemaData()
-
-        this.handleSubFormRowAdd(oldSubFormData, this.rowIdData[oldSubFormData.length - 1])
-        this.handleSubFormRowChange(oldSubFormData)
-      },
-
-      insertSubFormRow(beforeFormRowIndex) {
-        let newSubFormDataRow = {}
-        this.widget.widgetList.forEach(subFormItem => {
-          if (!!subFormItem.formItemFlag) {
-            newSubFormDataRow[subFormItem.options.name] = subFormItem.options.defaultValue
-          }
-        })
-
-        let oldSubFormData = this.formModel[this.widget.options.name] || []
-        oldSubFormData.splice(beforeFormRowIndex, 0, newSubFormDataRow)
-        this.insertToRowIdData(beforeFormRowIndex)
-        this.addToFieldSchemaData(beforeFormRowIndex)
-
-        this.handleSubFormRowInsert(oldSubFormData, this.rowIdData[beforeFormRowIndex])
-        this.handleSubFormRowChange(oldSubFormData)
-      },
-
-      deleteSubFormRow(formRowIndex) {
-        this.$confirm(this.i18nt('render.hint.deleteSubFormRow') + '?', this.i18nt('render.hint.prompt'), {
-          confirmButtonText: this.i18nt('render.hint.confirm'),
-          cancelButtonText: this.i18nt('render.hint.cancel')
-        }).then(() => {
-          let oldSubFormData = this.formModel[this.widget.options.name] || []
-          let deletedDataRow = deepClone(oldSubFormData[formRowIndex])
-          oldSubFormData.splice(formRowIndex, 1)
-          this.deleteFromRowIdData(formRowIndex)
-          this.deleteFromFieldSchemaData(formRowIndex)
-
-          this.handleSubFormRowDelete(oldSubFormData, deletedDataRow)
-          this.handleSubFormRowChange(oldSubFormData)
-        }).catch(() => {
-          //
-        })
-      },
-
-      handleSubFormRowChange(subFormData) {
-        if (!!this.widget.options.onSubFormRowChange) {
-          let customFunc = new Function('subFormData', this.widget.options.onSubFormRowChange)
-          customFunc.call(this, subFormData)
-        }
-      },
-
-      handleSubFormRowAdd(subFormData, newRowId) {
-        if (!!this.widget.options.onSubFormRowAdd) {
-          let customFunc = new Function('subFormData', 'newRowId', this.widget.options.onSubFormRowAdd)
-          customFunc.call(this, subFormData, newRowId)
-        }
-      },
-
-      handleSubFormRowInsert(subFormData, newRowId) {
-        if (!!this.widget.options.onSubFormRowInsert) {
-          let customFunc = new Function('subFormData', 'newRowId', this.widget.options.onSubFormRowInsert)
-          customFunc.call(this, subFormData, newRowId)
-        }
-      },
-
-      handleSubFormRowDelete(subFormData, deletedDataRow) {
-        if (!!this.widget.options.onSubFormRowDelete) {
-          let customFunc = new Function('subFormData', 'deletedDataRow', this.widget.options.onSubFormRowDelete)
-          customFunc.call(this, subFormData, deletedDataRow)
-        }
-      },
-
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-  .sub-form-container {
-    margin-bottom: 8px;
-    text-align: left; //IE浏览器强制居左对齐
-
-    ::v-deep .el-row.header-row {
-      padding-bottom: 0;
-    }
-
-    ::v-deep .el-row.sub-form-row {
-      padding-top: 3px;
-      padding-bottom: 3px;
-
-      .row-number-span {
-        margin-left: 16px;
-      }
-    }
-  }
-
-  div.action-header-column {
-    display: inline-block;
-    width: 120px;
-
-    .action-label {
-      margin-right: 12px;
-    }
-
-    .action-button {
-      padding-left: 8px;
-      padding-right: 8px;
-    }
-  }
-
-  div.field-header-column {
-    display: inline-block;
-    //overflow: hidden;
-    //white-space: nowrap;  //文字超出长度不自动换行
-    //text-overflow: ellipsis;  //文字超出长度显示省略号
-
-    span.custom-label i {
-      margin: 0 3px;
-    }
-  }
-
-  div.field-header-column.is-required:before {
-    content: '*';
-    color: #F56C6C;
-    margin-right: 4px;
-  }
-
-  div.label-center-left {
-    text-align: left;
-  }
-
-  div.label-center-align {
-    text-align: center;
-  }
-
-  div.label-right-align {
-    text-align: right;
-  }
-
-  div.sub-form-action-column {
-    display: inline-block;
-    width: 120px;
-
-    ::v-deep .el-form-item {
-      margin-bottom: 0;
-    }
-
-    ::v-deep .el-button {
-      font-size: 18px;
-      padding: 0;
-      background: #DCDFE6;
-      border: 4px solid #DCDFE6;
-    }
-
-  }
-
-  div.sub-form-action-column.hide-label {
-    ::v-deep .el-form-item__label {
-      display: none;
-    }
-  }
-
-  div.sub-form-table-column {
-    display: inline-block;
-    //width: 200px;
-
-    ::v-deep .el-form-item {
-      margin-left: 4px;
-      margin-right: 4px;
-      margin-bottom: 0;
-    }
-
-    ::v-deep .el-form-item__content {
-      margin-left: 0 !important;
-    }
-  }
-
-  div.sub-form-table-column.hide-label {
-    ::v-deep .el-form-item__label {
-      display: none;
-    }
-  }
-
-</style>

package/src/components/form-render/container-item/tab-item.vue

@@ -1,99 +0,0 @@
-<template>
-  <container-item-wrapper :widget="widget">
-
-    <div :key="widget.id" class="tab-container"
-         v-show="!widget.options.hidden">
-      <el-tabs v-model="activeTabName" :type="widget.displayType" :ref="widget.id" :class="[customClass]">
-        <el-tab-pane v-for="(tab, index) in visibleTabs" :key="index" :label="tab.options.label"
-                     :disabled="tab.options.disabled" :name="tab.options.name">
-          <template v-for="(subWidget, swIdx) in tab.widgetList">
-            <template v-if="'container' === subWidget.category">
-              <component :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx" :parent-list="tab.widgetList"
-                              :index-of-parent-list="swIdx" :parent-widget="widget">
-                <!-- 递归传递插槽！！！ -->
-                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-                  <slot :name="slot" v-bind="scope"/>
-                </template>
-              </component>
-            </template>
-            <template v-else>
-              <component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="tab.widgetList"
-                            :index-of-parent-list="swIdx" :parent-widget="widget">
-                <!-- 递归传递插槽！！！ -->
-                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-                  <slot :name="slot" v-bind="scope"/>
-                </template>
-              </component>
-            </template>
-          </template>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-
-  </container-item-wrapper>
-</template>
-
-<script>
-  import emitter from '@/utils/emitter'
-  import i18n from "../../../utils/i18n"
-  import refMixin from "../../../components/form-render/refMixin"
-  import ContainerItemWrapper from './container-item-wrapper'
-  import containerItemMixin from "./containerItemMixin";
-  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
-
-  export default {
-    name: "tab-item",
-    componentName: 'ContainerItem',
-    mixins: [emitter, i18n, refMixin, containerItemMixin],
-    components: {
-      ContainerItemWrapper,
-      ...FieldComponents,
-    },
-    props: {
-      widget: Object,
-    },
-    inject: ['refList', 'sfRefList', 'globalModel'],
-    data() {
-      return {
-        activeTabName: '',
-      }
-    },
-    computed: {
-      visibleTabs() {
-        return this.widget.tabs.filter(tp => {
-          return !tp.options.hidden
-        })
-      },
-
-    },
-    created() {
-      this.initRefList()
-    },
-    mounted() {
-      this.initActiveTab()
-    },
-    beforeDestroy() {
-      this.unregisterFromRefList()
-    },
-    methods: {
-      initActiveTab() {
-        if ((this.widget.type === 'tab') && (this.widget.tabs.length > 0)) {
-          let activePanes = this.widget.tabs.filter((tp) => {
-            return tp.options.active === true
-          })
-          if (activePanes.length > 0) {
-            this.activeTabName = activePanes[0].options.name
-          } else {
-            this.activeTabName = this.widget.tabs[0].options.name
-          }
-        }
-      },
-
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-
-
-</style>

package/src/components/form-render/container-item/table-cell-item.vue

@@ -1,72 +0,0 @@
-<template>
-  <td class="table-cell" :class="[customClass]"
-      :colspan="widget.options.colspan || 1" :rowspan="widget.options.rowspan || 1"
-      :style="{width: widget.options.cellWidth + ' !important' || '', height: widget.options.cellHeight + ' !important' || '', 'word-break': !!widget.options.wordBreak ? 'break-all' : 'normal'}">
-    <template v-for="(subWidget, swIdx) in widget.widgetList">
-      <template v-if="'container' === subWidget.category">
-        <component :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
-                        :index-of-parent-list="swIdx" :parent-widget="widget">
-          <!-- 递归传递插槽！！！ -->
-          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-            <slot :name="slot" v-bind="scope"/>
-          </template>
-        </component>
-      </template>
-      <template v-else>
-        <component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="widget.widgetList"
-                      :index-of-parent-list="swIdx" :parent-widget="widget">
-          <!-- 递归传递插槽！！！ -->
-          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-            <slot :name="slot" v-bind="scope"/>
-          </template>
-        </component>
-      </template>
-    </template>
-  </td>
-</template>
-
-<script>
-  import emitter from '@/utils/emitter'
-  import i18n from "../../../utils/i18n"
-  import refMixin from "../../../components/form-render/refMixin"
-  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
-
-  export default {
-    name: "TableCellItem",
-    componentName: "ContainerItem",
-    mixins: [emitter, i18n, refMixin],
-    components: {
-      ...FieldComponents,
-    },
-    props: {
-      widget: Object,
-
-      rowIndex: Number,
-      colIndex: Number,
-    },
-    inject: ['refList', 'globalModel'],
-    computed: {
-      customClass() {
-        return this.widget.options.customClass || ''
-      },
-
-    },
-    created() {
-      /* tableCell不生成组件引用，故无须调用initRefList！！ */
-      //this.initRefList()
-    },
-    methods: {
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  td.table-cell {
-    display: table-cell;
-    height: 36px;
-    //border: 1px dashed #336699;
-    border: 1px solid #e5e5e5;
-  }
-
-</style>

package/src/components/form-render/container-item/table-item.vue

@@ -1,70 +0,0 @@
-<template>
-  <container-item-wrapper :widget="widget">
-
-    <div :key="widget.id" class="table-container"
-         v-show="!widget.options.hidden">
-      <table :ref="widget.id" class="table-layout" :class="[customClass]">
-        <tbody>
-        <tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
-          <template v-for="(colWidget, colIdx) in row.cols">
-            <table-cell-item v-if="!colWidget.merged" :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
-                             :row-index="rowIdx" :col-index="colIdx" :parent-widget="widget">
-              <!-- 递归传递插槽！！！ -->
-              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-                <slot :name="slot" v-bind="scope"/>
-              </template>
-            </table-cell-item>
-          </template>
-        </tr>
-        </tbody>
-      </table>
-    </div>
-
-  </container-item-wrapper>
-</template>
-
-<script>
-  import emitter from '@/utils/emitter'
-  import i18n from "../../../utils/i18n"
-  import refMixin from "../../../components/form-render/refMixin"
-  import ContainerItemWrapper from './container-item-wrapper'
-  import TableCellItem from './table-cell-item'
-  import containerItemMixin from "./containerItemMixin";
-
-  export default {
-    name: "table-item",
-    componentName: 'ContainerItem',
-    mixins: [emitter, i18n, refMixin, containerItemMixin],
-    components: {
-      ContainerItemWrapper,
-      TableCellItem,
-    },
-    props: {
-      widget: Object,
-    },
-    inject: ['refList', 'sfRefList', 'globalModel'],
-    created() {
-      this.initRefList()
-    },
-    mounted() {
-
-    },
-    beforeDestroy() {
-      this.unregisterFromRefList()
-    },
-    methods: {
-
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-  div.table-container {
-    table.table-layout {
-      width: 100%;
-      table-layout: fixed;
-      border-collapse: collapse;
-    }
-  }
-
-</style>