@jiangood/springboot-admin-starter 0.0.2 → 0.0.4

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

@@ -0,0 +1,76 @@
+/**
+ * antd 自带的checkbox 未选择时不会返回false, 和form配合时还得设置 valuePropName
+ *
+ *
+ * 本组件改成布尔值的输入
+ *
+ * 选中 true， 反选 false
+ *
+ * 注意：null 会转为false
+ *
+ *
+ */
+import React from 'react';
+import {Checkbox, Radio, Select, Switch} from 'antd';
+
+
+export class FieldBoolean extends React.Component {
+
+    static defaultProps = {
+        type: 'select'
+    }
+
+    render() {
+        let {value, onChange, type} = this.props
+
+        const v = this.parseBoolean(value);
+
+        switch (type) {
+            case 'radio':
+                return <Radio.Group value={v} onChange={onChange}>
+                    <Radio value={true}>是</Radio>
+                    <Radio value={false}>否</Radio>
+                    <Radio value={undefined}>不确定</Radio>
+                </Radio.Group>;
+            case 'checkbox':
+                return <Checkbox
+                    checked={v}
+                    onChange={(e) => {
+                        onChange(e.target.checked);
+                    }}
+                />;
+            case 'select':
+                return <Select options={[
+                    {value: true, label: '是'},
+                    {value: false, label: '否'},
+                ]}
+                               value={v}
+                               onChange={onChange}
+                               style={{width: '100%'}}
+                               allowClear={true}
+                               placeholder={'请选择'}
+                />
+            case 'switch':
+                return <Switch
+                    checked={v}
+                    onChange={onChange}
+                />;
+            default:
+                break;
+        }
+
+    }
+
+    parseBoolean(v) {
+        if (v === null || v === undefined) {
+            return undefined;
+        }
+
+        if (typeof v === 'boolean') {
+            return v;
+        }
+        return v === 1 || v === 'true' || v === 'Y';
+
+    }
+}
+

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

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export interface FieldDateProps {
+
+    type: 'YYYY-MM-DD' |
+        'YYYY-MM-DD HH:mm:ss' |
+        // 年
+        'YYYY' |
+        // 年月
+        'YYYY-MM' |
+        // 季度
+        'YYYY-QQ' |
+
+        'YYYY-MM-DD HH:mm' |
+
+        //  时间
+        'HH:mm' |
+        'HH:mm:ss';
+
+
+}
+
+export class FieldDate extends React.Component<FieldDateProps, any> {
+}
+

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

@@ -0,0 +1,109 @@
+/**
+ * 根据时间类型自动渲染时间选择组件
+ */
+import React from "react";
+import dayjs from "dayjs";
+import {DatePicker, TimePicker} from "antd";
+
+
+export class FieldDate extends React.Component {
+    static defaultProps = {
+        type: 'YYYY-MM-DD'
+    }
+
+    render() {
+        let {type, value, onChange, ...rest} = this.props;
+        switch (type) {
+            case 'YYYY':
+                return <DatePicker
+                    value={this.strToDate(value, type)}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY'))}
+                    picker="year"
+                    {...rest}
+                />;
+            case 'YYYY-MM':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-MM')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM'))}
+                    picker="month"
+                    {...rest}
+                />;
+            case 'YYYY-QQ':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-QQ')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-QQ'))}
+                    picker="quarter"
+                    {...rest}
+                />;
+            case 'YYYY-MM-DD':
+                return   <DatePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM-DD'))}
+                    {...rest}
+                ></DatePicker>;
+            case 'YYYY-MM-DD HH:mm':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD HH:mm')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM-DD HH:mm'))}
+                    format='YYYY-MM-DD HH:mm'
+                    showTime
+                    {...rest}
+                ></DatePicker>;
+            case 'YYYY-MM-DD HH:mm:ss':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD HH:mm:ss')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM-DD HH:mm:ss'))}
+                    showTime
+                    {...rest}
+                ></DatePicker>;
+            case 'HH:mm':
+                return <TimePicker
+                    format='HH:mm'
+                    value={this.strToDate(value, 'HH:mm')}
+                    onChange={v => onChange(this.dateToStr(v,'HH:mm'))}
+                    {...rest}
+                ></TimePicker>;
+            case 'HH:mm:ss':
+                return <TimePicker
+                    value={this.strToDate(value, 'HH:mm:ss')}
+                    onChange={v => onChange(this.dateToStr(v,'HH:mm:ss'))}
+                    {...rest}
+                ></TimePicker>;
+        }
+
+        return <div>未知组件 {type}</div>
+    }
+
+    static getDefaultValue(type) {
+        let year = dayjs().format("YYYY");
+        let month = dayjs().format("YYYY-MM");
+        let quarter = dayjs().format("YYYY-QQ");
+
+        switch (type) {
+            case 'YYYY':
+                return year;
+            case 'YYYY-MM':
+                return month;
+            case 'YYYY-QQ':
+                return quarter;
+        }
+
+        return null;
+    }
+
+    strToDate(value, fmt) {
+        if (value != null && value !== '') {
+            let type = typeof value;
+            if (type === 'string' || type === 'number') {
+                value = dayjs(value, fmt);
+            }
+        }
+
+        return value;
+    }
+
+    dateToStr(date, fmt) {
+        return date ? date.format(fmt) : null;
+    }
+
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import {FieldDateProps} from "./FieldDate";
+
+
+export class FieldDateRange extends React.Component<FieldDateProps, any> {}
+

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

@@ -0,0 +1,101 @@
+/**
+ * 根据时间类型自动渲染时间选择组件
+ */
+import React from "react";
+import dayjs from "dayjs";
+import {DatePicker, TimePicker} from "antd";
+
+
+export class FieldDateRange extends React.Component {
+    static defaultProps = {
+        type: 'YYYY-MM-DD'
+    }
+
+    render() {
+        let {type, value, onChange, ...rest} = this.props;
+        switch (type) {
+            case 'YYYY':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY')}
+                    onChange={v => 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'))}
+                    picker="month"
+                    {...rest}
+                />;
+            case 'YYYY-QQ':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY-QQ')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-QQ'))}
+                    picker="quarter"
+                    {...rest}
+                />;
+            case 'YYYY-MM-DD':
+                return   <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD')}
+                    onChange={v => 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'))}
+                    format='YYYY-MM-DD HH:mm'
+                    showTime
+                    {...rest}
+                />;
+            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'))}
+                    showTime
+                    {...rest}
+                />;
+            case 'HH:mm':
+                return <TimePicker.RangePicker
+                    format='HH:mm'
+                    value={this.strToDate(value, 'HH:mm')}
+                    onChange={v => 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'))}
+                    {...rest}
+                />;
+        }
+
+        return <div>未知组件 {type}</div>
+    }
+
+
+
+    strToDate(v, fmt) {
+        console.log('调用转换')
+        if (!v) {
+            return null;
+        }
+
+        const arr = v.split("/")
+        let s1 = arr[0];
+        let s2 = arr[1];
+        return [dayjs(s1), dayjs(s2)]
+    }
+
+    dateToStr(dateArr, fmt) {
+        const d1 = dateArr[0]
+        const d2 = dateArr[1]
+
+        const s1 = d1 ? d1.format(fmt) : ""
+        const s2 = d2 ? d2.format(fmt) : "";
+
+        return s1 + '/' + s2
+    }
+
+}

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

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

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

@@ -0,0 +1,16 @@
+import React from "react";
+import {Select} from "antd";
+import {DictUtils} from "../utils";
+
+export function FieldDictSelect(props) {
+    const {value, onChange, typeCode, ...rest} = props
+    const options = DictUtils.dictOptions(typeCode)
+
+    return <Select value={value}
+                   onChange={onChange}
+                   style={{width: '100%', minWidth: 200}}
+                   options={options}
+                   {...rest}>
+
+    </Select>
+}

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/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> {}
+