vue2-client 1.15.84 → 1.15.86

package/src/base-client/components/common/XFormGroup/XFormGroup.vue

@@ -1,301 +1,301 @@
-<template>
-  <div :class="groups.length ? 'XFormGroupClass' : ''">
-    <a-empty v-if="loadingErr" description="配置走丢了"/>
-    <a-spin v-else tip="正在努力加载..." :spinning="spinning" wrapperClassName="heigth100">
-      <a-row :gutter="24" style="height: 100%">
-        <a-col :span="3" v-if="showLeftTab && groups.length">
-          <a-tabs tab-position="left" v-model="activeTab" @change="scrollToGroup">
-            <template v-for="(item, index) in groups">
-              <a-tab-pane
-                :tab="item.describe"
-                :key="index"
-                v-if="item.describe && (formShow[`show${item.groupName}`] || formShow[`show${item.slotName}`])">
-              </a-tab-pane>
-            </template>
-          </a-tabs>
-        </a-col>
-        <a-col :span="showLeftTab ? 21 : 24" class="formGroupContext" ref="formGroupContext">
-          <div class="group-item" :ref="`group-${index}`" :key="index" v-for="(item, index) in groups">
-            <a-row :style="{ marginTop: index === 0 ? '' : '8px' }" v-if="formShow[`show${item.groupName}`] || formShow[`show${item.slotName}`]">
-              <a-col :span="5">
-                <span class="xFormGroupTitle">{{ item.describe }}</span>
-              </a-col>
-            </a-row>
-            <div v-show="formShow[`show${item.slotName}`]">
-              <template v-if="item.formGroupType === 'slot'">
-                <slot :name="item.slotName" :data="allFormData" :index="index">
-                  <a-empty :description="`[${item.describe}:${item.slotName}]插槽没有使用`"/>
-                </slot>
-              </template>
-            </div>
-            <x-add-native-form
-              @x-form-item-emit-func="emitFunc"
-              v-if="item.formGroupType !== 'slot' && formShow[`show${item.groupName}`]"
-              :ref="`nativeForm-${index}`"/>
-          </div>
-        </a-col>
-      </a-row>
-    </a-spin>
-  </div>
-</template>
-
-<script>
-import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
-
-export default {
-  name: 'XFormGroup',
-  components: {
-    XAddNativeForm
-  },
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      formList: [],
-      groups: [],
-      modifyModelData: {},
-      serviceName: '',
-      showLeftTab: false,
-      showSubmitBtn: false,
-      loading: false,
-      allFormData: {},
-      businessType: {},
-      formShow: {},
-      env: 'dev',
-      spinning: true,
-      loadingErr: false,
-      activeTab: 0
-    }
-  },
-  mounted () {
-  },
-  beforeDestroy () {
-    const formGroupContext = this.$refs.formGroupContext?.$el
-    if (formGroupContext && formGroupContext.removeEventListener) {
-      formGroupContext.removeEventListener('scroll', this.onScroll)
-    }
-  },
-  provide () {
-    return {
-      inXFormGroup: true,
-      formGroupContext: this
-    }
-  },
-  methods: {
-    setRef (refName, refValue) {
-      if (!this.$refs[refName]) {
-        this.$refs[refName] = refValue
-      }
-    },
-    /**
-     * 初始化
-     * @param groups 表单组诗句
-     * @param modifyModelData 修改的数据
-     * @param serviceName 服务名
-     * @param env 环境
-     * @param showLeftTab 是否展示左侧索引页
-     * @param businessType 新增还是修改
-     */
-    init ({
-           groups,
-           modifyModelData = {},
-           serviceName = process.env.VUE_APP_SYSTEM_NAME,
-           env = 'prod',
-           showLeftTab = false,
-           businessType = '新增'
-         }) {
-      Object.assign(this, { groups, modifyModelData, serviceName, env, showLeftTab, businessType })
-      this.initView()
-      this.$nextTick(() => {
-        const formGroupContext = this.$refs.formGroupContext?.$el
-        if (formGroupContext && formGroupContext.addEventListener) {
-          formGroupContext.addEventListener('scroll', this.onScroll)
-        }
-      })
-    },
-    // 初始化组件
-    initView () {
-      this.spinning = true
-      const promises = []
-      for (let i = 0; i < this.groups.length; i++) {
-        promises.push(this.initData(i))
-      }
-      Promise.all(promises).then(() => {
-        this.spinning = false
-      }).catch(() => {
-        this.loadingErr = true
-        this.spinning = false
-      })
-    },
-    getNativeFormRef (group) {
-      if (!group) {
-        console.warn('getNativeFormRef(group) group is required')
-        return null
-      }
-      return this.groups.map((item, index) => {
-        if (item.groupName === group) {
-          return this.$refs[`nativeForm-${index}`][0]
-        } else {
-          return null
-        }
-      }).filter(ref => ref !== null)
-    },
-    getNativeForm (group) {
-      const formref = this.getNativeFormRef(group)
-      return formref.length ? formref[0].form : null
-    },
-    initData (index) {
-      // 定义当前表单配置
-      const res = this.groups[index]
-      // 如果是插槽组件
-      if (res?.formGroupType === 'slot') {
-        // 组织插槽表单的结果
-        this.allFormData[res.slotName] = {}
-        this.$set(this.formShow, `show${res.slotName}`, true)
-        return
-      }
-      this.$set(this.formShow, `show${res.groupName}`, true)
-      // 组织native表单存储的结果
-      this.allFormData[res.groupName] = {}
-      this.formList.push(res)
-      let modifyModelData = {}
-      if (this.modifyModelData[res.groupName]) {
-        modifyModelData = {
-          data: this.modifyModelData[res.groupName],
-          files: this.modifyModelData[res.groupName].files,
-          images: this.modifyModelData[res.groupName].images
-        }
-      }
-      const params = {
-        layout: res.xAddFormLayout,
-        formItems: res.formJson,
-        showSubmitBtn: false,
-        serviceName: this.serviceName,
-        fixedAddForm: modifyModelData.data,
-        modifyModelData: modifyModelData,
-        businessType: this.businessType,
-        env: this.env,
-        ...res
-      }
-      params.showSubmitBtn = false
-      this.$nextTick(() => {
-        this.$refs[`nativeForm-${index}`][0].init(params)
-      })
-    },
-    scrollToGroup (index) {
-      const groupElement = this.$refs[`group-${index}`][0]
-      if (groupElement) {
-        groupElement.scrollIntoView({ behavior: 'smooth' })
-      }
-    },
-    xFormShow (func, data, index) {
-      if (data) {
-        this.groups.forEach((item, index) => {
-          if (data === item.groupName) {
-            this.$set(this.formShow, `show${item.groupName}`, func === 'x-form-show')
-            if (func === 'x-form-show') {
-              this.initData(index)
-            }
-          } else if (data === item.slotName) {
-            this.$set(this.formShow, `show${item.slotName}`, func === 'x-form-show')
-            if (func === 'x-form-show') {
-              this.initData(index)
-            }
-          }
-        })
-      }
-    },
-    // xfromitem 一路传递上来的事件
-    emitFunc (func, data, index) {
-      if (func === 'x-form-show' || func === 'x-form-no-show') {
-        this.xFormShow(func, data, index)
-      } else {
-        let value = null
-        try {
-          if (data && data.model && this.$refs[`nativeForm-${index}`]) {
-            value = this.$refs[`nativeForm-${index}`]?.form[data.model]
-          }
-          this.$emit(func, data, value)
-        } catch (error) { console.error(error) }
-        this.$emit('x-form-item-emit-func', func, data, value)
-      }
-    },
-    // 提交表单
-    asyncSubmit () {
-      return this.onSubmit()
-    },
-    async onSubmit () {
-      let pass = true
-      const promises = this.groups.map((item, index) => {
-        const nativeFormRef = this.$refs[`nativeForm-${index}`] ? this.$refs[`nativeForm-${index}`][0] : undefined
-        if ((item.groupName || item.slotName) && nativeFormRef && typeof nativeFormRef.asyncSubmit === 'function') {
-          // 如果 ref 存在 asyncSubmit 方法，则调用 asyncSubmit 方法
-          return nativeFormRef.asyncSubmit().then(res => {
-            this.allFormData[item.slotName || item.groupName] = res.realForm
-          }).catch(_err => {
-            pass = false
-            this.scrollToGroup(index)
-          })
-        } else {
-          console.warn(item.groupName + '未找到组件，或者组件没有 asyncSubmit 方法')
-          // 如果 ref 不存在或没有 asyncSubmit 方法，则返回一个已解决的 Promise
-          return Promise.resolve()
-        }
-      })
-
-      try {
-        await Promise.all(promises)
-
-        if (pass) {
-          return Promise.resolve(this.allFormData)
-        } else {
-          this.$message.error('请检查表单填写是否正确')
-          return Promise.reject(new Error('Form validation failed'))
-        }
-      } catch (error) {
-        return Promise.reject(new Error('An unexpected error occurred'))
-      }
-    },
-    onScroll () {
-      const formGroupContext = this.$refs.formGroupContext.$el
-      let groupItems = []
-      if (formGroupContext && formGroupContext.querySelectorAll) {
-        groupItems = formGroupContext.querySelectorAll('.group-item')
-      }
-      let activeIndex = this.activeTab
-
-      groupItems.forEach((item, index) => {
-        const rect = item.getBoundingClientRect()
-        if (rect.top <= 205 && rect.bottom > 200) {
-          activeIndex = index
-        }
-      })
-      this.activeTab = activeIndex
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.XFormGroupClass {
-  height: 100%;
-
-  .heigth100 {
-    height: 100%;
-
-    :deep(.ant-spin-container) {
-      height: 100%;
-    }
-  }
-
-  .xFormGroupTitle {
-    font-size: 15px;
-    font-weight: bold;
-    color: @primary-color;
-  }
-
-  .formGroupContext {
-    height: 100%;
-    overflow-y: scroll;
-  }
-}
-</style>
+<template>
+  <div :class="groups.length ? 'XFormGroupClass' : ''">
+    <a-empty v-if="loadingErr" description="配置走丢了"/>
+    <a-spin v-else tip="正在努力加载..." :spinning="spinning" wrapperClassName="heigth100">
+      <a-row :gutter="24" style="height: 100%">
+        <a-col :span="3" v-if="showLeftTab && groups.length">
+          <a-tabs tab-position="left" v-model="activeTab" @change="scrollToGroup">
+            <template v-for="(item, index) in groups">
+              <a-tab-pane
+                :tab="item.describe"
+                :key="index"
+                v-if="item.describe && (formShow[`show${item.groupName}`] || formShow[`show${item.slotName}`])">
+              </a-tab-pane>
+            </template>
+          </a-tabs>
+        </a-col>
+        <a-col :span="showLeftTab ? 21 : 24" class="formGroupContext" ref="formGroupContext">
+          <div class="group-item" :ref="`group-${index}`" :key="index" v-for="(item, index) in groups">
+            <a-row :style="{ marginTop: index === 0 ? '' : '8px' }" v-if="formShow[`show${item.groupName}`] || formShow[`show${item.slotName}`]">
+              <a-col :span="5">
+                <span class="xFormGroupTitle">{{ item.describe }}</span>
+              </a-col>
+            </a-row>
+            <div v-show="formShow[`show${item.slotName}`]">
+              <template v-if="item.formGroupType === 'slot'">
+                <slot :name="item.slotName" :data="allFormData" :index="index">
+                  <a-empty :description="`[${item.describe}:${item.slotName}]插槽没有使用`"/>
+                </slot>
+              </template>
+            </div>
+            <x-add-native-form
+              @x-form-item-emit-func="emitFunc"
+              v-if="item.formGroupType !== 'slot' && formShow[`show${item.groupName}`]"
+              :ref="`nativeForm-${index}`"/>
+          </div>
+        </a-col>
+      </a-row>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
+
+export default {
+  name: 'XFormGroup',
+  components: {
+    XAddNativeForm
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      formList: [],
+      groups: [],
+      modifyModelData: {},
+      serviceName: '',
+      showLeftTab: false,
+      showSubmitBtn: false,
+      loading: false,
+      allFormData: {},
+      businessType: {},
+      formShow: {},
+      env: 'dev',
+      spinning: true,
+      loadingErr: false,
+      activeTab: 0
+    }
+  },
+  mounted () {
+  },
+  beforeDestroy () {
+    const formGroupContext = this.$refs.formGroupContext?.$el
+    if (formGroupContext && formGroupContext.removeEventListener) {
+      formGroupContext.removeEventListener('scroll', this.onScroll)
+    }
+  },
+  provide () {
+    return {
+      inXFormGroup: true,
+      formGroupContext: this
+    }
+  },
+  methods: {
+    setRef (refName, refValue) {
+      if (!this.$refs[refName]) {
+        this.$refs[refName] = refValue
+      }
+    },
+    /**
+     * 初始化
+     * @param groups 表单组诗句
+     * @param modifyModelData 修改的数据
+     * @param serviceName 服务名
+     * @param env 环境
+     * @param showLeftTab 是否展示左侧索引页
+     * @param businessType 新增还是修改
+     */
+    init ({
+           groups,
+           modifyModelData = {},
+           serviceName = process.env.VUE_APP_SYSTEM_NAME,
+           env = 'prod',
+           showLeftTab = false,
+           businessType = '新增'
+         }) {
+      Object.assign(this, { groups, modifyModelData, serviceName, env, showLeftTab, businessType })
+      this.initView()
+      this.$nextTick(() => {
+        const formGroupContext = this.$refs.formGroupContext?.$el
+        if (formGroupContext && formGroupContext.addEventListener) {
+          formGroupContext.addEventListener('scroll', this.onScroll)
+        }
+      })
+    },
+    // 初始化组件
+    initView () {
+      this.spinning = true
+      const promises = []
+      for (let i = 0; i < this.groups.length; i++) {
+        promises.push(this.initData(i))
+      }
+      Promise.all(promises).then(() => {
+        this.spinning = false
+      }).catch(() => {
+        this.loadingErr = true
+        this.spinning = false
+      })
+    },
+    getNativeFormRef (group) {
+      if (!group) {
+        console.warn('getNativeFormRef(group) group is required')
+        return null
+      }
+      return this.groups.map((item, index) => {
+        if (item.groupName === group) {
+          return this.$refs[`nativeForm-${index}`][0]
+        } else {
+          return null
+        }
+      }).filter(ref => ref !== null)
+    },
+    getNativeForm (group) {
+      const formref = this.getNativeFormRef(group)
+      return formref.length ? formref[0].form : null
+    },
+    initData (index) {
+      // 定义当前表单配置
+      const res = this.groups[index]
+      // 如果是插槽组件
+      if (res?.formGroupType === 'slot') {
+        // 组织插槽表单的结果
+        this.allFormData[res.slotName] = {}
+        this.$set(this.formShow, `show${res.slotName}`, true)
+        return
+      }
+      this.$set(this.formShow, `show${res.groupName}`, true)
+      // 组织native表单存储的结果
+      this.allFormData[res.groupName] = {}
+      this.formList.push(res)
+      let modifyModelData = {}
+      if (this.modifyModelData[res.groupName]) {
+        modifyModelData = {
+          data: this.modifyModelData[res.groupName],
+          files: this.modifyModelData[res.groupName].files,
+          images: this.modifyModelData[res.groupName].images
+        }
+      }
+      const params = {
+        layout: res.xAddFormLayout,
+        formItems: res.formJson,
+        showSubmitBtn: false,
+        serviceName: this.serviceName,
+        fixedAddForm: modifyModelData.data,
+        modifyModelData: modifyModelData,
+        businessType: this.businessType,
+        env: this.env,
+        ...res
+      }
+      params.showSubmitBtn = false
+      this.$nextTick(() => {
+        this.$refs[`nativeForm-${index}`][0].init(params)
+      })
+    },
+    scrollToGroup (index) {
+      const groupElement = this.$refs[`group-${index}`][0]
+      if (groupElement) {
+        groupElement.scrollIntoView({ behavior: 'smooth' })
+      }
+    },
+    xFormShow (func, data, index) {
+      if (data) {
+        this.groups.forEach((item, index) => {
+          if (data === item.groupName) {
+            this.$set(this.formShow, `show${item.groupName}`, func === 'x-form-show')
+            if (func === 'x-form-show') {
+              this.initData(index)
+            }
+          } else if (data === item.slotName) {
+            this.$set(this.formShow, `show${item.slotName}`, func === 'x-form-show')
+            if (func === 'x-form-show') {
+              this.initData(index)
+            }
+          }
+        })
+      }
+    },
+    // xfromitem 一路传递上来的事件
+    emitFunc (func, data, index) {
+      if (func === 'x-form-show' || func === 'x-form-no-show') {
+        this.xFormShow(func, data, index)
+      } else {
+        let value = null
+        try {
+          if (data && data.model && this.$refs[`nativeForm-${index}`]) {
+            value = this.$refs[`nativeForm-${index}`]?.form[data.model]
+          }
+          this.$emit(func, data, value)
+        } catch (error) { console.error(error) }
+        this.$emit('x-form-item-emit-func', func, data, value)
+      }
+    },
+    // 提交表单
+    asyncSubmit () {
+      return this.onSubmit()
+    },
+    async onSubmit () {
+      let pass = true
+      const promises = this.groups.map((item, index) => {
+        const nativeFormRef = this.$refs[`nativeForm-${index}`] ? this.$refs[`nativeForm-${index}`][0] : undefined
+        if ((item.groupName || item.slotName) && nativeFormRef && typeof nativeFormRef.asyncSubmit === 'function') {
+          // 如果 ref 存在 asyncSubmit 方法，则调用 asyncSubmit 方法
+          return nativeFormRef.asyncSubmit().then(res => {
+            this.allFormData[item.slotName || item.groupName] = res.realForm
+          }).catch(_err => {
+            pass = false
+            this.scrollToGroup(index)
+          })
+        } else {
+          console.warn(item.groupName + '未找到组件，或者组件没有 asyncSubmit 方法')
+          // 如果 ref 不存在或没有 asyncSubmit 方法，则返回一个已解决的 Promise
+          return Promise.resolve()
+        }
+      })
+
+      try {
+        await Promise.all(promises)
+
+        if (pass) {
+          return Promise.resolve(this.allFormData)
+        } else {
+          this.$message.error('请检查表单填写是否正确')
+          return Promise.reject(new Error('Form validation failed'))
+        }
+      } catch (error) {
+        return Promise.reject(new Error('An unexpected error occurred'))
+      }
+    },
+    onScroll () {
+      const formGroupContext = this.$refs.formGroupContext.$el
+      let groupItems = []
+      if (formGroupContext && formGroupContext.querySelectorAll) {
+        groupItems = formGroupContext.querySelectorAll('.group-item')
+      }
+      let activeIndex = this.activeTab
+
+      groupItems.forEach((item, index) => {
+        const rect = item.getBoundingClientRect()
+        if (rect.top <= 205 && rect.bottom > 200) {
+          activeIndex = index
+        }
+      })
+      this.activeTab = activeIndex
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.XFormGroupClass {
+  height: 100%;
+
+  .heigth100 {
+    height: 100%;
+
+    :deep(.ant-spin-container) {
+      height: 100%;
+    }
+  }
+
+  .xFormGroupTitle {
+    font-size: 15px;
+    font-weight: bold;
+    color: @primary-color;
+  }
+
+  .formGroupContext {
+    height: 100%;
+    overflow-y: scroll;
+  }
+}
+</style>