@jiangood/open-admin-flowable 2.0.0

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

@@ -0,0 +1,28 @@
+import {Select} from 'antd';
+import {useEffect, useState} from 'react';
+import {HttpUtils} from "@jiangood/open-admin";
+
+export default function FormField({element, modeling, processId}) {
+    const [options, setOptions] = useState([]);
+
+    useEffect(() => {
+        HttpUtils.get('admin/flowable/model/formOptions', {code: processId}).then(rs => {
+            setOptions((rs || []).map(o => typeof o === 'string' ? {label: o, value: o} : o));
+        });
+    }, [processId]);
+
+    const value = element.businessObject?.formKey || '';
+
+    return (
+        <div style={{padding: 8}}>
+            <div style={{marginBottom: 4, fontSize: 12, color: '#666'}}>选择表单</div>
+            <Select
+                style={{width: '100%'}}
+                value={value || undefined}
+                options={[{value: '', label: '<留空>'}, ...options]}
+                onChange={(val) => modeling.updateProperties(element, {formKey: val || ''})}
+                allowClear
+            />
+        </div>
+    );
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import {Form, Input} from 'antd';
+
+export default function GeneralSection({element, modeling}) {
+    return (
+        <Form
+            layout="vertical"
+            initialValues={{name: element.businessObject?.name || ''}}
+            onValuesChange={(changedValues) => {
+                modeling.updateProperties(element, changedValues);
+            }}
+        >
+            <Form.Item label="ID">
+                <Input value={element.id} disabled variant="borderless"/>
+            </Form.Item>
+            <Form.Item label="名称" name="name">
+                <Input placeholder="元素名称"/>
+            </Form.Item>
+        </Form>
+    );
+}

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

@@ -0,0 +1,37 @@
+import {getBusinessObject, is} from 'bpmn-js/lib/util/ModelUtil';
+import {Form, Input} from 'antd';
+
+function getLoopCharacteristics(element) {
+    const bo = getBusinessObject(element);
+    return bo.loopCharacteristics;
+}
+
+export default function MultiInstanceSection({element, modeling}) {
+    const loopCharacteristics = getLoopCharacteristics(element);
+
+    if (!loopCharacteristics || !is(loopCharacteristics, 'bpmn:MultiInstanceLoopCharacteristics')) {
+        return [];
+    }
+
+    const initialValues = {
+        collection: loopCharacteristics.get('collection') || '',
+        elementVariable: loopCharacteristics.get('elementVariable') || '',
+    };
+
+    return (
+        <Form
+            layout="vertical"
+            initialValues={initialValues}
+            onValuesChange={(changedValues) => {
+                modeling.updateModdleProperties(element, loopCharacteristics, changedValues);
+            }}
+        >
+            <Form.Item label="集合" name="collection">
+                <Input placeholder="如 userList"/>
+            </Form.Item>
+            <Form.Item label="元素变量" name="elementVariable">
+                <Input placeholder="如 user"/>
+            </Form.Item>
+        </Form>
+    );
+}

package/src/pages/flowable/index.jsx

@@ -0,0 +1,87 @@
+import {Button, Popconfirm, Space} from 'antd';
+import React from 'react';
+import {ButtonList, HttpUtils, Page, PageUtils, ProTable} from "@jiangood/open-admin";
+
+export default class extends React.Component {
+
+
+    actionRef = React.createRef();
+
+
+    columns = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+        },
+        {
+            title: '代码',
+            dataIndex: 'key'
+        },
+
+
+        {
+            title: '版本',
+            dataIndex: 'version',
+        },
+        {
+            title: '更新时间',
+            dataIndex: 'lastUpdateTime',
+        },
+
+
+        {
+            title: '操作',
+            dataIndex: 'option',
+            render: (_, record) => (
+                <Space>
+                    <Button size='small' type='primary'
+                            onClick={() => PageUtils.open('/flowable/design?id=' + record.id, '流程设计' + record.name)}> 设计 </Button>
+                    <Popconfirm perm='flowable/model:delete' title={'是否确定删除流程模型'}
+                                onConfirm={() => this.handleDelete(record)}>
+                        <Button size='small' danger>删除</Button>
+                    </Popconfirm>
+                </Space>
+            ),
+        },
+    ];
+
+
+    handleDelete = row => {
+        HttpUtils.post('admin/flowable/model/delete', {id: row.id}).then(rs => {
+            this.actionRef.current.reload();
+        })
+    }
+
+
+    render() {
+
+        return <Page padding>
+            <ProTable
+                actionRef={this.actionRef}
+                request={(params) => HttpUtils.get('admin/flowable/model/page', params)}
+                columns={this.columns}
+                showToolbarSearch={true}
+                toolBarRender={() => {
+                    return <ButtonList>
+                        <Button onClick={() => PageUtils.open('/flowable/monitor/task', "运行中的任务")}>
+                            运行中的任务
+                        </Button>
+                        <Button onClick={() => PageUtils.open('/flowable/monitor/instance', "运行中的流程实例")}>
+                            运行中的流程实例
+                        </Button>
+                        <Button onClick={() => PageUtils.open('/flowable/monitor/definition', "已部署的流程定义")}>
+                            已部署的流程定义
+                        </Button>
+                    </ButtonList>
+                }}
+            />
+
+
+        </Page>
+    }
+
+
+}
+
+
+

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

@@ -0,0 +1,87 @@
+import React from "react";
+import {HttpUtils, ProTable} from "@jiangood/open-admin";
+
+export default class extends React.Component {
+
+    columns = [
+        {
+            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 <ProTable
+            search={false}
+            columns={this.columns}
+            request={(params) => HttpUtils.get('admin/flowable/monitor/definitionPage', params)}
+        >
+
+        </ProTable>
+    }
+}

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

@@ -0,0 +1,82 @@
+import {Button, Popconfirm, Space} from "antd";
+import {HttpUtils, PageUtils, ProTable} from "@jiangood/open-admin";
+import React from "react";
+
+export default class extends React.Component {
+
+        columns = [
+        {
+            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={() => PageUtils.open('/flowable/monitor/instance/view?id=', '查看流程')}>查看</Button>
+                    <Popconfirm title={'关闭流程'}
+                                onConfirm={() => this.close(r.id)}>
+                        <Button size='small' >终止</Button>
+                    </Popconfirm></Space>
+            }
+        }
+
+    ]
+
+    close = (id) => {
+        HttpUtils.get('admin/flowable/monitor/processInstance/close', {id}).then((rs) => {
+            this.tableRef.current.reload()
+        })
+    }
+
+    tableRef = React.createRef()
+
+    render() {
+        return <ProTable
+            actionRef={this.tableRef}
+            columns={this.columns}
+            request={(params) => HttpUtils.get('admin/flowable/monitor/instancePage', params)}
+        >
+
+        </ProTable>
+    }
+}

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

@@ -0,0 +1,102 @@
+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>
+    }
+
+
+}

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

@@ -0,0 +1,98 @@
+import {FieldUserSelect, HttpUtils, Page, ProTable} from "@jiangood/open-admin";
+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>
+    }
+
+}