@antsoo-lib/core 2.0.5 → 3.0.1

package/src/BaseSearch/index.vue

@@ -1,371 +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>
+<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>