From 626d7440f96fcef8967c35a7fb84077c0ae77c5c Mon Sep 17 00:00:00 2001 From: liaoxuezhi Date: Thu, 5 Sep 2019 09:51:20 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/renderers/Form/Combo.md | 142 +++++++++++++++++++++++++++++++++- docs/renderers/Form/Date.md | 4 +- src/components/DatePicker.tsx | 30 +++---- 3 files changed, 157 insertions(+), 19 deletions(-) diff --git a/docs/renderers/Form/Combo.md b/docs/renderers/Form/Combo.md index 438ec23d1..28edc9411 100644 --- 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 数组，每个成员是一种类型 + - `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}` + +注意：这是新引入的功能，目前还不支持拖拽组合使用。且此模式只有多选时才能生效。 diff --git a/docs/renderers/Form/Date.md b/docs/renderers/Form/Date.md index 7925bc990..85270dded 100644 --- 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" }, { diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx index e0c1f0f35..c271e2b7e 100644 --- a/src/components/DatePicker.tsx +++ b/src/components/DatePicker.tsx @@ -546,7 +546,7 @@ class CustomDaysView extends React.Component { } -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 { - static defaultProps: Pick = { + static defaultProps: Pick = { viewMode: 'days', - ranges: '', + shortcuts: '', }; state: DatePickerState = { isOpened: false, @@ -868,7 +868,7 @@ export class DatePicker extends React.Component { timeConstraints, popOverContainer, clearable, - ranges + shortcuts } = this.props; const isOpened = this.state.isOpened; @@ -920,22 +920,22 @@ export class DatePicker extends React.Component { overlay onClick={this.handlePopOverClick} > - {ranges ? ( -
    - {(typeof ranges === 'string' - ? ranges.split(',') - : Array.isArray(ranges) - ? ranges + {shortcuts ? ( +
      + {(typeof shortcuts === 'string' + ? shortcuts.split(',') + : Array.isArray(shortcuts) + ? shortcuts : [] ) - .filter(key => !!availableRanges[key]) + .filter(key => !!availableShortcuts[key]) .map(key => (
    • this.selectRannge(availableRanges[key])} + className={`${ns}DatePicker-shortcut`} + onClick={() => this.selectRannge(availableShortcuts[key])} key={key} > - {availableRanges[key].label} + {availableShortcuts[key].label}
      • ))}