vue2-client 1.8.225 → 1.8.227

package/docs/lowcode.md

@@ -1,161 +1,188 @@
 # 奥枫低代码平台
 
-> 低代码平台在使用时分为两个大部分
+> 奥枫低代码平台是一个前端低代码框架，它使用JSON配置来生成页面
+
+
+
+## 概念
+
+### 配置与组件
+
+#### 结构
+
+> 一个配置的结构是这样的
+>
+> ```json
+> {
+>  "page": [
+>      {
+>          "id": "1",
+>          "type": "page",
+>          "title": "第一个页面",
+>          "body": [
+>              [
+>                  {
+>                      "type": "xx组件",
+>                      "span": 12,
+>                      "id": "xx组件_001",
+>                      "selected": false
+>                  }
+>              ],
+>              [...其他行]
+>          ]
+>      }
+>  ]
+> }
+> ```
+> page下的每一个对象，表示一个`页面容器`
+>
+> body中的每一个元素，表示一`行`
+>
+> 每行中的每个元素，表示一个`组件`
+
+> 组件的完整配置是这样的
+>
+> ```json
+> {
+>     "type": "xx组件",
+>     "span": 12,
+>     "id": "xx组件_001",
+>     "selected": false,
+>     "props": {
+>         "值1": "111",
+>         "值2": "222",
+>         ...
+>     },
+>     "selfEvent": [
+>         "action",
+>         ...
+>     ],
+>     "onEvent": {
+>         "action": [
+>             {
+>                 "emitType": "action",
+>                 "eventType": "changeValue",
+>                 "target": "组件_00x",
+>                 "targetKey": "data"
+>             },
+>     	{...}
+>         ]
+>     }
+> }
+> ```
 >
-> 1. 插件
-> 2. 渲染器
+> `type`定义了组件的类型
 >
-> 所以在使用时要将这两个配置好，才可以正确的在编辑器中显示并编辑
-
-> ----------------  **注意**  ----------------
+> `span`定义了组件的宽度
+>
+> `selected`定义了组件当前是否被选中
+>
+> `id`表示组件的唯一标识
 >
-> 所有文件中引用其他文件，请使用@vue2-client，而不是@。
-> 不然琉璃中会将@符解析到自己的src下
+> `props`中定义的是组件可以被改变的值
+>
+> `selfEvent`定义了组件可以发出哪些事件交给低代码平台处理
+>
+> `onEvent`表示每一个事件的具体定义
+>
+> `onEvent`中的每一个对象的key代表了是针对哪种事件的处理
 
+> 在低代码平台中，最小的单位是`组件`，最大的单位是`页面容器`
 
-## 组件注册使用
 
-> 组件要想在低代码平台中展示，并可编辑需要完成一下几点
 
-### 插件
+#### 页面容器
 
-> 插件的用途是，在编辑器中定义该组件有哪些**事件**，哪些可以编辑的**属性**
+> 一个`页面容器`可以是`页面`，`弹框`，`抽屉`等
+>
+> `页面容器`是所有`组件`的容器，`组件`组成了`行`，`行`组成了`页面`
 
-#### 插件定义
 
-> 以下是一个简单的插件声明示例
-```js
-export const XFormTableConfig = {
-  type: 'XFormTable',
-  properties: {
-    queryParamsName: {
-      type: 'string'
-    }
-  },
-  selfEvent: ['action']
-}
-```
 
-> `type`
->
-> 该字段用于描述本组件使用渲染器的类型，如type: '111'
-> 这个组件就会去找名称为'111'的渲染器，来将配置渲染为页面
+#### 组件
 
-> `properties`
+> `组件`是低代码平台的最小单位
 >
-> 该字段用于描述本组件右侧属性编辑栏中，可以展示哪些属性供编辑，
-> 通常所有的props都需要在这里声明
+> 一个组件是某种功能的封装，比如XFormTable是为了展示CRUD表单，XTree是为了展示树型结构
 
-> `selfEvent`
->
-> 该字段用于描述该组件中有哪些事件会交给编辑器统一调用
 
-#### 插件注册
 
-> 定义完成后的插件，需要注册，才会被低代码平台识别
+### 事件
+
+> 在组件中，会因为各种各样的原因，修改一些状态，比如点击搜索，切换标签
 >
-> 在src/utils/lowcode/registerComponentForEditor.js文件中注册插件
+> 这些改动，要通过`事件`的形式，向外层触发，来通知其他组件进行联动。比如在树组件中切换了标签，根据不同的标签在CRUD表单中渲染不同的内容
 >
-> 以下是一个简单的实例，导入刚刚定义好的插件js文件，并将其暴露
+> 这个时候我们就需要对触发改动的`组件`添加`事件`，比如在XFormTable中点击详情，我们希望打开一个抽屉，我们就需要为XFormTable添加一个点击详情的事件
+
+
+
+### 行为
+
+> 行为是`组件`自身内部进行的一系列变动。比如其他组件触发了某个`事件`，这个`组件`需要对这个`事件`进行响应，并在自身内部进行一系列的更新。这就是一种行为
 >
-> 低代码平台会自动来扫描该文件中的定义
+> 还是刚才的例子在XFormTable中点击详情，我们希望打开一个抽屉。那抽屉改变自身的显隐，就是响应点击详情`事件`的一种`行为`
 
 
-```js
-import { XFormTableConfig } from '@vue2-client/base-client/components/common/XFormTable/lowcodeEditorRegister'
 
-export {
-  XFormTableConfig
-}
-```
+## 组件
 
-### 渲染器
+### XFormTable
 
-> 渲染器决定了配置中的每一个组件，该用哪个VUE对象来渲染
->
-> 渲染器不需要配置文件，只需要注册
->
-> 在src/utils/lowcode/registerComponentForRender.js文件中
->
-> 导入vue对象，并将其暴露即可
->
-> vue组件名，就是插件中的type类型
-```js
-import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
+#### 简介
 
-export {
-  XFormTable
-}
-```
+> XFormTable用于展示CRUD表单，它在琉璃中心`CRUD表单`中配置
 
-### 组件本身修改
 
-> 在组件中有些内容需要做出修改以适配低代码平台
->
-> 1. mixin
-> 2. 事件emit
-> 3. props的定义
 
-#### mixin
+#### 属性
 
-> 在低代码平台中，所有组件注册，组件通信都要依赖于mixin。
+> XFormTable需要传入的属性有两个
 >
-> 在渲染器中，必须引入mixin
->
-> mixin所在位置为：src/utils/lowcode/lowcodeComponentMixin.js
+> 1. queryParamsName：琉璃中的`CRUD表单`配置名
+> 2. serviceName：琉璃中的`CRUD表单`配置对应的命名空间
+
 
-```js
-import lowcodeComponentMixin from '@vue2-client/utils/lowcode/lowcodeComponentMixin'
 
-export default {
-    ...
-  mixins: [lowcodeComponentMixin],
-    ...
-```
-#### 事件emit
+#### 事件
 
-> 在低代码平台中，如果需要与其他组件进行通信，
-> 则必须使用低代码平台指定的传递事件的方式
+> XFormTable触发的事件有很多种，因为它触发的事件是不固定的，是在配置中定义的
 >
-> 该方法已在mixin中定义，只需要调用即可
+> **action**：这是XFormTable最常见的属性，在表单中点击详情触发该事件，该事件默认传递的参数为点击对应的这一行的数据
+
+
 
-```js
-    action (record, id, actionType, fun = 'action') {
-      this.$emit(fun, record, id, actionType)
-      this.$lowCodeEmit('action', record)
-    }
-```
+### XTreeOne
 
-#### props
+#### 简介
 
-> require不能为true
+> XTreeOne用于展示一个树形组件
+
+
+
+#### 属性
+
+> XTreeOne需要传入的属性有1个
 >
-> 如果require为true会导致组件无法正确初始化，要么给props一个默认值，
-> 要么从propsData中取值
+> 1. treeData：树中显示的数据，其格式为
 >
-> 所有在插件中定义的properties，都会通过propsData传递，其格式为
-> { a: aValue, b: bValue}
+> ```json
+> [
+>     {
+>         "title":"111",
+>         "key":"111",
+>         "children":[]
+>     },
+>     {
+>         "title":"222",
+>         "key":"222",
+>         "children":[]
+>     }
+> ]
+> ```
 
-## 功能新增
 
-### 事件处理新增
-> 在mixin中，handleComponentCommunication函数新增新的case
-```js
-     handleComponentCommunication (actionType, data, targetKey = undefined, eventOriginalVM = undefined) {
-        ...
-      switch (actionType) {
-        case ...
-        case 'log':
-          this.handleComponentLog(data)
-          break
-      }
-      ...
-    }
-> ```
-> 将新增的处理方法，声明在supportedEventType数组中
-```js
-  supportedEventType: [
-    ...
-    'log'
-  ]
-```
+
+#### 事件
+
+> **onChange**：是该组件唯一触发的事件，在树中点击了某个节点则会被触发，该事件会携带该点击节点的key

package/docs/lowcodeForDeveloper.md

@@ -0,0 +1,192 @@
+# 奥枫低代码平台 —— 开发篇
+
+> 低代码平台在使用时分为两个大部分
+>
+> 1. 插件
+> 2. 渲染器
+>
+> 所以在使用时要将这两个配置好，才可以正确的在编辑器中显示并编辑
+
+> ----------------  **注意**  ----------------
+>
+> 所有文件中引用其他文件，请使用@vue2-client，而不是@。
+> 不然琉璃中会将@符解析到自己的src下
+
+
+## 组件注册使用
+
+> 组件要想在低代码平台中展示，并可编辑需要完成一下几点
+
+### 插件
+
+> 插件的用途是，在编辑器中定义该组件有哪些**事件**，哪些可以编辑的**属性**
+
+#### 插件定义
+
+> 以下是一个简单的插件声明示例
+```js
+export const XFormTableConfig = {
+  type: 'XFormTable',
+  properties: {
+    queryParamsName: {
+      type: 'string'
+    }
+  },
+  selfEvent: ['action']
+}
+```
+
+> `type`
+>
+> 该字段用于描述本组件使用渲染器的类型，如type: '111'
+> 这个组件就会去找名称为'111'的渲染器，来将配置渲染为页面
+
+> `properties`
+>
+> 该字段用于描述本组件右侧属性编辑栏中，可以展示哪些属性供编辑，
+> 通常所有的props都需要在这里声明
+
+> `selfEvent`
+>
+> 该字段用于描述该组件中有哪些事件会交给编辑器统一调用
+
+#### 插件注册
+
+> 定义完成后的插件，需要注册，才会被低代码平台识别
+>
+> 在src/utils/lowcode/registerComponentForEditor.js文件中注册插件
+>
+> 以下是一个简单的实例，导入刚刚定义好的插件js文件，并将其暴露
+>
+> 低代码平台会自动来扫描该文件中的定义
+
+
+```js
+import { XFormTableConfig } from '@vue2-client/base-client/components/common/XFormTable/lowcodeEditorRegister'
+
+export {
+  XFormTableConfig
+}
+```
+
+### 渲染器
+
+> 渲染器决定了配置中的每一个组件，该用哪个VUE对象来渲染
+>
+> 渲染器不需要配置文件，只需要注册
+>
+> 在src/utils/lowcode/registerComponentForRender.js文件中
+>
+> 导入vue对象，并将其暴露即可
+>
+> vue组件名，就是插件中的type类型
+```js
+import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
+
+export {
+  XFormTable
+}
+```
+
+### 组件本身修改
+
+> 在组件中有些内容需要做出修改以适配低代码平台
+>
+> 1. mixin
+> 2. 事件emit
+> 3. props的定义
+> 4. 暴露data
+
+#### mixin
+
+> 在低代码平台中，所有组件注册，组件通信都要依赖于mixin。
+>
+> 在渲染器中，必须引入mixin
+>
+> mixin所在位置为：src/utils/lowcode/lowcodeComponentMixin.js
+
+```js
+import lowcodeComponentMixin from '@vue2-client/utils/lowcode/lowcodeComponentMixin'
+
+export default {
+    ...
+  mixins: [lowcodeComponentMixin],
+    ...
+```
+#### 事件emit
+
+> 在低代码平台中，如果需要与其他组件进行通信，
+> 则必须使用低代码平台指定的传递事件的方式
+>
+> 该方法已在mixin中定义，只需要调用即可
+
+```js
+    action (record, id, actionType, fun = 'action') {
+      this.$emit(fun, record, id, actionType)
+      this.$lowCodeEmit('action', record)
+    }
+```
+
+#### props
+
+> require不能为true
+>
+> 如果require为true会导致组件无法正确初始化，要么给props一个默认值，
+> 要么从propsData中取值
+>
+> 所有在插件中定义的properties，都会通过propsData传递，其格式为
+> { a: aValue, b: bValue}
+
+
+
+#### 暴露data
+
+> 组件经常会改变自身的状态，在低代码平台中，组件在交互时，会用到很多其他组件的状态
+>
+> 比如在XFormTable中，点击了一条信息，弹出一个弹框。在这个弹框编辑完成的时候，我希望给XFormTable点击的那条信息新增几个属性。这个时候就需要在XFormTable点击的时候，就将id保存下来。但我们又不能将这个属性保存为低代码平台全局属性，因为那样会加大日后排查问题的难度
+>
+> 所以需要每个组件，把自身会被调用的属性自己定义，自己暴露给外界
+
+> 组件在引入了mixin之后，会携带一个属性
+>
+> 这个属性就是会暴露给外界的属性，dataForLowCode
+
+> **实现方法**
+>
+> 1. 直接修改属性
+>
+>    直接修改本组件的dataForLowCode即可
+>
+> 2. 调用方法
+>
+>    调用$lowCodeSetData（key, value）方法
+>
+> 3. 在emit时自动保存
+>
+>    在emit时，大概率是要向外界传递参数的，所以我们在$lowCodeEmit方法中，将emit的数据直接保存在了dataForLowCode中，它的key为emit的事件名
+
+
+
+## 功能新增
+
+### 事件处理新增
+> 在mixin中，handleComponentCommunication函数新增新的case
+```js
+     handleComponentCommunication (actionType, data, targetKey = undefined, eventOriginalVM = undefined) {
+        ...
+      switch (actionType) {
+        case ...
+        case 'log':
+          this.handleComponentLog(data)
+          break
+      }
+      ...
+    }
+> ```
+> 将新增的处理方法，声明在supportedEventType数组中
+```js
+  supportedEventType: [
+    ...
+    'log'
+  ]
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.225",
+  "version": "1.8.227",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",