vue2-client 1.9.13 → 1.9.14

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

@@ -1,250 +1,250 @@
-<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">
-              </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' }">
-              <a-col :span="5">
-                <span class="xFormGroupTitle">{{ item.describe }}</span>
-              </a-col>
-            </a-row>
-            <template v-if="item.formGroupType === 'slot'">
-              <slot :name="item.slotName" :data="allFormData" :index="index">
-                <a-empty :description="`[${item.describe}:${item.slotName}]插槽没有使用`"/>
-              </slot>
-            </template>
-            <x-add-native-form @x-form-item-emit-func="emitFunc" v-else :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: {},
-      env: 'prod',
-      spinning: true,
-      loadingErr: false,
-      activeTab: 0
-    }
-  },
-  mounted () {
-  },
-  beforeDestroy () {
-    const formGroupContext = this.$refs.formGroupContext?.$el
-    if (formGroupContext && formGroupContext.removeEventListener) {
-      formGroupContext.removeEventListener('scroll', this.onScroll)
-    }
-  },
-  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) {
-      return this.groups.map((item, index) => {
-        if (item.groupName === group) {
-          return this.$refs[`nativeForm-${index}`][0]
-        } else {
-          return null
-        }
-      }).filter(ref => ref !== null)
-    },
-    initData (index) {
-      // 定义当前表单配置
-      const res = this.groups[index]
-      // 如果是插槽组件
-      if (res?.formGroupType === 'slot') {
-        // 组织插槽表单的结果
-        this.allFormData[res.slotName] = {}
-        return
-      }
-      // 组织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: {
-          files: modifyModelData.files,
-          images: modifyModelData.images
-        },
-        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' })
-      }
-    },
-    // xfromitem 一路传递上来的事件
-    emitFunc (func, data) {
-      this.$emit('x-form-item-emit-func', func, data)
-    },
-    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">
+              </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' }">
+              <a-col :span="5">
+                <span class="xFormGroupTitle">{{ item.describe }}</span>
+              </a-col>
+            </a-row>
+            <template v-if="item.formGroupType === 'slot'">
+              <slot :name="item.slotName" :data="allFormData" :index="index">
+                <a-empty :description="`[${item.describe}:${item.slotName}]插槽没有使用`"/>
+              </slot>
+            </template>
+            <x-add-native-form @x-form-item-emit-func="emitFunc" v-else :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: {},
+      env: 'prod',
+      spinning: true,
+      loadingErr: false,
+      activeTab: 0
+    }
+  },
+  mounted () {
+  },
+  beforeDestroy () {
+    const formGroupContext = this.$refs.formGroupContext?.$el
+    if (formGroupContext && formGroupContext.removeEventListener) {
+      formGroupContext.removeEventListener('scroll', this.onScroll)
+    }
+  },
+  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) {
+      return this.groups.map((item, index) => {
+        if (item.groupName === group) {
+          return this.$refs[`nativeForm-${index}`][0]
+        } else {
+          return null
+        }
+      }).filter(ref => ref !== null)
+    },
+    initData (index) {
+      // 定义当前表单配置
+      const res = this.groups[index]
+      // 如果是插槽组件
+      if (res?.formGroupType === 'slot') {
+        // 组织插槽表单的结果
+        this.allFormData[res.slotName] = {}
+        return
+      }
+      // 组织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: {
+          files: modifyModelData.files,
+          images: modifyModelData.images
+        },
+        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' })
+      }
+    },
+    // xfromitem 一路传递上来的事件
+    emitFunc (func, data) {
+      this.$emit('x-form-item-emit-func', func, data)
+    },
+    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>

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

@@ -1,40 +1,40 @@
-<script>
-import XFormGroup from '@vue2-client/base-client/components/common/XFormGroup/XFormGroup.vue'
-import { getConfigByNameAsync } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'Demo',
-  components: { XFormGroup },
-  created () {
-    getConfigByNameAsync('addUserGeneralInfoFrom', 'af-revenue').then(res => {
-      this.$refs.xFormGroupDemo.init({
-        ...res,
-        serviceName: 'af-revenue',
-        showLeftTab: true,
-      })
-    })
-  },
-  methods: {
-    submitForm () {
-      this.$refs.xFormGroupDemo.onSubmit().then(res => {
-        console.log('所有表单的结果', res)
-      })
-    }
-  }
-}
-</script>
-
-<template>
-  <a-modal
-    :visible="true"
-    :bodyStyle="{height:'70vh'}"
-    title="测试表单组"
-    @ok="submitForm"
-    width="85vw">
-    <x-form-group ref="xFormGroupDemo"></x-form-group>
-  </a-modal>
-</template>
-
-<style scoped lang="less">
-
-</style>
+<script>
+import XFormGroup from '@vue2-client/base-client/components/common/XFormGroup/XFormGroup.vue'
+import { getConfigByNameAsync } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'Demo',
+  components: { XFormGroup },
+  created () {
+    getConfigByNameAsync('addUserGeneralInfoFrom', 'af-revenue').then(res => {
+      this.$refs.xFormGroupDemo.init({
+        ...res,
+        serviceName: 'af-revenue',
+        showLeftTab: true,
+      })
+    })
+  },
+  methods: {
+    submitForm () {
+      this.$refs.xFormGroupDemo.onSubmit().then(res => {
+        console.log('所有表单的结果', res)
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <a-modal
+    :visible="true"
+    :bodyStyle="{height:'70vh'}"
+    title="测试表单组"
+    @ok="submitForm"
+    width="85vw">
+    <x-form-group ref="xFormGroupDemo"></x-form-group>
+  </a-modal>
+</template>
+
+<style scoped lang="less">
+
+</style>

package/src/base-client/components/common/XFormGroup/index.js

@@ -1,3 +1,3 @@
-import XFormGroup from './XFormGroup.vue'
-
-export default XFormGroup
+import XFormGroup from './XFormGroup.vue'
+
+export default XFormGroup

package/src/base-client/components/common/XFormGroup/index.md

@@ -1,38 +1,38 @@
-# XFormGroup 表单参数组配置编辑
-
-提供表单参数组配置编辑的快捷组件
-
-
-
-## 何时使用
-
-允许通过表单参数组编辑参数
-
-
-
-引用方式：
-
-```javascript
-import XFormGroup from '@vue2-client/base-client/components/XFormGroup'
-
-export default {
-    components: {
-      XFormGroup
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<x-form-group
-/>
-```
-
-## API
-
-| 参数 | 说明 | 类型 | 默认值 |
-|----|----|----|-----|
-|    |    |    |     |
+# XFormGroup 表单参数组配置编辑
+
+提供表单参数组配置编辑的快捷组件
+
+
+
+## 何时使用
+
+允许通过表单参数组编辑参数
+
+
+
+引用方式：
+
+```javascript
+import XFormGroup from '@vue2-client/base-client/components/XFormGroup'
+
+export default {
+    components: {
+      XFormGroup
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-form-group
+/>
+```
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|----|----|----|-----|
+|    |    |    |     |