# 奥枫低代码平台 —— 开发篇

> 低代码平台在使用时分为两个大部分
>
> 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'
  ]
```
