首页 > 其他分享 >React实战--利用甘特图和看板,强化Paas平台应用

React实战--利用甘特图和看板,强化Paas平台应用

时间:2023-06-26 10:07:58浏览次数:43  
标签:Paas -- 甘特图 React 任务 tsx kintone 看板


概述

这是一篇 React 在 kintone 上的实战,我们需要利用看板和甘特图来来强化项目管理 app。另外这次用到了 webpack,想了解基本配置思路的可以看这里

项目地址
GitHub - kintone-samples/SAMPLE-kintone-ganttchart-kanban-cn: project manager for kintone,using Gantt and Kanban

效果图

React实战--利用甘特图和看板,强化Paas平台应用_react

需求整理


 看板

  • 卡片上需要显示负责人、时间、类型、标题、详细信息
  • 看板上不同的跑道代表不同的状态,需要按照顺序显示
  • 允许卡片在各个跑道自由切换,当移动完成时需要同步更新记录的状态信息
  • 点击卡片能进入详细画面
  • 不建议用流程管理来设置状态,因为它需要设置每个 action 动作

甘特图

  • 甘特图需要能标示今天日期
  • 甘特图要有不同的 viewmode 来控制时间长度信息
  • 能显示父子任务关系图
  • 任务能被自由拖拽,时间被改变后需要同步更新记录的时间信息
  • 任务状态以进度百分比的方式显示
  • 任务标题和时间信息能以文字的形式显示出来
  • 点击任务能进入详细画面

其他

  • 要有切换功能
  • 不同的任务类型需要用不同的颜色显示
  • 和 kintone 的列表功能结合起来,来控制数据大小
  • 详细画面要有甘特图,只显示自己的父子任务
  • lookup 只能查其他 app 的信息,无法利用它来实现父子关系绑定,需要有其他的手段

kintone App 设置

React实战--利用甘特图和看板,强化Paas平台应用_react_02


React实战--利用甘特图和看板,强化Paas平台应用_看板_03


 代码详解

部分代码由于系统的原因无法完全显示,请以github上源文件为准

第三方包选择

甘特图看板
React UI library
任务类型名转不同颜色

 index.tsx、App.tsx、KintoneAppRepository.tsx、Card.tsx 详细代码请见:

开发者网站-React实战


标签:Paas,--,甘特图,React,任务,tsx,kintone,看板
From: https://blog.51cto.com/u_14091703/6551632

相关文章

  • IE7下图片缩放失真fix
    此篇主要是介绍ie7下图片被拉伸导致的锯齿 解决方法: 增加这个样式规则  -ms-interpolation-mode:bicubic语法: -ms-interpolation-mode  nearest-neighbor   ------usenearestneighborinterpolationmodebicubic            ------use......
  • array的unshift
    Array unshift方法   ------------ 向数组的开头添加一个或更多的元素,返回新的长度。   /*@paramnewelement1必须@paramnewelement2可选*/arrayObject.unshift(newelement1,newelement2.....) 返回值:   arrayObject的新长度  注释:   unshift()方......
  • html5之文件api
    这篇主要是探讨一下HTML5的文件API 1、FileList对象与file对象  FileList对象表示用户选择文件的列表,在HTML5中,加了multiple属性,file控件允许放置多个文件。控件内的每一个用户选择的文件都是一个file对象FileList对象是这些file对象的列表file对象有两个属性:name属性表示文......
  • jQuery源码浅谈系列---$.attr()
    attr()   1、attr(name)     取得第一个匹配元素的属性值。如果元素没有相应的属性,则返回undefined。  2、attr(properties)     将一个"名/值"形式的对象设置为所有匹配元素的属性。    注:要设置class属性,必须用'className'作为属性名。     举例:......
  • 关于hash的一些探究之开篇
    前言:     其实项目做着做着,慢慢地有点转型到所谓的“前端主导”的方式------后端返回前端ajax的数据,前端进行渲染和事件交互相关的东西。但是也越来越体验到ajax带来的一些不好的地方:每一个ajax请求中,页面不会更新地址栏,历史记录也就不会得到更新,浏览器自带的“前进”与......
  • 《编写高质量代码》读书笔记系列开篇
    前言:   时间过的好快,进入这个互联网的fe行业已经快*年了,读书还是一个需要坚持的东东,是一种坚持,因为兴趣所以热爱。 正文:   其实这边书一种在间断地看着,今天组里买了一本,决定开一个系列,静静地品一下,重新审视自己的深度和方向。   1、如何做的更好的Web前端工程师?   ......
  • Flutter延迟执行一段代码的几种方式以及Timer的说明
    延迟执行在Flutter中,可以使用以下方式实现延迟执行一段代码的效果使用Future.delayed方法:Future.delayed(Duration(milliseconds:500),(){//延迟执行的代码});使用Timer类:Timer(Duration(milliseconds:500),(){//延迟执行的代码});使用Future......
  • DOM Select对象
    DOMSelect对象   ----代表HTML表单中的一个下拉框      <select>标签每出现一次,一个Select对象就会被创建。 举例参考:  <selectid="test"><optionvalue="0">1000</option><optionvalue="1">2000</option><option......
  • JavaScript1.8.5新特性系列Object.keys
    以前在js-object这个分类里面也写过keys相关的api 在JavaScript1.8.5中,加入了原生的Object.keys这个api  Object.keys(obj);/*简单举例*/Object.keys({"A":"a","B":"b"});//["A","B"]兼容性写法:  if(!Object.keys){Object.keys=......
  • 目标字符串驼峰化处理
    功能函数的设计初衷是将目标字符串驼峰化的api:比如CSS样式特性与JavaScipt样式属性的切换  background-color与style.backgroundColorfont-weight与fontWeightfont-family与fontFamily  ~~~~~~~~~~~~~~  /**toCamelCase--将目标字符串进行驼峰化处理**@func......