custom-variant-form 2.3.0 → 2.3.2

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

@@ -1,37 +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>
-</template>
-
-<script>
-  export default {
-    name: "container-item-wrapper",
-    props: {
-      widget: {
-        type: Object,
-        required: true
-      },
-    },
-    computed: {
-      customClass() {
-        return !!this.widget.options.customClass ? this.widget.options.customClass.join(' ') : ''
-      },
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-
-</style>

package/src/components/form-render/container-item/containerItemMixin.js

@@ -1,221 +0,0 @@
-import { traverseFieldWidgetsOfContainer } from "@/utils/util";
-
-export default {
-  inject: ['getGlobalDsv'],
-  computed: {
-    customClass() {
-      return this.widget.options.customClass || ''
-    },
-
-    formModel: {
-      cache: false,
-      get() {
-        return this.globalModel.formModel
-      }
-    },
-
-  },
-
-  mounted() {
-    this.callSetHidden()
-  },
-
-  methods: {
-    unregisterFromRefList() {  //销毁容器组件时注销组件ref
-      if ((this.refList !== null) && !!this.widget.options.name) {
-        let oldRefName = this.widget.options.name
-        delete this.refList[oldRefName]
-      }
-    },
-
-    /* 主动触发setHidden()方法，以清空被隐藏容器内字段组件的校验规则！！ */
-    callSetHidden() {
-      if (this.widget.options.hidden === true) {
-        this.setHidden(true)
-      }
-    },
-
-    //--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
-    /* 提示：用户可自行扩充这些方法！！！ */
-
-    setHidden(flag) {
-      this.widget.options.hidden = flag
-
-      /* 容器被隐藏后，需要同步清除容器内部字段组件的校验规则 */
-      let clearRulesFn = (fieldWidget) => {
-        let fwName = fieldWidget.options.name
-        let fwRef = this.getWidgetRef(fwName)
-        if (flag && !!fwRef && !!fwRef.clearFieldRules) {
-          fwRef.clearFieldRules()
-        }
-
-        if (!flag && !!fwRef && !!fwRef.buildFieldRules) {
-          fwRef.buildFieldRules()
-        }
-      }
-
-      traverseFieldWidgetsOfContainer(this.widget, clearRulesFn)
-    },
-
-    activeTab(tabIndex) { //tabIndex从0计数
-      if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
-        this.widget.tabs.forEach((tp, idx) => {
-          tp.options.active = idx === tabIndex
-          if (idx === tabIndex) {
-            this.activeTabName = tp.options.name
-          }
-        })
-      }
-    },
-
-    disableTab(tabIndex) {
-      if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
-        this.widget.tabs[tabIndex].options.disabled = true
-      }
-    },
-
-    enableTab(tabIndex) {
-      if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
-        this.widget.tabs[tabIndex].options.disabled = false
-      }
-    },
-
-    hideTab(tabIndex) {
-      if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
-        this.widget.tabs[tabIndex].options.hidden = true
-      }
-    },
-
-    showTab(tabIndex) {
-      if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
-        this.widget.tabs[tabIndex].options.hidden = false
-      }
-    },
-
-    setWidgetOption(optionName, optionValue) { //通用组件选项修改API
-      if (this.widget.options.hasOwnProperty(optionName)) {
-        this.widget.options[optionName] = optionValue
-      }
-    },
-
-    /**
-     * 获取子表单的行数
-     */
-    getSubFormRowCount() {
-      return !this.rowIdData ? 0 : this.rowIdData.length
-    },
-
-    disableSubFormRow(rowIndex) {
-      this.widget.widgetList.forEach(subWidget => {
-        let swRefName = subWidget.options.name + '@row' + this.rowIdData[rowIndex]
-        let foundSW = this.getWidgetRef(swRefName)
-        if (!!foundSW) {
-          foundSW.setDisabled(true)
-        }
-      })
-    },
-
-    enableSubFormRow(rowIndex) {
-      this.widget.widgetList.forEach(subWidget => {
-        let swRefName = subWidget.options.name + '@row' + this.rowIdData[rowIndex]
-        let foundSW = this.getWidgetRef(swRefName)
-        if (!!foundSW) {
-          foundSW.setDisabled(false)
-        }
-      })
-    },
-
-    disableSubForm() {
-      if (this.rowIdData.length > 0) {
-        this.rowIdData.forEach((dataRow, rIdx) => {
-          this.disableSubFormRow(rIdx)
-        })
-      }
-
-      //禁用3个操作按钮
-      this.actionDisabled = true
-    },
-
-    enableSubForm() {
-      if (this.rowIdData.length > 0) {
-        this.rowIdData.forEach((dataRow, rIdx) => {
-          this.enableSubFormRow(rIdx)
-        })
-      }
-
-      //启用3个操作按钮
-      this.actionDisabled = false
-    },
-
-    resetSubForm() { //重置subForm数据为空
-      if (this.widget.type === 'sub-form') {
-        let subFormModel = this.formModel[this.widget.options.name]
-        if (!!subFormModel) {
-          subFormModel.splice(0, subFormModel.length)
-          this.rowIdData.splice(0, this.rowIdData.length)
-        }
-
-        if (this.widget.options.showBlankRow) {
-          this.addSubFormRow()
-        }
-      }
-    },
-
-    getSubFormValues(needValidation = true) {
-      if (this.widget.type === 'sub-form') {
-        //TODO: 逐行校验子表单！暂未实现！！
-        return this.formModel[this.widget.options.name]
-      } else {
-        this.$message.error(this.i18nt('render.hint.nonSubFormType'))
-      }
-    },
-
-    setSubFormValues(subFormValues) {
-      //TODO: 待实现！！
-    },
-
-    // validateField(fieldName) { //逐行校验子表单字段
-    //   //TODO:
-    // },
-    //
-    // validateSubForm() { //逐行校验子表单全部字段
-    //   //TODO:
-    // },
-
-    /**
-     * 动态增加自定义css样式
-     * @param className
-     */
-    addCssClass(className) {
-      if (!this.widget.options.customClass) {
-        this.widget.options.customClass = [className]
-      } else {
-        this.widget.options.customClass.push(className)
-      }
-    },
-
-    /**
-     * 动态移除自定义css样式
-     * @param className
-     */
-    removeCssClass(className) {
-      if (!this.widget.options.customClass) {
-        return
-      }
-
-      let foundIdx = -1
-      this.widget.options.customClass.map((cc, idx) => {
-        if (cc === className) {
-          foundIdx = idx
-        }
-      })
-      if (foundIdx > -1) {
-        this.widget.options.customClass.splice(foundIdx, 1)
-      }
-    },
-
-    //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
-
-  },
-
-}

package/src/components/form-render/container-item/grid-col-item.vue

@@ -1,126 +0,0 @@
-<template>
-  <el-col class="grid-cell" :class="[customClass]" v-bind="layoutProps" :style="colHeightStyle"
-          :key="widget.id" v-show="!widget.options.hidden">
-    <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
-      <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" :designer="null" :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>
-    </template>
-    <template v-else>
-      <el-col>
-        <div class="blank-cell"><span class="invisible-content">{{i18nt('render.hint.blankCellContent')}}</span></div>
-      </el-col>
-    </template>
-  </el-col>
-</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: "GridColItem",
-    componentName: 'ContainerItem',
-    mixins: [emitter, i18n, refMixin],
-    components: {
-      ...FieldComponents,
-    },
-    props: {
-      widget: Object,
-      parentWidget: Object,
-      parentList: Array,
-      indexOfParentList: Number,
-
-      colHeight: {
-        type: String,
-        default: null
-      },
-
-    },
-    inject: ['refList', 'globalModel', 'formConfig', 'previewState'],
-    data() {
-      return {
-        layoutProps: {
-          span: this.widget.options.span,
-          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: {
-      customClass() {
-        return this.widget.options.customClass || ''
-      },
-
-      colHeightStyle() {
-        return !!this.colHeight ? {height: this.colHeight + 'px'} : {}
-      },
-
-    },
-    created() {
-      this.initLayoutProps()
-      this.initRefList()
-    },
-    methods: {
-      initLayoutProps() {
-        if (!!this.widget.options.responsive) {
-          if (!!this.previewState) {
-            this.layoutProps.md = undefined
-            this.layoutProps.sm = undefined
-            this.layoutProps.xs = undefined
-
-            let lyType = this.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 = undefined
-          }
-        } else {
-          this.layoutProps.md = undefined
-          this.layoutProps.sm = undefined
-          this.layoutProps.xs = undefined
-        }
-      },
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .blank-cell {
-    font-style: italic;
-    color: #cccccc;
-
-    span.invisible-content {
-      opacity: 0;
-    }
-  }
-</style>

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

@@ -1,59 +0,0 @@
-<template>
-  <container-item-wrapper :widget="widget">
-
-    <el-row :key="widget.id" :gutter="widget.options.gutter" class="grid-container"
-            :class="[customClass]"
-            :ref="widget.id" v-show="!widget.options.hidden">
-      <template v-for="(colWidget, colIdx) in widget.cols">
-        <grid-col-item :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
-                       :index-of-parent-list="colIdx" :parent-widget="widget"
-                       :col-height="widget.options.colHeight">
-          <!-- 递归传递插槽！！！ -->
-          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-            <slot :name="slot" v-bind="scope"/>
-          </template>
-        </grid-col-item>
-      </template>
-    </el-row>
-
-  </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 GridColItem from './grid-col-item'
-  import containerItemMixin from "./containerItemMixin"
-
-  export default {
-    name: "vf-grid-item", //grid-item跟VueGridLayout全局注册组件重名，故特殊处理！！
-    componentName: 'ContainerItem',
-    mixins: [emitter, i18n, refMixin, containerItemMixin],
-    components: {
-      ContainerItemWrapper,
-      GridColItem,
-    },
-    props: {
-      widget: Object,
-    },
-    inject: ['refList', 'sfRefList', 'globalModel'],
-    created() {
-      this.initRefList()
-    },
-    mounted() {
-
-    },
-    beforeDestroy() {
-      this.unregisterFromRefList()
-    },
-    methods: {
-
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-
-</style>

package/src/components/form-render/container-item/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)
-})