本文参考：https://pusdn-dev.feishu.cn/wiki/VF4hwBAUliTE6TkUPKrcBNcZn9f?from=from_copylink
汇总开发中常用的业务组件，满足99%
本文由PUSDN整理；
欢迎提出：业务组件，业务需求
本文是使用手册， 低代码，直接生成。如果需要本地二次开发问题，内部文档：🌹GeeFox-sbv3开发手册｜常见问题（PRI）
预览视频
本地开发环境｜快速启动运行
java版本 + node环境 + oss + job + 打包部署nginx + shell脚本 + docker脚本
快速新增字段
适用于新增字段，不需要重新代码生成
-
数据库新增字段
-
实体类,vo,bo修改
-
前端表单修改
data.ts - modalSchema
{ label: 'userId', fieldName: 'userId', component: 'Input', rules: 'required', },
表单更多用法：https://doc.vben.pro/components/common-ui/vben-form.html
数据库建表基本字段
参考de_camera
代码生成使用｜表字段约定
禁止以单字母开头：p_sex，应该pgz_sex。同时实体类禁止单字母开头驼峰：pInput，应该pgzInput；
以特定字符结尾不区分大小写，会默认指定组件。
密码输入框：以pwd或者password结尾
数字输入框：num，count，amount；
二维码组件：qrcode字段
系统字典，建议有0，1，2，代码生成默认表单数据0；
多选，复选，默认英文逗号分隔存储，若需要多表关联，可参考用户管理；🌹GeeFox-sbv3开发版本手册｜专享版（PRI）
系统字典下拉框如下：
业务字典用法如下：
Java常用工具类
JSON转换：log.info(JSONUtil.toJsonStr(bo));
HTTP Get请求，带header
HTTP POST请求
加解密、压缩、二维码、下载、文件读写、内置hutool，更多用法：https://doc.hutool.cn/pages/index/
行为验证码｜人机验证码｜滑动验证码
内置阿里云滑动验证码：【降低成本，付费产品，默认关闭】
列表表格相关
列表搜索表单默认折叠
列表新增操作按钮默认显示到左侧
代码生成默认在右侧，如果不符合习惯，可以修改
vxe-table列表配置工具栏，导出，下载，打印
全局配置：pgz-gf-sbv3-vb5/apps/web-antd/src/adapter/vxe-table.ts
可能需要配置printConfig等
-
单一vue如何配置？
列表表格行根据状态变色
自定义渲染表格cell
例如，点击cell查看详情
点击cell查看地图
列表表格自定义静态二维码查看弹窗
安装外部依赖，用了monorepo
# 方式1：先进入目录 cd apps/web-antd pnpm add vue-qr pnpm add jszip pnpm add qrcode pnpm add -D @types/qrcode pnpm add file-saver pnpm add -D @types/file-saver #pnpm add vue-qr qrcode jszip file-saver #pnpm add jszip file-saver --filter @vben/web-antd #pnpm add qrcode --filter @vben/web-antd # 启动 cd ../.. pnpm run dev:antd
获取当前主题色
默认你配置setting-drawer偏好设置
默认关闭面包屑、开启底部、开启水印、自定义主题色
字典下拉框select
前端唯一性校验组件，唯一手机号、唯一用户名
树型下拉框快速使用｜树形下拉菜单
卡片列表切换
修改首页控制台图片
😈我的审美养刁了，都是表单有没有控制台可视化统计图仪表盘？Echarts
图片上传组件使用｜压缩｜裁剪
文件上传组件
天地图专题｜PC集成天地图组件
视频播放器
默认亮色主题、默认主题配置
菜单图标icon,mlong
跨页删除，跨页勾选自定义导出
列表图片预览
列表单图slots: { default: 'url' },
列表多图
同界面编辑跳转
crmeb效果，文件配置
更改验证码
滑动验证码
超长系统标题支持｜系统布局
✅水印修改｜默认水印
apps/web-antd/src/layouts/basic.vue
https://doc.vben.pro/guide/in-depth/features.html#%E9%A1%B5%E9%9D%A2%E6%B0%B4%E5%8D%B0
https://zhensherlock.github.io/watermark-js-plus/zh/guide/watermark.html
iframe组件
✅Modal弹窗属性
隐藏显示表单全屏按钮，拖拽、点击遮罩关闭
https://doc.vben.pro/components/common-ui/vben-modal.html#%E5%BC%80%E5%90%AF%E6%8B%96%E6%8B%BD
设置弹窗的宽度
w-[550px]或者w-[60%]
✅Form表单校验｜正则校验
from表单每行2列，占几列
后端相关
主动踢出在线用户｜主动让token失效
方式一：在线用户 - 踢出
方式二：业务踢出
比如：删除电商员工用户，默认token不失效仍然可操作。
表格Table相关
点击行选中整行
✅根据status每行显示不同颜色
单元格内容过多是否显示省略，并且悬浮tooltip提示。【默认如此，可不设置】
// data.ts const gridOptions: VxeGridProps = { showOverflow: false,//关闭
小程序配置字体大小
全局修改滚动条
默认已优化
前端组件专题
年月日时间范围表单回显RangePicker
推荐使用多个字段存储，不推荐用英文逗号拼接时间，便于查询等操作。
方式一：英文逗号分隔string接收
表单页示例modal.vue
数据库:pgz_range，实体：pgzRange
import dayjs from 'dayjs'; // ...... if (isUpdate.value && id) { const record = await demoInfo(id); record.pgzCheckboxArr = record.pgzCheckbox ? record.pgzCheckbox.split(',') : []; if (record.pgzRange) { const [startTime, endTime] = record.pgzRange.split(','); record.pgzRange = [dayjs(startTime), dayjs(endTime)]; } await formApi.setValues(record); } // ...... const data = cloneDeep(await formApi.getValues()); data.pgzCheckbox = data.pgzCheckboxArr.join(','); if (data.pgzRange && data.pgzRange.length === 2) { const [startTime, endTime] = data.pgzRange; data.pgzRange = `${startTime.format('YYYY-MM-DD HH:mm:ss')},${endTime.format('YYYY-MM-DD HH:mm:ss')}`; } await (isUpdate.value ? demoUpdate(data) : demoAdd(data)); // data.ts { label: '时间范围', fieldName: 'pgzRange', component: 'RangePicker', },
查询列表示例index.vue
方式二：两个字段分别处理
例如：实体类和数据库有两个字段。startTime，endTime。
modal.vue｜表单页示例
const [BasicForm, formApi] = useVbenForm({ // .... fieldMappingTime: [ [ 'planDateRange',// 此字段前端虚拟，实体和数据库不存在 ['startTime', 'endTime'], ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'], ], ],
回显
index.vue｜查询列表示例