补充文档

2024-12-02 03:48:13 +08:00 · 2019-09-05 09:51:20 +08:00 · 2019-09-05 09:51:20 +08:00 · 626d7440f9
commit 626d7440f9
parent d3c1cbeac2
3 changed files with 157 additions and 19 deletions
--- a/docs/renderers/Form/Combo.md
+++ b/docs/renderers/Form/Combo.md
@ -1,6 +1,6 @@
 ### Combo

-组合模式，支持自由组合多个表单项。
+组合模式，支持自由组合多个表单项。当设置成单选时数据格式为对象，当设置成多选时数据格式为数组，数组成员是对象（flat 模式可以直接是某个表单单项的数值）。

 -   `type` 请设置成 `combo`
 -   `multiple` 默认为 `false` 配置是否为多选模式
@ -29,6 +29,8 @@
 -   `noBorder` 单组表单项是否有边框
 -   **还有更多通用配置请参考** [FormItem](./FormItem.md)

+#### 单行模式
+
 ```schema:height="450" scope="form"
 [
 {
@ -82,7 +84,7 @@
 ]
 ```

-combo 多行模式。
+#### 多行模式。

 ```schema:height="450" scope="form"
 [
@ -138,3 +140,139 @@ combo 多行模式。

 ]
 ```
+
+#### 条件分支
+
+默认 Combo 渲染的成员是固定表单项的，成员的类型时一致，如果不一致怎么办？这里可以设置条件分支来给不同的成员设置不同的表单项。
+
+如下面的栗子，定义了两种类型：文本和数字，用户新增的时候可以选择是新增文本还是数字。区分是文字和数字的方式是根据成员数据中的 type 字段来决定。
+
+```schema:height="450" scope="form-item"
+{
+  "type": "combo",
+  "name": "combo-conditions2",
+  "label": "多选",
+  "value": [
+    {
+      "type": "text"
+    }
+  ],
+  "multiLine": true,
+  "multiple": true,
+  "typeSwitchable": false,
+  "conditions": [
+    {
+      "label": "文本",
+      "test": "this.type === \"text\"",
+      "scaffold": {
+        "type": "text",
+        "label": "文本",
+        "name": ""
+      },
+      "controls": [
+        {
+          "label": "名称",
+          "name": "label",
+          "type": "text"
+        },
+        {
+          "label": "字段名",
+          "name": "name",
+          "type": "text"
+        }
+      ]
+    },
+    {
+      "label": "数字",
+      "test": "this.type === \"number\"",
+      "scaffold": {
+        "type": "number",
+        "label": "数字",
+        "name": ""
+      },
+      "controls": [
+        {
+          "label": "名称",
+          "name": "label",
+          "type": "text"
+        },
+        {
+          "label": "字段名",
+          "name": "name",
+          "type": "text"
+        },
+        {
+          "label": "最小值",
+          "name": "min",
+          "type": "number"
+        },
+        {
+          "label": "最大值",
+          "name": "max",
+          "type": "number"
+        },
+        {
+          "label": "步长",
+          "name": "step",
+          "type": "number"
+        }
+      ]
+    }
+  ]
+}
+```
+
+-   `conditions` Array<Condition> 数组，每个成员是一种类型
+  - `conditions[x].label` 类型名称
+  - `conditions[x].test` 表达式，目标成员数据是否属于这个类型？
+  - `conditions[x].scaffold` 初始数据，当新增的时候直接使用此数据。
+  - `conditions[x].controls` 该类型的表单设置。
+- `typeSwitchable` 类型是否允许切换，如果设置成 true 会多一个类型切换的按钮。
+
+
+#### Tabs 模式
+
+默认成员是一个一个排列的，如果数据比较多优点让人眼花缭乱。所以 Combo 支持了 tabs 的排列方式。
+
+```schema:height="350" scope="form-item"
+{
+  "type": "combo",
+  "name": "combo101",
+  "label": "组合多条多行",
+  "multiple": true,
+  "multiLine": true,
+  "value": [
+    {}
+  ],
+  "tabsMode": true,
+  "tabsStyle": "card",
+  "maxLength": 3,
+  "controls": [
+    {
+      "name": "a",
+      "label": "文本",
+      "type": "text",
+      "placeholder": "文本",
+      "value": "",
+      "size": "full"
+    },
+    {
+      "name": "b",
+      "label": "选项",
+      "type": "select",
+      "options": [
+        "a",
+        "b",
+        "c"
+      ],
+      "size": "full"
+    }
+  ]
+}
+```
+
+- `tabsMode` boolean 用来开启此模式
+- `tabsStyle` string 样式，可选：`line`、`card` 或者 `radio`.
+- `tabsLabelTpl` 用来生成标题的模板，默认为：`成员 ${index|plus}`
+
+注意：这是新引入的功能，目前还不支持拖拽组合使用。且此模式只有多选时才能生效。
--- a/docs/renderers/Form/Date.md
+++ b/docs/renderers/Form/Date.md
@ -6,7 +6,7 @@
 -   `format` 默认 `X` 即时间戳格式，用来提交的时间格式。更多格式类型请参考 [moment](http://momentjs.com/).
 -   `inputFormat` 默认 `YYYY-MM-DD` 用来配置显示的时间格式。
 -   `placeholder` 默认 `请选择日期`
-  `ranges` 日期快捷键，如： `"today,3dayslater"` 可用范围: `today, yesterday, 2dayago, 3dayago, 7daysago, 90daysago, thisweek, thismonth, prevmonth, prevquarter, thisquarter, tomorrow, 2dayslater, 3dayslater, 7dayslater, 90dayslater, endofthisweek, endofthismonth`
+-  `shortcuts` 日期快捷键，如： `"today,3dayslater"` 可用关键字: `today, yesterday, 2dayago, 3dayago, 7daysago, 90daysago, thisweek, thismonth, prevmonth, prevquarter, thisquarter, tomorrow, 2dayslater, 3dayslater, 7dayslater, 90dayslater, endofthisweek, endofthismonth`
 -   `value` 这里面 value 需要特殊说明一下，因为支持相对值。如：
    -   `-2mins` 2 分钟前
    -   `+2days` 2 天后
@ -24,7 +24,7 @@
      "type": "date",
      "name": "select",
      "label": "日期",
-      "ranges": "today,3dayslater"
+      "shortcuts": "today,3dayslater"
    },

    {
--- a/src/components/DatePicker.tsx
+++ b/src/components/DatePicker.tsx
@ -546,7 +546,7 @@ class CustomDaysView extends React.Component<CustomDaysViewProps> {
 }


-const availableRanges: {[propName: string]: any} = {
+const availableShortcuts: {[propName: string]: any} = {
    today: {
        label: '今天',
        date: (now: moment.Moment) => {
@ -697,7 +697,7 @@ export interface DateProps {
    defaultValue?: any;
    onChange: (value: any) => void;
    value: any;
-    ranges: string;
+    shortcuts: string;
    [propName: string]: any;
 }

@ -708,9 +708,9 @@ export interface DatePickerState {
 }

 export class DatePicker extends React.Component<DateProps, DatePickerState> {
-    static defaultProps: Pick<DateProps, 'viewMode' | 'ranges'> = {
+    static defaultProps: Pick<DateProps, 'viewMode' | 'shortcuts'> = {
        viewMode: 'days',
-        ranges: '',
+        shortcuts: '',
    };
    state: DatePickerState = {
        isOpened: false,
@ -868,7 +868,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
            timeConstraints,
            popOverContainer,
            clearable,
-            ranges
+            shortcuts
        } = this.props;

        const isOpened = this.state.isOpened;
@ -920,22 +920,22 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
                            overlay
                            onClick={this.handlePopOverClick}
                        >
-                            {ranges ? (
-                                <ul className={`${ns}DatePicker-rangers`}>
-                                    {(typeof ranges === 'string'
-                                        ? ranges.split(',')
-                                        : Array.isArray(ranges)
-                                        ? ranges
+                            {shortcuts ? (
+                                <ul className={`${ns}DatePicker-shortcuts`}>
+                                    {(typeof shortcuts === 'string'
+                                        ? shortcuts.split(',')
+                                        : Array.isArray(shortcuts)
+                                        ? shortcuts
                                        : []
                                    )
-                                        .filter(key => !!availableRanges[key])
+                                        .filter(key => !!availableShortcuts[key])
                                        .map(key => (
                                            <li
-                                                className={`${ns}DateRangePicker-ranger`}
-                                                onClick={() => this.selectRannge(availableRanges[key])}
+                                                className={`${ns}DatePicker-shortcut`}
+                                                onClick={() => this.selectRannge(availableShortcuts[key])}
                                                key={key}
                                            >
-                                                <a>{availableRanges[key].label}</a>
+                                                <a>{availableShortcuts[key].label}</a>
                                            </li>
                                        ))}
                                </ul>