@jiangood/open-admin 1.0.1 → 1.1.0

package/src/framework/fields/FieldRemoteTree/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import {TreeProps} from "antd";
+import { FieldProps } from '../types';
+
+/**
+ * 多选树
+ *
+ * 区别于下拉框，是扁平展示的树
+ * 这种需要扁平展示的树，通常都是多选。
+ *
+ */
+interface FieldRemoteTreeProps extends Omit<TreeProps, 'treeData' | 'checkedKeys' | 'onCheck' | 'multiple' | 'checkable' | 'defaultExpandAll' | 'checkStrictly'>, FieldProps<string[]> {
+    /**
+     * 请求地址
+     */
+    url: string;
+}
+
+export class FieldRemoteTree extends React.Component<FieldRemoteTreeProps, string> {
+}

package/src/framework/fields/FieldRemoteTree/index.jsx

@@ -0,0 +1,50 @@
+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});
+        const {url} = this.props;
+        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 && this.props.onChange(e.checked)}
+            checkedKeys={this.props.value}
+            treeData={this.state.treeData}
+            defaultExpandAll
+            checkStrictly
+        >
+        </Tree>;
+    }
+}

package/src/framework/{field-components/FieldRemoteTreeCascader.d.ts → fields/FieldRemoteTreeCascader/index.d.ts}

@@ -1,23 +1,18 @@
 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;
-}
+import { FieldProps } from '../types';
 
 /**
  * 远程树级联选择器, 类似select，但是树级联
  *
  * 注意，value为非数组形式，区别于cascader组件
  */
-export class FieldRemoteTreeCascader extends React.Component<FieldRemoteTreeCascaderProps, any> {}
+interface FieldRemoteTreeCascaderProps extends FieldProps<string> {
+    /**
+     * 请求地址
+     * 要求返回数据格式为：tree
+     */
+    url: string;
+}
 
+export class FieldRemoteTreeCascader extends React.Component<FieldRemoteTreeCascaderProps, any> {
+}

package/src/framework/{field-components/FieldRemoteTreeCascader.jsx → fields/FieldRemoteTreeCascader/index.jsx}

@@ -1,14 +1,15 @@
 import {Cascader, message, Spin} from 'antd';
-
 import React from 'react';
-import {HttpUtils, TreeUtils} from "../utils";
-
+import {HttpUtils, TreeUtils} from "../../utils";
 
+/**
+ * 远程树级联选择器, 类似select，但是树级联
+ *
+ * 注意，value为非数组形式，区别于cascader组件
+ */
 export class FieldRemoteTreeCascader extends React.Component {
-
     state = {
         data: [],
-        value: [],
         loading: false,
     };
 
@@ -16,7 +17,6 @@ export class FieldRemoteTreeCascader extends React.Component {
         this.loadData();
     }
 
-
     loadData = async () => {
         const {url} = this.props;
         this.setState({loading: true});
@@ -25,21 +25,19 @@ export class FieldRemoteTreeCascader extends React.Component {
             const list = await HttpUtils.get(url);
             this.setState({data: list});
         } catch (e) {
-            console.log(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;
+        const {value, onChange, ...rest} = this.props;
 
         let arr = [];
         if (value != null) {
@@ -49,8 +47,8 @@ export class FieldRemoteTreeCascader extends React.Component {
         return (
             <Cascader
                 options={this.state.data}
-                onChange={arr=>{
-                    onChange(arr[arr.length - 1]);
+                onChange={arr => {
+                    onChange && onChange(arr[arr.length - 1]);
                 }}
                 value={arr}
                 fieldNames={{label: 'title', value: 'key'}}
@@ -58,4 +56,4 @@ export class FieldRemoteTreeCascader extends React.Component {
             />
         );
     }
-}
+}

package/src/framework/fields/FieldRemoteTreeSelect/index.d.ts

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

package/src/framework/{field-components/FieldRemoteTreeSelect.jsx → fields/FieldRemoteTreeSelect/index.jsx}

@@ -1,17 +1,14 @@
 import {Spin, TreeSelect} from 'antd';
-
 import React from 'react';
-import {HttpUtils, StringUtils} from "../utils";
+import {HttpUtils, StringUtils} from "../../utils";
 
 export class FieldRemoteTreeSelect extends React.Component {
-
     static defaultProps = {
         treeDefaultExpandAll: true,
-    }
+    };
 
     state = {
         data: [],
-        value: [],
         loading: false,
         key: this.props.id,
     };
@@ -20,31 +17,25 @@ export class FieldRemoteTreeSelect extends React.Component {
         this.loadData();
     }
 
-
     loadData = async () => {
         const {url} = this.props;
         this.setState({loading: true});
         try {
-            const rs = await HttpUtils.get(url)
+            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;
+        const {value, onChange, treeDefaultExpandAll} = this.props;
+        const {data, loading} = this.state;
 
-        if (this.state.loading) {
+        if (loading) {
             return <Spin/>;
         }
 
-
-
-
         return (
             <TreeSelect
                 style={{width: '100%', minWidth: 200}}
@@ -54,14 +45,13 @@ export class FieldRemoteTreeSelect extends React.Component {
                 showCheckedStrategy={TreeSelect.SHOW_ALL}
                 value={value || undefined}
                 onChange={onChange}
-
                 filterTreeNode={(inputValue, treeNode) => {
-                    const {title} = treeNode
-                    return StringUtils.contains(title, inputValue)
+                    const {title} = treeNode;
+                    return StringUtils.contains(title, inputValue);
                 }}
                 treeLine={{showLeafIcon: true}}
-                treeDefaultExpandAll={this.props.treeDefaultExpandAll}
+                treeDefaultExpandAll={treeDefaultExpandAll}
             />
         );
     }
-}
+}

package/src/framework/fields/FieldRemoteTreeSelectMultiple/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FieldProps } from '../types';
+
+interface FieldRemoteTreeSelectMultipleProps extends FieldProps<(string | number)[]> {
+    /**
+     * 请求地址
+     */
+    url: string;
+
+    /**
+     * 默认展开所有
+     */
+    treeDefaultExpandAll?: boolean;
+    
+    id?: string;
+    style?: React.CSSProperties;
+}
+
+export class FieldRemoteTreeSelectMultiple extends React.Component<FieldRemoteTreeSelectMultipleProps, any> {
+}

package/src/framework/{field-components/FieldRemoteTreeSelectMultiple.jsx → fields/FieldRemoteTreeSelectMultiple/index.jsx}

@@ -1,21 +1,18 @@
 import {Spin, TreeSelect} from 'antd';
-
 import React from 'react';
-import {HttpUtils, StringUtils} from "../utils";
+import {HttpUtils, StringUtils} from "../../utils";
 
 export class FieldRemoteTreeSelectMultiple extends React.Component {
-
     static defaultProps = {
         treeDefaultExpandAll: true,
         style: {
             width: '100%',
             minWidth: 200,
         },
-    }
+    };
 
     state = {
         data: [],
-        value: [],
         loading: false,
         key: this.props.id,
     };
@@ -24,33 +21,28 @@ export class FieldRemoteTreeSelectMultiple extends React.Component {
         this.loadData();
     }
 
-
     loadData = async () => {
         const {url} = this.props;
         this.setState({loading: true});
         try {
-            const rs = await HttpUtils.get(url)
+            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;
+        const {value, onChange, style, treeDefaultExpandAll} = this.props;
+        const {data, loading} = this.state;
 
-        if (this.state.loading) {
+        if (loading) {
             return <Spin/>;
         }
 
-
-
         return (
             <TreeSelect
-                style={this.props.style}
+                style={style}
                 allowClear={true}
                 dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
                 treeData={data}
@@ -58,15 +50,13 @@ export class FieldRemoteTreeSelectMultiple extends React.Component {
                 value={value || undefined}
                 onChange={onChange}
                 multiple={true}
-
                 filterTreeNode={(inputValue, treeNode) => {
-                    const {title} = treeNode
-                    return StringUtils.contains(title, inputValue)
+                    const {title} = treeNode;
+                    return StringUtils.contains(title, inputValue);
                 }}
                 treeLine={{showLeafIcon: true}}
-                treeDefaultExpandAll={this.props.treeDefaultExpandAll}
-
+                treeDefaultExpandAll={treeDefaultExpandAll}
             />
         );
     }
-}
+}

package/src/framework/fields/FieldSysOrgTree/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import {FieldRemoteTreeProps} from "./FieldRemoteTree";
+
+export interface FieldSysOrgTreeProps extends Omit<FieldRemoteTreeProps, 'url'> {
+    type?: 'dept' | 'unit';
+}
+
+export class FieldSysOrgTree extends React.Component<FieldSysOrgTreeProps> {
+}

package/src/framework/fields/FieldSysOrgTree/index.jsx

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

package/src/framework/fields/FieldSysOrgTreeSelect/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import {FieldRemoteTreeSelectProps} from "./FieldRemoteTreeSelect";
+
+export interface FieldSysOrgTreeSelectProps extends Omit<FieldRemoteTreeSelectProps, 'url'> {
+    type?: 'dept' | 'unit';
+}
+
+export class FieldSysOrgTreeSelect extends React.Component<FieldSysOrgTreeSelectProps> {
+}

package/src/framework/{field-components/FieldSysOrgTreeSelect.jsx → fields/FieldSysOrgTreeSelect/index.jsx}

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

package/src/framework/fields/FieldTable/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react'
+import {ColumnsType} from "antd/es/table";
+import { FieldProps } from '../types';
+
+/**
+ * 可编辑表格
+ */
+interface FieldTableProps extends FieldProps<any[]> {
+    columns: ColumnsType<any>;
+    style?: React.CSSProperties;
+}
+
+export class FieldTable extends React.Component<FieldTableProps, any> {
+}

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

@@ -1,14 +1,15 @@
 import {Button, Input, Table} from 'antd'
 import React from 'react'
 import {DeleteOutlined, PlusOutlined} from "@ant-design/icons";
-import './FieldTable.less'
-import {ArrUtils} from "../utils";
+import './styles.less'
+import {ArrUtils} from "../../utils";
 
+/**
+ * 可编辑表格
+ */
 export class FieldTable extends React.Component {
 
-
-    columns = []
-
+    columns = [];
 
     constructor(props) {
         super(props);
@@ -16,13 +17,13 @@ export class FieldTable 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)}/>
-                }
+                    return <Input value={v} onChange={(e) => this.onCellChange(index, col.dataIndex, e)}/>;
+                };
             } else {
                 if (!col._oldRender) {
-                    col._oldRender = col.render
+                    col._oldRender = col.render;
                     col.render = (v, record, index) => {
-                        const cmp = col._oldRender(v, record, index)
+                        const cmp = col._oldRender(v, record, index);
                         return React.createElement(cmp.type,
                             {
                                 ...cmp.props,
@@ -30,63 +31,62 @@ export class FieldTable extends React.Component {
                                 onChange: (e) => {
                                     this.onCellChange(index, col.dataIndex, e);
                                 }
-                            })
-                    }
+                            });
+                    };
                 }
             }
-            return col
-        })
+            return col;
+        });
 
         this.columns.push({
             title: '操作',
             render: (v, record) => {
                 return <Button icon={<DeleteOutlined/>} title='删除' size='small' shape={'circle'}
-                               onClick={() => this.remove(record)}></Button>
+                               onClick={() => this.remove(record)}></Button>;
             }
-        })
+        });
 
-        if (this.props.value != null) {
-            this.state.dataSource = this.props.value
-        }
+        this.state = {
+            dataSource: this.props.value || []
+        };
 
     }
 
     state = {
         dataSource: []
-    }
-
+    };
 
     onCellChange = (index, dataIndex, e) => {
-        let {dataSource} = this.state
-        let row = dataSource[index]
+        let {dataSource} = this.state;
+        let row = dataSource[index];
 
         let v = e;
         if (e != null && e.hasOwnProperty('target')) {
             v = e.target.value;
         }
 
+        row[dataIndex] = v;
 
-        row[dataIndex] = v
-
-        dataSource = [...dataSource]
-        this.setState({dataSource}, this.notifyParent)
-    }
+        dataSource = [...dataSource];
+        this.setState({dataSource}, this.notifyParent);
+    };
 
     add = () => {
-        let {dataSource} = this.state
+        let {dataSource} = this.state;
         dataSource = [...dataSource, {}];
-        this.setState({dataSource}, this.notifyParent)
+        this.setState({dataSource}, this.notifyParent);
     };
+
     remove = (record) => {
-        let {dataSource} = this.state
-        ArrUtils.remove(dataSource, record)
-        this.setState({dataSource: [...dataSource]}, this.notifyParent)
+        let {dataSource} = this.state;
+        ArrUtils.remove(dataSource, record);
+        this.setState({dataSource: [...dataSource]}, this.notifyParent);
     };
 
-    notifyParent() {
-        let {dataSource} = this.state
-        this.props.onChange(dataSource)
-    }
+    notifyParent = () => {
+        let {dataSource} = this.state;
+        this.props.onChange && this.props.onChange(dataSource);
+    };
 
     render() {
         return <div className='edit-table' style={this.props.style}>
@@ -103,6 +103,6 @@ export class FieldTable extends React.Component {
             </Table>
 
 
-        </div>
+        </div>;
     }
-}
+}

package/src/framework/fields/FieldTableSelect/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { FieldProps } from '../types';
+import {ColumnsType} from "antd/es/table";
+
+/**
+ * 下拉表格
+ *
+ * 后端参考接口：
+ */
+interface FieldTableSelectProps extends FieldProps<string | number> {
+    url: string;
+    placeholder?: string;
+
+    // antd table 的列表
+    columns: ColumnsType<any>;
+}
+
+export class FieldTableSelect extends React.Component<FieldTableSelectProps, any> {
+}

package/src/framework/{field-components/FieldTableSelect.jsx → fields/FieldTableSelect/index.jsx}

@@ -1,21 +1,23 @@
 import React from "react";
 import {Button, Select} from "antd";
-import {ProTable} from "../components";
-import {HttpUtils} from "../utils";
+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}
@@ -26,10 +28,9 @@ export class FieldTableSelect extends React.Component {
                        labelRender={() => this.state.label}
                        popupMatchSelectWidth={900}
                        placeholder={this.props.placeholder}
-        />
+        />;
     }
 
-
     popupRender = () => {
         return <ProTable
             columns={[...this.props.columns, {
@@ -44,16 +45,16 @@ export class FieldTableSelect extends React.Component {
                             this.setState({
                                 label: record.name,
                                 open: false
-                            })
-                            this.props.onChange(record.id)
-                        }}>选择</Button>
+                            });
+                            this.props.onChange && this.props.onChange(record.id);
+                        }}>选择</Button>;
                 }
             }]}
             showToolbarSearch
             request={(params) => {
-                params.selected = this.props.value
+                params.selected = this.props.value;
                 return HttpUtils.get(this.props.url, params);
             }}>
-        </ProTable>
+        </ProTable>;
     };
-}
+}