【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等
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.
【二开】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 查看效果
将列表的上下文传到表单增强里
//将 onlineTableContext 挂载到 全局window下
window.onlineTableContext = onlineTableContext
console.log("window.onlineTableContext", window.onlineTableContext);
表单js增强调用onlineTableContext 获取查询参数 并赋值给表单
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可以看到对应的属性 进行调用
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK