@jiangood/admin-spring-boot-starter 0.2.0

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

@@ -0,0 +1,98 @@
+import {FieldUserSelect, HttpUtils, Page, ProTable} from "../../../framework";
+import {Button, Form, Modal} from "antd";
+import React from "react";
+
+export default class extends React.Component {
+
+
+    state = {
+        assigneeFormOpen:false,
+        assigneeFormValues:{}
+    }
+
+    assigneeFormRef = React.createRef()
+    taskTableRef = React.createRef()
+
+    onClickSetAssignee = id => {
+        this.setState({assigneeFormOpen:true,assigneeFormValues:{taskId:id}})
+    };
+
+    submitSetAssignee = values => {
+        HttpUtils.post('admin/flowable/monitor/setAssignee',values).then(()=>{
+            this.setState({assigneeFormOpen:false})
+            this.taskTableRef.current.reload()
+        })
+    };
+    render() {
+        return <Page padding>
+            <ProTable
+                actionRef={this.taskTableRef}
+                columns={[
+                    {
+                        dataIndex: 'processInstanceName',
+                        title: '实例名称'
+                    },
+                    {
+                        dataIndex: 'name',
+                        title: '任务名称',
+                    },
+                    {
+                        dataIndex: 'assigneeLabel',
+                        title: '处理人'
+                    },
+                    {
+                        dataIndex: 'id',
+                        title: '任务标识',
+                    },
+
+                    {
+                        dataIndex: 'processDefinitionId',
+                        title: '定义'
+                    },
+                    {
+                        dataIndex: 'processInstanceId',
+                        title: '实例'
+                    },
+
+
+
+                    {
+                        dataIndex: 'startTime',
+                        title: '开始时间'
+                    },
+                    {
+                        dataIndex: 'tenantId',
+                        title: '租户'
+                    },
+
+                    {
+                        dataIndex:'id',
+                        render:(id)=>{
+                            return <Button size='small' onClick={()=>this.onClickSetAssignee(id)}>指定处理人</Button>
+                        }
+                    }
+                ]}
+                request={(params) => HttpUtils.get('admin/flowable/monitor/task', params)}
+            >
+                <Form.Item label='受理人' name='assignee'>
+                    <FieldUserSelect />
+                </Form.Item>
+            </ProTable>
+            <Modal title='指定处理人'
+                   open={this.state.assigneeFormOpen}
+                   onOk={()=>this.assigneeFormRef.current.submit()}
+                   onCancel={()=>this.setState({assigneeFormOpen:false})}
+                   destroyOnHidden
+            >
+                <Form ref={this.assigneeFormRef} onFinish={this.submitSetAssignee} initialValues={this.state.assigneeFormValues}>
+                    <Form.Item name='taskId' noStyle>
+                    </Form.Item>
+                    <Form.Item name='assignee' label='用户'>
+                        <FieldUserSelect />
+                    </Form.Item>
+                </Form>
+            </Modal>
+        </Page>
+    }
+
+}

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

@@ -0,0 +1,186 @@
+import React from "react";
+import {Button, Card, Empty, Form, Input, message, Modal, Radio, Spin, Splitter, Table, Tabs, Typography,} from "antd";
+import {history} from "umi";
+import {FormRegistryUtils, Gap, HttpUtils, Page, PageUtils} from "../../../framework";
+import {FormOutlined, ShareAltOutlined} from "@ant-design/icons";
+
+export default class extends React.Component {
+
+    state = {
+        submitLoading: false,
+
+
+        instanceCommentList: [],
+        vars: {},
+
+
+        data: {
+            taskId: null,
+            commentList: [],
+            img: null
+        },
+        loading: true,
+
+        errorMsg: null
+    }
+
+
+
+    externalFormRef = React.createRef()
+
+    componentDidMount() {
+        const {taskId} = PageUtils.currentParams()
+
+
+        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 {
+            if (value.result === 'APPROVE') {
+                const fn = this.externalFormRef.current?.submit
+                if (fn) {
+                    await fn()
+                }
+            }
+
+            value.taskId = this.state.data.taskId
+            await HttpUtils.post("admin/flowable/my/handleTask", value)
+            history.replace('/flowable/task')
+        } catch (error) {
+            message.error(error)
+        } finally {
+            this.setState({submitLoading: false})
+        }
+
+    }
+
+    render() {
+        const {submitLoading} = this.state
+
+        const {data, loading} = this.state
+        const {commentList, img} = data
+        if(loading){
+            return <Spin/>
+        }
+        return <Page padding>
+
+            <Splitter>
+                <Splitter.Panel>
+                    <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='审批意见'>
+                        <Form
+                            layout='vertical'
+                            onFinish={this.handleTask}
+                            disabled={submitLoading}
+                        >
+
+                            <Form.Item label='审批结果' name='result' rules={[{required: true, message: '请选择'}]}
+                                       initialValue={'APPROVE'}>
+                                <Radio.Group>
+                                    <Radio value='APPROVE'>同意</Radio>
+                                    <Radio value='REJECT'>不同意</Radio>
+                                </Radio.Group>
+                            </Form.Item>
+                            <Form.Item label='审批意见' name='comment'
+                                       rules={[{required: true, message: '请输入审批意见'}]}>
+                                <Input.TextArea/>
+                            </Form.Item>
+                            <div>
+                                <Button type='primary' htmlType='submit' loading={submitLoading}
+                                        size={"middle"}>提&nbsp;交</Button>
+                            </div>
+                        </Form>
+                    </Card>
+                </Splitter.Panel>
+
+            </Splitter>
+
+
+        </Page>
+
+
+    }
+
+    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

@@ -0,0 +1,184 @@
+import React from "react";
+import {Button, Tabs} from "antd";
+import {HttpUtils, LinkButton, Page, PageLoading, PageUtils, ProTable} from "../../../framework";
+
+
+export default class extends React.Component {
+
+    state = {
+        show: true
+    }
+
+    render() {
+        if (!this.state.show) {
+            return <PageLoading/>
+        }
+
+        const items = [
+            {label: '待办任务', key: '1', children: this.renderTodo()},
+            {label: '已办任务', key: '2', children: this.renderDone()},
+            {label: '我发起的', key: '3', children: this.renderMyStart()},
+        ]
+
+        return <Page padding>
+            <Tabs defaultActiveKey="1" destroyOnHidden items={items}>
+
+            </Tabs>
+        </Page>
+    }
+
+
+    renderTodo = () => <ProTable
+        showToolbarSearch={false}
+        request={(params) => HttpUtils.get("admin/flowable/my/todoTaskPage", params)}
+        columns={[
+
+            {
+                title: '发起人',
+                dataIndex: 'instanceStarter'
+            },
+            {
+                title: '流程名称',
+                dataIndex: 'instanceName',
+            },
+            {
+                title: '当前节点',
+                dataIndex: 'taskName',
+                width: 100,
+            },
+            {
+                title: '当前操作人',
+                dataIndex: 'assigneeInfo',
+                width: 100
+            },
+
+            {
+                title: '发起时间',
+                dataIndex: 'instanceStartTime',
+            },
+            {
+                title: '任务创建时间',
+                dataIndex: 'createTime',
+            },
+
+            {
+                title: '操作',
+                dataIndex: 'option',
+                render: (_, record) => {
+                    let path = '/flowable/task/form?taskId=' + record.id;
+                    return (
+                        <LinkButton
+                            type='primary'
+                            path={path}
+                            label='处理任务'>处理</LinkButton>
+                    );
+                },
+            },
+        ]}
+        size='small'
+    />;
+
+    renderDone = () => <ProTable
+        showToolbarSearch={false}
+        request={(params) => HttpUtils.get("admin/flowable/my/doneTaskPage", params)}
+        columns={[
+            {
+                title: '流程名称',
+                dataIndex: 'instanceName',
+            },
+            {
+                title: '发起人',
+                dataIndex: 'instanceStarter'
+            },
+            {
+                title: '发起时间',
+                dataIndex: 'instanceStartTime',
+            },
+            {
+                title: '任务创建时间',
+                dataIndex: 'createTime',
+            },
+            {
+                title: '处理时间',
+                dataIndex: 'endTime',
+            },
+            {
+                title: '耗时',
+                dataIndex: 'durationInfo',
+            },
+            {
+                title: '处理节点',
+                dataIndex: 'taskName'
+            },
+            {
+                title: '操作人',
+                dataIndex: 'assigneeInfo'
+            },
+
+
+            {
+                title: '操作',
+                dataIndex: 'option',
+                render: (_, record) => (
+                     <Button size='small' onClick={() => PageUtils.open('/flowable/task/instance/view?id='+record.id, '流程信息') }> 查看 </Button>
+                ),
+            },
+        ]}
+        size='small'
+    />;
+
+    renderMyStart = () => <ProTable
+        request={(params) => HttpUtils.get("admin/flowable/my/myInstance", params)}
+        columns={[
+
+            {
+                title: '流程名称',
+                dataIndex: 'processDefinitionName',
+                render(_, r) {
+                    return r.name || r.processDefinitionName
+                }
+            },
+            {
+                title: '发起人',
+                dataIndex: 'startUserName',
+            },
+            {
+                title: '发起时间',
+                dataIndex: 'startTime',
+            },
+            {
+                title: '业务标识',
+                dataIndex: 'businessKey',
+
+            },
+
+
+            {
+                title: '结束时间',
+                dataIndex: 'endTime',
+            },
+
+            {
+                title: '流程状态',
+                dataIndex: 'x',
+                render(_, row) {
+                    return row.endTime == null ? '进行中' : '已结束'
+                }
+            },
+            {
+                title: '终止原因',
+                dataIndex: 'deleteReason',
+            },
+
+
+            {
+                title: '操作',
+                dataIndex: 'option',
+                render: (_, record) => (
+                 <Button size='small' onClick={() => PageUtils.open('/flowable/task/instance/view?id='+record.id, '流程信息') }> 查看 </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/flowable/test/index.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import {Button, Card, Form, Input} from "antd";
+import {HttpUtils, MessageUtils, PageLoading, PageUtils, StringUtils} from "../../../framework";
+
+export default class extends React.Component {
+
+  state = {
+    model: undefined
+  }
+
+
+  componentDidMount() {
+    let params = PageUtils.currentParams()
+    const id = this.id = params.id
+
+    HttpUtils.get('admin/flowable/test/get', {id}).then(rs=>{
+        this.setState({model: rs})
+    })
+
+  }
+
+
+  render() {
+    if(this.state.model === undefined){
+      return <PageLoading />
+    }
+
+    return <Card title={'流程测试 / 【' + this.state.model.name + "】 / " + this.state.model.key }>
+      <Form onFinish={this.onFinish} layout='vertical' >
+        <Form.Item name='key' noStyle initialValue={this.state.model.key}>
+        </Form.Item>
+
+        <Form.Item name='id' label='业务标识(相当于业务表的id)' rules={[{required: true}]} initialValue={StringUtils.random(16)}>
+          <Input />
+        </Form.Item>
+
+        {this.state.model.variables.map(item=><Form.Item key={item.name} name={item.name} label={item.label}>
+          <Input />
+        </Form.Item>)}
+
+
+
+        <Form.Item label='   ' colon={false}>
+          <Button htmlType="submit" type='primary'>提交</Button>
+        </Form.Item>
+      </Form>
+    </Card>
+  }
+
+  onFinish = values => {
+    HttpUtils.post('admin/flowable/test/submit', values).then(rs=>{
+      MessageUtils.confirm('跳转任务列表?').then(()=>{
+        PageUtils.open('/flowable/monitor/task')
+      })
+    })
+  };
+}

package/src/pages/index.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import {Card} from "antd";
+import {MessageUtils} from "../framework";
+
+
+export default class extends React.Component {
+
+    state = {}
+
+    componentDidMount() {
+
+    }
+
+    render() {
+
+        return <Card>
+            欢迎使用本系统
+
+
+
+
+        </Card>
+    }
+
+}

package/src/pages/login.jsx

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