@jiangood/open-admin 1.0.0-beta.5

package/src/framework/components/index.ts

@@ -0,0 +1,13 @@
+export * from './ProModal'
+export * from './system'
+export * from './PageLoading'
+export * from './ProTable'
+export * from './DownloadFileButton'
+export * from './NamedIcon'
+export * from './LinkButton'
+export * from './Gap'
+export * from './Page'
+export * from './ValueType'
+export * from './OrgTree'
+export * from './RoleTree'
+export * from './ViewRange'

package/src/framework/components/system/ButtonList.d.ts

@@ -0,0 +1,8 @@
+// @ts-ignore
+import React from "react";
+
+declare type ButtonListProps = {
+};
+
+export class ButtonList extends React.Component<ButtonListProps, any> {
+}

package/src/framework/components/system/ButtonList.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {Space} from 'antd';
+import {PermUtils} from "../../utils";
+
+
+/**
+ * 带权限的按钮列表
+ * @param maxNum: 显示子节点的个数， 超过的为收缩起来
+ *
+ */
+export class ButtonList extends React.Component {
+
+
+    render() {
+        let {children} = this.props;
+
+        // 单节点的情况
+        if (!Array.isArray(children)) {
+            if (this.checkPerm(children)) {
+                return children;
+            }
+            return null
+        }
+
+        const menus = [];
+        for (let child of children) {
+            if (child === null || child === undefined) {
+                continue;
+            }
+            if (this.checkPerm(child)) {
+                menus.push(child);
+            }
+        }
+        return <Space>{menus}</Space>;
+    }
+
+    checkPerm = element => {
+        let props = element.props;
+        return props == null || props.perm == null || PermUtils.hasPermission(props.perm);
+
+    };
+}

package/src/framework/components/system/HasPerm.tsx

@@ -0,0 +1,14 @@
+import {ReactNode} from "react";
+import {PermUtils} from "../../utils";
+
+/**
+ * 使用该组件，可以判断权限
+ */
+export function HasPerm(props: { code: string, children: ReactNode }) {
+    let {code} = props;
+
+    if (PermUtils.hasPermission(code)) {
+        return props.children;
+    }
+
+}

package/src/framework/components/system/index.tsx

@@ -0,0 +1,29 @@
+import {FieldRemoteSelect, FieldRemoteSelectMultiple, FieldRemoteTreeSelect} from "../../fields";
+import React from "react";
+
+export * from './ButtonList'
+export * from './HasPerm'
+
+export function FieldUserSelect(props) {
+    return <FieldRemoteSelect url="admin/sysUser/options" {...props} />;
+}
+export function FieldUserSelectMultiple(props) {
+    return <FieldRemoteSelectMultiple url="admin/sysUser/options" {...props} />;
+}
+
+export function FieldUnitTreeSelect(props) {
+    return <FieldRemoteTreeSelect url="admin/sysOrg/unitTree" {...props} />;
+}
+
+export function FieldDeptTreeSelect(props) {
+    return <FieldRemoteTreeSelect url="admin/sysOrg/deptTree" {...props} />;
+}
+
+export function FieldOrgTreeSelect(props) {
+    return <FieldRemoteTreeSelect url="admin/sysOrg/deptTree" {...props} />;
+}
+
+export function FieldOrgTreeMultipleSelect(props) {
+    return <FieldRemoteSelectMultiple url="/sysOrg/deptTree" {...props} />;
+}
+

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FieldProps } from '../types';
+
+interface FieldBooleanProps extends FieldProps<boolean> {
+    type?: 'select' | 'radio' | 'checkbox' | 'switch'; // 默认 select
+}
+
+export class FieldBoolean extends React.Component<FieldBooleanProps, any> {
+}

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

@@ -0,0 +1,73 @@
+/**
+ * antd 自带的checkbox 未选择时不会返回false, 和form配合时还得设置 valuePropName
+ *
+ *
+ * 本组件改成布尔值的输入
+ *
+ * 选中 true， 反选 false
+ *
+ * 注意：null 会转为false
+ *
+ */
+import React from 'react';
+import {Checkbox, Radio, Select, Switch} from 'antd';
+
+export class FieldBoolean extends React.Component {
+
+    static defaultProps = {
+        type: 'select'
+    };
+
+    render() {
+        const {value, onChange, type} = this.props;
+
+        const v = this.parseBoolean(value);
+
+        switch (type) {
+            case 'radio':
+                return <Radio.Group value={v} onChange={onChange}>
+                    <Radio value={true}>是</Radio>
+                    <Radio value={false}>否</Radio>
+                    <Radio value={undefined}>不确定</Radio>
+                </Radio.Group>;
+            case 'checkbox':
+                return <Checkbox
+                    checked={v}
+                    onChange={(e) => {
+                        onChange && onChange(e.target.checked);
+                    }}
+                />;
+            case 'select':
+                return <Select options={[
+                    {value: true, label: '是'},
+                    {value: false, label: '否'},
+                ]}
+                               value={v}
+                               onChange={onChange}
+                               style={{width: '100%'}}
+                               allowClear={true}
+                               placeholder={'请选择'}
+                />;
+            case 'switch':
+                return <Switch
+                    checked={v}
+                    onChange={onChange}
+                />;
+            default:
+                return null;
+        }
+
+    }
+
+    parseBoolean(v) {
+        if (v === null || v === undefined) {
+            return undefined;
+        }
+
+        if (typeof v === 'boolean') {
+            return v;
+        }
+        return v === 1 || v === 'true' || v === 'Y';
+
+    }
+}

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { FieldProps } from '../types';
+
+interface FieldDateProps extends FieldProps<string | null> {
+    type: 'YYYY-MM-DD' | 'DAY'|
+        'YYYY-MM-DD HH:mm:ss' |
+        // 年
+        'YYYY' | 'YEAR' |
+        // 年月
+        'YYYY-MM' | 'YEAR_MONTH'|
+        // 季度
+        'YYYY-QQ' | 'YEAR_QUARTER'|
+
+        'YYYY-MM-DD HH:mm' |
+
+        //  时间
+        'HH:mm' |
+        'HH:mm:ss';
+}
+
+export class FieldDate extends React.Component<FieldDateProps, any> {
+    static getDefaultValue(type: string): string | null;
+}

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

@@ -0,0 +1,116 @@
+/**
+ * 根据时间类型自动渲染时间选择组件
+ */
+import React from "react";
+import dayjs from "dayjs";
+import {DatePicker, TimePicker} from "antd";
+import {DateUtils} from "../../utils";
+
+export class FieldDate extends React.Component {
+    static defaultProps = {
+        type: 'YYYY-MM-DD'
+    };
+
+    render() {
+        const {type, value, onChange, ...rest} = this.props;
+        const formattedType = DateUtils.convertTypeToFormat(type);
+
+        switch (formattedType) {
+            case 'YYYY':
+                return <DatePicker
+                    value={this.strToDate(value, formattedType)}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY'))}
+                    picker="year"
+                    {...rest}
+                />;
+            case 'YYYY-MM':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-MM')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-MM'))}
+                    picker="month"
+                    {...rest}
+                />;
+            case 'YYYY-QQ':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-QQ')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-QQ'))}
+                    picker="quarter"
+                    {...rest}
+                />;
+            case 'YYYY-MM-DD':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-MM-DD'))}
+                    {...rest}
+                ></DatePicker>;
+            case 'YYYY-MM-DD HH:mm':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD HH:mm')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-MM-DD HH:mm'))}
+                    format='YYYY-MM-DD HH:mm'
+                    showTime
+                    {...rest}
+                ></DatePicker>;
+            case 'YYYY-MM-DD HH:mm:ss':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD HH:mm:ss')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-MM-DD HH:mm:ss'))}
+                    showTime
+                    {...rest}
+                ></DatePicker>;
+            case 'HH:mm':
+                return <TimePicker
+                    format='HH:mm'
+                    value={this.strToDate(value, 'HH:mm')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'HH:mm'))}
+                    {...rest}
+                ></TimePicker>;
+            case 'HH:mm:ss':
+                return <TimePicker
+                    value={this.strToDate(value, 'HH:mm:ss')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'HH:mm:ss'))}
+                    {...rest}
+                ></TimePicker>;
+            default:
+                return <div>未知组件 {formattedType}</div>;
+        }
+
+    }
+
+    static getDefaultValue(type) {
+        const year = dayjs().format("YYYY");
+        const month = dayjs().format("YYYY-MM");
+        const quarter = dayjs().format("YYYY-QQ");
+
+        switch (type) {
+            case 'YYYY':
+            case 'YEAR':
+                return year;
+            case 'YYYY-MM':
+            case 'YEAR_MONTH':
+                return month;
+            case 'YYYY-QQ':
+            case 'YEAR_QUARTER':
+                return quarter;
+            default:
+                return null;
+        }
+
+    }
+
+    strToDate(value, fmt) {
+        if (value != null && value !== '') {
+            const type = typeof value;
+            if (type === 'string' || type === 'number') {
+                return dayjs(value, fmt);
+            }
+        }
+
+        return value;
+    }
+
+    dateToStr(date, fmt) {
+        return date ? date.format(fmt) : null;
+    }
+
+}

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

@@ -0,0 +1,22 @@
+import React from "react";
+import { FieldProps } from '../types';
+
+interface FieldDateRangeProps extends FieldProps<string> {
+    type: 'YYYY-MM-DD' | 'DAY'|
+        'YYYY-MM-DD HH:mm:ss' |
+        // 年
+        'YYYY' | 'YEAR' |
+        // 年月
+        'YYYY-MM' | 'YEAR_MONTH'|
+        // 季度
+        'YYYY-QQ' | 'YEAR_QUARTER'|
+
+        'YYYY-MM-DD HH:mm' |
+
+        //  时间
+        'HH:mm' |
+        'HH:mm:ss';
+}
+
+export class FieldDateRange extends React.Component<FieldDateRangeProps, any> {
+}

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

@@ -0,0 +1,103 @@
+/**
+ * 根据时间类型自动渲染时间选择组件
+ */
+import React from "react";
+import dayjs from "dayjs";
+import {DatePicker, TimePicker} from "antd";
+import {DateUtils, StringUtils} from "../../utils";
+
+const SP = StringUtils.ISO_SPLITTER;
+
+export class FieldDateRange extends React.Component {
+    static defaultProps = {
+        type: 'YYYY-MM-DD'
+    };
+
+    render() {
+        const {type, value, onChange, ...rest} = this.props;
+        const formattedType = DateUtils.convertTypeToFormat(type);
+
+        switch (formattedType) {
+            case 'YYYY':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY'))}
+                    picker="year"
+                    {...rest}
+                />;
+            case 'YYYY-MM':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY-MM')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-MM'))}
+                    picker="month"
+                    {...rest}
+                />;
+            case 'YYYY-QQ':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY-QQ')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-QQ'))}
+                    picker="quarter"
+                    {...rest}
+                />;
+            case 'YYYY-MM-DD':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-MM-DD'))}
+                    {...rest}
+                />;
+            case 'YYYY-MM-DD HH:mm':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD HH:mm')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-MM-DD HH:mm'))}
+                    format='YYYY-MM-DD HH:mm'
+                    showTime
+                    {...rest}
+                />;
+            case 'YYYY-MM-DD HH:mm:ss':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD HH:mm:ss')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'YYYY-MM-DD HH:mm:ss'))}
+                    showTime
+                    {...rest}
+                />;
+            case 'HH:mm':
+                return <TimePicker.RangePicker
+                    format='HH:mm'
+                    value={this.strToDate(value, 'HH:mm')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'HH:mm'))}
+                    {...rest}
+                />;
+            case 'HH:mm:ss':
+                return <TimePicker.RangePicker
+                    value={this.strToDate(value, 'HH:mm:ss')}
+                    onChange={v => onChange && onChange(this.dateToStr(v, 'HH:mm:ss'))}
+                    {...rest}
+                />;
+            default:
+                return <div>未知组件 {formattedType}</div>;
+        }
+
+    }
+
+    strToDate(v, fmt) {
+        if (!v) {
+            return null;
+        }
+
+        const arr = v.split(SP);
+        const s1 = arr[0];
+        const s2 = arr[1];
+        return [dayjs(s1), dayjs(s2)];
+    }
+
+    dateToStr(dateArr, fmt) {
+        const d1 = dateArr[0];
+        const d2 = dateArr[1];
+
+        const s1 = d1 ? d1.format(fmt) : "";
+        const s2 = d2 ? d2.format(fmt) : "";
+
+        return s1 + SP + s2;
+    }
+
+}

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

@@ -0,0 +1,12 @@
+import React from "react";
+import {SelectProps} from "antd/es/select";
+import { FieldProps } from '../types';
+
+interface FieldDictSelectProps extends Omit<SelectProps, 'options' | 'children'|'mode' | 'value' | 'onChange'>, FieldProps<any> {
+    /**
+     * 字典类型编码
+     */
+    typeCode: string;
+}
+
+export function FieldDictSelect(props: FieldDictSelectProps);

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

@@ -0,0 +1,16 @@
+import React from "react";
+import {Select} from "antd";
+import {DictUtils} from "../../utils";
+
+export function FieldDictSelect(props) {
+    const {value, onChange, typeCode, ...rest} = props;
+    const options = DictUtils.dictOptions(typeCode);
+
+    return <Select value={value}
+                   onChange={onChange}
+                   style={{width: '100%', minWidth: 200}}
+                   options={options}
+                   {...rest}>
+
+    </Select>;
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FieldProps } from '../types';
+
+/**
+ * 富文本编辑器
+ *
+ * 图片上传相关配置 https://www.tiny.cloud/docs/tinymce/7/image/
+ */
+interface FieldEditProps extends FieldProps<string> {
+    height?: number;
+}
+
+export class FieldEditor extends React.Component<FieldEditProps, any> {
+}

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import {Editor as TinyMceEditor} from '@tinymce/tinymce-react';
+
+/**
+ * 富文本编辑器
+ *
+ * 图片上传相关配置 https://www.tiny.cloud/docs/tinymce/7/image/
+ */
+export class FieldEditor extends React.Component {
+    render() {
+        const uploadUrl = 'admin/sysFile/upload';
+        const jsUrl = 'admin/tinymce/tinymce.min.js';
+        const {value, onChange, height} = this.props;
+
+        return (
+            <>
+                <TinyMceEditor
+                    initialValue={value}
+                    tinymceScriptSrc={jsUrl}
+                    init={{
+                        min_height: 300,
+                        language: 'zh_CN',
+                        height: height,
+
+                        // 上传图片
+                        images_upload_url: uploadUrl,
+                        promotion: false, // 不显示升级按钮（右上角）
+                        cache_suffix: '?v=v7.7',
+
+                        plugins: [
+                            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
+                            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+                            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount',
+                            'emoticons'
+                        ],
+                        image_description: false,
+
+                        // 设置图片上传对话框默认选中上传Tab
+                        setup: function (editor) {
+                            editor.on('OpenWindow', function(e) {
+                                const dialog = e.dialog;
+                                // 包含 dimensions 属性应该就是 上传图片的对话框
+                                if (dialog && dialog.getData().dimensions) {
+                                    dialog.showTab("upload");
+                                }
+                            });
+                        },
+
+                    }}
+                    onChange={e => {
+                        if (onChange) {
+                            onChange(e.target.getContent());
+                        }
+                    }}
+                />
+            </>
+        );
+    }
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { FieldProps } from '../types';
+
+interface FieldNumberRangeProps extends FieldProps<string> {
+    defaultValue?: string;
+}
+
+export class FieldNumberRange extends React.Component<FieldNumberRangeProps, any> {
+
+}

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

@@ -0,0 +1,55 @@
+import React from "react";
+import {InputNumber} from "antd";
+import {StringUtils} from "../../utils";
+
+const SP = StringUtils.ISO_SPLITTER;
+
+export class FieldNumberRange extends React.Component {
+    onChangeA = (a) => {
+        const {b} = this.parse(this.props.value);
+        this.props.onChange && this.props.onChange(this.merge(a, b));
+    };
+
+    onChangeB = (b) => {
+        const {a} = this.parse(this.props.value);
+        this.props.onChange && this.props.onChange(this.merge(a, b));
+    };
+
+    merge(a, b) {
+        if (a == null) {
+            a = '';
+        }
+        if (b == null) {
+            b = '';
+        }
+        return a + SP + b;
+    }
+
+    parse(v) {
+        if (v == null) {
+            return {a: null, b: null};
+        }
+        const arr = v.split(SP);
+        return {a: arr[0] ? Number(arr[0]) : null, b: arr[1] ? Number(arr[1]) : null};
+    }
+
+    componentDidMount() {
+        const {value, defaultValue} = this.props;
+        if (value == null && defaultValue) {
+            this.props.onChange && this.props.onChange(defaultValue);
+        }
+    }
+
+    render() {
+        let {value, defaultValue} = this.props;
+        if (value == null) {
+            value = defaultValue;
+        }
+        const {a, b} = this.parse(value);
+
+        return <div style={{display: 'flex', alignItems: 'center'}}>
+            <InputNumber value={a} onChange={this.onChangeA}/> - <InputNumber value={b} onChange={this.onChangeB}/>
+        </div>;
+    }
+
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FieldProps } from '../types';
+
+/**
+ * 数字的百分数输入框
+ */
+export class FieldPercent extends React.Component<FieldProps<number>, any> {
+}

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

@@ -0,0 +1,30 @@
+import {InputNumber, Space} from 'antd';
+import React from 'react';
+
+/**
+ * 数字的百分数输入框
+ */
+export class FieldPercent extends React.Component {
+    render() {
+        const {value, onChange, ...rest} = this.props;
+
+        return (
+            <Space.Compact>
+                <InputNumber
+                    min={0}
+                    max={100}
+                    value={Number((value * 100).toFixed(0))}
+                    onChange={v => {
+                        if (v !== null) {
+                            const percentValue = Number((v / 100).toFixed(2));
+                            onChange && onChange(percentValue);
+                        }
+                    }}
+                    {...rest}
+                />
+                <Space.Addon>%</Space.Addon>
+            </Space.Compact>
+
+        );
+    }
+}