vue2-client 1.8.230 → 1.8.231

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.230",
+  "version": "1.8.231",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XDescriptions/XDescriptionsGroup.vue

@@ -1,7 +1,7 @@
 <template>
   <a-row id="XDescriptionGroup" :gutter="24">
     <a-col :span="4" v-if="showLeftTab && realData.length">
-      <a-tabs tab-position="left" @change="scrollToGroup">
+      <a-tabs tab-position="left" v-model="activeTab" @change="scrollToGroup">
         <template v-for="(item,index) in realData">
           <a-tab-pane
             :tab="item.title"
@@ -11,7 +11,7 @@
         </template>
       </a-tabs>
     </a-col>
-    <a-col :span="showLeftTab ? 20 : 24" class="descriptionsGroupContext">
+    <a-col :span="showLeftTab ? 20 : 24" ref="descriptionsGroupContext" class="descriptionsGroupContext">
       <div
         class="descriptions-item"
         :ref="`descriptions-item-${index}`"
@@ -126,6 +126,14 @@ export default {
       default: false
     }
   },
+  mounted () {
+  },
+  beforeDestroy () {
+    const formGroupContext = this.$refs.formGroupContext?.$el
+    if (formGroupContext && formGroupContext.removeEventListener) {
+      formGroupContext.removeEventListener('scroll', this.onScroll)
+    }
+  },
   created () {
     this.initConfig()
   },
@@ -136,7 +144,8 @@ export default {
       loadError: false,
       realData: [],
       // 获取到的配置组
-      groups: {}
+      groups: {},
+      activeTab: 0
     }
   },
   computed: {
@@ -147,6 +156,12 @@ export default {
       this.loading = true
       if (this.configName) {
         this.getConfig()
+        this.$nextTick(() => {
+          const formGroupContext = this.$refs.descriptionsGroupContext?.$el
+          if (formGroupContext && formGroupContext.addEventListener) {
+            formGroupContext.addEventListener('scroll', this.onScroll)
+          }
+        })
       } else {
         this.loading = false
         this.loadError = true
@@ -209,7 +224,6 @@ export default {
               }
             }
           }).filter((item) => item)
-          console.log(this.realData)
         } else {
           this.loading = false
           this.loadError = true
@@ -226,6 +240,22 @@ export default {
       } else {
         return this.data[key] || ''
       }
+    },
+    onScroll () {
+      const formGroupContext = this.$refs.descriptionsGroupContext.$el
+      let groupItems = []
+      if (formGroupContext && formGroupContext.querySelectorAll) {
+        groupItems = formGroupContext.querySelectorAll('.descriptions-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
     }
   },
   watch: {

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

@@ -1,11 +1,11 @@
 <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-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" @change="scrollToGroup">
-            <template v-for="(item,index) in groups">
+          <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"
@@ -14,9 +14,9 @@
             </template>
           </a-tabs>
         </a-col>
-        <a-col :span="showLeftTab ? 21 : 24" class="formGroupContext">
+        <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-row :style="{ marginTop: index === 0 ? '' : '8px' }">
               <a-col :span="5">
                 <span class="xFormGroupTitle">{{ item.describe }}</span>
               </a-col>
@@ -57,14 +57,18 @@ export default {
       businessType: {},
       env: 'prod',
       spinning: true,
-      loadingErr: false
+      loadingErr: false,
+      activeTab: 0
     }
   },
   mounted () {
   },
-  props: {},
-  watch: {},
-  computed: {},
+  beforeDestroy () {
+    const formGroupContext = this.$refs.formGroupContext?.$el
+    if (formGroupContext && formGroupContext.removeEventListener) {
+      formGroupContext.removeEventListener('scroll', this.onScroll)
+    }
+  },
   methods: {
     setRef (refName, refValue) {
       if (!this.$refs[refName]) {
@@ -81,15 +85,21 @@ export default {
      * @param businessType 新增还是修改
      */
     init ({
-           groups,
-           modifyModelData = {},
-           serviceName = process.env.VUE_APP_SYSTEM_NAME,
-           env = 'prod',
-           showLeftTab = false,
-           businessType = '新增'
-         }) {
+            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 () {
@@ -151,9 +161,6 @@ export default {
         groupElement.scrollIntoView({ behavior: 'smooth' })
       }
     },
-    onClose () {
-      this.$emit('update:visible', false)
-    },
     // xfromitem 一路传递上来的事件
     emitFunc (func, data) {
       this.$emit('x-form-item-emit-func', func, data)
@@ -189,6 +196,22 @@ export default {
       } 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
     }
   }
 }