erp系统
案例介绍
项目地址：https://dev.elcuk-erp.com/
项目职责:
1.项目主要由财务,海外仓,市场,奥莱,产品,采购,物流,系统等模块。
2.项目是由 nuxt 3做的底层架构,网络请求使用的 fetch 来做的架构
3.使用@vueuselrouter 将请求 table 的参数同步的路由中,使用户通过 url 可以直接访问。
4.通过 store和 slot 来封装权限组件。
5.通过 ag-grid 插件来将 table 实现虚拟列表,实现性能优化。
6.通过 tailwind 插件书写 css。
7.将 EIMessageBox,EINotfication,moment 抽取成组件,优化代码。
项目难点：
5.写一个富文本组件，在富文本组件中添加一个输入@就会弹出用户列表点击用户将就会输入到富文本里面。
解决：规定使用trix富文本包。但是这个富文本没有用户列表的功能。
1.写一个用户列表的盒子，将他影藏起来，盒子使用fixed定位，高度通过光标高度计算。
2.监听富文本的 @input 如果输入了@，就显示用户列表。
3.点击某一个用户后，将@通过replace替换成用户名，这样也可以影藏用户列表。
6.优化用户列表，通过键盘的 ↑ ↓ 键 来切换用户，通过回车来选中用户。
解决：1. 首先通过 @keydown 来监听所有的键盘事件。
2.通过index和变量来判断当前选中的是哪个用户使之高亮。
3.在监听这三个按键时，通过 preventDefault() stopPropagation() 阻止冒泡，使光标不要乱跳。
7.由于用户过多，所以添加了element滚动条。需要在使用 ↑ ↓ 键时，判断是否是视口最后一个用户。 并且滚动 滚动条。
解决：通过文档看到滚动条的setScrollTop()可以滚动 滚动条。
1.拿到每一个用户的实例。
2.首先在显示用户列表时计算出用户列表顶部和底部的位置。
3.在切换用户时，通过实例的getBoundingClientRect() 拿到用户的位置。
4.如果是↑键，用户位置如果<用户列表顶部就滚动。如果是↓键，用户位置>用户列表底部就滚动
erp系统
案例介绍
项目技术:vue3,nuxt3,fetch,tailwind, echarts, lodash, ag-grd, element-plus, moment,
项目地址：https://dev.elcuk-erp.com/
项目职责:
1.项目主要由财务,海外仓,市场,奥莱,产品,采购,物流,系统等模块。
2.项目是由 nuxt 3做的底层架构,网络请求使用的 fetch 来做的架构
3.使用@vueuselrouter 将请求 table 的参数同步的路由中,使用户通过 url 可以直接访问。
4.通过 store和 slot 来封装权限组件。
5.通过 ag-grid 插件来将 table 实现虚拟列表,实现性能优化。
6.通过 tailwind 插件书写 css。
7.将 EIMessageBox,EINotfication,moment 抽取成组件,优化代码。
项目难点：
5.写一个富文本组件，在富文本组件中添加一个输入@就会弹出用户列表点击用户将就会输入到富文本里面。
解决：规定使用trix富文本包。但是这个富文本没有用户列表的功能。
1.写一个用户列表的盒子，将他影藏起来，盒子使用fixed定位，高度通过光标高度计算。
2.监听富文本的 @input 如果输入了@，就显示用户列表。
3.点击某一个用户后，将@通过replace替换成用户名，这样也可以影藏用户列表。
6.优化用户列表，通过键盘的 ↑ ↓ 键 来切换用户，通过回车来选中用户。
解决：1. 首先通过 @keydown 来监听所有的键盘事件。
2.通过index和变量来判断当前选中的是哪个用户使之高亮。
3.在监听这三个按键时，通过 preventDefault() stopPropagation() 阻止冒泡，使光标不要乱跳。
7.由于用户过多，所以添加了element滚动条。需要在使用 ↑ ↓ 键时，判断是否是视口最后一个用户。 并且滚动 滚动条。
解决：通过文档看到滚动条的setScrollTop()可以滚动 滚动条。
1.拿到每一个用户的实例。
2.首先在显示用户列表时计算出用户列表顶部和底部的位置。
3.在切换用户时，通过实例的getBoundingClientRect() 拿到用户的位置。
4.如果是↑键，用户位置如果<用户列表顶部就滚动。如果是↓键，用户位置>用户列表底部就滚动
案例图片
1小时精推人才
需求方专属客服，免费梳理匹配
