【后台管理系统】—— Ant Design Pro 项目爬坑(一)
2024-10-07 07:25:34
1、表单rule中可以分对象处理不同规则
<FormItem label="类型名称" {...formLayout}>
{ form.getFieldDecorator('name', {
rules: [
{ required: true, message: '请输入2-5字中文、数字、或英文类型名称' },
{ pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/, message: '请输入2-5字中文、数字、或英文类型名称'},
{ min: 2, max: 5, message: '请输入2-5字中文、数字、或英文类型名称' }
],
initialValue: current && current.name ? current.name : ''
})(<Input placeholder="请输入" />)}
</FormItem>
2、富文本中的引用、代码、链接没有用
- 问题原因: 没有考虑到不加媒体文件时,对象中没有url,不用进行字符串替换
- 解决:添加判断条件
const defaultContent = (content) => {
let contentObj = JSON.parse(BraftEditor.createEditorState(content).toRAW());
let urlArr;
Object.keys(contentObj.entityMap).forEach((key) => { // 如果对象里有url,说明有媒体文件,处理标签
if(contentObj.entityMap[key].data.url){
urlArr = contentObj.entityMap[key].data.url.split('/')
console.log('默认内容', urlArr);
if(urlArr.length == 2){ //ios视频前缀yihezo
urlArr.splice(0,1);
contentObj.entityMap[key].data.url = `${setFileHost()}`+ 'yihezo/' + urlArr.join('/');
} if(urlArr.length == 3){ //其它媒体文件前缀sys/tutorail
urlArr.splice(0,1);
contentObj.entityMap[key].data.url = `${setFileHost()}`+ 'sys/' + urlArr.join('/');
}
}
});
let contentRaw = JSON.stringify(contentObj);
return contentRaw;
} - 注释:【引用】显示是文字段落前后有缩进
- 最终解决方法:删掉了代码与引用功能
3、Input表单填写价格数字后,过段时间看,价格会变为0.1
- 出现0.1的原因:校验最小值与最大值时给了最小值和最大值的默认为0.1
- 错误处:原来的校验最大值使用了
max={getFieldValue('oldPrice') && Number(getFieldValue('oldPrice'))}
解决方法:
else if (value && getFieldValue('oldPrice') && (value < 0 || value > Number(getFieldValue('oldPrice'))) ){
callback(`请输入0-${getFieldValue('oldPrice')}货款`)
}
4、表单中的Switch只有勾选、勾选再取消才能提交,期望:未勾选时也能提交
initialValue: current && detail ? detail.fromSystem : false
5、Button按钮可根据数据状态决定当前是否禁用
disabled={detail && !params.cloneId ? true : false}
6、添加产品,产品图片第一张添加为视频时,产品缩略图没有显示出来
- 添加了获取视频第一帧方法
getVideoImg = (v, index) => {
if(!this['video_div'+index]) {
return
}
let me = this;
let video = document.createElement("video");
video.src= setFileHost() + v; video.load(); video.onloadeddata = function () {
if(!me['video_div'+index]) {
return
}
let canvas = document.createElement("canvas"); canvas.width = 100;
canvas.height = 80;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); me['video_div'+index].innerHTML = '';
me['video_div'+index].appendChild(canvas);
}
} 产品列表和订单列表获取index,利用setTimeout异步等待包含ref的div渲染完成后调用函数填入canvas
if(item.rotationChart.length && item.rotationChart[0].type == 'video') {
setTimeout(() => this.getVideoImg(item.rotationChart[0].img, index), 0 )
}
7、搜索框未输入东西时,点击查询,报500;新增供货商或编辑供货商,提交后,报500
- 原因1:keyword没有输入时,默认值需要传空串;
- 原因2:新增和编辑之后调用的重新查询列表请求 与 返回时调用的重复;
8、单独的由getFieldDecorator注册的Input输入框表单只能一个字一个字的输入
- 问题:input输入框输入一个字符失去焦点
- 原因:input输入框在render方法中通过函数创建,监听了onChange事件,内容有变化就setState,
数据变化,触发render函数更新执行,当input动态添加或删除时,
React会重新创建DOM,新的input是没有焦点的
- 解决:
onBlur={(e) => this.handleJGChange(e, index)}
onPressEnter={(e) => this.handleJGChange(e, index)}
9、上传商品详情时,选择一张图片后删除,再选择图片,点击确定,会出现之前删除的图片
// Upload组件的删除图片方法
handleDetailImgRemove = (file) => {
let detailFileList = this.state.detailFileList;
let uid = file.uid;
let index = detailFileList.indexOf(uid); let detailImgFile = this.state.detailImgFile; if(index != -1){
detailImgFile.splice(index, 1);
}
this.setState({
detailFileList,
detailImgFile
}, () => {
return true
})
} // 限制可产品(图文)详情的detailFileList数组的图片数量
setDetailImg = (res, file) => {
let { detailImgFile = [] } = this.state;
let { detailFileList = [] } = this.state;
if(detailImgFile.length >= 5 ){
message.error('批量上传一次最多上传5张')
return ;
} detailImgFile.push(res);
detailFileList.push(file.uid);
this.setState({
detailImgFile,
detailFileList
});
}
- 再生问题:一次性选择7张图片时,提示最多五张;从第一张开始删除,删除两张后点击提交,却只出现了三张图片
// beforeUpload图片文件上传之前判断
if(fileList.indexOf(file) >= 5){
message.error('批量上传一次最多上传5张');
return false; // 阻止上传
}
10、首页商品设置 页面变空白
- 原因:列表展示,是根据商品的sortNo位置序号作为List下标index渲染展示的,如果sortNo没有连续,List的渲染遇到空对象就会报错
- 解决:后端更改sortNo数据为连续
- 注释:这种开发思路是为了方便改变商品的sortNo排列顺序,实现上移下移,但这样对于渲染列表更新数据来说是有问题的,尽量不使用
11、可动态增删的关联Input输入框是一个表单项,也有字数限制
- 参数类型和参数值以键值对对象的内容校验
validator: (_, value, callback) => {
if (!value.key || !value.value || (value.key && value.key.length > 10) || (value.value && value.value.length > 10)) {
callback('请输入10字内参数及信息或删除此输入框')
} else {
callback()
}
}
12、富文本内容详情字限为50-15000000字,实际输入1个字,也能提交成功
- 富文本不计算文字长度,计算内容转换为HTML后的字符串长度
value.toHTML().length < 50 || value.toHTML().length > 15000000
13、Upload上传轮播图媒体文件,上传图片时走裁剪过程,应可上传视频
- 问题:新增上传视频需求
- 解决:增加上传文件类型-video/*,不经过裁剪过程,直接上传存储
14、价格通过rule的pattern正则限制只能填写整数
<FormItem label="产品价格" {...formLayout}>
{ getFieldDecorator('price', {
rules: [{
type: 'number',
required: true,
message: '请输入1-100000元整数产品价格',
min:1,
max:100000,
pattern: new RegExp(/^[1-9]\d*$/, "g"), // 正则验证整数
}],
initialValue: current && detail ? detail.price/100 : ''
})(<InputNumber
min={1}
max={100000}
style={{width: 120}}
placeholder="请输入"
/>)}
</FormItem>
15、商品的现价原价填写小数点后超过两位时,提交商品时应提示“现/原价不应超过小数点后两位”
{ getFieldDecorator('oldPrice', {
validateTrigger: ['onChange', 'onBlur'],
rules: [
{
type: 'number',
required: true,
validator: (_, value, callback) => {
if (!value) {
callback('请先输入1-50000原价')
} else if ( String(value).split('.')[1] && String(value).split('.')[1].length > 2){
callback(`原价不应超过小数点后两位`)
} else{
callback()
}
}
}
],
注:转载请注明出处
最新文章
- PHP 原型模式
- JMeter专题系列(二)录制脚本
- 四则运算APP(BUG发掘)
- [转]World Wind学习总结一
- spark能否取代Hadoop?
- Java对象相关元素的初始化过程
- Spring 配置方式
- 不同浏览器创建XMLHttpRequest对象
- Redis 安装教程 (Windows 2.6.13 稳定版)
- Win7 64 bit 激活工具
- 在mac上访问自带服务器权限问题
- ubuntu中彻底删除nginx
- UrlRouting的理解
- 201521123073 《Java程序设计》第6周学习总结
- Hadoop集群及基本组件搭建
- wamp本地可以访问,远程无法访问,报错:client denied by server configuration
- git安装与基本命令
- 在linux,arm上的屏幕搜索wifi并连接(qt,多选择,wifi按信号排列)转
- python中join函数的用法
- Android监听安装卸载
热门文章
- 用C#控制台编写 推箱子之类的 坐标移动----之二维坐标
- js事件冒泡、阻止事件冒泡以及阻止默认行为
- Java的GUI框架如何选择? Swing、SWT、AWT、SwingX、JGoodies、JavaFX、Apache Pivot、BeautyEye框架(美观)?
- :OpenCV人脸识别Fisherface算法源码分析
- python之堆排序算法代码
- Codeforces 989 P循环节01构造 ABCD连通块构造 思维对云遮月参考系坐标轴转换
- ui自动化之selenium操作(一)环境搭建
- centos7 远程桌面连接到xfce桌面
- python 控制流(二)
- 关于antd表单的自行校验