@jiangood/open-admin-flowable 2.0.1 → 2.1.0

package/src/pages/flowable/monitor/instance/index.jsx

@@ -1,6 +1,8 @@
-import {Button, Popconfirm, Space} from "antd";
+import {Button, message, Popconfirm, Space} from "antd";
 import {HttpUtils, PageUtils, ProTable} from "@jiangood/open-admin";
 import React from "react";
+import {MONITOR_PROCESS_INSTANCE_CLOSE, MONITOR_INSTANCE_PAGE} from "@/constants/api";
+import {ROUTE_MONITOR_INSTANCE_VIEW} from "@/constants/routes";
 
 export default class extends React.Component {
 
@@ -52,7 +54,7 @@ export default class extends React.Component {
             fixed: 'right',
             render: (_, r) => {
                 return <Space>
-                    <Button size='small' onClick={() => PageUtils.open('/flowable/monitor/instance/view?id=', '查看流程')}>查看</Button>
+                    <Button size='small' onClick={() => PageUtils.open(ROUTE_MONITOR_INSTANCE_VIEW + '?id=' + r.id, '查看流程')}>查看</Button>
                     <Popconfirm title={'关闭流程'}
                                 onConfirm={() => this.close(r.id)}>
                         <Button size='small' >终止</Button>
@@ -63,8 +65,10 @@ export default class extends React.Component {
     ]
 
     close = (id) => {
-        HttpUtils.get('admin/flowable/monitor/processInstance/close', {id}).then((rs) => {
+        HttpUtils.get(MONITOR_PROCESS_INSTANCE_CLOSE, {id}).then((rs) => {
             this.tableRef.current.reload()
+        }).catch(e => {
+            message.error(e?.message || '关闭流程失败');
         })
     }
 
@@ -74,7 +78,7 @@ export default class extends React.Component {
         return <ProTable
             actionRef={this.tableRef}
             columns={this.columns}
-            request={(params) => HttpUtils.get('admin/flowable/monitor/instancePage', params)}
+            request={(params) => HttpUtils.get(MONITOR_INSTANCE_PAGE, params)}
         >
 
         </ProTable>

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

@@ -1,102 +1,5 @@
-import React from "react";
-import {Gap, HttpUtils, Page, PageUtils, ProTable} from "@jiangood/open-admin";
-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 {businessKey, id} = PageUtils.currentParams()
-
-        HttpUtils.get("admin/flowable/user-task/getInstanceInfo", {id, businessKey}).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 {id} = PageUtils.currentParams()
-
-        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>
-
-            <Gap/>
-            <Card title='流程变量'>
-                <ProTable columns={[
-                    {
-                        dataIndex: 'key',
-                        title: '变量名'
-                    },
-                    {
-                        dataIndex: 'value',
-                        title: '变量值'
-                    },
-                ]}
-                          rowKey='key'
-                          request={() => HttpUtils.get('admin/flowable/monitor/instance/vars', {id})}
-                ></ProTable>
-
-            </Card>
-        </Page>
-    }
-
+import InstanceView from "@/components/InstanceView";
 
+export default function MonitorInstanceView() {
+    return <InstanceView showVariables />;
 }

package/src/pages/flowable/monitor/{task.jsx → task/index.jsx}

@@ -1,6 +1,7 @@
 import {FieldUserSelect, HttpUtils, Page, ProTable} from "@jiangood/open-admin";
-import {Button, Form, Modal} from "antd";
+import {Button, Form, message, Modal} from "antd";
 import React from "react";
+import {MONITOR_SET_ASSIGNEE, MONITOR_TASK} from "@/constants/api";
 
 export default class extends React.Component {
 
@@ -18,9 +19,11 @@ export default class extends React.Component {
     };
 
     submitSetAssignee = values => {
-        HttpUtils.post('admin/flowable/monitor/setAssignee',values).then(()=>{
+        HttpUtils.post(MONITOR_SET_ASSIGNEE,values).then(()=>{
             this.setState({assigneeFormOpen:false})
             this.taskTableRef.current.reload()
+        }).catch(e => {
+            message.error(e?.message || '指定处理人失败');
         })
     };
     render() {
@@ -72,7 +75,7 @@ export default class extends React.Component {
                         }
                     }
                 ]}
-                request={(params) => HttpUtils.get('admin/flowable/monitor/task', params)}
+                request={(params) => HttpUtils.get(MONITOR_TASK, params)}
             >
                 <Form.Item label='受理人' name='assignee'>
                     <FieldUserSelect />

package/src/pages/flowable/simulate/FinishedPhase.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import {Button, Empty, Space, Spin, Table, Tag} from "antd";
+import {HistoryOutlined, ReloadOutlined} from "@ant-design/icons";
+
+export default class FinishedPhase extends React.Component {
+    render() {
+        const {historyList, historyLoading,
+               onReset, onViewHistory, onDeleteHistory} = this.props;
+
+        return (
+            <div>
+                <Space style={{marginBottom: 16}}>
+                    <Button icon={<HistoryOutlined/>} onClick={onReset}>历史记录</Button>
+                    <Button icon={<ReloadOutlined/>} onClick={onReset}>重新仿真</Button>
+                </Space>
+
+                {historyLoading ? <Spin style={{display: 'block', margin: '80px auto'}}/> : (
+                    historyList.length === 0 ? (
+                        <Empty description="暂无仿真记录" image={Empty.PRESENTED_IMAGE_SIMPLE}/>
+                    ) : (
+                        <Table dataSource={historyList}
+                               size="small" pagination={false} rowKey="instanceId"
+                               columns={[
+                                   {
+                                       title: '实例', dataIndex: 'name', ellipsis: true,
+                                       render: (text, record) => (
+                                           <a onClick={() => onViewHistory(record.instanceId)}>{text}</a>
+                                       ),
+                                   },
+                                   {title: '发起人', dataIndex: 'starter', width: 80},
+                                   {
+                                       title: '状态', dataIndex: 'finished', width: 80,
+                                       render: (finished, record) => finished ? (
+                                           record.deleteReason ? (
+                                               <Tag color="error">已终止</Tag>
+                                           ) : (
+                                               <Tag color="success">已完成</Tag>
+                                           )
+                                       ) : (
+                                           <Tag color="processing">运行中</Tag>
+                                       ),
+                                   },
+                                   {title: '发起时间', dataIndex: 'startTime', width: 100},
+                                   {
+                                       title: '操作', width: 60,
+                                       render: (_, record) => (
+                                           <Button type="link" danger size="small"
+                                                   onClick={() => onDeleteHistory(record.instanceId)}>
+                                               删除
+                                           </Button>
+                                       ),
+                                   },
+                               ]}/>
+                    )
+                )}
+            </div>
+        );
+    }
+}

package/src/pages/flowable/simulate/InitPhase.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import {Button, Form, Input, Select, Splitter} from "antd";
+import {StringUtils} from "@jiangood/open-admin";
+import {PlayCircleOutlined} from "@ant-design/icons";
+import HistoryListPanel from "@/components/flowable/HistoryListPanel";
+
+export default class InitPhase extends React.Component {
+    render() {
+        const {model, users, submitting, historyList, historyLoading,
+               onStart, onLoadUsers, onViewHistory, onDeleteHistory} = this.props;
+
+        return (
+            <Splitter>
+                <Splitter.Panel defaultSize="55%">
+                    <Form onFinish={onStart} layout="vertical">
+                        <Form.Item name="key" noStyle initialValue={model.key}/>
+
+                        <Form.Item label="业务标识" name="id"
+                                   rules={[{required: true, message: '请输入业务标识'}]}
+                                   initialValue={StringUtils.random(16)}>
+                            <Input/>
+                        </Form.Item>
+
+                        <Form.Item label="发起人" name="initiatorId"
+                                   rules={[{required: true, message: '请选择发起人'}]}>
+                            <Select showSearch placeholder="搜索并选择用户"
+                                    filterOption={false}
+                                    onSearch={onLoadUsers}
+                                    options={users.map(u => ({label: u.name, value: u.id}))}
+                                    style={{width: 300}}/>
+                        </Form.Item>
+
+                        {model.variables?.map(item => (
+                            <Form.Item key={item.name} name={['variables', item.name]} label={item.label}>
+                                <Input/>
+                            </Form.Item>
+                        ))}
+
+                        <Form.Item>
+                            <Button type="primary" htmlType="submit" icon={<PlayCircleOutlined/>}
+                                    loading={submitting}>
+                                启动仿真
+                            </Button>
+                        </Form.Item>
+                    </Form>
+                </Splitter.Panel>
+                <Splitter.Panel defaultSize="45%">
+                    <HistoryListPanel list={historyList} loading={historyLoading}
+                                     onView={onViewHistory} onDelete={onDeleteHistory}/>
+                </Splitter.Panel>
+            </Splitter>
+        );
+    }
+}

package/src/pages/flowable/simulate/RunningPhase.jsx

@@ -0,0 +1,117 @@
+import React from "react";
+import {Button, Card, Empty, Input, Select, Space, Splitter, Table, Tag, Typography} from "antd";
+import {CheckCircleOutlined, CloseCircleOutlined} from "@ant-design/icons";
+import ProcessImageViewer from "@/components/ProcessImageViewer";
+
+export default class RunningPhase extends React.Component {
+    render() {
+        const {status, submitting, taskFormValues, users, onLoadUsers,
+               onAssigneeChange, onCommentChange, onTask} = this.props;
+        const {img, commentList, tasks, finished, deleteReason} = status;
+
+        return (
+            <Splitter>
+                <Splitter.Panel defaultSize="60%">
+                    <div style={{paddingRight: 16}}>
+                        <Typography.Title level={5}>流程图</Typography.Title>
+                        <ProcessImageViewer imageUrl={img}/>
+                        <div style={{marginTop: 16}}>
+                            <Typography.Title level={5}>处理记录</Typography.Title>
+                            <Table dataSource={commentList || []}
+                                   size="small" pagination={false} rowKey="time"
+                                   columns={[
+                                       {dataIndex: 'content', title: '操作'},
+                                       {dataIndex: 'user', title: '处理人', width: 120},
+                                       {dataIndex: 'time', title: '处理时间', width: 160},
+                                   ]}/>
+                        </div>
+                    </div>
+                </Splitter.Panel>
+                <Splitter.Panel defaultSize="40%">
+                    <div style={{paddingLeft: 16}}>
+                        <Space style={{marginBottom: 12}}>
+                            <Typography.Text strong>实例名称：</Typography.Text>
+                            <Typography.Text>{status.name}</Typography.Text>
+                        </Space>
+                        <br/>
+                        <Space style={{marginBottom: 12}}>
+                            <Typography.Text strong>业务标识：</Typography.Text>
+                            <Typography.Text>{status.businessKey}</Typography.Text>
+                        </Space>
+                        <br/>
+                        <Space style={{marginBottom: 12}}>
+                            <Typography.Text strong>发起人：</Typography.Text>
+                            <Typography.Text>{status.starter}</Typography.Text>
+                        </Space>
+                        <br/>
+                        <Space style={{marginBottom: 12}}>
+                            <Typography.Text strong>发起时间：</Typography.Text>
+                            <Typography.Text>{status.startTime}</Typography.Text>
+                        </Space>
+                        <br/>
+                        <Space style={{marginBottom: 16}}>
+                            <Typography.Text strong>状态：</Typography.Text>
+                            {finished ? (
+                                deleteReason ? (
+                                    <Tag icon={<CloseCircleOutlined/>} color="error">已终止</Tag>
+                                ) : (
+                                    <Tag icon={<CheckCircleOutlined/>} color="success">已完成</Tag>
+                                )
+                            ) : (
+                                <Tag color="processing">运行中</Tag>
+                            )}
+                        </Space>
+
+                        {finished && deleteReason && (
+                            <Card size="small" title="终止原因" style={{marginBottom: 16}}>
+                                <Typography.Text type="secondary">{deleteReason}</Typography.Text>
+                            </Card>
+                        )}
+
+                        {!finished && tasks?.map(task => (
+                            <Card key={task.taskId} size="small" title={task.taskName}
+                                  style={{marginBottom: 12}}>
+                                <Space direction="vertical" style={{width: '100%'}}>
+                                    <div>
+                                        <Typography.Text strong>处理人：</Typography.Text>
+                                        <Select showSearch placeholder="选择处理人"
+                                                value={(taskFormValues[task.taskId] || {}).assignee}
+                                                style={{width: '100%'}}
+                                                filterOption={false}
+                                                onSearch={onLoadUsers}
+                                                onChange={value => onAssigneeChange(task.taskId, value)}
+                                                options={users.map(u => ({label: u.name, value: u.id}))}/>
+                                    </div>
+                                    <div>
+                                        <Typography.Text strong>审批意见：</Typography.Text>
+                                        <Input.TextArea rows={2}
+                                                        value={(taskFormValues[task.taskId] || {}).comment}
+                                                        onChange={e => onCommentChange(task.taskId, e)}/>
+                                    </div>
+                                    <Space>
+                                        <Button type="primary"
+                                                icon={<CheckCircleOutlined/>}
+                                                loading={submitting}
+                                                onClick={() => onTask(task.taskId, 'APPROVE')}>
+                                            同意
+                                        </Button>
+                                        <Button danger
+                                                icon={<CloseCircleOutlined/>}
+                                                loading={submitting}
+                                                onClick={() => onTask(task.taskId, 'REJECT')}>
+                                            不同意
+                                        </Button>
+                                    </Space>
+                                </Space>
+                            </Card>
+                        ))}
+
+                        {!finished && (!tasks || tasks.length === 0) && (
+                            <Empty description="暂无活跃任务"/>
+                        )}
+                    </div>
+                </Splitter.Panel>
+            </Splitter>
+        );
+    }
+}