@jiangood/open-admin-flowable 2.0.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,163 @@
+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, PageLoading, PageUtils, ProTable} from "@jiangood/open-admin";
+import 'bpmn-js/dist/assets/bpmn-js.css';
+import flowableJson from './descriptors/flowable';
+import PropertiesPanel from './PropertiesPanel';
+
+export default class extends React.Component {
+
+
+    state = {
+        id: null,
+        model: null,
+        bpmnModeler: null,
+        deployedModal: false
+    }
+
+    bpmRef = React.createRef()
+
+
+    async componentDidMount() {
+        const params = PageUtils.currentParams()
+        const rs = await HttpUtils.get('admin/flowable/model/detail', {id: params.id})
+        this.setState({model: rs, id: params.id}, this.initBpmn)
+    }
+
+    initBpmn = () => {
+        let container = this.bpmRef.current;
+        let xml = this.state.model.content;
+
+        this.bpmnModeler = new BpmnModeler({
+            container: container,
+            additionalModules: [
+                {translate: ['value', customTranslate]},
+                contextPad,
+            ],
+            moddleExtensions: {
+                flowable: flowableJson
+            }
+        });
+
+        console.log('导入的xml内容如下')
+        console.log(xml)
+        this.bpmnModeler.importXML(xml)
+        this.bpmnModeler.on('element.contextmenu', e => e.preventDefault()) // 关闭右键，影响操作
+        this.setState({bpmnModeler: this.bpmnModeler});
+    };
+
+
+    showXML = () => {
+        this.bpmnModeler.saveXML({format: true}).then(res => {
+            Modal.info({content: <pre style={{overflowX: "auto", height: '64vh'}}>{res.xml}</pre>, width: 1024})
+        })
+    }
+
+
+    handleSave = async () => {
+        let id = this.state.id;
+        const hide = message.loading('正在保存...', 0)
+        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 = message.loading('正在部署...', 0)
+        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 <PageLoading />
+        }
+        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/simulate?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}>
+                    <PropertiesPanel modeler={this.state.bpmnModeler} />
+                </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:(_, record)=> {
+                                return <Button type='primary' onClick={()=>{
+                                    HttpUtils.get('admin/flowable/model/getDefinitionContent',{id: record.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/properties/AssignmentSection.jsx

@@ -0,0 +1,74 @@
+import {Form, Radio} from "antd";
+import {FieldRemoteSelect, FieldRemoteSelectMultipleInline, StringUtils} from "@jiangood/open-admin";
+import React from "react";
+
+export default function AssignmentSection(props) {
+    const {element, modeling} = props
+    const businessObject = element.businessObject
+
+    const getMode = () => {
+        if (businessObject.assignee) return 'assignee'
+        if (businessObject.candidateGroups) return 'candidateGroups'
+        if (businessObject.candidateUsers) return 'candidateUsers'
+        return 'assignee'
+    }
+
+    const [mode, setMode] = React.useState(getMode())
+    const [formKey, setFormKey] = React.useState(0)
+
+    const initialValues = {
+        assignee: businessObject.assignee,
+        candidateGroups: businessObject.candidateGroups,
+        candidateUsers: StringUtils.split(businessObject.candidateUsers, ','),
+    }
+
+    const handleModeChange = (e) => {
+        const newMode = e.target.value
+        if (newMode === mode) return
+
+        // 切换模式时清空所有指派字段，确保三选一
+        modeling.updateProperties(element, {
+            assignee: undefined,
+            candidateGroups: undefined,
+            candidateUsers: undefined,
+        })
+
+        setMode(newMode)
+        setFormKey(k => k + 1)
+    }
+
+    return (<div style={{padding: 8}}>
+        <Radio.Group
+            optionType="button"
+            buttonStyle="solid"
+            value={mode}
+            onChange={handleModeChange}
+            options={[
+                {label: '直接指派', value: 'assignee'},
+                {label: '候选组', value: 'candidateGroups'},
+                {label: '候选人', value: 'candidateUsers'},
+            ]}
+            style={{marginBottom: 12, display: 'flex'}}
+        />
+        <Form key={formKey} layout='vertical' initialValues={initialValues}
+              onValuesChange={(changedValues) => {
+                  modeling.updateProperties(element, changedValues);
+              }}>
+            {mode === 'assignee' && (
+                <Form.Item label="办理人" name='assignee'>
+                    <FieldRemoteSelect url='admin/flowable/model/assigneeOptions'/>
+                </Form.Item>
+            )}
+            {mode === 'candidateGroups' && (
+                <Form.Item label="候选组" name='candidateGroups'>
+                    <FieldRemoteSelect url='admin/flowable/model/candidateGroupsOptions'/>
+                </Form.Item>
+            )}
+            {mode === 'candidateUsers' && (
+                <Form.Item label="候选人" name='candidateUsers'>
+                    <FieldRemoteSelectMultipleInline url='admin/flowable/model/candidateUsersOptions'/>
+                </Form.Item>
+            )}
+        </Form>
+    </div>)
+}

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

@@ -0,0 +1,292 @@
+import {Button, Input, InputNumber, Modal, Select} from "antd";
+import {Component} from "react";
+import {FieldBoolean, FieldTable, HttpUtils, ObjectUtils, StringUtils, ThemeUtils} from "@jiangood/open-admin";
+import {ConditionExpressionUtils} from "./ConditionExpressionUtils";
+
+
+// 字符串的双引号
+const QUOTE = '"';
+
+
+const OPERATOR_DEFINITIONS = [
+    {
+        type: 'STRING',
+        label: '等于',
+        key: '==',
+        component: Input,
+    },
+    {
+        type: 'STRING',
+        label: '不等于',
+        key: '!=',
+        component: Input,
+    },
+    {
+        type: 'STRING',
+        label: '包含',
+        key: '.contains',
+        component: Input,
+    },
+    {
+        type: 'STRING',
+        label: '开头等于',
+        key: '.startWith',
+        component: Input,
+    },
+    {
+        type: 'STRING',
+        label: '结尾等于',
+        key: '.endWith',
+        component: Input,
+    },
+
+    // =================== 数字 ================
+
+    {
+        type: 'NUMBER',
+        label: '等于',
+        key: '==',
+        component: Input,
+    },
+    {
+        type: 'NUMBER',
+        label: '不等于',
+        key: '!=',
+        component: Input,
+    },
+
+    {
+        type: 'NUMBER',
+        label: '大于',
+        key: '>',
+        component: InputNumber,
+    },
+    {
+        type: 'NUMBER',
+        label: '小于',
+        key: '<',
+        component: InputNumber,
+    },
+    {
+        type: 'NUMBER',
+        label: '大于等于',
+        key: '>=',
+        component: InputNumber,
+    },
+    {
+        type: 'NUMBER',
+        label: '小于等于',
+        key: '<=',
+        component: InputNumber,
+    },
+
+
+    // ===================== 布尔值 =======================
+
+    {
+        type: 'BOOLEAN',
+        label: '等于',
+        key: '==',
+        component: FieldBoolean,
+    },
+
+]
+
+
+function encode(data) {
+    let {left, op, right} = data;
+    if (left == null || op == null || right == null) {
+        return null
+    }
+
+    const isFun = op.startsWith('.')
+    if (isFun) {
+        return left + op + '("' + right + '")';
+    }
+    const isStr = right.startsWith('"')
+    if (isStr) {
+        right = '"' + right + '"';
+    }
+
+    return left + op + right;
+}
+
+function decode(expression) {
+    const isFun = ConditionExpressionUtils.isFunction(expression);
+    if (isFun) {
+        return ConditionExpressionUtils.parseStrFunction(expression)
+    }
+
+    return ConditionExpressionUtils.parse(expression)
+}
+
+
+export class ConditionDesignButton extends Component {
+
+    state = {
+        open: false,
+        varList: [],
+        varOptions: [],
+        editingArr: [], // 弹窗内本地编辑状态，点击确定后才提交
+    }
+
+    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})
+        })
+    }
+
+    // 弹窗内实时更新本地状态，不提交到模型
+    handleTableChange = arr => {
+        this.setState({ editingArr: arr })
+    };
+
+    // 确定：将本地状态提交到模型
+    handleOk = () => {
+        const str = this.convertArrToStr(this.state.editingArr)
+        this.props.setValue(str, this.props.element, this.props.modeling, this.props.bpmnFactory)
+        this.setState({ open: false })
+    }
+
+    // 取消：丢弃本地修改
+    handleCancel = () => {
+        this.setState({ open: false })
+    }
+
+    // 打开弹窗时，从当前元素读取最新表达式
+    handleOpen = () => {
+        let value = this.props.getValue(this.props.element);
+        let arrValue = this.convertStrToArr(value);
+        this.setState({ open: true, editingArr: arrValue })
+    }
+
+    getOptionsByItem = (record) => {
+        let options = []
+        let {varList} = this.state;
+        let varItem = varList.find(t => t.name === record.left)
+
+        if (varItem) {
+            const {valueType} = varItem;
+            const os = OPERATOR_DEFINITIONS.filter(o => o.type === valueType)
+            for (let o of os) {
+                options.push({
+                    label: o.label,
+                    value: o.key
+                })
+            }
+        }
+
+        return options;
+    }
+
+    columns = [
+        {
+            dataIndex: 'left', title: '变量名称',
+            render: () => {
+                return <Select options={this.state.varOptions} style={{width: 200}}></Select>
+            }
+        },
+        {
+            dataIndex: 'op', title: '操作符',
+            render: (v, record) => {
+                const options = this.getOptionsByItem(record)
+
+                return <Select options={options} style={{width: 100}}></Select>
+            }
+        },
+        {dataIndex: 'right', title: '值', width: 200},
+    ];
+
+    render() {
+        const { editingArr } = this.state
+        const previewExpression = this.convertArrToStr(editingArr)
+
+        return <div style={{display: 'flex', justifyContent: 'right', padding: 8}}>
+            <Button type='primary'
+                    size='small'
+
+                    styles={{
+                        root: {
+                            backgroundColor: ThemeUtils.getColor('primary-color')
+                        }
+                    }}
+
+                    onClick={this.handleOpen}
+
+            >条件编辑器</Button>
+
+
+            <Modal title='条件编辑器'
+                   open={this.state.open}
+                   width={600}
+                   onOk={this.handleOk}
+                   onCancel={this.handleCancel}
+                   mask={{blur: false}}
+                   destroyOnHidden
+            >
+                <FieldTable
+                    columns={this.columns}
+                    value={editingArr}
+                    onChange={this.handleTableChange}
+                />
+
+                <div style={{
+                    marginTop: 8,
+                    color: '#999',
+                    fontSize: 12,
+                }}>
+                    提示：暂不支持复杂表达式，复杂表达式请手动编辑
+                </div>
+
+                <div style={{
+                    marginTop: 16,
+                    padding: '8px 12px',
+                    background: '#f6f8fa',
+                    borderRadius: 6,
+                    border: '1px solid #d9d9d9',
+                    fontFamily: 'monospace',
+                    fontSize: 13,
+                    wordBreak: 'break-all',
+                    minHeight: 36,
+                    display: 'flex',
+                    alignItems: 'center',
+                }}>
+                    <span style={{ color: '#999', marginRight: 8, flexShrink: 0 }}>表达式预览：</span>
+                    <span style={{ color: previewExpression ? '#1a1a1a' : '#bbb' }}>
+                        {previewExpression || '（空）'}
+                    </span>
+                </div>
+            </Modal>
+
+        </div>
+    }
+
+    convertStrToArr(value) {
+        if (value) {
+            value = StringUtils.removePrefixAndSuffix(value, "${", "}")
+            const strArr = StringUtils.split(value, '&&');
+            return strArr.map(decode).filter(t => t != null)
+        }
+        return [];
+    }
+
+
+    convertArrToStr = arrValue => {
+        const str = arrValue.map(encode).join('&&')
+
+        return "${" + str + "}"
+    };
+
+
+}
+
+

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

@@ -0,0 +1,53 @@
+import {StringUtils} from "@jiangood/open-admin";
+
+
+export class ConditionExpressionUtils {
+
+    /**
+     * 判断表达式是否是函数
+     * @param expr 如 name.contains("aa")
+     */
+    static isFunction(expr) {
+        const regExp = /\w+\.\w+\(.*\)/;
+        return regExp.test(expr);
+    }
+
+    /**
+     * 解析函数, 得到变量，函数名，参数
+     * 注意：只支持单参数函数
+     * @param expr
+     */
+    static parseStrFunction(expr) {
+        const regExp = /^(\w+)(\.\w+)\("(.*)"\)$/;
+        const match = expr.match(regExp);
+        if (!match) {
+            return null;
+        }
+        const [, left, op, right] = match;
+        return { left, op,right };
+    }
+
+    /**
+     * 解析普通表达式， 如 a==1,  b>5, c=="你好"
+     *
+     */
+    static parse(expr) {
+        // 支持的比较操作符， 注意顺序，先比较的操作符长的
+        const operators = ['==', '!=', '<=', '>=', '<', '>'];
+
+        const op = operators.find(op => StringUtils.contains(expr, op))
+        if (!op) {
+            return null
+        }
+
+        const index = expr.indexOf(op);
+        const left = expr.substring(0, index).trim();
+        let right = expr.substring(index + op.length).trim();
+        right = StringUtils.removePrefixAndSuffix(right, '"', '"')
+
+        return {left, op, right};
+    }
+
+
+}
+

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

@@ -0,0 +1,66 @@
+import { Input } from 'antd';
+import { useRef, useState } from 'react';
+import { ConditionDesignButton } from './ConditionDesign';
+
+function getExpressionValue(element) {
+  const condition = element.businessObject?.conditionExpression;
+  return condition ? condition.body : '';
+}
+
+function setExpressionValue(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 });
+  }
+
+  modeling.updateModdleProperties(element, conditionExpression, { body: value });
+}
+
+export default function ConditionSection({ element, modeling, moddle, processId }) {
+  const [value, setValue] = useState(getExpressionValue(element));
+  const timerRef = useRef(null);
+
+  const handleChange = (e) => {
+    const v = e.target.value;
+    setValue(v);
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      setExpressionValue(v, element, modeling, moddle);
+    }, 300);
+  };
+
+  return (
+    <div style={{ padding: 8 }}>
+      <div style={{ marginBottom: 4, fontSize: 12, color: '#666' }}>
+        条件表达式(JUEL)
+      </div>
+      <Input.TextArea
+        value={value}
+        onChange={handleChange}
+        placeholder="条件表达式(JUEL)"
+        rows={3}
+      />
+      <div style={{ display: 'flex', justifyContent: 'right', marginTop: 8 }}>
+        <ConditionDesignButton
+          element={element}
+          modeling={modeling}
+          bpmnFactory={moddle}
+          processId={processId}
+          getValue={getExpressionValue}
+          setValue={(v, el, mod, mdl) => {
+            setExpressionValue(v, el || element, mod || modeling, mdl || moddle);
+            setValue(v);
+          }}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+import {Select} from 'antd';
+import {useEffect, useState} from 'react';
+import {HttpUtils} from "@jiangood/open-admin";
+
+export default function DelegateExpressionField({element, modeling}) {
+    const [options, setOptions] = useState([]);
+
+    useEffect(() => {
+        HttpUtils.get('admin/flowable/model/javaDelegateOptions').then(rs => {
+            setOptions((rs || []).map(o => typeof o === 'string' ? {label: o, value: o} : o));
+        });
+    }, []);
+
+    const value = element.businessObject?.delegateExpression || '';
+
+    return (
+        <div style={{padding: 8}}>
+            <div style={{marginBottom: 4, fontSize: 12, color: '#666'}}>delegateExpression</div>
+            <Select
+                style={{width: '100%'}}
+                value={value || undefined}
+                placeholder="实现JavaDelegate接口的Bean名称， 如 ${demoDelegate}"
+                options={options}
+                onChange={(val) => modeling.updateProperties(element, {delegateExpression: val || ''})}
+                allowClear
+            />
+        </div>
+    );
+}