

首页  思维导图  详情



cabi看板二开导图

2023-10-13 17:31:01   1  举报





AI智能生成

cabi

交接文档

模版推荐

作者其他创作

大纲/内容

组件嵌套及数据大体流向

src\views\CRUD\dashboard\DashboardList.tsx

idOrSlug

perms

src\dashboard\containers\DashboardPage.tsx

获取看板数据

将获取的看板数据存入redux

src\dashboard\containers\Dashboard.ts

连接redux数据

src\dashboard\components\Dashboard.jsx

根据layoutMode变量区分加载移动端和pc端组件

src\dashboard\components\DashboardBuilder\DashboardBuilder.tsx

控制编辑与非编辑状态下的看板

src\dashboard\components\DashboardBuilder\DashboardContainer.tsx

区分加载行列模式和网格模式

网格模式

src\dashboard\containers\DashDataV.jsx

连接redux数据

src\dashboard\components\DashDataV\index.jsx

网格模式的核心底座

新增组件

新增时会同时触发drop与handleDrop函数

渲染组件

流程：

1.通过props拿到所有组件—props.dashboardLayout.present

2.遍历所有组件，为所有从行列模式新增的组件添加网格模式渲染所需的默认参数，并且将所有悬浮组件筛选出来

3.遍历所有筛选出来的悬浮组件，与旧数据悬浮组件，去重。

4.将处理好的所有悬浮组件和非悬浮组件保存到组件state:floatCharts和charts

拖拽插件

react-grid-layout

文档地址

react-moveable  

子主题

src\dashboard\containers\DashboardComponent.jsx

行列模式

src\dashboard\containers\DashboardGrid.jsx

src\dashboard\components\DashboardGrid.jsx

src\dashboard\containers\DashboardComponent.jsx

重要变量

editMode：true || false

行列模式的编辑开关

editGrid：true || false

网格模式的编辑开关

注意：editMode与editGrid不能同时为true

layoutType：grid || rowAndColum

网格模式与行列模式的切换

 Collect

Get Started

二级节点

 Collect

Get Started

微信二维码支付时序图

 Collect

Get Started

实验二

 Collect

Get Started

上传二手物品流程图





0 条评论

下一页