前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >数据增删改查,最基本也是最麻烦的.

数据增删改查,最基本也是最麻烦的.

作者头像
杭州前端工程师
发布2018-06-15 11:52:05
3760
发布2018-06-15 11:52:05
举报
文章被收录于专栏:前端大白专栏前端大白专栏

这是一个看起来非常简单的功能,

点击项目名称,WBS编码相应的会变,这两个是联动的,选了wbs编码后,材料库和历史订单会出来,这些都比较简单,通过this.setState便可轻松实现点击材料库后,会有另外一个模态框,如下:

选择之后,点击添加数据便到了第一个图中的需求列表中,我个人认为较难的一点,并且在比较难想到的一个bug问题:数量输入后,在点击page切换后无法拿到上一页面的数量, 咱们需要做的便是在切换当前页面后,把当前页面的数据保存到state中,在点保存的时候重新获取保存,看起来是挺简单的,如果没有专业的测试,这些隐藏的bug,还是较难发现. 代码如下:

代码语言:javascript
复制
wbsSelectPageChange(page, size) {
  let t = this;
  console.log(page, size);
  let paramsAll = this.props.form.getFieldsValue();
  let data = t.state.wbsTableDataSure;//需求列表数据
  let uniqueData = data.slice((this.state.infoCurrentPage - 1) * this.state.infoPageSize, (this.state.infoCurrentPage) * this.state.infoPageSize);
  console.log(uniqueData);
  let realyArray = this.state.realyArraySure;
  uniqueData.forEach((item, index) => {
    let obj = {};
    obj[pruchaseTableHeader.materialId] = item[pruchaseTableHeader.order];
    obj[pruchaseTableHeader.needsNum] = paramsAll[item.id];
    realyArray.push(obj);
  });
  this.setState({
    realyArraySure: realyArray,
    infoCurrentPage: page,
    infoPageSize: size
  })
}

page页面切换的函数.

上图因为涉及公司相关信息,所以都涂了.

只为激励自己!以后代码的完整性

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档