test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 20:18:03 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #305 from 2betop/master

Browse Source 
文档&样式&form的值扩充
This commit is contained in:
liaoxuezhi 2019-10-24 14:08:16 +08:00 committed by GitHub
commit 0603548b14
5 changed files with 198 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
docs/renderers/CRUD.md
View File

@ -5,7 +5,7 @@
CRUD 支持三种模式：`table`、`cards`、`list`，默认为 `table`。 CRUD 支持三种模式：`table`、`cards`、`list`，默认为 `table`。
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| ------------------------------ | ------------------------------ | ------------------------------- | --------------------------------------------------------------------------------------------------------------------- | |---------------------------------------|--------------------------------|---------------------------------|-----------------------------------------------------------------------------------------------------------------------|
| type | `string` | | `type` 指定为 CRUD 渲染器 | | type | `string` | | `type` 指定为 CRUD 渲染器 |
| mode | `string` | `"table"` | `"table" 、 "cards" 或者 "list"` | | mode | `string` | `"table"` | `"table" 、 "cards" 或者 "list"` |
| title | `string` | `""` | 可设置成空，当设置成空时，没有标题栏 | | title | `string` | `""` | 可设置成空，当设置成空时，没有标题栏 |
@ -173,6 +173,7 @@ CRUD 支持三种模式：`table`、`cards`、`list`，默认为 `table`。
* `indexes` `Array<number>` 通过序号的方式告知更新了哪些成员。 * `indexes` `Array<number>` 通过序号的方式告知更新了哪些成员。
* `rows` `Array<Object>` 修改过的成员集合，数组对象是在原有数据的基础上更新后的结果。 * `rows` `Array<Object>` 修改过的成员集合，数组对象是在原有数据的基础上更新后的结果。
* `rowsDiff` `Array<Object>` 跟 `rows` 不一样的地方是这里只包含本次修改的数据。 * `rowsDiff` `Array<Object>` 跟 `rows` 不一样的地方是这里只包含本次修改的数据。
* `rowsOrigin` `Array<Object>` 跟 `rows` 不一样的地方是这里是修改前段原始数据。
* `unModifiedItems` `Array<Object>` 其他没有修改的成员集合。 * `unModifiedItems` `Array<Object>` 其他没有修改的成员集合。
默认发送的数据有点多，不过可以通过api的数据映射自己选择需要的部分。 默认发送的数据有点多，不过可以通过api的数据映射自己选择需要的部分。
@ -194,3 +195,63 @@ CRUD 支持三种模式：`table`、`cards`、`list`，默认为 `table`。
**响应：** **响应：**
响应没有什么特殊要求，只关注 status 状态。 响应没有什么特殊要求，只关注 status 状态。
### 单条操作
当操作对象是单条数据时这类操作叫单条操作，比如：编辑、删除、通过、拒绝等等。CRUD 的 table 模式可以在 column 通过放置按钮来完成（其他模式参考 table 模式）。比如编辑就是添加个按钮行为是弹框类型的按钮或者添加一个页面跳转类型的按钮把当前行数据的 id 放在 query 中传过去、删除操作就是配置一个按钮行为是 AJAX 类型的按钮，将数据通过 api 发送给后端完成。
CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一个按钮就行了。CRUD 在处理按钮行为的时候会把当前行的完整数据传递过去，如果你的按钮行为是弹出时，还会包含一下信息：
* `hasNext` `boolean` 当按钮行为是弹框时，还会携带这个数据可以用来判断当前页中是否有下一条数据。
* `hasPrev` `boolean` 当按钮行为是弹框时，还会携带这个数据可以判断用来当前页中是否有上一条数据。
* `index` `number` 当按钮行为是弹框时，还会携带这个数据可以用来获取当前行数据在这一页中的位置。
* `prevIndex` `number`
* `nextIndex` `number`
如果你的按钮类型是 AJAX，你也可以限定只发送部分数据比如。
```json
{
"type": "button",
"label": "删除",
"actionType": "ajax",
"api": "delete:/api/xxxx/$id",
"confirmText": "确定要删除？"
}
```
上面这个例子就会发送 id 字段了，如果想要全部发送过去同时还想添加点别的字段就这样：
```json
{
"type": "button",
"label": "删除",
"actionType": "ajax",
"api": {
"method": "post",
"url": "/api/xxxx/$id",
"data": {
"&": "$$",
"op": "delete"
}
},
"confirmText": "确定要删除？"
}
```
这取决于 api 怎么配置，关于 api 的配置说明请[前往这](./Types.md#api)。
### 批量操作
当操作对象是多条数据时这类操作叫批量操作、跟单条操作类似，将按钮放在 crud 的 `bulkActions` 中即可, 添加 bulkActions 后列表会自动出现选择框。CRUD 会准备以下数据供按钮行为使用。
* `items` `Array<object>` 选中的行数据。
* `rows` items 的别名，推荐用 items。
* `unselectedItems` `Array<object>` 没选中的行数据也可获取。
* `ids` `Array<number|string>` 前提是行数据中有 id 字段，或者有指定的 `primaryField` 字段。
* `...第一行所有行数据` 还有第一行的所有行数据也会包含进去。
### 快速编辑
列信息中可以配置 quickEdit 属性来启动快速编辑功能、开启后当鼠标hover到对应的行时，会出现一个编辑的小图标，点开后弹出表单项完成编辑。保存的结果不会立即发送 api 完成保存，除非你配置了立即保存，当所有的编辑都完成了，可以点击表格顶部的提交按钮，crud 将通过 quickSaveApi 通知后端完成保存。更多信息请看 quickSaveApi 和 quickSaveItemApi 的说明。

24
docs/renderers/Form/Form.md
View File

@ -27,7 +27,7 @@
``` ```
| 属性名 | 类型 | 默认值 | 说明 | | 属性名 | 类型 | 默认值 | 说明 |
| --------------------- | ------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | |-------------------------------|--------------------------------------|------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| type | `string` | | `"form"` 指定为 Form 渲染器 | | type | `string` | | `"form"` 指定为 Form 渲染器 |
| mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` | | mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` |
| horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用，用来控制 label | | horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用，用来控制 label |
@ -236,7 +236,27 @@
**发送** **发送**
默认为 `POST` 方式，会将所有表单项整理成一个对象发送过过去。 默认为 `POST` 方式，会将所有表单项整理成一个对象发送过过去。除此之外你开可以主动的获取以下信息。
* `diff` 只会包含diff 结果
* `prinstine` 原始数据。
如:
```json
{
"api": {
"method": "post",
"url": "/api/xxx/save",
"data": {
"modified": "$$",
"diff": "${diff}",
"origin": "${prinstine}"
}
}
}
```
**响应** **响应**

6
scss/components/form/_form.scss
View File

@ -20,6 +20,7 @@
margin-bottom: px2rem(5px); margin-bottom: px2rem(5px);
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
position: relative;
>span { >span {
position: relative; position: relative;
@ -30,9 +31,8 @@
color: $red; color: $red;
font-size: $fontSizeXs; font-size: $fontSizeXs;
position: absolute; position: absolute;
left: 100%; left: px2rem(-7px);
top: px2rem(5px); top: px2rem(4px);
margin-left: px2rem(3px);
line-height: 1; line-height: 1;
} }

2
src/icons/upload.svg
View File

@ -1,6 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" p-id="1463"> xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" p-id="1463">
<g stroke="#666666" stroke-width="2" fill="none" fill-rule="evenodd"> <g stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd">
<path d="M8,12.2426 L8,1.2426"></path> <path d="M8,12.2426 L8,1.2426"></path>
<path d="M4.4648,4.9496 L8.7068,0.7076"></path> <path d="M4.4648,4.9496 L8.7068,0.7076"></path>
<path d="M11.5352,4.9496 L7.2932,0.7076"></path> <path d="M11.5352,4.9496 L7.2932,0.7076"></path>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 529 B

After

Width:  |  Height:  |  Size: 534 B

4
src/store/form.ts
View File

@ -286,7 +286,9 @@ export const FormStore = ServiceStore.named('FormStore')
createObject( createObject(
createObject(self.data.__super, { createObject(self.data.__super, {
diff: diff, diff: diff,
__diff: diff __diff: diff,
pristine: self.pristine,
__pristine: self.pristine
}), }),
self.data self.data
) )