@jiangood/springboot-admin-starter 0.0.3 → 0.0.4

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

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

@@ -1,37 +1,31 @@
-import {Button, Modal, Popconfirm, Space} from 'antd';
+import {Button, Popconfirm, Space} from 'antd';
 import React from 'react';
-import {PlusOutlined} from "@ant-design/icons";
-import {HttpUtil, PageUtil, ProTable} from "../../framework";
+import {ButtonList, HttpUtils, Page, PageUtils, 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'
+            dataIndex: 'key'
         },
+
+
         {
-            title: '表单链接',
-            dataIndex: 'formUrl'
+            title: '版本',
+            dataIndex: 'version',
         },
         {
             title: '更新时间',
-            dataIndex: 'updateTime',
+            dataIndex: 'lastUpdateTime',
         },
 
 
@@ -41,9 +35,8 @@ export default class extends React.Component {
             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={'是否确定删除流程模型' }
+                            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>
@@ -53,72 +46,38 @@ export default class extends React.Component {
     ];
 
 
-    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 => {
+        HttpUtils.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 <>
+        return <Page padding>
             <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)}
+                request={(params) => HttpUtils.get('admin/flowable/model/page', params)}
                 columns={this.columns}
-                rowSelection={false}
-                rowKey="id"
-                options={{search: true}}
+                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>
+                }}
             />
 
-            <Modal title='模型基本信息'
-                   open={this.state.formOpen}
-                   onCancel={() => this.setState({formOpen: false})}
-                   width={1024}
-                   footer={null}
-            >
-
-                不支持页面创建， 请参考Java代码
-                <pre>
-{demo}
-        </pre>
 
-            </Modal>
-        </>
+        </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>
+    }
+}