JEPaaS

JEPaaS
Word count: 2.9k   |   Reading time≈ 13 min

相关文档

· JEPaaS 帮助文档
· JEPaaS API文档
· Ext 中文文档

前端目录结构

je-paas-frontend (PC端平台源码目录结构)

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
├── config                    // 调试打包运行脚本
│   ├── config.js             // 配置文件入口
│   ├── gulp                  // 打包程序配置文件
│   │   ├── gulp-build.js     // 打包文件--构建文件
│   │   ├── gulp-config.json  // 打包程序配置文件，每次发布新包，请同步更新version属性
│   │   ├── gulp-copy.js      // 打包文件--复制文件
│   │   └── gulp-rev.js       // 打包文件--加MD5版本
│   ├── pro
│   │   └── jepaas.json       // 环境配置
│   └── resourse
│       └── holiday           // 登录页面背景图，主题色配置
├── dev.js                    // 代理服务程序--开发环境
├── doc
│   └── Framework.MD          // 帮组文档
├── gulpfile.js               // 打包程序
├── package.json              // node配置文件，通过 npm install 安装项目所需要的依赖
├── product.cdn.js            // cdn代理服务脚本
├── product.js                // 代理服务
├── src                       // 业务代码 
│   ├── config
│   │   ├── i18n              // 国际化配置，中英文
│   │   ├── incloud           // 初始化项目时候引入的资源（css && js）
│   │   ├── static            // 平台用到的图片进行封装，JE.static
│   │   └── urls              // 平台所有接口路径封装 体验：JE.getUrlMaps('method.doUpdateList')
│   ├── extjs
│   │   ├── app               // 平台页面的主入口
│   │   ├── app.js            // 系统主应用程序  一切应用的入口程序
│   │   ├── app4single        // 单功能挂接（http://doc.jepaas.com/docs/je-doc-repository-know/je-doc-repository-know-1cgeaq631gblt）
│   │   ├── core              // 核心包（核心组件 && 核心面板 等）
│   │   │   ├── action        // 操作方法
│   │   │   ├── controller    // 控制器
│   │   │   ├── store         // 数据存储
│   │   │   ├── ux            // 核心组件
│   │   │   ├── view          // 核心面板
│   │   ├── sys               // 业务代码
│   │   │   ├── busflow       // 文档管理(已经废弃)
│   │   │   ├── calendar      // 日历
│   │   │   ├── chart         // 图表
│   │   │   ├── companyinfo   // 公司信息编辑
│   │   │   ├── configuration // 系统设置面板(已经废弃)
│   │   │   ├── dataimpl      // 未知
│   │   │   ├── dd            // 数据字典
│   │   │   ├── documentation // (已经废弃)
│   │   │   ├── email         // 邮件(已经废弃)
│   │   │   ├── exam          // 考试(已经废弃)
│   │   │   ├── file          // 文档管理(已经废弃)
│   │   │   ├── flowchart     // 流程图
│   │   │   ├── formdesigner  // 表单设计器
│   │   │   ├── funccfg       // 功能配置
│   │   │   ├── icon          // 图标
│   │   │   ├── im            // 即时通讯(已经废弃)
│   │   │   ├── menu          // 菜单管理
│   │   │   ├── phone         // JEAPP配置
│   │   │   ├── plantform     // (已经废弃)
│   │   │   ├── portal        // 门户引擎
│   │   │   ├── processinfo   // (已经废弃)
│   │   │   ├── qrcode        // 二维码
│   │   │   ├── rbac          // 权限
│   │   │   ├── roster        // 花名册
│   │   │   ├── sass          // sass
│   │   │   ├── shop          // 商城 已废弃
│   │   │   ├── singleton     // js&&css代码编辑器
│   │   │   ├── survey        // 问卷调查(已经废弃)
│   │   │   ├── svg           // 工业图
│   │   │   ├── table         // 资源表
│   │   │   ├── transaction   // 事务交办(已经废弃)
│   │   │   ├── upgrade       // 系统设置表单(已经废弃)
│   │   │   ├── workflow      // 工作流编辑器
│   │   │   ├── workflowfunc  // 工作流
│   │   ├── tool              // 加载系统类和和核心化组件
│   │   ├── util              // 封装的类
│   │   └── vue               // vue工具类
│   ├── main                  // html模板页
│   └── static                // 静态资源
├── static                    // 静态资源目录
├── CHANGELOG.md              // 帮助文档
├── README.MD                 // 帮助文档
├── README2.md                // 帮助文档
├── commitlint.config.js      // 代码提交规则

je-paas-frontend-plugin (PC插件源码目录结构)

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
├── config                    // 打包程序配置目录
│   ├── config                
│   │   ├── components.js     // 配置打包平台的业务组件
│   │   └── jepaas.js         // 配置文件
│   ├── config.js             // 基础配置文件
│   ├── package               // 打包配置文件
│   │   ├── gulp              // gulp打包
│   │   ├── tpl               // webpack打包模板页
│   │   └── webpack           // webpack打包vue
│   ├── resourse              // 项目资源文件
│   │   ├── holiday           // 修改登录页面的配置信息
│   │   └── project           
│   └── server
│       └── dev.js            // express服务文件
├── dist                      // 打包之后的资源
├── docs                      // home和im插件说明文档  
│   ├── assets
│   │   └── images
│   └── plugin
│       ├── home
│       └── im
├── gulpfile.js               // 项目打包配置
├── index.html                // html
├── jsconfig.json             // 指定根目录和JavaScript服务提供的功能选项
├── package.json              // 项目脚本和所需依赖
└── src                       // 业务功能
    ├── tpl                   // 模板
    │   ├── formPreview       // 表单规划器模板
    │   ├── login             // 登录模板
    │   └── priceSheet        // 报价单模板
    └── vue                   // vue插件
        ├── components        // 组件
        ├── install.js        // 安装插件所需的方法
        ├── modules           // 业务插件
        ├── plugins             
        └── static
├── commitlint.config.js       // 代码提交规则
├── CHANGELOG.md               // 帮助文档
├── README.MD                  // 帮助文档
├── README1.md                 // 帮助文档

二次开发

全局插件

创建(插件项目)

  1. 创建index.vue文件 (src/vue/components/name/index.vue) ; 写入组件页面内容

name好像不能使用驼峰命名

  1. 创建index.js文件 (src/vue/components/name/index.js) ; 安装组件

  2. 插件写入components.js配置文件中进行编译 (config/config/components.js)

1
2
3
4
5
6
module.exports = {
    ...
  entry: [...,'name'], // 打包的入口
    ...
};

  1. 代码运行的时候 就会自动编译该插件 并在 (dist/static/vue/components/name)中输出编译完成的文件

使用(源码项目)

  1. 在JE的vue工具类中添加自定义扩展方法 (src/extjs/vue/util.js)
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
Ext.define('JE.vue.util', {

    // ...
    /**
   * vue弹框,统一调用
   * element: 元素属性，{id: 组件id，name: 组件名称}
   * 建议命名规则：
     组件name={子系统名}-{头部/左侧菜单名}-{功能名}-{操作名}；
     组件id=id-{组件name}
   * options: 业务属性
   */
  showVueDialog: function(element, options) {
    JE.loadScript(
      ['/static/vue/components/' + element.name + '/index.js', '/static/vue/components/' + element.name + '/index.css'],
      function() {
        //插件模板
        var tpl =
          '<' +
          element.name +
          ' @confirm="handleConfrim" @callback="callback" :params="params"></' +
          element.name +
          '>';

        // 如果存在 弹窗  先清除掉
        if (document.getElementById(element.id)) {
          JE.removeElement(document.getElementById(element.id));
        }
        //装载容器
        var div = document.createElement('div');
        div.setAttribute('id', element.id);
        div.innerHTML = tpl;
        var el = Ext.getBody().appendChild(div);
        var params = options;
        //显示
        params.visible = true;
        //载入页面
        new Vue({
          el: el.dom,
          data: function() {
            return {
              params: params
            };
          },
          methods: {
            callback: function(num) {
              return options.callback && options.callback(num);
            },
            handleConfrim() {
              // 发送请求，刷新
              console.log('确认');
            }
          }
        });
      },
      true
    );
  }
    // ...
})

  1. 在系统中进行配置,使用JE.vue.xxx()
1
2
3
4
5
6
7
8
9
10

// 在按钮点击事件中进行配置

function(btn,model,){
    JE.vue.showVueDialog(
        { name:'transfer',id:'jevue-transfer' },
        { info:model.data }
        )
}

Vue插件开发

一、Vue插件编写

  1. 创建index.vue文件 (src/vue/modules/name/index.vue) ; 写入插件页面内容

  2. 创建index.js文件 (src/vue/modules/name/index.js) ; 安装组件

1
2
3
4
5
6
7
8

import { install } from '../../install.js';
import index from './index.vue';
// 加载echarts依赖
JE.loadChartScript(true);
// 安装组件
install('Name', index);

  1. 插件写入jepaas.js配置文件中进行编译 (config/config/jepaas.js)
1
2
3
4
5
6
7
module.exports = {
    ...
    entry:[
        ...
        'name'
    ]
}
  1. 代码运行的时候 就会自动编译该插件 并在 (dist/pro/name/View.js)中输出编译完成的文件
1
2
3
4
5
6
7
8
// PRO.name.View 为插件的名字 使用的时候直接通过这个名字使用
Ext.define("PRO.name.View", {
  extend: 'Ext.panel.Panel',
  alias:'widget.pro.name',
  border: 0,
  layout: 'fit'
  ...
})

二、平台渲染Vue插件

  1. 通过插件的形式挂载（只有插件内容）
  • 新建菜单功能的时候，类型选择插件
  • 信息 为 JE_PLUGIN_NAME,PRO.name.View
  • 点击授权给开发人员

  1. 通过表单方法渲染的时候挂载（有别的内容）
  • 不管之前的菜单的类型为什么
  • 在表单渲染后afterrender 在面板中插入该插件的内容
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
function(self){
    // ------直接覆盖以前的内容，放在顶部
    var panel = Ext.create('PRO.name.View',{
        height:300,
        dock:'top',
        vueInfo:{
            params:{
                formValue:self.getValues()
            },
            callback:function(formValue){
                self.getFields('SCHOOL_XX').setValue(formValue.aaa);
            }
        }
    });
    self.addDocked(panel);


    // ------在以前的内容后添加
    var grid = self;
    //创建组件
    var demoGrid = Ext.create('PRO.name.view',{
        region:'south',
        height:300,
        mainGrid:grid
    });
    //加载到列表的父容器下方，父容器布局是border
    grid.demoGrid = grid.ownerCt.add(demoGrid);
}


Vue与平台通信

  • 数据传递
  1. 平台通过 vueInfo.params 传递数据给vue
1
2
3
4
5
6
vueInfo:{
    params:{
        value1:'',
        value2:''
    }
}
  1. Vue通过props接收传递过来的数据
1
2
3
4
5
6
7
8
9
10
export defualt{
    // ...
    props:{
        params:{
            type:Object
        }
        // ...
    }
    // ...
}
  • Vue实时展示

给获取的字段添加change事件

1
2
3
4
5
6
7
function(filed,value,eOpts){
    var domeView = field.up('jeeditview').down('[xtype=pro.name]');
    if(domeView && domeView.vm){
        domeView.vm.params.formValue.SCHOOL_XXLS = value;
    }
}

  • 方法传递
  1. 平台通过 vueInfo.callback 改变数据库的值
1
2
3
4
5
vueInfo:{
    callback:function(formValue){
        self.getFields('SCHOOL_XX').setValue(formValue.aaa);
    }
}
  1. Vue通过props接入传入的方法
1
2
3
4
5
props: {
    callback: {
      type: Function,
    },
  },
  1. 挂载事件执行方法
1
2
3
4
5
6
7
8
9
10
<button @click="showContent">点击</button>

// ...
methods:{
    showContent(){
        this.callback({aaa:this.formValue.SCHOOL_XXLS})
    }
}


Ext.js二次开发

下了gitee里面的开源项目 按文档流程配置了一边，是可以运行的 效果如下：

  1. 创建自定义功能视图

src/pc/ext/demo/view/GridView.js

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
// PRO.demo.view.GridView 这个面板的名称，唯一性指向（按项目路径命名 应该）
// 并且需要通过在工具类中挂载 才能使用 
// 用ext创建一个Panel一个容器 存放数据列表
// me.store.loadData 和 loadData 应该不是一个方法，me.store.loadData估计是Ext的内置方法，用来展示动态数据
// 模板中的html变量需要用 {html:'xxx'} 这种结构来展示

/**
 * 自定义功能的视图
 */
Ext.define("PRO.demo.view.GridView", {
    extend: 'Ext.panel.Panel',
    alias: 'widget.demo.gridview',
    layout: 'fit',
    initComponent: function () {
        var me = this;
        me.store = Ext.create('Ext.data.Store', { fields: ['html'], data: [] })
        //数据视图
        me.items = [
            {
                xtype: 'dataview',
                itemId: 'view',
                store: me.store,
                autoScroll: true,
                itemSelector: 'div.demo-list-item-wrap',
                emptyText: '<div style="padding:20px;text-align:center;color:#444;font-size:20px;">没有数据</div>',
                tpl: [
                    '<tpl for=".">',
                    '<div class="demo-list-item-wrap" style="padding:10px;">',
                    '{html}',
                    '</div>',
                    '</tpl>'
                ]
            }];
        //功能按钮
        /* me.tbar = {
            cls: 'je-button-bar',
            items: [{
                text: '获取选中的数据',
                handler: function (btn) {
                    //主功能列表
                    var grid = me.mainGrid;
                    //获取选中的数据
                    var sels = grid.getSelectionModel().getSelection();
                    if (JE.isEmpty(sels)) {
                        JE.alert('请选择数据！');
                    } else {
                        JE.alert('选中了' + sels.length + '条数据!');
                        console.log('选中的主表数据', sels)
                    }
                }
            }]
        }; */
        me.callParent(arguments);
    },
    /**
     * 加载数据
     * @param {jegridview} grid 主功能列表
     */
    loadData: function (grid) {
        var me = this, data = [];

        //循环列表数据
        grid.store.each(function (rec) {
            var html = [];
            //读取列表的数据，进行展示
            Ext.each(Object.keys(rec.data), function (key, i) {
                // html.push(key + '：' + rec.get(key));
                html.push(rec.get(key))
                // if (i > 3) return;
            })
            data.push({ html: html.join(',') + '<hr><br/>' });
        });
        me.store.loadData(data);
        console.log('展示所有列表数据')
    },

    /**
     * 单击主列表 获取数据 
     * @param {*} view 
     * @param {*} record 
     */
    handleClick(view, record) {
        var itemData = Object.values(record.raw).join(',')
        var me = this
        me.store.loadData([{ html: itemData }]);
        console.log('展示点击的那一条数据', itemData)
    }
});

  1. 自定义插件挂接到MainController中

src/pc/ext/demo/contoller/MainController.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// PRO.demo.controller.MainController 工具类的名称 很重要需要在表格功能内配置

/**
 * 自定义功能主控制器
 */
Ext.define("PRO.demo.controller.MainController", {
  extend: 'Ext.app.Controller',
  init: function () {

    var self = this;
    var ctr = {}
    self.control({ctr});
  },
  views: [
    //加载引用的面板
    'PRO.demo.view.GridView', //列表
  ]
});
  1. 在页面进行配置，把MainController挂载到页面上

  1. 配置相应的事件
  • 渲染后创建组件，并添加在父组件的下方
1
2
3
4
5
6
7
8
9
10
11
// ext相关语法 我也不清楚..
// PRO.demo.view.GridView 自定义面板创建完成，并配置相应内容
// 添加在页面上,并且self对象添加了一个demoGrid属性，里面是自定义面板的相关内容

function(self){
    var grid = self;
    //创建组件
    var demoGrid = Ext.create('PRO.demo.view.GridView',{region:'south',height:400,mainGrid:grid});
    //加载到列表的父容器下方，父容器布局是border
    grid.demoGrid = grid.ownerCt.add(demoGrid);
}

  • 添加load监听事件、获取主数据
1
2
3
4
5
6
7
8
// 获取到自定义面板的对象grid.demoGrid后
// 执行他的自定义方法loadData获取全部的主数据

function(store,records){
    var grid = store.gridObj
    //执行demo插件的方法
    grid.demoGrid.loadData(grid);
}

  • 然后照葫芦画瓢、添加单击事件、获取点击的数据
1
2
3
4
5
6
7
8
9
10
11
12
// 前两段是系统默认的，应该是获取到列表对象
// 通过grid.demoGrid获取到自定义面板的内容
// 并触发点击事件的方法
// me.store.loadData([{ html: xxx }]); 重新传递html变量的数据

function(view,record){
    var grid = view.panel;
 grid = view.lockingPartner?grid.ownerCt:grid;
    
    grid.demoGrid.handleClick(view,record);
}

扫一扫，分享到微信

微信分享二维码
  • Copyrights © 2019-2023 John Doe
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信