gengen-lib-web-design

1.x 版本是旧的 1.1.90 1.1.91 1.1.93 1.1.94 1.1.95 2.x版本是新的 2.1.1 2.1.67 2.1.74

1.安装tinymce
npm install tinymce@5.1.0 -S   5.10.3
npm install @tinymce/tinymce-vue@3.0.1 -S
2.组织树
https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md
3.打印
npm install print-js --save
npm install --save html2canvas
4.导出PDF
npm install jspdf --save
5.导出excel
npm install -s export2excel
npm install -s xlsx@0.17.5
npm install -s file-saver@2.0.5
6.解析excel
npm install --save xlsx@0.17.5
npm install --save fflate
7.字符云
npm install echarts-wordcloud@1.1.3

8.大屏展示组件库
npm install @jiaminghi/data-view

帮助文档 npm install mavon-editor --save

1.安装：npm install -g i5ting_toc

2.使用：i5ting_toc -f help.md

一、更新记录

更新日期	版本号	更新内容
2022-04-28	1.0.161	初始化
2022-10-12	2.1.61	1.修改下拉表格单击的时候查询;2.通过js给数据赋值的时候，添加列树

二、产品描述

1.产品简介

跟跟平台是基于Java开源框架的可配置、可视化、数字化业务管理实现平台。可以帮助政企快速实现业务管理系统的构建，提高企业业务的管理效率，可视化管理水平。 主要功能如下：

1. 跟跟设计方法
2. BME配置方法
3. VME配置方法
4. 菜单、用户及授权
5. 工作流配置
6. 审批流程配置

2.基本概念

dd

3.应用场景

当企事业单位需要业务管理系统、业务移动化、大屏数据展示时，可以采用跟跟平台进行系统的快速配置和实现。

4.目的

学习后，你能够：

• 掌握业务需求到业务系统的转化设计
• 掌握业务系统的配置实现
• 掌握业务流程的配置和实现
• 掌握系统菜单的授权和发布

三、快速入门

1.安装

1.安装依赖 npm install
2.启动服务 npm run serve
3.打包项目 npm run build
4.使用BME npm i gengen-lib-web-design

2.页面设计

四、JS开发文档

1.工具调用

1.1.获取当前登录员工信息

utils.currentEmpInfo();

如：const emp = utils.getCurrentEmpInfo();
输出：console.log(emp.id); // 员工编号
输出：console.log(emp.realName); // 员工姓名
输出：console.log(emp.employeeNo); // 员工工号

1.2.获取组件选中数据

utils.getDataBySelected(viewCode, widgetName);

如：获取树节点选择数据 const viewCode = 'emp_list'; // 视图编码
const widgetName = 'data-tree-000001'; // 树组件名称
const data = utils.getDataBySelected(viewCode, widgetName);
输出：console.log(data); // 组件选择数据
如：获取表格选择数据
const viewCode = 'emp_list'; // 视图编码
const widgetName = 'data-table-000001'; // 表格组件名称
const list = utils.getDataBySelected(viewCode, widgetName);
输出：console.log(list); // 组件选择数据

1.3.获取表单输入数据

utils.getDataByForm(viewCode, widgetName);

如：获取表单输入数据
const viewCode = 'emp_list'; // 视图编码
const widgetName = 'layout-form-000001'; // 表单组件名称
const data = utils.getDataByForm(viewCode, widgetName);
输出：console.log(data); // 表单数据

1.4.页面组件数据刷新

utils.refreshBlock(component, viewCode, widgetName);

如：需要刷新表格数据
component：函数当前对象
viewCode：刷新目标视图编码
widgetName：刷新目标组件名称
utils.refreshBlock(component, 'lizhishen', 'data-table-2316322367vfq3yc');

1.5.更新当前表单数据

utils.setFormDataField(component, formData, field, value);

如：需要更新表单字段名称为name的
component：函数当前对象
formData：当前表单数据
field：需要更新的字段
value：需要更新的字段数据
utils.refreshBlock(component, formData, 'name', 'lizhishen');

1.6.获取组件业务数据

utils.getDataByComponent(component, viewCode, widgetName);        

如：需要获取表格的数据
component：函数当前对象
viewCode：视图编码
widgetName：需要获取的列表组件名称
utils.getDataByComponent(component, viewCode, 'data-table-1816373795bmdqii');

1.7.设置组件业务数据

utils.setDataByComponent(component, viewCode, widgetName, data);

如：需要设置表格的数据
component：函数当前对象
viewCode：视图编码
widgetName：需要获取的列表组件名称
data：需要设置的数据
utils.setDataByComponent(component, viewCode, 'data-table-1816373795bmdqii',data);

1.8.获取Element UI可操作对象

utils.getVueComponentRefs(component, viewCode, widgetName)

如：需要调用element UI组件方法
table操作为例 component：函数当前对象
viewCode：视图编码
widgetName：需要获取的组件名称
const view = utils.getVueComponentRefs(component, viewCode, 'data-table-1816373795bmdqii');
view.clearSelection();// 清除表格选择

1.9.文件前缀路径格式化

utils.apiFilePrefixUrl(url);

如：url = '/public/xxx.jpg';
const str = utils.apiFilePrefixUrl(url);
输出：console.log(str); // http://gengen.com//public/xxx.jpg

1.10.判断数据是否为空

utils.isEmpty(object);

如：str = ''; str = null; str = undefined; str = []; str = {};
const str = utils.isEmpty(str);
输出：console.log(str); // true

1.11.将数组数据转换成逗号间隔

utils.arrayToStringSplit(array, keyName = null, split = ',');

如：list = [1,2,3];
const str = utils.arrayToStringSplit(list);
输出：console.log(str); // 1,2,3
如：list = [{id:1,name:'lzs1',id:2,name:'lzs2'}];
const str = utils.arrayToStringSplit(list,'name');
输出：console.log(str); // lzs1,lzs2

1.12.将数组对象数据转换成单列数组

utils.arrayToFieldList(array, field, prefix = null);

如：list = [{id:1,name:'lzs1',id:2,name:'lzs2'}];
const str = utils.arrayToFieldList(list,'name');
输出：console.log(str); // ['lzs1','lzs2']
如：list = [{id:1,name:'lzs1',id:2,name:'lzs2'}];
const str = utils.arrayToFieldList(list,'name','AB');
输出：console.log(str); // ['ABlzs1','ABlzs2']

1.13.格式化 - 日期

utils.formatDate(date, fmt = 'yyyy-MM-dd hh:mm:ss')

如：data = 1624459198000;
const str = utils.formatDate(data);
输出：console.log(str); // 2022-01-17 16:44:47
const str = utils.formatDate(data,'yyyy-MM-dd');
输出：console.log(str); // 2022-01-17
const str = utils.formatDate(data,'hh:mm:ss');
输出：console.log(str); // 16:44:47

1.14.格式化 - 数字

utils.formatNumber(value, decimals = 2)

如：value = 100;
const str = utils.formatNumber(value);
输出：console.log(str); // 100.00

1.15.格式化 - 金额

utils.formatMoney(value)

如：value = 9800500.09;
const str = utils.formatMoney(value);
输出：console.log(str); // 9,800,500.09

1.16.格式化 - 百分比

utils.formatRate(value)

如：value = 0.50;
const str = utils.formatRate(value);
输出：console.log(str); // 50%

1.17.格式化 - 数据字典

utils.formatDictionary(value, list)

如：value = 1; list = [{name:'有效',value:1},{name:'无效',value:0}];
const str = utils.formatDictionary(value,list);
输出：console.log(str); // 有效

1.18.树 转 列表

utils.treeToList(treeList)

如：treeList = [{id:1,name:'节点1',children:[{id:2,name:'节点1-1'},{id:3,name:'节点1-2'}]}];
const str = utils.treeToList(treeList);
输出：console.log(str); // [{id:1,name:'节点1'},{id:2,name:'节点1-1'},{id:3,name:'节点1-2'}]

1.19.列表 转 树

utils.listToTree(allList, idFiled, pidFiled)

如：list = [{id:1,name:'节点1',pid:0},{id:2,name:'节点1-1',pid:2},{id:3,name:'节点1-2',pid:2}];
const str = utils.listToTree(list,'id','pid');
输出：console.log(str); // [{id:1,name:'节点1',children:[{id:2,name:'节点1-1'},{id:3,name:'节点1-2'}]}]

1.20.提示 - 成功

utils.showSuccessTip('操作成功')

1.21.提示 - 失败

utils.showErrorTip('操作失败')

1.22.提示 - 成功 - 需要确认

utils.showDialogSuccess('操作成功')

1.23.提示 - 确认

utils.showDialogSuccess('提示','是否删除记录？').then(flag => {
    // 确认之后需要处理逻辑
});

1.24.路由跳转

utils.routerPush(title, data)

utils.routerPush('员工列表', {path: '/relation/empList'});
utils.routerPush('员工详情', {path: '/relation/empDetail', query: {id:'xxxxxxxx'}});

2.网络请求接口

2.1.查询-接口，boCode：请求的BO编码，data：请求参数

http.bmeList(boCode, data).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.2.查询-接口-翻页，boCode：请求的BO编码，data：请求参数

http.bmePageList(boCode, data).then(response => {
  // 返回接收数据
  const data = response['data'];
  // 列表数据
  const list = data['records'];
  // 记录总数量
  const list = data['totalRecord'];
});

2.3.删除-接口，boCode：请求的BO编码，ids：删除编号[1,2]，isSoft：是否软删除

http.bmeDelete(boCode, ids, isSoft).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.4.新增-接口，boCode：请求的BO编码，data：新增数据

http.bmeInsert(boCode, data).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.5.修改-接口，boCode：请求的BO编码，data：修改数据

http.bmeUpdate(boCode, data).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.6.详情-接口，boCode：请求的BO编码，id：编号

http.bmeGet(boCode, id).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.7.导入-接口，boCode：请求的BO编码，data：导入数据

http.bmeImport(boCode, data).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.8.导出-接口，boCode：请求的BO编码，data：导出条件

http.bmeExport(boCode, data).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.9.导出-接口-模板，boCode：请求的BO编码，data：导出条件

http.bmeExportTemplate(boCode, data).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.10.删除-接口-批量，boCode：请求的BO编码，ids：删除编号[1,2]，isSoft：是否软删除

http.bmeDeleteBatch(boCode, ids, isSoft).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.11.添加-接口-批量，boCode：请求的BO编码，list：新增数据列表[{},{}]

http.bmeInsertBatch(boCode, list).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.12.修改-接口-批量，boCode：请求的BO编码，list：修改数据列表[{},{}]

http.bmeUpdateBatch(boCode, list).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.13.修改-接口-批量-字段，boCode：请求的BO编码，ids：编号数组[1,2]，data：修改数据{enableFlag:1}

http.bmeUpdateBatchField(boCode, ids, data).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.14.方法-接口-调用，boCode：请求的BO编码，method：调用方法，data：请求参数

http.bmeMethod(boCode, method, data).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.15.接口-调用，url：请求的地址，data：请求参数

http.bmeInterface(url, data).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.16.接口-下载，fileName：文件名称，url：请求的地址，data：请求参数

http.bmeInterfaceDownload(fileName, url, data).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.17.接口-上传，url：请求的地址，data：请求参数

http.bmeInterfaceUpload(url, data).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.18.接口-数据字典，code：字典编码

http.bmeDictionary(code).then(response => {
  // 返回接收数据
  const data = response['data'];
});

2.19.接口-文件上传，url：上传地址，data：上传参数

http.bmeUploadFile(url, data).then(response => {
  // 返回接收数据
  const data = response['data'];
});