@antsoo-lib/core 2.0.0 → 2.0.3

package/src/BaseSearch/index.vue

@@ -0,0 +1,371 @@
+<script lang="ts" setup>
+import { Button, Popover } from '@antsoo-lib/components'
+import type { AnyObject } from '@antsoo-lib/shared'
+
+import { computed, nextTick, ref } from 'vue'
+import type { Component } from 'vue'
+
+import CoreForm from '../Form/CoreForm.vue'
+import type { FormField } from '../Form/types'
+
+interface Props {
+  searchFields?: FormField[]
+  labelWidth?: number
+  actionsSpan?: number
+  gutter?: number
+  // 保持内边距
+  padding?: boolean
+  // 外部（主搜索区）BaseForm 组件
+  outerBaseForm?: Component
+  // 内部（更多筛选区）BaseForm 组件
+  innerBaseForm?: Component
+  // 更多筛选区表单的配置项（如 labelWidth, gutter 等），如果不传则使用默认值
+  innerBaseFormProps?: AnyObject
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  searchFields: () => [],
+  labelWidth: 112,
+  actionsSpan: 8,
+  gutter: 0,
+  padding: true,
+  outerBaseForm: () => CoreForm,
+  innerBaseForm: undefined,
+  innerBaseFormProps: () => ({}),
+})
+
+// 定义 emits
+const emit = defineEmits<{
+  search: [values: AnyObject]
+  reset: [values: AnyObject]
+}>()
+
+// 使用 ref 而不是 reactive
+const formData = ref<AnyObject>({})
+// 弱类型定义，因为传入的 baseForm 可能不同，但必须实现 BaseForm 的接口
+const baseFormRef = ref<any>()
+const baseFormRef2 = ref<any>()
+
+// 新增：表单重置 key，用于强制重新渲染
+const formKey = ref(0)
+
+// 更多筛选区域使用的 Form 组件：如果提供了 innerBaseForm 则使用它，否则回退到 outerBaseForm
+const resolvedInnerBaseForm = computed(() => props.innerBaseForm || props.outerBaseForm)
+
+const fields = computed(() => {
+  return props.searchFields.map((field) => {
+    return {
+      ...field,
+      span: props.actionsSpan,
+    }
+  })
+})
+
+// 计算首行是否能容纳按钮区域（24 栅格）
+const canInlineActions = computed(() => {
+  let used = 0
+  for (const field of fields.value) {
+    const s = field.span ?? 24
+    if (used + s > 24) break
+    used += s
+  }
+  return used + props.actionsSpan <= 24
+})
+
+// 新增：可见/隐藏筛选项拆分（24 栅格一行）
+const visibleFields = computed<FormField[]>(() => {
+  const limit = 24 - (canInlineActions.value ? props.actionsSpan : 0)
+  const result: FormField[] = []
+  let used = 0
+  for (const f of fields.value) {
+    const s = f.span ?? 24
+    if (used + s > limit) break
+    result.push(f)
+    used += s
+  }
+  return result
+})
+
+const hiddenFields = computed<FormField[]>(() => {
+  const visibleCount = visibleFields.value.length
+  return fields.value.slice(visibleCount).map((f) => ({ ...f, span: 12 }))
+})
+
+const showMore = computed(() => hiddenFields.value.length > 0)
+
+// 初始写入所有字段的默认值（无论 Popover 是否展开）
+const initAllFieldDefaults = () => {
+  const initial: AnyObject = {}
+  props.searchFields.forEach((f) => {
+    let val = f.props?.value
+
+    // 尝试格式化 dayjs 对象
+    const format = f.props?.valueFormat
+    const formatVal = (v: any) =>
+      format && v && typeof v.format === 'function' ? v.format(format) : v
+
+    if (val !== undefined) {
+      if (Array.isArray(val)) {
+        val = val.map(formatVal).filter((v) => v !== null && v !== undefined && v !== '')
+      } else {
+        val = formatVal(val)
+      }
+    }
+
+    if (f.key) {
+      if (val !== undefined && (Array.isArray(val) ? val.length > 0 : true)) {
+        initial[f.key] = val
+      } else if (
+        (f.type === 'select' || f.type === 'sselectPage') &&
+        (f.props?.mode === 'multiple' || f.props?.mode === 'tags')
+      ) {
+        // 多选/标签模式默认初始化为 []，避免出现空标签
+        initial[f.key] = []
+      } else if (f.type === 'checkboxGroup' || f.type === 'upload') {
+        initial[f.key] = []
+      } else if (f.type === 'treeSelect' && (f.props?.multiple || f.props?.treeCheckable)) {
+        initial[f.key] = []
+      } else {
+        initial[f.key] = null
+      }
+    } else if (Array.isArray(f.attr)) {
+      // 处理 attr 映射（主要用于 datePicker range 模式）
+      f.attr.forEach((targetKey: string, idx: number) => {
+        if (!targetKey) return
+        initial[targetKey] = Array.isArray(val) ? val[idx] : val
+      })
+    }
+  })
+  // 直接替换整个对象以确保响应性
+  formData.value = { ...initial }
+}
+
+// 重置处理
+const handleReset = async () => {
+  // 重新初始化所有字段
+  initAllFieldDefaults()
+
+  // 通过改变 key 强制重新渲染表单组件
+  formKey.value += 1
+
+  // 等待 UI 同步
+  await nextTick()
+
+  // 清除校验状态
+  baseFormRef.value?.clearValidate()
+  baseFormRef2.value?.clearValidate?.()
+
+  emit('reset', { ...formData.value })
+}
+
+// 组件加载时执行一次初始化
+initAllFieldDefaults()
+
+// 获取搜索参数 —— 统一返回 formData（包含可见与隐藏字段）
+const getSearchParams = () => {
+  const params = { ...formData.value }
+  // 遍历参数，清理无效值
+  Object.keys(params).forEach((key) => {
+    const val = params[key]
+    if (val === '') {
+      params[key] = null
+    } else if (Array.isArray(val)) {
+      // 过滤数组中的空值（如 null, undefined, 空字符串）
+      const filtered = val.filter((v) => v !== null && v !== undefined && v !== '')
+      // 如果过滤后数组为空，则设为 null，避免传递 [] 给后端可能导致的问题
+      params[key] = filtered.length > 0 ? filtered : null
+    }
+  })
+  return params
+}
+
+// 搜索处理 —— 统一从 formData 取值
+const handleSearch = async () => {
+  emit('search', getSearchParams())
+}
+
+const setFormValue = (values: AnyObject, key?: string[]) => {
+  // 1. 同步更新内部数据源，确保 getSearchParams 获取到最新值
+  if (key && key.length > 0) {
+    key.forEach((k) => {
+      if (values[k] !== undefined) {
+        formData.value[k] = values[k]
+      }
+    })
+  } else {
+    // 如果没有指定 key，则合并所有 values
+    Object.assign(formData.value, values)
+  }
+
+  // 2. 更新表单 UI
+  baseFormRef.value?.setFormValue(values, key)
+  baseFormRef2.value?.setFormValue(values, key)
+}
+
+// 暴露方法给父组件
+defineExpose({
+  getSearchParams,
+  initAllFieldDefaults,
+  setFormValue,
+})
+</script>
+
+<template>
+  <div class="base-search-container" :class="{ 'is-pd': padding }">
+    <component
+      :is="outerBaseForm"
+      ref="baseFormRef"
+      :key="`base-form-${formKey}`"
+      v-model:value="formData"
+      :fields="visibleFields"
+      label-align="right"
+      :label-width="labelWidth"
+      :inline-actions="canInlineActions"
+      :actions-span="actionsSpan"
+      :gutter="gutter"
+    >
+      <template v-if="canInlineActions" #search>
+        <div class="base-search-btn-container inline">
+          <div class="reset-btn" @click="handleReset">
+            <slot name="reset-icon">
+              <!-- 默认重置图标（使用 CSS 绘制或 SVG） -->
+              <span class="default-reset-icon">↺</span>
+            </slot>
+          </div>
+          <Button type="primary" @click="handleSearch"> 搜索 </Button>
+        </div>
+      </template>
+    </component>
+
+    <div v-if="!canInlineActions" class="base-search-btn-container">
+      <div v-show="showMore">
+        <Popover
+          v-if="showMore"
+          trigger="click"
+          placement="bottomLeft"
+          overlay-class-name="base-search-popover"
+        >
+          <template #content>
+            <div
+              class="popover-form-wrap"
+              :style="{ width: '550px', maxHeight: '60vh', overflowY: 'auto' }"
+            >
+              <component
+                :is="resolvedInnerBaseForm"
+                ref="baseFormRef2"
+                :key="`base-form-2-${formKey}`"
+                v-model:value="formData"
+                :fields="hiddenFields"
+                label-align="right"
+                label-position="vertical"
+                :gutter="10"
+                :label-width="200"
+                v-bind="innerBaseFormProps"
+              />
+            </div>
+          </template>
+          <div class="more-btn">
+            <slot name="more-icon">
+              <!-- 默认更多图标 -->
+              <span class="default-more-icon">...</span>
+            </slot>
+          </div>
+        </Popover>
+      </div>
+
+      <div class="reset-btn" @click="handleReset">
+        <slot name="reset-icon">
+          <span class="default-reset-icon">↺</span>
+        </slot>
+      </div>
+      <Button type="primary" @click="handleSearch"> 搜索 </Button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.base-search-container {
+  width: 100%;
+  border-radius: 8px;
+  background-color: #fff;
+  display: flex;
+  gap: 18px;
+
+  .base-search-btn-container {
+    display: flex;
+    gap: 12px;
+    flex-shrink: 0;
+
+    .reset-btn,
+    .more-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 4px;
+      border: 1px solid #dedee6;
+      box-sizing: border-box;
+
+      :deep(img),
+      :deep(svg) {
+        width: 20px;
+        height: 20px;
+      }
+
+      &:hover {
+        cursor: pointer;
+        border-color: rgba(0, 179, 148, 1);
+      }
+    }
+
+    &.inline {
+      margin-left: 12px;
+    }
+  }
+}
+
+.is-pd {
+  padding: 16px;
+}
+
+:deep(.form-container) {
+  padding: 0;
+  border-radius: 0px;
+
+  .ant-form {
+    .ant-row {
+      row-gap: 10px;
+    }
+
+    .ant-col {
+      .ant-form-item {
+        margin-bottom: 0px;
+      }
+    }
+  }
+}
+
+.popover-form-wrap {
+  max-width: 100%;
+
+  :deep(.form-container) {
+    .ant-form {
+      padding: 0 5px;
+
+      .ant-row {
+        .ant-form-item {
+          .ant-form-item-label {
+            line-height: normal;
+            padding: 0;
+
+            label {
+              line-height: normal;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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"
@@ -797,25 +828,25 @@ defineExpose({
   cursor: help;
 }
 
-:deep(.base-table-toolbar) {
+:global(.base-table-toolbar) {
   padding-top: 0;
   padding-bottom: 0;
+}
 
-  .base-table-toolbar-container {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 12px;
-  }
+:global(.base-table-toolbar .base-table-toolbar-container) {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
 
-  .vxe-tools--operate {
-    margin-bottom: 12px;
-  }
+:global(.base-table-toolbar .vxe-tools--operate) {
+  margin-bottom: 12px;
+}
 
-  .vxe-button--dropdown.size--mini,
-  .vxe-button.type--button.size--mini {
-    margin: 0 0 0 12px;
-  }
+:global(.base-table-toolbar .vxe-button--dropdown.size--mini),
+:global(.base-table-toolbar .vxe-button.type--button.size--mini) {
+  margin: 0 0 0 12px;
 }
 
 .base-table-buttons-container {
@@ -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>