skhj-variant 2.1.12

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

@@ -0,0 +1,34 @@
+<!--
+/**
+ * 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: Object,
+    },
+    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,136 @@
+import {generateId} from "@/utils/util";
+
+export default {
+  computed: {
+    customClass() {
+      return this.widget.options.customClass || ''
+    },
+
+    formModel: {
+      cache: false,
+      get() {
+        return this.globalModel.formModel
+      }
+    },
+
+  },
+
+  methods: {
+    unregisterFromRefList() {  //销毁容器组件时注销组件ref
+      if ((this.refList !== null) && !!this.widget.options.name) {
+        let oldRefName = this.widget.options.name
+        delete this.refList[oldRefName]
+      }
+    },
+
+    //--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
+    /* 提示：用户可自行扩充这些方法！！！ */
+
+    setHidden(flag) {
+      this.widget.options.hidden = flag
+    },
+
+    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
+      }
+    },
+
+    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)
+        })
+      }
+    },
+
+    enableSubForm() {
+      if (this.rowIdData.length > 0) {
+        this.rowIdData.forEach((dataRow, rIdx) => {
+          this.enableSubFormRow(rIdx)
+        })
+      }
+    },
+
+    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)
+        }
+      }
+    },
+
+    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'))
+      }
+    },
+
+    // validateField(fieldName) { //逐行校验子表单字段
+    //   //TODO:
+    // },
+    //
+    // validateSubForm() { //逐行校验子表单全部字段
+    //   //TODO:
+    // },
+
+    //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
+
+  },
+
+}

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

@@ -0,0 +1,115 @@
+<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="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :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="null" :key="swIdx" :parent-list="widget.widgetList"
+                        :index-of-parent-list="swIdx" :parent-widget="widget"></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 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: [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,54 @@
+<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"></grid-col-item>
+      </template>
+    </el-row>
+
+  </container-item-wrapper>
+</template>
+
+<script>
+  import emitter from 'element-ui/lib/mixins/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: "grid-item",
+    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)
+})