vue2-client 1.18.19 → 1.18.21

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

@@ -48,13 +48,15 @@
           <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>
+          <a-spin :spinning="tableShowMode === 'popup' && formQueryLoading" tip="正在查询..." >
+            <x-form
+              ref="xForm"
+              @x-form-item-emit-func="emitFunc"
+              @toggleAdvanced="toggleAdvanced"
+              @onSubmit="onSearchSubmit">
+              <slot name="formBtnExpand"></slot>
+            </x-form>
+          </a-spin>
           <!-- 默认模式：直接展示表格 -->
           <x-table
             v-if="tableShowMode === 'default'"
@@ -115,13 +117,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 +328,8 @@ export default {
       tableShowMode: 'default',
       // Modal 弹框显示状态
       tableModalVisible: false,
-      // 弹框模式下待初始化的表格配置
-      pendingTableInit: null
+      // 弹框模式下表单查询中的加载状态
+      formQueryLoading: false
     }
   },
   computed: {
@@ -427,6 +431,11 @@ export default {
         return 0
       }
     },
+    // 弹框模式下，最少多少行数据才自动弹框展示
+    minShowRows: {
+      type: Number,
+      default: 1
+    },
     // 环境
     env: {
       type: String,
@@ -674,34 +683,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 +747,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 +796,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 +987,9 @@ export default {
      * @param toFirstPage 是否到第一页
      */
     refreshTable (toFirstPage = true) {
+      if (this.tableShowMode === 'popup') {
+        this.formQueryLoading = true
+      }
       this.$refs.xTable.refresh(toFirstPage)
     },
     /**
@@ -1010,23 +998,9 @@ export default {
      */
     refresh (toFirstPage = true) {
       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.refresh(toFirstPage)
-            this.$refs.xTable.summaryUpdate = true
-          }
-        })
-      } else {
-        this.$refs.xTable.refresh(toFirstPage)
+        this.formQueryLoading = true
       }
+      this.$refs.xTable.refresh(toFirstPage)
     },
     /**
      * 获取表格数据