@jiangood/admin-spring-boot-starter 0.2.0

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/field-components/FieldTable.less

@@ -0,0 +1,29 @@
+.edit-table {
+  table{
+    width: 100%;
+    border-spacing: 0;
+
+    th {
+      background-color: rgb(250, 250, 250);
+      padding: 16px;
+      color: rgba(0, 0, 0, 0.88);
+    }
+
+
+
+    th:last-child, td:last-child {
+      text-align: center;
+      width: 50px;
+    }
+
+    td {
+      padding: 2px;
+    }
+  }
+
+
+.add-btn-wrapper{
+  margin: 8px;
+}
+
+}

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

@@ -0,0 +1,19 @@
+// @ts-ignore
+import React from "react";
+
+declare type FieldTableSelectProps = {
+    url:string;
+    placeholder?:string;
+    columns: {
+        title: string;
+        dataIndex: string;
+    }[];
+};
+
+/**
+ * 下拉表格
+ *
+ * 后端参考接口：
+ */
+export class FieldTableSelect extends React.Component<FieldTableSelectProps, any> {
+}

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

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

@@ -0,0 +1,34 @@
+// @ts-ignore
+import React from "react";
+import {CropperProps} from "react-easy-crop/Cropper";
+import {UploadListType} from "antd/es/upload/interface";
+
+
+declare type FieldUploadFileProps = {
+    value?: string; // 文件的值，sysFile的id, 逗号分割
+    onChange?: (v: string) => {};
+    onFileChange?: (fileList: any[]) => {}
+
+    /**
+     * 是否裁切图片
+     */
+    cropImage?: boolean;
+    cropperProps?: CropperProps;
+
+    maxCount?: number;
+
+    accept?: "image/*" | ".pdf" | ".docx" | '.xlsx' | string;
+
+    children?: React.ReactNode;
+
+    listType?: UploadListType
+};
+
+/**
+ * 上传图片前裁切， 单张图片
+ *
+ * 可参考 react-easy-crop
+ */
+export class FieldUploadFile extends React.Component<FieldUploadFileProps, any> {
+
+}

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

@@ -0,0 +1,141 @@
+import React from "react";
+import ImgCrop from "antd-img-crop";
+import {Modal, Upload} from "antd";
+import UploadOutlined from "@ant-design/icons/lib/icons/UploadOutlined";
+import {ViewFile} from "../components";
+import {ObjectUtils} from "../utils";
+
+
+export class FieldUploadFile extends React.Component {
+
+    state = {
+        // 传入的参数
+        maxCount: 1,
+        cropImage: false,
+
+        // 内部参数
+        fileList: [],
+        value: null // 都好分隔的文件id
+    };
+
+    constructor(props) {
+        super(props);
+        ObjectUtils.copyPropertyIfPresent(props, this.state)
+        this.state.fileList = this.convertInputToComponentValue(this.state.value);
+    }
+
+    convertInputToComponentValue(value) {
+        let list = [];
+        if (value && value.length > 0) {
+            const arr = value.split(",")
+            for (const id of arr) {
+                const url = 'admin/sysFile/preview/' + id
+                let file = {id, url, uid: id, name: id, status: 'done', fileName: id};
+                list.push(file);
+            }
+        }
+
+        return list
+    }
+
+    convertComponentValueToOutput(fileList) {
+        let fileIds = [];
+        for (const f of fileList) {
+            if (f.status === 'done') {
+                if(f.response) { // 新上传的
+                    const ajaxResult = f.response
+                    if (ajaxResult.success) {
+                        const {id, name} = ajaxResult.data
+                        f.id = id;
+                        fileIds.push(id);
+                    } else {
+                        Modal.error({title: '上传文件失败', content: ajaxResult.message})
+                    }
+                }else { // 老的
+                    fileIds.push(f.id)
+                }
+
+
+            }
+        }
+        return fileIds;
+    }
+
+
+    handleChange = ({fileList, event, file}) => {
+        console.log('检测到文件变化', fileList)
+        const rs = file.response;
+        if (rs != null && rs.success === false) {
+            Modal.error({
+                title: '上传失败',
+                content: rs.message,
+            });
+            return;
+        }
+
+
+        this.setState({fileList});
+
+
+        let newIds = this.convertComponentValueToOutput(fileList);
+        if (newIds.length > 0 && this.props.onFileChange) {
+            this.props.onFileChange(fileList)
+        }
+        if(this.props.onChange){
+            let value = newIds.join(',');
+            console.log('上传文件值', value )
+            this.props.onChange(value);
+        }
+
+    };
+
+
+    handlePreview = (file) => {
+        Modal.info({
+            title: '文件预览',
+            width: '80vw',
+            content: <ViewFile value={file.id} height='70vh'/>
+        })
+
+    };
+
+    render() {
+        if (this.state.cropImage) {
+            return <ImgCrop cropperProps={this.props.cropperProps} modalTitle={'裁剪图片'} fillColor={null}>
+                {this.getUpload()}
+            </ImgCrop>
+        }
+
+        return this.getUpload();
+    }
+
+    getUpload = () => {
+        const {accept, fileList, maxCount} = this.state;
+
+        return <Upload
+            action={'admin/sysFile/upload'}
+            listType={this.props.listType || 'picture-card'}
+            fileList={fileList}
+            onChange={this.handleChange}
+            multiple={false}
+            accept={accept}
+            maxCount={maxCount}
+            onPreview={this.handlePreview}
+        >
+            {this.renderButton()}
+
+        </Upload>;
+    };
+
+    renderButton = () => {
+        const {fileList, maxCount} = this.state;
+        if (fileList.length >= maxCount) {
+            return
+        }
+
+        return <>
+            <UploadOutlined/>
+            <div className="ant-upload-text">选择文件</div>
+        </>;
+    };
+}

package/src/framework/field-components/index.ts

@@ -0,0 +1,21 @@
+// 表单组件，主要属性： value onChange
+export * from './FieldRemoteSelect';
+export * from './FieldRemoteSelectMultiple';
+export * from './FieldRemoteSelectMultipleInline';
+export * from './FieldRemoteTree';
+export * from './FieldDictSelect';
+export * from './FieldEditor'
+export * from './FieldRemoteTreeCascader'
+export * from './FieldRemoteTreeSelect'
+export * from './FieldRemoteTreeSelectMultiple'
+export * from './FieldBoolean';
+export * from './FieldDate';
+export * from './FieldDateRange';
+export * from './FieldNumberRange';
+export * from './FieldTable'
+export * from './FieldTableSelect'
+export * from './FieldSysOrgTreeSelect'
+export * from './FieldSysOrgTree'
+export * from './FieldPercent'
+export * from './FieldUploadFile';
+export * from './system';