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

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

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

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

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

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

@@ -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)
+})