@jiangood/springboot-admin-starter 0.0.3 → 0.0.5

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

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

@@ -0,0 +1,67 @@
+import {Spin, TreeSelect} from 'antd';
+
+import React from 'react';
+import {HttpUtils, StringUtils} from "../utils";
+
+export class FieldRemoteTreeSelect extends React.Component {
+
+    static defaultProps = {
+        treeDefaultExpandAll: true,
+    }
+
+    state = {
+        data: [],
+        value: [],
+        loading: false,
+        key: this.props.id,
+    };
+
+    componentDidMount() {
+        this.loadData();
+    }
+
+
+    loadData = async () => {
+        const {url} = this.props;
+        this.setState({loading: true});
+        try {
+            const rs = await HttpUtils.get(url)
+            this.setState({data: rs});
+        } finally {
+            this.setState({loading: false});
+        }
+    };
+
+
+
+    render() {
+        let {value,onChange} = this.props;
+        let {data} = this.state;
+
+        if (this.state.loading) {
+            return <Spin/>;
+        }
+
+
+
+
+        return (
+            <TreeSelect
+                style={{width: '100%', minWidth: 200}}
+                allowClear={true}
+                dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
+                treeData={data}
+                showCheckedStrategy={TreeSelect.SHOW_ALL}
+                value={value || undefined}
+                onChange={onChange}
+
+                filterTreeNode={(inputValue, treeNode) => {
+                    const {title} = treeNode
+                    return StringUtils.contains(title, inputValue)
+                }}
+                treeLine={{showLeafIcon: true}}
+                treeDefaultExpandAll={this.props.treeDefaultExpandAll}
+            />
+        );
+    }
+}

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

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

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

@@ -0,0 +1,68 @@
+import {Spin, TreeSelect} from 'antd';
+
+import React from 'react';
+import {HttpUtils, StringUtils} from "../utils";
+
+export class FieldRemoteTreeSelectMultiple extends React.Component {
+
+    static defaultProps = {
+        treeDefaultExpandAll: true,
+    }
+
+    state = {
+        data: [],
+        value: [],
+        loading: false,
+        key: this.props.id,
+    };
+
+    componentDidMount() {
+        this.loadData();
+    }
+
+
+    loadData = async () => {
+        const {url} = this.props;
+        this.setState({loading: true});
+        try {
+            const rs = await HttpUtils.get(url)
+            this.setState({data: rs});
+        } finally {
+            this.setState({loading: false});
+        }
+    };
+
+
+
+    render() {
+        let {value,onChange} = this.props;
+        let {data} = this.state;
+
+        if (this.state.loading) {
+            return <Spin/>;
+        }
+
+
+
+
+        return (
+            <TreeSelect
+                style={{width: '100%', minWidth: 200}}
+                allowClear={true}
+                dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
+                treeData={data}
+                showCheckedStrategy={TreeSelect.SHOW_ALL}
+                value={value || undefined}
+                onChange={onChange}
+                multiple={true}
+
+                filterTreeNode={(inputValue, treeNode) => {
+                    const {title} = treeNode
+                    return StringUtils.contains(title, inputValue)
+                }}
+                treeLine={{showLeafIcon: true}}
+                treeDefaultExpandAll={this.props.treeDefaultExpandAll}
+            />
+        );
+    }
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SelectProps } from 'antd/es/select';
+
+export interface FieldSysOrgTreeProps  {
+
+    type?: 'dept' | 'unit'
+
+
+}
+
+export class FieldSysOrgTree extends React.Component<FieldSysOrgTreeProps, any> {}
+

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

@@ -0,0 +1,23 @@
+/**
+ * 组织机构树
+ */
+import React from "react";
+import {FieldRemoteTree} from "./FieldRemoteTree";
+
+
+export  class FieldSysOrgTree extends React.Component {
+  static defaultProps = {
+    type: 'dept',
+  }
+
+
+  render() {
+    let {type,...rest} = this.props;
+    const url = type === 'dept'?
+        '/admin/sysOrg/deptTree':
+        '/admin/sysOrg/unitTree'
+    return <FieldRemoteTree url={url} {...rest} />
+  }
+
+
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SelectProps } from 'antd/es/select';
+
+export interface FieldSysOrgTreeSelectProps  {
+
+    type?: 'dept' | 'unit'
+
+
+}
+
+export class FieldSysOrgTreeSelect extends React.Component<FieldSysOrgTreeSelectProps, any> {}
+

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

@@ -0,0 +1,23 @@
+/**
+ * 组织机构树
+ */
+import React from "react";
+import {FieldRemoteTreeSelect} from "./FieldRemoteTreeSelect";
+
+
+export class FieldSysOrgTreeSelect extends React.Component {
+
+    static defaultProps = {
+        type: 'dept',
+    }
+
+    render() {
+        let {type,...rest} = this.props;
+        const url = type === 'dept'?
+            '/admin/sysOrg/deptTree':
+            '/admin/sysOrg/unitTree'
+
+        return <FieldRemoteTreeSelect url={url} {...rest}/>
+    }
+
+}

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

@@ -0,0 +1,17 @@
+import React from "react";
+import {ColumnsType} from "antd/es/table";
+
+declare type FieldTableProps = {
+    columns:  ColumnsType,
+    value?: any[]
+    onChange?: (list:any[])=>{},
+    style?: React.CSSProperties
+};
+
+/***
+ * 可编辑表格
+ */
+export class FieldTable extends React.Component<FieldTableProps, any> {
+
+
+}

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

@@ -0,0 +1,108 @@
+import {Button, Input, Table} from 'antd'
+import React from 'react'
+import {DeleteOutlined, PlusOutlined} from "@ant-design/icons";
+import './FieldTable.less'
+import {ArrUtils} from "../utils";
+
+export class FieldTable extends React.Component {
+
+
+    columns = []
+
+
+    constructor(props) {
+        super(props);
+
+        this.columns = this.props.columns.map(col => {
+            if (col.render == null) {
+                col.render = (v, record, index) => {
+                    return <Input value={v} onChange={(e) => this.onCellChange(index, col.dataIndex, e)}/>
+                }
+            } else {
+                if (!col._oldRender) {
+                    col._oldRender = col.render
+                    col.render = (v, record, index) => {
+                        const cmp = col._oldRender(v, record, index)
+                        return React.createElement(cmp.type,
+                            {
+                                ...cmp.props,
+                                value: v,
+                                onChange: (e) => {
+                                    this.onCellChange(index, col.dataIndex, e);
+                                }
+                            })
+                    }
+                }
+            }
+            return col
+        })
+
+        this.columns.push({
+            title: '操作',
+            render: (v, record) => {
+                return <Button icon={<DeleteOutlined/>} title='删除' size='small' shape={'circle'}
+                               onClick={() => this.remove(record)}></Button>
+            }
+        })
+
+        if (this.props.value != null) {
+            this.state.dataSource = this.props.value
+        }
+
+    }
+
+    state = {
+        dataSource: []
+    }
+
+
+    onCellChange = (index, dataIndex, e) => {
+        let {dataSource} = this.state
+        let row = dataSource[index]
+
+        let v = e;
+        if (e != null && e.hasOwnProperty('target')) {
+            v = e.target.value;
+        }
+
+
+        row[dataIndex] = v
+
+        dataSource = [...dataSource]
+        this.setState({dataSource}, this.notifyParent)
+    }
+
+    add = () => {
+        let {dataSource} = this.state
+        dataSource = [...dataSource, {}];
+        this.setState({dataSource}, this.notifyParent)
+    };
+    remove = (record) => {
+        let {dataSource} = this.state
+        ArrUtils.remove(dataSource, record)
+        this.setState({dataSource: [...dataSource]}, this.notifyParent)
+    };
+
+    notifyParent() {
+        let {dataSource} = this.state
+        this.props.onChange(dataSource)
+    }
+
+    render() {
+        return <div className='edit-table' style={this.props.style}>
+            <Table columns={this.columns}
+                   dataSource={this.state.dataSource}
+                   size='small'
+                   footer={() => <Button type='dashed'
+                                         icon={<PlusOutlined/>}
+                                         onClick={this.add}>增加一行
+                   </Button>}
+                   pagination={false}
+            >
+
+            </Table>
+
+
+        </div>
+    }
+}

package/src/framework/{components/field/select/FieldTableSelect/index.d.ts → field-components/FieldTableSelect.d.ts}

@@ -2,22 +2,12 @@
 import React from "react";
 
 declare type FieldTableSelectProps = {
-    /**
-     * 远程方法连接， 返回的data数据为 io.tmgg.lang.obj.Table
-     */
     url:string;
-
-    type: 'checkbox' | 'radio';
-
-
-
-    /**
-     * 显示的字段
-     */
-    labelKey: string;
-
     placeholder?:string;
-
+    columns: {
+        title: string;
+        dataIndex: string;
+    }[];
 };
 
 /**

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

@@ -0,0 +1,59 @@
+import React from "react";
+import {Button, Select} from "antd";
+import {ProTable} from "../components";
+import {HttpUtils} from "../utils";
+
+/**
+ * 下拉表格
+ */
+export class FieldTableSelect extends React.Component {
+
+    static defaultProps = {
+        placeholder: '请搜索选择',
+    }
+
+    state = {
+        open: false,
+        label: '',
+    }
+
+    render() {
+        return <Select popupRender={this.popupRender}
+                       open={this.state.open}
+                       onOpenChange={v => this.setState({open: v})}
+                       style={{minWidth: 300}}
+                       value={this.props.value}
+                       labelRender={() => this.state.label}
+                       popupMatchSelectWidth={900}
+                       placeholder={this.props.placeholder}
+        />
+    }
+
+
+    popupRender = () => {
+        return <ProTable
+            columns={[...this.props.columns, {
+                title: '操作',
+                dataIndex: 'action',
+                width: 100,
+                render: (text, record) => {
+                    return <Button
+                        size='small'
+                        type='primary'
+                        onClick={() => {
+                            this.setState({
+                                label: record.name,
+                                open: false
+                            })
+                            this.props.onChange(record.id)
+                        }}>选择</Button>
+                }
+            }]}
+            showToolbarSearch
+            request={(params) => {
+                params.selected = this.props.value
+                return HttpUtils.get(this.props.url, params);
+            }}>
+        </ProTable>
+    };
+}