@jiangood/open-admin 1.0.1 → 1.1.0

package/src/framework/{field-components/FieldDateRange.jsx → fields/FieldDateRange/index.jsx}

@@ -4,50 +4,51 @@
 import React from "react";
 import dayjs from "dayjs";
 import {DatePicker, TimePicker} from "antd";
-import {DateUtils, StringUtils} from "../utils";
+import {DateUtils, StringUtils} from "../../utils";
 
 const SP = StringUtils.ISO_SPLITTER;
 
 export class FieldDateRange extends React.Component {
     static defaultProps = {
         type: 'YYYY-MM-DD'
-    }
+    };
 
     render() {
-        let {type, value, onChange, ...rest} = this.props;
-        type = DateUtils.convertTypeToFormat(type)
-        switch (type) {
+        const {type, value, onChange, ...rest} = this.props;
+        const formattedType = DateUtils.convertTypeToFormat(type);
+
+        switch (formattedType) {
             case 'YYYY':
                 return <DatePicker.RangePicker
                     value={this.strToDate(value, 'YYYY')}
-                    onChange={v => onChange(this.dateToStr(v,'YYYY'))}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY'))}
                     picker="year"
                     {...rest}
                 />;
             case 'YYYY-MM':
                 return <DatePicker.RangePicker
                     value={this.strToDate(value, 'YYYY-MM')}
-                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM'))}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-MM'))}
                     picker="month"
                     {...rest}
                 />;
             case 'YYYY-QQ':
                 return <DatePicker.RangePicker
                     value={this.strToDate(value, 'YYYY-QQ')}
-                    onChange={v => onChange(this.dateToStr(v,'YYYY-QQ'))}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-QQ'))}
                     picker="quarter"
                     {...rest}
                 />;
             case 'YYYY-MM-DD':
-                return   <DatePicker.RangePicker
+                return <DatePicker.RangePicker
                     value={this.strToDate(value, 'YYYY-MM-DD')}
-                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM-DD'))}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-MM-DD'))}
                     {...rest}
                 />;
             case 'YYYY-MM-DD HH:mm':
                 return <DatePicker.RangePicker
                     value={this.strToDate(value, 'YYYY-MM-DD HH:mm')}
-                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM-DD HH:mm'))}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-MM-DD HH:mm'))}
                     format='YYYY-MM-DD HH:mm'
                     showTime
                     {...rest}
@@ -55,7 +56,7 @@ export class FieldDateRange extends React.Component {
             case 'YYYY-MM-DD HH:mm:ss':
                 return <DatePicker.RangePicker
                     value={this.strToDate(value, 'YYYY-MM-DD HH:mm:ss')}
-                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM-DD HH:mm:ss'))}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-MM-DD HH:mm:ss'))}
                     showTime
                     {...rest}
                 />;
@@ -63,42 +64,40 @@ export class FieldDateRange extends React.Component {
                 return <TimePicker.RangePicker
                     format='HH:mm'
                     value={this.strToDate(value, 'HH:mm')}
-                    onChange={v => onChange(this.dateToStr(v,'HH:mm'))}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'HH:mm'))}
                     {...rest}
                 />;
             case 'HH:mm:ss':
                 return <TimePicker.RangePicker
                     value={this.strToDate(value, 'HH:mm:ss')}
-                    onChange={v => onChange(this.dateToStr(v,'HH:mm:ss'))}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'HH:mm:ss'))}
                     {...rest}
                 />;
+            default:
+                return <div>未知组件 {formattedType}</div>;
         }
 
-        return <div>未知组件 {type}</div>
     }
 
-
-
     strToDate(v, fmt) {
-        console.log('调用转换')
         if (!v) {
             return null;
         }
 
-        const arr = v.split(SP)
-        let s1 = arr[0];
-        let s2 = arr[1];
-        return [dayjs(s1), dayjs(s2)]
+        const arr = v.split(SP);
+        const s1 = arr[0];
+        const s2 = arr[1];
+        return [dayjs(s1), dayjs(s2)];
     }
 
     dateToStr(dateArr, fmt) {
-        const d1 = dateArr[0]
-        const d2 = dateArr[1]
+        const d1 = dateArr[0];
+        const d2 = dateArr[1];
 
-        const s1 = d1 ? d1.format(fmt) : ""
+        const s1 = d1 ? d1.format(fmt) : "";
         const s2 = d2 ? d2.format(fmt) : "";
 
-        return s1 + SP + s2
+        return s1 + SP + s2;
     }
 
-}
+}

package/src/framework/fields/FieldDictSelect/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import {SelectProps} from "antd/es/select";
+import { FieldProps } from '../types';
+
+interface FieldDictSelectProps extends Omit<SelectProps, 'options' | 'children'|'mode' | 'value' | 'onChange'>, FieldProps<any> {
+    /**
+     * 字典类型编码
+     */
+    typeCode: string;
+}
+
+export function FieldDictSelect(props: FieldDictSelectProps);

package/src/framework/{field-components/FieldDictSelect.jsx → fields/FieldDictSelect/index.jsx}

@@ -1,10 +1,10 @@
 import React from "react";
 import {Select} from "antd";
-import {DictUtils} from "../utils";
+import {DictUtils} from "../../utils";
 
 export function FieldDictSelect(props) {
-    const {value, onChange, typeCode, ...rest} = props
-    const options = DictUtils.dictOptions(typeCode)
+    const {value, onChange, typeCode, ...rest} = props;
+    const options = DictUtils.dictOptions(typeCode);
 
     return <Select value={value}
                    onChange={onChange}
@@ -12,5 +12,5 @@ export function FieldDictSelect(props) {
                    options={options}
                    {...rest}>
 
-    </Select>
-}
+    </Select>;
+}

package/src/framework/fields/FieldEditor/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FieldProps } from '../types';
+
+/**
+ * 富文本编辑器
+ *
+ * 图片上传相关配置 https://www.tiny.cloud/docs/tinymce/7/image/
+ */
+interface FieldEditProps extends FieldProps<string> {
+    height?: number;
+}
+
+export class FieldEditor extends React.Component<FieldEditProps, any> {
+}

package/src/framework/fields/FieldEditor/index.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {Editor as TinyMceEditor} from '@tinymce/tinymce-react';
+
+/**
+ * 富文本编辑器
+ *
+ * 图片上传相关配置 https://www.tiny.cloud/docs/tinymce/7/image/
+ */
+export class FieldEditor extends React.Component {
+    render() {
+        const uploadUrl = 'admin/sysFile/upload';
+        const jsUrl = 'admin/tinymce/tinymce.min.js';
+        const {value, onChange, height} = this.props;
+
+        return (
+            <>
+                <TinyMceEditor
+                    initialValue={value}
+                    tinymceScriptSrc={jsUrl}
+                    init={{
+                        min_height: 300,
+                        language: 'zh_CN',
+                        height: height,
+
+                        // 上传图片
+                        images_upload_url: uploadUrl,
+                        promotion: false, // 不显示升级按钮（右上角）
+                        cache_suffix: '?v=v7.7',
+
+                        plugins: [
+                            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
+                            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+                            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount',
+                            'emoticons'
+                        ],
+                        image_description: false,
+
+                        // 设置图片上传对话框默认选中上传Tab
+                        setup: function (editor) {
+                            editor.on('OpenWindow', function(e) {
+                                const dialog = e.dialog;
+                                // 包含 dimensions 属性应该就是 上传图片的对话框
+                                if (dialog && dialog.getData().dimensions) {
+                                    dialog.showTab("upload");
+                                }
+                            });
+                        },
+
+                    }}
+                    onChange={e => {
+                        if (onChange) {
+                            onChange(e.target.getContent());
+                        }
+                    }}
+                />
+            </>
+        );
+    }
+}

package/src/framework/fields/FieldNumberRange/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { FieldProps } from '../types';
+
+interface FieldNumberRangeProps extends FieldProps<string> {
+    defaultValue?: string;
+}
+
+export class FieldNumberRange extends React.Component<FieldNumberRangeProps, any> {
+
+}

package/src/framework/{field-components/FieldNumberRange.jsx → fields/FieldNumberRange/index.jsx}

@@ -1,59 +1,55 @@
 import React from "react";
 import {InputNumber} from "antd";
-import {StringUtils} from "../utils";
-
+import {StringUtils} from "../../utils";
 
 const SP = StringUtils.ISO_SPLITTER;
 
 export class FieldNumberRange extends React.Component {
-
-
     onChangeA = (a) => {
-        const {b} = this.parse(this.props.value)
-        this.props.onChange && this.props.onChange(this.merge(a, b))
-    }
+        const {b} = this.parse(this.props.value);
+        this.props.onChange && this.props.onChange(this.merge(a, b));
+    };
+
     onChangeB = (b) => {
-        const {a} = this.parse(this.props.value)
-        this.props.onChange && this.props.onChange(this.merge(a, b))
-    }
+        const {a} = this.parse(this.props.value);
+        this.props.onChange && this.props.onChange(this.merge(a, b));
+    };
 
     merge(a, b) {
         if (a == null) {
-            a = ''
+            a = '';
         }
         if (b == null) {
-            b = ''
+            b = '';
         }
         return a + SP + b;
     }
 
     parse(v) {
         if (v == null) {
-            return {a: null, b: null}
+            return {a: null, b: null};
         }
         const arr = v.split(SP);
-        return {a: arr[0], b: arr[1]}
+        return {a: arr[0] ? Number(arr[0]) : null, b: arr[1] ? Number(arr[1]) : null};
     }
 
     componentDidMount() {
-        let {value, defaultValue} = this.props
-        if (value == null) {
-            this.props.onChange && this.props.onChange(defaultValue)
+        const {value, defaultValue} = this.props;
+        if (value == null && defaultValue) {
+            this.props.onChange && this.props.onChange(defaultValue);
         }
-
     }
 
-
     render() {
-        let {value, defaultValue} = this.props
+        let {value, defaultValue} = this.props;
         if (value == null) {
-            value = defaultValue
+            value = defaultValue;
         }
-        const {a, b} = this.parse(value)
+        const {a, b} = this.parse(value);
 
         return <div style={{display: 'flex', alignItems: 'center'}}>
             <InputNumber value={a} onChange={this.onChangeA}/> - <InputNumber value={b} onChange={this.onChangeB}/>
-        </div>
+        </div>;
     }
 
-}
+}

package/src/framework/fields/FieldPercent/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FieldProps } from '../types';
+
+/**
+ * 数字的百分数输入框
+ */
+export class FieldPercent extends React.Component<FieldProps<number>, any> {
+}

package/src/framework/{field-components/FieldPercent.jsx → fields/FieldPercent/index.jsx}

@@ -1,20 +1,24 @@
 import {InputNumber, Space} from 'antd';
 import React from 'react';
 
+/**
+ * 数字的百分数输入框
+ */
 export class FieldPercent extends React.Component {
     render() {
         const {value, onChange, ...rest} = this.props;
 
-
         return (
             <Space.Compact>
                 <InputNumber
                     min={0}
                     max={100}
-                    value={ Number((value * 100).toFixed(0))}
+                    value={Number((value * 100).toFixed(0))}
                     onChange={v => {
-                        v = (v / 100).toFixed(2);
-                        onChange(Number(v))
+                        if (v !== null) {
+                            const percentValue = Number((v / 100).toFixed(2));
+                            onChange && onChange(percentValue);
+                        }
                     }}
                     {...rest}
                 />
@@ -23,5 +27,4 @@ export class FieldPercent extends React.Component {
 
         );
     }
-}
-
+}

package/src/framework/fields/FieldRemoteSelect/index.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { SelectProps } from "antd/es/select";
+import { FieldProps } from '../types';
+
+interface FieldRemoteSelectProps extends Omit<SelectProps, 'value' | 'onChange'>, FieldProps<any> {
+    /**
+     * 请求地址
+     */
+    url: string;
+    /**
+     * 防抖时间（毫秒）
+     */
+    debounceTime?: number;
+    /**
+     * 请求参数处理函数
+     */
+    paramsProcessor?: (params: any) => any;
+    /**
+     * 响应数据处理函数
+     */
+    dataProcessor?: (data: any) => any;
+    /**
+     * 缓存大小
+     */
+    cacheSize?: number;
+    /**
+     * 初始加载
+     */
+    initialLoad?: boolean;
+    /**
+     * 搜索时是否清空已选项
+     */
+    clearOnSearch?: boolean;
+    /**
+     * 请求失败回调
+     */
+    onError?: (error: any) => void;
+    /**
+     * 加载完成回调
+     */
+    onLoad?: (data: any) => void;
+}
+
+export const FieldRemoteSelect: React.FC<FieldRemoteSelectProps>;

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

@@ -0,0 +1,125 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { Select, Spin, message } from 'antd';
+import { debounce } from 'lodash';
+import { HttpUtils } from "../../utils";
+
+export const FieldRemoteSelect = ({
+    url,
+    debounceTime = 500,
+    paramsProcessor,
+    dataProcessor,
+    cacheSize = 10,
+    initialLoad = true,
+    clearOnSearch = false,
+    onError,
+    onLoad,
+    value,
+    ...rest
+}) => {
+    const [options, setOptions] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [cache, setCache] = useState(new Map());
+    const fetchIdRef = useRef(0);
+    const searchHistoryRef = useRef([]);
+
+    const loadData = useCallback(async (searchText = '') => {
+        const fetchId = ++fetchIdRef.current;
+        const cacheKey = searchText || '_initial_';
+
+        // 检查缓存
+        if (cache.has(cacheKey)) {
+            const cachedData = cache.get(cacheKey);
+            setOptions(cachedData || []);
+            onLoad?.(cachedData);
+            return;
+        }
+
+        setLoading(true);
+
+        try {
+            let params = { searchText, selected: value };
+            if (paramsProcessor) {
+                params = paramsProcessor(params);
+            }
+
+            const data = await HttpUtils.get(url, params);
+            const processedData = dataProcessor ? dataProcessor(data) : data;
+
+            if (fetchId === fetchIdRef.current) {
+                setOptions(processedData || []);
+                
+                // 更新缓存
+                setCache(prevCache => {
+                    const newCache = new Map(prevCache);
+                    newCache.set(cacheKey, processedData || []);
+                    
+                    // 限制缓存大小
+                    if (newCache.size > cacheSize) {
+                        const firstKey = newCache.keys().next().value;
+                        newCache.delete(firstKey);
+                    }
+                    
+                    return newCache;
+                });
+
+                onLoad?.(processedData);
+            }
+        } catch (error) {
+            console.error('远程搜索失败:', error);
+            message.error('搜索失败，请重试');
+            setOptions([]);
+            onError?.(error);
+        } finally {
+            if (fetchId === fetchIdRef.current) {
+                setLoading(false);
+            }
+        }
+    }, [url, value, paramsProcessor, dataProcessor, cache, cacheSize, onError, onLoad]);
+
+    // 使用 useMemo 缓存 debounce 函数
+    const debouncedLoadData = useCallback(
+        debounce((value) => loadData(value), debounceTime),
+        [loadData, debounceTime]
+    );
+
+    useEffect(() => {
+        if (initialLoad) {
+            loadData();
+        }
+    }, [initialLoad, loadData]);
+
+    const handleSearch = useCallback((searchValue) => {
+        const trimmedValue = searchValue.trim();
+        
+        // 记录搜索历史
+        if (trimmedValue && !searchHistoryRef.current.includes(trimmedValue)) {
+            searchHistoryRef.current = [trimmedValue, ...searchHistoryRef.current].slice(0, 5);
+        }
+        
+        if (trimmedValue === '') {
+            setOptions([]);
+            return;
+        }
+        
+        debouncedLoadData(trimmedValue);
+    }, [debouncedLoadData]);
+
+    return (
+        <Select
+            showSearch={{
+                filterOption: false,
+                onSearch: handleSearch,
+            }}
+            options={options}
+            notFoundContent={loading ? <Spin size="small" /> : '数据为空'}
+            style={{ width: '100%', minWidth: 200 }}
+            allowClear
+            loading={loading}
+            {...rest}
+        />
+    );
+};
+
+FieldRemoteSelect.defaultProps = {
+    placeholder: '请搜索选择'
+};

package/src/framework/fields/FieldRemoteSelectMultiple/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import {SelectProps} from "antd/es/select";
+
+interface FieldRemoteSelectMultipleProps extends Omit<SelectProps, 'options' | 'children'| 'mode' | 'value' | 'onChange'> {
+    /**
+     * 请求地址
+     */
+    url: string;
+    /**
+     * 选中的值
+     */
+    value?: any[];
+    /**
+     * 值变化回调
+     */
+    onChange?: (value: any[]) => void;
+}
+
+export class FieldRemoteSelectMultiple extends React.Component<FieldRemoteSelectMultipleProps, any> {
+}

package/src/framework/{field-components/FieldRemoteSelectMultiple.jsx → fields/FieldRemoteSelectMultiple/index.jsx}

@@ -1,18 +1,18 @@
 import React from 'react';
 import {Select, Spin, message} from 'antd';
 import {debounce} from 'lodash';
-import {HttpUtils} from "../utils";
+import {HttpUtils} from "../../utils";
 
 export class FieldRemoteSelectMultiple extends React.Component {
     constructor(props) {
         super(props);
 
+        this.fetchIdRef = 0;
         this.state = {
             options: [],
             loading: false,
         };
 
-        this.fetchIdRef = 0;
         this.loadDataDebounce = debounce(this.loadData, 800);
     }
 
@@ -21,7 +21,7 @@ export class FieldRemoteSelectMultiple extends React.Component {
     };
 
     componentDidMount() {
-        this.loadData('')
+        this.loadData('');
     }
 
     componentWillUnmount() {
@@ -82,5 +82,4 @@ export class FieldRemoteSelectMultiple extends React.Component {
             </Select>
         );
     }
-}
-
+}

package/src/framework/fields/FieldRemoteSelectMultipleInline/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import {SelectProps} from "antd/es/select";
+import { FieldProps } from '../types';
+
+/**
+ *  多选，但是值是字符串，逗号破解的
+ */
+export interface FieldRemoteSelectMultipleInlineProps extends Omit<SelectProps, 'options' | 'children'| 'mode' | 'value' | 'onChange'>, FieldProps<string> {
+    /**
+     * 请求地址
+     */
+    url: string;
+
+    /**
+     * 默认展开所有
+     */
+    treeDefaultExpandAll?: boolean;
+}
+
+export class FieldRemoteSelectMultipleInline extends React.Component<FieldRemoteSelectMultipleInlineProps, any> {
+}

package/src/framework/{field-components/FieldRemoteSelectMultipleInline.jsx → fields/FieldRemoteSelectMultipleInline/index.jsx}

@@ -1,18 +1,21 @@
 import React from 'react';
 import {Select, Spin, message} from 'antd';
 import {debounce} from 'lodash';
-import {HttpUtils, StringUtils} from "../utils";
+import {HttpUtils, StringUtils} from "../../utils";
 
+/**
+ *  多选，但是值是字符串，逗号破解的
+ */
 export class FieldRemoteSelectMultipleInline extends React.Component {
     constructor(props) {
         super(props);
 
+        this.fetchIdRef = 0;
         this.state = {
             options: [],
             loading: false,
         };
 
-        this.fetchIdRef = 0;
         this.loadDataDebounce = debounce(this.loadData, 800);
     }
 
@@ -21,7 +24,7 @@ export class FieldRemoteSelectMultipleInline extends React.Component {
     };
 
     componentDidMount() {
-        this.loadData('')
+        this.loadData('');
     }
 
     componentWillUnmount() {
@@ -71,7 +74,7 @@ export class FieldRemoteSelectMultipleInline extends React.Component {
                     }
                 }
                 value={StringUtils.split(value, ',')}
-                onChange={arr=>onChange(StringUtils.join(arr, ','))}
+                onChange={arr => onChange && onChange(StringUtils.join(arr, ','))}
                 options={options}
                 notFoundContent={loading ? <Spin size="small"/> : '数据为空'}
                 style={{width: '100%', minWidth: 200}}
@@ -82,5 +85,4 @@ export class FieldRemoteSelectMultipleInline extends React.Component {
             </Select>
         );
     }
-}
-
+}