@jiangood/open-admin 1.0.0-beta.5

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/fields/FieldSysOrgTreeSelect/index.jsx

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

@@ -0,0 +1,108 @@
+import {Button, Input, Table} from 'antd'
+import React from 'react'
+import {DeleteOutlined, PlusOutlined} from "@ant-design/icons";
+import './styles.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>;
+            }
+        });
+
+        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 && 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/fields/FieldTable/styles.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/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/fields/FieldTableSelect/index.jsx

@@ -0,0 +1,60 @@
+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 && 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/fields/FieldUploadFile/index.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import {CropperProps} from "react-easy-crop/Cropper";
+import {UploadListType} from "antd/es/upload/interface";
+import { FieldProps } from '../types';
+
+/**
+ * 上传图片前裁切， 单张图片
+ *
+ * 可参考 react-easy-crop
+ */
+interface FieldUploadFileProps extends FieldProps<string> {
+    onFileChange?: (fileList: any[]) => void;
+
+    /**
+     * 是否裁切图片
+     */
+    cropImage?: boolean;
+    cropperProps?: CropperProps;
+
+    maxCount?: number;
+
+    accept?: "image/*" | ".pdf" | ".docx" | '.xlsx' | string;
+
+    children?: React.ReactNode;
+
+    listType?: UploadListType;
+}
+
+export class FieldUploadFile extends React.Component<FieldUploadFileProps, string> {
+
+}

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

@@ -0,0 +1,139 @@
+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 "../../views";
+import {ObjectUtils} from "../../utils";
+
+/**
+ * 上传图片前裁切， 单张图片
+ *
+ * 可参考 react-easy-crop
+ */
+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) {
+        const list = [];
+        if (value && value.length > 0) {
+            const arr = value.split(",");
+            for (const id of arr) {
+                const url = 'admin/sysFile/preview/' + id;
+                const file = {id, url, uid: id, name: id, status: 'done', fileName: id};
+                list.push(file);
+            }
+        }
+
+        return list;
+    }
+
+    convertComponentValueToOutput(fileList) {
+        const 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});
+
+        const newIds = this.convertComponentValueToOutput(fileList);
+        if (newIds.length > 0 && this.props.onFileChange) {
+            this.props.onFileChange(fileList);
+        }
+        if (this.props.onChange) {
+            const 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 null;
+        }
+
+        return <>
+            <UploadOutlined/>
+            <div className="ant-upload-text">选择文件</div>
+        </>;
+    };
+}

package/src/framework/fields/index.ts

@@ -0,0 +1,22 @@
+// 表单组件，主要属性： value onChange
+export * from './types';
+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 '../components/OrgTree';

package/src/framework/fields/types.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+
+/**
+ * 通用字段组件属性接口
+ * @template T - value 的类型
+ */
+export interface FieldProps<T> {
+  /**
+   * 字段值
+   */
+  value?: T;
+  /**
+   * 值变化回调函数
+   */
+  onChange?: (value: T) => void;
+}

package/src/framework/index.ts

@@ -0,0 +1,5 @@
+export * from './components'
+export * from './utils'
+export * from './fields'
+export * from './views'
+export * from './pages'

package/src/framework/pages/LoginPage.d.ts

@@ -0,0 +1,16 @@
+import React, {ReactNode} from "react";
+
+export interface LoginPageProps {
+
+    /**
+     * 表单渲染
+     * @param origForm 原始表单
+     */
+    formRender?: (originalForm: ReactNode) => ReactNode
+
+
+}
+
+export class LoginPage extends React.Component<LoginPageProps, any> {
+}
+

package/src/framework/pages/LoginPage.jsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import {Button, Form, Input, message, Space} from 'antd';
+import {LockOutlined, SafetyCertificateOutlined, UserOutlined, WarningOutlined} from '@ant-design/icons';
+import "./LoginPage.less"
+import {MessageUtils, SysUtils} from "../utils";
+import {JSEncrypt} from "jsencrypt";
+import {LoginPageUtils} from "./LoginPageUtils";
+
+
+export class LoginPage extends React.Component {
+
+
+    state = {
+        logging: false,
+
+        siteInfo: {},
+        random: Math.random()
+    }
+
+    async componentDidMount() {
+        console.log('渲染登录页面')
+
+
+        if (localStorage.length === 0) {
+            MessageUtils.alert('站点数据缺失，刷新当前页面...')
+            window.location.reload()
+            return
+        }
+
+        const siteInfo = SysUtils.getSiteInfo()
+        this.setState({siteInfo})
+    }
+
+
+    submit = values => {
+        this.setState({logging: true})
+
+        const pubkey = this.state.siteInfo.rsaPublicKey;
+        if (!pubkey) {
+            message.error("未获取密钥，请刷新浏览器再试")
+            return
+        }
+        // 对密码加密
+        const crypt = new JSEncrypt();
+        crypt.setPublicKey(pubkey);
+        values.password = crypt.encrypt(values.password)
+
+        LoginPageUtils.postLogin(values).finally(()=>{
+            this.setState({logging: false})
+        })
+    }
+
+
+    render() {
+        const {siteInfo} = this.state
+
+        const pageStyle = {}
+        if (siteInfo.loginBackground) {
+            let url = 'admin/sysFile/preview/' + siteInfo.loginBackground;
+            pageStyle.backgroundImage = 'url("' + url + '")'
+        }
+
+        return (
+            <section className='login-page' style={pageStyle}>
+                <div className="login-content">
+                    <h1>{siteInfo.title}</h1>
+                    {this.getForm(siteInfo)}
+
+                    {this.renderFormBottom()}
+
+                </div>
+            </section>
+        );
+    }
+
+
+    getForm = siteInfo => {
+
+
+        const form = <Form
+            name="normal_login"
+            className="login-form"
+            initialValues={{remember: true}}
+            onFinish={this.submit}
+            requiredMark={false}
+            colon={false}
+        >
+
+            <Form.Item name="username" rules={[{required: true, message: '请输入用户名!'}]}>
+                <Input size='large' prefix={<UserOutlined/>} placeholder="用户名" autoComplete="off"/>
+            </Form.Item>
+            <Form.Item name="password" rules={[{required: true, message: '请输入密码!'}]}>
+                <Input autoComplete="off" prefix={<LockOutlined/>} type="password" placeholder="密码"
+                       size='large'
+                />
+            </Form.Item>
+
+
+            {siteInfo.captcha && <Form.Item name='captchaCode' rules={[{required: true}]}>
+                <Space style={{alignItems: 'center'}}>
+                    <Input size='large' placeholder='验证码' prefix={<SafetyCertificateOutlined/>}/>
+                    <img height={36}
+                         width={100}
+                         src={"/admin/auth/captchaImage?_random=" + this.state.random}
+                         onClick={() => {
+                             this.setState({random: Math.random()})
+                         }}></img>
+                </Space>
+            </Form.Item>}
+
+
+            <Form.Item style={{marginTop: 10}}>
+                <Button loading={this.state.logging} type="primary" htmlType="submit"
+                        block size='large'>
+                    登录
+                </Button>
+            </Form.Item>
+        </Form>;
+
+        if(this.props.formRender){
+            return this.props.formRender(form);
+        }
+        return form;
+    };
+
+    renderFormBottom() {
+        let siteInfo = this.state.siteInfo;
+        if (siteInfo.loginBoxBottomTip) {
+            return <div style={{color: 'white', marginTop: 50, fontSize: '14px', textAlign: 'center'}}>
+                <WarningOutlined/> {siteInfo.loginBoxBottomTip}
+            </div>
+        }
+    }
+
+}