@jiangood/springboot-admin-starter 0.1.2 → 0.1.4

package/package.json

@@ -33,7 +33,7 @@
     "!src/.umi"
   ],
   "main": "src/index.ts",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "scripts": {
     "dev": "umi dev",
     "build": "tsc --outDir config/dist --skipLibCheck --noEmitOnError false config/index.ts"

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

@@ -2,14 +2,14 @@ import React from 'react';
 
 export interface FieldDateProps {
 
-    type: 'YYYY-MM-DD' |
+    type: 'YYYY-MM-DD' | 'DAY'|
         'YYYY-MM-DD HH:mm:ss' |
         // 年
-        'YYYY' |
+        'YYYY' | 'YEAR' |
         // 年月
-        'YYYY-MM' |
+        'YYYY-MM' | 'YEAR_MONTH'|
         // 季度
-        'YYYY-QQ' |
+        'YYYY-QQ' | 'YEAR_QUARTER'|
 
         'YYYY-MM-DD HH:mm' |
 
@@ -21,5 +21,7 @@ export interface FieldDateProps {
 }
 
 export class FieldDate extends React.Component<FieldDateProps, any> {
+
+
 }
 

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

@@ -4,6 +4,7 @@
 import React from "react";
 import dayjs from "dayjs";
 import {DatePicker, TimePicker} from "antd";
+import {DateUtils} from "../utils";
 
 
 export class FieldDate extends React.Component {
@@ -11,8 +12,12 @@ export class FieldDate extends React.Component {
         type: 'YYYY-MM-DD'
     }
 
+
+
     render() {
         let {type, value, onChange, ...rest} = this.props;
+        type = DateUtils.convertTypeToFormat(type)
+
         switch (type) {
             case 'YYYY':
                 return <DatePicker

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

@@ -4,7 +4,7 @@
 import React from "react";
 import dayjs from "dayjs";
 import {DatePicker, TimePicker} from "antd";
-import {StringUtils} from "../utils";
+import {DateUtils, StringUtils} from "../utils";
 
 const SP = StringUtils.ISO_SPLITTER;
 
@@ -15,6 +15,7 @@ export class FieldDateRange extends React.Component {
 
     render() {
         let {type, value, onChange, ...rest} = this.props;
+        type = DateUtils.convertTypeToFormat(type)
         switch (type) {
             case 'YYYY':
                 return <DatePicker.RangePicker

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

@@ -1,7 +1,11 @@
-import React from "react";
+import React, {ReactNode} from "react";
 
 export interface LoginPageProps {
 
+    /**
+     * 覆盖表单
+     */
+    form?: ReactNode
 
 
 }

package/src/framework/pages/LoginPage.jsx

@@ -3,7 +3,7 @@ import {Button, Form, Input, message, Space} from 'antd';
 import {LockOutlined, SafetyCertificateOutlined, UserOutlined, WarningOutlined} from '@ant-design/icons';
 import "./LoginPage.less"
 import {history} from 'umi';
-import {HttpUtils, MessageUtils, PageUtils, SysUtils} from "../utils";
+import {EventBusUtils, HttpUtils, MessageUtils, PageUtils, SysUtils} from "../utils";
 import {JSEncrypt} from "jsencrypt";
 
 
@@ -53,6 +53,7 @@ export class LoginPage extends React.Component {
 
         HttpUtils.postForm('/admin/auth/login', values).then(rs => {
             console.log('登录结果', rs)
+            EventBusUtils.emit('loginSuccess')
             history.push(this.redirect)
         }).catch(e => {
             console.log('登录错误', e)
@@ -76,45 +77,7 @@ export class LoginPage extends React.Component {
             <section className='login-page' style={pageStyle}>
                 <div className="login-content">
                     <h1>{siteInfo.title}</h1>
-                    <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>
+                    {this.getForm(siteInfo)}
 
                     {this.renderFormBottom()}
 
@@ -124,6 +87,52 @@ export class LoginPage extends React.Component {
     }
 
 
+    getForm(siteInfo) {
+        if(this.props.form){
+            return this.props.form;
+        }
+
+        return <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>;
+    }
+
     renderFormBottom() {
         let siteInfo = this.state.siteInfo;
         if (siteInfo.loginBoxBottomTip) {

package/src/framework/utils/DateUtils.ts

@@ -1,7 +1,21 @@
-import { StringUtils } from './StringUtils';
+import {StringUtils} from './StringUtils';
+
+export class DateUtils {
+
+    public static convertTypeToFormat(type) {
+        if (type === 'YEAR') {
+            type = 'YYYY'
+        } else if (type === 'YEAR_MONTH') {
+            type = 'YYYY-MM'
+        } else if (type === 'YEAR_QUARTER') {
+            type = 'YYYY-QQ'
+        } else if (type === 'DAY') {
+            type = 'YYYY-MM-DD'
+        }
+        return type;
+    }
 
-export class DateUtils  {
-  public static year(date: Date): number {
+    public static year(date: Date): number {
         return date.getFullYear();
     }
 
@@ -28,19 +42,19 @@ export class DateUtils  {
      * @param date
      * @returns {string}
      */
-    public static  hour(date: Date): string {
+    public static hour(date: Date): string {
         return StringUtils.pad(date.getHours(), 2);
     }
 
-    public static  minute(date: Date): string {
+    public static minute(date: Date): string {
         return StringUtils.pad(date.getMinutes(), 2);
     }
 
-    public static  second(date: Date): string {
+    public static second(date: Date): string {
         return StringUtils.pad(date.getSeconds(), 2);
     }
 
-    public static  formatDate(d: Date): string {
+    public static formatDate(d: Date): string {
         return this.year(d) + '-' + this.month(d) + '-' + this.date(d);
     }
 
@@ -57,7 +71,7 @@ export class DateUtils  {
      * @param d
      * @returns {string} 2020年1月30日
      */
-    public static  formatDateCn(d: Date): string {
+    public static formatDateCn(d: Date): string {
         return this.year(d) + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日';
     }
 
@@ -76,11 +90,11 @@ export class DateUtils  {
         return this.formatDate(new Date());
     }
 
-    public static  thisYear(): number {
+    public static thisYear(): number {
         return this.year(new Date());
     }
 
-    public static  thisMonth(): string {
+    public static thisMonth(): string {
         return this.month(new Date());
     }
 
@@ -88,7 +102,7 @@ export class DateUtils  {
      * 显示友好时间，如 2小时前，1周前
      * @param pastDate 日期, 支持Date，String，Number
      */
-    public static  friendlyTime(pastDate: Date | string | number): string | undefined {
+    public static friendlyTime(pastDate: Date | string | number): string | undefined {
         if (pastDate == null) {
             return undefined;
         }
@@ -165,7 +179,7 @@ export class DateUtils  {
         return min + '分' + seconds + '秒';
     }
 
-    public static  beginOfMonth(): string {
+    public static beginOfMonth(): string {
         const d = new Date();
         d.setDate(1);
         return this.formatDate(d);

package/src/framework/utils/EventBusUtils.ts

@@ -89,6 +89,7 @@ export class EventBusUtils {
         name: string,
         ...args: T
     ): void {
+        console.log('触发事件：',name, args)
         const list = EventBusUtils.__stack[name] as StaticEventEntry<T>[];
 
         if (list !== undefined) {

package/src/framework/utils/MessageUtils.tsx

@@ -88,21 +88,21 @@ export class MessageUtils {
     /**
      * 成功消息
      */
-    static success(content: React.ReactNode, duration: number = 3) {
+    static success(content: String, duration: number = 3) {
         this.messageApi.success(content, duration);
     }
 
     /**
      * 错误消息
      */
-    static error(content: React.ReactNode, duration: number = 3) {
+    static error(content: String, duration: number = 3) {
         this.messageApi.error(content, duration);
     }
 
     /**
      * 警告消息
      */
-    static warning(content: React.ReactNode, duration: number = 3) {
+    static warning(content: String, duration: number = 3) {
         this.messageApi.warning(content, duration);
     }
 
@@ -116,13 +116,15 @@ export class MessageUtils {
     /**
      * 弹出 Loading 提示
      */
-    static loading(content: React.ReactNode = '正在加载...', duration?: number) {
-        return this.messageApi.loading({content, duration: duration === undefined ? 0 : duration});
+    static loading(content: string = '正在加载...', duration?: number) {
+         duration = duration === undefined ? 0 : duration;
+        return this.messageApi.loading(content, duration);
     }
 
     static config(messageApi: MessageInstance, modalApi: HookAPI) {
         this.messageApi = messageApi;
         this.modalApi = modalApi;
+        console.log('MessageUtils.config', messageApi, modalApi)
     }
 
     private static modalApi:HookAPI = null;

package/src/framework/utils/ObjectUtils.ts

@@ -3,6 +3,11 @@
  */
 export class ObjectUtils {
 
+    static clone(obj:any){
+        return JSON.parse(JSON.stringify(obj));
+    }
+
+
     /**
      * 🎯 安全地获取深度嵌套的对象属性的值。
      * 如果属性链中的任何一级为 undefined 或 null，getDefinition 函数会返回一个默认值，而不是抛出错误。
@@ -21,93 +26,93 @@ export class ObjectUtils {
      */
     static get<TObj extends object, TDefault = unknown>(
         obj: TObj | null | undefined,
-    path: string | (keyof TObj)[],
-    defaultValue: TDefault | undefined = undefined
-): unknown | TDefault {
-
-    // 路径处理：将 'a[0].b.c' 转换为 ['a', '0', 'b', 'c'] 以支持数组索引
-    // 注意：这里简化处理，只处理点分隔符，如果需要完整的 lodash getDefinition 行为，需要更复杂的正则解析。
-    const pathArray: string[] = Array.isArray(path)
-        ? path.map(String) // 确保路径段都是字符串
-        : path.split('.');
-
-    let result: any = obj;
-
-    // 遍历路径
-    for (const segment of pathArray) {
-    // 如果当前结果是 null 或 undefined，则后续路径无法访问，返回默认值
-    if (result == null) {
-    return defaultValue;
-}
+        path: string | (keyof TObj)[],
+        defaultValue: TDefault | undefined = undefined
+    ): unknown | TDefault {
+
+        // 路径处理：将 'a[0].b.c' 转换为 ['a', '0', 'b', 'c'] 以支持数组索引
+        // 注意：这里简化处理，只处理点分隔符，如果需要完整的 lodash getDefinition 行为，需要更复杂的正则解析。
+        const pathArray: string[] = Array.isArray(path)
+            ? path.map(String) // 确保路径段都是字符串
+            : path.split('.');
+
+        let result: any = obj;
+
+        // 遍历路径
+        for (const segment of pathArray) {
+            // 如果当前结果是 null 或 undefined，则后续路径无法访问，返回默认值
+            if (result == null) {
+                return defaultValue;
+            }
 
 // 尝试访问属性
 // 使用 segment 作为索引，TypeScript 默认这里是合法的
-result = result[segment];
-}
+            result = result[segment];
+        }
 
 // 如果最终结果是 null 或 undefined，则返回默认值；否则返回结果
-return result !== null && result !== undefined ? result : defaultValue;
-}
+        return result !== null && result !== undefined ? result : defaultValue;
+    }
 
 
-/**
- * 📋 复制对象属性，仅复制源对象 (source) 中 **存在** 且目标对象 (target) 中 **也有** 对应属性的那些值。
- * 主要用于根据目标对象的结构来过滤和填充数据。
- *
- * @param source 源对象。
- * @param target 目标对象。
- * @returns void
- */
-static copyPropertyIfPresent<TSource extends object, TTarget extends object>(
-    source: TSource | null | undefined,
-    target: TTarget | null | undefined
-): void {
-    if (!source || !target || typeof source !== 'object' || typeof target !== 'object') {
-    return;
-}
+    /**
+     * 📋 复制对象属性，仅复制源对象 (source) 中 **存在** 且目标对象 (target) 中 **也有** 对应属性的那些值。
+     * 主要用于根据目标对象的结构来过滤和填充数据。
+     *
+     * @param source 源对象。
+     * @param target 目标对象。
+     * @returns void
+     */
+    static copyPropertyIfPresent<TSource extends object, TTarget extends object>(
+        source: TSource | null | undefined,
+        target: TTarget | null | undefined
+    ): void {
+        if (!source || !target || typeof source !== 'object' || typeof target !== 'object') {
+            return;
+        }
 
 // 遍历目标对象的键，确保我们只复制目标对象上已有的属性
-const keys = Object.keys(target) as (keyof TTarget)[];
-
-for (const key of keys) {
-    // 检查源对象是否有这个属性
-    if (Object.hasOwn(source, key)) {
-        // 因为目标对象和源对象都被约束为 object，所以这里的类型转换是相对安全的
-        const value = (source as any)[key];
-        (target as any)[key] = value;
+        const keys = Object.keys(target) as (keyof TTarget)[];
+
+        for (const key of keys) {
+            // 检查源对象是否有这个属性
+            if (Object.hasOwn(source, key)) {
+                // 因为目标对象和源对象都被约束为 object，所以这里的类型转换是相对安全的
+                const value = (source as any)[key];
+                (target as any)[key] = value;
+            }
+        }
     }
-}
-}
 
 
-/**
- * 📝 复制对象属性，将源对象 (source) 中 **非 undefined** 的属性值复制到目标对象 (target) 对应的属性上。
- * 仅复制目标对象 (target) 中 **已有** 的属性，如果源对象中的值是 undefined 则不复制。
- *
- * @param source 源对象。
- * @param target 目标对象。
- * @returns void
- */
-static copyProperty<TSource extends object, TTarget extends object>(
-    source: TSource | null | undefined,
-    target: TTarget | null | undefined
-): void {
-    if (!source || !target || typeof source !== 'object' || typeof target !== 'object') {
-    return;
-}
+    /**
+     * 📝 复制对象属性，将源对象 (source) 中 **非 undefined** 的属性值复制到目标对象 (target) 对应的属性上。
+     * 仅复制目标对象 (target) 中 **已有** 的属性，如果源对象中的值是 undefined 则不复制。
+     *
+     * @param source 源对象。
+     * @param target 目标对象。
+     * @returns void
+     */
+    static copyProperty<TSource extends object, TTarget extends object>(
+        source: TSource | null | undefined,
+        target: TTarget | null | undefined
+    ): void {
+        if (!source || !target || typeof source !== 'object' || typeof target !== 'object') {
+            return;
+        }
 
 // 遍历目标对象的键
-const keys = Object.keys(target) as (keyof TTarget)[];
+        const keys = Object.keys(target) as (keyof TTarget)[];
 
-for (const key of keys) {
-    // 尝试从源对象获取值
-    const value = (source as any)[key];
+        for (const key of keys) {
+            // 尝试从源对象获取值
+            const value = (source as any)[key];
 
-    // 只有当值明确不是 undefined 时才复制（即允许复制 null 或其他 falsy 值）
-    if (value !== undefined) {
-        (target as any)[key] = value;
+            // 只有当值明确不是 undefined 时才复制（即允许复制 null 或其他 falsy 值）
+            if (value !== undefined) {
+                (target as any)[key] = value;
+            }
+        }
     }
-}
-}
 
 }

package/src/framework/utils/TreeUtils.ts

@@ -113,11 +113,14 @@ export class TreeUtils {
     }
 
     /**
-     * 🚶 深度优先遍历树节点。
+     * 深度优先遍历树节点。
      * @param tree 树节点数组
      * @param callback 对每个节点执行的回调函数
      */
     public static walk<T extends TreeNode>(tree: T[], callback: (node: T) => void): void {
+        if(tree == null){
+            return
+        }
         for (const node of tree) {
             callback(node); // 执行回调函数
 
@@ -129,7 +132,7 @@ export class TreeUtils {
     }
 
     /**
-     * 🔑 根据键值深度查找单个节点。
+     * 根据键值深度查找单个节点。
      * @param key 要查找的键值 (例如: 节点的 id)
      * @param list 树节点数组
      * @param keyName 要匹配的字段名，默认为 'id'

package/src/layouts/admin/index.jsx

@@ -10,7 +10,7 @@ import {Gap, HttpUtils, NamedIcon, PageUtils, SysUtils, ThemeUtils, TreeUtils} f
 import HeaderRight from "./HeaderRight";
 import TabPageRender from "./TabPageRender";
 
-const {Header, Footer, Sider, Content} = Layout;
+const {Header, Sider, Content} = Layout;
 /**
  * 带菜单的布局，主要处理布局宇框架结构
  */
@@ -99,7 +99,7 @@ export default class extends React.Component {
             <Header className='header'>
                 <div className='header-left'>
                     {siteInfo.logoUrl &&
-                        <img className='logo-img' src='/admin/public/logo.jpg' onClick={() => history.push('/')} alt='logo'/>}
+                        <img className='logo-img' src={siteInfo.logoUrl} onClick={() => history.push('/')} alt='logo'/>}
                     <h3 className='hide-on-mobile'>
                         <Link to="/" style={{color: ThemeUtils.getColor("primary-color")}}>{siteInfo.title} </Link>
                     </h3>

package/src/pages/flowable/design/index.jsx

@@ -57,6 +57,8 @@ export default class extends React.Component {
             }
         });
 
+        console.log('导入的xml内容如下')
+        console.log(xml)
         this.bpmnModeler.importXML(xml)
         this.bpmnModeler.on('element.contextmenu', e => e.preventDefault()) // 关闭右键，影响操作
     };

package/src/pages/flowable/index.jsx

@@ -10,11 +10,11 @@ export default class extends React.Component {
 
     columns = [
         {
-            title: '模型名称',
+            title: '名称',
             dataIndex: 'name',
         },
         {
-            title: '唯一编码',
+            title: '代码',
             dataIndex: 'key'
         },
 

package/src/pages/flowable/task/form.jsx

@@ -1,18 +1,27 @@
 import React from "react";
-import {Button, Card, Form, Input, message, Radio, Spin, Splitter,} from "antd";
+import {Button, Card, Empty, Form, Input, message, Modal, Radio, Spin, Splitter, Table, Tabs, Typography,} from "antd";
 import {history} from "umi";
-import {HttpUtils, Page, PageUtils} from "../../../framework";
-import InstanceInfo from "../InstanceInfo";
+import {FormRegistryUtils, Gap, HttpUtils, Page, PageUtils} from "../../../framework";
+import {FormOutlined, ShareAltOutlined} from "@ant-design/icons";
 
 export default class extends React.Component {
 
     state = {
         submitLoading: false,
-        taskId: null,
-        instanceId: null,
-        formKey: null,
 
-        taskInfo: null
+
+        instanceCommentList: [],
+        vars: {},
+
+
+        data: {
+            taskId: null,
+            commentList: [],
+            img: null
+        },
+        loading: true,
+
+        errorMsg: null
     }
 
 
@@ -20,16 +29,31 @@ export default class extends React.Component {
     externalFormRef = React.createRef()
 
     componentDidMount() {
-        const {taskId, instanceId, formKey} = PageUtils.currentParams()
-        this.setState({taskId, instanceId, formKey})
+        const {taskId} = PageUtils.currentParams()
 
-        HttpUtils.get('admin/flowable/my/taskInfo', {id: taskId}).then(rs=>{
-            console.log('任务信息',rs)
-            this.setState({taskInfo:rs})
+
+        HttpUtils.get("admin/flowable/my/getInstanceInfoByTaskId", {taskId}).then(rs => {
+            this.setState({data: rs})
+        }).catch(e => {
+            this.setState({errorMsg: e})
+        }).finally(() => {
+            this.setState({loading: false})
         })
 
+
     }
 
+    onImgClick = () => {
+        Modal.info({
+            title: '流程图',
+            width: '70vw',
+            content: <div style={{width: '100%', overflow: 'auto', maxHeight: '80vh'}}>
+                <img src={this.state.data.img}/>
+            </div>
+        })
+    };
+
+
     handleTask = async value => {
         this.setState({submitLoading: true});
         try {
@@ -40,8 +64,8 @@ export default class extends React.Component {
                 }
             }
 
-            value.taskId = this.state.taskId
-            await HttpUtils.post("admin//flowable/my/handleTask", value)
+            value.taskId = this.state.data.taskId
+            await HttpUtils.post("admin/flowable/my/handleTask", value)
             history.replace('/flowable/task')
         } catch (error) {
             message.error(error)
@@ -52,16 +76,37 @@ export default class extends React.Component {
     }
 
     render() {
-        const {submitLoading,taskInfo} = this.state
-        const instanceId = this.state.instanceId
-        if (!instanceId || !taskInfo) {
+        const {submitLoading} = this.state
+
+        const {data, loading} = this.state
+        const {commentList, img} = data
+        if(loading){
             return <Spin/>
         }
         return <Page padding>
 
             <Splitter>
                 <Splitter.Panel>
-                    <InstanceInfo id={instanceId} formKey={this.state.formKey} externalFormRef={this.externalFormRef} taskInfo={taskInfo}/>
+                    <Typography.Title level={4}>{data.name}</Typography.Title>
+                    <Typography.Text type="secondary">{data.starter} &nbsp;&nbsp; {data.startTime}</Typography.Text>
+                    <Gap></Gap>
+                    <Tabs
+                        items={[
+                            {
+                                key: '1',
+                                label: '表单',
+                                icon: <FormOutlined/>,
+                                children: this.renderForm()
+                            },
+                            {
+                                key: '2',
+                                label: '流程',
+                                icon: <ShareAltOutlined/>,
+                                children: this.renderProcess(img, commentList)
+                            }
+                        ]}>
+
+                    </Tabs>
                 </Splitter.Panel>
                 <Splitter.Panel defaultSize={400}>
                     <Card title='审批意见'>
@@ -70,6 +115,7 @@ export default class extends React.Component {
                             onFinish={this.handleTask}
                             disabled={submitLoading}
                         >
+
                             <Form.Item label='审批结果' name='result' rules={[{required: true, message: '请选择'}]}
                                        initialValue={'APPROVE'}>
                                 <Radio.Group>
@@ -96,4 +142,45 @@ export default class extends React.Component {
 
 
     }
+
+    renderProcess = (img, commentList) => <Card title='处理记录'>
+       <img src={img} style={{maxWidth: '100%'}}
+                     onClick={this.onImgClick}/>
+        <Gap></Gap>
+        <Table dataSource={commentList}
+
+               size='small'
+               pagination={false}
+               rowKey='id'
+               columns={[
+                   {
+                       dataIndex: 'content',
+                       title: '操作'
+                   },
+                   {
+                       dataIndex: 'user',
+                       title: '处理人'
+                   },
+                   {
+                       dataIndex: 'time',
+                       title: '处理时间'
+                   },
+               ]}
+        />
+    </Card>;
+
+    renderForm = () => {
+        const {data} = this.state
+        const {businessKey} = data
+        const formKey = data.formKey;
+        const formName = data.formKey + 'Form'
+
+        let ExForm = FormRegistryUtils.get(formName);
+        if (!ExForm) {
+            console.error(" 表单不存在： "+formName+"。 请检查表单源代码：src/forms/"+formName+".jsx")
+            return <Empty description={"表单不存在： " + formName}></Empty>
+        }
+
+        return <ExForm id={businessKey} formKey={formKey} ref={this.externalFormRef} ></ExForm>
+    }
 }

package/src/pages/flowable/task/index.jsx

@@ -1,7 +1,6 @@
 import React from "react";
-import {Button, Modal, Tabs} from "antd";
-import {HttpUtils, LinkButton, MessageUtils, Page, PageLoading, ProTable} from "../../../framework";
-import InstanceInfo from "../InstanceInfo";
+import {Button, Tabs} from "antd";
+import {HttpUtils, LinkButton, Page, PageLoading, PageUtils, ProTable} from "../../../framework";
 
 
 export default class extends React.Component {
@@ -66,10 +65,7 @@ export default class extends React.Component {
                 title: '操作',
                 dataIndex: 'option',
                 render: (_, record) => {
-                    let path = '/flowable/task/form?taskId=' + record.id + '&instanceId=' + record.instanceId;
-                    if (record.formKey) {
-                        path += "&formKey=" + record.formKey
-                    }
+                    let path = '/flowable/task/form?taskId=' + record.id;
                     return (
                         <LinkButton
                             type='primary'
@@ -124,13 +120,7 @@ export default class extends React.Component {
                 title: '操作',
                 dataIndex: 'option',
                 render: (_, record) => (
-                    <Button size='small' onClick={() => {
-                        Modal.info({
-                            title: '流程信息',
-                            width: '800vw',
-                            content: <InstanceInfo id={record.instanceId}/>
-                        })
-                    }}> 查看 </Button>
+                     <Button size='small' onClick={() => PageUtils.open('/flowable/task/instance/view?id='+record.id, '流程信息') }> 查看 </Button>
                 ),
             },
         ]}
@@ -185,14 +175,9 @@ export default class extends React.Component {
                 title: '操作',
                 dataIndex: 'option',
                 render: (_, record) => (
-                    <Button size='small' onClick={() => {
-                        MessageUtils.alert(<InstanceInfo id={record.id}/>, {
-                            width: '80vw',
-                            title: '流程信息'
-                        })
+                 <Button size='small' onClick={() => PageUtils.open('/flowable/task/instance/view?id='+record.id, '流程信息') }> 查看 </Button>
 
-                    }}> 查看 </Button>
-                ),
+            ),
             },
         ]}
     />;

package/src/pages/flowable/task/instance/view.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import {Gap, HttpUtils, Page, PageUtils, ProTable} from "../../../../framework";
+import {Card, Empty, Skeleton, Table} from "antd";
+
+export default class extends React.Component {
+    state = {
+        instanceCommentList: [],
+        vars: {},
+
+        id: null,
+        starter: null,
+        startTime: null,
+        name: null,
+
+        data: {
+            commentList: [],
+            img: null
+        },
+        loading: true,
+
+        errorMsg: null
+    }
+
+
+    componentDidMount() {
+        const { id} = PageUtils.currentParams()
+
+        HttpUtils.get("admin/flowable/my/getInstanceInfo", {id}).then(rs => {
+            this.setState(rs)
+            this.setState({data: rs})
+        }).catch(e => {
+            this.setState({errorMsg: e})
+        }).finally(() => {
+            this.setState({loading: false})
+        })
+
+    }
+
+
+    render() {
+
+        if (this.state.errorMsg) {
+            return <Empty description={this.state.errorMsg}></Empty>
+        }
+
+        const {data, loading} = this.state
+        const {commentList, img} = data
+        if (loading) {
+            return <Skeleton/>
+        }
+
+
+        return <Page padding>
+            <Card title='流程图'>
+                <img src={img} style={{maxWidth: '100%'}}/>
+            </Card>
+            <Gap/>
+            <Card title='审批记录'>
+                <Table dataSource={commentList}
+                       size='small'
+                       pagination={false}
+                       rowKey='id'
+                       columns={[
+                           {
+                               dataIndex: 'content',
+                               title: '操作'
+                           },
+                           {
+                               dataIndex: 'user',
+                               title: '处理人'
+                           },
+                           {
+                               dataIndex: 'time',
+                               title: '处理时间'
+                           },
+                       ]}
+                />
+            </Card>
+
+
+        </Page>
+    }
+
+
+}

package/src/pages/login.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {LoginPage} from "../framework/pages/LoginPage";
+import {Button} from "antd";
 
 
 export default class  extends React.Component {
@@ -9,8 +10,9 @@ export default class  extends React.Component {
 
 
     render() {
-
-      return <LoginPage />
+        return <LoginPage />
+        // 支持自定义
+      // return <LoginPage form={<Button type={"primary"} size='large'>xx登录</Button>} />
     }
 
 

package/src/pages/flowable/InstanceInfo.jsx

@@ -1,138 +0,0 @@
-import React from "react";
-import {Card, Empty, Modal, Skeleton, Table, Tabs, Typography} from "antd";
-
-import {FormOutlined, ShareAltOutlined} from "@ant-design/icons";
-import {FormRegistryUtils, Gap, HttpUtils} from "../../framework";
-
-export default class InstanceInfo extends React.Component {
-
-    state = {
-        instanceCommentList: [],
-        vars: {},
-
-        id: null,
-        starter: null,
-        startTime: null,
-        name: null,
-
-        data: {
-            commentList: [],
-            img: null
-        },
-        loading: true,
-
-        errorMsg: null
-    }
-
-
-    componentDidMount() {
-        const {id, businessKey} = this.props;
-        HttpUtils.get("admin/flowable/my/getInstanceInfo", {id, businessKey}).then(rs => {
-            this.setState(rs)
-            this.setState({data: rs})
-        }).catch(e => {
-            this.setState({errorMsg: e})
-        }).finally(() => {
-            this.setState({loading: false})
-        })
-
-    }
-
-    onImgClick = () => {
-        const {data} = this.state
-
-        const {img} = data
-        Modal.info({
-            title: '流程图',
-            width: '70vw',
-            content: <div style={{width: '100%', overflow: 'auto', maxHeight: '80vh'}}><img src={img}/></div>
-        })
-    };
-
-    render() {
-        if (this.state.errorMsg) {
-            return <Empty description={this.state.errorMsg}></Empty>
-        }
-
-        const {data, loading} = this.state
-        const {commentList, img} = data
-        if (loading) {
-            return <Skeleton/>
-        }
-
-
-        return <>
-            <Typography.Title level={4}>{data.name}</Typography.Title>
-            <Typography.Text type="secondary">{data.starter} &nbsp;&nbsp; {data.startTime}</Typography.Text>
-            <Gap></Gap>
-            <Tabs
-                items={[
-                    {
-                        key: '1',
-                        label: '表单',
-                        icon: <FormOutlined/>,
-                        children: this.renderForm()
-                    },
-                    {
-                        key: '2',
-                        label: '流程',
-                        icon: <ShareAltOutlined/>,
-                        children: this.renderProcess(img, commentList)
-                    }
-                ]}>
-
-            </Tabs>
-
-
-        </>
-
-    }
-
-    renderProcess = (img, commentList) => <Card title='处理记录'>
-        {img && <img src={img} style={{maxWidth: '100%'}}
-                     onClick={this.onImgClick}/>}
-        <Gap></Gap>
-        <Table dataSource={commentList}
-
-               size='small'
-               pagination={false}
-               rowKey='id'
-               columns={[
-                   {
-                       dataIndex: 'content',
-                       title: '操作'
-                   },
-                   {
-                       dataIndex: 'user',
-                       title: '处理人'
-                   },
-                   {
-                       dataIndex: 'time',
-                       title: '处理时间'
-                   },
-               ]}
-        />
-    </Card>;
-
-    renderForm = () => {
-        const {data} = this.state
-        const {processDefinitionKey, businessKey} = data
-        const formKey = this.props.formKey || processDefinitionKey;
-        const formName = formKey + 'Form'
-
-        // let formKey = this.props.formKey || processDefinitionKey + 'Form';
-        let ExForm = FormRegistryUtils.get(formName);
-        if (!ExForm) {
-            return <div>
-                <p>
-                    未创建表单 {formName}。
-                </p>
-                <Typography.Text>
-                    表单路径：src/forms/{formName}.jsx
-                </Typography.Text>
-                </div>
-        }
-
-        return <ExForm id={businessKey} formKey={formKey} ref={this.props.externalFormRef} taskInfo={this.props.taskInfo}></ExForm>
-    }
-}

package/src/pages/flowable/instance/view.jsx

@@ -1,15 +0,0 @@
-import InstanceInfo from "../InstanceInfo";
-import {Page, PageUtils} from "../../../framework";
-import React from "react";
-
-export default class extends React.Component{
-
-    render() {
-        let params = PageUtils.currentParams();
-        const {businessKey} = params
-        return <Page padding>
-            <InstanceInfo businessKey={businessKey} />
-        </Page>
-    }
-
-}