@jiangood/open-admin 1.0.0 → 1.1.0

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

@@ -1,13 +1,15 @@
-// @ts-ignore
 import React from "react";
 import {CropperProps} from "react-easy-crop/Cropper";
 import {UploadListType} from "antd/es/upload/interface";
+import { FieldProps } from '../types';
 
-
-declare type FieldUploadFileProps = {
-    value?: string; // 文件的值，sysFile的id, 逗号分割
-    onChange?: (v: string) => {};
-    onFileChange?: (fileList: any[]) => {}
+/**
+ * 上传图片前裁切， 单张图片
+ *
+ * 可参考 react-easy-crop
+ */
+interface FieldUploadFileProps extends FieldProps<string> {
+    onFileChange?: (fileList: any[]) => void;
 
     /**
      * 是否裁切图片
@@ -21,14 +23,9 @@ declare type FieldUploadFileProps = {
 
     children?: React.ReactNode;
 
-    listType?: UploadListType
-};
+    listType?: UploadListType;
+}
 
-/**
- * 上传图片前裁切， 单张图片
- *
- * 可参考 react-easy-crop
- */
-export class FieldUploadFile extends React.Component<FieldUploadFileProps, any> {
+export class FieldUploadFile extends React.Component<FieldUploadFileProps, string> {
 
-}
+}

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

@@ -2,10 +2,14 @@ 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";
-
-
+import {ViewFile} from "../../views";
+import {ObjectUtils} from "../../utils";
+
+/**
+ * 上传图片前裁切， 单张图片
+ *
+ * 可参考 react-easy-crop
+ */
 export class FieldUploadFile extends React.Component {
 
     state = {
@@ -15,55 +19,52 @@ export class FieldUploadFile extends React.Component {
 
         // 内部参数
         fileList: [],
-        value: null // 都好分隔的文件id
+        value: null, // 都好分隔的文件id
     };
 
     constructor(props) {
         super(props);
-        ObjectUtils.copyPropertyIfPresent(props, this.state)
+        ObjectUtils.copyPropertyIfPresent(props, this.state);
         this.state.fileList = this.convertInputToComponentValue(this.state.value);
     }
 
     convertInputToComponentValue(value) {
-        let list = [];
+        const list = [];
         if (value && value.length > 0) {
-            const arr = value.split(",")
+            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};
+                const url = 'admin/sysFile/preview/' + id;
+                const file = {id, url, uid: id, name: id, status: 'done', fileName: id};
                 list.push(file);
             }
         }
 
-        return list
+        return list;
     }
 
     convertComponentValueToOutput(fileList) {
-        let fileIds = [];
+        const fileIds = [];
         for (const f of fileList) {
             if (f.status === 'done') {
-                if(f.response) { // 新上传的
-                    const ajaxResult = f.response
+                if (f.response) { // 新上传的
+                    const ajaxResult = f.response;
                     if (ajaxResult.success) {
-                        const {id, name} = ajaxResult.data
+                        const {id, name} = ajaxResult.data;
                         f.id = id;
                         fileIds.push(id);
                     } else {
-                        Modal.error({title: '上传文件失败', content: ajaxResult.message})
+                        Modal.error({title: '上传文件失败', content: ajaxResult.message});
                     }
-                }else { // 老的
-                    fileIds.push(f.id)
+                } else { // 老的
+                    fileIds.push(f.id);
                 }
-
-
             }
         }
         return fileIds;
     }
 
-
     handleChange = ({fileList, event, file}) => {
-        console.log('检测到文件变化', fileList)
+        console.log('检测到文件变化', fileList);
         const rs = file.response;
         if (rs != null && rs.success === false) {
             Modal.error({
@@ -73,29 +74,26 @@ export class FieldUploadFile extends React.Component {
             return;
         }
 
-
         this.setState({fileList});
 
-
-        let newIds = this.convertComponentValueToOutput(fileList);
+        const newIds = this.convertComponentValueToOutput(fileList);
         if (newIds.length > 0 && this.props.onFileChange) {
-            this.props.onFileChange(fileList)
+            this.props.onFileChange(fileList);
         }
-        if(this.props.onChange){
-            let value = newIds.join(',');
-            console.log('上传文件值', value )
+        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'/>
-        })
+        });
 
     };
 
@@ -103,7 +101,7 @@ export class FieldUploadFile extends React.Component {
         if (this.state.cropImage) {
             return <ImgCrop cropperProps={this.props.cropperProps} modalTitle={'裁剪图片'} fillColor={null}>
                 {this.getUpload()}
-            </ImgCrop>
+            </ImgCrop>;
         }
 
         return this.getUpload();
@@ -130,7 +128,7 @@ export class FieldUploadFile extends React.Component {
     renderButton = () => {
         const {fileList, maxCount} = this.state;
         if (fileList.length >= maxCount) {
-            return
+            return null;
         }
 
         return <>
@@ -138,4 +136,4 @@ export class FieldUploadFile extends React.Component {
             <div className="ant-upload-text">选择文件</div>
         </>;
     };
-}
+}

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

@@ -1,4 +1,5 @@
 // 表单组件，主要属性： value onChange
+export * from './types';
 export * from './FieldRemoteSelect';
 export * from './FieldRemoteSelectMultiple';
 export * from './FieldRemoteSelectMultipleInline';
@@ -18,4 +19,4 @@ export * from './FieldSysOrgTreeSelect'
 export * from './FieldSysOrgTree'
 export * from './FieldPercent'
 export * from './FieldUploadFile';
-export * from './system';
+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

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

package/src/framework/utils/index.ts

@@ -6,7 +6,6 @@ export * from "./EventBusUtils";
 export * from "./ColorsUtils"
 export * from "./DomUtils"
 export * from "./UuidUtils";
-export * from "./StringUtils"
 export * from "./TreeUtils";
 export * from './StorageUtils'
 export * from './DeviceUtils'

package/src/framework/utils/system/DictUtils.ts

@@ -33,7 +33,7 @@ export class DictUtils {
      */
     public static dictList(code: string): DictItem[] {
         const map = SysUtils.getDictInfo();
-        if (map === undefined) {
+        if (!map) {
             return [];
         }
 

package/src/framework/views/ViewApproveStatus/index.d.ts

@@ -0,0 +1,3 @@
+import { ViewProps } from "../types";
+
+export function ViewApproveStatus(props: ViewProps<string>);

package/src/framework/{view-components/ViewApproveStatus.tsx → views/ViewApproveStatus/index.jsx}

@@ -1,17 +1,12 @@
-import {DictUtils} from "../utils";
+import {DictUtils} from "../../utils";
 import {Tag} from "antd";
-import {ViewStringProps} from "./ViewProps";
-
-interface ViewProps {
-    value: String;
-}
 
 /**
  * 查看审批状态组件
  * @param props
  * @constructor
  */
-export function ViewApproveStatus(props:ViewStringProps) {
+export function ViewApproveStatus(props) {
     let {value} = props;
     let txt=   DictUtils.dictLabel('approveStatus', value)
 
@@ -23,4 +18,4 @@ export function ViewApproveStatus(props:ViewStringProps) {
     };
     let color = colorMap[value]
     return   <Tag color={color}>{txt}</Tag> ;
-}
+}

package/src/framework/views/ViewBoolean/index.d.ts

@@ -0,0 +1,3 @@
+import { ViewProps } from "../types";
+
+export function ViewBoolean(props: ViewProps<boolean>);

package/src/framework/views/ViewBoolean/index.jsx

@@ -0,0 +1,4 @@
+export function ViewBoolean(props) {
+    let {value} = props;
+    return value == null ? null : (value ? '是' : '否')
+}

package/src/framework/views/ViewBooleanEnableDisable/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ViewProps } from '../types';
+
+export class ViewBooleanEnableDisable extends React.Component<ViewProps<boolean | null | undefined>, any> {
+}

package/src/framework/{components/view/ViewBooleanEnableDisable.tsx → views/ViewBooleanEnableDisable/index.jsx}

@@ -1,12 +1,7 @@
 import React from 'react';
 import { Tag } from 'antd';
 
-// 定义组件的 Props 接口
-interface ViewBooleanEnableDisableProps {
-    value: boolean | null | undefined;
-}
-
-export class ViewBooleanEnableDisable extends React.Component<ViewBooleanEnableDisableProps, any> {
+export class ViewBooleanEnableDisable extends React.Component {
 
     render() {
         const { value } = this.props;
@@ -17,4 +12,4 @@ export class ViewBooleanEnableDisable extends React.Component<ViewBooleanEnableD
 
         return value ? <Tag color={"green"}>启用</Tag> : <Tag color={"red"}>禁用</Tag>;
     }
-}
+}

package/src/framework/{components/view/ViewFileButton.d.ts → views/ViewFile/index.d.ts}

@@ -1,10 +1,10 @@
 // @ts-ignore
 import React from "react";
+import { ViewProps } from "../types";
 
-declare type ViewFileProps = {
-    value: string;
+interface ViewFileProps extends ViewProps<string> {
     height: string;
-};
+}
 
 export class ViewFile extends React.Component<ViewFileProps, any> {
 }

package/src/framework/views/ViewFileButton/index.d.ts

@@ -0,0 +1,10 @@
+// @ts-ignore
+import React from "react";
+import { ViewProps } from "../types";
+
+interface ViewFileButtonProps extends ViewProps<string> {
+    height: string;
+}
+
+export class ViewFileButton extends React.Component<ViewFileButtonProps, any> {
+}

package/src/framework/views/ViewFileButton/index.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import {Button} from "antd";
+import { MessageUtils } from "../../utils";
+import { ViewFile } from "../ViewFile";
+
+/**
+ * 文件按钮查看组件
+ */
+export class ViewFileButton extends React.Component {
+    render() {
+        const {value, height} = this.props;
+        if (!value) {
+            return null;
+        }
+        
+        return <Button type="link" size="small" onClick={()=>{
+            MessageUtils.alert(<ViewFile value={this.props.value} />)
+        }}>
+            查看文件
+        </Button>;
+    }
+}

package/src/framework/views/ViewImage/index.d.ts

@@ -0,0 +1,6 @@
+// @ts-ignore
+import React from "react";
+import { ViewProps } from "../types";
+
+export class ViewImage extends React.Component<ViewProps<string|string[]>, any> {
+}

package/src/framework/views/ViewPassword/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ViewProps } from "../types";
+
+export class ViewPassword extends React.Component<ViewProps<string>, any> {
+}

package/src/framework/{view-components/ViewPassword.tsx → views/ViewPassword/index.jsx}

@@ -1,9 +1,8 @@
 import React from "react";
 import {Space} from "antd";
 import {EyeInvisibleOutlined, EyeOutlined} from "@ant-design/icons";
-import {ViewProps, ViewStringProps} from "./ViewProps";
 
-export class ViewPassword extends React.Component<ViewStringProps,any> {
+export class ViewPassword extends React.Component {
 
     state = {
         visible: false
@@ -22,4 +21,4 @@ export class ViewPassword extends React.Component<ViewStringProps,any> {
             </a>
         </Space>
     }
-}
+}

package/src/framework/views/ViewProcessInstanceProgress/index.d.ts

@@ -0,0 +1,12 @@
+// @ts-ignore
+import React from "react";
+import { ViewProps } from "../types";
+
+
+
+/**
+ * 业务标识businessKey
+ */
+export class ViewProcessInstanceProgress extends React.Component<ViewProps<string>, any> {
+}
+

package/src/framework/{view-components/ViewFlowableInstanceProgress.jsx → views/ViewProcessInstanceProgress/index.jsx}

@@ -1,11 +1,11 @@
 import React from "react";
 import {Empty, Modal, Skeleton, Table, Typography} from "antd";
-import {Gap, HttpUtils,} from "../../framework";
+import {Gap} from "../../components"; import {HttpUtils} from "../../utils";
 
 /**
  * 查看流程处理情况（不含表单）
  */
-export class ViewFlowableInstanceProgress extends React.Component {
+export class ViewProcessInstanceProgress extends React.Component {
 
     state = {
         instanceCommentList: [],

package/src/framework/views/ViewProcessInstanceProgressButton/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ViewProps } from "../types";
+
+export class ViewProcessInstanceProgressButton extends React.Component<ViewProps<string>, any> {
+
+}

package/src/framework/{view-components/ViewFlowableInstanceProgressButton.tsx → views/ViewProcessInstanceProgressButton/index.jsx}

@@ -1,18 +1,16 @@
 import React from "react";
 import {Button} from "antd";
-import {MessageUtils,} from "../utils";
-import {ViewStringProps} from "./ViewProps";
-import {ViewFlowableInstanceProgress} from "./ViewFlowableInstanceProgress";
+import {MessageUtils} from "../../utils";
+import {ViewProcessInstanceProgress} from "../ViewProcessInstanceProgress";
 
-
-export class ViewFlowableInstanceProgressButton extends React.Component<ViewStringProps,any>{
+export class ViewProcessInstanceProgressButton extends React.Component {
     state = {
         open:false,
     }
 
     onClick = () => {
         console.log('点击追踪流程')
-        let content = <ViewFlowableInstanceProgress value={this.props.value} />;
+        let content = <ViewProcessInstanceProgress value={this.props.value} />;
         MessageUtils.alert(content,{
             title:'流程审批信息',
             width:800

package/src/framework/views/ViewText/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ViewProps } from "../types";
+
+interface ViewTextProps extends ViewProps<string> {
+    /**
+     * 是否启用文本省略
+     */
+    ellipsis?: boolean;
+    /**
+     * 文本省略的最大长度
+     */
+    maxLength?: number;
+}
+
+export class ViewText extends React.Component<ViewTextProps, any> {
+}

package/src/framework/views/ViewText/index.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import {Typography, Button, Modal, Popover} from "antd";
+import {StringUtils} from "../../utils";
+
+export class ViewText extends React.Component {
+
+    static defaultProps = {
+        ellipsis: false,
+        maxLength: 15
+    }
+
+    render() {
+        const {value, ellipsis, maxLength} = this.props;
+        
+        if(value == null){
+            return null;
+        }
+        
+        // 如果没有启用 ellipsis，使用普通文本显示
+        if (!ellipsis) {
+            return <Typography.Text> {value}</Typography.Text>;
+        }
+        
+        // 如果启用了 ellipsis，使用省略功能
+        const short = StringUtils.ellipsis(value, maxLength);
+        return (
+            <Popover placement="topLeft" title={'长文本'} content={<Button onClick={this.showModal}>点击查看全部内容</Button>}>
+                {short}
+            </Popover>
+        );
+    }
+
+    showModal = () => {
+        const {value} = this.props;
+        Modal.info({
+            icon: null,
+            title: '长文本内容',
+            content: <div style={{height: 500, overflowY: 'auto'}}>{value}</div>,
+            width: 700
+        });
+    };
+}

package/src/framework/views/index.ts

@@ -0,0 +1,12 @@
+// 查看组件，主要是value 属性
+export * from './types';
+export * from './ViewPassword';
+export * from './ViewBoolean';
+export * from './ViewApproveStatus'
+export * from './ViewProcessInstanceProgress'
+export * from './ViewProcessInstanceProgressButton'
+export * from './ViewBooleanEnableDisable'
+export * from './ViewImage'
+export * from  './ViewFile'
+export * from './ViewText'
+export * from './ViewFileButton'

package/src/framework/views/types.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+/**
+ * 通用视图组件属性接口
+ * @template T - value 的类型
+ */
+export interface ViewProps<T> {
+  /**
+   * 视图值
+   */
+  value?: T;
+}
+
+/**
+ * 通用视图组件类类型
+ * @template T - value 的类型
+ */
+export interface ViewComponent<T> extends React.ComponentClass<ViewProps<T> & any> {
+}
+
+/**
+ * 通用视图组件函数类型
+ * @template T - value 的类型
+ */
+export interface ViewFunctionComponent<T> extends React.FC<ViewProps<T> & any> {
+}

package/src/layouts/admin/index.jsx

@@ -1,5 +1,3 @@
-// 全局路由
-
 import React from 'react';
 import {Badge, Layout, Menu, Watermark} from 'antd';
 

package/src/layouts/index.jsx

@@ -1,6 +1,5 @@
 import AdminLayout from "./admin"
 import React from "react";
-
 import {ConfigProvider} from "antd";
 
 import {Outlet, withRouter} from "umi";
@@ -10,7 +9,7 @@ import {
     HttpUtils,
     MessageHolder,
     PageLoading,
-    PageUtils,
+    PageUtils, StringUtils,
     SysUtils,
     ThemeUtils,
 } from "../framework";
@@ -26,6 +25,25 @@ dayjs.locale('zh-cn');
 // 不需要登录的页面
 const SIMPLE_URLS = ['/login', '/test']
 
+function checkIsSimplePage(pathname) {
+    if(pathname === '/' || pathname === '/index'){
+        return false;
+    }
+    // 测试页面
+    if(pathname.startsWith("/test/")){
+        return true
+    }
+    let count = StringUtils.count(pathname,'/');
+    return ArrUtils.contains(SIMPLE_URLS, pathname) || count === 1;
+}
+
+function checkIsPurePage(pathname){
+    if(pathname.startsWith("/test/")){
+        return true
+    }
+    return false
+}
+
 class _Layouts extends React.Component {
 
     log = Logger.getLogger('Layouts')
@@ -58,16 +76,11 @@ class _Layouts extends React.Component {
         }
     }
 
-    isSimplePage() {
-        let {pathname} = this.props.location;
-        let isSimplePage = ArrUtils.contains(SIMPLE_URLS, pathname);
-        console.log('简单页面列表定义', SIMPLE_URLS)
-        console.log('当前页面是否简单页面',pathname,isSimplePage)
-        return isSimplePage
-    }
+
 
     loadLoginInfo = () => {
-        if (this.isSimplePage() || this.state.loginInfoFinish) {
+        let {pathname} = this.props.location;
+        if (checkIsPurePage(pathname) || checkIsSimplePage(pathname) || this.state.loginInfoFinish) {
             return;
         }
 
@@ -135,22 +148,31 @@ class _Layouts extends React.Component {
 
 
     renderContent = () => {
+        let {pathname} = this.props.location;
+
+        if(checkIsPurePage(pathname)){
+            return <Outlet/>
+        }
+
         if(!this.state.messageHolderInit) {
             this.log.info('加载message holder...')
             return <PageLoading message='加载消息组件...'/>
         }
 
-        if (this.state.siteInfoLoading) {
-            return <PageLoading message='加载站点信息...'/>
-        }
-        
         let {params = {}} = this.props.location;
         console.log('layout: params', params)
-        let simple = this.isSimplePage();
-        if (simple || params.hasOwnProperty('_noLayout')) {
+        if (checkIsSimplePage(pathname) || params.hasOwnProperty('_noLayout')) {
             return <Outlet/>
         }
 
+
+
+        if (this.state.siteInfoLoading) {
+            return <PageLoading message='加载站点信息...'/>
+        }
+        
+
+
         if (!this.state.loginInfoFinish) {
             return <PageLoading message='加载登录信息...'/>
         }