@jiangood/springboot-admin-starter 0.0.1

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

@@ -0,0 +1,297 @@
+import React from "react";
+import {Button, Card, Col, Empty, Form, Input, message, Modal, Row, Space} from "antd";
+
+import 'bpmn-js/dist/assets/diagram-js.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+import {getBusinessObject} from "bpmn-js/lib/util/ModelUtil";
+import BpmnModeler from 'bpmn-js/lib/Modeler'
+
+import './index.css'
+import customTranslate from "../../../components/flow/customTranslate/customTranslate";
+import TimerEventDefinitionForm from "../../../components/flow/design/form/TimerEventDefinitionForm";
+import ServiceTaskForm from "../../../components/flow/design/form/ServiceTaskForm";
+import ConditionForm from "../../../components/flow/design/form/ConditionForm";
+import UserTaskForm from "../../../components/flow/design/form/UserTaskForm";
+import palette from "../../../components/flow/design/palette";
+import contextPad from "../../../components/flow/design/contextPad";
+import {CloudUploadOutlined, SaveOutlined} from "@ant-design/icons";
+import {HttpUtil, PageUtil} from "../../../framework";
+
+export default class extends React.Component {
+
+
+    state = {
+        id: null,
+        model: null,
+        conditionVariable: null,
+
+        elementType: null,
+        elementName: '',
+
+        showForm: false, // 表单切换过渡使用
+
+
+        openXmlModal: false,
+        xml: null
+
+    }
+    curBo = null
+    curNode = null
+
+    bpmRef = React.createRef()
+
+    preXmlRef = React.createRef()
+
+    componentDidMount() {
+        let params = PageUtil.currentParams()
+        this.state.id = params.id
+        this.bpmnModeler = new BpmnModeler({
+            additionalModules: [
+                // 汉化翻译
+                {
+                    translate: ['value', customTranslate]
+                },
+                palette,
+                contextPad,
+            ]
+        });
+
+        this.modeling = this.bpmnModeler.get('modeling'); // 建模， 包含很多方法
+        this.moddle = this.bpmnModeler.get('moddle'); // 数据模型， 主要存储元数据
+
+
+        HttpUtil.get('admin/flowable/model/detail', {id: this.state.id}).then(rs => {
+            let {conditionVariable, model} = rs;
+            this.setState({model, conditionVariable}, () => this.initBpmn(model.content))
+        })
+
+
+        window.bpmnModeler = this.bpmnModeler
+        window.moddle = this.moddle;
+        window.modeling = this.modeling;
+    }
+
+    initBpmn = xml => {
+        let parentNode = this.bpmRef.current;
+        this.bpmnModeler.attachTo(parentNode);
+        this.bpmnModeler.importXML(xml)
+
+        this.bpmnModeler.on('element.contextmenu', e => e.preventDefault()) // 关闭右键，影响操作
+        this.bpmnModeler.on('selection.changed', this.onSelectionChanged);
+        //this.bpmnModeler.on('element.changed', this.refreshForm);
+    };
+
+
+    showXML = () => {
+        this.bpmnModeler.saveXML({format: true}).then(res => {
+            this.setState({
+                openXmlModal: true,
+                xml: res.xml
+            })
+        })
+    }
+
+
+    handleChangeXml = () => {
+        const xml = this.preXmlRef.current.innerText;
+
+        const root = this.bpmnModeler.getDefinitions().rootElements[0]
+        const {id, name} = root;
+
+
+        this.bpmnModeler.importXML(xml)
+        root.set('id', id)
+        root.set('name', name)
+
+        message.success('编辑完成');
+        this.setState({openXmlModal: false})
+    }
+
+    onSelectionChanged = e => {
+        const {newSelection} = e;
+        if (newSelection.length !== 1) {
+            this.setState({showForm: false})
+            return null
+        }
+        const curNode = newSelection[0]
+        const curBo = getBusinessObject(curNode)
+
+        this.curBo = curBo;
+        this.curNode = curNode;
+
+        let elementType = curBo.$type.replace("bpmn:", "");
+        let elementName = curBo.get('name');
+
+        console.log('选择元素', elementType, curBo)
+
+        this.setState({
+            elementType,
+            elementName,
+        })
+        // 给一个过渡期
+        this.refreshForm()
+    }
+
+
+    handleSubmit = () => {
+        let id = this.state.id;
+
+        return new Promise((resolve, reject) => {
+            const hide = message.loading('保存中...', 0)
+            this.bpmnModeler.saveXML().then(res => {
+                HttpUtil.post('admin//flowable/model/saveContent', {id: id, content: res.xml}).then(rs => {
+                    hide()
+                    message.success('服务端保存成功')
+                    resolve()
+                }).catch(e => {
+                    hide()
+                    reject()
+                })
+            })
+        })
+    }
+    handleDeploy = () => {
+        let id = this.state.id;
+
+        this.bpmnModeler.saveXML().then(res => {
+            HttpUtil.post('admin//flowable/model/deploy', {id: id, content: res.xml})
+        })
+    }
+
+
+    refreshForm = () => {
+        this.setState({showForm: false}, () => this.setState({showForm: true}))
+    }
+
+
+    render() {
+        console.log('this.bpmRef', this.bpmRef)
+
+        return <Card title={'流程设计 - ' + this.state.model?.name}
+                     extra={<Space>
+                         <Button type='primary' icon={<SaveOutlined/>} onClick={this.handleSubmit}>暂存</Button>
+                         <Button type='primary' danger icon={<CloudUploadOutlined/>}
+                                 onClick={this.handleDeploy}>部署</Button>
+                         <Button onClick={this.showXML}>XML</Button>
+                         <Button
+                             onClick={() => PageUtil.open('/flowable/test?id=' + this.state.id, "流程测试")}> 测试 </Button>
+
+                     </Space>}>
+
+
+            <Row gutter={16} wrap={false} style={{height: '90vh'}}>
+                <Col flex='auto'>
+                    <div ref={this.bpmRef} style={{width: '100%', height: '100%'}}></div>
+                </Col>
+
+                <Col flex='300px'>
+                    <Card title='属性面板'>
+                        {this.renderForm()}
+                    </Card>
+
+                    {this.renderMultiInstanceLoopCharacteristics()}
+                </Col>
+            </Row>
+
+
+            <Modal title='流程定义XML文本内容' open={this.state.openXmlModal}
+                   okText='确定'
+                   width='70vw'
+                   onOk={this.handleChangeXml}
+                   onCancel={() => this.setState({openXmlModal: false})}>
+                <div style={{maxHeight: '70vh', overflow: 'auto'}}>
+                    {this.state.xml && <pre ref={this.preXmlRef} contentEditable>
+          {this.state.xml}
+        </pre>}
+
+                </div>
+            </Modal>
+        </Card>
+    }
+
+
+    renderForm = () => {
+        if (!this.state.showForm) {
+            return <Empty description='请选择节点'/>
+        }
+        const {elementType, conditionVariable} = this.state;
+        const {curBo} = this
+
+        switch (elementType) {
+            case 'SequenceFlow':
+                return <ConditionForm conditionVariable={conditionVariable}
+                                      moddle={this.moddle}
+                                      bo={curBo}
+                                      node={this.curNode}
+                                      modeling={this.modeling}
+                />
+            case 'UserTask':
+                return <UserTaskForm bo={curBo} node={this.curNode} modeling={this.modeling} model={this.state.model}/>
+            case 'ServiceTask':
+                return <ServiceTaskForm bo={curBo}/>
+            case 'StartEvent':
+                if (curBo.eventDefinitions != null) {
+                    return <TimerEventDefinitionForm bo={curBo}/>
+                }
+        }
+        return <></>
+    };
+
+    // 多实例,支持任务和子流程
+    renderMultiInstanceLoopCharacteristics = () => {
+        if (!this.state.showForm) {
+            return
+        }
+
+        const {elementType, conditionVariable} = this.state;
+        const {curBo} = this
+
+
+        if (elementType !== 'SubProcess') {
+            return
+        }
+        let bo = curBo.loopCharacteristics;
+        if (!bo) {
+            return
+        }
+
+        const initialValues = Object.assign({}, bo.$attrs)
+
+        if (bo.loopCardinality) {
+            initialValues.loopCardinality = bo.loopCardinality.body
+        }
+
+        return <Card title='多实例配置'>
+            <Form layout='vertical' onValuesChange={this.onMultiInstanceLoopCharacteristicsChange}
+                  initialValues={initialValues}>
+                <Form.Item label='循环基数' name='loopCardinality'>
+                    <Input placeholder='数字或表达式，如 ${userCount}'/>
+                </Form.Item>
+
+                <Form.Item label='集合' name='flowable:collection'>
+                    <Input placeholder='如 userList'/>
+                </Form.Item>
+                <Form.Item label='元素变量' name='flowable:elementVariable'>
+                    <Input placeholder='如 user'/>
+                </Form.Item>
+
+            </Form>
+        </Card>
+
+
+    };
+
+    onMultiInstanceLoopCharacteristicsChange = (changedValue, values) => {
+        let bo = this.curBo.loopCharacteristics;
+        if (changedValue.loopCardinality != null) {
+            const expression = this.moddle.create('bpmn:FormalExpression', {body: changedValue.loopCardinality});
+            bo.loopCardinality = expression;
+            return
+        }
+
+        for (let key in changedValue) {
+            bo.set(key, changedValue[key])
+        }
+    }
+
+}

package/src/pages/flowable/index.jsx

@@ -0,0 +1,128 @@
+import {Button, Modal, Popconfirm, Space} from 'antd';
+import React from 'react';
+import {PlusOutlined} from "@ant-design/icons";
+import {HttpUtil, PageUtil, ProTable} from "../../framework";
+
+export default class extends React.Component {
+
+
+    state = {
+        formValues: {},
+        formOpen: false
+    }
+
+    actionRef = React.createRef();
+    formRef = React.createRef();
+
+
+    columns = [
+        {
+            title: '模型名称',
+            dataIndex: 'name',
+            sorter: true
+        },
+        {
+            title: '唯一编码',
+            dataIndex: 'code'
+        },
+        {
+            title: '表单链接',
+            dataIndex: 'formUrl'
+        },
+        {
+            title: '更新时间',
+            dataIndex: 'updateTime',
+        },
+
+
+        {
+            title: '操作',
+            dataIndex: 'option',
+            render: (_, record) => (
+                <Space>
+                    <Button size='small' type='primary'
+                            onClick={() => PageUtil.open('/flowable/design?id=' + record.id, '流程设计' + record.name)}> 设计 </Button>
+                    <Button size='small' onClick={() => this.handleEdit(record)}> 编辑 </Button>
+                    <Popconfirm perm='flowable/model:delete' title={'是否确定删除流程模型' }
+                                onConfirm={() => this.handleDelete(record)}>
+                        <Button size='small' danger>删除</Button>
+                    </Popconfirm>
+                </Space>
+            ),
+        },
+    ];
+
+
+    handleAdd = () => {
+        this.setState({
+            formOpen: true,
+            formValues: {}
+        })
+    }
+
+    handleEdit = record => {
+        this.setState({
+            formOpen: true,
+            formValues: record
+        })
+    }
+    onFinish = values => {
+        HttpUtil.post('admin/flowable/model/save', values).then(rs => {
+            this.actionRef.current.reload()
+            this.setState({formOpen: false})
+        })
+    }
+
+    handleDelete = row => {
+        HttpUtil.get('admin/flowable/model/delete', {id: row.id}).then(rs => {
+            this.actionRef.current.reload();
+        })
+    }
+
+
+    render() {
+        const demo = `@Component
+@ProcessDefinitionDescription(key = "demo",name = "demo-派车流程", formKeys = @FormKeyDescription(value = "driverForm",label = "司机表单"))
+public class DemoProcess implements ProcessDefinition {
+
+    @Override
+    public void onProcessEvent(FlowableEventType type, String initiator, String businessKey, Map<String, Object> variables) {
+
+    }
+}
+`
+
+        return <>
+            <ProTable
+                search={false}
+                actionRef={this.actionRef}
+                toolBarRender={() => <Button icon={<PlusOutlined/>} type='primary'
+                                             onClick={this.handleAdd}> 新增</Button>}
+                request={(params) => HttpUtil.pageData('admin/flowable/model/page', params)}
+                columns={this.columns}
+                rowSelection={false}
+                rowKey="id"
+                options={{search: true}}
+            />
+
+            <Modal title='模型基本信息'
+                   open={this.state.formOpen}
+                   onCancel={() => this.setState({formOpen: false})}
+                   width={1024}
+                   footer={null}
+            >
+
+                不支持页面创建， 请参考Java代码
+                <pre>
+{demo}
+        </pre>
+
+            </Modal>
+        </>
+    }
+
+
+}
+
+
+

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

@@ -0,0 +1,13 @@
+import React from "react";
+import InstanceStatusInfo from "../../../components/InstanceStatusInfo";
+import {PageUtil} from "../../../framework";
+
+export default class extends React.Component {
+
+
+    render() {
+        const {businessKey, id} = PageUtil.currentParams()
+        return <InstanceStatusInfo businessKey={businessKey} id={id}/>
+    }
+
+}

package/src/pages/flowable/monitor.jsx

@@ -0,0 +1,106 @@
+import React from "react";
+import {Button, Form, Modal, Tabs} from "antd";
+import AllDefinition from "../../components/monitor/AllDefinition";
+import AllInstance from "../../components/monitor/AllInstance";
+import {FieldUserSelect, HttpUtil, Page, ProTable} from "../../framework";
+
+export default class extends React.Component {
+
+    state = {
+        assigneeFormOpen:false,
+        assigneeFormValues:{}
+    }
+
+    assigneeFormRef = React.createRef()
+    taskTableRef = React.createRef()
+    render() {
+        const items = [
+            {label: '运行中的任务', key: 'AllTask', children: this.renderTask()},
+            {label: '运行中的流程', key: 'AllInstance', children: <AllInstance/>},
+
+            {label: '所有定义', key: 'AllDefinition', children: <AllDefinition/>},
+        ];
+        return <Page padding> <Tabs items={items} destroyOnHidden /></Page>
+
+    }
+
+    renderTask = () => {
+        return<> <ProTable
+            actionRef={this.taskTableRef}
+            columns={[
+                {
+                    dataIndex: 'id',
+                    title: '任务标识',
+                },
+                {
+                    dataIndex: 'name',
+                    title: '名称',
+                },
+
+                {
+                    dataIndex: 'processDefinitionId',
+                    title: '定义'
+                },
+                {
+                    dataIndex: 'processInstanceId',
+                    title: '实例'
+                },
+
+                {
+                    dataIndex: 'assignee',
+                    title: '处理人'
+                },
+                {
+                    dataIndex: 'assigneeLabel',
+                    title: '处理人显示名'
+                },
+                {
+                    dataIndex: 'startTime',
+                    title: '开始时间'
+                },
+                {
+                    dataIndex: 'tenantId',
+                    title: '租户'
+                },
+
+                {
+                    dataIndex:'id',
+                    render:(id)=>{
+                        return <Button size='small' onClick={()=>this.onClickSetAssignee(id)}>指定处理人</Button>
+                    }
+                }
+            ]}
+            request={(params) => HttpUtil.pageData('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>
+        </>
+    };
+
+    onClickSetAssignee = id => {
+        this.setState({assigneeFormOpen:true,assigneeFormValues:{taskId:id}})
+    };
+
+    submitSetAssignee = values => {
+        HttpUtil.post('admin/flowable/monitor/setAssignee',values).then(()=>{
+            this.setState({assigneeFormOpen:false})
+            this.taskTableRef.current.reload()
+        })
+    };
+}

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

@@ -0,0 +1,99 @@
+import React from "react";
+import {Button, Card, Form, Input, message, Radio, Spin, Splitter,} from "antd";
+import InstanceInfo from "../../../components/InstanceInfo";
+import {history} from "umi";
+import {HttpUtil, Page} from "../../../framework";
+
+export default class extends React.Component {
+
+    state = {
+        submitLoading: false,
+        taskId: null,
+        instanceId: null,
+        formKey: null,
+
+        taskInfo: null
+    }
+
+
+
+    externalFormRef = React.createRef()
+
+    componentDidMount() {
+        const {taskId, instanceId, formKey} = PageUtil.currentParams()
+        this.setState({taskId, instanceId, formKey})
+
+        HttpUtil.get('admin/flowable/my/taskInfo', {id: taskId}).then(rs=>{
+            console.log('任务信息',rs)
+            this.setState({taskInfo:rs})
+        })
+
+    }
+
+    handleTask = async value => {
+        this.setState({submitLoading: true});
+        try {
+            if (value.result === 'APPROVE') {
+                const fn = this.externalFormRef.current?.submit
+                if (fn) {
+                    await fn()
+                }
+            }
+
+            value.taskId = this.state.taskId
+            await HttpUtil.post("admin//flowable/my/handleTask", value)
+            history.replace('/flowable/task')
+        } catch (error) {
+            message.error(error)
+        } finally {
+            this.setState({submitLoading: false})
+        }
+
+    }
+
+    render() {
+        const {submitLoading,taskInfo} = this.state
+        const instanceId = this.state.instanceId
+        if (!instanceId || !taskInfo) {
+            return <Spin/>
+        }
+        return <Page padding>
+
+            <Splitter>
+                <Splitter.Panel>
+                    <InstanceInfo id={instanceId} formKey={this.state.formKey} externalFormRef={this.externalFormRef} taskInfo={taskInfo}/>
+                </Splitter.Panel>
+                <Splitter.Panel defaultSize={400}>
+                    <Card title='审批意见'>
+                        <Form
+                            layout='vertical'
+                            onFinish={this.handleTask}
+                            disabled={submitLoading}
+                        >
+                            <Form.Item label='审批结果' name='result' rules={[{required: true, message: '请选择'}]}
+                                       initialValue={'APPROVE'}>
+                                <Radio.Group>
+                                    <Radio value='APPROVE'>同意</Radio>
+                                    <Radio value='REJECT'>不同意</Radio>
+                                </Radio.Group>
+                            </Form.Item>
+                            <Form.Item label='审批意见' name='comment'
+                                       rules={[{required: true, message: '请输入审批意见'}]}>
+                                <Input.TextArea/>
+                            </Form.Item>
+                            <div>
+                                <Button type='primary' htmlType='submit' loading={submitLoading}
+                                        size={"middle"}>提&nbsp;交</Button>
+                            </div>
+                        </Form>
+                    </Card>
+                </Splitter.Panel>
+
+            </Splitter>
+
+
+        </Page>
+
+
+    }
+}