@antsoo-lib/core 1.0.17 → 2.0.2

package/dist/types/{core/src/BaseTable → render}/types.d.ts

@@ -1,6 +1,7 @@
-import { ButtonProps, CascaderProps, CheckboxGroupProps, CheckboxProps, ColProps, DatePickerProps, InputNumberProps, InputProps, RadioGroupProps, RowProps, SelectProps, SwitchProps, TreeSelectProps, UploadProps } from '../../packages/components/index.ts';
+import { ButtonProps, CascaderProps, CheckboxGroupProps, CheckboxProps, ColProps, DatePickerProps, InputNumberProps, InputProps, RadioGroupProps, RowProps, SelectProps, SwitchProps, TreeProps, TreeSelectProps, UploadProps } from '../../packages/components/index.ts';
 import { AnyObject, VoidFunction } from '../../packages/shared/index.ts';
 import { VNode } from 'vue';
+import { CustomToolbarItem } from './Custom';
 import { ToolbarState } from './state';
 export type ToolbarEventHandler = VoidFunction;
 export interface BaseEvents {
@@ -166,6 +167,40 @@ export interface TreeSelectToolbarItem extends BaseToolbarItem {
         onChange?: (value: any, allValues: AnyObject, toolbarState: ToolbarState) => void;
     };
 }
+export interface TreeToolbarItem extends BaseToolbarItem {
+    type: 'tree';
+    props?: Partial<TreeProps> & {
+        checkedKeys?: any[];
+        expandedKeys?: any[];
+    };
+    events?: BaseEvents & {
+        'onUpdate:checkedKeys'?: (value: any, allValues: AnyObject, toolbarState: ToolbarState) => void;
+        'onUpdate:expandedKeys'?: (value: any, allValues: AnyObject, toolbarState: ToolbarState) => void;
+        onCheck?: (value: any, info: any, allValues: AnyObject, toolbarState: ToolbarState) => void;
+        onExpand?: (value: any, info: any, allValues: AnyObject, toolbarState: ToolbarState) => void;
+        onChange?: (value: any, allValues: AnyObject, toolbarState: ToolbarState) => void;
+    };
+}
+export interface InputRangeToolbarItem extends BaseToolbarItem {
+    type: 'inputRange';
+    props?: {
+        startProps?: Record<string, unknown>;
+        endProps?: Record<string, unknown>;
+        separator?: string;
+        startPlaceholder?: string;
+        endPlaceholder?: string;
+        style?: AnyObject;
+        className?: string;
+        allowClear?: boolean;
+    };
+    attr?: string[];
+    events?: BaseEvents & {
+        'onUpdate:value'?: (value: [string, string], allValues: AnyObject, toolbarState: ToolbarState) => void;
+        onChange?: (value: [string, string], allValues: AnyObject, toolbarState: ToolbarState) => void;
+        onStartChange?: (value: string, allValues: AnyObject, toolbarState: ToolbarState) => void;
+        onEndChange?: (value: string, allValues: AnyObject, toolbarState: ToolbarState) => void;
+    };
+}
 export interface InputNumberToolbarItem extends BaseToolbarItem {
     type: 'inputNumber';
     props?: Partial<InputNumberProps> & {
@@ -256,15 +291,23 @@ export interface SselectPageProps {
     allowClear?: boolean;
     showSearch?: boolean;
     disabled?: boolean;
-    maxTagCount?: number;
+    maxTagCount?: number | 'responsive';
     size?: 'large' | 'middle' | 'small';
     mode?: 'multiple' | 'tags';
+    params?: AnyObject;
     api: {
         url: string;
         method?: 'GET' | 'POST';
         headers?: Record<string, string>;
         params?: AnyObject;
         data?: AnyObject;
+        request?: (config: {
+            method?: 'GET' | 'POST';
+            url: string;
+            headers?: Record<string, string>;
+            params?: AnyObject;
+            data?: AnyObject;
+        }) => Promise<any>;
     };
     dataMapping?: {
         list?: string;
@@ -285,6 +328,7 @@ export interface SselectPageProps {
     transformData?: (data: any) => any;
     autoLoad?: boolean;
     autoFocus?: boolean;
+    attr?: Record<string, string>;
     [key: string]: any;
 }
 export interface SselectPageToolbarItem extends BaseToolbarItem {
@@ -294,7 +338,7 @@ export interface SselectPageToolbarItem extends BaseToolbarItem {
     };
     events?: BaseEvents & {
         'onUpdate:value'?: (value: any, allValues: AnyObject, toolbarState: ToolbarState) => void;
-        onChange?: (value: any, option: any, allValues: AnyObject, toolbarState: ToolbarState) => void;
+        onChange?: (value: any, option: any, allOptions: any, allValues: AnyObject, toolbarState: ToolbarState) => void;
         onSearch?: (value: string, allValues: AnyObject, toolbarState: ToolbarState) => void;
         onClear?: (allValues: AnyObject, toolbarState: ToolbarState) => void;
     };
@@ -364,7 +408,7 @@ export interface PresetFilesToolbarItem extends PresetBaseToolbarItem {
     files: FilesPresetConfig;
 }
 export type PresetToolbarItem = PresetDelsToolbarItem | PresetExportToolbarItem | PresetFilesToolbarItem;
-export type RenderableToolbarItem = ButtonToolbarItem | InputToolbarItem | RadioGroupToolbarItem | CheckboxToolbarItem | SwitchToolbarItem | CheckboxGroupToolbarItem | DatePickerToolbarItem | UploadToolbarItem | InputNumberToolbarItem | SelectToolbarItem | TreeSelectToolbarItem | InputPasswordToolbarItem | SselectPageToolbarItem | AutoCompleteToolbarItem | InputGroupToolbarItem | CascaderToolbarItem | AreaCascaderToolbarItem;
+export type RenderableToolbarItem = ButtonToolbarItem | InputToolbarItem | RadioGroupToolbarItem | CheckboxToolbarItem | SwitchToolbarItem | CheckboxGroupToolbarItem | DatePickerToolbarItem | UploadToolbarItem | InputNumberToolbarItem | SelectToolbarItem | TreeToolbarItem | TreeSelectToolbarItem | InputPasswordToolbarItem | SselectPageToolbarItem | AutoCompleteToolbarItem | InputGroupToolbarItem | CascaderToolbarItem | AreaCascaderToolbarItem | InputRangeToolbarItem | CustomToolbarItem;
 export type ToolbarItem = RenderableToolbarItem | PresetToolbarItem;
 export type InputGroupChild = RenderableToolbarItem & {
     span?: number;

package/dist/types/utils/attrMapping.d.ts

@@ -0,0 +1,26 @@
+import { AnyObject } from '../../packages/shared/index.ts';
+/**
+ * 安全获取嵌套属性值，支持 a.b.c 路径
+ */
+export declare function getByPath(obj: any, path?: string): any;
+/**
+ * 根据 attr 规则从 formData 聚合初始值：
+ * - 数组：返回对应字段的值数组
+ * - 对象：返回 { [sourcePath]: formData[targetKey] } 结构，便于组件按源字段进行回显
+ */
+export declare function buildValueFromAttr(formData: AnyObject, attr: string[] | AnyObject): any;
+/**
+ * 按 attr 对象映射将选项数据写入 formData：
+ * - 支持单选与多选；
+ * - 优先使用 option.__raw 原始对象，其次使用 option 自身；
+ * - sourcePath 支持嵌套路径（例如 'data.id'）。
+ */
+export declare function applyAttrMapping(formData: AnyObject, toolbarState: {
+    setValue: (k: string, v: any) => void;
+}, attr: Record<string, string>, value: any, option: any, isMultiple: boolean): void;
+declare const _default: {
+    buildValueFromAttr: typeof buildValueFromAttr;
+    applyAttrMapping: typeof applyAttrMapping;
+    getByPath: typeof getByPath;
+};
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antsoo-lib/core",
   "type": "module",
-  "version": "1.0.17",
+  "version": "2.0.2",
   "private": false,
   "license": "MIT",
   "exports": {
@@ -9,8 +9,7 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    },
-    "./style.css": "./dist/core.css"
+    }
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -20,22 +19,20 @@
     "registry": "https://registry.npmjs.com/"
   },
   "peerDependencies": {
+    "@ant-design/icons-svg": "^4.4.2",
+    "@types/lodash-es": "^4.17.12",
+    "@vxe-ui/plugin-export-xlsx": "^4.0.7",
+    "@vxe-ui/plugin-menu": "^4.0.2",
+    "@vxe-ui/plugin-render-wangeditor": "^4.0.2",
     "lodash-es": "^4.17.21",
     "vue": "^3.3.4",
-    "@antsoo-lib/icons": "0.1.1",
-    "@antsoo-lib/utils": "0.1.2",
-    "@antsoo-lib/shared": "0.0.1",
-    "@antsoo-lib/components": "0.1.17"
-  },
-  "dependencies": {
     "vxe-pc-ui": "^4.12.31",
     "vxe-table": "^4.17.48",
-    "xe-utils": "^4.0.0"
-  },
-  "devDependencies": {
-    "@ant-design/icons-svg": "^4.4.2",
-    "@types/lodash-es": "^4.17.12",
-    "lodash-es": "^4.17.21"
+    "xe-utils": "^4.0.0",
+    "@antsoo-lib/icons": "0.2.0",
+    "@antsoo-lib/utils": "0.2.0",
+    "@antsoo-lib/components": "1.0.0",
+    "@antsoo-lib/shared": "0.1.0"
   },
   "scripts": {
     "dev": "vite build --watch",

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>