vue2-client 1.18.10 → 1.18.12

package/package.json

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

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

@@ -9,9 +9,9 @@
         layout="inline">
         <a-row :gutter="24" type="flex">
           <x-form-item
-            v-for="(item, index) in visibleItems"
+            v-for="item in visibleItems"
             :showLabel="!simpleMode"
-            :key="`${queryParamsName}-item-${index}`"
+            :key="`${queryParamsName}-item-${item._originalIndex}`"
             :attr="item.formItem"
             :form="form"
             :service-name="serviceName"
@@ -23,9 +23,9 @@
           />
           <x-form-item
             v-show="advanced"
-            v-for="(item, index) in hiddenItems"
+            v-for="item in hiddenItems"
             :showLabel="!simpleMode"
-            :key="`advanced-${queryParamsName}-item-${index}`"
+            :key="`${queryParamsName}-item-${item._originalIndex}`"
             :attr="item.formItem"
             :form="form"
             :service-name="serviceName"
@@ -42,10 +42,10 @@
               <template v-if="hiddenItems.length > 0">
                 <a @click="toggleAdvanced">
                   <span v-if="!advanced" style="display: inline-flex; align-items: center;">
-                    <a-icon type="eye" :style="iconStyle"></a-icon>&nbsp;更多条件
+                    <a-icon type="eye" :style="iconStyle" class="form-expand-icon"></a-icon>&nbsp;更多条件
                   </span>
                   <span v-else style="display: inline-flex; align-items: center;">
-                    <a-icon type="eye-invisible" :style="iconStyle"></a-icon>&nbsp;收起更多
+                    <a-icon type="eye-invisible" :style="iconStyle" class="form-expand-icon rotated"></a-icon>&nbsp;收起更多
                   </span>
                 </a>
                 <a-divider type="vertical"/>
@@ -159,11 +159,17 @@ export default {
     },
     // 显示的表单项
     visibleItems: function () {
-      return this.allFormItems.slice(0, this.visibleItemCount)
+      return this.allFormItems.slice(0, this.visibleItemCount).map((item, index) => ({
+        ...item,
+        _originalIndex: index
+      }))
     },
     // 隐藏的表单项（需要点击展开才显示）
     hiddenItems: function () {
-      return this.allFormItems.slice(this.visibleItemCount)
+      return this.allFormItems.slice(this.visibleItemCount).map((item, index) => ({
+        ...item,
+        _originalIndex: this.visibleItemCount + index
+      }))
     },
   },
   provide () {
@@ -176,10 +182,63 @@ export default {
     }
   },
   methods: {
+    // 根据flex值计算可见表单项数量
+    updateVisibleItemCount (flex) {
+      // flex值与显示数量的映射关系
+      const flexToCountMap = {
+        24: 2, // 小屏：1个/行，显示2个（2行）
+        12: 3, // 中屏：2个/行，显示3个（2行-1个）
+        8: 5, // 大屏：3个/行，显示5个（2行-1个）
+        6: 7, // 超大屏：4个/行，显示7个（2行-1个）
+        4: 11 // 超超大屏：6个/行，显示11个（2行-1个）
+      }
+
+      const newCount = flexToCountMap[flex] || 7
+      // 只有当数量真正变化时才更新，避免不必要的重新渲染
+      if (this.visibleItemCount !== newCount) {
+        this.visibleItemCount = newCount
+      }
+    },
+
+    // 递归查找第一个XFormCol实例
+    findFirstXFormCol (components = this.$children) {
+      for (const component of components) {
+        if (component.$options.name === 'XFormCol') {
+          return component
+        }
+        // 递归查找子组件
+        const found = this.findFirstXFormCol(component.$children)
+        if (found) return found
+      }
+      return null
+    },
+
+    // 设置flex监听
+    setupFlexWatcher () {
+      this.$nextTick(() => {
+        const firstXFormCol = this.findFirstXFormCol()
+        if (firstXFormCol) {
+          // 立即执行一次设置初始值
+          this.updateVisibleItemCount(firstXFormCol.computedFlex)
+
+          // 设置监听
+          this._flexWatcher = this.$watch(
+            () => firstXFormCol.computedFlex,
+            (newFlex) => {
+              this.updateVisibleItemCount(newFlex)
+            }
+          )
+        } else {
+          // 重试机制，直到找到XFormCol
+          setTimeout(() => this.setupFlexWatcher(), 100)
+        }
+      })
+    },
+
     init (params) {
       const {
         formItems, serviceName, getDataParams = {}, env = 'prod', simpleMode = false, funcData = {},
-        queryParamsName = 'localConfig', visibleItemCount = 7, defaultQueryForm = {}
+        queryParamsName = 'localConfig', defaultQueryForm = {}
       } = params
       this.mountedCount = 0
       this.queryParamsName = queryParamsName
@@ -188,7 +247,7 @@ export default {
       this.serviceName = serviceName
       this.env = env
       this.simpleMode = simpleMode
-      this.visibleItemCount = visibleItemCount
+      // visibleItemCount 现在由 flex 监听动态控制，不再需要手动设置
       const formData = {}
       for (let i = 0; i < this.realJsonData.length; i++) {
         const item = this.realJsonData[i]
@@ -412,7 +471,17 @@ export default {
     setForm (obj) {
       this.form = Object.assign(this.form, obj)
     },
-  }
+  },
+  mounted () {
+    console.log('XForm mounted, setting up flex watcher')
+    this.setupFlexWatcher()
+  },
+  beforeDestroy () {
+    // 清理watcher
+    if (this._flexWatcher) {
+      this._flexWatcher()
+    }
+  },
 }
 </script>
 <style lang="less" scoped>

package/src/base-client/components/common/XForm/XFormItem.vue

@@ -1320,7 +1320,7 @@ export default {
         } else {
           this.attr.flex = {
             xs: 24,
-            sm: 24,
+            sm: 12,
             md: 8,
             lg: 6,
             xl: 6,

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

@@ -19,12 +19,12 @@ const BREAKPOINTS = {
 }
 
 const defaultFlex = {
-  xs: 24, // 超小屏(<576px)：1个/行，保证手机端可读性
-  sm: 12, // 小屏(576px-768px)：2个/行，满足你的需求
+  xs: 24, // 超小屏(<576px)：1个/行
+  sm: 12, // 小屏(576px-768px)：2个/行
   md: 8, // 中屏(768px-992px)：3个/行
-  lg: 8, // 大屏(992px-1200px)：3个/行
+  lg: 6, // 大屏(992px-1200px)：4个/行
   xl: 6, // 超大屏(1200px-1600px)：4个/行
-  xxl: 6, // 超超大屏(>1600px)：4个/行
+  xxl: 4, // 超超大屏(>1600px)：4个/行
 }
 
 function debounce (fn, delay) {
@@ -42,14 +42,7 @@ export default {
   props: {
     flex: {
       type: Object,
-      default: () => ({
-        xs: 24,
-        sm: 24,
-        md: 8,
-        lg: 6,
-        xl: 6,
-        xxl: 6,
-      }),
+      default: () => defaultFlex,
     },
     occupyCol: {
       type: Number,

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

@@ -802,14 +802,6 @@ export default {
       this.tableModalVisible = false
     },
 
-    /**
-     * 暴露给外部的关闭弹框方法
-     * 父组件可以通过 this.$refs.xformtable.closeModal() 调用
-     */
-    closeModal () {
-      this.closeTableModal()
-    },
-
     active (props) {
       let num = false
       for (const key in props) {
@@ -973,7 +965,10 @@ export default {
      * 更多条件是否展示
      */
     toggleAdvanced () {
-      this.$refs.xTable.setScrollYHeight({})
+      // 只有在非弹出模式下才需要调整表格滚动高度
+      if (this.tableShowMode !== 'popup') {
+        this.$refs.xTable.setScrollYHeight({})
+      }
     },
     /**
      * 查询表单部分显示/隐藏切换
@@ -981,7 +976,10 @@ export default {
     toggleIsFormShow () {
       this.toggleIsFormIcon = this.toggleIsFormIcon === 'vertical-align-top' ? 'vertical-align-bottom' : 'vertical-align-top'
       this.$refs.xForm.toggleVisible()
-      this.$refs.xTable.setScrollYHeight({})
+      // 只有在非弹出模式下才需要调整表格滚动高度
+      if (this.tableShowMode !== 'popup') {
+        this.$refs.xTable.setScrollYHeight({})
+      }
     },
     /**
      * 选择列事件

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

@@ -16,11 +16,6 @@
       serviceName="af-revenue"
       ref="xFormTable"
     >
-      <template #formBtnExpand>
-        <a-button @click="defaultF">默认</a-button>
-        <a-button @click="middleF">中等</a-button>
-        <a-button @click="smallF">小</a-button>
-      </template>
     </x-form-table>
     <div style="height: 100px;width: 100%; background-color: #F7FAFC;">
     </div>

package/src/components/STable/index.js

@@ -185,9 +185,6 @@ export default {
     this.needTotalList = this.initTotalList(this.columns)
     // this.loadData()
   },
-  beforeDestroy () {
-    this.clearClickTimer()
-  },
   methods: {
     /**
      * 表格重新加载方法