@jiangood/springboot-admin-starter 0.0.3 → 0.0.4

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/{components/field/FieldEditTable/index.d.ts → field-components/FieldTable.d.ts}

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

package/src/framework/{components/field/FieldEditTable/index.jsx → field-components/FieldTable.jsx}

@@ -1,10 +1,10 @@
 import {Button, Input, Table} from 'antd'
 import React from 'react'
 import {DeleteOutlined, PlusOutlined} from "@ant-design/icons";
-import './index.less'
-import {ArrUtil} from "../../../utils";
+import './FieldTable.less'
+import {ArrUtils} from "../utils";
 
-export class FieldEditTable extends React.Component {
+export class FieldTable extends React.Component {
 
 
     columns = []
@@ -15,15 +15,22 @@ export class FieldEditTable extends React.Component {
 
         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)}/>
+                col.render = (v, record, index) => {
+                    return <Input value={v} onChange={(e) => this.onCellChange(index, col.dataIndex, e)}/>
                 }
-            }else {
-                if(!col._oldRender){
+            } else {
+                if (!col._oldRender) {
                     col._oldRender = col.render
-                    col.render = (v, record,index) => {
-                        const cmp =col._oldRender()
-                        return React.createElement(cmp.type,{...cmp.props, value:v, onChange: (e)=>this.onCellChange(index, col.dataIndex, e)})
+                    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);
+                                }
+                            })
                     }
                 }
             }
@@ -31,9 +38,9 @@ export class FieldEditTable extends React.Component {
         })
 
         this.columns.push({
-            title: '/',
-            render:(v, record) =>{
-                return <Button icon={<DeleteOutlined/>} size='small' shape={'circle'}
+            title: '操作',
+            render: (v, record) => {
+                return <Button icon={<DeleteOutlined/>} title='删除' size='small' shape={'circle'}
                                onClick={() => this.remove(record)}></Button>
             }
         })
@@ -49,12 +56,12 @@ export class FieldEditTable extends React.Component {
     }
 
 
-    onCellChange=(index,dataIndex,e)=>{
+    onCellChange = (index, dataIndex, e) => {
         let {dataSource} = this.state
-        let row =dataSource[index]
+        let row = dataSource[index]
 
         let v = e;
-        if(e.hasOwnProperty('target')){
+        if (e != null &&e.hasOwnProperty('target')) {
             v = e.target.value;
         }
 
@@ -62,21 +69,21 @@ export class FieldEditTable extends React.Component {
         row[dataIndex] = v
 
         dataSource = [...dataSource]
-        this.setState({dataSource},this.notifyParent)
+        this.setState({dataSource}, this.notifyParent)
     }
 
     add = () => {
         let {dataSource} = this.state
         dataSource = [...dataSource, {}];
-        this.setState({dataSource},this.notifyParent)
+        this.setState({dataSource}, this.notifyParent)
     };
     remove = (record) => {
         let {dataSource} = this.state
-        ArrUtil.remove(dataSource, record)
-        this.setState({dataSource:[...dataSource]},this.notifyParent)
+        ArrUtils.remove(dataSource, record)
+        this.setState({dataSource: [...dataSource]}, this.notifyParent)
     };
 
-    notifyParent(){
+    notifyParent() {
         let {dataSource} = this.state
         this.props.onChange(dataSource)
     }
@@ -88,6 +95,7 @@ export class FieldEditTable extends React.Component {
                    dataSource={this.state.dataSource}
                    size='small'
 
+
                    footer={() => <Button type='dashed' icon={<PlusOutlined/>}
                                          onClick={this.add}>增加一行
                    </Button>}

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;
+    }[];
 };
 
 /**