@jiangood/admin-spring-boot-starter 0.2.0

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

@@ -0,0 +1,100 @@
+import {
+    getBusinessObject,
+    is
+} from 'bpmn-js/lib/util/ModelUtil';
+
+import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
+import {useService} from "bpmn-js-properties-panel";
+
+
+/**
+ * @returns {Array<Entry>} entries
+ */
+export function MultiInstanceProps(props) {
+    const {
+        element
+    } = props;
+
+    if (!isMultiInstanceSupported(element)) {
+        return [];
+    }
+    const entries = [
+        {
+            id: 'collection',
+            component: Collection,
+            isEdited: isTextFieldEntryEdited
+        },
+        {
+            id:'elementVariable',
+            component: ElementVariable,
+            isEdited: isTextFieldEntryEdited
+        }
+    ];
+
+    return entries;
+}
+
+function Collection(props) {
+    const { element } = props;
+    const debounce = useService('debounceInput');
+
+    const getValue = () => {
+        return getLoopCharacteristics(element).get('collection')
+    };
+
+    const setValue = (value) => {
+       getLoopCharacteristics( element).set('collection', value);
+    };
+
+    return TextFieldEntry({
+        element,
+        id: 'collection',
+        label: '集合',
+        getValue,
+        setValue,
+        debounce,
+        placeholder:'如 userList'
+    });
+}
+
+function ElementVariable(props) {
+    const { element } = props;
+
+    const debounce = useService('debounceInput');
+    const getValue = () => {
+        return getLoopCharacteristics(element).get('elementVariable')
+    };
+
+    const setValue = (value) => {
+        getLoopCharacteristics( element).set('elementVariable', value);
+    };
+
+    return TextFieldEntry({
+        element,
+        id: 'elementVariable',
+        label: '元素变量',
+        getValue,
+        setValue,
+        debounce,
+        placeholder:'如 user'
+    });
+}
+
+
+
+
+/**
+ * isMultiInstanceSupported - check whether given element supports MultiInstanceLoopCharacteristics.
+ *
+ * @param {djs.model.Base} element
+ * @return {boolean}
+ */
+function isMultiInstanceSupported(element) {
+    const loopCharacteristics = getLoopCharacteristics(element);
+    return !!loopCharacteristics && is(loopCharacteristics, 'bpmn:MultiInstanceLoopCharacteristics');
+}
+function getLoopCharacteristics(element) {
+    const bo = getBusinessObject(element);
+    return bo.loopCharacteristics;
+}
+

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

@@ -0,0 +1,48 @@
+import {Form} from "antd";
+import {
+    FieldRemoteSelect,
+    FieldRemoteSelectMultipleInline,
+    StringUtils
+} from "../../../../../framework";
+import React from "react";
+import {renderReact} from "./utils";
+
+
+// preact 组件， bpmn properties-panel 渲染组件（bpmn properties-panel 只支持preact）
+export function PreactUserTaskForm(props) {
+    return renderReact(props, UserTaskForm)
+}
+
+
+// react 组件，方便使用antd
+function UserTaskForm(props) {
+    console.log('UserTaskForm', props)
+    const {element, modeling} = props
+    let initialValues = {
+        assignee: element.businessObject.assignee,
+        candidateGroups: element.businessObject.candidateGroups,
+        candidateUsers: StringUtils.split(element.businessObject.candidateUsers, ',')
+    };
+    return (<div style={{padding: 8}}>
+            <Form layout='vertical'
+                  initialValues={initialValues}
+                  onValuesChange={(changedValues) => {
+                      modeling.updateProperties(element, changedValues);
+                  }}>
+                <Form.Item label="办理人" name='assignee'>
+                    <FieldRemoteSelect url='admin/flowable/model/assigneeOptions'/>
+                </Form.Item>
+                <Form.Item label="候选组" name='candidateGroups'>
+                    <FieldRemoteSelect url='admin/flowable/model/candidateGroupsOptions'/>
+                </Form.Item>
+                <Form.Item label="候选人" name='candidateUsers'>
+                    <FieldRemoteSelectMultipleInline url='admin/flowable/model/candidateUsersOptions'/>
+                </Form.Item>
+            </Form>
+        </div>
+    )
+}
+
+
+
+

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

@@ -0,0 +1,35 @@
+import {useService} from "bpmn-js-properties-panel";
+import {createRoot} from "react-dom/client";
+import {h} from "preact";
+import React from "react";
+import {useEffect, useRef} from "@bpmn-io/properties-panel/preact/hooks";
+import {ConfigProvider} from "antd";
+import {ThemeUtils} from "../../../../../framework";
+
+// 渲染React组件（bpmn properties-panel 只支持preact）
+export function renderReact(props, ReactComponent, moreProps) {
+    const {element, id} = props;
+    const modeling = useService('modeling');
+    const bpmnFactory = useService('moddle');
+    const canvas = useService('canvas');
+
+    const domRef = useRef(null);
+    const rootElement = canvas.getRootElement();
+    const processId = rootElement.id;
+
+    useEffect(() => {
+        const root = createRoot(domRef.current);
+        root.render(<ConfigProvider theme={{  token: {
+                colorPrimary: ThemeUtils.getColor("primary-color"),
+                colorSuccess: ThemeUtils.getColor("success-color"),
+                colorWarning: ThemeUtils.getColor("warning-color"),
+                colorError: ThemeUtils.getColor("error-color"),
+                borderRadius: 4,
+            },}}>
+            <ReactComponent element={element} modeling={modeling} bpmnFactory={bpmnFactory}
+                            processId={processId} {...moreProps}/></ConfigProvider>
+        );
+    }, [element]);
+
+    return h('div', {ref: domRef})
+}

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 "../../framework";
+
+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.get('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 "../../../framework";
+
+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,177 @@
+import {Button, Popconfirm, Space} from "antd";
+import {HttpUtils, PageUtils, ProTable} from "../../../../framework";
+import React from "react";
+
+export default class extends React.Component {
+
+    columns = [
+        {
+            title: 'ID',
+            dataIndex: 'id',
+            key: 'id',
+        },
+        {
+            title: '流程定义ID',
+            dataIndex: 'processDefinitionId',
+            key: 'processDefinitionId',
+        },
+        {
+            title: '流程定义名称',
+            dataIndex: 'processDefinitionName',
+            key: 'processDefinitionName',
+        },
+        {
+            title: '流程定义键',
+            dataIndex: 'processDefinitionKey',
+            key: 'processDefinitionKey',
+        },
+        {
+            title: '流程定义版本',
+            dataIndex: 'processDefinitionVersion',
+            key: 'processDefinitionVersion',
+        },
+        {
+            title: '流程定义分类',
+            dataIndex: 'processDefinitionCategory',
+            key: 'processDefinitionCategory',
+        },
+        {
+            title: '部署ID',
+            dataIndex: 'deploymentId',
+            key: 'deploymentId',
+        },
+        {
+            title: '业务键',
+            dataIndex: 'businessKey',
+            key: 'businessKey',
+        },
+        {
+            title: '业务状态',
+            dataIndex: 'businessStatus',
+            key: 'businessStatus',
+        },
+        {
+            title: '是否挂起',
+            dataIndex: 'suspended',
+            key: 'suspended',
+            render: (value) => value ? '是' : '否',
+        },
+        {
+            title: '流程变量',
+            dataIndex: 'processVariables',
+            key: 'processVariables',
+        },
+        {
+            title: '租户ID',
+            dataIndex: 'tenantId',
+            key: 'tenantId',
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '描述',
+            dataIndex: 'description',
+            key: 'description',
+        },
+        {
+            title: '本地化名称',
+            dataIndex: 'localizedName',
+            key: 'localizedName',
+        },
+        {
+            title: '本地化描述',
+            dataIndex: 'localizedDescription',
+            key: 'localizedDescription',
+        },
+        {
+            title: '开始时间',
+            dataIndex: 'startTime',
+            key: 'startTime',
+        },
+        {
+            title: '启动用户ID',
+            dataIndex: 'startUserId',
+            key: 'startUserId',
+        },
+        {
+            title: '回调ID',
+            dataIndex: 'callbackId',
+            key: 'callbackId',
+        },
+        {
+            title: '回调类型',
+            dataIndex: 'callbackType',
+            key: 'callbackType',
+        },
+        {
+            title: '父ID',
+            dataIndex: 'parentId',
+            key: 'parentId',
+        },
+        {
+            title: '根流程实例ID',
+            dataIndex: 'rootProcessInstanceId',
+            key: 'rootProcessInstanceId',
+        },
+        {
+            title: '活动ID',
+            dataIndex: 'activityId',
+            key: 'activityId',
+        },
+        {
+            title: '当前活动ID',
+            dataIndex: 'currentActivityId',
+            key: 'currentActivityId',
+        },
+        {
+            title: '当前活动名称',
+            dataIndex: 'currentActivityName',
+            key: 'currentActivityName',
+        },
+        {
+            title: '当前活动类型',
+            dataIndex: 'currentActivityType',
+            key: 'currentActivityType',
+        },
+        {
+            title: '当前活动行为类型',
+            dataIndex: 'currentActivityBehaviorType',
+            key: 'currentActivityBehaviorType',
+        },
+        {
+            dataIndex: 'options',
+            title: '操作',
+            fixed: 'right',
+            render: (_, r) => {
+                return <Space>
+                    <Button size='small' onClick={() => PageUtils.open(`/flowable/monitor/instance/view?id=${r.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 "../../../../framework";
+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/my/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>
+    }
+
+
+}