@antsoo-lib/core 1.0.17 → 2.0.2

package/src/BaseTable/index.vue

@@ -1,17 +1,19 @@
 <script lang="ts" setup>
-import { Tooltip } from '@antsoo-lib/components'
+import { Button as AButton, Pagination, Popover, Tooltip } from '@antsoo-lib/components'
 import { QuestionCircleOutlined } from '@antsoo-lib/icons'
 import type { AnyObject } from '@antsoo-lib/shared'
 import { PRECISION } from '@antsoo-lib/shared'
-import { env, generateUniqueId, isNaN } from '@antsoo-lib/utils'
+import type { env as _env } from '@antsoo-lib/utils'
+import { generateUniqueId, isNaN } from '@antsoo-lib/utils'
 import { cloneDeep } from 'lodash-es'
 import type { VxeComponentSizeType } from 'vxe-pc-ui'
 import type { VxeGridPropTypes, VxeGridProps } from 'vxe-table'
 
 import { computed, ref } from 'vue'
 
-import { renderToolbar, useToolbarState } from './utils'
-import type { ToolbarConfig } from './utils'
+import { renderToolbar } from '../render/helper'
+import { useToolbarState } from '../render/state'
+import type { ToolbarConfig } from '../render/types'
 
 // Props默认值
 const props = withDefaults(defineProps<Props>(), {
@@ -29,6 +31,7 @@ const props = withDefaults(defineProps<Props>(), {
   rToolBarCount: 4,
   permissions: () => [],
   getCommonCodeOptions: undefined,
+  hoverColor: '#E3FCF7',
 })
 // 抛出Emit方法（类型化）
 const emit = defineEmits<{
@@ -42,7 +45,7 @@ const emit = defineEmits<{
   (e: 'radioChangeEvent', params: { row: any; rowIndex: number; records: any }): void
   (e: 'buttonClick', params: { button: Button; row: any; grid: any }): void
 }>()
-const { isDev, isTest } = env()
+const { isDev, isTest } = props.env || {}
 const showHelpText = isDev || isTest
 
 // Interface
@@ -127,6 +130,10 @@ interface Props {
   permissions?: string[]
   // Decoupled: Function to get common code options
   getCommonCodeOptions?: (type: string) => Array<{ code: string; name: string }>
+  // 悬浮背景颜色
+  hoverColor?: string | null
+  // 环境变量
+  env?: ReturnType<typeof _env>
 }
 
 // table 实例
@@ -160,7 +167,6 @@ const actionColumn = computed(() => {
 // 预过滤拥有权限的按钮，减少每行的计算量
 const permittedButtons = computed(() => {
   const all = actionColumn.value?.buttons || []
-  // Decoupled: Use props.permissions
   return all.filter((b) => !b.permission || props.permissions.includes(b.permission))
 })
 
@@ -339,7 +345,16 @@ function handleRowButtonClick(button: any, row: any) {
  */
 function goToPage(page: number) {
   if (paginationRef.value && page >= 1) {
-    onChange(page, currentPageSize.value)
+    onChange(page, paginationPageSize.value)
+  }
+}
+
+/**
+ * 重置分页到第一页
+ */
+function resetPageNumber(): void {
+  if (paginationRef.value) {
+    onChange(1, paginationPageSize.value)
   }
 }
 
@@ -452,8 +467,15 @@ function handleGridColumns() {
     })
   }
   // 递归处理列配置
-  const processColumn = (column: Column): any => {
+  const processColumn = (column: Column, index: number): any => {
     const { buttons, ...col } = column
+    // 仅当缺少 field 且不是特殊类型列时，自动补充唯一 field
+    // 避免覆盖已有配置，且不仅限于“操作”列
+    if (!col.field && !col.type) {
+      // 如果是操作列，优先用 'action'（更具语义），否则用索引生成唯一ID
+      col.field = col.title === '操作' ? 'action' : `col_${index}`
+    }
+
     // 选择器居中时，若启用了溢出选项，会引起3px的误差
     if (col.type === 'checkbox' || col.type === 'radio') {
       return {
@@ -573,7 +595,7 @@ function handleGridColumns() {
 
   // 返回处理数据
   return columns.map((column: Column, idx: number) => {
-    const baseColumn = processColumn(column)
+    const baseColumn = processColumn(column, idx)
 
     if (idx === firstNonTypeIndex && props.tree) {
       baseColumn.treeNode = true
@@ -643,6 +665,13 @@ function getSelectedRecords() {
   return null
 }
 
+/**
+ * 获取表格实例
+ */
+function getGrid(): unknown {
+  return basetable.value
+}
+
 /**
  * 递归查找列配置
  * @param columns 列数组
@@ -689,6 +718,8 @@ defineExpose({
   getLToolBarValues: () => lToolBarState.getAllValues(),
   getRToolBarValues: () => rToolBarState.getAllValues(),
   goToPage,
+  resetPageNumber,
+  getGrid,
   lToolBarState,
   rToolBarState,
   getSelectedRecords,
@@ -701,9 +732,9 @@ defineExpose({
     v-bind="options"
     :footer-data="footerRenderData"
     :style="{
-      '--vxe-ui-table-row-hover-background-color': '#E3FCF7',
-      '--vxe-ui-table-column-hover-background-color': '#E3FCF7',
-      '--vxe-ui-table-row-hover-striped-background-color': '#E3FCF7',
+      '--vxe-ui-table-row-hover-background-color': hoverColor,
+      '--vxe-ui-table-column-hover-background-color': hoverColor,
+      '--vxe-ui-table-row-hover-striped-background-color': hoverColor,
     }"
     @cell-click="handleCellClick"
     @checkbox-all="selectAllChangeEvent"
@@ -739,12 +770,12 @@ defineExpose({
             :disabled="button.disabled?.(row, basetable)"
             :loading="isButtonLoading(row, button)"
             v-bind="button.props"
-            @click="handleRowButtonClick(button, row)"
+            @click.stop="handleRowButtonClick(button, row)"
           >
             {{ typeof button.name === 'function' ? button.name(row) : button.name }}
           </AButton>
         </template>
-        <APopover v-if="getVisibleButtons(row).length > 3" placement="bottomRight">
+        <Popover v-if="getVisibleButtons(row).length > 3" placement="bottomRight">
           <template #content>
             <template v-for="button in getVisibleButtons(row).slice(2)" :key="button.name">
               <AButton
@@ -754,20 +785,20 @@ defineExpose({
                 :disabled="button.disabled?.(row, basetable)"
                 :loading="isButtonLoading(row, button)"
                 v-bind="button.props"
-                @click="handleRowButtonClick(button, row)"
+                @click.stop="handleRowButtonClick(button, row)"
               >
                 {{ typeof button.name === 'function' ? button.name(row) : button.name }}
               </AButton>
             </template>
           </template>
           <AButton type="link" size="small"> 更多 </AButton>
-        </APopover>
+        </Popover>
       </div>
     </template>
     <!-- 分页器 -->
     <template v-if="pager" #pager>
       <div class="base-table-pager">
-        <APagination
+        <Pagination
           ref="paginationRef"
           size="small"
           :total="total"
@@ -873,9 +904,4 @@ defineExpose({
   color: #1288fc;
   cursor: pointer;
 }
-
-/* 斑马纹行悬浮背景颜色 */
-:deep(.vxe-table--body .vxe-body--row.row--stripe.row--hover) {
-  background-color: red !important;
-}
 </style>