vue2-client 1.18.38 → 1.18.40

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

@@ -1,125 +1,123 @@
-<template>
-  <a-card :bordered="false">
-    <x-form-table
-      title="示例表单"
-      :queryParamsName="queryParamsName"
-      :fixedAddForm="fixedAddForm"
-      :externalSelectedRowKeys="selectedKeys"
-      @action="action"
-      @selectRow="selectRow"
-      @columnClick="columnClick"
-      @ceshi="ceshi"
-      @rowDblClick="rowDblClick"
-      :defaultPageSize="5"
-      :defaultQueryForm="{
-        s_f_user_name: '张三'
-      }"
-      serviceName="af-safecheck"
-      ref="xFormTable"
-    >
-    </x-form-table>
-    <div style="height: 100px;width: 100%; background-color: #F7FAFC;">
-    </div>
-    <div style="height: 100px; width: 100%; background-color: #f0f2f5;">
-    </div>
-  </a-card>
-</template>
-
-<script>
-import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
-import { microDispatch } from '@vue2-client/utils/microAppUtils'
-
-export default {
-  name: 'Demo',
-  components: {
-    XFormTable,
-  },
-  data () {
-    return {
-      // 查询配置文件名
-      queryParamsName: 'checkPlanListCRUD',
-      // 查询配置左侧tree
-      xTreeConfigName: 'addressType',
-      // 新增表单固定值
-      fixedAddForm: {},
-      // 是否显示详情抽屉
-      detailVisible: false,
-      // 当前记录
-      record: {},
-      // 选中的行keys
-      selectedKeys: [],
-      selected: {
-        keys: [],
-        rows: [],
-      },
-    }
-  },
-  methods: {
-    rowDblClick (record) {
-      console.log('rowDblClick', record)
-    },
-    // input框 行編輯參數傳遞
-    ceshi (...args) {
-      // attr, value, currentRecord, currentIndex, nextRecord, nextIndex
-      const [attr, value, currentRecord, currentIndex, nextRecord, nextIndex] =
-        args
-      console.log(
-        'ceshi',
-        attr,
-        value,
-        currentRecord,
-        currentIndex,
-        nextRecord,
-        nextIndex
-      )
-      // 示例：当按下 Enter 键且有下一行时，跳转到下一行的同一列
-      // 可以在这里执行业务逻辑（例如：保存数据）
-      console.log('当前行:', currentIndex, '下一行:', nextIndex)
-      if (!nextIndex) {
-        this.$message.warning('没有下一行')
-        return
-      }
-      // 跳转到下一行的同一列
-      this.$refs.xFormTable.$refs.xTable.focusInput(nextIndex, attr.model)
-    },
-    test () {
-      this.$refs.xFormTable.setTableData([])
-    },
-    defaultF () {
-      this.$refs.xFormTable.setTableSize('default')
-    },
-    middleF () {
-      this.$refs.xFormTable.setTableSize('middle')
-    },
-    smallF () {
-      this.$refs.xFormTable.setTableSize('small')
-    },
-    columnClick (key, value, record) {
-      microDispatch({
-        type: 'v3route',
-        path: '/bingliguanli/dianzibingliluru',
-        props: { selected: arguments[0].his_f_admission_id },
-      })
-    },
-    action (record, id, actionType) {
-      this.detailVisible = true
-      console.log('触发了详情操作', record, id, actionType)
-    },
-    onClose () {
-      this.detailVisible = false
-      // 关闭详情之后重新查询表单
-      this.$refs.xFormTable.refreshTable(true)
-    },
-    selectRow (selectedRowKeys, selectedRows) {
-      this.selected = {
-        keys: selectedRowKeys,
-        rows: selectedRows,
-      }
-      console.log('selectedDemo', this.selected)
-    },
-  },
-  computed: {},
-}
-</script>
-
-<style scoped></style>
+<template>
+  <a-card :bordered="false">
+    <x-form-table
+      title="示例表单"
+      :queryParamsName="queryParamsName"
+      :fixedAddForm="fixedAddForm"
+      :externalSelectedRowKeys="selectedKeys"
+      @action="action"
+      @selectRow="selectRow"
+      @columnClick="columnClick"
+      @ceshi="ceshi"
+      @rowDblClick="rowDblClick"
+      :defaultPageSize="5"
+      :defaultQueryForm="{
+        s_f_user_name: '张三'
+      }"
+      serviceName="af-safecheck"
+      ref="xFormTable"
+    >
+    </x-form-table>
+    <div style="height: 100px; width: 100%; background-color: #f0f2f5;">
+    </div>
+  </a-card>
+</template>
+
+<script>
+import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
+import { microDispatch } from '@vue2-client/utils/microAppUtils'
+export default {
+  name: 'Demo',
+  components: {
+    XFormTable,
+  },
+  data () {
+    return {
+      // 查询配置文件名
+      queryParamsName: 'checkPlanListCRUD',
+      // 查询配置左侧tree
+      xTreeConfigName: 'addressType',
+      // 新增表单固定值
+      fixedAddForm: {},
+      // 是否显示详情抽屉
+      detailVisible: false,
+      // 当前记录
+      record: {},
+      // 选中的行keys
+      selectedKeys: [],
+      selected: {
+        keys: [],
+        rows: [],
+      },
+    }
+  },
+
+  methods: {
+    // ========== 原有方法 ==========
+    rowDblClick (record) {
+      console.log('rowDblClick', record)
+    },
+    // input框 行編輯參數傳遞
+    ceshi (...args) {
+      // attr, value, currentRecord, currentIndex, nextRecord, nextIndex
+      const [attr, value, currentRecord, currentIndex, nextRecord, nextIndex] =
+        args
+      console.log(
+        'ceshi',
+        attr,
+        value,
+        currentRecord,
+        currentIndex,
+        nextRecord,
+        nextIndex
+      )
+      // 示例：当按下 Enter 键且有下一行时，跳转到下一行的同一列
+      // 可以在这里执行业务逻辑（例如：保存数据）
+      console.log('当前行:', currentIndex, '下一行:', nextIndex)
+      if (!nextIndex) {
+        this.$message.warning('没有下一行')
+        return
+      }
+      // 跳转到下一行的同一列
+      this.$refs.xFormTable.$refs.xTable.focusInput(nextIndex, attr.model)
+    },
+    test () {
+      this.$refs.xFormTable.setTableData([])
+    },
+    defaultF () {
+      this.$refs.xFormTable.setTableSize('default')
+    },
+    middleF () {
+      this.$refs.xFormTable.setTableSize('middle')
+    },
+    smallF () {
+      this.$refs.xFormTable.setTableSize('small')
+    },
+    columnClick (key, value, record) {
+      microDispatch({
+        type: 'v3route',
+        path: '/bingliguanli/dianzibingliluru',
+        props: { selected: arguments[0].his_f_admission_id },
+      })
+    },
+    action (record, id, actionType) {
+      this.detailVisible = true
+      console.log('触发了详情操作', record, id, actionType)
+    },
+    onClose () {
+      this.detailVisible = false
+      // 关闭详情之后重新查询表单
+      this.$refs.xFormTable.refreshTable(true)
+    },
+    selectRow (selectedRowKeys, selectedRows) {
+      this.selected = {
+        keys: selectedRowKeys,
+        rows: selectedRows,
+      }
+      console.log('selectedDemo', this.selected)
+    },
+  },
+}
+</script>
+
+<style scoped></style>

package/src/base-client/components/common/XReportGrid/XReportTrGroup.vue

@@ -143,7 +143,7 @@
                 'x-import-excel-button',
                 'x-chart',
                 'h-chart',
-                 'x-simple-table'
+                'x-simple-table'
               ].includes(cell.slotType)">
               <component
                 :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"

package/src/base-client/components/common/XTable/XTableWrapper.vue

@@ -107,7 +107,7 @@
       </span>
       <span v-else-if="item.slotType === 'action'" :key="'action-' + c_index">
         <template v-if="item.actionArr && item.actionArr.length > 0">
-          <a-dropdown placement="bottomCenter" :getPopupContainer=" triggerNode => { return triggerNode.parentNode } ">
+          <a-dropdown placement="bottomCenter" :getPopupContainer="getPopupContainer">
             <a class="ant-dropdown-link" @click="e => e.preventDefault()">
               {{ item.scopedSlots?.customRender || item.slotValue }} <a-icon type="down"/>
             </a>
@@ -271,6 +271,7 @@
           <a-dropdown
             placement="bottomRight"
             overlayClassName="x-table-action-dropdown"
+            :getPopupContainer="getPopupContainer"
             :overlayStyle="{
               whiteSpace: 'nowrap',
               maxWidth: '250px',
@@ -523,6 +524,22 @@ export default {
   },
   inject: ['tableContext'],
   methods: {
+    getPopupContainer (triggerNode) {
+      // 限制最多向上查找5层
+      let parent = triggerNode.parentNode
+      let depth = 0
+      const maxDepth = 10
+
+      while (parent && parent !== document.body && depth < maxDepth) {
+        if (parent.tagName === 'TBODY') {
+          return parent
+        }
+        parent = parent.parentNode
+        depth++
+      }
+      // 如果5层内没找到，回退到body
+      return document.body
+    },
     handleRowClick (record) {
       this.$emit('rowClick', record)
     },

package/src/composables/demo/UseRequestDemo.vue

@@ -0,0 +1,175 @@
+<template>
+  <a-card title="useRunLogic / usePost 请求工具示例" :bordered="false">
+    <a-space direction="vertical" style="width: 100%">
+      <!-- 示例1: 基础用法 - 组件级 loading -->
+      <a-button
+        type="primary"
+        :loading="basicRequest.loading"
+        @click="handleBasicRequest"
+      >
+        基础请求 (组件级 loading)
+      </a-button>
+
+      <!-- 示例2: 全局 Loading -->
+      <a-button
+        type="danger"
+        :loading="globalLoadingRequest.loading"
+        @click="handleGlobalLoadingRequest"
+      >
+        全局 Loading 请求
+      </a-button>
+
+      <!-- 示例3: 请求去重 -->
+      <a-button
+        type="dashed"
+        @click="handleDedupeRequest"
+      >
+        去重请求 (快速点击试试)
+      </a-button>
+
+      <!-- 示例4: 组合使用 -->
+      <a-button
+        :loading="comboRequest.loading"
+        @click="handleComboRequest"
+      >
+        组合使用 (去重 + 全局 Loading)
+      </a-button>
+
+      <!-- 示例5: usePost 基础用法 -->
+      <a-button
+        type="primary"
+        ghost
+        :loading="postRequest.loading"
+        @click="handlePostRequest"
+      >
+        usePost 示例
+      </a-button>
+
+      <!-- 显示请求结果 -->
+      <a-card v-if="requestResult" size="small" title="请求结果">
+        <pre style="margin: 0; font-size: 12px; max-height: 200px; overflow: auto;">{{ JSON.stringify(requestResult, null, 2) }}</pre>
+      </a-card>
+    </a-space>
+  </a-card>
+</template>
+
+<script>
+import { useRunLogic, usePost } from '@vue2-client/composables'
+
+export default {
+  name: 'UseRequestDemo',
+
+  data () {
+    return {
+      // 请求结果展示
+      requestResult: null,
+
+      // ========== useRunLogic 实例 ==========
+      // 示例1: 基础用法
+      basicRequest: useRunLogic('test'),
+
+      // 示例2: 全局 Loading
+      globalLoadingRequest: useRunLogic('test', {
+        globalLoading: '正在加载数据...'
+      }),
+
+      // 示例3: 请求去重
+      dedupeRequest: useRunLogic('test', {
+        dedupe: true
+      }),
+
+      // 示例4: 组合使用
+      comboRequest: useRunLogic('test', {
+        dedupe: true,
+        globalLoading: '处理中，请勿重复操作...'
+      }),
+
+      // ========== usePost 实例 ==========
+      postRequest: usePost('/api/af-safecheck/logic/test', {
+        globalLoading: '请求中...'
+      })
+    }
+  },
+
+  methods: {
+    // 示例1: 基础请求
+    async handleBasicRequest () {
+      const { success, data, error } = await this.basicRequest.execute({
+        queryParamsName: 'checkPlanListCRUD',
+        pageNum: 1,
+        pageSize: 5
+      })
+      if (success) {
+        this.requestResult = data
+        this.$message.success('基础请求成功')
+      } else if (error?.code !== 'ERR_DUPLICATE_REQUEST') {
+        this.$message.error('请求失败: ' + error?.message)
+      }
+    },
+
+    // 示例2: 全局 Loading 请求
+    async handleGlobalLoadingRequest () {
+      const { success, data, error } = await this.globalLoadingRequest.execute({
+        queryParamsName: 'checkPlanListCRUD',
+        pageNum: 1,
+        pageSize: 5
+      })
+      if (success) {
+        this.requestResult = data
+        this.$message.success('全局 Loading 请求成功')
+      } else if (error?.code !== 'ERR_DUPLICATE_REQUEST') {
+        this.$message.error('请求失败: ' + error?.message)
+      }
+    },
+
+    // 示例3: 去重请求
+    async handleDedupeRequest () {
+      // 快速点击多次，只会发送一次请求
+      const { success, data, error } = await this.dedupeRequest.execute({
+        queryParamsName: 'checkPlanListCRUD',
+        pageNum: 1,
+        pageSize: 5
+      })
+      if (success) {
+        this.requestResult = data
+        this.$message.success('去重请求成功 (查看控制台是否有去重警告)')
+      } else if (error?.code === 'ERR_DUPLICATE_REQUEST') {
+        // 重复请求被拦截，静默处理或提示
+        console.log('重复请求已被拦截')
+      } else {
+        this.$message.error('请求失败: ' + error?.message)
+      }
+    },
+
+    // 示例4: 组合请求
+    async handleComboRequest () {
+      const { success, data, error } = await this.comboRequest.execute({
+        queryParamsName: 'checkPlanListCRUD',
+        pageNum: 1,
+        pageSize: 5
+      })
+      if (success) {
+        this.requestResult = data
+        this.$message.success('组合请求成功')
+      } else if (error?.code !== 'ERR_DUPLICATE_REQUEST') {
+        this.$message.error('请求失败: ' + error?.message)
+      }
+    },
+
+    // 示例5: usePost 请求
+    async handlePostRequest () {
+      const { success, data, error } = await this.postRequest.execute({
+        queryParamsName: 'checkPlanListCRUD',
+        pageNum: 1,
+        pageSize: 5
+      })
+      if (success) {
+        this.requestResult = data
+        this.$message.success('usePost 请求成功')
+      } else if (error?.code !== 'ERR_DUPLICATE_REQUEST') {
+        this.$message.error('请求失败: ' + error?.message)
+      }
+    }
+  }
+}
+</script>

package/src/composables/index.js

@@ -0,0 +1,6 @@
+/**
+ * Vue Composables 入口文件
+ * 提供 Composition API 风格的可复用逻辑
+ */
+
+export { usePost, createPost, useRunLogic, createRunLogic } from './usePost'

package/src/composables/useGlobalLoading.js

@@ -0,0 +1,206 @@
+/**
+ * 全局 Loading 管理
+ * 纯 JS 实现，直接操作 DOM，不依赖 Vue 组件
+ * 支持引用计数，多个并发请求时正确处理显示/隐藏
+ * 支持超时自动隐藏保护机制
+ */
+
+// 全局状态
+let isLoading = false
+let loadingElement = null
+let messageText = '加载中...'
+let loadingCount = 0 // 引用计数，支持并发请求
+let autoHideTimer = null // 超时自动隐藏定时器
+
+// 配置
+const DEFAULT_TIMEOUT = 30000 // 默认超时时间 30 秒
+const CONTAINER_ID = 'global-loading-container'
+
+/**
+ * 创建 Loading DOM 元素
+ */
+function createLoadingElement (message) {
+  const container = document.createElement('div')
+  container.id = CONTAINER_ID
+  container.innerHTML = `
+    <div class="global-loading-mask">
+      <div class="global-loading-content">
+        <div class="global-loading-spinner">
+          <div class="ant-spin ant-spin-lg ant-spin-spinning">
+            <span class="ant-spin-dot ant-spin-dot-spin">
+              <i class="ant-spin-dot-item"></i>
+              <i class="ant-spin-dot-item"></i>
+              <i class="ant-spin-dot-item"></i>
+              <i class="ant-spin-dot-item"></i>
+            </span>
+          </div>
+        </div>
+        <p class="global-loading-message">${message}</p>
+      </div>
+    </div>
+  `
+  return container
+}
+
+/**
+ * 注入全局样式（只注入一次）
+ */
+function injectStyles () {
+  if (document.getElementById('global-loading-styles')) return
+
+  const style = document.createElement('style')
+  style.id = 'global-loading-styles'
+  style.textContent = `
+    .global-loading-mask {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.45);
+      z-index: 99999;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .global-loading-content {
+      text-align: center;
+    }
+    .global-loading-message {
+      margin-top: 16px;
+      font-size: 14px;
+      color: #fff;
+    }
+    .global-loading-content .ant-spin-dot-item {
+      background-color: #fff !important;
+    }
+  `
+  document.head.appendChild(style)
+}
+
+/**
+ * 清除超时定时器
+ */
+function clearAutoHideTimer () {
+  if (autoHideTimer) {
+    clearTimeout(autoHideTimer)
+    autoHideTimer = null
+  }
+}
+
+/**
+ * 设置超时自动隐藏
+ * @param {number} timeout - 超时时间（毫秒）
+ */
+function setAutoHideTimer (timeout) {
+  clearAutoHideTimer()
+  if (timeout > 0) {
+    autoHideTimer = setTimeout(() => {
+      console.warn(`[GlobalLoading] 超时自动隐藏 (${timeout}ms)`)
+      forceHideGlobalLoading()
+    }, timeout)
+  }
+}
+
+/**
+ * 显示全局 Loading
+ * 支持引用计数，多次调用只显示一个 Loading
+ * @param {string|boolean} message - 提示信息，传 true 使用默认文字
+ * @param {number} timeout - 超时自动隐藏时间（毫秒），默认 30 秒，传 0 禁用
+ */
+export function showGlobalLoading (message = '加载中...', timeout = DEFAULT_TIMEOUT) {
+  loadingCount++
+
+  // 已经在显示，只增加计数，重置超时
+  if (isLoading) {
+    setAutoHideTimer(timeout)
+    return
+  }
+
+  isLoading = true
+  messageText = typeof message === 'string' ? message : '加载中...'
+
+  // 注入样式
+  injectStyles()
+
+  // 创建并插入 DOM
+  loadingElement = createLoadingElement(messageText)
+  document.body.appendChild(loadingElement)
+
+  // 设置超时自动隐藏
+  setAutoHideTimer(timeout)
+}
+
+/**
+ * 隐藏全局 Loading
+ * 只有当所有请求都完成时才真正隐藏
+ */
+export function hideGlobalLoading () {
+  loadingCount = Math.max(0, loadingCount - 1)
+
+  // 还有其他请求在进行中，不隐藏
+  if (loadingCount > 0) return
+
+  doHide()
+}
+
+/**
+ * 强制隐藏全局 Loading（重置计数器）
+ * 用于异常情况下的强制重置
+ */
+export function forceHideGlobalLoading () {
+  loadingCount = 0
+  doHide()
+}
+
+/**
+ * 执行隐藏操作
+ */
+function doHide () {
+  if (!isLoading) return
+
+  isLoading = false
+  clearAutoHideTimer()
+
+  // 移除 DOM
+  if (loadingElement && loadingElement.parentNode) {
+    loadingElement.parentNode.removeChild(loadingElement)
+  }
+  loadingElement = null
+}
+
+/**
+ * 获取当前 Loading 状态
+ * @returns {boolean}
+ */
+export function isGlobalLoadingVisible () {
+  return isLoading
+}
+
+/**
+ * 获取当前 Loading 计数
+ * @returns {number}
+ */
+export function getLoadingCount () {
+  return loadingCount
+}
+
+/**
+ * useGlobalLoading Hook（Vue Composition API 风格）
+ * @returns {{ show: Function, hide: Function, forceHide: Function, isVisible: Function }}
+ */
+export function useGlobalLoading () {
+  return {
+    show: showGlobalLoading,
+    hide: hideGlobalLoading,
+    forceHide: forceHideGlobalLoading,
+    isVisible: isGlobalLoadingVisible
+  }
+}
+
+export default {
+  show: showGlobalLoading,
+  hide: hideGlobalLoading,
+  forceHide: forceHideGlobalLoading,
+  isVisible: isGlobalLoadingVisible
+}