README.md 3.06 KB
Newer Older
wangcong committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149
# 插件示例

## 简介

本工程是GMS业务中台中写插件的样例代码。编写插件的主要场景是:产品上通过编写插件,让产品可以在所有app打开之前,做一些必要的初始化工作。 例如扩展默认的单据控件,单据动作等。

## 模块介绍

### 1. 模块名

gms-plugin-sample

### 2. 部分功能文件介绍

1. plugin.js-------- 入口文件
2. src/control -------扩展的控件内容部分
3. src/actions --------扩展动作部分
4. src/fomula -------扩展公式
5. emcon.js ---------注册清单(定义控件名,绑定控件功能,控件相关参数配置)
6. mcon.js --------- 运行期注册

### 3. 扩展流程介绍

#### 3.1 新建控件页面

在src/control 文件夹下,创建新的.vue 文件,开发扩展控件 ,列如 testplugin.vue

``` 
<template>
    <div>
        <div>这里是个测试扩展组件</div>
    </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {

    }
  }
}
</script>

<style scoped>

</style>
```

#### 3.2 注册扩展控件

在mcon.js文件中注册扩展的控件如下,导出的billAction、billControl、formula这三个key值不能变

```
//actions
import sampleAction from './actions/sampleAction';
//control
import sampleControl from './control/testplugin.vue';
//formula 
import SubColSum from './formula/SubColSum.js';


export default {
    billAction: {
        sampleAction
    },
    billControl: {
        sampleControl
    },
    formula:{
        SubColSum
    }
}
```
#### 3.3 添加控件相关参数配置

在 emcon.js 文件中添加新扩展的控件配置信息,用于页面读取

```
export default {
    billControl: [
        {
            "title": "测试扩展",  //控件名称
            "description":"",    //控件描述
            "discard": false,
            "dynamicComponent":'billForm',  //
            "path": "资产/通用",  
            "value":"sampleControl",  //绑定的控件,与mcon.js 中导出的控件名一致
            "extends":{} //该控件配置信息的集合
        }
    ]
}
```
### 4. 在项目中的使用( 该功能模块将作为一个依赖包,从制品库中下载下来使用 )

1. 在 solution.json 中引用,在 "@gms" 模块下添加依赖模块 gms-plugin-sample

```
"@gms":[
    {
        "name": "gms-plugin-sample",
        "version": "latest"  
    }
],
```
2. 初始化项目,从制品库拉依赖

```
os-cli init dev 
```

3. 终端切到该模块下,安装模块所需依赖

```
npm i 
```

4. 编译该模块

```
npm run build-dev
```
5. 切换回上级项目路径下,启动项目

```
os-cli serve
```

### 5. 查看并使用扩展的组件

项目启动后,进入工作空间,在单据的界面设计页签中,可看到扩展的控件







### 用法

1. 修改package.json以及app.config.json里面的name属性,其他的不用动
2. 在src的mcon.js文件中,按照扩展规范,注册扩展的控件、动作等。
3. npm run build构建插件
4. npm publish发布插件到npm仓库
5. 项目上通过在solution文件中引用这个插件来使用插件。