@jiangood/springboot-admin-starter 0.0.1

package/src/components/flow/design/contextPad.js

@@ -0,0 +1,50 @@
+class CustomContextPad {
+  constructor(config, contextPad, create, elementFactory, injector, translate) {
+    this.create = create;
+    this.elementFactory = elementFactory;
+    this.translate = translate;
+
+    if (config.autoPlace !== false) {
+      this.autoPlace = injector.get('autoPlace', false);
+    }
+
+    contextPad.registerProvider(this);
+  }
+
+  static $inject = ['config', 'contextPad', 'create', 'elementFactory', 'injector'];
+
+  getContextPadEntries(element) {
+    const { autoPlace, create, elementFactory } = this;
+
+    function appendServiceTask(event, element) {
+      if (autoPlace) {
+        const shape = elementFactory.createShape({ type: 'bpmn:UserTask' });
+        autoPlace.append(element, shape);
+      } else {
+        appendServiceTaskStart(event, element);
+      }
+    }
+
+    function appendServiceTaskStart(event) {
+      const shape = elementFactory.createShape({ type: 'bpmn:UserTask' });
+      create.start(event, shape, element);
+    }
+
+    return {
+      'append.append-task': {
+        group: 'model',
+        className: 'bpmn-icon-user-task',
+        title: '追加用户任务',
+        action: {
+          click: appendServiceTask,
+          dragstart: appendServiceTaskStart,
+        },
+      },
+    };
+  }
+}
+
+export default {
+  __init__: ['customContextPad'],
+  customContextPad: ['type', CustomContextPad],
+};

package/src/components/flow/design/form/ConditionForm.jsx

@@ -0,0 +1,316 @@
+import React from 'react';
+import {Button, Form, Input, InputNumber, message, Radio, Table} from 'antd';
+import {DeleteOutlined, PlusOutlined} from '@ant-design/icons';
+import {ArrUtil, ProModal} from "../../../../framework";
+
+/**
+ * 条件表单
+ * onFinish
+ *
+ */
+
+
+const PREFIX = 'flowable:';
+
+
+const metaInfo = {
+  text: {
+    ops: {
+      '==': '等于',
+      '!=': '不等于',
+      contains: '包含',
+      '!contains': '不包含',
+      startWith: '开头等于',
+      endWith: '结尾等于',
+    },
+    render() {
+      return <Input />;
+    },
+  },
+  digit: {
+    ops: {
+      '==': '等于',
+      '!=': '不等于',
+      '>': '大于',
+      '<': '小于',
+      '>=': '大于等于',
+      '<=': '小于等于',
+      between: '介于',
+    },
+    render(op) {
+      if (op != 'between') return <InputNumber />;
+
+      return (
+        <Input.Group>
+          <InputNumber placeholder="最小值"></InputNumber>
+          <InputNumber placeholder="最大值"></InputNumber>
+        </Input.Group>
+      );
+    },
+  },
+  boolean: {
+    ops: {
+      '==': '等于',
+    },
+    render() {
+      return <InputNumber />;
+    },
+  },
+};
+
+export default class extends React.Component {
+
+constructor(props) {
+  super(props);
+
+
+
+
+
+  let conditionList = this.props.bo.get('flowable:conditionList');
+  conditionList = conditionList ? JSON.parse(conditionList) : []
+  this.state.conditionList = conditionList;
+  this.state.expression = this.createExpression(conditionList)
+}
+
+  state = {
+    expression: null,
+    conditionList:[],
+    modalForm: {
+      key: null,
+      keyLabel: null,
+
+      valueType: null,
+
+      op: null,
+      opLabel: null,
+
+      value: null,
+      valueLabel: null,
+    },
+  };
+
+  addRef = React.createRef();
+
+  add = () => {
+    this.setState({ modalForm: {} });
+    this.addRef.current.show();
+  };
+
+  handleAdd = (values) => {
+    const { modalForm } = this.state;
+    const { conditionList } = this.state;
+    modalForm.value = values.value;
+    conditionList.push(modalForm);
+    this.save(conditionList);
+    this.addRef.current.close();
+  };
+
+  handleDelete = (item) => {
+    let { conditionList } = this.state;
+
+    ArrUtil.remove(conditionList, item)
+    this.save(conditionList);
+  };
+
+  save = (conditionList) => {
+    const expression = this.createExpression(conditionList);
+
+    this.setState({ conditionList, expression }, ()=>this.setNodeLabel());
+    this.setConditionData(expression, conditionList);
+  };
+
+  createExpression(conditionList) {
+    const expressionList = [];
+    conditionList.forEach((i) => {
+      expressionList.push(this.createExpressionByCondition(i));
+    });
+    const expression = expressionList.join('&&');
+
+    console.log('条件表达式', expression);
+
+    return expression;
+  }
+
+  /**
+   *  创建表达式
+   * key: "days"
+   * keyLabel: "请假天数"
+   * op: "=="
+   * opLabel: "等于"
+   * value: 34
+   * valueType: "digit", "text"
+   *
+   * @param i
+   * @returns {*}
+   */
+  createExpressionByCondition(condition) {
+    const { key, op, value, valueType } = condition;
+    switch (valueType) {
+      case 'digit':
+        return key + op + value;
+      case 'text':
+        if (op === 'contains') {
+          return key + ".contains('" + value + "')";
+        }
+        if (op === '!contains') {
+          return '!' + key + ".contains('" + value + "')";
+        }
+        return key + op + "'" + value + "'";
+      default:
+        throw new Error('未知类型' + valueType);
+    }
+  }
+
+  columns = [
+    {
+      dataIndex: 'key',
+      title: '名',
+      render(_, r) {
+        return r.keyLabel;
+      },
+    },
+    {
+      dataIndex: 'opLabel',
+      title: '操作',
+    },
+    {
+      dataIndex: 'value',
+      title: '值',
+      render(_, r) {
+        if (r.valueLabel != null) {
+          return r.valueLabel;
+        }
+        return r.value;
+      },
+    },
+    {
+      dataIndex: 'option',
+      title: '-',
+      render: (_, record) => (
+        <a onClick={() => this.handleDelete(record)}>
+          <DeleteOutlined />
+        </a>
+      ),
+    },
+  ];
+
+  setConditionData = (expression, conditionList) => {
+    if (expression != null && expression != '') {
+      expression = '${' + expression + '}'
+    }
+
+    // 设置标准条件表达式
+    const conditionExpression = this.props.moddle.create('bpmn:FormalExpression', {body: expression});
+
+    this.props.modeling.updateProperties(this.props.node, {conditionExpression: conditionExpression});
+
+    // 保存条件列表 （最总存在xml中）
+    this.props.bo.set('flowable:conditionList', JSON.stringify(conditionList))
+    message.success("设置成功")
+  }
+
+  render() {
+    const { conditionVariable } = this.props;
+
+    if (conditionVariable == null || conditionVariable.length == 0) {
+      return '未设置条件变量，需在后台XML';
+    }
+
+    const { modalForm } = this.state;
+    let { conditionList } = this.state;
+
+    let { valueType, op, opLabel, value } = modalForm;
+
+    const meta = metaInfo[valueType];
+
+    conditionList = JSON.parse(JSON.stringify(conditionList)); // 这样才能触发dataSource变化
+
+    return (
+      <>
+        <Button type="primary" onClick={this.add} icon={<PlusOutlined />}>
+           添加条件
+        </Button>
+        <div className="q-my-sm" />
+        <Table
+          dataSource={conditionList}
+          columns={this.columns}
+          pagination={false}
+          size="small"
+          bordered
+          rowKey="key"
+        ></Table>
+
+
+        <div className="q-my-md"></div>
+
+        <div>条件表达式: {this.state.expression}</div>
+        <div className="q-my-md"></div>
+
+
+        <ProModal actionRef={this.addRef} title="添加条件">
+          <Form onFinish={this.handleAdd} layout="vertical">
+            <Form.Item name="item" label="数据" rules={[{ required: true }]}>
+              <Radio.Group
+                onChange={(e) => {
+                  const form = {
+                    key: e.target.value.name,
+                    keyLabel: e.target.value.label,
+                    valueType: e.target.value.valueType,
+                  };
+                  this.setState({ modalForm: form });
+                }}
+              >
+                {conditionVariable.map((v) => (
+                  <Radio key={v.name} name={v.name} value={v}>
+                    {v.label}
+                  </Radio>
+                ))}
+              </Radio.Group>
+            </Form.Item>
+
+            {meta && (
+              <Form.Item name="op" label="符号" rules={[{ required: true }]}>
+                <Radio.Group
+                  onChange={(e) => {
+                    op = e.target.value;
+                    opLabel = meta.ops[op];
+                    if (value != null && (op == 'between' || value.indexOf(' - ') >= 0)) {
+                      value = null;
+                    }
+                    modalForm.op = op;
+                    modalForm.opLabel = opLabel;
+                    modalForm.value = value;
+                    this.setState({ modalForm });
+                  }}
+                >
+                  {Object.keys(meta.ops).map((k) => {
+                    const kv = {
+                      key: k,
+                      value: meta.ops[k],
+                    };
+                    return (
+                      <Radio key={k} value={k}>
+                        {kv.value}
+                      </Radio>
+                    );
+                  })}
+                </Radio.Group>
+              </Form.Item>
+            )}
+
+            {meta && (
+              <Form.Item name="value" label="值" rules={[{ required: true }]}>
+                {meta.render(op)}
+              </Form.Item>
+            )}
+
+            <Button type="primary" htmlType="submit">
+              确定
+            </Button>
+          </Form>
+        </ProModal>
+      </>
+    );
+  }
+}

package/src/components/flow/design/form/ServiceTaskForm.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {Form, Select} from 'antd';
+import {HttpUtil} from "../../../../framework";
+
+export default class extends React.Component {
+  bo = null;
+
+  state = {
+    data: {},
+
+    selectOptions: [],
+
+    javaDelegateOptions:[]
+  }
+
+  constructor(props) {
+    super(props);
+    this.bo = props.bo;
+
+    const data = {};
+    data['flowable:delegateExpression'] = this.bo.get('flowable:delegateExpression');
+    this.state.data = data;
+  }
+
+  componentDidMount() {
+    HttpUtil.get('admin/flowable/model/javaDelegateOptions').then(rs=>{
+      this.setState({javaDelegateOptions:rs})
+
+    })
+  }
+
+  onValuesChange = (changedValue) => {
+    for (let key in changedValue) {
+      this.bo.set(key, changedValue[key]);
+    }
+  };
+
+  render() {
+    return (
+      <div>
+        <Form
+          onValuesChange={this.onValuesChange}
+          initialValues={this.state.data}
+          layout={'vertical'}
+        >
+
+
+          <Form.Item label="监听类(表达式)" name="flowable:delegateExpression" extra="需实现JavaDelegate接口">
+            <Select options={this.state.javaDelegateOptions} ></Select>
+          </Form.Item>
+        </Form>
+      </div>
+    );
+  }
+}

package/src/components/flow/design/form/TimerEventDefinitionForm.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {Form, Input} from 'antd';
+
+export default class TimerEventDefinitionForm extends React.Component {
+  bo = null;
+
+  state = {
+    data: {},
+  };
+
+  constructor(props) {
+    super(props);
+    this.bo = props.bo;
+
+    const data = {};
+
+    this.state.data = data;
+  }
+
+  onValuesChange = (changedValue) => {};
+
+  render() {
+    return (
+      <div>
+        <a
+          href="https://docs.camunda.org/manual/7.16/reference/bpmn20/events/timer-events/"
+          target="_blank"
+        >
+          参考文档1
+        </a>
+        &nbsp;
+        <a
+          href="https://docs.camunda.io/docs/components/modeler/bpmn/timer-events/"
+          target="_blank"
+        >
+          参考文档2
+        </a>
+        <Form
+          onValuesChange={this.onValuesChange}
+          initialValues={this.state.data}
+          layout={'vertical'}
+        >
+          <Form.Item
+            label="开始时间 timeDate"
+            name="timeDate"
+            extra="触发时间 如2019-10-01T12:00:00Z"
+          >
+            <Input />
+          </Form.Item>
+
+          <Form.Item label="持续时间 timeDuration" name="timeDuration" extra="PnYnMnDTnHnMnS">
+            <Input />
+          </Form.Item>
+
+          <Form.Item label="循环时间 timeCycle" name="timeCycle" extra="包含持续时间和次数 如PT5M">
+            <Input />
+          </Form.Item>
+        </Form>
+      </div>
+    );
+  }
+}

package/src/components/flow/design/form/UserTaskForm.jsx

@@ -0,0 +1,211 @@
+import React from 'react';
+import {Card, Divider, Form, Input, Select} from 'antd';
+import BpmnUtils from '../../BpmnUtils';
+import {HttpUtil} from "../../../../framework";
+
+
+const PREFIX = 'flowable:';
+
+
+export default class extends React.Component {
+    state = {
+        assignmentType: null,
+        assignmentTypeList: [],
+        assignmentObjectList: [],
+
+        assignmentTypeMap: {},
+
+        initData: {},
+
+        loading: true,
+
+        formKeyOptions:[]
+    };
+
+    formRef = React.createRef();
+
+    destroyed = false;
+
+    constructor(props) {
+        super(props);
+
+        const data = {};
+        data.assignmentType = this.props.bo.get('flowable:assignmentType');
+        data.assignmentObject = this.props.bo.get('flowable:assignmentObject');
+        data['flowable:assignee'] = this.props.bo.get('flowable:assignee');
+        data['flowable:formKey'] = this.props.bo.get('flowable:formKey');
+        this.state.initData = data;
+        this.state.assignmentType = data.assignmentType
+
+        if(this.props.model.formKeyList){
+            this.state.formKeyOptions = props.model.formKeyList.map(k=>{
+                return {
+                    label:k.label,
+                    value:k.value
+                }
+            })
+        }
+
+    }
+
+    componentDidMount() {
+        const {initData} = this.state;
+        HttpUtil.get('admin/flowable/model/assignmentTypeList').then(assignmentTypeList => {
+            if (this.destroyed) {
+                return;
+            }
+
+            const assignmentTypeMap = {};
+
+            assignmentTypeList.forEach((a) => {
+                assignmentTypeMap[a.code] = a;
+            });
+
+            this.setState({assignmentTypeList, assignmentTypeMap});
+
+            // 如果已指定分配类型
+            if (initData.assignmentType) {
+                const assignmentTypeInfo = assignmentTypeMap[initData.assignmentType];
+
+                if (assignmentTypeInfo) {
+                    this.setState({assignmentTypeInfo});
+                    this.loadAssignmentObjectTree(initData.assignmentType);
+                }
+
+                // 如果已指定分配对象
+                if (initData.assignmentObject != null && assignmentTypeInfo != null) {
+                    if (assignmentTypeInfo.multiple && !Array.isArray(initData.assignmentObject)) {
+                        initData.assignmentObject = initData.assignmentObject.split(',');
+                    }
+                }
+            }
+            this.setState({loading: false});
+            console.log('initData', initData);
+        });
+    }
+
+    loadAssignmentObjectTree = (assignmentTypeCode) => {
+        const url = 'admin/flowable/model/assignmentObjectTree?code=' + assignmentTypeCode;
+        HttpUtil.get(url).then((rs) => {
+            this.setState({assignmentObjectList: rs});
+        });
+    };
+
+
+    onValuesChange = (changed, values) => {
+        for (let k in changed) {
+            let v = changed[k];
+            let fullKey = k.startsWith(PREFIX) ? k : PREFIX + k;
+            if (v == null) {
+                BpmnUtils.removeProperty(this.props.bo, fullKey);
+            } else {
+                this.props.bo.set(fullKey, v);
+            }
+
+            // 选择用户或角色等具体
+            switch (k) {
+                case 'assignmentObject':
+                    this.onAssignmentObjectChange(k, v, values)
+                    break;
+                case 'assignmentType':
+                    this.setState({assignmentType: v})
+                    this.onAssignmentTypeChange(v)
+                    break;
+            }
+
+        }
+    };
+
+    onAssignmentTypeChange = (type) => {
+        let exp = type === 'assigneeExpression';
+        if (type != null && !exp) {
+            this.loadAssignmentObjectTree(type);
+        }
+
+        if (!exp) {
+            const assignmentTypeInfo = this.state.assignmentTypeMap[type];
+            if (assignmentTypeInfo.multiple) {
+                this.formRef.current.setFieldsValue({assignmentObject: []});
+            } else {
+                this.formRef.current.setFieldsValue({assignmentObject: null});
+            }
+        }
+
+        BpmnUtils.removeProperty(this.props.bo, PREFIX + 'assignmentObject');
+        BpmnUtils.removeProperty(this.props.bo, PREFIX + 'assignee');
+        BpmnUtils.removeProperty(this.props.bo, PREFIX + 'candidateGroups');
+        BpmnUtils.removeProperty(this.props.bo, PREFIX + 'candidateUsers');
+    }
+
+
+    onAssignmentObjectChange = (k, v, values) => {
+        // 设置自定义属性
+        const typeInfo = this.state.assignmentTypeMap[values.assignmentType];
+        const xmlKey = typeInfo.xmlAttribute;
+        this.props.bo.set(PREFIX + xmlKey, v);
+    }
+
+
+    componentWillUnmount() {
+        this.destroyed = true;
+    }
+
+    render() {
+        if (this.state.loading) {
+            return <Card loading={true} variant={"borderless"}></Card>;
+        }
+
+        const {assignmentTypeList, assignmentObjectList} = this.state;
+        const assignmentType = this.state.assignmentType;
+        const assignmentTypeInfo = this.state.assignmentTypeMap[assignmentType];
+        const assignmentObjectOptions = assignmentObjectList.map((t) => ({
+                key: t.value,
+                label: t.label,
+                value: t.value
+            }
+        ))
+
+        return <>
+            <Form
+                ref={this.formRef}
+                onValuesChange={this.onValuesChange}
+                initialValues={this.state.initData}
+                layout={'vertical'}
+            >
+                <Form.Item label="人员分配方式" name="assignmentType">
+                    <Select allowClear={true}>
+                        {assignmentTypeList.map((t) => <Select.Option key={t.code} value={t.code}>
+                                {t.label}
+                            </Select.Option>)}
+                        <Select.Option key='assigneeExpression'
+                                       value='assigneeExpression'>办理人表达式</Select.Option>
+                    </Select>
+
+                </Form.Item>
+
+                {assignmentTypeInfo && <Form.Item label="分配目标" name="assignmentObject">
+                        <Select
+                            mode={assignmentTypeInfo.multiple ? 'multiple' : false}
+                            allowClear={true}
+                            showSearch={true}
+                            filterOption={(input, option) => option.label.includes(input)}
+                            options={assignmentObjectOptions}
+                        >
+                        </Select>
+                    </Form.Item>}
+                {assignmentType === 'assigneeExpression' && <Form.Item label='表达式' name='flowable:assignee'>
+                    <Input/>
+                </Form.Item>}
+
+
+
+                <Divider />
+
+                <Form.Item label='指定表单' name='flowable:formKey'>
+                    <Select options={this.state.formKeyOptions} placeholder='请选择表单' allowClear/>
+                </Form.Item>
+
+            </Form>
+        </>;
+    }
+}