import React, { ReactNode } from 'react'; import { EmptyProps } from '../Empty'; import { ReqFuncProps } from './util'; import { HelperTextDetailProps } from "../HelperText"; /** 搜索方法 */ export interface SearchFuncProps { page?: number; size?: number; [name: string]: any; } /** 搜索接口返回数据 */ export interface SearchReqDataProps { data?: { /** * 分页 * data => {list: any[], total: number} * * 不分页 * data => any[] * */ data?: any; /** * 接口数据是否生成树, 默认false,不生成树,平铺数据 * 一般用户传死数据这种情况 * */ isTree?: boolean; }; err?: any; } /** 面包屑 */ export interface BreadcrumbsListItem { /** 每一项显示名 */ label: ReactNode; /** 值 每一行数据的key */ value: string; /** 每一项最大宽度 */ maxWidth?: string; /** 是否可点击 */ disabled?: boolean; [name: string]: any; } /** 类型字段 */ export interface SelectorListTypeItem { /** 显示名 */ label: ReactNode; /** 类型 */ value: string; } /** 数据源 */ export interface SelectorAnyJson { /** 唯一值 */ key?: string; /** 父级id */ parentId?: string; /** 类型 */ type?: string; /** 图片 */ img?: ReactNode; /** 主标题, 默认label */ mainTitle?: ReactNode; /** 辅助信息 */ subTitle?: ReactNode; /** 标签 */ tag?: ReactNode; /** 标签样式 */ tagStyle?: React.CSSProperties; /** 下级字段 */ children?: SelectorAnyJson[]; /** 禁用 */ disabled?: boolean; /** 禁用下级 */ disabledChild?: boolean; /** 是否可选 */ choice?: boolean; /** 是否具有详情 */ detail?: boolean; /** 是否叶子节点, 不是叶子节点就是分支节点, 渲染dom类型的 */ leaf?: boolean; /** 是否存在下级 */ child?: boolean; /** 是否有× 选中数据专用 */ close?: boolean; /** 原始数据 */ data?: any; [name: string]: any; } /** 常量 */ export interface SelectorConstData { /** 所有数据的json */ jsonData: Record; /** 浅拷贝对象 */ jsonDataCopy: Record; /** 第一层数据 */ oneDataList: SelectorAnyJson[]; /** 当前页数据源 */ currentSourceData: SelectorAnyJson[]; /** 当前选中值的mapping */ selectValueJson: Record; /** 面包屑数组 */ breadcrumbsList: BreadcrumbsListItem[]; /** 接口id */ reqId: string; /** 请求数据 */ reqParams: { /** 页数 */ size: number; /** 分页 */ pagination: boolean; /** 来加载 */ isLazy: boolean; }; /** 不是懒加载, 是否请求过 */ noLazyReq: boolean; /** 更改数据源定时器 */ reqTimer: any; /** 页码 */ page: number; /** 搜索值 */ searchVal: string; /** 搜索点了下级,记录搜索前的面包屑 null说明没有储存过 */ beforeSearchBreadcrumbs: BreadcrumbsListItem[] | null; /** 搜索配置 */ searchConfig: { /** 页码 */ page: number; /** 每页条数 */ size: number; /** 请求id */ reqId: string; /** 当前页数据源 */ currentSourceData: SelectorAnyJson[]; }; [name: string]: any; } /** 字段配置,对应数据字段 */ export interface SelectorFieldConfigProps { /** 图片 */ img?: string; /** 主标题, 默认label */ mainTitle?: string; /** 辅助信息 */ subTitle?: string; /** 标签 */ tag?: string; /** 类型字段 */ type?: string; /** 返回值唯一的key,默认为key 选中数据专用 */ key?: string; /** 下级字段,默认children 展示数据专用 */ children?: string; /** 父级默认字段,默认parentId 展示数据专用 */ parentId?: string; } /** 节点接口定义 */ export interface SelectorNodeProps { /** className */ className?: string; /** 样式 */ style?: React.CSSProperties; /** 节点模式, 叶子节点 / 分支节点 */ nodeMode?: 'leaf' | 'branch'; /** 使用场景 列表选择/已选择列表 */ useCase?: 'view' | 'edit'; /** 选择模式 radio单选 check复选 undefined不存在选择 */ selectMode?: 'radio' | 'check'; /** 图标地址 string为图标地址 其他为dom */ img?: ReactNode; /** 主标题 */ mainTitle?: ReactNode; /** 副标题 */ subTitle?: ReactNode; /** 标签 */ tag?: ReactNode; /** 标签样式 */ tagStyle?: React.CSSProperties; /** 详情 */ detail?: boolean; /** 详情渲染 */ detailRender?: () => ReactNode; /** 选中每一项自定义 */ leftRender?: () => ReactNode; /** 是否存在下级 */ child?: boolean; /** 是否关闭 */ close?: boolean; /** 禁用 */ disabled?: boolean; /** 禁用下级 */ disabledChild?: boolean; /** 选中 */ checked?: boolean; /** 半选 */ indeterminate?: boolean; /** 选择事件 */ onSelect?: () => void; /** 点击下级 */ onLevel?: () => void; /** 点击× */ onClose?: () => void; [name: string]: any; } /** 主体接口定义 */ export interface SelectorMainProps { /** className */ className?: string; /** 样式 */ style?: React.CSSProperties; /** 请求地址 */ url?: string; /** value */ value?: Record; /** 唯一值,默认key */ rowKey?: string; /** 选择模式 radio单选 check复选 undefined不存在选择 */ selectMode?: 'radio' | 'check'; /** 节点模式, 叶子节点 / 分支节点 */ nodeMode?: 'leaf' | 'branch'; /** 数据渲染分组 */ groupType?: SelectorListTypeItem[]; /** 分组作用域 默认search */ groupRange?: 'search' | 'list' | 'searchList'; /** 内容头部,搜索框和数据区之间的插槽 */ mainHeader?: ReactNode; /** 面包屑 */ breadcrumbs?: boolean; /** 面包屑中间符号 */ breadcrumbsSeparator?: string; /** 面包屑数组 */ breadcrumbsList?: BreadcrumbsListItem[]; /** 搜索 */ search?: boolean; /** 搜索面包屑 */ searchBreadcrumbs?: ReactNode; /** 搜索值 */ searchVal?: { val: string; }; /** 搜索Placeholder */ searchPlaceholder?: ReactNode; /** 搜索触发方式 */ searchTrigger?: 'onChange' | 'onEnter'; /** 搜索loading */ searchLoading?: boolean; /** 搜索数据 */ searchList?: SelectorAnyJson[]; /** 加载中 */ loading?: boolean; /** 是否懒加载 */ isLazy?: boolean; /** 是否具有详情 */ detail?: boolean; /** 空状态属性 */ emptyProps?: EmptyProps; /** * 详情渲染 * @param item 当前节点数据 * @param bol true列表数据, false展示数据 * */ detailRender?: (item: SelectorAnyJson, bol: boolean) => ReactNode; /** 加载更多 */ loadMore?: boolean; /** 搜索模块加载更多 */ searchLoadMore?: boolean; /** 是否全选 */ isAllCheck?: boolean; /** 渲染数据 */ list?: SelectorAnyJson[]; /** 禁用 */ disabled?: string[] | boolean; /** 禁用下级 */ disabledChild?: string[] | boolean; /** 字段配置,对应数据字段 */ fieldConfig?: SelectorFieldConfigProps; /** 选择事件 */ onSelect?: (item: SelectorAnyJson) => void; /** 点击下级 */ onLevel?: (item: SelectorAnyJson, isSearch?: boolean) => void; /** 查看更多 */ onLoad?: (isSearch?: boolean) => void; /** 点击全选 */ onAllCheck?: (bol?: boolean) => void; /** 点击面包屑 */ onClickBreadcrumbs?: (item: BreadcrumbsListItem) => void; /** 搜索事件 */ onSearch?: (val: string, bol: boolean) => void; /** 刷新事件 */ onRefresh?: () => void; [name: string]: any; } /** 选中数据接口定义 */ export interface SelectorDataProps { /** className */ className?: string; /** 样式 */ style?: React.CSSProperties; /** 空状态属性 */ emptyProps?: EmptyProps; /** 布局方式 标签 / 节点 */ layout?: 'tag' | 'node'; /** 节点模式, 叶子节点 / 分支节点 */ nodeMode?: 'leaf' | 'branch'; /** 禁用 */ disabled?: string[] | boolean; /** 是否具有详情 */ detail?: boolean; /** * 详情渲染 * @param item 当前节点数据 * @param bol true列表数据, false展示数据 * */ detailRender?: (item: SelectorAnyJson, bol: boolean) => ReactNode; /** 数据渲染分组 */ groupType?: SelectorListTypeItem[]; /** 数据 */ list?: SelectorAnyJson[]; /** 返回数据字段配置,对应数据字段 */ backDataFieldConfig?: SelectorFieldConfigProps; /** 处理选中数据的节点信息 */ handSelectorNodeInfo?: (item: SelectorAnyJson) => SelectorAnyJson; /** 选中数据标题render */ selectDataTitleRender?: (list?: SelectorAnyJson[]) => ReactNode; /** 选中每一项自定义 */ selectRenderItem?: (item: SelectorAnyJson) => ReactNode; /** 选中项整体自定义渲染 */ selectRender?: (list: SelectorAnyJson[]) => ReactNode; /** 点击× */ onClose?: (item: SelectorAnyJson, index: number) => void; [name: string]: any; } /** 组件props */ export interface SelectorProps extends HelperTextDetailProps { /** className */ className?: string; /** 样式 */ style?: React.CSSProperties; /** 唯一值,默认key */ rowKey?: string; /** 刷新 */ refresh?: any; /** 值 */ value?: Record[] | Record; /** 默认值 不受控 */ defaultValue?: Record[] | Record; /** 布局方式 左右 / 上下 / 无选中数据 */ layout?: 'lr' | 'tb' | 'list'; /** 选择模式 radio单选 check复选 undefined不存在选择 */ selectMode?: 'radio' | 'check'; /** 节点模式, 叶子节点 / 分支节点 默认分支节点*/ nodeMode?: 'leaf' | 'branch'; /** 请求上下文 */ ctx?: string; /** 请求地址 */ url?: string; /** 请求方式 */ method?: 'Post' | 'Get'; /** 本地数据源 */ data?: any; /** 是否分页 */ pagination?: boolean; /** 一页条数 */ size?: number; /** 是否懒加载 false为全量数据 */ isLazy?: boolean; /** 请求参数 */ params?: Record; /** 数据渲染分组 */ groupType?: SelectorListTypeItem[]; /** 分组作用域 默认search */ groupRange?: 'search' | 'list' | 'searchList'; /** 内容头部,搜索框和数据区之间的插槽 */ mainHeader?: ReactNode; /** 面包屑 */ breadcrumbs?: boolean; /** 面包屑中间符号 */ breadcrumbsSeparator?: string; /** 是否展示首层 */ showbreadcrumbsHead?: boolean; /** 面包屑首层 */ breadcrumbsHead?: BreadcrumbsListItem; /** 搜索 */ search?: boolean; /** 搜索Placeholder */ searchPlaceholder?: ReactNode; /** 搜索触发方式 */ searchTrigger?: 'onChange' | 'onEnter'; /** 是否具有详情 */ detail?: boolean; /** * 详情渲染 * @param item 当前节点数据 * @param bol true列表数据, false展示数据 * */ detailRender?: (item: SelectorAnyJson, bol: boolean) => Promise | ReactNode; /** 是否全选, 只存在复选框的时候 */ isAllCheck?: boolean; /** 禁用 */ disabled?: string[] | boolean; /** 禁用下级 */ disabledChild?: string[] | boolean; /** 字段配置,对应数据字段 */ fieldConfig?: SelectorFieldConfigProps; /** 返回数据字段配置,对应数据字段 */ backDataFieldConfig?: SelectorFieldConfigProps; /** 处理节点信息 isSearch是否搜索 */ handNodeInfo?: (item: SelectorAnyJson, isSearch: boolean) => SelectorAnyJson; /** 处理选中数据的节点信息 */ handSelectorNodeInfo?: (item: SelectorAnyJson) => SelectorAnyJson; /** 处理请求参数 */ paramsCallback?: (data: ReqFuncProps, isSearch?: boolean) => ReqFuncProps; /** 请求回调参数 requestCallback(data, cb) cb(data) 需要回调数据回来 */ requestCallback?: (data: any, cb: (data: any) => void, isSearch?: boolean) => void; /** 选中数据标题render */ selectDataTitleRender?: (list?: SelectorAnyJson[]) => ReactNode; /** 选中每一项自定义 */ selectRenderItem?: (item: SelectorAnyJson) => ReactNode; /** 选中项整体自定义渲染 */ selectRender?: (list: SelectorAnyJson[]) => ReactNode; /** 空状态属性 */ emptyProps?: EmptyProps; /** * 搜索事件 * @param val 搜索框的值 * @return [] 返回平铺数组 * */ onSearch?: (val: string, reqParams: SearchFuncProps) => Promise | SearchReqDataProps; /** 刷新事件 */ onRefresh?: () => void; /** 选择事件 返回true不触发onChange事件 * item 点击数据, 全选时候的数据 * bol 选中/不选中 * isAllCheck 全选 * */ onSelect?: (item: SelectorAnyJson | SelectorAnyJson[], bol: boolean, isAllCheck: boolean) => Promise | (boolean | void); /** 改变事件 val绑定值, node处理过的数据 rowData原始数据 */ onChange?: (val: Record[] | Record | null, node: Record, rowData: Record) => void; [name: string]: any; }