@jiangood/open-admin 1.0.0

package/src/framework/field-components/FieldEditor.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export interface FieldEditProps  {
+    value ?: string;
+    onChange ?: (value: string) => void;
+    height ?: number;
+}
+
+export class FieldEditor extends React.Component<FieldEditProps, any> {}
+

package/src/framework/field-components/FieldEditor.jsx

@@ -0,0 +1,58 @@
+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() {
+        let uploadUrl = 'admin/sysFile/upload'
+        let 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/field-components/FieldNumberRange.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export interface FieldNumberRangeProps {
+    value?: string;
+    onChange?: (value: string) => void;
+}
+
+/**
+ * 数字的百分数输入框
+ */
+export class FieldNumberRange extends React.Component<FieldNumberRangeProps, any> {
+}
+

package/src/framework/field-components/FieldNumberRange.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import {InputNumber} from "antd";
+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))
+    }
+    onChangeB = (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 = ''
+        }
+        if (b == null) {
+            b = ''
+        }
+        return a + SP + b;
+    }
+
+    parse(v) {
+        if (v == null) {
+            return {a: null, b: null}
+        }
+        const arr = v.split(SP);
+        return {a: arr[0], b: arr[1]}
+    }
+
+    componentDidMount() {
+        let {value, defaultValue} = this.props
+        if (value == null) {
+            this.props.onChange && this.props.onChange(defaultValue)
+        }
+
+    }
+
+
+    render() {
+        let {value, defaultValue} = this.props
+        if (value == null) {
+            value = defaultValue
+        }
+        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>
+    }
+
+}

package/src/framework/field-components/FieldPercent.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export interface FieldPercentProps  {
+    value ?: number;
+    onChange ?: (number: string) => void;
+}
+
+/**
+ * 数字的百分数输入框
+ */
+export class FieldPercent extends React.Component<FieldPercentProps, any> {}
+

package/src/framework/field-components/FieldPercent.jsx

@@ -0,0 +1,27 @@
+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))}
+                    onChange={v => {
+                        v = (v / 100).toFixed(2);
+                        onChange(Number(v))
+                    }}
+                    {...rest}
+                />
+                <Space.Addon>%</Space.Addon>
+            </Space.Compact>
+
+        );
+    }
+}
+

package/src/framework/field-components/FieldRemoteSelect.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SelectProps } from 'antd/es/select';
+
+export interface FieldRemoteSelectProps extends Omit<SelectProps, 'options' | 'children'|'mode'> {
+
+    /**
+     * 请求地址
+     */
+    url: string ;
+}
+
+export class FieldRemoteSelect extends React.Component<FieldRemoteSelectProps, any> {}
+

package/src/framework/field-components/FieldRemoteSelect.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import {Select, Spin, message} from 'antd';
+import {debounce} from 'lodash';
+import {HttpUtils} from "../utils";
+
+export class FieldRemoteSelect extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            options: [],
+            loading: false,
+        };
+
+        this.fetchIdRef = 0;
+        this.loadDataDebounce = debounce(this.loadData, 800);
+    }
+
+    static defaultProps = {
+        placeholder: '请搜索选择'
+    };
+
+    componentDidMount() {
+        this.loadData('')
+    }
+
+    componentWillUnmount() {
+        this.loadDataDebounce.cancel();
+    }
+
+    loadData = async (searchText) => {
+        const {url, value} = this.props;
+        const fetchId = ++this.fetchIdRef;
+
+        this.setState({loading: true});
+
+        try {
+            const data = await HttpUtils.get(url, {searchText, selected: value});
+
+            if (fetchId === this.fetchIdRef) {
+                this.setState({options: data || []});
+            }
+        } catch (error) {
+            console.error('远程搜索失败:', error);
+            message.error('搜索失败，请重试');
+            this.setState({options: []});
+        } finally {
+            if (fetchId === this.fetchIdRef) {
+                this.setState({loading: false});
+            }
+        }
+    };
+
+    handleSearch = (value) => {
+        if (value.trim() === '') {
+            this.setState({options: []});
+            return;
+        }
+        this.loadDataDebounce(value.trim());
+    };
+
+    render() {
+        const {options, loading} = this.state;
+        const {value, onChange, url, ...selectProps} = this.props;
+
+        return (
+            <Select
+                showSearch={
+                    {
+                        filterOption: false,
+                        onSearch: this.handleSearch,
+                    }
+                }
+                value={value}
+                onChange={onChange}
+                options={options}
+                notFoundContent={loading ? <Spin size="small"/> : '数据为空'}
+                style={{width: '100%', minWidth: 200}}
+                allowClear
+
+                {...selectProps}
+            >
+            </Select>
+        );
+    }
+}
+

package/src/framework/field-components/FieldRemoteSelectMultiple.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SelectProps } from 'antd/es/select';
+
+export interface FieldRemoteSelectMultipleProps extends Omit<SelectProps, 'options' | 'children'| 'mode'> {
+
+    /**
+     * 请求地址
+     */
+    url: string ;
+}
+
+export class FieldRemoteSelectMultiple extends React.Component<FieldRemoteSelectMultipleProps, any> {}
+

package/src/framework/field-components/FieldRemoteSelectMultiple.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {Select, Spin, message} from 'antd';
+import {debounce} from 'lodash';
+import {HttpUtils} from "../utils";
+
+export class FieldRemoteSelectMultiple extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            options: [],
+            loading: false,
+        };
+
+        this.fetchIdRef = 0;
+        this.loadDataDebounce = debounce(this.loadData, 800);
+    }
+
+    static defaultProps = {
+        placeholder: '请搜索选择'
+    };
+
+    componentDidMount() {
+        this.loadData('')
+    }
+
+    componentWillUnmount() {
+        this.loadDataDebounce.cancel();
+    }
+
+    loadData = async (searchText) => {
+        const {url, value} = this.props;
+        const fetchId = ++this.fetchIdRef;
+
+        this.setState({loading: true});
+
+        try {
+            const data = await HttpUtils.get(url, {searchText, selected: value});
+
+            if (fetchId === this.fetchIdRef) {
+                this.setState({options: data || []});
+            }
+        } catch (error) {
+            console.error('远程搜索失败:', error);
+            message.error('搜索失败，请重试');
+            this.setState({options: []});
+        } finally {
+            if (fetchId === this.fetchIdRef) {
+                this.setState({loading: false});
+            }
+        }
+    };
+
+    handleSearch = (value) => {
+        if (value.trim() === '') {
+            this.setState({options: []});
+            return;
+        }
+        this.loadDataDebounce(value.trim());
+    };
+
+    render() {
+        const {options, loading} = this.state;
+        const {value, onChange, url, ...selectProps} = this.props;
+        return (
+            <Select
+                showSearch={
+                    {
+                        filterOption: false,
+                        onSearch: this.handleSearch,
+                    }
+                }
+                value={value}
+                onChange={onChange}
+                options={options}
+                notFoundContent={loading ? <Spin size="small"/> : '数据为空'}
+                style={{width: '100%', minWidth: 200}}
+                allowClear
+                mode='multiple'
+                {...selectProps}
+            >
+            </Select>
+        );
+    }
+}
+

package/src/framework/field-components/FieldRemoteSelectMultipleInline.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+
+/**
+ *  多选，但是值是字符串，逗号破解的
+ */
+export interface FieldRemoteSelectMultipleInlineProps  {
+
+    /**
+     * 请求地址
+     */
+    url: string ;
+
+    /**
+     * 默认展开所有
+     */
+    treeDefaultExpandAll?: boolean ;
+}
+
+export class FieldRemoteSelectMultipleInline extends React.Component<FieldRemoteSelectMultipleInlineProps, any> {}
+

package/src/framework/field-components/FieldRemoteSelectMultipleInline.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {Select, Spin, message} from 'antd';
+import {debounce} from 'lodash';
+import {HttpUtils, StringUtils} from "../utils";
+
+export class FieldRemoteSelectMultipleInline extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            options: [],
+            loading: false,
+        };
+
+        this.fetchIdRef = 0;
+        this.loadDataDebounce = debounce(this.loadData, 800);
+    }
+
+    static defaultProps = {
+        placeholder: '请搜索选择'
+    };
+
+    componentDidMount() {
+        this.loadData('')
+    }
+
+    componentWillUnmount() {
+        this.loadDataDebounce.cancel();
+    }
+
+    loadData = async (searchText) => {
+        const {url, value} = this.props;
+        const fetchId = ++this.fetchIdRef;
+
+        this.setState({loading: true});
+
+        try {
+            const data = await HttpUtils.get(url, {searchText, selected: value});
+
+            if (fetchId === this.fetchIdRef) {
+                this.setState({options: data || []});
+            }
+        } catch (error) {
+            console.error('远程搜索失败:', error);
+            message.error('搜索失败，请重试');
+            this.setState({options: []});
+        } finally {
+            if (fetchId === this.fetchIdRef) {
+                this.setState({loading: false});
+            }
+        }
+    };
+
+    handleSearch = (value) => {
+        if (value.trim() === '') {
+            this.setState({options: []});
+            return;
+        }
+        this.loadDataDebounce(value.trim());
+    };
+
+    render() {
+        const {options, loading} = this.state;
+        const {value, onChange, url, ...selectProps} = this.props;
+        return (
+            <Select
+                showSearch={
+                    {
+                        filterOption: false,
+                        onSearch: this.handleSearch,
+                    }
+                }
+                value={StringUtils.split(value, ',')}
+                onChange={arr=>onChange(StringUtils.join(arr, ','))}
+                options={options}
+                notFoundContent={loading ? <Spin size="small"/> : '数据为空'}
+                style={{width: '100%', minWidth: 200}}
+                allowClear
+                mode='multiple'
+                {...selectProps}
+            >
+            </Select>
+        );
+    }
+}
+

package/src/framework/field-components/FieldRemoteTree.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SelectProps } from 'antd/es/select';
+import {TreeProps} from "antd";
+
+export interface FieldRemoteTreeProps  {
+
+    /**
+     * 请求地址
+     */
+    url: string ;
+}
+
+/**
+ * 多选树
+ *
+ * 区别于下拉框，是扁平展示的树
+ * 这种需要扁平展示的树，通常都是多选。
+ *
+ */
+export class FieldRemoteTree extends React.Component<FieldRemoteTreeProps, any> {}
+

package/src/framework/field-components/FieldRemoteTree.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import {Spin, Tree} from "antd";
+import {HttpUtils} from "../utils";
+
+export class FieldRemoteTree extends React.Component {
+
+    state = {
+        treeLoading: true,
+        treeData: [],
+    }
+
+     componentDidMount() {
+         this.loadData();
+    }
+
+
+    loadData = async () => {
+        this.setState({treeLoading: true})
+        let url = this.props.url;
+        try {
+            const treeData = await HttpUtils.get(url)
+            this.setState({treeData})
+        } catch (e) {
+            console.log(e)
+        } finally {
+            this.setState({treeLoading: false})
+        }
+    };
+
+    render() {
+        if (this.state.treeLoading) {
+            return <Spin/>
+        }
+        return <Tree
+            multiple
+            checkable
+            onCheck={e => this.props.onChange(e.checked)}
+            checkedKeys={this.props.value}
+            treeData={this.state.treeData}
+            defaultExpandAll
+            checkStrictly
+        >
+        </Tree>
+    }
+}

package/src/framework/field-components/FieldRemoteTreeCascader.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { SelectProps } from 'antd/es/select';
+import {TreeProps} from "antd";
+
+export interface FieldRemoteTreeCascaderProps  {
+
+    /**
+     * 请求地址
+     * 要求返回数据格式为：tree
+     */
+    url: string ;
+
+    value?: string;
+    onChange?: (value: string) => void;
+}
+
+/**
+ * 远程树级联选择器, 类似select，但是树级联
+ *
+ * 注意，value为非数组形式，区别于cascader组件
+ */
+export class FieldRemoteTreeCascader extends React.Component<FieldRemoteTreeCascaderProps, any> {}
+

package/src/framework/field-components/FieldRemoteTreeCascader.jsx

@@ -0,0 +1,61 @@
+import {Cascader, message, Spin} from 'antd';
+
+import React from 'react';
+import {HttpUtils, TreeUtils} from "../utils";
+
+
+export class FieldRemoteTreeCascader extends React.Component {
+
+    state = {
+        data: [],
+        value: [],
+        loading: false,
+    };
+
+    componentDidMount() {
+        this.loadData();
+    }
+
+
+    loadData = async () => {
+        const {url} = this.props;
+        this.setState({loading: true});
+
+        try {
+            const list = await HttpUtils.get(url);
+            this.setState({data: list});
+        } catch (e) {
+            console.log(e)
+        } finally {
+            this.setState({loading: false});
+        }
+
+    };
+
+
+
+    render() {
+        const {data} = this.state;
+        if (this.state.loading) {
+            return <Spin/>;
+        }
+        let {value, onChange,...rest} = this.props;
+
+        let arr = [];
+        if (value != null) {
+            arr = TreeUtils.getKeyList(data, value);
+        }
+
+        return (
+            <Cascader
+                options={this.state.data}
+                onChange={arr=>{
+                    onChange(arr[arr.length - 1]);
+                }}
+                value={arr}
+                fieldNames={{label: 'title', value: 'key'}}
+                {...rest}
+            />
+        );
+    }
+}

package/src/framework/field-components/FieldRemoteTreeSelect.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export interface FieldRemoteTreeSelectProps  {
+
+    /**
+     * 请求地址
+     */
+    url: string ;
+
+    /**
+     * 默认展开所有
+     */
+    treeDefaultExpandAll?: boolean ;
+}
+
+export class FieldRemoteTreeSelect extends React.Component<FieldRemoteTreeSelectProps, any> {}
+