![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ant design pro
文章平均质量分 64
刘斩仙的笔记本
业精于勤,荒于嬉;行成于思,毁于随。
展开
-
ant design pro 单页面打印标签功能的实现-全流程
描述:在页面中实现点击按钮,打印指定的内容。如图打印功能其实还好,网上很多代码,主要是配置贼繁琐。代码:doPrint=(id) =>{ //方法 const el = document.getElementById('content'); const iframe = document.createElement('IFRAME'); let doc = ...原创 2019-01-29 10:03:50 · 3067 阅读 · 6 评论 -
ant design pro 使用融云IM实现聊天功能
介绍:前台使用vue开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能。效果如图(PC+移动):一、申请融云账号(token、appKey)建议先看教程:sdk使用介绍过一遍教程,接下来开始写二、引入融云IM如图://下载RongIMLib.js存放于assets中//在需要使用的页面引入require('../../assets/RongI...原创 2019-03-13 17:28:02 · 6526 阅读 · 2 评论 -
ant design pro 实现审核图片盖章功能
介绍: 鼠标变成图章,点击后,在图片对应位置加盖公章功能。如图所示:源代码:import { Card, Modal} from 'antd';import React, { Component } from 'react';import { connect } from 'dva';const { confirm } = Modal;@connect(({ project, loading }) => ({ project: project, loading: loa原创 2020-08-06 20:33:44 · 680 阅读 · 0 评论 -
ant design pro 数据脱敏(姓名/手机号)
utils.jsexport default class Utils { //str文本-type类型:name/姓名;phone/手机号 static onlySeeSome(str,type) { let arr = JSON.parse(localStorage.getItem('user')).roleList let isHideData = arr.find((item)=>item.roleKey == 'administrator') if(isHid原创 2020-05-25 23:55:31 · 1484 阅读 · 0 评论 -
ant design pro 动态表单 表单嵌套 表单的数据存储到上层组件
描述:如下图,在表单中,根据后台返回值确定行数,每一行都是一个Form表单,提交表单时,每一行为对象`{购药日期:’ ‘,购药支数:’ ‘,号码:’ ‘,来源:’ '},最终形式购药发票记录:[ {id:1,购药日期:' ',购药支数:' ',号码:' ',来源:' '}, {id:2,购药日期:' ',购药支数:' ',号码:' ',来源:' '} ]参考:根据...原创 2019-01-24 18:39:51 · 9653 阅读 · 4 评论 -
ant design pro 动态表单 表单嵌套 表单的数据存储到上层组件(可手动增减表单)
描述:如下图,最终形式testQuestionOptionList:[ { quesOption: '1', flag: 'A'}, { quesOption: '2', flag: 'B'}]参考:根据 ant design 官网案例 表单的数据存储到上层组件 有疑问请参考官网import React, { PureComponent, Fragment } from 'r...原创 2019-04-26 13:52:39 · 4821 阅读 · 0 评论 -
and design pro实现打印电子面单(菜鸟物流-可批量打印)
介绍:菜鸟物流,and design pro版本效果如图:第一步:先看文档=>菜鸟文档:接口文档第二步:下载云打印客户端:打印组件,安装打开就完了第三步:配置打印机:装驱动,设置为默认打印机(面单打印机),完事儿!第四步:注意:如遇打印报【渲染失败】、【出现打印提示框】或者【打印暂停】,1.重装一下驱动,2.重启电脑,3.cainiao打印组件中,选择工具-清...原创 2019-04-24 18:17:57 · 3239 阅读 · 0 评论 -
ant design pro备忘
1.阿里oss图片const filterImg = (val)=>{ if(val.indexOf('http') != -1){ return <img src={val} onClick={()=>{window.open(val.replace(/max/, "ori"))}}/> }else{ return...原创 2019-05-17 10:23:31 · 133 阅读 · 0 评论 -
ant design pro中 DISABLE_ESLINT is deprecated, use ESLINT=none instead has been deprecated.解决方式
方法://package.json中把启动命令换一下就好了,再install一下"start": "cross-env ESLINT=none roadhog dev",番外:除了这个问题,往往伴随着Modal not found: Can’t resolve ‘@babel/runtime/helpers/esm/extends’,请看这里解决方法。...原创 2019-06-13 20:38:26 · 4222 阅读 · 2 评论 -
ant design pro 组件通信
描述:在页面(组件)中,只能有一个@Form.create(),意味着this.props.form唯一,如果一个页面有两个或者多个表单,提交其中一个,会携带其他表单数据,如果设置了required: true,影响其他表单提交,此时就需要新建组件。情况一(子组件调用父组件方法)://顶部搜索,点击搜索动作在子组件内部完成,需要把搜索条件传给父组件保存(分页需要)import React, ...原创 2019-01-24 11:59:30 · 2191 阅读 · 0 评论 -
ant design pro 一个页面两个表单,提交会相互影响,需将表单写为自定义组件
描述:在页面(组件)中,只能有一个@Form.create(),意味着this.props.form唯一,如果一个页面有两个表单,提交其中一个,另一个也会提交,然而你只想提交一个。解决方法:1.如果表单多且复杂,请单独自定义一个页面(组件),我这是偷懒直接在页面自定义一个Search 组件(不推荐)不完整代码(不必要的我删了):import React, { PureComponent, ...原创 2019-01-24 10:26:26 · 14139 阅读 · 4 评论 -
ant design pro 富文本编辑器
问题:本来找到这个react-lz-editor插件(先安装这个),以为万事大吉,谁知道被Upload坑了很久,凌晨三点才写完,心累啊BUG:Upload的onChange方法response中没有上传成功的返回值,百度了很久,依然无法解决,试了N种方法,全都不行(耽误了我很久以至于凌晨三点才写完),最后只能采用onSuccess,在该函数种有返回值。效果:完整代码:impo...原创 2018-11-11 17:31:38 · 31321 阅读 · 6 评论 -
ant desgin pro 跨页面传参
1、routerRedux方式import { routerRedux } from 'dva/router';goOrder (record){//页面跳转+参数 this.props.dispatch(routerRedux.push({ pathname: '/giveData/queryOrder', params: record.userId ...原创 2018-04-16 11:33:15 · 9223 阅读 · 3 评论 -
ant design pro 分页
因为Table自带分页,但是是前台分页,获取所有数据,自动分页数据大,不太友好,所以改为单独请求数据。import { Button, Row, Col, Icon, Steps, Card, Table, Divider, Input, Form, Popconfirm, Modal, message, Menu, DatePicker ,Pagination} from 'antd';...原创 2018-04-16 16:12:47 · 8403 阅读 · 2 评论 -
ant design pro 修改代理
一、情况一const noProxy = process.env.NO_PROXY === 'true';const proxy = { 'POST /api/(.*)': 'https://api.microzan.com.cn/api/', 'GET /api/(.*)': 'https://api.microzan.com.cn/api/',}export defa...原创 2018-06-06 17:48:37 · 7740 阅读 · 6 评论 -
ant design pro中click事件传参正确写法(获取事件对象e)
1.click事件写法写法一://事件 add = ()=&gt;{ console.log("最近我的公孙离被吊打") } //正确使用 &lt;div onClick={ ()=&gt;{ this.add() } }&gt; 抓娃娃 &lt;/div&gt; 或 &lt;div onClick={ this.add原创 2018-08-04 16:16:52 · 11186 阅读 · 2 评论 -
ant design pro 上传成功但是服务器接收不到file解决方法
情况如图所示: 描述:前台请求成功,但是服务器接收不到上传的file文件解决方法:修改上传组件的action设置错误: action:'/upFile', //不要这样写,因为上传不走代理正确: action:'https://www.baidu.com/upFile', //这样写,让后台解决一下跨域就可以了...原创 2018-08-12 11:41:20 · 5719 阅读 · 0 评论 -
ant design pro 轮播图加prev()和next()
效果如图:代码:方法:handlePrev = ()=&gt;{ this.refs.img.prev(); //ref = img } handleNext = ()=&gt;{ this.refs.img.next(); } handleWxLook = (val) =&gt;{ this.setState({ vis...原创 2018-09-09 17:23:29 · 5964 阅读 · 2 评论 -
ant design pro 导出excel
** 问题:ant design pro中请求后端接口返回数据是下图,如何转化为excel表格呢?** 实现:删除文本引用文本H2O is是液体。210 运算结果是 1024.插入链接与图片链接: link.图片: 带尺寸的图片: 当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。如何插入一段漂亮的代码片去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同...原创 2018-10-10 14:32:41 · 9506 阅读 · 7 评论 -
ant design pro 表单
1、Input Enter事件&amp;amp;lt;input onKeyUp={this.onKeyUp} onPressEnter={this.enter}&amp;amp;gt;onKeyUp = (e) =&amp;amp;gt; { if(e.keyCode === 13){ console.log(&amp;quot;我是enter&amp;quot;)原创 2018-04-16 11:17:55 · 4162 阅读 · 0 评论 -
ant designpr v4探索记录
1.安装yarn create umi //必须是空文件夹选择ant-design-pro选择TypeJavascriptnpm install //必须是npmnpm start //运行2.恢复所有页面npm run fetch:blocks3.动态菜单(路由)config.tsconst menuRouter = [ { path: '/', na...原创 2019-09-06 10:34:13 · 339 阅读 · 2 评论