@jiangood/open-admin 2.5.9 → 3.0.1

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

@@ -1,21 +1,30 @@
 import React from "react";
 import {InputNumber} from "antd";
 import {StringUtils} from "../../utils";
+import type {FieldProps} from '../types';
 
 const SP = StringUtils.ISO_SPLITTER;
 
-export class FieldNumberRange extends React.Component {
-    onChangeA = (a) => {
+/** 数字范围值，形如 "1/100"（起止以 / 分隔） */
+export type FieldNumberRangeValue = string;
+
+export interface FieldNumberRangeProps extends FieldProps<FieldNumberRangeValue> {
+    /** 默认值（形如 "1/100"），value 为空时挂载后回填 */
+    defaultValue?: string;
+}
+
+export class FieldNumberRange extends React.Component<FieldNumberRangeProps> {
+    onChangeA = (a: number | string | null) => {
         const {b} = this.parse(this.props.value);
         this.props.onChange && this.props.onChange(this.merge(a, b));
     };
 
-    onChangeB = (b) => {
+    onChangeB = (b: number | string | null) => {
         const {a} = this.parse(this.props.value);
         this.props.onChange && this.props.onChange(this.merge(a, b));
     };
 
-    merge(a, b) {
+    merge(a: number | string | null, b: number | string | null): string {
         if (a == null) {
             a = '';
         }
@@ -25,7 +34,7 @@ export class FieldNumberRange extends React.Component {
         return a + SP + b;
     }
 
-    parse(v) {
+    parse(v: string | null | undefined): { a: number | null; b: number | null } {
         if (v == null) {
             return {a: null, b: null};
         }

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

@@ -1,22 +1,33 @@
 import {InputNumber, Space} from 'antd';
+import type {InputNumberProps} from 'antd';
 import React from 'react';
+import type {FieldProps} from '../types';
+
+export interface FieldPercentProps extends Omit<InputNumberProps, 'value' | 'onChange'>, FieldProps<number> {
+    /** 小数位数，默认 2 */
+    precision?: number;
+}
 
 /**
  * 数字的百分数输入框
  */
-export class FieldPercent extends React.Component {
+export class FieldPercent extends React.Component<FieldPercentProps> {
+    static defaultProps = {
+        precision: 2,
+    };
+
     render() {
-        const {value, onChange, ...rest} = this.props;
+        const {value, onChange, precision, ...rest} = this.props;
 
         return (
             <Space.Compact>
                 <InputNumber
                     min={0}
                     max={100}
-                    value={Number((value * 100).toFixed(0))}
+                    value={value != null ? Number((value * 100).toFixed(precision)) : null}
                     onChange={v => {
-                        if (v !== null) {
-                            const percentValue = Number((v / 100).toFixed(2));
+                        if (v != null) {
+                            const percentValue = Number((v / 100).toFixed(precision));
                             onChange && onChange(percentValue);
                         }
                     }}

package/src/framework/fields/FieldRemoteSelect/index.tsx

@@ -4,9 +4,10 @@ import {BaseRemoteSelect} from '../BaseRemoteSelect';
 import type {SelectProps} from "antd/es/select";
 import type {FieldProps} from '../types';
 
-interface FieldRemoteSelectProps extends Omit<SelectProps, 'value' | 'onChange'>, FieldProps<any> {
+interface FieldRemoteSelectProps extends Omit<SelectProps, 'value' | 'onChange' | 'mode'>, FieldProps<any> {
     url: string;
     debounceTime?: number;
+    multiple?: boolean;
     paramsProcessor?: (params: any) => any;
     responseProcessor?: (response: any) => any;
 }
@@ -17,7 +18,7 @@ export class FieldRemoteSelect extends BaseRemoteSelect<FieldRemoteSelectProps>
     };
 
     render() {
-        const {value, placeholder, ...rest} = this.props;
+        const {value, placeholder, multiple, ...rest} = this.props;
         const {data, loading} = this.state;
 
         return (
@@ -30,6 +31,7 @@ export class FieldRemoteSelect extends BaseRemoteSelect<FieldRemoteSelectProps>
                 loading={loading}
                 value={value}
                 placeholder={placeholder}
+                mode={multiple ? 'multiple' : undefined}
                 {...rest}
             />
         );

package/src/framework/fields/FieldRemoteTreeSelect/index.tsx

@@ -14,13 +14,14 @@ export class FieldRemoteTreeSelect extends BaseRemoteSelect {
     }
 
     render() {
-        const { value, onChange, treeDefaultExpandAll } = this.props;
+        const { value, onChange, treeDefaultExpandAll, ...rest } = this.props;
         const { data, loading } = this.state;
 
         if (loading) return <Spin />;
 
         return (
             <TreeSelect
+                {...rest}
                 style={{ width: '100%', minWidth: 200 }}
                 allowClear
                 styles={{ popup: { root: { maxHeight: 400, overflow: 'auto' } } }}

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

@@ -3,8 +3,13 @@
  */
 import React from "react";
 import {FieldRemoteTree} from "../FieldRemoteTree";
+import type {FieldProps} from '../types';
 
-export class FieldSysOrgTree extends React.Component {
+interface FieldSysOrgTreeProps extends FieldProps<string[]> {
+    type?: string;
+}
+
+export class FieldSysOrgTree extends React.Component<FieldSysOrgTreeProps> {
   static defaultProps = {
     type: 'dept',
   };

package/src/framework/fields/FieldSysOrgTreeSelect/index.tsx

@@ -3,8 +3,13 @@
  */
 import React from "react";
 import {FieldRemoteTreeSelect} from "../FieldRemoteTreeSelect";
+import type {FieldProps} from '../types';
 
-export class FieldSysOrgTreeSelect extends React.Component {
+interface FieldSysOrgTreeSelectProps extends FieldProps<string | string[]> {
+    type?: string;
+}
+
+export class FieldSysOrgTreeSelect extends React.Component<FieldSysOrgTreeSelectProps> {
 
     static defaultProps = {
         type: 'dept',

package/src/framework/fields/FieldTable/index.tsx

@@ -1,16 +1,45 @@
 import {Button, Input, Table} from 'antd'
 import React from 'react'
 import {DeleteOutlined, PlusOutlined} from "@ant-design/icons";
+import type {FieldProps} from '../types';
 import './styles.less'
 
+/**
+ * 可编辑表格的列配置。
+ * render 返回的组件元素会被注入 value / onChange，用于编辑单元格。
+ */
+export interface FieldTableColumn {
+    /** 列标题 */
+    title?: React.ReactNode;
+    /** 字段名 */
+    dataIndex?: string;
+    /** 列宽 */
+    width?: number | string;
+    /** 自定义渲染（返回的组件会被注入 value/onChange） */
+    render?: (value: any, record: Record<string, any>, index: number) => React.ReactElement;
+    /** 其余 antd Table 列属性 */
+    [key: string]: any;
+}
+
+export interface FieldTableProps extends FieldProps<Record<string, any>[]> {
+    /** 列配置（操作列由组件自动追加） */
+    columns: FieldTableColumn[];
+    /** 容器样式 */
+    style?: React.CSSProperties;
+}
+
+interface FieldTableState {
+    dataSource: Record<string, any>[];
+}
+
 /**
  * 可编辑表格
  */
-export class FieldTable extends React.Component {
+export class FieldTable extends React.Component<FieldTableProps, FieldTableState> {
 
-    columns = [];
+    columns: FieldTableColumn[] = [];
 
-    constructor(props) {
+    constructor(props: FieldTableProps) {
         super(props);
 
         this.columns = this.props.columns.map(col => {
@@ -55,7 +84,7 @@ export class FieldTable extends React.Component {
         dataSource: []
     };
 
-    onCellChange = (index, dataIndex, e) => {
+    onCellChange = (index: number, dataIndex: string | undefined, e: any) => {
         const {dataSource} = this.state;
         const row = dataSource[index];
 
@@ -65,7 +94,7 @@ export class FieldTable extends React.Component {
         }
 
         const next = [...dataSource];
-        next[index] = {...row, [dataIndex]: v};
+        next[index] = {...row, [dataIndex as string]: v};
         this.setState({dataSource: next}, this.notifyParent);
     };
 
@@ -75,7 +104,7 @@ export class FieldTable extends React.Component {
         this.setState({dataSource}, this.notifyParent);
     };
 
-    remove = (record) => {
+    remove = (record: Record<string, any>) => {
         const {dataSource} = this.state;
         this.setState({dataSource: dataSource.filter(item => item !== record)}, this.notifyParent);
     };

package/src/framework/fields/FieldTableSelect/index.tsx

@@ -1,20 +1,36 @@
 import React from "react";
 import {Button, Select} from "antd";
+import type {TableColumnsType} from "antd";
 import {ProTable} from "../../components";
 import {HttpUtils} from "../../utils";
+import type {FieldProps} from '../types';
+
+export interface FieldTableSelectProps extends FieldProps<string> {
+    /** 数据加载地址 */
+    url: string;
+    /** 表格列配置（操作列由组件自动追加） */
+    columns: TableColumnsType<Record<string, any>>;
+    /** 占位文本，默认 请搜索选择 */
+    placeholder?: string;
+}
+
+interface FieldTableSelectState {
+    open: boolean;
+    label: string;
+}
 
 /**
  * 下拉表格
  *
  * 后端参考接口：
  */
-export class FieldTableSelect extends React.Component {
+export class FieldTableSelect extends React.Component<FieldTableSelectProps, FieldTableSelectState> {
 
     static defaultProps = {
         placeholder: '请搜索选择',
     };
 
-    state = {
+    state: FieldTableSelectState = {
         open: false,
         label: '',
     };

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

@@ -1,18 +1,48 @@
 import React from "react";
 import ImgCrop from "antd-img-crop";
-import {Modal, Upload, message} from "antd";
+import type {ImgCropProps} from "antd-img-crop";
+import {message, Modal, Upload} from "antd";
+import type {UploadChangeParam, UploadFile, UploadProps} from "antd";
 import { UploadOutlined } from "@ant-design/icons";
 import {ViewFile} from "../../views";
 import {ObjectUtils, UrlUtils} from "../../utils";
+import type {FieldProps} from '../types';
+
+/** 框架内使用的上传文件对象，额外携带 sysFile 的 id */
+export type SysUploadFile = UploadFile & { id?: string };
+
+export interface FieldUploadFileProps extends FieldProps<string> {
+    /** 最大上传数量，默认 1 */
+    maxCount?: number;
+    /** 是否启用上传前裁切图片 */
+    cropImage?: boolean;
+    /** 裁切配置（antd-img-crop 的 cropperProps） */
+    cropperProps?: ImgCropProps['cropperProps'];
+    /** 上传列表的内建样式，默认 picture-card */
+    listType?: UploadProps['listType'];
+    /** 接受的文件类型，如 image/* */
+    accept?: string;
+    /** 文件列表变化回调（新增文件上传成功后才触发） */
+    onFileChange?: (fileList: SysUploadFile[]) => void;
+}
+
+interface FieldUploadFileState {
+    maxCount: number;
+    cropImage: boolean;
+    fileList: SysUploadFile[];
+    /** 逗号分隔的文件 id */
+    value: string | null;
+    accept?: string;
+}
 
 /**
  * 上传图片前裁切， 单张图片
  *
  * 可参考 react-easy-crop
  */
-export class FieldUploadFile extends React.Component {
+export class FieldUploadFile extends React.Component<FieldUploadFileProps, FieldUploadFileState & { errorTitle?: string; errorContent?: string; previewFileId?: string }> {
 
-    state = {
+    state: FieldUploadFileState & { errorTitle?: string; errorContent?: string; previewFileId?: string } = {
         // 传入的参数
         maxCount: 1,
         cropImage: false,
@@ -22,26 +52,34 @@ export class FieldUploadFile extends React.Component {
         value: null, // 都好分隔的文件id
     };
 
-    constructor(props) {
+    constructor(props: FieldUploadFileProps) {
         super(props);
         ObjectUtils.copyPropertyIfPresent(props, this.state);
         this.state.fileList = this.convertInputToComponentValue(this.state.value);
     }
 
-    componentDidUpdate(prevProps) {
-        const next = {};
+    componentDidUpdate(prevProps: FieldUploadFileProps) {
+        const next: Partial<FieldUploadFileState> = {};
         if (this.props.maxCount !== prevProps.maxCount) next.maxCount = this.props.maxCount;
         if (this.props.cropImage !== prevProps.cropImage) next.cropImage = this.props.cropImage;
+
+        const prevValue = prevProps.value ?? null;
+        const curValue = this.props.value ?? null;
+        if (curValue !== prevValue && curValue !== this.state.value) {
+            next.fileList = this.convertInputToComponentValue(curValue);
+            next.value = curValue;
+        }
+
         if (Object.keys(next).length > 0) this.setState(next);
     }
 
-    convertInputToComponentValue(value) {
-        const list = [];
+    convertInputToComponentValue(value: string | null | undefined): SysUploadFile[] {
+        const list: SysUploadFile[] = [];
         if (value && value.length > 0) {
             const arr = value.split(",");
             for (const id of arr) {
                 const url = UrlUtils.contextPath('/admin/sysFile/preview/' + id);
-                const file = {id, url, uid: id, name: id, status: 'done', fileName: id};
+                const file = {id, url, uid: id, name: id, status: 'done', fileName: id} as SysUploadFile;
                 list.push(file);
             }
         }
@@ -49,8 +87,8 @@ export class FieldUploadFile extends React.Component {
         return list;
     }
 
-    convertComponentValueToOutput(fileList) {
-        const fileIds = [];
+    convertComponentValueToOutput(fileList: SysUploadFile[]): string[] {
+        const fileIds: string[] = [];
         for (const f of fileList) {
             if (f.status === 'done') {
                 if (f.response) { // 新上传的
@@ -60,23 +98,20 @@ export class FieldUploadFile extends React.Component {
                         f.id = id;
                         fileIds.push(id);
                     } else {
-                        Modal.error({title: '上传文件失败', content: ajaxResult.message});
+                        this.setState({errorTitle: '上传文件失败', errorContent: ajaxResult.message});
                     }
                 } else { // 老的
-                    fileIds.push(f.id);
+                    fileIds.push(f.id as string);
                 }
             }
         }
         return fileIds;
     }
 
-    handleChange = ({fileList, event, file}) => {
+    handleChange = ({fileList, event, file}: UploadChangeParam<SysUploadFile>) => {
         const rs = file.response;
         if (rs != null && rs.success === false) {
-            Modal.error({
-                title: '上传失败',
-                content: rs.message,
-            });
+            this.setState({errorTitle: '上传失败', errorContent: rs.message});
             return;
         }
 
@@ -84,26 +119,21 @@ export class FieldUploadFile extends React.Component {
             message.success(`文件「${rs.data?.name || ''}」上传成功`);
         }
 
-        this.setState({fileList});
-
         const newIds = this.convertComponentValueToOutput(fileList);
+        const value = newIds.join(',');
+        this.setState({fileList, value});
+
         if (newIds.length > 0 && this.props.onFileChange) {
             this.props.onFileChange(fileList);
         }
         if (this.props.onChange) {
-            const value = newIds.join(',');
             this.props.onChange(value);
         }
 
     };
 
     handlePreview = (file) => {
-        Modal.info({
-            title: '文件预览',
-            width: '80vw',
-            content: <ViewFile value={file.id} height='70vh'/>
-        });
-
+        this.setState({previewFileId: file.id});
     };
 
     render() {
@@ -113,7 +143,18 @@ export class FieldUploadFile extends React.Component {
             </ImgCrop>;
         }
 
-        return this.getUpload();
+        return <>
+            {this.getUpload()}
+            <Modal open={!!this.state.errorTitle} title={this.state.errorTitle} okText="确定"
+                   onCancel={() => this.setState({errorTitle: undefined})}
+                   onOk={() => this.setState({errorTitle: undefined})}>
+                {this.state.errorContent}
+            </Modal>
+            <Modal open={!!this.state.previewFileId} title="文件预览" width="80vw" footer={null}
+                   onCancel={() => this.setState({previewFileId: undefined})}>
+                {this.state.previewFileId && <ViewFile value={this.state.previewFileId} height='70vh'/>}
+            </Modal>
+        </>
     }
 
     getUpload = () => {

package/src/framework/fields/index.ts

@@ -1,7 +1,6 @@
 // 表单组件，主要属性： value onChange
 export * from './types';
 export * from './FieldRemoteSelect';
-export * from './FieldRemoteSelectMultiple';
 export * from './FieldRemoteTree';
 export * from './FieldDictSelect';
 export * from './FieldEditor'

package/src/framework/index.ts

@@ -3,4 +3,6 @@ export * from './components'
 export * from './utils'
 export * from './fields'
 export * from './views'
+export * from './config'
 export * from './GlobalData'
+export * from './router'

package/src/framework/router/Link.tsx

@@ -0,0 +1,26 @@
+import React, {type AnchorHTMLAttributes} from 'react';
+import {history} from './history';
+
+interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'> {
+    to: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}
+
+export class Link extends React.Component<LinkProps> {
+    render() {
+        const {to, children, onClick: userOnClick, ...domProps} = this.props;
+        return (
+            <a href={'#' + to}
+               {...domProps}
+               onClick={e => {
+                   userOnClick?.(e);
+                   if (!e.defaultPrevented) {
+                       e.preventDefault();
+                       history.push(to);
+                   }
+               }}>
+                {children}
+            </a>
+        );
+    }
+}

package/src/framework/router/PageFrame.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {Result} from 'antd';
+import {matchRoute} from './matcher';
+import {UrlUtils} from '../utils/UrlUtils';
+import ErrorBoundary from '../components/ErrorBoundary';
+
+interface PageFrameProps {
+    url: string;
+}
+
+export class PageFrame extends React.Component<PageFrameProps> {
+    render() {
+        const {url} = this.props;
+        const qIndex = url.indexOf('?');
+        const pathname = qIndex === -1 ? url : url.substring(0, qIndex);
+        const search = qIndex === -1 ? '' : url.substring(qIndex);
+
+        const matched = matchRoute(pathname);
+
+        let content;
+        if (matched) {
+            const {component: Comp, params} = matched;
+            const location = {pathname, search, query: UrlUtils.getParams(url)};
+            content = <Comp params={params} location={location}/>;
+        } else {
+            content = <Result status={404} title='页面不存在！' subTitle={<div>路由地址：{pathname}</div>}/>;
+        }
+
+        return <ErrorBoundary>{content}</ErrorBoundary>;
+    }
+}

package/src/framework/router/history.ts

@@ -0,0 +1,50 @@
+function currentUrl() {
+    return window.location.hash.substring(1) || '/';
+}
+
+function parseLocation() {
+    const url = currentUrl();
+    const qIndex = url.indexOf('?');
+    if (qIndex === -1) {
+        return {pathname: url, search: ''};
+    }
+    return {pathname: url.substring(0, qIndex), search: url.substring(qIndex)};
+}
+
+const listeners = new Set();
+let lastNotifiedUrl = currentUrl();
+
+function notify() {
+    lastNotifiedUrl = currentUrl();
+    const location = parseLocation();
+    history.location = location;
+    listeners.forEach(fn => fn({location}));
+}
+
+window.addEventListener('hashchange', () => {
+    // push/replace 已同步通知；此处仅处理浏览器前进/后退或手动修改 hash
+    if (currentUrl() === lastNotifiedUrl) return;
+    notify();
+});
+
+export const history = {
+    location: parseLocation(),
+
+    push(url) {
+        if (url === currentUrl()) return;
+        window.location.hash = url;
+        notify();
+    },
+
+    replace(url) {
+        if (url === currentUrl()) return;
+        const base = window.location.href.split('#')[0];
+        window.location.replace(base + '#' + url);
+        notify();
+    },
+
+    listen(fn) {
+        listeners.add(fn);
+        return () => listeners.delete(fn);
+    },
+};

package/src/framework/router/index.ts

@@ -0,0 +1,4 @@
+export {history} from './history';
+export {registerRoutes, matchRoute} from './matcher';
+export {PageFrame} from './PageFrame';
+export {Link} from './Link';

package/src/framework/router/matcher.ts

@@ -0,0 +1,58 @@
+import {type ComponentType} from 'react';
+
+function safeDecodeURIComponent(s: string): string {
+    try { return decodeURIComponent(s); } catch { return s; }
+}
+
+export interface RouteDef {
+    path: string;
+    component: ComponentType<any>;
+}
+
+interface InternalRoute extends RouteDef {
+    segments: ({ param: string } | { name: string })[];
+}
+
+export interface MatchResult {
+    component: ComponentType<any>;
+    params: Record<string, string>;
+}
+
+const routes: InternalRoute[] = [];
+
+function compile(path: string): InternalRoute['segments'] {
+    return path.split('/').filter(Boolean).map(seg =>
+        seg.startsWith(':') ? {param: seg.slice(1)} : {name: seg}
+    );
+}
+
+export function registerRoutes(defs: RouteDef[]): void {
+    for (const {path, component} of defs) {
+        routes.push({path, component, segments: compile(path)});
+    }
+}
+
+export function matchRoute(pathname: string): MatchResult | null {
+    const segs = pathname.split('/').filter(Boolean);
+    let best = null;
+    for (const route of routes) {
+        if (route.segments.length !== segs.length) continue;
+        const params = {};
+        let ok = true;
+        let dynamic = false;
+        for (let i = 0; i < segs.length; i++) {
+            const seg = route.segments[i];
+            if (seg.param) {
+                params[seg.param] = safeDecodeURIComponent(segs[i]);
+                dynamic = true;
+            } else if (seg.name !== segs[i]) {
+                ok = false;
+                break;
+            }
+        }
+        if (!ok) continue;
+        if (!dynamic) return {component: route.component, params};
+        if (!best) best = {component: route.component, params};
+    }
+    return best;
+}