@jiangood/springboot-admin-starter 0.0.1

package/src/framework/components/field/index.js

@@ -0,0 +1,33 @@
+export * from './FieldAutoTime'
+export * from './FieldEditor'
+export * from './FieldBoolean';
+export * from './switch-y-n';
+export * from './FieldSelectPosition';
+export * from './input-number-percent';
+
+export * from './FieldRemoteTreeSelect';
+
+
+export * from './time';
+export * from './flat-multiple-select';
+export * from './flat-select';
+export * from './dict';
+export * from './FieldRemoteTreeCascader';
+export * from './FieldRemoteTreeMultipleSelect';
+export * from './text';
+export * from './FieldProps'
+export * from './FieldOrgTree'
+
+export * from './FieldAutoTime'
+export * from './FieldRemoteTreeCheckable'
+export * from './FieldPassword'
+export * from './FieldInput'
+
+export * from './FieldTree'
+export * from './FieldEditTable'
+export * from './FieldFileBase64'
+
+export  * from './upload'
+export  * from './select'
+
+export * from './FieldImageBase64'

package/src/framework/components/field/input-number-percent/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface InputNumberPercentProps {
+  mode?: string | 'read';
+  value?: Number;
+  onChange?: (value: Number) => void;
+}
+
+declare class InputNumberPercent extends React.Component<InputNumberPercentProps, any> {}
+
+declare class FieldInputNumberPercent extends React.Component<InputNumberPercentProps, any> {}

package/src/framework/components/field/input-number-percent/index.jsx

@@ -0,0 +1,28 @@
+import {InputNumber} from 'antd';
+import React from 'react';
+
+export class InputNumberPercent extends React.Component {
+  render() {
+    const { props } = this;
+    const { value, mode, ...rest } = props;
+
+    if (mode === 'read') {
+      return (value * 100).toFixed(2) + '%';
+    }
+
+    return (
+      <InputNumber
+        min={0}
+        max={1}
+        step={0.01}
+        formatter={(value) => (value * 100).toFixed(2)}
+        parser={(value) => (value / 100).toFixed(2)}
+        addonAfter={'%'}
+        value={value}
+        {...rest}
+      />
+    );
+  }
+}
+
+export { InputNumberPercent as FieldInputNumberPercent };

package/src/framework/components/field/select/FieldSelect/index.d.ts

@@ -0,0 +1,39 @@
+// @ts-ignore
+import React from "react";
+
+declare type FieldSelectProps = {
+
+    url:  string,
+    value?: any
+    onChange?: (value:any)=>{},
+
+    // 数据加载完
+    onLoadDataFinish?:(list:any[])=>{};
+
+    showRefresh?:boolean;
+
+    placeholder?:string
+
+
+    disabled?:false;
+
+    /**
+     * 是否多选
+     */
+    multiple?:boolean;
+
+    /**
+     *  多选选时返回对象数组
+     *
+     *  primitive 原始值，如123 , 多选时时数组， 如[123,456]
+     *  object  包装成对象的值， 如 {id:123}, 多选时 [{id:123},{id:456}]
+     *  joined  逗号分割的字符串， 如123,456
+     *
+     */
+    valueType?: 'primitive'| 'object'  | 'joined' | undefined | null;
+
+
+};
+
+export class FieldSelect extends React.Component<FieldSelectProps, any> {
+}

package/src/framework/components/field/select/FieldSelect/index.jsx

@@ -0,0 +1,156 @@
+import {Button, Select, Spin} from 'antd';
+
+import React from 'react';
+import {HttpUtil} from "../../../../system";
+import {ReloadOutlined} from "@ant-design/icons";
+import {ObjUtil} from "../../../../utils";
+
+export class FieldSelect extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        ObjUtil.copyPropertyIfPresent(props, this.state)
+        this.state.componentValue = this.convertInputToComponentValue(this.state.value)
+
+        if (this.state.multiple) {
+        }
+    }
+
+    state = {
+        // 参数
+        url: '',
+        data: [],
+        value: null,
+        loading: false,
+        searchText: '',
+        showRefresh: false,
+        placeholder: '请选择',
+
+        multiple: false,
+        valueType: 'primitive',
+
+
+        // 内部状态
+        componentValue: null
+    }
+
+
+    componentDidMount() {
+        this.loadData({});
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        let {value} = this.props;
+        // 表单主动设置value的情况
+        if (value !== prevProps.value && this.state.value !== value) {
+            const v = this.convertInputToComponentValue(value);
+            this.setState({componentValue: v, value: v}, () => this.loadData({}))
+        }
+    }
+
+    convertInputToComponentValue = value => {
+        if (value != null) {
+            if (this.state.multiple) {
+                if (this.state.valueType === 'object') {
+                    return value.map(v => v.id)
+                }
+                if (this.state.valueType === 'joined') {
+                    return value.split(',')
+                }
+            } else {
+                if (this.state.valueType === 'object') {
+                    return value.id
+                }
+            }
+
+        }
+
+        return value
+    };
+
+    convertComponentValueToOutput = value => {
+        if (value != null) {
+            if (this.state.multiple) {
+                if (this.state.valueType === 'object') {
+                    return value.map(v => {
+                        return {id: v}
+                    })
+                }
+                if (this.state.valueType === 'joined') {
+                    return value.join(',')
+                }
+            } else {
+                if (this.state.valueType === 'object') {
+                    return {id: value}
+                }
+            }
+        }
+
+        return value
+    };
+
+
+    handleChange = (value) => {
+        this.setState({componentValue: value, loading: false});
+        this.props.onChange?.(this.convertComponentValueToOutput(value));
+    }
+
+
+    handleSearch = (searchText) => {
+        this.setState({searchText});
+        this.loadData({searchText: searchText});
+    };
+
+    loadData = ({searchText}) => {
+        const {value, url} = this.state;
+
+        let selected = null;
+        if (value != null) {
+            const isArray = value instanceof Array
+            if (isArray) {
+                selected = value.join(',')
+            } else {
+                selected = value
+            }
+        }
+
+
+        this.setState({loading: true});
+        HttpUtil.get(url, {searchText, selected})
+            .then(data => {
+                this.setState({data});
+                this.props.onLoadDataFinish?.(data);
+            })
+            .finally(() => {
+                this.setState({loading: false});
+            })
+    };
+
+
+    render() {
+        console.log(this.props.disabled)
+        return (
+            <div style={{display: 'flex', alignItems: 'center'}}>
+                <Select
+                    {...this.props}
+                    allowClear
+                    showSearch
+                    style={{width: '100%', minWidth: 200}}
+                    notFoundContent={this.state.loading ? <Spin size="small"/> : null}
+                    filterOption={false}
+                    onSearch={this.handleSearch}
+                    onChange={this.handleChange}
+                    placeholder={this.state.placeholder}
+                    value={this.state.componentValue}
+                    options={this.state.data}
+                    mode={this.state.multiple ? 'multiple' : undefined}
+                >
+                </Select>
+                {this.state.showRefresh &&
+                    <Button onClick={this.loadData} autoInsertSpace={false} icon={<ReloadOutlined/>}
+                            size='small'/>}
+            </div>
+        );
+    }
+}

package/src/framework/components/field/select/FieldTableSelect/index.d.ts

@@ -0,0 +1,29 @@
+// @ts-ignore
+import React from "react";
+
+declare type FieldTableSelectProps = {
+    /**
+     * 远程方法连接， 返回的data数据为 io.tmgg.lang.obj.Table
+     */
+    url:string;
+
+    type: 'checkbox' | 'radio';
+
+
+
+    /**
+     * 显示的字段
+     */
+    labelKey: string;
+
+    placeholder?:string;
+
+};
+
+/**
+ * 下拉表格
+ *
+ * 后端参考接口：
+ */
+export class FieldTableSelect extends React.Component<FieldTableSelectProps, any> {
+}

package/src/framework/components/field/select/FieldTableSelect/index.jsx

@@ -0,0 +1,155 @@
+import React from "react";
+import {Input, Select, Table, Typography} from "antd";
+import {SearchOutlined} from "@ant-design/icons";
+import {HttpUtil} from "../../../../system";
+
+/**
+ * 下拉表格
+ */
+export class FieldTableSelect extends React.Component {
+
+    state = {
+        loading: false,
+        columns: [],
+        dataSource: [],
+
+        open: false,
+        searchText: null,
+
+        value: null,
+        label: null,
+
+        // 分页参数
+        totalElements: 0,
+        current: 1,
+        pageSize: 10,
+        sorter: null
+
+    }
+
+
+    componentDidMount() {
+        let value = this.props.value;
+        this.state.value = value
+        // 首次加载时，将默认的那条数据也下载下来，方便显示label
+        this.initData(value);
+
+        this.loadData()
+    }
+
+    initData(value) {
+        if (value != null) {
+            let selected = [value];
+            HttpUtil.post(this.props.url, {selected}, {size:1})
+                .then(({ dataSource}) => {
+                const record = dataSource[0]
+                if (record) {
+                    this.setState({label: record[this.props.labelKey]})
+                }
+            })
+        }
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        let {value} = this.props;
+        // 表单主动设置value的情况
+        if (value !== prevProps.value && this.state.value !== value) {
+            this.setState({value: value, label: null}, this.loadData)
+        }
+    }
+
+    loadData = searchText => {
+        this.setState({loading: true})
+
+        const params = {
+            size: this.state.pageSize,
+            page: this.state.current,
+            searchText,
+        }
+
+
+        if(this.state.sorter){
+            const {field, order} =  this.state.sorter
+            if (field) {
+                params.sort = field + "," + (order === 'ascend' ? 'asc' : 'desc')
+            }
+        }
+
+
+        HttpUtil.get(this.props.url, params).then(({columns, dataSource, totalElements}) => {
+            this.setState({columns, dataSource, totalElements: parseInt(totalElements)})
+        }).finally(() => {
+            this.setState({loading: false})
+        })
+    };
+
+
+    onSearch = searchText => {
+        this.setState({searchText})
+        this.loadData(searchText)
+    };
+
+    render() {
+        return <>
+            <Select popupRender={this.popupRender} loading={this.state.loading}
+                    open={this.state.open}
+                    onOpenChange={visible => this.setState({open: visible})}
+                    style={{minWidth: 300}}
+                    value={this.state.value}
+                    labelRender={() => this.state.label}
+                    popupMatchSelectWidth={900}
+                    placeholder={this.props.placeholder || '请选择'}
+            />
+        </>
+    }
+
+
+    popupRender = () => {
+        return <div>
+            <div style={{padding: 8, display: 'flex', justifyContent: 'end'}}>
+                <Input
+                    placeholder="搜索..."
+                    prefix={<SearchOutlined/>}
+                    value={this.state.searchText}
+                    onChange={(e) => this.onSearch(e.target.value)}
+                    style={{maxWidth: 280}}
+                />
+            </div>
+            <Table dataSource={this.state.dataSource} loading={this.state.loading}
+                   columns={this.state.columns}
+                   size='small'
+                   bordered
+                   rowKey='id'
+                   onRow={(record) => {
+                       return {
+                           onDoubleClick: (event) => {
+                               let value = record.id;
+                               let label = record[this.props.labelKey]
+
+                               this.setState({label, value,  open: false})
+                               this.props.onChange?.(value)
+                           },
+                       }
+                   }}
+
+                   pagination={{
+                       total: this.state.totalElements,
+                       pageSize: this.state.pageSize,
+                       current: this.state.current,
+                       showTotal: (total) => `共 ${total} 条`
+                   }}
+
+                   onChange={(pagination, filters, sorter, extra) => {
+                       this.setState({
+                           current: pagination.current,
+                           pageSize: pagination.pageSize,
+                           sorter
+                       }, this.loadData)
+                   }}
+                   summary={()=><Typography.Text>提示：双击选择数据</Typography.Text>}
+
+            ></Table>
+
+        </div>
+    };
+}

package/src/framework/components/field/select/index.jsx

@@ -0,0 +1,2 @@
+export * from './FieldSelect';
+export * from './FieldTableSelect'

package/src/framework/components/field/switch-y-n/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface SwitchYNProps {
+  mode?: string | 'read';
+  value?: String;
+  onChange?: (value: String) => void;
+}
+
+declare class SwitchYN extends React.Component<SwitchYNProps, any> {}
+
+declare class FieldSwitchYN extends React.Component<SwitchYNProps, any> {}

package/src/framework/components/field/switch-y-n/index.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Switch} from 'antd';
+
+export { SwitchYN as FieldSwitchYN };
+
+export class SwitchYN extends React.Component {
+  render() {
+    let { value, mode } = this.props;
+
+    if (mode === 'read') {
+      if (value) {
+        return value === 'Y' ? '是' : '否';
+      }
+      return '';
+    }
+
+    let strValue = null;
+    if (value != null && value != '') {
+      strValue = value == 'Y';
+    } else {
+      // 设置默认值
+      strValue = 'N';
+    }
+
+    return <Switch value={strValue} {...this.props} onChange={this.onChange}></Switch>;
+  }
+
+  onChange = (b) => {
+    this.props.onChange(b ? 'Y' : 'N');
+  };
+}

package/src/framework/components/field/text/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export class FieldText extends React.Component<{ value?: any }> {
+  render() {
+    return this.props.value;
+  }
+}

package/src/framework/components/field/time/DatePickerString.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {DatePicker} from 'antd';
+import {valueToDate} from "./TimePickerTool";
+
+/**
+ *
+ * 值类型为字符串
+ */
+export { DatePickerString as FieldDatePickerString };
+
+const FMT = 'YYYY-MM-DD';
+
+export class DatePickerString extends React.Component {
+  static FORMAT = FMT
+  onChange = (date) => {
+    const str = date ? date.format(FMT) : null;
+    this.props.onChange(str);
+  };
+
+  render() {
+    let { value, readOnly = false, mode } = this.props;
+    if (mode == 'read') {
+      return value;
+    }
+
+    value = valueToDate(value,FMT)
+
+    return (
+      <DatePicker
+        {...this.props}
+        value={value}
+        onChange={this.onChange}
+        disabled={readOnly || this.props.disabled}
+      ></DatePicker>
+    );
+  }
+}

package/src/framework/components/field/time/DateTimePickerString.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {DatePicker} from 'antd';
+import {valueToDate} from "./TimePickerTool";
+
+/**
+ * 月份选择器
+ *
+ * 值类型为字符串
+ *
+ *
+ */
+export { DateTimePickerString as FieldDateTimePickerString };
+const FMT = 'YYYY-MM-DD HH:mm:ss';
+
+export class DateTimePickerString extends React.Component {
+
+  static FORMAT = FMT
+
+  onChange = (date) => {
+    const str = date ? date.format(FMT) :null;
+    this.props.onChange(str);
+  };
+
+  render() {
+    let { value, readOnly = false, mode } = this.props;
+    if (mode == 'read') {
+      return value;
+    }
+    value = valueToDate(value,FMT)
+
+    return (
+      <DatePicker
+        {...this.props}
+        showTime
+        value={value}
+        onChange={this.onChange}
+
+        disabled={readOnly || this.props.disabled}
+      ></DatePicker>
+    );
+  }
+}

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

@@ -0,0 +1,9 @@
+// @ts-ignore
+import React from "react";
+
+declare type FieldDateRangeProps = {
+
+};
+
+export class FieldDateRange extends React.Component<FieldDateRangeProps, any> {
+}

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

@@ -0,0 +1,49 @@
+import React from "react";
+import {DatePicker} from "antd";
+import dayjs from "dayjs";
+
+/**
+ * 日期区间选择， 格式为时间戳数组
+ *
+ * 时间范围使用ISO 8601 时间间隔格式
+ *  存储格式：开始时间/结束时间
+ * 2023-01-01/2023-01-01
+ *
+ * 提示：后端便捷方式       q.betweenIsoDateRange("createTime", dateRange);
+ */
+export class FieldDateRange extends React.Component {
+
+
+    str2dayjs(v) {
+        console.log('调用转换')
+        if (v ) {
+            const arr = v.split("/")
+
+            let v1 = arr[0];
+            let v2 = arr[1];
+            return [dayjs(v1), dayjs(v2)]
+        }
+
+        return null;
+    }
+
+
+
+    render() {
+        let {value, onChange} = this.props
+
+        value = this.str2dayjs(value)
+
+        return <DatePicker.RangePicker
+            value={value}
+            format={"YYYY-MM-DD"}
+            onChange={(value, dateString) => {
+                let strValue = dateString.join('/');
+                strValue = strValue === '/' ? null: strValue
+                onChange(strValue)
+            }}
+        >
+        </DatePicker.RangePicker>
+    }
+
+}

package/src/framework/components/field/time/HHmmPickerString.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import {TimePicker} from 'antd';
+import {valueToDate} from "./TimePickerTool";
+
+/**
+ * 时分
+ *
+ * 值类型为字符串
+ *
+ *
+ */
+const FMT = 'HH:mm';
+
+export class FieldHHmmPickerString extends React.Component {
+
+  static FORMAT = FMT
+
+  onChange = (date) => {
+    const str = date ? date.format(FMT) : null;
+    this.props.onChange(str);
+  };
+
+  render() {
+    let { value, readOnly = false, mode } = this.props;
+    if (mode == 'read') {
+      return value;
+    }
+    value = valueToDate(value,FMT)
+
+
+    return (
+      <TimePicker
+        {...this.props}
+        value={value}
+        onChange={this.onChange}
+        format={FMT}
+        disabled={readOnly || this.props.disabled}
+      ></TimePicker>
+    );
+  }
+}