@jiangood/admin-spring-boot-starter 0.2.0

package/src/framework/view-components/ViewFlowableInstanceProgress.jsx

@@ -0,0 +1,97 @@
+import React from "react";
+import {Empty, Modal, Skeleton, Table, Typography} from "antd";
+import {Gap, HttpUtils,} from "../../framework";
+
+/**
+ * 查看流程处理情况（不含表单）
+ */
+export class ViewFlowableInstanceProgress extends React.Component {
+
+    state = {
+        instanceCommentList: [],
+        vars: {},
+
+        id: null,
+        starter: null,
+        startTime: null,
+        name: null,
+
+        data: {
+            commentList: [],
+            img: null
+        },
+        loading: true,
+
+        errorMsg: null
+    }
+
+
+    componentDidMount() {
+        const {value} = this.props;
+        HttpUtils.get("admin/flowable/my/getInstanceInfo", {businessKey: value}).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>
+            <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: '处理时间'
+                       },
+                   ]}
+            />
+        </>
+
+    }
+
+}
+

package/src/framework/view-components/ViewFlowableInstanceProgressButton.tsx

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

package/src/framework/view-components/ViewPassword.tsx

@@ -0,0 +1,25 @@
+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> {
+
+    state = {
+        visible: false
+    }
+
+    render() {
+        let v = this.props.value;
+        if (v == null) {
+            return null
+        }
+        let visible = this.state.visible;
+        return <Space>
+            <span>{this.state.visible ? v : '******'}</span>
+            <a onClick={() => this.setState({visible: !visible})}>
+                {visible ? <EyeOutlined/> : <EyeInvisibleOutlined/>}
+            </a>
+        </Space>
+    }
+}

package/src/framework/view-components/ViewProps.ts

@@ -0,0 +1,11 @@
+export interface ViewProps {
+    value?: any;
+}
+
+export interface ViewStringProps {
+    value: string;
+}
+
+export interface ViewBooleanProps {
+    value: boolean;
+}

package/src/framework/view-components/index.ts

@@ -0,0 +1,6 @@
+// 查看组件，主要是value 属性
+export * from './ViewPassword';
+export * from './ViewBoolean';
+export * from './ViewApproveStatus'
+export * from './ViewFlowableInstanceProgress'
+export * from './ViewFlowableInstanceProgressButton'

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./layouts"
+export * from "./framework"

package/src/layouts/PageRender.d.ts

@@ -0,0 +1,22 @@
+// @ts-ignore
+import React from "react";
+
+declare type PageRenderProps = {
+
+   /**
+    * 路径 如 /flowable/task/form
+    */
+   pathname: string;
+   /***
+    * 搜索参数 如 /?id=1
+    */
+   search?:string;
+
+   /***
+    *   是否把location信息透传到真正页面
+    */
+   passLocation?: boolean
+};
+
+export class PageRender extends React.Component<PageRenderProps, any> {
+}

package/src/layouts/PageRender.jsx

@@ -0,0 +1,90 @@
+import {matchRoutes, useAppData} from "umi";
+import React from "react";
+import {Result} from "antd";
+import {UrlUtils} from "../framework";
+
+/**
+ * 通过指定 pathname 渲染页面
+ * @param props
+ * 为了规范，接收参数何router保持一致，
+ * pathname： 路径 如 /flowable/task/form
+ * search：搜索参数 如 /?id=1
+ *
+ * passLocation: 是否把location信息透传到真正页面
+ *
+ * @returns {React.JSX.Element|*}
+ * @constructor
+ */
+
+let APP_DATA_CACHE = null
+
+
+/**
+ * 写函数组件主要为了使用hooks
+ * @param props
+ * @returns {Element}
+ * @constructor
+ */
+export  function PageRender(props) {
+    let {pathname, search, passLocation} = props
+
+    let appData = useAppData()
+    if(Object.keys(appData).length === 0){
+        appData = APP_DATA_CACHE
+    }else {
+        APP_DATA_CACHE = appData;
+    }
+
+    return <_PageRender appData={appData}  pathname={pathname} search={search}
+                        passLocation={passLocation}/>
+}
+
+class _PageRender extends React.Component {
+
+    render() {
+        if (this.props.passLocation) {
+            return this.passLocationRender()
+        }
+        return this.defaultRender()
+    }
+
+    passLocationRender = () => {
+        let {pathname, search,  appData} = this.props
+
+        const map = appData.routeComponents
+        const key = pathname.substring(1); // 移除第一个斜杠
+        let componentType = map[key] || map[key + '/index']
+        if (componentType) {
+            let params =search ? UrlUtils.getParams(search): {}
+            const location = {pathname, search, params}
+            return React.createElement(componentType, {location});
+        }
+    };
+
+
+    defaultRender = () => {
+        let {pathname, appData} = this.props
+        let matchArr = matchRoutes(appData.clientRoutes, pathname)
+
+        if (matchArr != null) {
+            if (pathname === '/') {
+                // 匹配结果为1，表示未定义index.jsx ，导致死循环
+                if (matchArr.length === 1) { // 如果项目中没有定义index.jsx
+                    return <Result icon={null} title='未定义首页'></Result>
+                }
+            }
+            // 取最匹配的那个
+            const mathResult = matchArr[matchArr.length - 1].route
+            if(mathResult){
+                return mathResult.element;
+            }
+        }
+
+        // 如果实在找不到页面组件，则404
+        return <Result
+            status={404}
+            title='页面不存在！'
+            subTitle={<div>路由地址：{pathname}</div>}
+        />
+    };
+}

package/src/layouts/admin/HeaderRight.jsx

@@ -0,0 +1,104 @@
+import {Badge, Dropdown} from "antd";
+import {NotificationOutlined, QuestionCircleOutlined, SettingOutlined, UserOutlined} from "@ant-design/icons";
+import React from "react";
+import {history} from "umi";
+import {DeviceUtils, HttpUtils, MessageUtils,  PageUtils, SysUtils} from "../../framework";
+
+
+const ID = 'header-right';
+export default class HeaderRight extends React.Component {
+
+    state = {
+        isMobileDevice: false
+    };
+
+    componentDidMount() {
+        document.dispatchEvent(new CustomEvent('componentDidMount', {detail: ID}))
+        if (DeviceUtils.isMobileDevice()) {
+            this.setState({isMobileDevice: true})
+        }
+    }
+
+
+
+    logout = () => {
+        HttpUtils.post('admin/auth/logout').then(async () => {
+            localStorage.clear()
+            await MessageUtils.alert('退出登录成功');
+            history.replace('/login')
+        }).catch(async e => {
+            let confirm = await MessageUtils.confirm('退出登录失败，是否清空缓存');
+            if (confirm) {
+                localStorage.clear();
+                history.replace('/login')
+            }
+        })
+    }
+
+    userCenter = () => {
+        PageUtils.open('/userCenter', '个人中心')
+    }
+
+    render() {
+        const info = SysUtils.getLoginInfo()
+
+        if (this.state.isMobileDevice) {
+            return <div className='header-right'>
+                <a onClick={this.logout}>退出</a>
+            </div>
+        }
+
+        return <div className='header-right'>
+
+            <div className='item'>
+                <UserOutlined/> {info.name}
+            </div>
+
+
+            <div className='item' onClick={() => PageUtils.open('/userCenter/message', '我的消息')}>
+                <Badge count={info.messageCount} size="small">
+                    <NotificationOutlined/>
+                </Badge>
+            </div>
+
+            <div className='item' title='操作手册' onClick={() => PageUtils.open('/userCenter/manual', '操作手册')}>
+                <QuestionCircleOutlined/>
+            </div>
+
+
+            <div className='item'>
+
+                <Dropdown menu={{
+                    onClick: ({key}) => {
+                        switch (key) {
+                            case 'userCenter':
+                                this.userCenter()
+                                break;
+                            case 'logout':
+                                this.logout();
+                                break;
+                            case 'about':
+                                this.about()
+                                break
+                        }
+                    },
+                    items: [
+                        {key: 'userCenter', label: '个人中心'},
+                        {key: 'about', label: '关于系统'},
+                        {key: 'logout', label: '退出登录'},
+
+                    ]
+                }}><SettingOutlined/>
+
+                </Dropdown>
+
+            </div>
+
+        </div>
+    }
+
+
+    about = () => {
+        history.push("/about")
+    }
+}

package/src/layouts/admin/TabPageRender.jsx

@@ -0,0 +1,158 @@
+import React from "react";
+import {withRouter} from "umi";
+import {Tabs} from "antd";
+import {PageRender} from "../PageRender";
+import {PageUtils} from "../../framework";
+
+class TabPageRender extends React.Component {
+
+    state = {
+        active: null,
+        urlLabelMap: {},
+        tabs: [],
+    }
+
+    componentDidMount() {
+        const url = this.getUrl(this.props)
+        this.onUrlChange(url);
+
+        document.addEventListener('close-page-event', (e)=>{
+            const url = e.detail.url
+            this.onRemove(url)
+        })
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        const url = this.getUrl(this.props)
+        const pUrl = this.getUrl(prevProps)
+
+        if (url !== pUrl) {
+            this.onUrlChange(url);
+        }
+    }
+
+    onUrlChange = url => {
+        const {location} = this.props
+
+        const {pathname, search} = location
+        let {tabs} = this.state
+
+        const old = tabs.find(t => t.key === url)
+        if (old == null) {
+            const cmp = <PageRender pathname={pathname} search={search}/>
+            let label = this.getLabel(pathname);
+            tabs.push({
+                key: url,
+                label: label,
+                children: cmp
+            });
+            this.setState({tabs: [...tabs]})
+        }else {
+            const menu = this.props.pathMenuMap[pathname]
+            if (menu && menu.refreshOnTabClick) {
+                this.refresh(pathname)
+            }
+        }
+
+        this.setState({active: url})
+    };
+
+    getLabel(path) {
+        if (path === '/') {
+            return '首页'
+        }
+        let label = PageUtils.currentLabel();
+
+        if (!label) {
+            const menu = this.props.pathMenuMap[path]
+            if (menu) {
+                return menu.name
+            }
+        }
+
+        return label;
+    }
+
+
+    render() {
+        let {tabs} = this.state
+        if (tabs.length === 0) {
+            return null
+        }
+
+        return <>
+            <Tabs
+                items={tabs}
+                activeKey={this.state.active}
+                onChange={this.onChange}
+                onEdit={this.onRemove}
+
+                hideAdd
+                size='small'
+                type='editable-card'
+                style={{background: 'white'}}
+                rootClassName='tmgg-layout-tabs'
+
+                onTabClick={this.onTabClick}
+
+            >
+            </Tabs>
+        </>
+    }
+
+    lastTabClickTime = 0
+    onTabClick = (key, event) => {
+        let now = new Date().getTime();
+        let doubleClick = now - this.lastTabClickTime < 300;
+        // 双击时刷新
+        if (doubleClick) {
+            this.refresh(key);
+        }
+
+        this.lastTabClickTime = now
+    };
+
+    refresh = key => {
+        const tabs = this.state.tabs;
+        const tab = tabs.find(t => t.key === key)
+        if(tab != null){
+            const old = tab.children
+            if(old != null){
+                console.log('准备刷新：', key)
+                tab.children = '刷新中...'
+                this.setState({tabs}, () => {
+                    console.log('刷新节点', tab)
+                    tab.children = old
+                    this.setState({tabs})
+                })
+            }
+        }
+    };
+
+    onChange = url => {
+        if (url !== this.state.active) {
+            this.props.history.push(url)
+        }
+    };
+
+    onRemove = url => {
+        let {tabs} = this.state
+        tabs = tabs.filter(t => t.key !== url)
+
+        this.setState({tabs})
+        if (tabs.length > 0) {
+            this.setState({active: tabs[tabs.length - 1].key})
+        }
+    };
+
+    getUrl = props => {
+        const {location} = props
+        const {pathname, search} = location
+        return pathname + search;
+    }
+
+}
+
+
+// 让组件有路由相关的参数，如 this.props.location
+export default withRouter(TabPageRender)