@jiangood/open-admin 1.3.4 → 2.0.1

package/src/framework/fields/BaseRemoteSelect/index.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Spin, message } from 'antd';
+import { debounce } from 'lodash';
+import { HttpUtils } from '../../utils';
+
+interface BaseRemoteSelectState {
+    data: any[];
+    loading: boolean;
+}
+
+export interface BaseRemoteSelectProps {
+    url?: string;
+    value?: any;
+    debounceTime?: number;
+    [key: string]: any;
+}
+
+/**
+ * 远程数据加载选择器基类
+ *
+ * 处理通用的数据加载、防抖搜索、竞态处理、错误提示逻辑。
+ * 子类只需覆写 getLoadParams() 和 render()。
+ */
+export class BaseRemoteSelect<P extends BaseRemoteSelectProps = BaseRemoteSelectProps> extends React.Component<P, BaseRemoteSelectState> {
+    private fetchIdRef: number = 0;
+    private loadDataDebounce: ReturnType<typeof debounce>;
+
+    static defaultProps = {
+        debounceTime: 300,
+    };
+
+    constructor(props: P) {
+        super(props);
+        this.state = {
+            data: [],
+            loading: false,
+        };
+        this.loadDataDebounce = debounce(this._loadData, (props as any).debounceTime || 300);
+    }
+
+    componentDidMount() {
+        if (this.shouldLoadOnMount()) {
+            this.loadData();
+        }
+    }
+
+    componentWillUnmount() {
+        this.loadDataDebounce.cancel();
+    }
+
+    // ========== 子类可覆写 ==========
+
+    /** 返回请求 URL */
+    getUrl(): string | undefined {
+        return this.props.url;
+    }
+
+    /** 返回请求参数。searchText=undefined 表示初始加载 */
+    getLoadParams(searchText?: string): Record<string, any> {
+        return { searchText, selected: this.props.value };
+    }
+
+    /** 是否在挂载时自动加载数据 */
+    shouldLoadOnMount(): boolean {
+        return true;
+    }
+
+    // ========== 数据加载 ==========
+
+    private _loadData = async (searchText?: string) => {
+        const url = this.getUrl();
+        const fetchId = ++this.fetchIdRef;
+
+        this.setState({ loading: true });
+
+        try {
+            const data = await HttpUtils.get(url, this.getLoadParams(searchText));
+
+            if (fetchId === this.fetchIdRef) {
+                this.setState({ data: data || [] });
+            }
+        } catch (error) {
+            console.error('远程加载失败:', error);
+            message.error('加载失败，请重试');
+            if (fetchId === this.fetchIdRef) {
+                this.setState({ data: [] });
+            }
+        } finally {
+            if (fetchId === this.fetchIdRef) {
+                this.setState({ loading: false });
+            }
+        }
+    };
+
+    /**
+     * 触发数据加载
+     * - 传 searchText → 防抖后加载（用于搜索输入）
+     * - 不传 → 立即加载（用于初始加载）
+     */
+    loadData = (searchText?: string) => {
+        if (searchText != null) {
+            this.loadDataDebounce(searchText);
+        } else {
+            this._loadData();
+        }
+    };
+
+    /** 搜索输入处理（供 showSearch.onSearch 使用） */
+    handleSearch = (value: string) => {
+        if (value.trim() === '') {
+            this.loadData();
+            return;
+        }
+        this.loadData(value.trim());
+    };
+
+    // ========== Helper 方法 ==========
+
+    getShowSearch(): { filterOption: false; onSearch: (value: string) => void } {
+        return {
+            filterOption: false,
+            onSearch: this.handleSearch,
+        };
+    }
+
+    getNotFoundContent(): React.ReactNode {
+        return this.state.loading ? <Spin size="small" /> : '数据为空';
+    }
+}

package/src/framework/fields/FieldDictSelect/{index.jsx → index.tsx}

@@ -1,10 +1,16 @@
 import React from "react";
 import {Select} from "antd";
 import {DictUtils} from "../../utils";
+import type {SelectProps} from "antd/es/select";
+import type {FieldProps} from '../types';
 
-export class FieldDictSelect extends React.Component {
+interface FieldDictSelectProps extends Omit<SelectProps, 'options' | 'children' | 'mode' | 'value' | 'onChange'>, FieldProps<any> {
+    typeCode: string;
+}
+
+export class FieldDictSelect extends React.Component<FieldDictSelectProps> {
     render() {
-        const {value,  typeCode} = this.props;
+        const {value, typeCode} = this.props;
         const options = DictUtils.dictOptions(typeCode);
         const strValue = value == null ? null : String(value);
 
@@ -12,6 +18,6 @@ export class FieldDictSelect extends React.Component {
                        onChange={this.props.onChange}
                        style={{width: '100%', minWidth: 200}}
                        options={options}
-                   />
+        />;
     }
-}
+}

package/src/framework/fields/FieldRemoteSelect/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Select} from 'antd';
+import {BaseRemoteSelect} from '../BaseRemoteSelect';
+import type {SelectProps} from "antd/es/select";
+import type {FieldProps} from '../types';
+
+interface FieldRemoteSelectProps extends Omit<SelectProps, 'value' | 'onChange'>, FieldProps<any> {
+    url: string;
+    debounceTime?: number;
+    paramsProcessor?: (params: any) => any;
+    responseProcessor?: (response: any) => any;
+}
+
+export class FieldRemoteSelect extends BaseRemoteSelect<FieldRemoteSelectProps> {
+    static defaultProps = {
+        placeholder: '请搜索选择',
+    };
+
+    render() {
+        const {value, placeholder, ...rest} = this.props;
+        const {data, loading} = this.state;
+
+        return (
+            <Select
+                showSearch={this.getShowSearch()}
+                options={data}
+                notFoundContent={this.getNotFoundContent()}
+                style={{width: '100%', minWidth: 200}}
+                allowClear
+                loading={loading}
+                value={value}
+                placeholder={placeholder}
+                {...rest}
+            />
+        );
+    }
+}

package/src/framework/fields/FieldRemoteSelectMultiple/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Select } from 'antd';
+import { BaseRemoteSelect } from '../BaseRemoteSelect';
+
+export class FieldRemoteSelectMultiple extends BaseRemoteSelect {
+    static defaultProps = {
+        placeholder: '请搜索选择',
+    };
+
+    render() {
+        const { value, onChange, url, ...selectProps } = this.props;
+        const { data, loading } = this.state;
+
+        return (
+            <Select
+                showSearch={this.getShowSearch()}
+                value={value}
+                onChange={onChange}
+                options={data}
+                notFoundContent={this.getNotFoundContent()}
+                style={{ width: '100%', minWidth: 200 }}
+                allowClear
+                mode="multiple"
+                loading={loading}
+                {...selectProps}
+            />
+        );
+    }
+}

package/src/framework/fields/FieldRemoteSelectMultipleInline/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Select } from 'antd';
+import { StringUtils } from '../../utils';
+import { BaseRemoteSelect } from '../BaseRemoteSelect';
+
+/**
+ * 多选，但是值是字符串，逗号拼接的
+ */
+export class FieldRemoteSelectMultipleInline extends BaseRemoteSelect {
+    static defaultProps = {
+        placeholder: '请搜索选择',
+    };
+
+    render() {
+        const { value, onChange, url, ...selectProps } = this.props;
+        const { data, loading } = this.state;
+
+        return (
+            <Select
+                showSearch={this.getShowSearch()}
+                value={StringUtils.split(value, ',')}
+                onChange={(arr) => onChange && onChange(StringUtils.join(arr, ','))}
+                options={data}
+                notFoundContent={this.getNotFoundContent()}
+                style={{ width: '100%', minWidth: 200 }}
+                allowClear
+                mode="multiple"
+                loading={loading}
+                {...selectProps}
+            />
+        );
+    }
+}

package/src/framework/fields/FieldRemoteTree/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Spin, Tree } from 'antd';
+import { BaseRemoteSelect } from '../BaseRemoteSelect';
+
+/**
+ * 多选树
+ *
+ * 区别于下拉框，是扁平展示的树
+ * 这种需要扁平展示的树，通常都是多选。
+ */
+export class FieldRemoteTree extends BaseRemoteSelect {
+    getLoadParams() {
+        return undefined;
+    }
+
+    render() {
+        if (this.state.loading) return <Spin />;
+
+        return (
+            <Tree
+                multiple
+                checkable
+                onCheck={(e) => this.props.onChange && this.props.onChange(e.checked)}
+                checkedKeys={this.props.value}
+                treeData={this.state.data}
+                defaultExpandAll
+                checkStrictly
+            />
+        );
+    }
+}

package/src/framework/fields/FieldRemoteTreeCascader/index.tsx

@@ -0,0 +1,39 @@
+import { Cascader, Spin } from 'antd';
+import React from 'react';
+import { TreeUtils } from '../../utils';
+import { BaseRemoteSelect } from '../BaseRemoteSelect';
+
+/**
+ * 远程树级联选择器，类似 select，但是树级联
+ *
+ * 注意，value 为非数组形式，区别于 cascader 组件
+ */
+export class FieldRemoteTreeCascader extends BaseRemoteSelect {
+    getLoadParams() {
+        return undefined;
+    }
+
+    render() {
+        const { data, loading } = this.state;
+        if (loading) return <Spin />;
+
+        const { value, onChange, ...rest } = this.props;
+
+        let arr = [];
+        if (value != null) {
+            arr = TreeUtils.getKeyList(data, value);
+        }
+
+        return (
+            <Cascader
+                options={data}
+                onChange={(arr) => {
+                    onChange && onChange(arr[arr.length - 1]);
+                }}
+                value={arr}
+                fieldNames={{ label: 'title', value: 'key' }}
+                {...rest}
+            />
+        );
+    }
+}

package/src/framework/fields/FieldRemoteTreeSelect/index.tsx

@@ -0,0 +1,39 @@
+import { Spin, TreeSelect } from 'antd';
+import React from 'react';
+import { StringUtils } from '../../utils';
+import { BaseRemoteSelect } from '../BaseRemoteSelect';
+
+export class FieldRemoteTreeSelect extends BaseRemoteSelect {
+    static defaultProps = {
+        treeDefaultExpandAll: true,
+    };
+
+    /** 树形接口不需要请求参数 */
+    getLoadParams() {
+        return undefined;
+    }
+
+    render() {
+        const { value, onChange, treeDefaultExpandAll } = this.props;
+        const { data, loading } = this.state;
+
+        if (loading) return <Spin />;
+
+        return (
+            <TreeSelect
+                style={{ width: '100%', minWidth: 200 }}
+                allowClear
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                treeData={data}
+                showCheckedStrategy={TreeSelect.SHOW_ALL}
+                value={value || undefined}
+                onChange={onChange}
+                filterTreeNode={(inputValue, treeNode) =>
+                    StringUtils.contains(treeNode.title, inputValue)
+                }
+                treeLine={{ showLeafIcon: true }}
+                treeDefaultExpandAll={treeDefaultExpandAll}
+            />
+        );
+    }
+}

package/src/framework/fields/FieldRemoteTreeSelectMultiple/index.tsx

@@ -0,0 +1,43 @@
+import { Spin, TreeSelect } from 'antd';
+import React from 'react';
+import { StringUtils } from '../../utils';
+import { BaseRemoteSelect } from '../BaseRemoteSelect';
+
+export class FieldRemoteTreeSelectMultiple extends BaseRemoteSelect {
+    static defaultProps = {
+        treeDefaultExpandAll: true,
+        style: {
+            width: '100%',
+            minWidth: 200,
+        },
+    };
+
+    getLoadParams() {
+        return undefined;
+    }
+
+    render() {
+        const { value, onChange, style, treeDefaultExpandAll } = this.props;
+        const { data, loading } = this.state;
+
+        if (loading) return <Spin />;
+
+        return (
+            <TreeSelect
+                style={style}
+                allowClear
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                treeData={data}
+                showCheckedStrategy={TreeSelect.SHOW_ALL}
+                value={value || undefined}
+                onChange={onChange}
+                multiple
+                filterTreeNode={(inputValue, treeNode) =>
+                    StringUtils.contains(treeNode.title, inputValue)
+                }
+                treeLine={{ showLeafIcon: true }}
+                treeDefaultExpandAll={treeDefaultExpandAll}
+            />
+        );
+    }
+}

package/src/framework/fields/FieldSysOrgTree/{index.jsx → index.tsx}

@@ -12,8 +12,8 @@ export class FieldSysOrgTree extends React.Component {
   render() {
     const {type, ...rest} = this.props;
     const url = type === 'dept'?
-        '/admin/sysOrg/deptTree':
-        '/admin/sysOrg/unitTree';
+        '/admin/sysOrg/dept-tree':
+        '/admin/sysOrg/unit-tree';
     return <FieldRemoteTree url={url} {...rest} />;
   }
 

package/src/framework/fields/FieldSysOrgTreeSelect/{index.jsx → index.tsx}

@@ -13,8 +13,8 @@ export class FieldSysOrgTreeSelect extends React.Component {
     render() {
         const {type, ...rest} = this.props;
         const url = type === 'dept'?
-            '/admin/sysOrg/deptTree':
-            '/admin/sysOrg/unitTree';
+            '/admin/sysOrg/dept-tree':
+            '/admin/sysOrg/unit-tree';
 
         return <FieldRemoteTreeSelect url={url} {...rest}/>;
     }

package/src/framework/fields/FieldTable/{index.jsx → index.tsx}

@@ -2,7 +2,7 @@ import {Button, Input, Table} from 'antd'
 import React from 'react'
 import {DeleteOutlined, PlusOutlined} from "@ant-design/icons";
 import './styles.less'
-import {ArrUtils} from "../../utils";
+import {ArrayUtils} from "../../utils";
 
 /**
  * 可编辑表格
@@ -58,7 +58,7 @@ export class FieldTable extends React.Component {
 
     onCellChange = (index, dataIndex, e) => {
         let {dataSource} = this.state;
-        let row = dataSource[index];
+        const row = dataSource[index];
 
         let v = e;
         if (e != null && e.hasOwnProperty('target')) {
@@ -78,13 +78,13 @@ export class FieldTable extends React.Component {
     };
 
     remove = (record) => {
-        let {dataSource} = this.state;
-        ArrUtils.remove(dataSource, record);
+        const {dataSource} = this.state;
+        ArrayUtils.remove(dataSource, record);
         this.setState({dataSource: [...dataSource]}, this.notifyParent);
     };
 
     notifyParent = () => {
-        let {dataSource} = this.state;
+        const {dataSource} = this.state;
         this.props.onChange && this.props.onChange(dataSource);
     };
 

package/src/framework/fields/FieldUploadFile/{index.jsx → index.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 import ImgCrop from "antd-img-crop";
 import {Modal, Upload} from "antd";
-import UploadOutlined from "@ant-design/icons/lib/icons/UploadOutlined";
+import { UploadOutlined } from "@ant-design/icons";
 import {ViewFile} from "../../views";
 import {ObjectUtils} from "../../utils";
 
@@ -64,7 +64,6 @@ export class FieldUploadFile extends React.Component {
     }
 
     handleChange = ({fileList, event, file}) => {
-        console.log('检测到文件变化', fileList);
         const rs = file.response;
         if (rs != null && rs.success === false) {
             Modal.error({
@@ -82,7 +81,6 @@ export class FieldUploadFile extends React.Component {
         }
         if (this.props.onChange) {
             const value = newIds.join(',');
-            console.log('上传文件值', value);
             this.props.onChange(value);
         }
 

package/src/framework/index.ts

@@ -2,4 +2,3 @@ export * from './components'
 export * from './utils'
 export * from './fields'
 export * from './views'
-export * from './pages'

package/src/framework/utils/ArrayUtils.ts

@@ -0,0 +1,186 @@
+/**
+ * 数组工具类
+ * 提供了一系列对数组进行操作的静态方法。
+ */
+export class ArrayUtils {
+
+    /**
+     * 检查数组是否包含某个元素。
+     * @param arr 目标数组。
+     * @param item 要检查的元素。
+     * @returns 如果包含则返回 true，否则返回 false。
+     */
+    static contains<T>(arr: T[], item: T): boolean {
+        return arr.indexOf(item) !== -1;
+    }
+
+    /**
+     * 检查数组是否包含至少一个指定的元素。
+     *
+     * @param arr 目标数组。
+     * @param items 要检查的一个或多个元素。
+     * @returns 如果包含任意一个元素则返回 true，否则返回 false。
+     */
+    static containsAny<T>(arr: T[], ...items: T[]): boolean {
+        for (const item of items) {
+            if (ArrayUtils.contains(arr, item)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * 在数组末尾添加一个元素。
+     * @param arr 目标数组。
+     * @param item 要添加的元素。
+     */
+    static add<T>(arr: T[], item: T): void {
+        arr.push(item);
+    }
+
+    /**
+     * 在数组的指定索引处添加一个元素。
+     * @param arr 目标数组。
+     * @param index 插入位置的索引。
+     * @param item 要添加的元素。
+     */
+    static addAt<T>(arr: T[], index: number, item: T): void {
+        arr.splice(index, 0, item);
+    }
+
+    /**
+     * 将另一个数组的所有元素追加到目标数组的尾部。
+     * @param arr 目标数组。
+     * @param items 要追加的元素数组。
+     */
+    static addAll<T>(arr: T[], items: T[]): void {
+        arr.push(...items);
+    }
+
+    /**
+     * 移除数组指定索引处的元素。
+     * @param arr 目标数组。
+     * @param index 要移除元素的索引。
+     */
+    static removeAt<T>(arr: T[], index: number): void {
+        if (index >= 0 && index < arr.length) {
+            arr.splice(index, 1);
+        }
+    }
+
+    /**
+     * 移除数组中第一个匹配的元素。
+     * @param arr 目标数组。
+     * @param item 要移除的元素。
+     */
+    static remove<T>(arr: T[], item: T): void {
+        const index = arr.indexOf(item);
+        if (index !== -1) {
+            ArrayUtils.removeAt(arr, index);
+        }
+    }
+
+    /**
+     * 清空数组。
+     * @param arr 目标数组。
+     */
+    static clear<T>(arr: T[]): void {
+        arr.length = 0;
+    }
+
+    /**
+     * 截取数组的一个子集。
+     * @param arr 目标数组。
+     * @param fromIndex 开始索引（包含）。
+     * @param toIndex 结束索引（不包含）。
+     * @returns 截取后的新数组。
+     */
+    static sub<T>(arr: T[], fromIndex?: number, toIndex?: number): T[] {
+        return arr.slice(fromIndex, toIndex);
+    }
+
+    /**
+     * 交换数组中两个元素的位置。
+     * @param arr 目标数组。
+     * @param item1 元素1。
+     * @param item2 元素2。
+     */
+    static swap<T>(arr: T[], item1: T, item2: T): void {
+        const index1 = arr.indexOf(item1);
+        const index2 = arr.indexOf(item2);
+
+        if (index1 !== -1 && index2 !== -1) {
+            [arr[index1], arr[index2]] = [arr[index2], arr[index1]];
+        }
+    }
+
+    /**
+     * 在数组的指定索引处插入一个元素（与 addAt 相同，保留以兼容原 API）。
+     * @param arr 目标数组。
+     * @param index 插入位置的索引。
+     * @param item 要插入的元素。
+     */
+    static insert<T>(arr: T[], index: number, item: T): void {
+        ArrayUtils.addAt(arr, index, item);
+    }
+
+    /**
+     * 如果元素不存在于数组中，则将其添加到数组末尾。
+     * @param arr 目标数组。
+     * @param item 要添加的元素。
+     */
+    static pushIfNotExist<T>(arr: T[], item: T): void {
+        if (!ArrayUtils.contains(arr, item)) {
+            arr.push(item);
+        }
+    }
+
+    /**
+     * 将新数组中的所有元素添加到目标数组的末尾。
+     * @param arr 目标数组。
+     * @param newArr 要添加的元素数组。
+     */
+    static pushAll<T>(arr: T[], newArr: T[]): void {
+        ArrayUtils.addAll(arr, newArr);
+    }
+
+    /**
+     * 获取对象数组中某一属性值最大的对象。
+     *
+     * @param arr 对象数组。
+     * @param key 用于比较的属性名。
+     * @returns 属性值最大的对象，如果数组为空则返回 undefined。
+     */
+    static maxBy<T extends Record<K, any>, K extends keyof T>(
+        arr: T[],
+        key: K
+    ): T | undefined {
+        if (arr == null || arr.length === 0) {
+            return undefined;
+        }
+
+        let maxElement: T | undefined = undefined;
+        let maxValue: number = -Infinity;
+
+        for (const element of arr) {
+            const value = element[key];
+
+            if (typeof value === 'number' && value > maxValue) {
+                maxValue = value;
+                maxElement = element;
+            }
+        }
+
+        return maxElement;
+    }
+
+    /**
+     * 对数组进行去重。
+     * @param arr 目标数组。
+     * @returns 去重后的新数组。
+     */
+    static unique<T>(arr: T[]): T[] {
+        return [...new Set(arr)];
+    }
+}