@jiangood/open-admin-flowable 2.2.2 → 2.2.4

package/package.json

@@ -34,5 +34,5 @@
   "scripts": {
     "dev": "umi dev"
   },
-  "version": "2.2.2"
+  "version": "2.2.4"
 }

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

@@ -113,7 +113,7 @@ export default class extends React.Component {
         }
         return <Card title={'流程设计  ' + this.state.model?.name}
                      extra={<Space>
-                         <Button type='primary' icon={<SaveOutlined/>} onClick={this.handleSave}>暂存</Button>
+                         <Button type='primary' icon={<SaveOutlined/>} onClick={this.handleSave}>保存</Button>
                          <Button type='primary' danger icon={<CloudUploadOutlined/>}
                                  onClick={this.handleDeploy}>部署</Button>
                          <Button icon={<DownloadOutlined/>} onClick={this.handleExportXML}>导出XML</Button>

package/src/pages/flowable/index.jsx

@@ -1,12 +1,98 @@
-import {Button, Popconfirm, Space} from 'antd';
+import {Button, Card, Empty, Form, message, Modal, Popconfirm, Skeleton, Space, Table} from 'antd';
 import React from 'react';
-import {ButtonList, HttpUtils, Page, PageUtils, ProTable} from "@jiangood/open-admin";
+import {ButtonList, FieldUserSelect, Gap, HttpUtils, Page, PageUtils, ProTable} from "@jiangood/open-admin";
 
-export default class extends React.Component {
+class InstanceViewModal extends React.Component {
+    state = {
+        commentList: [],
+        id: null,
+        img: null,
+        loading: true,
+        errorMsg: null,
+    }
+
+    componentDidMount() {
+        const {id, businessKey} = this.props;
+        const reqParams = {id};
+        if (businessKey) reqParams.businessKey = businessKey;
+        HttpUtils.get('admin/flowable/user-task/getInstanceInfo', reqParams).then(rs => {
+            this.setState({
+                ...rs,
+                commentList: rs.commentList,
+                img: rs.img,
+                id: rs.id,
+            })
+        }).catch(e => {
+            this.setState({errorMsg: e})
+        }).finally(() => {
+            this.setState({loading: false})
+        })
+    }
+
+    getCommentColumns() {
+        return [
+            {dataIndex: 'content', title: '操作'},
+            {dataIndex: 'user', title: '处理人'},
+            {dataIndex: 'time', title: '处理时间'},
+        ];
+    }
+
+    render() {
+        if (this.state.errorMsg) {
+            return <Empty description={this.state.errorMsg}/>
+        }
+
+        const {commentList, img, loading, id} = this.state
+        if (loading) {
+            return <Skeleton/>
+        }
+
+        return <>
+            <Card title='流程图'>
+                <img src={img} style={{maxWidth: '100%'}}/>
+            </Card>
+            <Gap/>
+            <Card title='审批记录'>
+                <Table dataSource={commentList}
+                       size='small'
+                       pagination={false}
+                       rowKey='id'
+                       columns={this.getCommentColumns()}
+                />
+            </Card>
+            <Gap/>
+            {this.props.showVariables && (
+                <Card title='流程变量'>
+                    <ProTable columns={[
+                        {dataIndex: 'key', title: '变量名'},
+                        {dataIndex: 'value', title: '变量值'},
+                    ]}
+                              rowKey='key'
+                              request={() => HttpUtils.get('admin/flowable/monitor/instance/vars', {id})}
+                    />
+                </Card>
+            )}
+        </>;
+    }
+}
 
+export default class extends React.Component {
 
     actionRef = React.createRef();
+    taskTableRef = React.createRef();
+    instanceTableRef = React.createRef();
+    definitionTableRef = React.createRef();
+    assigneeFormRef = React.createRef();
 
+    state = {
+        taskModalOpen: false,
+        instanceModalOpen: false,
+        definitionModalOpen: false,
+        viewModalOpen: false,
+        viewInstanceId: null,
+        assigneeFormOpen: false,
+        assigneeFormValues: {},
+    }
 
     columns = [
         {
@@ -17,8 +103,6 @@ export default class extends React.Component {
             title: '代码',
             dataIndex: 'key'
         },
-
-
         {
             title: '版本',
             dataIndex: 'version',
@@ -27,8 +111,6 @@ export default class extends React.Component {
             title: '更新时间',
             dataIndex: 'lastUpdateTime',
         },
-
-
         {
             title: '操作',
             dataIndex: 'option',
@@ -45,16 +127,162 @@ export default class extends React.Component {
         },
     ];
 
-
     handleDelete = row => {
         HttpUtils.post('admin/flowable/model/delete', {id: row.id}).then(rs => {
             this.actionRef.current.reload();
         })
     }
 
+    onClickSetAssignee = id => {
+        this.setState({assigneeFormOpen: true, assigneeFormValues: {taskId: id}})
+    };
 
-    render() {
+    submitSetAssignee = values => {
+        HttpUtils.post('admin/flowable/monitor/setAssignee', values).then(() => {
+            this.setState({assigneeFormOpen: false})
+            this.taskTableRef.current.reload()
+        }).catch(e => {
+            message.error(e?.message || '指定处理人失败');
+        })
+    };
+
+    instanceColumns = [
+        {
+            title: 'ID',
+            dataIndex: 'id',
+            key: 'id',
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '流程定义名称',
+            dataIndex: 'processDefinitionName',
+            key: 'processDefinitionName',
+        },
+        {
+            title: '流程定义键',
+            dataIndex: 'processDefinitionKey',
+            key: 'processDefinitionKey',
+        },
+        {
+            title: '版本',
+            dataIndex: 'processDefinitionVersion',
+            key: 'processDefinitionVersion',
+        },
+        {
+            title: '业务键',
+            dataIndex: 'businessKey',
+            key: 'businessKey',
+        },
+        {
+            title: '状态',
+            dataIndex: 'suspended',
+            key: 'suspended',
+            render: (value) => value ? '已挂起' : '运行中',
+        },
+        {
+            title: '开始时间',
+            dataIndex: 'startTime',
+            key: 'startTime',
+        },
+        {
+            dataIndex: 'options',
+            title: '操作',
+            fixed: 'right',
+            render: (_, r) => {
+                return <Space>
+                    <Button size='small' onClick={() => this.setState({viewModalOpen: true, viewInstanceId: r.id})}>查看</Button>
+                    <Popconfirm title={'关闭流程'}
+                                onConfirm={() => this.closeInstance(r.id)}>
+                        <Button size='small'>终止</Button>
+                    </Popconfirm>
+                </Space>
+            }
+        }
+    ]
+
+    closeInstance = (id) => {
+        HttpUtils.get('admin/flowable/monitor/processInstance/close', {id}).then((rs) => {
+            this.instanceTableRef.current.reload()
+        }).catch(e => {
+            message.error(e?.message || '关闭流程失败');
+        })
+    }
 
+    definitionColumns = [
+        {
+            title: 'ID',
+            dataIndex: 'id',
+        },
+        {
+            title: '分类',
+            dataIndex: 'category',
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+        },
+        {
+            title: '键',
+            dataIndex: 'key',
+        },
+        {
+            title: '描述',
+            dataIndex: 'description',
+        },
+        {
+            title: '版本',
+            dataIndex: 'version',
+        },
+        {
+            title: '资源名称',
+            dataIndex: 'resourceName',
+        },
+        {
+            title: '部署ID',
+            dataIndex: 'deploymentId',
+        },
+        {
+            title: '图表资源名称',
+            dataIndex: 'diagramResourceName',
+        },
+        {
+            title: '是否有开始表单键',
+            dataIndex: 'hasStartFormKey',
+            render: (value) => value ? '是' : '否',
+        },
+        {
+            title: '是否有图形符号',
+            dataIndex: 'hasGraphicalNotation',
+            render: (value) => value ? '是' : '否',
+        },
+        {
+            title: '是否挂起',
+            dataIndex: 'suspended',
+            render: (value) => value ? '是' : '否',
+        },
+        {
+            title: '租户ID',
+            dataIndex: 'tenantId',
+        },
+        {
+            title: '派生自',
+            dataIndex: 'derivedFrom',
+        },
+        {
+            title: '根派生来源',
+            dataIndex: 'derivedFromRoot',
+        },
+        {
+            title: '派生版本',
+            dataIndex: 'derivedVersion',
+        },
+    ]
+
+    render() {
         return <Page padding>
             <ProTable
                 actionRef={this.actionRef}
@@ -63,24 +291,124 @@ export default class extends React.Component {
                 showToolbarSearch={true}
                 toolBarRender={() => {
                     return <ButtonList>
-                        <Button onClick={() => PageUtils.open('/flowable/monitor/task', "运行中的任务")}>
+                        <Button onClick={() => this.setState({taskModalOpen: true})}>
                             运行中的任务
                         </Button>
-                        <Button onClick={() => PageUtils.open('/flowable/monitor/instance', "运行中的流程实例")}>
+                        <Button onClick={() => this.setState({instanceModalOpen: true})}>
                             运行中的流程实例
                         </Button>
-                        <Button onClick={() => PageUtils.open('/flowable/monitor/definition', "已部署的流程定义")}>
+                        <Button onClick={() => this.setState({definitionModalOpen: true})}>
                             已部署的流程定义
                         </Button>
                     </ButtonList>
                 }}
             />
 
+            <Modal title='运行中的任务' width={1200}
+                   open={this.state.taskModalOpen}
+                   onCancel={() => this.setState({taskModalOpen: false})}
+                   footer={null} destroyOnClose
+            >
+                <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>
 
-        </Page>
-    }
+            <Modal title='指定处理人'
+                   open={this.state.assigneeFormOpen}
+                   onOk={() => this.assigneeFormRef.current.submit()}
+                   onCancel={() => this.setState({assigneeFormOpen: false})}
+                   destroyOnClose
+            >
+                <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>
 
+            <Modal title='运行中的流程实例' width={1200}
+                   open={this.state.instanceModalOpen}
+                   onCancel={() => this.setState({instanceModalOpen: false})}
+                   footer={null} destroyOnClose
+            >
+                <ProTable
+                    actionRef={this.instanceTableRef}
+                    columns={this.instanceColumns}
+                    request={(params) => HttpUtils.get('admin/flowable/monitor/instancePage', params)}
+                />
+            </Modal>
 
-}
-
+            <Modal title='实例详情' width={1000}
+                   open={this.state.viewModalOpen}
+                   onCancel={() => this.setState({viewModalOpen: false})}
+                   footer={null} destroyOnClose
+            >
+                {this.state.viewInstanceId && (
+                    <InstanceViewModal id={this.state.viewInstanceId} showVariables/>
+                )}
+            </Modal>
 
+            <Modal title='已部署的流程定义' width={1200}
+                   open={this.state.definitionModalOpen}
+                   onCancel={() => this.setState({definitionModalOpen: false})}
+                   footer={null} destroyOnClose
+            >
+                <ProTable
+                    actionRef={this.definitionTableRef}
+                    search={false}
+                    columns={this.definitionColumns}
+                    request={(params) => HttpUtils.get('admin/flowable/monitor/definitionPage', params)}
+                />
+            </Modal>
+        </Page>
+    }
+}