React 递归手写流程图展示树形数据

需求

根据树的数据结构画出流程图展示,支持新增前一级、后一级、同级以及删除功能(便于标记节点,把节点数据当作label展示出来了,实际业务中跟据情况处理)
在这里插入图片描述

文件结构

在这里插入图片描述

初始数据

[
  {
    "ticketTemplateCode": "TC20230404000001",
    "priority": 1,
    "next": [
      {
        "ticketTemplateCode": "TC20230705000001",
        "priority": 2,
        "next": [
          {
            "ticketTemplateCode": "TC20230707000001",
            "priority": 3
          },
          {
            "ticketTemplateCode": "TC20230404000002",
            "priority": 3
          }
        ]
      }
    ]
  }
]

功能实现

index.tsx
import React, { memo, useState } from 'react'
import uniqueId from 'lodash/uniqueId'
import NodeGroup from './group'
import { handleNodeOperation, NodeItemProps, NodeOperationTypes } from './utils'
import styles from './index.less'

export interface IProps {
  value?: any;
  onChange?: any;
}

/**
 * 树形流程图
 */
export default memo<IProps>(props => {
  const { value = [], onChange } = props
  const [activeKey, setActiveKey] = useState('TC20230404000001_1')

  const handleNode = (type = 'front' as NodeOperationTypes, item: NodeItemProps, index: number) => {
    switch (type) {
      case 'click' : {
        setActiveKey(`${item.ticketTemplateCode}_${item.priority}`)
      }; break
      case 'front':
      case 'next':
      case 'same':
      case 'del' : {
        const newList = handleNodeOperation(type, value, `${uniqueId()}`, item, index)
        // 添加前置工单时需要处理选中项
        if (type === 'front') {
          setActiveKey(`${item.ticketTemplateCode}_${item.priority + 1}`)
        }
        onChange?.(newList)
      }; break
    }
  }

  const renderNodes = (list = [] as NodeItemProps[]) => {
    return list.map((item, index) => {
      const key = `${item.ticketTemplateCode}_${item.priority}_${index}`
      const nodeGroupProps = {
        active: `${item.ticketTemplateCode}_${item.priority}` === activeKey,
        options: [],
        handleNode,
        front: item.priority !== 1,
        next: item.next && item.next.length > 0,
        item,
        index,
        sameLevelCount: list.length,
      }
      if (item.next && item.next.length > 0) {
        return (
          <NodeGroup
            key={key}
            {...nodeGroupProps}
            next
          >
            {renderNodes(item.next)}
          </NodeGroup>
        )
      }
      return <NodeGroup key={key} {...nodeGroupProps} />
    })
  }

  return (
    <div style={{ overflowX: 'auto' }}>
      <div className={styles.settingStyle}>{renderNodes(value)}</div>
    </div>
  )
})

group.tsx
import React, { memo, useEffect, useState } from 'react'
import NodeItem from './item'
import styles from './index.less'
import { NodeItemProps } from './utils'

export interface IProps {
  index?: number;
  active?: boolean;
  handleNode?: any;
  sameLevelCount?: number; // 同级工单数量
  front?: boolean; // 是否有前置工单
  next?: boolean; // 是否有后置工单
  children?: any;
  item?: NodeItemProps;
}

/**
 * 流程图-同层级组
 */
export default memo<IProps>(props => {
  const { active, front = false, next = false, handleNode, children, item, index, sameLevelCount = 1 } = props
  const [groupHeight, setGroupHeight] = useState(0)

  useEffect(() => {
    const groupDom = document.getElementById(`group_${item?.ticketTemplateCode}`)
    setGroupHeight(groupDom?.clientHeight || 0)
  }, [children])

  // 处理连接线展示
  const handleConcatLine = () => {
    const line = (showLine = true) => <div className={styles.arrowVerticalLineStyle} style={{ height: groupHeight / 2, backgroundColor: showLine ? 'rgba(0, 0, 0, 0.25)' : 'white' }} />
    return (
      <span>{line(index !== 0)}{line(index + 1 !== sameLevelCount)}</span>
    )
  }

  return (
    <div className={styles.groupDivStyle} id={`group_${item?.ticketTemplateCode}`}>
      {sameLevelCount < 2 ? null : handleConcatLine()}
      <NodeItem
        active={active}
        options={[]}
        handleNode={handleNode}
        front={front}
        next={next}
        item={item}
        sameLevelCount={sameLevelCount}
        index={index}
      />
      {children?.length ? <div>{children}</div> : null}
    </div>
  )
})

item.tsx
/* eslint-disable curly */
import { Select, Space, Tooltip } from 'antd'
import React, { memo } from 'react'
import styles from './index.less'
import { PlusCircleOutlined, CaretRightOutlined, DeleteOutlined } from '@ant-design/icons'
import { ProjectColor } from 'styles/projectStyle'
import { nodeOperationTip, NodeItemProps } from './utils'

export interface IProps {
  index?: number;
  active?: boolean; // 选中激活
  options: any[]; // 单项选项数据 放在select中
  handleNode?: any;
  sameLevelCount?: number; // 同级工单数量
  front?: boolean; // 是否有前置工单
  next?: boolean; // 是否有后置工单
  same?: boolean; // 是否有同级工单
  item?: NodeItemProps;
}

/**
 * 流程图-单项
 */
export default memo<IProps>(props => {
  const {
    index,
    active,
    options = [],
    handleNode,
    front = false,
    next = false,
    item,
  } = props

  // 添加 or 删除工单图标
  const OperationIcon = ({ type }) => {
    if (!active) return null
    const dom = () => {
      if (type === 'del') return <DeleteOutlined style={{ marginBottom: 9 }} onClick={() => handleNode(type, item, index)} />
      if (type === 'same')
        return <PlusCircleOutlined style={{ color: ProjectColor.colorPrimary, marginTop: 9 }} onClick={() => handleNode(type, item, index)} />
      const style = () => {
        if (type === 'front') return { left: -25, top: 'calc(50% - 7px)' }
        if (type === 'next') return { right: -25, top: 'calc(50% - 7px)' }
      }
      return (
        <PlusCircleOutlined
          className={styles.itemAddIconStyle}
          style={{ ...style(), color: ProjectColor.colorPrimary }}
          onClick={() => handleNode(type, item, index)}
        />
      )
    }
    return <Tooltip title={nodeOperationTip[type]}>{dom()}</Tooltip>
  }

  // 箭头
  const ArrowLine = ({ width = 50, show = false, arrow = true }) =>
    show ? (
      <div className={styles.arrowDivStyle} style={front && arrow ? { marginRight: -4 } : {}}>
        <div className={styles.arrowLineStyle} style={{ width, marginRight: front && arrow ? -4 : 0 }} />
        {!arrow ? null : (
          <CaretRightOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />
        )}
      </div>
    ) : null

  return (
    <div className={styles.itemStyle}>
      <Space direction="vertical" align="center">
        <div className={styles.itemMainStyle}>
          <ArrowLine show={front} />
          <div className={styles.itemSelectDivStyle}>
            <OperationIcon type="del" />
            // 可以不需要展示 写的时候便于处理节点操作
            {item?.ticketTemplateCode}
            <Select
              defaultValue="lucy"
              bordered={false}
              style={{
                minWidth: 120,
                border: `1px solid ${active ? ProjectColor.colorPrimary : '#D9D9D9'}`,
                borderRadius: 4,
              }}
              onClick={() => handleNode('click', item, index)}
              // onChange={handleChange}
              options={[ // 应该为props中的options
                { value: 'jack', label: 'Jack' },
                { value: 'lucy', label: 'Lucy' },
                { value: 'Yiminghe', label: 'yiminghe' },
                { value: 'disabled', label: 'Disabled', disabled: true },
              ]}
            />
            <OperationIcon type="same" />
            <OperationIcon type="front" />
            <OperationIcon type="next" />
          </div>
          <ArrowLine show={next} arrow={false} />
        </div>
      </Space>
    </div>
  )
})
utils.ts
/* eslint-disable curly */
export interface NodeItemProps {
  ticketTemplateCode: string;
  priority: number;
  next?: NodeItemProps[];
}

export type NodeOperationTypes = 'front' | 'next' | 'del' | 'same' | 'click'

/**
 * 添加前置/后置/同级/删除工单
 * @param type 操作类型
 * @param list 工单树
 * @param addCode 被添加的工单节点模版Code
 * @param item 操作节点
 */
export const handleNodeOperation = (type: NodeOperationTypes, list = [] as NodeItemProps[], addCode: NodeItemProps['ticketTemplateCode'], item: NodeItemProps, index: number) => {
  if (item.priority === 1 && type === 'front') return handleNodePriority([{ ticketTemplateCode: addCode, priority: item.priority, next: list }])
  if (item.priority === 1 && type === 'same') {
    return [
      ...(list || []).slice(0, index + 1),
      { ticketTemplateCode: addCode, priority: item.priority },
      ...(list || []).slice(index + 1, list?.length),
    ]
  }
  let flag = false
  const findNode = (child = [] as NodeItemProps[]) => {
    return child.map(k => {
      if (flag) return k
      if (type === 'front' && k.priority + 1 === item.priority && k.next && k.next?.findIndex(m => m.ticketTemplateCode === item.ticketTemplateCode) > -1) {
        flag = true
        return { ...k, next: [{ ticketTemplateCode: addCode, priority: item.priority, next: k.next }]}
      }
      if (type === 'next' && k.ticketTemplateCode === item.ticketTemplateCode) {
        flag = true
        return { ...k, next: [...(k.next || []), { ticketTemplateCode: addCode, priority: item.priority }]}
      }
      if (type === 'same' && k.priority + 1 === item.priority && k.next && k.next?.findIndex(m => m.ticketTemplateCode === item.ticketTemplateCode) > -1) {
        flag = true
        return { ...k, next: [
          ...(k.next || []).slice(0, index + 1),
          { ticketTemplateCode: addCode, priority: item.priority },
          ...(k.next || []).slice(index + 1, k.next?.length),
        ]}
      }
      if (type === 'del' && k.priority + 1 === item.priority && k.next && k.next?.findIndex(m => m.ticketTemplateCode === item.ticketTemplateCode) > -1) {
        flag = true
        console.log(index, (k.next || []).slice(0, index), (k.next || []).slice(index + 1, k.next?.length), 223)
        return { ...k, next: [
          ...(k.next || []).slice(0, index),
          ...(k.next || []).slice(index + 1, k.next?.length),
        ]}
      }
      if (k.next && k.next.length > 0) {
        return { ...k, next: findNode(k.next) }
      }
      return k
    })
  }
  return handleNodePriority(findNode(list))
}

// 处理层级关系
export const handleNodePriority = (list = [] as NodeItemProps[], priority = 1) => { // priority 层级
  return list.map((k: NodeItemProps) => ({ ...k, priority, next: handleNodePriority(k.next, priority + 1) }))
}

// 得到最大层级 即工单树的深度
export const getDepth = (list = [] as NodeItemProps[], priority = 1) => {
  const depth = list.map(i => {
    if (i.next && i.next.length > 0) {
      return getDepth(i.next, priority + 1)
    }
    return priority
  })
  return list.length > 0 ? Math.max(...depth) : 0
}

export const nodeOperationTip = {
  front: '增加前置工单',
  next: '增加后置工单',
  same: '增加同级工单',
  del: '删除工单',
}

index.less
.settingStyle {
  margin-left: 50px;
}

.groupDivStyle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemStyle {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 94px;
}

.itemMainStyle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.arrowLineStyle {
  height: 1px;
  background-color: rgba(0, 0, 0, 0.25);
  margin-right: -4px;
}

.arrowDivStyle {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemAddIconStyle {
  position: absolute;
}

.itemSelectDivStyle {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.arrowVerticalLineStyle {
  width: 1px;
  background-color: rgba(0, 0, 0, 0.25);
}

叭叭

难点一个主要在前期数据结构的梳理以及具体实现上,用递归将每个节点以及子节点的数据作为一个Group组,如下图。节点组 包括 当前节点+子节点,同层级为不同组
在这里插入图片描述

第二个比较麻烦的是由于纯写流程图,叶子节点间的箭头指向连接线需要处理。可以将一个节点拆分为 前一个节点的尾巴+当前节点含有箭头的连接线+平级其他节点含有箭头(若存在同级节点不含箭头)的连接线+竖向连接线(若存在同级节点),计算逻辑大概为94 * (下一级节点数量 - 1)
在这里插入图片描述
后来发现在实际添加节点的过程中,若叶子节点过多,会出现竖向连接线缺失(不够长)的情况,因为长度计算依赖下一级节点数量,无法通过后面的子节点的子节点等等数量做计算算出长度(也通过这种方式实现过,计算当前节点的最多层子节点数量……很奇怪的方式)
反思了一下,竖向连接线应该根据当前节点的Group组高度计算得出,连接线分组也应该重新调整,竖向连接线从单个节点的末端调整到group的开头,第一个节点只保留下半部分(为了占位,上半部分背景色调整为白色),最后一个节点只保留上半部分,中间的节点保留整个高度的连接线
在这里插入图片描述
最后展示上的结构是
tree :group根据树形数据结构递归展示
group :竖向连接线(多个同级节点)+ 节点本身Item + 当前节点子节点们
item:带箭头连接线+节点本身+不带箭头的下一级连接线

最终效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/127759.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构:Map和Set(1)

搜索树 概念 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值 它的左右子树也分别为二叉搜索树 这棵树的中序遍历结果是有序的 接下来我们来模拟一棵二叉搜索树&#xff0c…

【Java】本地开发环境正常、测试或生产环境获取的文件路径不对的问题

引 Java 中经常获取本地文件或者resource下的文件&#xff0c;要获取文件&#xff0c;首先要获得本地路径。 Java 本身或一些开源工具包都提供了很多获取路径的方法。但使用时经常遇到本地开发环境正常、测试或生产环境获取的文件路径不对的问题。 本文将列出几种常见的获取…

盘点那些开发中经常用到的git命令

入职第一天 配置邮箱账号 git config —global user.email "XXXX" git config —global user.name "XXXX" 生成公钥 ssh-keygen -t rsa -C "你的邮箱"生成的文件默认在c盘:/用户/当前用户/.ssh文件夹下&#xff0c;也可以指定文件 打开git网页&…

【正点原子STM32连载】 第四十九章 SD卡实验 摘自【正点原子】APM32F407最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子stm32f103战舰开发板V4 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html## 第四…

对Mysql和应用微服务做TPS压力测试

1.对Mysql 使用工具&#xff1a;mysqlslap工具 使用命令&#xff1a; mysqlslap -uroot pGG8697000!#--auto generate sql -auto generate sql-load typemixed-concurrency100,200 - number of queries1000-iterations10 - number-int-cols7 - number-charcols13auto genera…

105.am40刷机(linux)折腾记1-前期的准备工作1

前段时间在某鱼上逛的时候&#xff0c;发现一款3399的盒子只要150大洋&#xff0c;内心就开始澎拜&#xff0c;一激动就下手了3台&#xff0c;花了450大洋&#xff08;现在想想&#xff0c;心都碎了一地&#xff09;。 然后自己又来来回回折腾了几天&#xff0c;目前能跑上fire…

NodeJs - 集合对象序列化问题

NodeJs - 集合对象序列化问题 一. 集合对象的序列化问题1.1 Map 和 Object 的区别1.2 Map 的相关转换Map 和 Array 互转Map 和 Object 互转 1.3 Set 的相关转换Set 和 Array 互转 一. 集合对象的序列化问题 案例如下&#xff1a;我们创建一个Map和一个Set集合&#xff0c;并用…

6、规划绩效域

1、变更 &#xff08;1&#xff09;变更有哪几种原因&#xff08;类型&#xff09;&#xff1f; 纠正措施&#xff08;比如进度落后了&#xff0c;我们会有赶工和快速跟进的措施&#xff09; 缺陷补救 预防措施 更新措施 2、变更的目的和变更控制流程的意义 考点1&#…

PSP - 蛋白质复合物结构预测 Template Pair 特征 Mask 可视化

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/134333419 在蛋白质复合物结构预测中&#xff0c;在 TemplatePairEmbedderMultimer 层中 &#xff0c;构建 Template Pair 特征的源码&#xff0c…

字符串取出多余空格的三种方法

151.翻转字符串里的单词 力扣题目链接(opens new window) 这个题的解题思路如下&#xff1a; 移除多余空格将整个字符串反转将每个单词反转 这个题的难点是去除多余的空格&#xff0c;下面我将详细讲解一下去除多余空格的几种方法。 第一种方法是逐个字符的去遍历&#xff…

CentOS 7 双网卡绑定热备 —— 筑梦之路

为什么需要&#xff1f; 1. 增强网络的可靠性 2. 保障服务的可持续性 3. 降低网卡故障带来的不良影响 有哪些模式&#xff1f; 模式0&#xff1a;轮询策略&#xff08;round robin&#xff09;&#xff0c;mode0&#xff0c;优点&#xff1a;流量提高一倍缺点&#xff1a;需要接…

Pytorch实战教程(一)-神经网络与模型训练

0. 前言 人工神经网络 (Artificial Neural Network, ANN) 是一种监督学习算法,其灵感来自人类大脑的运作方式。类似于人脑中神经元连接和激活的方式,神经网络接受输入,通过某些函数在网络中进行传递,导致某些后续神经元被激活,从而产生输出。函数越复杂,网络对于输入的数…

UE5蓝图接口使用方法

在内容区右键创建蓝图接口 命名自定义&#xff08;可以用好识别的&#xff09; 双击打开后关闭左边窗口 右键函数 -- 重命名 -- 名称自定义&#xff08;用好记的&#xff09; 点击下边输入后面的 号创建一个变量 点击编译并保存 在一个蓝图类里面 -- 点击类设置 在右侧已实现的…

修改Android Studio默认的gradle目录

今天看了一下&#xff0c;gradle在C盘占用了40多G。我C盘是做GHOST的&#xff0c;放在这里不方便。所以就要修改。 新建目录名&#xff08;似乎无必要&#xff09; ANDROID_SDK_HOMEG:\SOFTWARES\android-sdk GRADLE_USER_HOMEG:\SOFTWARES\.gradle 修改目录 File->Setti…

Html 引入element UI + vue3 报错Failed to resolve component: el-button

问题&#xff1a;Html 引入element UI vue3 &#xff0c;el-button效果不出来 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><!-- import Vue before Element --> <!-- <script src"https://unpkg.com/vue2/dist…

nginx https 如何将部分路径转移到 http

nginx https 如何将部分路径转移到 http 我有一个自己的网站&#xff0c;默认是走的 https&#xff0c;其中有一个路径需要走 http。 实现 在 nginx 的配置文件 https 中添加这个路径&#xff0c;并添加一个 rewrite 的指令。 比如我需要将 tools/iphone 的路径转成 http&am…

Python使用腾讯云SDK实现对象存储(上传文件、创建桶)

文章目录 1. 开通服务2. 创建存储桶3. 手动上传文件并查看4. python上传文件4.1 找到sdk文档4.2 初始化代码4.3 region获取4.4 secret_id和secret_key获取4.5 上传对象代码4.6 python实现上传文件 5 python创建桶 首先来到腾讯云官网 https://cloud.tencent.com/1. 开通服务 来…

Java枚举类的使用

说明: 根据设计图抽象的枚举类,一张模板背景图(会改变),二维码(传入参数生成),一个关闭的icon(固定不变) 设计图如下 枚举类 去除重复模板后共五个,根据需求编写枚举类如下,url则对应不同的模板,编写成后台人员的可配置项, public enum ImageTemplateEnum {PURCHASE("p…

Python 实践

文章目录 一、HttpRequests 一、Http Requests python——Request模块

Ionic组件 ion-list ion-list-header

1 ion-list 列表由多行项目组成&#xff0c;这些项目可以包含 text, buttons, toggles, icons, thumbnails等。列表通常包含具有类似数据内容的项目&#xff0c;如 images and text。 列表支持多种交互&#xff0c;包括滑动项目以显示选项、拖动以重新排列列表中的项目以及删除…