Merge pull request #131 from vipshop/develop

0.27.9
vipshop · Nov 30, 2020 · b2d2202 · b2d2202
2 parents 709ab0b + 8a37827
commit b2d2202
Show file tree

Hide file tree

Showing 26 changed files with 311 additions and 685 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -6,8 +6,9 @@
   },
   "private": true,
   "dependencies": {
-    "@ams-team/ams": "^0.27.0",
+    "@ams-team/ams": "latest",
     "@ams-team/block-ams-config": "latest",
+    "@ams-team/block-calendar": "latest",
     "@ams-team/block-chart": "latest",
     "@ams-team/json-stringify": "latest",
     "element-ui": "^2.11.1",

diff --git a/docs/zh-CN/.vuepress/components/changelog/logs.js b/docs/zh-CN/.vuepress/components/changelog/logs.js
@@ -1,9 +1,17 @@
 // 更新日志
 export default [
     {
-        version: '0.27.0',
-        date: '2020.09.30',
+        version: '0.27.9',
+        date: '2020.11.26',
         log: [
+            'feat: form区块支持changeConfig配置',
+            'fix: 修复list区块在前端分页下，不触发current-change事件问题',
+            'feat: 更正block-chart的颜色分布',
+            'fix: 内置的用户信息区块和 ELEMENT UI 框架中图片放大功能的样式冲突',
+            'feat: 默认@list的action中，将requestDataParse的处理参数改为res.data',
+            'feat: 默认@list的action中，将responseDataParse处理范围从data.list变更为data',
+            'feat: 简化operaions中自定义field的配置',
+            'feat: operations增加changeConfig配置',
             'feat: 列表拖动功能支持根据 SortableJS 官方文档配置参数',
             'fix: 修正列表拖拽某列的使用方法'
         ]

diff --git a/docs/zh-CN/.vuepress/components/entry.js b/docs/zh-CN/.vuepress/components/entry.js
@@ -25,6 +25,7 @@ import 'highlight.js/styles/tomorrow-night-eighties.css';
 // import calendar from '@ams-team/block-calendar';
 // import card from '@ams-team/block-card';
 import chart from '@ams-team/block-chart';
+// import amsConfig from '../../../../packages/block-ams-config/src'
 import amsConfig from '@ams-team/block-ams-config';
 
 Vue.use(ElementUI);

diff --git a/docs/zh-CN/.vuepress/config.js b/docs/zh-CN/.vuepress/config.js
@@ -38,7 +38,7 @@ module.exports = {
       },
       {
         text: '示例',
-        link: '/example/'
+        link: 'https://vipshop.github.io/ams/example/#/'
       },
       {
         text: '版本更新',

diff --git a/docs/zh-CN/api/block.md b/docs/zh-CN/api/block.md
@@ -305,7 +305,8 @@ operations结构类型如下：
 		show?: String | Object | Function,
 		style: {
 			[styleName: String]: String
-		}
+        },
+        changeConfig: Function(field: Object, context: Object)
 	}
 }
 ```

diff --git a/docs/zh-CN/api/quickstart.md b/docs/zh-CN/api/quickstart.md
@@ -40,11 +40,11 @@ Vue.use(ams);
 <!-- element-ui -->
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css"/>
 <!-- 或者使用vipshop定制UI主题 -->
-<link rel="stylesheet" href="https://h5rsc.vipstatic.com/ams/[email protected].0/index.css"/>
+<link rel="stylesheet" href="https://h5rsc.vipstatic.com/ams/[email protected].9/index.css"/>
 
 <script src="https://unpkg.com/[email protected]/lib/index.js"></script>
 
-<script src="https://h5rsc.vipstatic.com/ams/[email protected].0.js"></script>
+<script src="https://h5rsc.vipstatic.com/ams/[email protected].9.js"></script>
 ```
 
 尝试AMS的最简单的方式是使用[JSRUN上的官方入门Demo](http://jsrun.net/sehKp/edit?utm_source=website)。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。

diff --git a/docs/zh-CN/api/resource.md b/docs/zh-CN/api/resource.md
@@ -30,7 +30,16 @@ ams.resource('demo-resource', {
             path: 'list',
             method: 'post',
             successCode: 1,
-            transform(data) { // 仅list和read有transform方法，用于在AMS赋值给区块前，转化接口返回数据
+            // 仅list和read有transform方法，用于在AMS赋值给区块前，转化接口返回数据，如果是list组件，这里的data代表的是data.list
+            transform(data) {
+                return data
+            },
+            // 所有内置action都有的方法
+            requestDataParse(data) {
+                return data
+            },
+            // 仅list和read有transform方法，用于在AMS赋值给区块前，转化接口返回数据，如果是list组件，这里的data代表的是data
+            responseDataParse(data) {
                 return data
             }
         }
@@ -55,17 +64,6 @@ ams.resource('demo-resource', {
 })
 ```
 
-## 使用资源
-
-根据资源名字来使用某个资源，在注册`block`时指定资源名字来使用
-
-```javascript
-ams.block('demo', {
-  resource: 'demo-resource',
-  ...
-});
-```
-
 以上注册了名字为 `demo-resource` 的资源，而这个资源由三部分组成，分别时`key` `api` `fields`，其中这三部分的意义为：
 
 - `key`： 【非必须】标识该resource的`keyName`，有些场景需要通过 `queryString` 传入，通过解析 `key=value` 获取
@@ -76,7 +74,7 @@ ams.block('demo', {
 
 - `fields`： resource里的详细的字段描述，点击前往[更深入的了解fields](/field/)
 
-## field 通用配置
+## field通用配置
 
 | 参数 | 类型 | 是否必传 | 说明
 | -- | -- | -- | --
@@ -95,6 +93,17 @@ ams.block('demo', {
 | view | function | 否 | view函数，显示状态下生效（`ctx: 'view'`）
 | labelWidth | string | 否 | form内label的显示宽度
 
+## 使用资源
+
+根据资源名字来使用某个资源，在注册`block`时指定资源名字来使用
+
+```javascript
+ams.block('demo', {
+  resource: 'demo-resource',
+  ...
+});
+```
+
 接下来，我们将介绍AMS另外一个核心概念`区块`
 
 [下一节：区块](/api/block.html)
diff --git a/docs/zh-CN/api/template.md b/docs/zh-CN/api/template.md
@@ -19,7 +19,7 @@ Template: Template 模板
         <script src="https://h5rsc.vipstatic.com/ams/babel-polyfill/7.4.0/polyfill.min.js"></script>
         <script src="https://h5rsc.vipstatic.com/ams/[email protected]"></script>
         <script src="https://h5rsc.vipstatic.com/ams/[email protected]/index.js"></script>
-        <script src="https://h5rsc.vipstatic.com/ams/[email protected].0.js"></script>
+        <script src="https://h5rsc.vipstatic.com/ams/[email protected].9.js"></script>
     </head>
     <body>
         <script>

diff --git a/docs/zh-CN/api/try.md b/docs/zh-CN/api/try.md
@@ -6,4 +6,4 @@
 
 接下来，让我们学习如何使用AMS来配置出这些页面吧
 
-[下一节：快速起步](/api/getstart.html)
+[下一节：快速起步](/api/quickstart.html)
diff --git a/docs/zh-CN/block/api.md b/docs/zh-CN/block/api.md
@@ -55,7 +55,7 @@ style: {
 }
 ```
 
-## data
+## data 
 
 - 类型：`object`
 - 默认值：`undefined`
@@ -87,7 +87,7 @@ data: {
 当type为`error`, data配置如下
 ```js
 data: {
-    img: 'Url | Base64',
+    img: 'Url | Base64',    
     title: 'String',      // 默认为Error
     subtitle: 'String'    // 默认为Opps，some error happen !
 }
@@ -195,6 +195,8 @@ fields: {
 
 `show`代表按钮出现的条件，可以配置string或者function(content)，content是按钮所在行的数据
 
+`changeConfig` 可以对该字段的配置做处理，接受function(field, context)，其中field是指该字段的配置，content是按钮所在行的数据
+
 ```js
 operations: {
   dropdown: {
@@ -284,6 +286,9 @@ operations: {
     tooltip: '审核通过',
     show(context) {
       return context.status !== ActivitiesAuditStatus.Draft ? context.operations.allow_audit : false
+    },
+    changeConfig(field, context) {
+      return field
     }
   },
   reject: {
@@ -321,7 +326,7 @@ operations: {
 
 上述例子中，当点击submit按钮时，会调用`events`中的同名events方法，若没有绑定同名event则调用同名action
 
-点击前往[更多operations相关介绍](/api/operation.html)
+点击前往[更多operations相关介绍](/api/deep-operation.html)
 
 ## blocks
 

diff --git a/docs/zh-CN/field/text.md b/docs/zh-CN/field/text.md
@@ -46,30 +46,9 @@ title: Text 文本
 <field-text-demo blockName="textField7"/>
 </ClientOnly>
 
-### 配置参数
-
-| 参数 | 类型（可选值） | 必填 | 说明
-| -- | -- | -- | --
-| type | string | 是 | 字段类型
-| label | string | 否 | 标签文本
-| ctx | `edit`, `view` | 否 | `edit` 为编辑态，`view` 为展示态，不配置则使用当前block的ctx
-| default | string, number | 否 | 默认值
-| labelWidth | string | 否 | 在form和object内生效，可单独指定当前field的标签文本所占的宽度
-| info | string | 否 | 如配置会在标签处展示tooltip提示
-| desc | string | 否 | 如配置会在ctx为`edit`状态下固定显示在表单项下面
-| hidden | null, boolean | 否 | 默认为`false`，配置为true则改表单项会隐藏
-| show | string, object, function | 否 | 配置后只有满足指定的条件后才显示，实现对目标条件的依赖联动
-| show.name | string | 否 | 目标字段名
-| show.value | string, number | 否 | 目标字段值
-| rules | null, array | 否 | 可以配置多条校验规则，会在form的编辑态通过 `@validate` 来校验，详见 https://github.com/yiminghe/async-validator
-| rules[] | object | 否 | 
-| rules[].require | boolean | 否 | 是否必填
-| rules[].type | `string`, `number`, `boolean`, `method`, `regexp`, `integer`, `float`, `array`, `object`, `enum`, `date`, `url`, `hex`, `email` | 否 | 校验类型
-| props | null, object | 否 | 会透传至底层的element-ui组件作为props属性，或者是原生dom元素的属性
-
-<!-- ### 在线实验室
+### 在线实验室
 <ClientOnly>
 <ams-config name="text" type="field"/>
-</ClientOnly> -->
+</ClientOnly>
 
 组件更多配置可参考Element：[Input 输入框](http://element-cn.eleme.io/#/zh-CN/component/input)中的Input Attributes
diff --git a/examples/router/src/ams-config/cases-block/card.js b/examples/router/src/ams-config/cases-block/card.js
@@ -1,20 +1,6 @@
 import ams from '@ams-team/ams';
 
 ams.block('card', {
-    resources: {
-        /**
-         * 配置数据（资源）
-         * 首先我们需要配置`资源`、用于描述接口的`字段`组成、以及`api`的存取地址
-         */
-        ecahrtRes: {
-            api: {
-                // api前缀
-                prefix: 'https://www.easy-mock.com/mock/5bf25b2b34392218c898a5fd/',
-                // 读取数据接口
-                read: 'read',
-            }
-        }
-    },
     /**
      * 配置区块
      */
@@ -208,7 +194,6 @@ ams.block('card', {
                         height: '480px',
                         margin: '20px auto 0'
                     },
-                    resource: 'ecahrtRes',
                     data: {
                         legend: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
                         xAxis: ['周二', '周二', '周二', '周四', '周五', '周六', '周日'],

diff --git a/examples/router/src/ams-config/cases-block/list/list-operations.js b/examples/router/src/ams-config/cases-block/list/list-operations.js
@@ -57,33 +57,30 @@ ams.block('list-operations', {
     },
 
     operations: {
-        dropdown: {
-            slot: 'searchs',
-            type: 'dropdown',
-            label: '更多搜索',
-            event: 'list',
+        custome: {
+            type: 'select',
+            label: '自定义的搜索字段',
             props: {
-                placeholder: '搜索...'
-            },
-            style: {
-                width: '300px'
-            },
-            fields: {
-                testTextarea: true,
-                testDate: true,
-                testTime: true,
-                testDatetime: true,
-                testSwitch: true
+                options: {
+                    1: 'a',
+                    2: 'b',
+                    3: 'c'
+                }
             }
         },
 
         edit: {
             type: 'button',
-            label: '跳转'
-        },
-        edit2: {
-            type: 'button',
-            label: '跳转2'
+            label: '跳转',
+            props: {
+                disabled: false
+            },
+            changeConfig(field, context) {
+                if (context.testInputnumber > 50) {
+                    field.props.disabled = true;
+                }
+                return field;
+            }
         },
 
         testText: {

diff --git a/examples/router/src/ams-config/cases-block/list/list.js b/examples/router/src/ams-config/cases-block/list/list.js
@@ -110,7 +110,7 @@ ams.block('list', {
         },
         back: {
             type: 'button',
-            label: '回退1',
+            label: '回退',
             props: {
                 size: 'mini'
             }
@@ -163,6 +163,7 @@ ams.block('list', {
         testSelect: {
             slot: 'searchs',
             type: 'field'
+            // desc: '<div style="color: red;">desc校验提示</div>'
             // field: 'testSelect' // field可省略
             // label: '可省略'
         },
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,4 +6,4 @@

		接下来，让我们学习如何使用AMS来配置出这些页面吧

		[下一节：快速起步](/api/getstart.html)
		[下一节：快速起步](/api/quickstart.html)