@jiangood/open-admin-flowable 2.0.2 → 2.1.0

package/package.json

@@ -1,38 +1,38 @@
 {
   "devDependencies": {
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.0.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@types/react-lazylog": "^4.5.1",
-    "@umijs/plugins": "^4.3.17",
+    "@umijs/plugins": "^4.6.63",
     "@umijs/types": "^3.5.43",
-    "typescript": "^5.0.0"
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "@ant-design/icons": "^6.0.0",
-    "@jiangood/open-admin": "^2.2.6",
-    "@tinymce/tinymce-react": "^6.0.0",
-    "antd": "^6.0.0",
-    "antd-img-crop": "^4.23.0",
-    "axios": "^1.13.2",
-    "bpmn-js": "^18.16.1",
-    "dayjs": "^1.11.13",
-    "jsencrypt": "^3.5.4",
-    "lodash": "^4.17.21",
-    "qs": "^6.14.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "umi": "^4.0.0"
+    "@ant-design/icons": "^6.2.5",
+    "@jiangood/open-admin": "^2.4.1",
+    "@tinymce/tinymce-react": "^6.3.0",
+    "antd": "^6.4.4",
+    "antd-img-crop": "^4.30.0",
+    "axios": "^1.18.0",
+    "bpmn-js": "^18.17.1",
+    "dayjs": "^1.11.21",
+    "lodash": "^4.18.1",
+    "qs": "^6.15.2",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "umi": "^4.6.61"
   },
   "name": "@jiangood/open-admin-flowable",
   "files": [
     "src/*",
     "!src/.umi",
     "!src/layout",
-    "!src/forms"
+    "!src/forms",
+    "!src/pages/example"
   ],
   "main": "src/index.ts",
   "scripts": {
     "dev": "umi dev"
   },
-  "version": "2.0.2"
+  "version": "2.1.0"
 }

package/src/components/InstanceView.jsx

@@ -0,0 +1,86 @@
+import React from "react";
+import {Gap, HttpUtils, Page, PageUtils, ProTable} from "@jiangood/open-admin";
+import {Card, Empty, Skeleton, Table} from "antd";
+import {USER_TASK_GET_INSTANCE_INFO, MONITOR_INSTANCE_VARS} from "@/constants/api";
+
+export default class extends React.Component {
+    state = {
+        commentList: [],
+        vars: {},
+        id: null,
+        starter: null,
+        startTime: null,
+        name: null,
+        img: null,
+        loading: true,
+        errorMsg: null,
+    }
+
+    componentDidMount() {
+        const params = PageUtils.currentParams();
+        const { id, businessKey } = params;
+
+        const reqParams = {id};
+        if (businessKey) reqParams.businessKey = businessKey;
+        HttpUtils.get(USER_TASK_GET_INSTANCE_INFO, reqParams).then(rs => {
+            this.setState(rs)
+            this.setState({
+                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}></Empty>
+        }
+
+        const {commentList, img, loading, id} = this.state
+        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={this.getCommentColumns()}
+                    />
+                </Card>
+                <Gap/>
+                {this.props.showVariables && (
+                    <Card title='流程变量'>
+                        <ProTable columns={[
+                            {dataIndex: 'key', title: '变量名'},
+                            {dataIndex: 'value', title: '变量值'},
+                        ]}
+                                  rowKey='key'
+                                  request={() => HttpUtils.get(MONITOR_INSTANCE_VARS, {id})}
+                        />
+                    </Card>
+                )}
+            </Page>
+        )
+    }
+}

package/src/components/ProcessImageViewer.jsx

@@ -0,0 +1,21 @@
+import { Modal } from "antd";
+
+export default function ProcessImageViewer({ imageUrl }) {
+  const show = () => {
+    Modal.info({
+      title: '流程图',
+      width: '70vw',
+      content: (
+        <div style={{ width: '100%', overflow: 'auto', maxHeight: '80vh' }}>
+          <img src={imageUrl} style={{ maxWidth: '100%' }} />
+        </div>
+      ),
+    });
+  };
+
+  return (
+    <div onClick={show} style={{ cursor: 'pointer', border: '1px solid #d9d9d9', borderRadius: 8, padding: 8, background: '#fafafa' }}>
+      <img src={imageUrl} style={{ maxWidth: '100%', maxHeight: 200, display: 'block', margin: '0 auto' }} />
+    </div>
+  );
+}

package/src/components/flowable/HistoryListPanel.jsx

@@ -0,0 +1,49 @@
+import {Button, Empty, Spin, Table, Tag, Typography} from "antd";
+import {HistoryOutlined} from "@ant-design/icons";
+
+export default function HistoryListPanel({list, loading, onView, onDelete}) {
+    return (
+        <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={() => onView(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={() => onDelete(record.instanceId)}>
+                                       删除
+                                   </Button>
+                               ),
+                           },
+                       ]}/>
+            )}
+        </div>
+    );
+}

package/src/components/flowable/done-table.jsx

@@ -0,0 +1,31 @@
+import {Button} from "antd";
+import {HttpUtils, PageUtils, ProTable} from "@jiangood/open-admin";
+import React from "react";
+import {USER_TASK_DONE_PAGE} from "@/constants/api";
+import {ROUTE_USER_INSTANCE_VIEW} from "@/constants/routes";
+
+const 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(ROUTE_USER_INSTANCE_VIEW + '?id=' + record.instanceId, '流程信息')}>查看</Button>
+        ),
+    },
+];
+
+export default function DoneTable() {
+    return <ProTable
+        showToolbarSearch={false}
+        request={(params) => HttpUtils.get(USER_TASK_DONE_PAGE, params)}
+        columns={columns}
+        size='small'
+    />;
+}

package/src/components/flowable/my-table.jsx

@@ -0,0 +1,34 @@
+import {Button} from "antd";
+import {HttpUtils, PageUtils, ProTable} from "@jiangood/open-admin";
+import React from "react";
+import {USER_TASK_MY_INSTANCE} from "@/constants/api";
+import {ROUTE_USER_INSTANCE_VIEW} from "@/constants/routes";
+
+const 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(ROUTE_USER_INSTANCE_VIEW + '?id=' + record.id, '流程信息')}>查看</Button>
+        ),
+    },
+];
+
+export default function MyTable() {
+    return <ProTable
+        request={(params) => HttpUtils.get(USER_TASK_MY_INSTANCE, params)}
+        columns={columns}
+    />;
+}

package/src/components/flowable/todo-table.jsx

@@ -0,0 +1,28 @@
+import {HttpUtils, LinkButton, ProTable} from "@jiangood/open-admin";
+import React from "react";
+import {USER_TASK_TODO_PAGE} from "@/constants/api";
+
+const 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/user-task/form?taskId=' + record.id;
+            return <LinkButton type='primary' path={path} label='处理任务'>处理</LinkButton>;
+        },
+    },
+];
+
+export default function TodoTable() {
+    return <ProTable
+        showToolbarSearch={false}
+        request={(params) => HttpUtils.get(USER_TASK_TODO_PAGE, params)}
+        columns={columns}
+        size='small'
+    />;
+}

package/src/constants/api.js

@@ -0,0 +1,39 @@
+export const MODEL_PAGE = 'admin/flowable/model/page'
+export const MODEL_DETAIL = 'admin/flowable/model/detail'
+export const MODEL_SAVE_CONTENT = 'admin/flowable/model/saveContent'
+export const MODEL_DEPLOY = 'admin/flowable/model/deploy'
+export const MODEL_DELETE = 'admin/flowable/model/delete'
+export const MODEL_GET_DEFINITION_CONTENT = 'admin/flowable/model/getDefinitionContent'
+export const MODEL_DEFINITION_PAGE = 'admin/flowable/model/definitionPage'
+export const MODEL_FORM_OPTIONS = 'admin/flowable/model/formOptions'
+export const MODEL_JAVA_DELEGATE_OPTIONS = 'admin/flowable/model/javaDelegateOptions'
+export const MODEL_VAR_LIST = 'admin/flowable/model/varList'
+export const MODEL_ASSIGNEE_OPTIONS = 'admin/flowable/model/assigneeOptions'
+export const MODEL_CANDIDATE_GROUPS_OPTIONS = 'admin/flowable/model/candidateGroupsOptions'
+export const MODEL_CANDIDATE_USERS_OPTIONS = 'admin/flowable/model/candidateUsersOptions'
+
+export const SIMULATE_GET = 'admin/flowable/simulate/get'
+export const SIMULATE_USERS = 'admin/flowable/simulate/users'
+export const SIMULATE_LIST = 'admin/flowable/simulate/list'
+export const SIMULATE_START = 'admin/flowable/simulate/start'
+export const SIMULATE_STATUS = 'admin/flowable/simulate/status'
+export const SIMULATE_TASK_HANDLE = 'admin/flowable/simulate/task/handle'
+export const SIMULATE_DELETE = 'admin/flowable/simulate/delete'
+
+export const USER_TASK_TODO_PAGE = 'admin/flowable/user-task/todoTaskPage'
+export const USER_TASK_DONE_PAGE = 'admin/flowable/user-task/doneTaskPage'
+export const USER_TASK_MY_INSTANCE = 'admin/flowable/user-task/myInstance'
+export const USER_TASK_GET_INSTANCE_INFO = 'admin/flowable/user-task/getInstanceInfo'
+export const USER_TASK_GET_INSTANCE_INFO_BY_TASK_ID = 'admin/flowable/user-task/getInstanceInfoByTaskId'
+export const USER_TASK_HANDLE_TASK = 'admin/flowable/user-task/handleTask'
+
+export const MONITOR_PROCESS_INSTANCE_CLOSE = 'admin/flowable/monitor/processInstance/close'
+export const MONITOR_INSTANCE_PAGE = 'admin/flowable/monitor/instancePage'
+export const MONITOR_SET_ASSIGNEE = 'admin/flowable/monitor/setAssignee'
+export const MONITOR_TASK = 'admin/flowable/monitor/task'
+export const MONITOR_DEFINITION_PAGE = 'admin/flowable/monitor/definitionPage'
+export const MONITOR_INSTANCE_VARS = 'admin/flowable/monitor/instance/vars'
+
+export const EXAMPLE_LEAVE_LIST = 'admin/flowable/example/leave/list'
+export const EXAMPLE_LEAVE_DETAIL = 'admin/flowable/example/leave/detail'
+export const EXAMPLE_LEAVE_START = 'admin/flowable/example/leave/start'

package/src/constants/routes.js

@@ -0,0 +1,8 @@
+export const ROUTE_DESIGN = '/flowable/design'
+export const ROUTE_SIMULATE = '/flowable/simulate'
+export const ROUTE_TASK_FORM = '/flowable/user-task/form'
+export const ROUTE_USER_INSTANCE_VIEW = '/flowable/user-task/instance/view'
+export const ROUTE_MONITOR_TASK = '/flowable/monitor/task'
+export const ROUTE_MONITOR_INSTANCE = '/flowable/monitor/instance'
+export const ROUTE_MONITOR_DEFINITION = '/flowable/monitor/definition'
+export const ROUTE_MONITOR_INSTANCE_VIEW = '/flowable/monitor/instance/view'

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { createRef } from "react";
 import {Button, Card, message, Modal, Space, Splitter} from "antd";
 
 import 'bpmn-js/dist/assets/diagram-js.css'
@@ -8,8 +8,10 @@ import BpmnModeler from 'bpmn-js/lib/Modeler'
 import './index.css'
 import customTranslate from "./customTranslate/customTranslate";
 import contextPad from "./contextPad";
-import {CloudUploadOutlined, SaveOutlined} from "@ant-design/icons";
+import {CloudUploadOutlined, DownloadOutlined, SaveOutlined, UploadOutlined} from "@ant-design/icons";
 import {HttpUtils, PageLoading, PageUtils, ProTable} from "@jiangood/open-admin";
+import {MODEL_DETAIL, MODEL_SAVE_CONTENT, MODEL_DEPLOY, MODEL_GET_DEFINITION_CONTENT, MODEL_DEFINITION_PAGE} from "@/constants/api";
+import {ROUTE_SIMULATE} from "@/constants/routes";
 import 'bpmn-js/dist/assets/bpmn-js.css';
 import flowableJson from './descriptors/flowable';
 import PropertiesPanel from './PropertiesPanel';
@@ -25,11 +27,12 @@ export default class extends React.Component {
     }
 
     bpmRef = React.createRef()
+    fileRef = createRef()
 
 
     async componentDidMount() {
         const params = PageUtils.currentParams()
-        const rs = await HttpUtils.get('admin/flowable/model/detail', {id: params.id})
+        const rs = await HttpUtils.get(MODEL_DETAIL, {id: params.id})
         this.setState({model: rs, id: params.id}, this.initBpmn)
     }
 
@@ -56,10 +59,30 @@ export default class extends React.Component {
     };
 
 
-    showXML = () => {
-        this.bpmnModeler.saveXML({format: true}).then(res => {
-            Modal.info({content: <pre style={{overflowX: "auto", height: '64vh'}}>{res.xml}</pre>, width: 1024})
-        })
+    handleExportXML = async () => {
+        const res = await this.bpmnModeler.saveXML({format: true});
+        const blob = new Blob([res.xml], {type: 'application/xml'});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${this.state.model.key}.bpmn20.xml`;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+
+    handleImportXML = () => {
+        this.fileRef.current.click();
+    }
+
+    handleFileChange = (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = (evt) => {
+            this.bpmnModeler.importXML(evt.target.result);
+        };
+        reader.readAsText(file);
+        e.target.value = '';
     }
 
 
@@ -68,7 +91,7 @@ export default class extends React.Component {
         const hide = message.loading('正在保存...', 0)
         try {
             const res = await this.bpmnModeler.saveXML();
-            await HttpUtils.post('admin/flowable/model/saveContent', {id, content: res.xml});
+            await HttpUtils.post(MODEL_SAVE_CONTENT, {id, content: res.xml});
         } finally {
             hide()
         }
@@ -79,7 +102,7 @@ export default class extends React.Component {
         const hide = message.loading('正在部署...', 0)
         try {
             const res = await this.bpmnModeler.saveXML();
-            await HttpUtils.post('admin/flowable/model/deploy', {id, content: res.xml});
+            await HttpUtils.post(MODEL_DEPLOY, {id, content: res.xml});
         } finally {
             hide()
         }
@@ -95,9 +118,10 @@ export default class extends React.Component {
                          <Button type='primary' icon={<SaveOutlined/>} onClick={this.handleSave}>暂存</Button>
                          <Button type='primary' danger icon={<CloudUploadOutlined/>}
                                  onClick={this.handleDeploy}>部署</Button>
-                         <Button onClick={this.showXML}>XML</Button>
+                         <Button icon={<DownloadOutlined/>} onClick={this.handleExportXML}>导出XML</Button>
+                         <Button icon={<UploadOutlined/>} onClick={this.handleImportXML}>导入XML</Button>
                          <Button
-                             onClick={() => PageUtils.open('/flowable/simulate?id=' + this.state.id, "流程仿真")}> 仿真 </Button>
+                             onClick={() => PageUtils.open(ROUTE_SIMULATE + '?id=' + this.state.id, "流程仿真")}> 仿真 </Button>
 
                          <Button title='查看已部署的历史版本' onClick={() => {
                              this.setState({deployedModal: true})
@@ -115,6 +139,7 @@ export default class extends React.Component {
                 </Splitter.Panel>
             </Splitter>
 
+            <input ref={this.fileRef} type="file" accept=".xml" style={{display: 'none'}} onChange={this.handleFileChange}/>
 
             <Modal title='已部署版本' width={800} footer={null}
                    open={this.state.deployedModal}
@@ -139,7 +164,7 @@ export default class extends React.Component {
                             dataIndex:'id',
                             render:(_, record)=> {
                                 return <Button type='primary' onClick={()=>{
-                                    HttpUtils.get('admin/flowable/model/getDefinitionContent',{id: record.id}).then(xml=>{
+                                    HttpUtils.get(MODEL_GET_DEFINITION_CONTENT,{id: record.id}).then(xml=>{
                                         this.bpmnModeler.importXML(xml)
                                         this.setState({deployedModal:false})
                                     })
@@ -149,7 +174,7 @@ export default class extends React.Component {
                     ]}
                     request={params => {
                         params.key = this.state.model.key
-                        return HttpUtils.get('admin/flowable/model/definitionPage', params)
+                        return HttpUtils.get(MODEL_DEFINITION_PAGE, params)
                     }}>
 
                 </ProTable>

package/src/pages/flowable/design/provider/properties/AssignmentSection.jsx

@@ -1,6 +1,7 @@
 import {Form, Radio} from "antd";
 import {FieldRemoteSelect, FieldRemoteSelectMultipleInline, StringUtils} from "@jiangood/open-admin";
 import React from "react";
+import {MODEL_ASSIGNEE_OPTIONS, MODEL_CANDIDATE_GROUPS_OPTIONS, MODEL_CANDIDATE_USERS_OPTIONS} from "@/constants/api";
 
 export default function AssignmentSection(props) {
     const {element, modeling} = props
@@ -56,17 +57,17 @@ export default function AssignmentSection(props) {
               }}>
             {mode === 'assignee' && (
                 <Form.Item label="办理人" name='assignee'>
-                    <FieldRemoteSelect url='admin/flowable/model/assigneeOptions'/>
+                    <FieldRemoteSelect url={MODEL_ASSIGNEE_OPTIONS}/>
                 </Form.Item>
             )}
             {mode === 'candidateGroups' && (
                 <Form.Item label="候选组" name='candidateGroups'>
-                    <FieldRemoteSelect url='admin/flowable/model/candidateGroupsOptions'/>
+                    <FieldRemoteSelect url={MODEL_CANDIDATE_GROUPS_OPTIONS}/>
                 </Form.Item>
             )}
             {mode === 'candidateUsers' && (
                 <Form.Item label="候选人" name='candidateUsers'>
-                    <FieldRemoteSelectMultipleInline url='admin/flowable/model/candidateUsersOptions'/>
+                    <FieldRemoteSelectMultipleInline url={MODEL_CANDIDATE_USERS_OPTIONS}/>
                 </Form.Item>
             )}
         </Form>

package/src/pages/flowable/design/provider/properties/ConditionDesign.jsx

@@ -1,6 +1,7 @@
 import {Button, Input, InputNumber, Modal, Select} from "antd";
 import {Component} from "react";
 import {FieldBoolean, FieldTable, HttpUtils, ObjectUtils, StringUtils, ThemeUtils} from "@jiangood/open-admin";
+import {MODEL_VAR_LIST} from "@/constants/api";
 import {ConditionExpressionUtils} from "./ConditionExpressionUtils";
 
 
@@ -132,9 +133,7 @@ export class ConditionDesignButton extends Component {
 
     componentDidMount() {
         const {processId} = this.props;
-        console.log('流程id', processId)
-
-        HttpUtils.get('admin/flowable/model/varList', {code: processId}).then(rs => {
+        HttpUtils.get(MODEL_VAR_LIST, {code: processId}).then(rs => {
             const options = rs.map(r => {
                 return {
                     label: r.label,

package/src/pages/flowable/design/provider/properties/DelegateExpressionProps.jsx

@@ -1,12 +1,13 @@
 import {Select} from 'antd';
 import {useEffect, useState} from 'react';
 import {HttpUtils} from "@jiangood/open-admin";
+import {MODEL_JAVA_DELEGATE_OPTIONS} from "@/constants/api";
 
 export default function DelegateExpressionField({element, modeling}) {
     const [options, setOptions] = useState([]);
 
     useEffect(() => {
-        HttpUtils.get('admin/flowable/model/javaDelegateOptions').then(rs => {
+        HttpUtils.get(MODEL_JAVA_DELEGATE_OPTIONS).then(rs => {
             setOptions((rs || []).map(o => typeof o === 'string' ? {label: o, value: o} : o));
         });
     }, []);

package/src/pages/flowable/design/provider/properties/FormProps.jsx

@@ -1,12 +1,13 @@
 import {Select} from 'antd';
 import {useEffect, useState} from 'react';
 import {HttpUtils} from "@jiangood/open-admin";
+import {MODEL_FORM_OPTIONS} from "@/constants/api";
 
 export default function FormField({element, modeling, processId}) {
     const [options, setOptions] = useState([]);
 
     useEffect(() => {
-        HttpUtils.get('admin/flowable/model/formOptions', {code: processId}).then(rs => {
+        HttpUtils.get(MODEL_FORM_OPTIONS, {code: processId}).then(rs => {
             setOptions((rs || []).map(o => typeof o === 'string' ? {label: o, value: o} : o));
         });
     }, [processId]);

package/src/pages/flowable/index.jsx

@@ -1,6 +1,8 @@
 import {Button, Popconfirm, Space} from 'antd';
 import React from 'react';
 import {ButtonList, HttpUtils, Page, PageUtils, ProTable} from "@jiangood/open-admin";
+import {MODEL_PAGE, MODEL_DELETE} from "@/constants/api";
+import {ROUTE_DESIGN, ROUTE_MONITOR_TASK, ROUTE_MONITOR_INSTANCE, ROUTE_MONITOR_DEFINITION} from "@/constants/routes";
 
 export default class extends React.Component {
 
@@ -35,7 +37,7 @@ export default class extends React.Component {
             render: (_, record) => (
                 <Space>
                     <Button size='small' type='primary'
-                            onClick={() => PageUtils.open('/flowable/design?id=' + record.id, '流程设计' + record.name)}> 设计 </Button>
+                            onClick={() => PageUtils.open(ROUTE_DESIGN + '?id=' + record.id, '流程设计' + record.name)}> 设计 </Button>
                     <Popconfirm perm='flowable/model:delete' title={'是否确定删除流程模型'}
                                 onConfirm={() => this.handleDelete(record)}>
                         <Button size='small' danger>删除</Button>
@@ -47,7 +49,7 @@ export default class extends React.Component {
 
 
     handleDelete = row => {
-        HttpUtils.post('admin/flowable/model/delete', {id: row.id}).then(rs => {
+        HttpUtils.post(MODEL_DELETE, {id: row.id}).then(rs => {
             this.actionRef.current.reload();
         })
     }
@@ -58,18 +60,18 @@ export default class extends React.Component {
         return <Page padding>
             <ProTable
                 actionRef={this.actionRef}
-                request={(params) => HttpUtils.get('admin/flowable/model/page', params)}
+                request={(params) => HttpUtils.get(MODEL_PAGE, params)}
                 columns={this.columns}
                 showToolbarSearch={true}
                 toolBarRender={() => {
                     return <ButtonList>
-                        <Button onClick={() => PageUtils.open('/flowable/monitor/task', "运行中的任务")}>
+                        <Button onClick={() => PageUtils.open(ROUTE_MONITOR_TASK, "运行中的任务")}>
                             运行中的任务
                         </Button>
-                        <Button onClick={() => PageUtils.open('/flowable/monitor/instance', "运行中的流程实例")}>
+                        <Button onClick={() => PageUtils.open(ROUTE_MONITOR_INSTANCE, "运行中的流程实例")}>
                             运行中的流程实例
                         </Button>
-                        <Button onClick={() => PageUtils.open('/flowable/monitor/definition', "已部署的流程定义")}>
+                        <Button onClick={() => PageUtils.open(ROUTE_MONITOR_DEFINITION, "已部署的流程定义")}>
                             已部署的流程定义
                         </Button>
                     </ButtonList>
@@ -84,4 +86,3 @@ export default class extends React.Component {
 }
 
 
-

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

@@ -1,5 +1,6 @@
 import React from "react";
 import {HttpUtils, ProTable} from "@jiangood/open-admin";
+import {MONITOR_DEFINITION_PAGE} from "@/constants/api";
 
 export default class extends React.Component {
 
@@ -79,7 +80,7 @@ export default class extends React.Component {
         return <ProTable
             search={false}
             columns={this.columns}
-            request={(params) => HttpUtils.get('admin/flowable/monitor/definitionPage', params)}
+            request={(params) => HttpUtils.get(MONITOR_DEFINITION_PAGE, params)}
         >
 
         </ProTable>