Search before asking

• I had searched in the issues and found no similar feature requirement.

Description

Purpose

Task components can be rendered by a JSON returned from back end so that adding, deleting and changing task components without redeployment.

How

This is a preliminary implementation. If you have ideas or questions, please let us know by leaving a comment.

The operation flow chart is as shown in Chart 1-1.

Chart 1-1: the operation flow chart.

The managers chart is as shown in Chart 1-2.

Chart 1-2: the managers chart.

Here let's briefly introduce the managers.

Parser Manager

Form Item

Form Item supports all the props of the FormItemGi component in Naive UI and others keys such as type and field. Here is an example shown as in Json 1-1.

{ 
  "type": "select",
  "field": "processDefinitionCode",
  "span": 24,
  "name": "project.node.child_node"
}

Json 1-1: form item example.

Template

We will parse the template through the template method of lodashjs.

Locales

Locales are configured separately as shown in Json 1-2. To get the specific value from locales, we use dot notation as shown in Json 1-3.

{
  "zh_CN": {
    "task": {
      "name": "名称"
    }
  },
  "en_US": {
    "task": {
      "name": "Name"
    }
  }
}

Json 1-2: the locales configuration example

{
 "label": "task.name"
}

Json 1-3: get the specific value from locales

Options

Options are also configured separately as shown in Json 1-4 because there will be a common situation of different tasks. To the specific value without any cases, we can just set the key of the option shown as in Json 1-5. Sometimes we need to get dropdown options for different cases with an expression shown in Json 1-6.

{
  "options": {
    "status": [
      {
        "value": "SUCCESS",
        "label": "project.node.success"
      },
      {
        "value": "FAILURE",
        "label": "project.node.failed"
      }
    ]
  }
}

Json 1-4: the options configuration example

{
  "type": "select",
  "field": "status",
  "span": 10,
  "options": "status"
}

Json 1-5: options in one case

{
  "type": "select",
  "field": "status",
  "span": 10,
  "options": {
    "${a} === 1" : "status"
  }
}

Json 1-6: options in more than one case

Component Manager

Normal components

Business Components

Custom Component

Validator Manager

Validators

Rules

Action Manager

Request

To get options by http request. Here is an example with a parameter shown as in Json 1-7.

[
  {
    "label": "选项1",
    "type": "select",
    "name": "a",
    "options": "aOptions"
  },
  {
    "label": "选项2",
    "type": "select",
    "name": "b",
    "source": "/ds/api/options/level2?a=${a}",
  }
]

Json 1-7 request action example

Value Change

After the value of one form item changes, other form items will be shown or hidden.

Evaluator Manager

Formatter Manager

Data Manager

Includes cached data and others.

Adaptor Manager

JSON Struct

{ 
  "locales": {
    "zh_CN": {},
    "en_US": {}
  },
  "options": {},
  "tasks": []
}

Json 1-8: JSON struct.

Are you willing to submit a PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct