@jiangood/springboot-admin-starter 0.0.2 → 0.0.4

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

@@ -1,21 +1,22 @@
 import React from "react";
-import {Button, Card, Col, Empty, Form, Input, message, Modal, Row, Space} from "antd";
+import {Button, Card, message, Space, Splitter} 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 customTranslate from "./customTranslate/customTranslate";
+import contextPad from "./contextPad";
 import {CloudUploadOutlined, SaveOutlined} from "@ant-design/icons";
-import {HttpUtil, PageUtil} from "../../../framework";
+import {HttpUtils, MessageUtils, PageUtils} from "../../../framework";
+import 'bpmn-js/dist/assets/bpmn-js.css';
+import '@bpmn-io/properties-panel/assets/properties-panel.css';
+import {BpmnPropertiesPanelModule, BpmnPropertiesProviderModule} from 'bpmn-js-properties-panel';
+
+import flowablePropertiesProviderModule from './provider';
+import flowableJson from './descriptors/flowable';
+import Loading from "../../../loading";
 
 export default class extends React.Component {
 
@@ -23,275 +24,101 @@ 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()
+    async componentDidMount() {
+        let params = PageUtils.currentParams()
         this.state.id = params.id
+        const rs = await HttpUtils.get('admin/flowable/model/detail', {id: this.state.id})
+        this.setState({model:rs}, this.initBpmn)
+    }
+
+    initBpmn = () => {
+        let container = this.bpmRef.current;
+        let xml = this.state.model.content;
+
         this.bpmnModeler = new BpmnModeler({
+            container: container,
+            propertiesPanel: {parent: '#js-properties-panel',},
             additionalModules: [
-                // 汉化翻译
-                {
-                    translate: ['value', customTranslate]
-                },
-                palette,
+                {translate: ['value', customTranslate]},
                 contextPad,
-            ]
+                BpmnPropertiesPanelModule,
+                BpmnPropertiesProviderModule,
+                flowablePropertiesProviderModule
+            ],
+            moddleExtensions: {
+               flowable: flowableJson
+            }
         });
 
-        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
-            })
+            MessageUtils.alert(<pre style={{overflowX: "auto", height: '64vh'}}>{res.xml}</pre>, {width: 1024})
         })
     }
 
 
-    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 = () => {
+    handleSave = async () => {
         let id = this.state.id;
+        const hide = MessageUtils.loading('正在保存...')
+        try {
+            const res = await this.bpmnModeler.saveXML();
+            await HttpUtils.post('admin/flowable/model/saveContent', {id, content: res.xml});
+        } finally {
+            hide()
+        }
 
-        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 = () => {
+    handleDeploy = async () => {
         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}))
+        const hide = MessageUtils.loading('正在部署...')
+        try {
+            const res = await this.bpmnModeler.saveXML();
+            await HttpUtils.post('admin/flowable/model/deploy', {id, content: res.xml});
+        } finally {
+            hide()
+        }
     }
 
 
     render() {
-        console.log('this.bpmRef', this.bpmRef)
-
-        return <Card title={'流程设计 - ' + this.state.model?.name}
+        if (this.state.model == null) {
+            return <Loading/>
+        }
+        return <Card title={'流程设计  ' + this.state.model?.name}
                      extra={<Space>
-                         <Button type='primary' icon={<SaveOutlined/>} onClick={this.handleSubmit}>暂存</Button>
+                         <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
-                             onClick={() => PageUtil.open('/flowable/test?id=' + this.state.id, "流程测试")}> 测试 </Button>
-
+                             onClick={() => PageUtils.open('/flowable/test?id=' + this.state.id, "流程测试")}> 测试 </Button>
                      </Space>}>
 
 
-            <Row gutter={16} wrap={false} style={{height: '90vh'}}>
-                <Col flex='auto'>
+            <Splitter style={{minHeight: 'calc(100vh - 200px)'}}>
+                <Splitter.Panel>
                     <div ref={this.bpmRef} style={{width: '100%', height: '100%'}}></div>
-                </Col>
-
-                <Col flex='300px'>
-                    <Card title='属性面板'>
-                        {this.renderForm()}
-                    </Card>
-
-                    {this.renderMultiInstanceLoopCharacteristics()}
-                </Col>
-            </Row>
+                </Splitter.Panel>
 
+                <Splitter.Panel defaultSize={300}>
+                    <div id={'js-properties-panel'}></div>
+                </Splitter.Panel>
+            </Splitter>
 
-            <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/design/provider/FlowablePropertiesProvider.js

@@ -0,0 +1,75 @@
+import {is} from 'bpmn-js/lib/util/ModelUtil';
+import {DelegateExpressionProps} from "./properties/DelegateExpressionProps";
+import {FormProps} from "./properties/FormProps";
+import {PreactUserTaskForm, renderReact, UserTaskForm} from "./properties/UserTaskForm";
+import {isTextFieldEntryEdited} from "@bpmn-io/properties-panel";
+import {ConditionProps} from "./properties/ConditionProps";
+import {MultiInstanceProps} from "./properties/MultiInstanceProps";
+
+const LOW_PRIORITY = 500;
+
+
+export default function FlowablePropertiesProvider(propertiesPanel) {
+
+    this.getGroups = function (element) {
+        return function (groups) {
+            if (is(element, 'bpmn:ServiceTask')) {
+                groups.push({
+                    id: 'processBean',
+                    label: "处理器",
+                    entries: DelegateExpressionProps(element),
+                    shouldOpen: true
+                })
+            }
+
+            if (is(element, 'bpmn:UserTask')) {
+                groups.push({
+                    id: 'user',
+                    label: "用户",
+                    entries: [
+                        {
+                            id: 'user',
+                            component: PreactUserTaskForm,
+                            isEdited: isTextFieldEntryEdited,
+                        }
+                    ],
+                    shouldOpen: true
+                })
+                groups.push({
+                    id: 'form',
+                    label: "表单",
+                    entries: FormProps(element),
+                })
+            }
+            if (is(element, 'bpmn:SequenceFlow')) {
+                groups.push({
+                    id: 'condition',
+                    label: "条件",
+                    entries: ConditionProps(element),
+                    shouldOpen: true
+                })
+            }
+
+            let group = {
+                label: '多实例（集合设置）',
+                id: 'multiInstanceCollection',
+                entries: MultiInstanceProps({element}),
+                shouldOpen: true
+            };
+
+            if(group.entries.length){
+                groups.push(group)
+            }
+
+
+
+            return groups;
+        }
+    }
+
+    propertiesPanel.registerProvider(LOW_PRIORITY, this);
+}
+
+FlowablePropertiesProvider.$inject = ['propertiesPanel'];
+
+

package/src/pages/flowable/design/provider/index.js

@@ -0,0 +1,6 @@
+import FlowablePropertiesProvider from './FlowablePropertiesProvider';
+
+export default {
+  __init__: [ 'magicPropertiesProvider' ],
+  magicPropertiesProvider: [ 'type', FlowablePropertiesProvider ]
+};

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

@@ -0,0 +1,175 @@
+import {Button, Input, InputNumber, Modal, Select} from "antd";
+import React, {Component} from "react";
+import {FieldBoolean, FieldTable, HttpUtils, StringUtils, ThemeUtils} from "../../../../../framework";
+
+const metaInfo = {
+    STRING: {
+        ops: {
+            '==': '等于',
+            '!=': '不等于',
+            contains: '包含',
+            '!contains': '不包含',
+            startWith: '开头等于',
+            endWith: '结尾等于',
+        },
+        render() {
+            return <Input/>;
+        },
+    },
+    NUMBER: {
+        ops: {
+            '==': '等于',
+            '!=': '不等于',
+            '>': '大于',
+            '<': '小于',
+            '>=': '大于等于',
+            '<=': '小于等于',
+            between: '介于',
+        },
+        render(op) {
+            if (op !== 'between') return <InputNumber/>;
+
+            return (
+                <Input.Group>
+                    <InputNumber placeholder="最小值"></InputNumber>
+                    <InputNumber placeholder="最大值"></InputNumber>
+                </Input.Group>
+            );
+        },
+    },
+    BOOLEAN: {
+        ops: {
+            '==': '等于',
+        },
+        render() {
+            return <FieldBoolean/>;
+        },
+    },
+};
+
+export class ConditionDesignButton extends Component {
+
+    state = {
+        open: false,
+        varList: [],
+        varOptions: []
+    }
+
+    componentDidMount() {
+        const {processId} = this.props;
+        console.log('流程id', processId)
+
+        HttpUtils.get('admin/flowable/model/varList', {code: processId}).then(rs => {
+
+            const options = rs.map(r => {
+                return {
+                    label: r.label,
+                    value: r.name
+                }
+            })
+            this.setState({varList: rs, varOptions: options})
+        })
+    }
+
+    onChange = arr => {
+        const str = this.convertArrToStr(arr)
+        this.props.setValue(str, this.props.element, this.props.modeling, this.props.bpmnFactory)
+    };
+
+    columns = [
+        {
+            dataIndex: 'key', title: '变量名称',
+            render: () => {
+                return <Select options={this.state.varOptions} style={{width: 200}}></Select>
+            }
+        },
+        {
+            dataIndex: 'op', title: '操作符', render: (v, record) => {
+                let options = []
+                let {varList} = this.state;
+                let varItem = varList.find(t => t.name === record.key)
+
+                if (varItem) {
+                    const {valueType} = varItem;
+                    const ops = metaInfo[valueType].ops;
+                    options = Object.keys(ops).map(key => {
+                        return {
+                            label: ops[key],
+                            value: key
+                        }
+                    })
+                }
+
+                return <Select options={options} style={{width: 100}}></Select>
+            }
+        },
+        {dataIndex: 'value', title: '值'},
+    ];
+
+    render() {
+        let value = this.props.getValue(this.props.element);
+        let arrValue = this.convertStrToArr(value);
+
+        return <div style={{display: 'flex', justifyContent: 'right', padding: 8}}>
+            <Button type='primary' size='small'
+                    styles={{
+                        root: {backgroundColor: ThemeUtils.getColor('primary-color')}
+                    }}
+                    onClick={() => this.setState({open: true})}
+            >条件编辑器</Button>
+
+
+            <Modal title='条件编辑器 (复杂表达式暂不支持)' open={this.state.open}
+                   onCancel={() => this.setState({open: false})}
+                   footer={null}
+                   mask={{blur: false}}
+                   destroyOnHidden
+            >
+                <FieldTable columns={this.columns}
+                            value={arrValue}
+                            onChange={this.onChange}
+                ></FieldTable>
+            </Modal>
+
+        </div>
+    }
+
+    convertStrToArr(value) {
+
+        let arrValue = []
+        if (value) {
+
+
+            value = StringUtils.removePrefix(value, "${")
+            value = StringUtils.removeSuffix(value, "}")
+            const strArr = StringUtils.split(value, '&&');
+
+            const regex = /(\w+)([<>=!]+)(\w+)/;
+
+            strArr.forEach(expression => {
+                const parts = expression.match(regex);
+                // parts[0] 是整个匹配的字符串
+                // parts[1] 是第一个捕获组 (左操作数)
+                // parts[2] 是第二个捕获组 (操作符)
+                // parts[3] 是第三个捕获组 (右操作数)
+                arrValue.push({
+                    key: parts[1],
+                    op: parts[2],
+                    value: parts[3],
+                })
+            })
+        }
+        return arrValue;
+    }
+
+    convertArrToStr = arrValue => {
+        const str = arrValue.map(i => {
+            const {key, op, value} = i;
+            return `${key}${op}${value}`
+        }).join('&&')
+
+        return "${" + str + "}"
+    };
+}
+
+

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

@@ -0,0 +1,76 @@
+import {isTextFieldEntryEdited, TextFieldEntry} from '@bpmn-io/properties-panel';
+import {useService} from 'bpmn-js-properties-panel';
+import {renderReact} from "./utils";
+import {ConditionDesignButton} from "./ConditionDesign";
+
+function PreactConditionDesign(props) {
+    return renderReact(props, ConditionDesignButton, {getValue,setValue})
+}
+
+
+const getValue = (element) => {
+    const condition = element.businessObject.conditionExpression;
+    return condition ? condition.body : '';
+};
+
+const setValue =( value, element, modeling,moddle) => {
+    const businessObject = element.businessObject;
+    let conditionExpression = businessObject.conditionExpression;
+
+    if (!value) {
+        // 移除条件表达式
+        modeling.updateProperties(element, {
+            conditionExpression: undefined
+        });
+        return;
+    }
+
+    if (!conditionExpression) {
+        conditionExpression = moddle.create('bpmn:FormalExpression');
+        modeling.updateProperties(element, {
+            conditionExpression: conditionExpression
+        });
+    }
+
+    // 更新表达式主体
+    modeling.updateModdleProperties(element, conditionExpression, {
+        body: value
+    });
+};
+export function ConditionProps() {
+
+    return [
+        {
+            id: 'expression',
+            component: Component,
+            isEdited: isTextFieldEntryEdited,
+        },
+        {
+            id: 'expressionDesign',
+            component: PreactConditionDesign,
+            isEdited: isTextFieldEntryEdited,
+        }
+    ]
+}
+
+function Component(props) {
+    const {element, id} = props;
+
+    const modeling = useService('modeling');
+    const debounce = useService('debounceInput');
+    const moddle = useService('moddle');
+
+
+    return TextFieldEntry({
+        element,
+        id: id,
+        label: '条件表达式',
+        getValue,
+        setValue: value=>setValue(value,element,modeling,moddle),
+        debounce,
+    })
+
+}
+
+
+