vue2-client 1.15.138 → 1.15.139

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.15.138",
+  "version": "1.15.139",
   "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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
-defineProps({
+const props = defineProps({
   // HFormTable特有的属性
   tableStyle: {
     type: String,
@@ -18,6 +18,9 @@ defineExpose({
   // 为了兼容性，保留getXFormTableInstance方法
   getXFormTableInstance: () => xFormTableRef.value
 })
+
+// 计算是否使用自定义分页
+const isCustomPagination = computed(() => props.tableStyle === 'custom-pagination')
 </script>
 
 <template>
@@ -30,6 +33,7 @@ defineExpose({
     <x-form-table
       ref="xFormTableRef"
       v-bind="$attrs"
+      :customPagination="isCustomPagination"
       v-on="$listeners"
     >
       <template v-for="(_, name) in $slots" #[name]="slotData">
@@ -161,8 +165,10 @@ defineExpose({
       }
     }
   }
-  // 底部分页居中
-  &.h-form-table-bottom-center {
+
+  // 底部分页居中 & 自定义分页样式（共用样式）
+  &.h-form-table-bottom-center,
+  &.h-form-table-custom-pagination {
     :deep(.table-wrapper) {
       .ant-row-flex-start {
         position: relative;
@@ -182,15 +188,6 @@ defineExpose({
           transform: translateX(-50%);
         }
       }
-
-      // 分页当前页配色
-      .ant-pagination {
-        .ant-pagination-item-active {
-          background: #0057FE;
-          border-color: #0057FE;
-          a { color: #fff; }
-        }
-      }
     }
   }
 }

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

@@ -70,6 +70,7 @@
             :serviceName="serviceName"
             :pageMaxSize="realQueryConfig.queryPagesSize"
             :externalSelectedRowKeys="externalSelectedRowKeys"
+            :customPagination="customPagination"
             @add="add"
             @move="move"
             @edit="edit"
@@ -402,6 +403,11 @@ export default {
       default: () => {
         return {}
       }
+    },
+    // 是否使用自定义分页样式
+    customPagination: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {

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

@@ -523,6 +523,11 @@ export default {
     externalSelectedRowKeys: {
       type: Array,
       default: () => []
+    },
+    // 是否使用自定义分页样式
+    customPagination: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

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

@@ -150,6 +150,7 @@
     :scroll="{ x: tableContext.scrollXWidth, y: tableContext.scrollYHeight }"
     :showPagination="tableContext.showPagination"
     :hidePagination="tableContext.simpleMode"
+    :customPagination="tableContext.customPagination"
     :showSelected="!tableContext.simpleMode"
     :pageSize="tableContext.simpleMode ? 1000 : undefined"
     :pageMaxSize="tableContext.pageMaxSize"

package/src/components/STable/index.js

@@ -102,6 +102,11 @@ export default {
       type: Number,
       default: null
     },
+    // 是否使用自定义分页样式
+    customPagination: {
+      type: Boolean,
+      default: false
+    },
     // 行样式函数，用于控制每行的样式类型
     rowStyleFunction: {
       type: [Function, String],
@@ -512,29 +517,113 @@ export default {
           {this.$slots.fixedfooter}
         </a-col>
         <a-col flex="0 0">
-          <a-pagination
-            total={this.localPagination.total}
-            onChange={(page, pageSize) => {
-              this.pageSize = pageSize
-              this.pageNum = page
-              this.loadData({
-                current: page,
-                pageSize: pageSize
-              })
-            }
-            }
-            onShowSizeChange={(page, pageSize) => {
-              this.pageSize = pageSize
-              this.pageNum = page
-              this.loadData({
-                current: page,
-                pageSize: pageSize
-              })
-            }
-            }
-            show-total={(total, range) => range[0] === range[1] ? `${range[0]} | 共 ${total} 项` : `${range[0]}-${range[1]} | 共 ${total} 项`}
-            default-current={this.localPagination.current}
-            showSizeChanger={this.localPagination.showSizeChanger}/>
+          {this.customPagination ? (
+            <div class="custom-pagination-container">
+              {/* 首页按钮 */}
+              <div
+                class={['custom-pagination-btn', { disabled: this.localPagination.current === 1 }]}
+                onClick={() => {
+                  if (this.localPagination.current > 1) {
+                    this.pageSize = this.localPagination.pageSize
+                    this.pageNum = 1
+                    this.loadData({
+                      current: 1,
+                      pageSize: this.localPagination.pageSize
+                    })
+                  }
+                }}
+              >
+                <span class="custom-pagination-icon icon-rotate-right">⌅</span>
+              </div>
+
+              {/* 上一页按钮 */}
+              <div
+                class={['custom-pagination-btn', { disabled: this.localPagination.current === 1 }]}
+                onClick={() => {
+                  if (this.localPagination.current > 1) {
+                    this.pageSize = this.localPagination.pageSize
+                    this.pageNum = this.localPagination.current - 1
+                    this.loadData({
+                      current: this.localPagination.current - 1,
+                      pageSize: this.localPagination.pageSize
+                    })
+                  }
+                }}
+              >
+                &lt;
+              </div>
+
+              {/* 当前页按钮 */}
+              <div class="custom-pagination-btn active">
+                {this.localPagination.current}
+              </div>
+
+              {/* 下一页按钮 */}
+              <div
+                class={['custom-pagination-btn', { disabled: this.localPagination.current === Math.ceil(this.localPagination.total / this.localPagination.pageSize) }]}
+                onClick={() => {
+                  const totalPages = Math.ceil(this.localPagination.total / this.localPagination.pageSize)
+                  if (this.localPagination.current < totalPages) {
+                    this.pageSize = this.localPagination.pageSize
+                    this.pageNum = this.localPagination.current + 1
+                    this.loadData({
+                      current: this.localPagination.current + 1,
+                      pageSize: this.localPagination.pageSize
+                    })
+                  }
+                }}
+              >
+                &gt;
+              </div>
+
+              {/* 末页按钮 */}
+              <div
+                class={['custom-pagination-btn', { disabled: this.localPagination.current === Math.ceil(this.localPagination.total / this.localPagination.pageSize) }]}
+                onClick={() => {
+                  const totalPages = Math.ceil(this.localPagination.total / this.localPagination.pageSize)
+                  if (this.localPagination.current < totalPages) {
+                    this.pageSize = this.localPagination.pageSize
+                    this.pageNum = totalPages
+                    this.loadData({
+                      current: totalPages,
+                      pageSize: this.localPagination.pageSize
+                    })
+                  }
+                }}
+              >
+                <span class="custom-pagination-icon icon-rotate-left">⌅</span>
+              </div>
+
+              {/* 分页信息 */}
+              <div class="custom-pagination-info">
+                共{Math.ceil(this.localPagination.total / this.localPagination.pageSize)}页, {this.localPagination.total}条
+              </div>
+            </div>
+          ) : (
+            <a-pagination
+              total={this.localPagination.total}
+              onChange={(page, pageSize) => {
+                this.pageSize = pageSize
+                this.pageNum = page
+                this.loadData({
+                  current: page,
+                  pageSize: pageSize
+                })
+              }
+              }
+              onShowSizeChange={(page, pageSize) => {
+                this.pageSize = pageSize
+                this.pageNum = page
+                this.loadData({
+                  current: page,
+                  pageSize: pageSize
+                })
+              }
+              }
+              show-total={(total, range) => range[0] === range[1] ? `${range[0]} | 共 ${total} 项` : `${range[0]}-${range[1]} | 共 ${total} 项`}
+              default-current={this.localPagination.current}
+              showSizeChanger={this.localPagination.showSizeChanger}/>
+          )}
         </a-col>
       </a-row>
     )
@@ -553,3 +642,85 @@ export default {
     )
   }
 }
+
+// 添加自定义分页样式
+const customPaginationStyles = `
+<style>
+.custom-pagination-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.custom-pagination-btn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #fafafa;
+  color: #5D5C5C;
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  user-select: none;
+}
+
+.custom-pagination-btn:hover {
+  border-color: #0057FE;
+  color: #0057FE;
+}
+
+.custom-pagination-btn.active {
+  background: #0057FE;
+  border-color: #0057FE;
+  color: #fff;
+}
+
+.custom-pagination-btn.disabled {
+  background: #f5f5f5;
+  border-color: #d9d9d9;
+  color: #bfbfbf;
+  cursor: not-allowed;
+}
+
+.custom-pagination-btn.disabled:hover {
+  border-color: #d9d9d9;
+  color: #bfbfbf;
+}
+
+.custom-pagination-info {
+  margin-left: 16px;
+  color: #666;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+/* 自定义图标与旋转方向 */
+.custom-pagination-icon {
+  display: inline-block;
+  line-height: 1;
+  transform-origin: center;
+}
+.icon-rotate-left {
+  transform: rotate(90deg);
+}
+.icon-rotate-right {
+  transform: rotate(-90deg);
+}
+</style>
+`
+
+// 将样式注入到页面
+if (typeof document !== 'undefined') {
+  const styleId = 'custom-pagination-styles'
+  if (!document.getElementById(styleId)) {
+    const styleElement = document.createElement('style')
+    styleElement.id = styleId
+    styleElement.textContent = customPaginationStyles.replace('<style>', '').replace('</style>', '')
+    document.head.appendChild(styleElement)
+  }
+}