@jiangood/admin-spring-boot-starter 0.2.0

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

@@ -0,0 +1,7 @@
+
+/* 隐藏bpmnjs的logo */
+.bjs-powered-by {
+  display: none;
+}
+
+

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

@@ -0,0 +1,171 @@
+import React from "react";
+import {Button, Card, message, Modal, Space, Splitter} from "antd";
+
+import 'bpmn-js/dist/assets/diagram-js.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+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 {HttpUtils, MessageUtils, PageUtils, ProTable} 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 {
+
+
+    state = {
+        id: null,
+        model: null,
+
+        deployedModal: false
+    }
+
+    bpmRef = React.createRef()
+
+
+    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]},
+                contextPad,
+                BpmnPropertiesPanelModule,
+                BpmnPropertiesProviderModule,
+                flowablePropertiesProviderModule
+            ],
+            moddleExtensions: {
+                flowable: flowableJson
+            }
+        });
+
+        console.log('导入的xml内容如下')
+        console.log(xml)
+        this.bpmnModeler.importXML(xml)
+        this.bpmnModeler.on('element.contextmenu', e => e.preventDefault()) // 关闭右键，影响操作
+    };
+
+
+    showXML = () => {
+        this.bpmnModeler.saveXML({format: true}).then(res => {
+            MessageUtils.alert(<pre style={{overflowX: "auto", height: '64vh'}}>{res.xml}</pre>, {width: 1024})
+        })
+    }
+
+
+    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()
+        }
+
+    }
+    handleDeploy = async () => {
+        let id = this.state.id;
+        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() {
+        if (this.state.model == null) {
+            return <Loading/>
+        }
+        return <Card title={'流程设计  ' + this.state.model?.name}
+                     extra={<Space>
+                         <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={() => PageUtils.open('/flowable/test?id=' + this.state.id, "流程测试")}> 测试 </Button>
+
+                         <Button title='查看已部署的历史版本' onClick={() => {
+                             this.setState({deployedModal: true})
+                         }}>历史版本</Button>
+                     </Space>}>
+
+
+            <Splitter style={{minHeight: 'calc(100vh - 200px)'}}>
+                <Splitter.Panel>
+                    <div ref={this.bpmRef} style={{width: '100%', height: '100%'}}></div>
+                </Splitter.Panel>
+
+                <Splitter.Panel defaultSize={300}>
+                    <div id={'js-properties-panel'}></div>
+                </Splitter.Panel>
+            </Splitter>
+
+
+            <Modal title='已部署版本' width={800} footer={null}
+                   open={this.state.deployedModal}
+                   destroyOnHidden
+                   onCancel={() => this.setState({deployedModal: false})}>
+
+                <ProTable
+                    columns={[
+                        {
+                            dataIndex: 'key',
+                            title: '编码'
+                        },
+                        {
+                            dataIndex: 'name',
+                            title: '名称'
+                        },
+                        {
+                            dataIndex: 'version',
+                            title: '版本号'
+                        }, {
+                            title: '操作',
+                            dataIndex:'id',
+                            render:(id)=> {
+                                return <Button type='primary' onClick={()=>{
+                                    HttpUtils.get('admin/flowable/model/getDefinitionContent',{id}).then(xml=>{
+                                        this.bpmnModeler.importXML(xml)
+                                        this.setState({deployedModal:false})
+                                    })
+                                }}>加载</Button>
+                            }
+                        }
+                    ]}
+                    request={params => {
+                        params.key = this.state.model.key
+                        return HttpUtils.get('admin/flowable/model/definitionPage', params)
+                    }}>
+
+                </ProTable>
+
+            </Modal>
+
+        </Card>
+    }
+
+
+}

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,
+    })
+
+}
+
+
+

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

@@ -0,0 +1,54 @@
+import {isTextFieldEntryEdited, SelectEntry} from '@bpmn-io/properties-panel';
+import { useService } from 'bpmn-js-properties-panel';
+import { useEffect, useState } from '@bpmn-io/properties-panel/preact/hooks';
+import {HttpUtils} from "../../../../../framework";
+export  function DelegateExpressionProps () {
+
+  return [
+    {
+      id: 'delegateExpression',
+      component: Component,
+      isEdited: isTextFieldEntryEdited,
+    }
+
+  ];
+}
+
+function Component(props) {
+  const { element, id } = props;
+
+  const modeling = useService('modeling');
+  const debounce = useService('debounceInput');
+
+  const getValue = (element) => {
+    return element.businessObject.delegateExpression || '';
+  };
+
+  const setValue = value => {
+    return modeling.updateProperties(element, {
+      delegateExpression: value
+    });
+  };
+
+  const [ options, setOptions ] = useState([]);
+
+  useEffect(async () => {
+    const rs = await HttpUtils.get('admin/flowable/model/javaDelegateOptions')
+    setOptions(rs)
+  }, [ setOptions ]);
+
+  return SelectEntry({
+    element,
+    id: id,
+    label: 'delegateExpression',
+    description: '实现JavaDelegate接口的Bean名称， 如 ${demoDelegate}',
+    getValue,
+    setValue,
+    debounce,
+
+    getOptions: () => {
+      return options
+    }
+  })
+
+}

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

@@ -0,0 +1,55 @@
+import {isTextFieldEntryEdited, SelectEntry} from '@bpmn-io/properties-panel';
+import { useService } from 'bpmn-js-properties-panel';
+import { useEffect, useState } from '@bpmn-io/properties-panel/preact/hooks';
+import {HttpUtils} from "../../../../../framework";
+export  function FormProps () {
+
+    return [
+        {
+            id: 'form',
+            component: Component,
+            isEdited: isTextFieldEntryEdited,
+        }
+
+    ];
+}
+
+function Component(props) {
+    const { element, id } = props;
+
+    const modeling = useService('modeling');
+    const debounce = useService('debounceInput');
+    const canvas = useService('canvas');
+    const rootElement = canvas.getRootElement();
+    const processId = rootElement.id;
+    const getValue = (element) => {
+        return element.businessObject.formKey || '';
+    };
+
+    const setValue = value => {
+        return modeling.updateProperties(element, {
+            formKey: value
+        });
+    };
+
+    const [ options, setOptions ] = useState([]);
+
+    useEffect(async () => {
+        const rs = await HttpUtils.get('admin/flowable/model/formOptions',{code:processId})
+        setOptions(rs)
+    }, [ setOptions ]);
+
+    return SelectEntry({
+        element,
+        id: id,
+        label: '选择表单',
+        getValue,
+        setValue,
+        debounce,
+
+        getOptions: () => {
+            return [{ value: '', label: '<留空>'},...options]
+        }
+    })
+
+}