From a2f76d7455933f4b39649ff120ac9453a0923acc Mon Sep 17 00:00:00 2001 From: madisonlin Date: Mon, 10 Aug 2020 09:56:00 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(components):=20=E4=BF=AE=E5=A4=8Dmonaco?= =?UTF-8?q?-editor=E5=8A=A0=E8=BD=BDjson=20worker=E6=8A=A5=E9=94=99?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 使用monaco-editor编辑json文件，且开启json验证时，有可能因为加载不到json worker, monaco.languages对象下会没有json属性，会报undefined错误，进而导致整个编辑器无法使用 --- src/components/Editor.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index 20281a4bd..cc071395f 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -16,7 +16,7 @@ function filterUrl(url: string) { } (window as any).MonacoEnvironment = { - getWorkerUrl: function(moduleId: string, label: string) { + getWorkerUrl: function (moduleId: string, label: string) { let url = '/pkg/editor.worker.js'; if (label === 'json') { @@ -202,7 +202,7 @@ export class Editor extends React.Component { }); // json 默认开启验证。 - monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ + monaco.languages.json?.jsonDefaults.setDiagnosticsOptions({ enableSchemaRequest: true, validate: true, allowComments: true From a14fff73a2bf57621976e042ec2df977643b3859 Mon Sep 17 00:00:00 2001 From: RickCole21 Date: Mon, 10 Aug 2020 16:20:04 +0800 Subject: [PATCH 2/2] =?UTF-8?q?add=20doc=EF=BC=9Acrud.defaultParams?= =?UTF-8?q?=E3=80=81=E9=80=89=E6=8B=A9=E5=99=A8=E8=A1=A8=E5=8D=95=E9=A1=B9?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=80=BC=E6=95=B0=E6=8D=AE=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E4=B8=80=E8=87=B4=E6=80=A7=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/crud.md | 42 ++++++++++++++++ docs/components/form/index.md | 73 ++++++++++++++++++++++++++++ docs/components/form/options.md | 85 ++++++++++++++++++++++++++++++--- 3 files changed, 194 insertions(+), 6 deletions(-) diff --git a/docs/components/crud.md b/docs/components/crud.md index 216e405c8..c6f7e3311 100755 --- a/docs/components/crud.md +++ b/docs/components/crud.md @@ -338,6 +338,48 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。 如果想前端实现过滤功能，请看[前端一次性加载](#前端一次性加载)部分。 +## 配置默认请求参数 + +可以配置`defaultParams`，来指定拉取接口时的默认参数： + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample", + "defaultParams": { + "perPage": 50 + }, + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +例如上例中，配置`{ perPage: 50 }`，指定分页的默认每页数据条数为 50 条。 + ## 数据源接口轮训 可以配置`interval`来实现数据接口轮训功能，默认最低为`3000`毫秒， diff --git a/docs/components/form/index.md b/docs/components/form/index.md index 30f7fd67f..ad00d3856 100755 --- a/docs/components/form/index.md +++ b/docs/components/form/index.md @@ -415,6 +415,79 @@ Form 支持轮训初始化接口，步骤如下： } ``` +### 静态初始化数据域 + +我们也可以手动设置 form 的数据域来初始化多个表单项值 + +```schema:height="330" scope="body" +{ + "type": "form", + "data": { + "name": "rick", + "email": "rick@gmail.com" + }, + "title": "用户信息", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名" + }, + { + "type": "email", + "name": "email", + "label": "邮箱" + } + ] + } +``` + +### 数据格式一致性问题 + +当表单来初始化表单项值时，需要保持数据格式的一致性。 + +如果表单初始化的值与表单项配置的数据格式不符合，而且用户没有再次操作该表单项，而直接提交表单，那么会将当前默认值原封不动的提交给后端，也许会导致不一致性的问题，我们看一个例子： + +```schema:height="260" scope="body" +{ + "type": "form", + "data": { + "select": ["a", "c"] + }, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "multiple": true, + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +上例中， `select` 我们配置了`"multiple": true`，预期中，我们希望选中 `A` 和 `C` 项时，表单项的数据格式为：`"a,c"`，但是我们表单数据域中，`select`默认值为`"value": ["a", "c"]`，并不符合我们当前表单项的数据格式配置，这样会导致两个问题： + +1. 有可能不会默认选中 `A` 和 `C` 选项； +2. 当不操作该表单项，直接提交时，预期是：`"a,c"`，但提交给后端的数据为：`["a", "c"]`，导致了不一致性的问题。 + +> 通过 `initApi` 配置默认值同理，不再赘述 + +因此一定确保默认值与选择器表单项数据格式配置相匹配。 + ## 表单提交 配置`api`属性，当表单执行提交行为时，会默认将当前表单数据域中的数据使用`post`方式发送给所配置`api` diff --git a/docs/components/form/options.md b/docs/components/form/options.md index 86fa182cd..b6e05dd08 100755 --- a/docs/components/form/options.md +++ b/docs/components/form/options.md @@ -12,7 +12,7 @@ order: 2 它派生自 [表单项](./formitem)，拥有表单项所有的特性。 -## 静态选项组 options +## 选项组格式 选择器表单项可以通过配置一组选项(`options`)，可以供给用户选择，如下： @@ -45,9 +45,7 @@ order: 2 `options`属性配置的对象数组就是`select`选择器组件的选项组。 -### 选项组格式 - -##### 标准格式 +### 标准格式 ```json { @@ -104,7 +102,7 @@ order: 2 } ``` -##### 简单格式 +### 简单格式 也可以配置简单的字符串或数字数组，此时默认`label`和`value`保持一致 @@ -123,6 +121,37 @@ order: 2 } ``` +## 静态选项组 options + +可以使用静态方式，配置一组选项组： + +```schema:height="260" scope="body" +{ + "type": "form", + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + ## 动态选项组 source ### 通过数据域中变量配置 @@ -205,7 +234,7 @@ order: 2 } ``` -## 自动选中 +## 默认值/自动选中 value 我们知道表单项可以通过配置`value`属性来设置默认值 @@ -273,6 +302,50 @@ order: 2 } ``` +### 数据格式一致性问题 + +当使用 `source` 或 `value` 配置默认值的时候，需要保持数据格式的一致性。 + +如果使用 `source` 或 `value` 配置的默认值与当前表单项配置的数据格式不符合，而且用户没有再次操作该表单项，而直接提交表单，那么会将当前默认值原封不动的提交给后端，可能会导致不一致性的问题，我们看一个例子： + +```schema:height="260" scope="body" +{ + "type": "form", + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "multiple": true, + "value": ["a", "c"], + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +上例中， `select` 我们配置了`"multiple": true`，预期中，我们希望选中 `A` 和 `C` 项时，表单项的数据格式为：`"a,c"`，但是我们设置了`"value": ["a", "c"]`，并不符合我们当前表单项的数据格式配置，这样会导致两个问题： + +1. 有可能不会默认选中 `A` 和 `C` 选项； +2. 当不操作该表单项，直接提交时，预期是：`"a,c"`，但提交给后端的数据为：`["a", "c"]`，导致了不一致性的问题。 + +> 通过 `source` 配置默认值同理，不再赘述 + +因此一定确保默认值与选择器表单项数据格式配置相匹配。 + ## 多选 multiple 大部分选择器组件默认是单选的，可以配置`"multiple": true`支持多选。