vue2-client 1.10.11 → 1.10.13

package/docs/LowCode/lowcodeForDeveloper.md

@@ -1,230 +1,230 @@
-# 奥枫低代码平台 —— 开发篇
-
-> 低代码平台在使用时分为两个大部分
->
-> 1. 插件
-> 2. 渲染器
->
-> 所以在使用时要将这两个配置好，才可以正确的在编辑器中显示并编辑
-
-> ----------------  **注意**  ----------------
->
-> 所有文件中引用其他文件，请使用@vue2-client，而不是@。
-> 不然琉璃中会将@符解析到自己的src下
-
-> 前端组件嵌套逻辑，组件与低代码平台关系，使用低代码平台渲染页面流程
->
-> 请参考**目录下相关流程图**
-
-## 组件注册使用
-
-> 组件要想在低代码平台中展示，并可编辑需要完成以下几点
-
-### 插件
-
-> 插件的用途是，在编辑器中定义该组件有哪些**事件**，哪些可以编辑的**属性**
-
-#### 插件定义
-
-> 以下是一个简单的插件声明示例
-```js
-export const XFormTableConfig = {
-  type: 'XFormTable',
-  properties: {
-    queryParamsName: {
-      type: 'string',
-      label: '查询配置名',
-      desc: '在琉璃CRUD表单中配置好的查询配置名',
-      required: true
-    }
-  },
-  selfMethods: [
-    {
-      name: 'initConfig',
-      desc: '初始化方法',
-      params: 'config, data'
-    },
-  ]
-  selfEvent: ['action']
-}
-```
-
-> `type`
->
-> 该字段用于描述本组件使用渲染器的类型，如type: '111'
-> 这个组件就会去找名称为'111'的渲染器，来将配置渲染为页面
-
-> `properties`
->
-> 该字段用于描述本组件右侧属性编辑栏中，可以展示哪些属性供编辑，
-> 通常所有的props都需要在这里声明
->
-> 每一个properties含有三个属性
->
-> * type：为其指定类型
-> * label：用于给用户展示该属性的中文名
-> * desc：用户将鼠标放在标题上显示该属性的描述
-> * required：表示此参数必须填写后，组件才可以渲染
-
-> `selfMethods`
->
-> 该字段用于描述本组件可以被其他组件调用哪些方法
->
-> * name：方法名
-> * desc：方法的描述
-> * params：方法的参数
-
-> `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
-> 5. 需要外部修改的变量
-
-#### 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的事件名
-
-#### 需要外部修改的变量
-> 在组件内部，如果有需要外部来修改的变量，应该定义
-> 一个函数来控制变量的修改
->
-> 外侧组件会调用该组件的方法来修改目标变量
->
-> 详见插件定义说明下的 selfMethods 属性
-
-## 功能新增
-
-### 事件处理新增
-> 在mixin中，handleComponentCommunication函数新增新的case
-
-```js
-     handleComponentCommunication (actionType, data, targetKey = undefined, eventOriginalVM = undefined) {
-        ...
-      switch (actionType) {
-        case ...
-        case 'log':
-          this.handleComponentLog(data)
-          break
-      }
-      ...
-    }
-> ```
-
-> 将新增的处理方法，声明在supportedEventType数组中
-
-```js
-  supportedEventType: [
-    ...
-    'log'
-  ]
-```
+# 奥枫低代码平台 —— 开发篇
+
+> 低代码平台在使用时分为两个大部分
+>
+> 1. 插件
+> 2. 渲染器
+>
+> 所以在使用时要将这两个配置好，才可以正确的在编辑器中显示并编辑
+
+> ----------------  **注意**  ----------------
+>
+> 所有文件中引用其他文件，请使用@vue2-client，而不是@。
+> 不然琉璃中会将@符解析到自己的src下
+
+> 前端组件嵌套逻辑，组件与低代码平台关系，使用低代码平台渲染页面流程
+>
+> 请参考**目录下相关流程图**
+
+## 组件注册使用
+
+> 组件要想在低代码平台中展示，并可编辑需要完成以下几点
+
+### 插件
+
+> 插件的用途是，在编辑器中定义该组件有哪些**事件**，哪些可以编辑的**属性**
+
+#### 插件定义
+
+> 以下是一个简单的插件声明示例
+```js
+export const XFormTableConfig = {
+  type: 'XFormTable',
+  properties: {
+    queryParamsName: {
+      type: 'string',
+      label: '查询配置名',
+      desc: '在琉璃CRUD表单中配置好的查询配置名',
+      required: true
+    }
+  },
+  selfMethods: [
+    {
+      name: 'initConfig',
+      desc: '初始化方法',
+      params: 'config, data'
+    },
+  ]
+  selfEvent: ['action']
+}
+```
+
+> `type`
+>
+> 该字段用于描述本组件使用渲染器的类型，如type: '111'
+> 这个组件就会去找名称为'111'的渲染器，来将配置渲染为页面
+
+> `properties`
+>
+> 该字段用于描述本组件右侧属性编辑栏中，可以展示哪些属性供编辑，
+> 通常所有的props都需要在这里声明
+>
+> 每一个properties含有三个属性
+>
+> * type：为其指定类型
+> * label：用于给用户展示该属性的中文名
+> * desc：用户将鼠标放在标题上显示该属性的描述
+> * required：表示此参数必须填写后，组件才可以渲染
+
+> `selfMethods`
+>
+> 该字段用于描述本组件可以被其他组件调用哪些方法
+>
+> * name：方法名
+> * desc：方法的描述
+> * params：方法的参数
+
+> `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
+> 5. 需要外部修改的变量
+
+#### 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的事件名
+
+#### 需要外部修改的变量
+> 在组件内部，如果有需要外部来修改的变量，应该定义
+> 一个函数来控制变量的修改
+>
+> 外侧组件会调用该组件的方法来修改目标变量
+>
+> 详见插件定义说明下的 selfMethods 属性
+
+## 功能新增
+
+### 事件处理新增
+> 在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/docs/index.md

@@ -1,30 +1,30 @@
-## 文档列表
-### common
-* [CreateQuery 完整查询配置生成](../src/base-client/components/common/CreateQuery/index.md)
-* [CreateSimpleFormQuery 基础表单配置生成](../src/base-client/components/common/CreateSimpleFormQuery/index.md)
-* [CustomColumnsDrawer 自定义表格列](../src/base-client/components/common/CustomColumnsDrawer/index.md)
-* [FormGroupEdit 表单参数组配置编辑](../src/base-client/components/common/FormGroupEdit/index.md)
-* [FormGroupQuery 表单参数组配置生成](../src/base-client/components/common/FormGroupQuery/index.md)
-* [XAddForm 动态新增/修改表单控件，根据JSON配置生成一个完整的可供新增/修改数据的动态表单](../src/base-client/components/common/XAddForm/index.md)
-* [XBadge 重封装徽标](../src/base-client/components/common/XBadge/index.md)
-* [XCard 通用数据加载状态管理容器](../src/base-client/components/common/XCard/index.md)
-* [XForm 动态表单控件，根据JSON配置生成一个完整的动态表单](../src/base-client/components/common/XForm/index.md)
-* [XFormCol 适用于表单的通用响应式栅格a-col封装](../src/base-client/components/common/XFormCol/index.md)
-* [XFormTable 动态查询控件，进一步整合了XTable和XForm](../src/base-client/components/common/XFormTable/index.md)
-* [XTable 动态表格控件，根据JSON配置生成一个完整的动态表格](../src/base-client/components/common/XTable/index.md)
-* [XTable 动态表格控件，根据JSON配置生成一个完整的动态表格](../src/base-client/components/common/XTable/index.md)
-*
-### iot
-* [CustomerDetailsView 客户详情页](../src/base-client/components/iot/CustomerDetailsView/index.md)
-* [DeviceDetailsView 档案详情页](../src/base-client/components/iot/DeviceDetailsView/index.md)
-* [InstructDetailsView 指令详情页](../src/base-client/components/iot/InstructDetailsView/index.md)
-* [LogDetailsView 日志详情页](../src/base-client/components/iot/LogDetailsView/index.md)
-* [MeterDetailsView 单个表具档案](../src/base-client/components/iot/MeterDetailsView/index.md)
-
-### system
-* [DictionaryDetailsView 字典详情页](../src/base-client/components/system/DictionaryDetailsView/index.md)
-
-### ticket
-* [EmployeeDetailsView 员工详情页](../src/base-client/components/ticket/EmployeeDetailsView/index.md)
-* [TicketDetailsView 工单详情页](../src/base-client/components/ticket/TicketDetailsView/index.md)
-* [TicketSubmitSuccessView 单个工单详情页](../src/base-client/components/ticket/TicketSubmitSuccessView/index.md)
+## 文档列表
+### common
+* [CreateQuery 完整查询配置生成](../src/base-client/components/common/CreateQuery/index.md)
+* [CreateSimpleFormQuery 基础表单配置生成](../src/base-client/components/common/CreateSimpleFormQuery/index.md)
+* [CustomColumnsDrawer 自定义表格列](../src/base-client/components/common/CustomColumnsDrawer/index.md)
+* [FormGroupEdit 表单参数组配置编辑](../src/base-client/components/common/FormGroupEdit/index.md)
+* [FormGroupQuery 表单参数组配置生成](../src/base-client/components/common/FormGroupQuery/index.md)
+* [XAddForm 动态新增/修改表单控件，根据JSON配置生成一个完整的可供新增/修改数据的动态表单](../src/base-client/components/common/XAddForm/index.md)
+* [XBadge 重封装徽标](../src/base-client/components/common/XBadge/index.md)
+* [XCard 通用数据加载状态管理容器](../src/base-client/components/common/XCard/index.md)
+* [XForm 动态表单控件，根据JSON配置生成一个完整的动态表单](../src/base-client/components/common/XForm/index.md)
+* [XFormCol 适用于表单的通用响应式栅格a-col封装](../src/base-client/components/common/XFormCol/index.md)
+* [XFormTable 动态查询控件，进一步整合了XTable和XForm](../src/base-client/components/common/XFormTable/index.md)
+* [XTable 动态表格控件，根据JSON配置生成一个完整的动态表格](../src/base-client/components/common/XTable/index.md)
+* [XTable 动态表格控件，根据JSON配置生成一个完整的动态表格](../src/base-client/components/common/XTable/index.md)
+*
+### iot
+* [CustomerDetailsView 客户详情页](../src/base-client/components/iot/CustomerDetailsView/index.md)
+* [DeviceDetailsView 档案详情页](../src/base-client/components/iot/DeviceDetailsView/index.md)
+* [InstructDetailsView 指令详情页](../src/base-client/components/iot/InstructDetailsView/index.md)
+* [LogDetailsView 日志详情页](../src/base-client/components/iot/LogDetailsView/index.md)
+* [MeterDetailsView 单个表具档案](../src/base-client/components/iot/MeterDetailsView/index.md)
+
+### system
+* [DictionaryDetailsView 字典详情页](../src/base-client/components/system/DictionaryDetailsView/index.md)
+
+### ticket
+* [EmployeeDetailsView 员工详情页](../src/base-client/components/ticket/EmployeeDetailsView/index.md)
+* [TicketDetailsView 工单详情页](../src/base-client/components/ticket/TicketDetailsView/index.md)
+* [TicketSubmitSuccessView 单个工单详情页](../src/base-client/components/ticket/TicketSubmitSuccessView/index.md)