vue2-client 1.15.138 → 1.15.141

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/base-client/components/his/XSimpleTable/XSimpleTable.vue

@@ -1,119 +1,119 @@
-<template>
-  <div class="table-container" :style="{ height: tableHeight }">
-    <a-table
-      :columns="processedColumns"
-      :dataSource="tableData"
-      :pagination="false"
-      :bordered="false"
-      :rowKey="rowKey"
-      :scroll="{ y: scrollY }"
-    />
-  </div>
-</template>
-
-<script>
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  props: {
-    queryParamsName: String,
-    rowKey: {
-      type: String,
-      default: 'id'
-    },
-    parameter: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data () {
-    return {
-      columns: [],
-      tableData: [],
-      tableHeight: 'auto', // 默认高度
-      scrollY: undefined
-    }
-  },
-  watch: {
-    queryParamsName: {
-      immediate: true,
-      handler (val) {
-        val && this.init(val, this.parameter)
-      }
-    }
-  },
-  computed: {
-    processedColumns () {
-      return this.columns.map(column => ({
-        ...column,
-        customHeaderCell: column.headerStyle
-          ? () => ({ style: column.headerStyle })
-          : undefined
-      }))
-    }
-  },
-  methods: {
-    init (config, parameterData) {
-      getConfigByName(config, 'af-his', res => {
-        // 从配置中获取表格高度
-        this.tableHeight = res.tableHeight || '400px' // 默认400px
-        this.columns = res.columns || []
-
-        runLogic(res.logicName, parameterData, 'af-his').then(result => {
-          this.tableData = result.map((item, index) => ({
-            ...item,
-            key: item[this.rowKey] || `row_${index}`
-          }))
-
-          this.$nextTick(() => {
-            this.scrollY = this.tableHeight
-          })
-        })
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-/* 表格容器 */
-.table-container {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 基础无边框样式 */
-/deep/ .ant-table {
-  border: none !important;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-/deep/ .ant-table-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-/deep/ .ant-table-body {
-  flex: 1;
-  overflow-y: auto !important;
-}
-
-/deep/ .ant-table-tbody > tr > td {
-  border-bottom: none !important;
-  padding: 6px !important;
-}
-
-/deep/ .ant-table-thead > tr > th {
-  border-bottom: none !important;
-  background: none !important;
-  padding: 8px 6px !important;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background-color: white !important;
-}
-</style>
+<template>
+  <div class="table-container" :style="{ height: tableHeight }">
+    <a-table
+      :columns="processedColumns"
+      :dataSource="tableData"
+      :pagination="false"
+      :bordered="false"
+      :rowKey="rowKey"
+      :scroll="{ y: scrollY }"
+    />
+  </div>
+</template>
+
+<script>
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  props: {
+    queryParamsName: String,
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    parameter: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      columns: [],
+      tableData: [],
+      tableHeight: 'auto', // 默认高度
+      scrollY: undefined
+    }
+  },
+  watch: {
+    queryParamsName: {
+      immediate: true,
+      handler (val) {
+        val && this.init(val, this.parameter)
+      }
+    }
+  },
+  computed: {
+    processedColumns () {
+      return this.columns.map(column => ({
+        ...column,
+        customHeaderCell: column.headerStyle
+          ? () => ({ style: column.headerStyle })
+          : undefined
+      }))
+    }
+  },
+  methods: {
+    init (config, parameterData) {
+      getConfigByName(config, 'af-his', res => {
+        // 从配置中获取表格高度
+        this.tableHeight = res.tableHeight || '400px' // 默认400px
+        this.columns = res.columns || []
+
+        runLogic(res.logicName, parameterData, 'af-his').then(result => {
+          this.tableData = result.map((item, index) => ({
+            ...item,
+            key: item[this.rowKey] || `row_${index}`
+          }))
+
+          this.$nextTick(() => {
+            this.scrollY = this.tableHeight
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 表格容器 */
+.table-container {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 基础无边框样式 */
+/deep/ .ant-table {
+  border: none !important;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/deep/ .ant-table-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+/deep/ .ant-table-body {
+  flex: 1;
+  overflow-y: auto !important;
+}
+
+/deep/ .ant-table-tbody > tr > td {
+  border-bottom: none !important;
+  padding: 6px !important;
+}
+
+/deep/ .ant-table-thead > tr > th {
+  border-bottom: none !important;
+  background: none !important;
+  padding: 8px 6px !important;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: white !important;
+}
+</style>

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,119 @@ 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 === ((this.localPagination && this.localPagination.pageSize) ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1))) : 0) || !((this.localPagination && this.localPagination.pageSize) ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1))) : 0) }]}
+                onClick={() => {
+                  const totalPages = (this.localPagination && this.localPagination.pageSize)
+                    ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1)))
+                    : 0
+                  if (totalPages > 0 && 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 === ((this.localPagination && this.localPagination.pageSize) ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1))) : 0) || !((this.localPagination && this.localPagination.pageSize) ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1))) : 0) }]}
+                onClick={() => {
+                  const totalPages = (this.localPagination && this.localPagination.pageSize)
+                    ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1)))
+                    : 0
+                  if (totalPages > 0 && 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">
+                共{(this.localPagination && this.localPagination.pageSize)
+                  ? Math.ceil(((this.localPagination.total || 0) / (this.localPagination.pageSize || 1)))
+                  : 0}页, {(this.localPagination && typeof this.localPagination.total !== 'undefined') ? this.localPagination.total : 0}条
+              </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 +648,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)
+  }
+}