@jiangood/open-admin-flowable 2.0.1 → 2.1.0

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

@@ -1,7 +1,10 @@
 import React from "react";
-import {Button, Card, Empty, Form, Input, message, Modal, Select, Space, Spin, Splitter, Table, Tag, Typography} from "antd";
-import {HttpUtils, PageLoading, PageUtils, StringUtils} from "@jiangood/open-admin";
-import {CheckCircleOutlined, CloseCircleOutlined, HistoryOutlined, PlayCircleOutlined, ReloadOutlined} from "@ant-design/icons";
+import {Button, Card, message, Modal, Space, Spin} from "antd";
+import {HttpUtils, PageLoading, PageUtils} from "@jiangood/open-admin";
+import InitPhase from "./InitPhase";
+import RunningPhase from "./RunningPhase";
+import FinishedPhase from "./FinishedPhase";
+import {SIMULATE_GET, SIMULATE_USERS, SIMULATE_LIST, SIMULATE_START, SIMULATE_STATUS, SIMULATE_TASK_HANDLE, SIMULATE_DELETE} from "@/constants/api";
 
 const PHASE_INIT = 'init';
 const PHASE_RUNNING = 'running';
@@ -14,17 +17,14 @@ export default class extends React.Component {
     loading: false,
     submitting: false,
 
-    // init phase
     model: undefined,
     users: [],
     historyList: [],
     historyLoading: false,
 
-    // running / finished phase
     instanceId: null,
     status: null,
 
-    // task form values: { [taskId]: { assignee, comment } }
     taskFormValues: {},
   }
 
@@ -32,17 +32,15 @@ export default class extends React.Component {
     const params = PageUtils.currentParams();
     const id = this.id = params.id;
 
-    // 加载模型元数据
-    HttpUtils.get('admin/flowable/simulate/get', {id}).then(rs => {
+    HttpUtils.get(SIMULATE_GET, {id}).then(rs => {
       this.setState({model: rs}, this.loadHistory);
     });
 
-    // 加载用户列表
     this.loadUsers();
   }
 
   loadUsers = (searchText) => {
-    HttpUtils.get('admin/flowable/simulate/users', {searchText}).then(rs => {
+    HttpUtils.get(SIMULATE_USERS, {searchText}).then(rs => {
       this.setState({users: rs || []});
     });
   }
@@ -51,36 +49,32 @@ export default class extends React.Component {
     const {model} = this.state;
     if (!model?.key) return;
     this.setState({historyLoading: true});
-    HttpUtils.get('admin/flowable/simulate/list', {key: model.key}).then(rs => {
+    HttpUtils.get(SIMULATE_LIST, {key: model.key}).then(rs => {
       this.setState({historyList: rs || [], historyLoading: false});
-    }).catch(() => {
+    }).catch(e => {
+      message.error(e?.message || '加载历史记录失败');
       this.setState({historyLoading: false});
     });
   }
 
-  // ========== Init Phase ==========
-
   handleStart = values => {
     this.setState({submitting: true});
-    HttpUtils.post('admin/flowable/simulate/start', values).then(rs => {
-      const instanceId = rs.instanceId;
+    HttpUtils.post(SIMULATE_START, values).then(rs => {
       message.success('仿真流程已启动');
-      this.loadStatus(instanceId);
+      this.loadStatus(rs.instanceId);
     }).catch(e => {
-      message.error(e);
+      message.error(e?.message || '启动仿真失败');
       this.setState({submitting: false});
     });
   }
 
-  // ========== Running / Finished Phase ==========
-
   loadStatus = (instanceId) => {
     this.setState({loading: true, instanceId, phase: PHASE_RUNNING, taskFormValues: {}});
-    HttpUtils.get('admin/flowable/simulate/status', {instanceId}).then(rs => {
+    HttpUtils.get(SIMULATE_STATUS, {instanceId}).then(rs => {
       const phase = rs.finished ? PHASE_FINISHED : PHASE_RUNNING;
       this.setState({status: rs, phase, loading: false, submitting: false});
     }).catch(e => {
-      message.error(e);
+      message.error(e?.message || '获取状态失败');
       this.setState({loading: false, submitting: false});
     });
   }
@@ -115,7 +109,7 @@ export default class extends React.Component {
     }
 
     this.setState({submitting: true});
-    HttpUtils.post('admin/flowable/simulate/task/handle', {
+    HttpUtils.post(SIMULATE_TASK_HANDLE, {
       taskId,
       action,
       comment: formValue.comment || '',
@@ -124,7 +118,7 @@ export default class extends React.Component {
       message.success(action === 'APPROVE' ? '已同意' : '已拒绝');
       this.loadStatus(this.state.instanceId);
     }).catch(e => {
-      message.error(e);
+      message.error(e?.message || '操作失败');
       this.setState({submitting: false});
     });
   }
@@ -152,7 +146,7 @@ export default class extends React.Component {
       okType: 'danger',
       cancelText: '取消',
       onOk: () => {
-        HttpUtils.post('admin/flowable/simulate/delete', {instanceId}).then(() => {
+        HttpUtils.post(SIMULATE_DELETE, {instanceId}).then(() => {
           message.success('仿真记录已删除');
           this.loadHistory();
         });
@@ -160,18 +154,6 @@ export default class extends React.Component {
     });
   }
 
-  onImgClick = () => {
-    Modal.info({
-      title: '流程图',
-      width: '70vw',
-      content: <div style={{width: '100%', overflow: 'auto', maxHeight: '80vh'}}>
-        <img src={this.state.status?.img} style={{maxWidth: '100%'}}/>
-      </div>
-    });
-  }
-
-  // ========== Render ==========
-
   render() {
     const {model} = this.state;
 
@@ -179,222 +161,56 @@ export default class extends React.Component {
       return <PageLoading/>;
     }
 
-    const {phase, loading, submitting, status} = this.state;
+    const {phase, loading, submitting, status, users, historyList, historyLoading, taskFormValues} = this.state;
 
     return (
       <Card title={'流程仿真 / 【' + model.name + '】 / ' + model.key}
             extra={phase === PHASE_FINISHED ? (
               <Space>
-                <Button icon={<HistoryOutlined/>} onClick={this.handleReset}>历史记录</Button>
-                <Button icon={<ReloadOutlined/>} onClick={this.handleReset}>重新仿真</Button>
+                <Button onClick={this.handleReset}>重新仿真</Button>
               </Space>
             ) : null}>
-        {phase === PHASE_INIT && this.renderInitPhase()}
-        {phase !== PHASE_INIT && (
+        {phase === PHASE_INIT && (
+          <InitPhase
+            model={model}
+            users={users}
+            submitting={submitting}
+            historyList={historyList}
+            historyLoading={historyLoading}
+            onStart={this.handleStart}
+            onLoadUsers={this.loadUsers}
+            onViewHistory={this.handleViewHistory}
+            onDeleteHistory={this.handleDeleteHistory}
+          />
+        )}
+        {phase === PHASE_RUNNING && (
+          loading ? <Spin style={{display: 'block', margin: '80px auto'}}/> :
+            status ? (
+              <RunningPhase
+                status={status}
+                submitting={submitting}
+                taskFormValues={taskFormValues}
+                users={users}
+                onLoadUsers={this.loadUsers}
+                onAssigneeChange={this.handleAssigneeChange}
+                onCommentChange={this.handleCommentChange}
+                onTask={this.handleTask}
+              />
+            ) : null
+        )}
+        {phase === PHASE_FINISHED && (
           loading ? <Spin style={{display: 'block', margin: '80px auto'}}/> :
-            status ? this.renderRunningPhase() : null
+            status ? (
+              <FinishedPhase
+                historyList={historyList}
+                historyLoading={historyLoading}
+                onReset={this.handleReset}
+                onViewHistory={this.handleViewHistory}
+                onDeleteHistory={this.handleDeleteHistory}
+              />
+            ) : null
         )}
       </Card>
     );
   }
-
-  renderInitPhase = () => {
-    const {model, users, submitting, historyList, historyLoading} = this.state;
-    return (
-      <Splitter>
-        <Splitter.Panel defaultSize="55%">
-          <Form onFinish={this.handleStart} 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={this.loadUsers}
-                      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%">
-          {this.renderHistoryList(historyList, historyLoading)}
-        </Splitter.Panel>
-      </Splitter>
-    );
-  }
-
-  renderHistoryList = (list, loading) => (
-    <div style={{paddingLeft: 16}}>
-      <Typography.Title level={5}>
-        <HistoryOutlined/> 仿真历史
-      </Typography.Title>
-      {loading ? <Spin/> : list.length === 0 ? (
-        <Empty description="暂无仿真记录" image={Empty.PRESENTED_IMAGE_SIMPLE}/>
-      ) : (
-        <Table dataSource={list}
-               size="small" pagination={false} rowKey="instanceId"
-               columns={[
-                 {
-                   title: '实例', dataIndex: 'name', ellipsis: true,
-                   render: (text, record) => (
-                     <a onClick={() => this.handleViewHistory(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={() => this.handleDeleteHistory(record.instanceId)}>
-                       删除
-                     </Button>
-                   ),
-                 },
-               ]}/>
-      )}
-    </div>
-  );
-
-  renderRunningPhase = () => {
-    const {status, submitting, taskFormValues, users} = this.state;
-    const {img, commentList, tasks, finished, deleteReason} = status;
-
-    return (
-      <Splitter>
-        <Splitter.Panel defaultSize="60%">
-          <div style={{paddingRight: 16}}>
-            <Typography.Title level={5}>流程图</Typography.Title>
-            <img src={img} style={{maxWidth: '100%', cursor: 'pointer'}}
-                 onClick={this.onImgClick}/>
-            <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={this.loadUsers}
-                            onChange={value => this.handleAssigneeChange(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 => this.handleCommentChange(task.taskId, e)}/>
-                  </div>
-                  <Space>
-                    <Button type="primary"
-                            icon={<CheckCircleOutlined/>}
-                            loading={submitting}
-                            onClick={() => this.handleTask(task.taskId, 'APPROVE')}>
-                      同意
-                    </Button>
-                    <Button danger
-                            icon={<CloseCircleOutlined/>}
-                            loading={submitting}
-                            onClick={() => this.handleTask(task.taskId, 'REJECT')}>
-                      不同意
-                    </Button>
-                  </Space>
-                </Space>
-              </Card>
-            ))}
-
-            {!finished && (!tasks || tasks.length === 0) && (
-              <Empty description="暂无活跃任务"/>
-            )}
-          </div>
-        </Splitter.Panel>
-      </Splitter>
-    );
-  }
 }

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

@@ -1,8 +1,8 @@
 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 {Button, Card, Empty, Form, Input, message, Radio, Spin, Splitter, Table, Typography} from "antd";
+import ProcessImageViewer from "@/components/ProcessImageViewer";
 import {FormRegistryUtils, Gap, HttpUtils, Page, PageUtils} from "@jiangood/open-admin";
-import {FormOutlined, ShareAltOutlined} from "@ant-design/icons";
+import {USER_TASK_GET_INSTANCE_INFO_BY_TASK_ID, USER_TASK_HANDLE_TASK} from "@/constants/api";
 
 export default class extends React.Component {
 
@@ -31,9 +31,10 @@ export default class extends React.Component {
         const {taskId} = PageUtils.currentParams()
 
 
-        HttpUtils.get("admin/flowable/user-task/getInstanceInfoByTaskId", {taskId}).then(rs => {
+        HttpUtils.get(USER_TASK_GET_INSTANCE_INFO_BY_TASK_ID, {taskId}).then(rs => {
             this.setState({data: rs})
         }).catch(e => {
+            message.error(e?.message || '获取任务信息失败');
             this.setState({errorMsg: e})
         }).finally(() => {
             this.setState({loading: false})
@@ -42,16 +43,6 @@ export default class extends React.Component {
 
     }
 
-    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});
@@ -60,11 +51,11 @@ export default class extends React.Component {
                 value.formData = this.state.formData
             }
             value.taskId = this.state.data.taskId
-            await HttpUtils.post("admin/flowable/user-task/handleTask", value)
+            await HttpUtils.post(USER_TASK_HANDLE_TASK, value)
 
             PageUtils.closeCurrent()
         } catch (error) {
-            message.error(error)
+            message.error(error?.message || '操作失败')
         } finally {
             this.setState({submitLoading: false})
         }
@@ -86,25 +77,9 @@ export default class extends React.Component {
                     <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>
+                    {this.renderForm()}
                 </Splitter.Panel>
-                <Splitter.Panel defaultSize={400}>
+                <Splitter.Panel>
                     <Card title='审批意见'>
                         <Form
                             layout='vertical'
@@ -129,6 +104,8 @@ export default class extends React.Component {
                             </div>
                         </Form>
                     </Card>
+                    <Gap></Gap>
+                    {this.renderProcess(img, commentList)}
                 </Splitter.Panel>
 
             </Splitter>
@@ -140,8 +117,7 @@ export default class extends React.Component {
     }
 
     renderProcess = (img, commentList) => <Card title='处理记录'>
-        <img src={img} style={{maxWidth: '100%'}}
-             onClick={this.onImgClick}/>
+        <ProcessImageViewer imageUrl={img}/>
         <Gap></Gap>
         <Table dataSource={commentList}