【二开】JeecgBoot-vue3二次开发前端扩展online表单js增强等

前因

由于jeecgBoot官方事件只支持这两个, 但是实际场景需要用到其它事件(比如列表加载之前或之后), 所以进行二开

二开可以参考官方相关文档

JeecgBoot-Vue3采用 Vue3.0、Vite、 Ant-Design-Vue3、TypeScript 等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。是采用Vben实现的 JeecgBoot低代码平台的全新vue3版本。

表格 Table - Ant Design Vue (antdv.com)

最后有几个案例

步骤目录

第一步从node_modules找到对应的jeecg online的包

第二步二开代码修改online目录下的js

第三步清理缓存

第四步启动完成

注意: 每次重新install之后记得重新走一遍流程

二开的代码记得保存备份

对应这个

二开Online表单

打开对应的目录 RC_lkd7ynimmei5e2cdarb3gqjtui 是随机的

\node_modules\.pnpm\registry.npmmirror.com+@[email protected]_lkd7ynimmei5e2cdarb3gqjtui\node_modules\@jeecg\online

也可以在控制台找对应的目录

useListButton.js

可以修改Online列表每页条数默认值信息等

改完之后清理一下缓存 clean:cache

pnpm.cmd run clean:cache

然后再重新启动

有些用 Unicode编码(\u开头) 所以可以通过转码工具转换然后全局搜索

比如

查询转码后是 \u67e5\u8be2

或者f12 找到元素特定的属性 ant-design:search-outlined 去全局搜索也可以

演示效果改成查询询

改完之后的效果

整理二开的方法

js增强扩展

增加事件

列表数据加载完成之后执行

js增强代码

/**
 *列表数据加载完成之后 执行
 *
 */
afterLoadData(that, list){
    console.info('afterLoadData 数据加载完成', that, list)
}

js增强执行效果

如何二开

1 通过console定位到该文件

2 打开本地对应的这个文件进行二开

根据已知的事件找到对应的方法

全局搜 beforeEdit

举一反三同理复制一个出来改名 afterLoadData 定义方法

第二步在哪个位置调用该方法

考虑在loadData成功之后进行调用

这里根据个人实际情况来决定

第三步进行js增强

字段扩展参数增强

同理

1 定义方法 js增强

      /**
       * 字段扩展参数增强
       * js增强
       * @param tableColumns
       * @returns {Promise<void>|*}
       */
      onlineTableContext["tableColumnsExtend"] = (tableColumns) => {
        const onlEnhanceJS = onlineTableContext["EnhanceJS"];
        if (onlEnhanceJS && onlEnhanceJS["tableColumnsExtend"]) {
          return onlEnhanceJS["tableColumnsExtend"](onlineTableContext, tableColumns);
        } else {
          return Promise.resolve();
        }
      };

2 寻找切入点 (重要)

通过页面定位通过接口拿到字段参数之后的处理方法

然后在合适的时机调用新定义的方法

3 清理缓存重新启动项目让代码生效

切记需要保存代码到其他地方比如git

4 进行js增强

注: 方法间用逗号隔开

/**
 *列表数据加载完成之后 执行
 *
 */
afterLoadData(that, list){
console.info('afterLoadData 数据加载完成', that, list)
  //list.records[0].code = 'AAAAAAAAAAAAAAAA'
},
  
/**
 *  列表字段扩展
    tableColumns 属性参考 https://3x.antdv.com/components/table-cn#Column
 *
 */
tableColumnsExtend(that, tableColumns){
console.info('tableColumnsExtend 列表字段扩展', that, tableColumns)
  tableColumns.forEach((item) => {
       switch (item.dataIndex){
         case 'name':
           //修改列宽度
            item.width = 400
             item.title = '动态修改字段标题'
            break
         default:
           item.width = 50
           break;
       }
     })
}

5 查看效果