7

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

 6 months ago
source link: https://blog.51cto.com/u_14976802/9981966
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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

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

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

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之后 记得重新走一遍流程

二开的代码  记得保存备份

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

二开Online表单

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

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

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

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

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

useListButton.js

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

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

pnpm.cmd run clean:cache

【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等_数据加载_05

然后再重新启动

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

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

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

查询   转码后是   \u67e5\u8be2

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

【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等_数据加载_09
【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等_表单_10

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

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

演示效果  改成  查询询 

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

改完之后的效果

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

整理二开的方法

js增强扩展


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

js增强代码

【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等_表单_14
/**
 *列表数据加载完成之后 执行
 *
 */
afterLoadData(that, list){
    console.info('afterLoadData 数据加载完成', that, list)
}

 js增强执行效果

【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等_数据加载_15

1 通过console定位到该文件

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

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

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

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

全局搜 beforeEdit

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

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

【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等_数据加载_19

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

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

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

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

第三步 进行js增强

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

字段扩展参数增强

1 定义方法 js增强

【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等_二开_22
/**
       * 字段扩展参数增强
       * 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 寻找切入点  (重要)

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

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

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

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;
       }
     })
}
【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等_jeecgboot_24

5 查看效果

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

 将列表的上下文传到表单增强里

//将 onlineTableContext 挂载到 全局window下
      window.onlineTableContext = onlineTableContext
      console.log("window.onlineTableContext", window.onlineTableContext);
【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等_数据加载_26

表单js增强调用onlineTableContext 获取查询参数 并赋值给表单

【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等_表单_27
loaded(){
  console.info(window.onlineTableContext)
  console.info(window.onlineTableContext.queryParam)
  this.$nextTick(()=>{
    let text = '测试js增强设置默认值';
    if(this.isUpdate.value === true){
      text = '测试js增强修改表单值';
    }
    this.setFieldsValue({
      name: window.onlineTableContext.queryParam.name
    })
  })
}

打印出来 在这里Target可以看到对应的属性 进行调用

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

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK