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

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

时间:2023-06-26 09:48:00浏览次数:42  
标签:Paas -- 甘特图 React 任务 tsx kintone 看板

概述

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

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

 

效果图

 

需求整理

 看板

  • 卡片上需要显示负责人、时间、类型、标题、详细信息

  • 看板上不同的跑道代表不同的状态,需要按照顺序显示

  • 允许卡片在各个跑道自由切换,当移动完成时需要同步更新记录的状态信息

  • 点击卡片能进入详细画面

  • 不建议用流程管理来设置状态,因为它需要设置每个 action 动作

 

甘特图

  • 甘特图需要能标示今天日期

  • 甘特图要有不同的 viewmode 来控制时间长度信息

  • 能显示父子任务关系图

  • 任务能被自由拖拽,时间被改变后需要同步更新记录的时间信息

  • 任务状态以进度百分比的方式显示

  • 任务标题和时间信息能以文字的形式显示出来

  • 点击任务能进入详细画面

 

其他

  • 要有切换功能

  • 不同的任务类型需要用不同的颜色显示

  • 和 kintone 的列表功能结合起来,来控制数据大小

  • 详细画面要有甘特图,只显示自己的父子任务

  • lookup 只能查其他 app 的信息,无法利用它来实现父子关系绑定,需要有其他的手段

 

kintone App 设置

 

 代码详解

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

第三方包选择

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

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

开发者网站-React实战

标签:Paas,--,甘特图,React,任务,tsx,kintone,看板
From: https://www.cnblogs.com/cybozu/p/17504526.html

相关文章

  • 图文示例二叉树的编码实现过程
    前言在上一篇文章中,带大家一起学习认识了树型数据结构的定义和特点,并特别介绍了二叉树的遍历操作,分别有:前序遍历、中序遍历、后序遍历。前中后的核心区别是根据根节点在遍历过程中的位置决定的,即:根节点在最前面的称之为中序遍历,根节点在中间的称之为中序遍历,根节点在最后的称之为......
  • 【网络】【HTTP】既然有 HTTP 协议,为什么还要有 WebSocket?
    1  前言平时我们打开网页,比如购物网站某宝。都是点一下「列表商品」,跳转一下网页就到了「商品详情」。从HTTP协议的角度来看,就是点一下网页上的某个按钮,前端发一次HTTP请求,网站返回一次HTTP响应。这种由客户端主动请求,服务器响应的方式也满足大部分网页的功能场景。但......
  • Windows/Linux上如何配置NTP时间同步
    前几天装了几台VirtualBox虚机(CentOS),结果发现GuestAdditionalTool不定期出现无法从宿主机(Windows)同步时间的问题,折腾了好久,感觉是GuestAdditionalTool的bug,索性直接用NTP来同步虚机和宿主机的时间。Windows启动NTP服务:点击“运行”按钮,在运行窗口中执行services.msc命令......
  • vue根据element-ui实现下拉多选
    下拉多选element-ui实现效果组件代码<template><el-selectclass="maxwidth"v-model="showVal"multipleplaceholder="请选择":popper-append-to-body="false"@remove-tag="removetag"@......
  • html2canvas使用记录
    1.生成图片有白边/黑边设置backgroundColor:#ffffff2.本地生成图片没有白边/黑边,打包后生成图片有白边/黑边查看打印容器/父级是否有定位,宽度过大/过小等,去掉定位或限宽3.生成图片模糊设置scale参数4.文字错位设置字体5.外链图片不显示设置useCors:true,同时将打印区的......
  • 干掉Navicat?阿里Chat2DB来了!
    最近朋友圈被阿里的Chat2DB刷屏了,磊哥也是第一时间下载并体验了阿里巴巴的Chat2DB,今天就迫不及待和大家分享一下。什么是Chat2DB?Chat2DB是一款由阿里巴巴开源免费的多数据库客户端工具,支持windows、mac本地安装,也支持服务器端部署,web网页访问。和传统的数据库客户端软件......
  • template上使用v-for报错
    在template标签上使用v-for报错cannotbekeyed.Placethekeyonrealelementsinstead查了一下百度,是因为key需要绑定在真实的元素上<templatev-for="(item,index)inmenu":key="index"></template>解决方法:1、将template标签替换成别的标签2、将key绑定值写在别的......
  • 前端Vue自定义精美tabs,可设置下划线图标 热门标题
    前端Vue自定义精美tabs,可设置下划线图标热门标题,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13186效果图如下:cc-beautyTabs使用方法<!--tabchange:tab选择事件tabList:tab数据--><cc-beautyTabs@tabChange="tabChange":tabList="t......
  • 如何扩展及优化CI/CD流水线?
    如今应用程序的开发通常由多个开发人员组成的团队完成。每个人或团队在项目中发挥自己的作用,然后我们发现在项目的末尾总是有几段代码需要编译,根据每个人的工作方法,管理这种集成可能会浪费很多时间。持续集成和持续交付/部署(CI/CD)便用来解决该问题,确保发布更新顺利进行,避免不必要......
  • IDEA : Cannot Save Setting ** must not contain source root **. The root alrea
    今天突然碰到这个问题,具体原因是parant目录不能放src的code。解决方法图片右侧的父project的SoureceFolders,是不是把子模块module或者其他模块加载进来(会标红),删除即可......