4.1_前端扩展参考

1、项目独立

    统一提供源代码，直接修改。

2、前后端分离

      1）devops-web项目：基于VUE（ElementUI）的前端项目

3、前后端接口同步

       1) 修改 scripts/buildApi.js 中 swagger.json 的在线地址

       2) 运行 npm run build:api

...  
...  
(function () {
 // 读取 在线 swagger
 var url = "http://10.15.15.109:8080/swagger/swagger.json";
 execute(url).then((data) => {
   console.log(`read ${url} ...`)
   mapAction(data)
 }).then(() => {
   console.log('create controller')
   createController()
 })
})()

4、静态资源

    (图片文件, 非npm管理的第三方js库) 统一放在 /static 目录下

5、动态表单自定义事件扩展

      1) 所有自定义事件统一写在 该文件里  /src/views/project/deploy/release/env-deploy/dynamic-form-events.js

      2) 提供三种事件  init (控件初始化时执行), onvaluechanged (控件值变化时执行) , all (以上两者都执行).

      3) 事件接受两个参数 (attrValue, $this) 分别为控件当前值 attrValue 和 表单上下文&this, 其中$this提供以下 api

           1.    $this.getCtrl(refName)                                                 ------------  获得控件对象

           2.    $this.getSelectObject(refName)                                  ------------  获得选中的控件对象

           3.    $this.setAttrValue(refName, attrValue)                        ------------  设置控件值

           4.    $this.getAttrValue(refName)                                        ------------  获得控件值

           5.    $this.hiddenComponents.add(refName)                     ------------  隐藏控件

           6.    $this.hiddenComponents.delete(refName)                  ------------ 显示控件

           7.   $this.getCtrl(refName).setUrl(url)                                  ------------ 设置下拉列表数据源

示例如下:

"10000000": { //defId
 "defName": 'scriptType',
"events": {
   "onvaluechanged": (attrValue, $this) => {
      $this.hiddenComponents.add("resources")
      $this.getAttrValue("resources")
      $this.setAttrValue("resources","demo")
      $this.hiddenComponents.delete("resources")
      $this.getCtrl("resources").setUrl("/api/demo?name=demo")
   },
   "init": (attrValue, $this) => {
     ...
   },
   "all": (attrValue, $this) => {
     ...
   },
}
},

6、权限扩展

      1)   在 /src/permission/FuncCode.txt 里增加权限代码 名称 类型, 注意中间用 空格 隔开

      2)   运行 npm run build:permission (需提前安装 babel-node: npm i -g babel-node )

7、路由扩展

      1) 修改 /src/router/index.js