vue2-client 1.18.18 → 1.18.20

package/package.json

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

package/src/base-client/components/common/HIS/HFormTable/HFormTable.vue

@@ -268,6 +268,23 @@ const isHiddenFunctionalArea = computed(() => {
     }
   }
 
+  // 修复数据量少时下拉框被挡住的问题：为表格内容区域设置最小高度
+  // 当表格有数据时，确保表格内容区域有足够高度，避免下拉框被挡住
+  // 注意：只在表格有数据时应用，避免空表格时显示问题
+  :deep(.table-wrapper) {
+    .ant-table:not(.ant-table-empty) {
+      .ant-table-content {
+        // 设置最小高度，确保即使数据少时也有足够空间显示下拉框
+        // 这个高度应该足够显示下拉框选项（通常下拉框高度约200-300px）
+        min-height: 300px;
+        .ant-table-body {
+          // 确保表格体也有最小高度，保证滚动容器有足够空间
+          min-height: 250px;
+        }
+      }
+    }
+  }
+
   // 表格样式
   &.h-form-table-table {
     :deep(.ant-table-small .ant-table-fixed-header) {

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

@@ -48,13 +48,19 @@
           <div v-if="crudTitle" class="crud_title">
             {{ crudTitle }}
           </div>
-          <x-form
-            ref="xForm"
-            @x-form-item-emit-func="emitFunc"
-            @toggleAdvanced="toggleAdvanced"
-            @onSubmit="onSearchSubmit">
-            <slot name="formBtnExpand"></slot>
-          </x-form>
+          <div class="xform-wrapper">
+            <x-form
+              ref="xForm"
+              @x-form-item-emit-func="emitFunc"
+              @toggleAdvanced="toggleAdvanced"
+              @onSubmit="onSearchSubmit">
+              <slot name="formBtnExpand"></slot>
+            </x-form>
+            <!-- 弹框模式下的表单查询加载遮罩（局部覆盖） -->
+            <div v-if="tableShowMode === 'popup' && formQueryLoading" class="form-query-loading">
+              <a-spin size="large" tip="正在查询..." />
+            </div>
+          </div>
           <!-- 默认模式：直接展示表格 -->
           <x-table
             v-if="tableShowMode === 'default'"
@@ -115,13 +121,15 @@
           <!-- 弹框模式：在 Modal 中展示表格 -->
           <a-modal
             v-if="tableShowMode === 'popup'"
-            v-model="tableModalVisible"
+            :visible="tableModalVisible"
+            @cancel="closeTableModal"
             :title="realQueryConfig.popupTitle || null"
             :closable="false"
             width="80%"
             :bodyStyle="{ padding: '12px' }"
             :footer="null"
             :destroyOnClose="false"
+            :forceRender="true"
             :z-index="1005"
           >
             <x-table
@@ -324,8 +332,8 @@ export default {
       tableShowMode: 'default',
       // Modal 弹框显示状态
       tableModalVisible: false,
-      // 弹框模式下待初始化的表格配置
-      pendingTableInit: null
+      // 弹框模式下表单查询中的加载状态
+      formQueryLoading: false
     }
   },
   computed: {
@@ -427,6 +435,11 @@ export default {
         return 0
       }
     },
+    // 弹框模式下，最少多少行数据才自动弹框展示
+    minShowRows: {
+      type: Number,
+      default: 1
+    },
     // 环境
     env: {
       type: String,
@@ -674,34 +687,7 @@ export default {
         }
         const localEditMode = !this.localEditMode ? res.localEditMode : this.localEditMode
         const initTable = () => {
-          // 弹框模式下，如果 xTable 还未渲染，保存初始化配置供后续使用
-          if (this.tableShowMode === 'popup' && !this.$refs.xTable) {
-            // 保存初始化配置
-            this.pendingTableInit = {
-              formItems: res.formJson,
-              queryParams: setQueryParams ? res : null,
-              realQueryParams: res,
-              tableColumns: res.columnJson,
-              buttonState: Object.assign(res.buttonState, this.buttonState),
-              title: this.title || res.title,
-              viewMode: this.viewMode,
-              localEditMode: localEditMode,
-              rowSelectMode: this.rowSelectMode,
-              allowSelectRowNum: this.allowSelectRowNum,
-              tableSummaryMap: res.tableSummaryMap,
-              serviceName: this.serviceName,
-              env: this.env,
-              form: this.$refs.xForm.form,
-              summaryUpdate: true,
-              disableAction: this.disableAction,
-              extraData: this.extraData,
-              rowStyleFunction: res.rowStyleFunction,
-              ...res
-            }
-            return
-          }
-
-          // 初始化 xTable 子组件
+          // 初始化 xTable 子组件（弹框模式下由于 forceRender，xTable 已经渲染）
           if (this.$refs.xTable) {
             this.$refs.xTable.init({
               formItems: res.formJson,
@@ -765,29 +751,14 @@ export default {
      */
     onSearchSubmit (res) {
       if (res.valid) {
-        // 如果是弹框模式，先打开 Modal，等待 DOM 更新后再设置查询表单
+        // 如果是弹框模式，显示表单加载动画，不立即打开弹框
         if (this.tableShowMode === 'popup') {
-          this.tableModalVisible = true
-          this.$nextTick(() => {
-            // 等待 Modal 中的 x-table 渲染完成
-            if (this.$refs.xTable) {
-              // 如果有待初始化的配置，先初始化表格
-              if (this.pendingTableInit) {
-                this.$refs.xTable.init(this.pendingTableInit)
-                this.$emit('afterTableInit')
-                this.pendingTableInit = null
-              }
-              // 设置查询表单
-              this.$refs.xTable.setQueryForm(res.form)
-              this.$refs.xTable.summaryUpdate = true
-            }
-          })
-        } else {
-          // 默认模式：直接设置查询表单
-          this.$refs.xTable.setQueryForm(res.form)
-          this.$refs.xTable.summaryUpdate = true
+          // 开启表单查询加载状态
+          this.formQueryLoading = true
         }
-
+        // 默认模式：直接设置查询表单
+        this.$refs.xTable.setQueryForm(res.form)
+        this.$refs.xTable.summaryUpdate = true
         // commit
         this.$emit('afterSearchSubmit', res)
       } else {
@@ -829,10 +800,28 @@ export default {
     },
     /**
      * 表格查询后事件
-     * @param res  参数
+     * @param res  参数（可能是 Promise）
      * @param conditionParams 查询条件
      */
-    afterQuery (res, conditionParams) {
+    async afterQuery (res, conditionParams) {
+      // 如果是弹框模式且正在查询中
+      if (this.tableShowMode === 'popup' && this.formQueryLoading) {
+        // 兼容 Promise
+        const realRes = await res
+        // 结束表单加载状态
+        this.formQueryLoading = false
+        // 兼容 data / records 两种结构
+        const rows = realRes && (realRes.data || realRes.records || [])
+        // 判断是否有数据（行数 >= minShowRows）
+        const hasData = Array.isArray(rows) && rows.length >= this.minShowRows
+
+        if (hasData) {
+          // 有数据：打开弹框展示
+          this.tableModalVisible = true
+        }
+      }
+
+      // 继续触发父组件的 afterQuery 事件（保持原有行为）
       this.$emit('afterQuery', res, conditionParams)
     },
     /**
@@ -1002,6 +991,9 @@ export default {
      * @param toFirstPage 是否到第一页
      */
     refreshTable (toFirstPage = true) {
+      if (this.tableShowMode === 'popup') {
+        this.formQueryLoading = true
+      }
       this.$refs.xTable.refresh(toFirstPage)
     },
     /**
@@ -1009,6 +1001,9 @@ export default {
      * @param toFirstPage 是否到第一页
      */
     refresh (toFirstPage = true) {
+      if (this.tableShowMode === 'popup') {
+        this.formQueryLoading = true
+      }
       this.$refs.xTable.refresh(toFirstPage)
     },
     /**
@@ -1262,4 +1257,24 @@ export default {
   line-height: 1.5;
 }
 
+/* 表单容器，用于定位 loading */
+.xform-wrapper {
+  position: relative;
+}
+
+/* 表单查询加载遮罩（局部覆盖） */
+.form-query-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  backdrop-filter: blur(1px);
+}
+
 </style>

package/src/router/async/router.map.js

@@ -55,8 +55,8 @@ path: 'example',
   name: '示例主页面',
   // component: () => import('@vue2-client/base-client/components/his/HChart/demo.vue'),
   // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
-  // component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
-  component: () => import('@vue2-client/components/xScrollBox/example.vue'),
+  component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
+  // component: () => import('@vue2-client/components/xScrollBox/example.vue'),
   // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
   // component: () => import('@vue2-client/pages/addressSelect/addressDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XDescriptions/demo.vue'),