一些联动树形数据组装

news2024/12/23 17:38:20
export const pieselectdata = [
  {
    entrustOrganization: '智慧法院电子诉讼平台',
    entrustOrganizationId: 161,
    productNames: [
      {
        batchCodes: [],
        productName: 'CL测试调解产品',
      },
      {
        batchCodes: [
          '2022927_001',
          '2022927_003',
          '2022927_004',
          '2022927_005',
          '2022927_006',
          '2022927_008',
          '2022927_009',
          '2022927_011',
          '2022927_012',
          '2022927_013',
          '2022927_014',
          '2022927_015',
          '2022927_016',
          '2022927_017',
          '2022927_018',
          '2022927_019',
          '2022927_020',
          '33',
          '999',
        ],
        productName: 'oneProductName',
      },
      {
        batchCodes: ['多'],
        productName: 'twoProductName',
      },
      {
        batchCodes: ['测试第一批', '第一批'],
        productName: '宁波测试',
      },
      {
        batchCodes: [],
        productName: '测试产品',
      },
      {
        batchCodes: ['测试批次号123456'],
        productName: '测试产品名称123456',
      },
      {
        batchCodes: ['测试批次号12345678'],
        productName: '测试产品名称12345678',
      },
      {
        batchCodes: [],
        productName: '默认产品',
      },
    ],
  },
  {
    entrustOrganization: '共道测试调解中心调解平台',
    entrustOrganizationId: 11009,
    productNames: [
      {
        batchCodes: ['1212'],
        productName: '我的测试调解产品',
      },
    ],
  },
];

 

  const [selectOne, setSelectOne] = useState([]);
  const [selectTwo, setSelectTwo] = useState([]);
  const [selectTwoData, setSelectTwoData] = useState([]); //下拉框数据
  const [selectThree, setSelectThree] = useState([]);
  const [selectThreeData, setSelectThreeData] = useState([]); //下拉框数据
  const [batchCode, setBatchCode] = useState(null);
  const [entrustOrganizationId, setEntrustOrganizationId] = useState(null);
  const [productName, setProductName] = useState(null);

 

  useEffect(() => {
    getselect(pieselectdata);
  }, []);
  const getselect = (v) => {
    const selectO = [];
    const selectT = [];
    const selectTh = [];
    v.map((item, i) => {
      console.log(item);
      if (item.productNames?.length > 0) {
        item.productNames?.map((a, b) => {
          selectT.push({
            label: a.productName,
            value: a.productName,
            father: item.entrustOrganizationId,
          });
          selectTh.push({
            data: a.batchCodes,
            father: a.productName,
            Organ: item.entrustOrganizationId,
          });
        });
      }
      selectO.push({ label: item.entrustOrganization, value: item.entrustOrganizationId });
    });
    setSelectOne([...selectO]);
    setSelectTwo([...selectT]);
    setSelectThree([...selectTh]);
    console.log(selectO, selectT, selectTh);
  };
  useEffect(() => {
    if (selectOne && selectOne.length > 0) {
      if (entrustOrganizationId) {
        //选委派法院,产品、批次显示该法院下的数据
        const two = selectTwo.filter((item) => item.father === entrustOrganizationId);
        const three = selectTwo.filter((item) => item.Organ === entrustOrganizationId);
        setSelectTwoData([...two]);
        setSelectThreeData([...three]);
      } else {
        //没选委派法院,产品、批次显示全部数据
        const three = [];
        selectThree.map((item) => {
          three.push(...item.data);
        });
        setSelectTwoData([...selectTwo]);
        setSelectThreeData([...three]);
      }
      if (productName) {
        //选产品,批次显示产品下的数据
        const three = selectThree.filter((item) => item.father === productName);
        setSelectThreeData(three[0]?.data);
      }
    }
    //请求饼图数据
    const params = { entrustOrganizationId, productName, batchCode };
    setSelectData(params);
    console.log(entrustOrganizationId, productName, batchCode, '饼图下拉框');
  }, [selectOne, entrustOrganizationId, productName, batchCode]);
 const options = [
    {
      label: '近30天',
      value: '30',
    },
    {
      label: '近3个月',
      value: '90',
    },
    {
      label: '近6个月',
      value: '180',
    },
  ];
  const [dateValue, setDateValue] = useState('30');
  const onChangeDate = ({ target: { value } }) => {
    setDateValue(value);
  };
  useEffect(() => {
    console.log(dateValue, '888');
  }, [dateValue]);

 

 <div className={style.filter_content}>
              <div className={style.search}>
                <div style={{ width: '33%' }}>
                  <Select
                    allowClear
                    style={{ width: '95%' }}
                    placeholder="委派法院"
                    onChange={(v) => {
                      setProductName(null);
                      setBatchCode(null);
                      setEntrustOrganizationId(v);
                    }}
                  >
                    {selectOne?.map((item, i) => {
                      return (
                        <Option key={i} value={item.value}>
                          {item.label}
                        </Option>
                      );
                    })}
                  </Select>
                </div>
                <div style={{ width: '33%' }}>
                  <Select
                    allowClear
                    style={{ width: '95%' }}
                    placeholder="产品名称"
                    value={productName}
                    onChange={(v) => {
                      setBatchCode(null);
                      setProductName(v);
                    }}
                  >
                    {selectTwoData?.map((item, i) => {
                      return (
                        <Option key={i} value={item.value}>
                          {item.label}
                        </Option>
                      );
                    })}
                  </Select>
                </div>
                <div style={{ width: '33%' }}>
                  <Select
                    allowClear
                    style={{ width: '95%' }}
                    placeholder="批次号"
                    value={batchCode}
                    onChange={(v) => {
                      setBatchCode(v);
                    }}
                  >
                    {selectThreeData?.map((item, i) => {
                      return (
                        <Option key={i} value={item}>
                          {item}
                        </Option>
                      );
                    })}
                  </Select>
                </div>
              </div>
              <div>
                <Radio.Group
                  optionType="button"
                  buttonStyle="solid"
                  options={options}
                  onChange={onChangeDate}
                  value={dateValue}
                />
              </div>
            </div>

 

 console.log(selectO, selectT, selectTh);

 console.log(entrustOrganizationId, productName, batchCode, '饼图下拉框'); 

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

文本预处理——文本数据增强

目录 文本数据增强回译数据增强法 文本数据增强 回译数据增强法

windows 系统安装sonarqube

SonarQube是一种自动代码审查工具&#xff0c;用于检测代码中的错误&#xff0c;漏洞和代码异味。它可以与您现有的工作流程集成&#xff0c;以便在项目分支和拉取请求之间进行连续的代码检查。 官方网站&#xff1a; https://www.sonarqube.org/ 1. 使用前提条件 运行SonarQ…

Excel双向柱状图的绘制

Excel双向柱状图在绘制增减比较的时候经常用到&#xff0c;叫法繁多&#xff0c;双向柱状图、上下柱状图、增减柱状图都有。 这里主要介绍一下Excel的基础绘制方法和复杂一点的双向柱状图的绘制 基础双向柱状图的绘制 首先升降的数据如下&#xff1a; 月份上升下降20220359-…

【二叉树】刷题(以递归写法为主)

226.翻转二叉树 101. 对称二叉树 104.二叉树的最大深度 111.二叉树的最小深度 222.完全二叉树的节点个数 110.平衡二叉树 102. 二叉树的所有路径 226.翻转二叉树 class Solution:def invertTree(self, root: Optional[TreeNode]) -> Optional[TreeNode]:if not root:return…

13、PHP面向对象2(方法的访问控制、子类继承、常量)

1、类中的方法可以被定义为公有&#xff0c;私有或受保护。如果没有设置这些关键字&#xff0c;则该方法默认为公有。 public定义的方法&#xff0c;可以在类外使用。 protected定义的方法&#xff0c;只能在本类或子类的定义内使用。 private定义的方法&#xff0c;只能在本…

第八章 非编码RNA简介

第八章 非编码RNA简介 第一节 引言 第二节 长链非编码RNA简介 第三节 环形RNA简介 第四节 小RNA简介 4.1 miRNA 4.2 piRNA 4.3 小RNA数据分析

图像篡改及防篡改

有时候我们是攻击方&#xff0c;发送被网站或微信屏蔽的敏感图像&#xff0c;分享瓜时剔除可能暴露的个人信息&#xff0c;在平台分享其他平台的购物记录 有时候我们是防守方&#xff0c;判断他人给的图有没有造假嫌疑&#xff0c;判断是不是网图盗图 调研了图像造假的判别方案…

soft ip与hard ip

ip分soft和hard两种&#xff0c;soft就是纯代码&#xff0c;买过来要自己综合自己pr。hard ip如mem和analog与工艺有关。 mem的lib和lef是memory compiler产生的&#xff0c;基于bitcell&#xff0c;是foundry给的。 我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起…

C语言假期作业 DAY 03

目录 题目 一、选择题 1、已知函数的原型是&#xff1a; int fun(char b[10], int *a); &#xff0c;设定义&#xff1a; char c[10];int d; &#xff0c;正确的调用语句是&#xff08; &#xff09; 2、请问下列表达式哪些会被编译器禁止【多选】&#xff08; &#xff09; 3、…

Upload文件导入多条数据到输入框

需求场景&#xff1a;文本框内容支持批量导入(文件类型包括’.txt, .xls, .xlsx’)。使用AntD的Upload组件处理。 下面是Upload的配置&#xff08;伪代码&#xff09;&#xff0c;重点为beforeUpload中的逻辑 // Antd 中用到的Upload组件 import { UploadOutlined } from ant…

ADSCOPE加入中国互联网协会!

近日&#xff0c;经协会批准&#xff0c;ADSCOPE&#xff08;上海倍孜网络技术有限公司&#xff09;正式加入中国互联网协会&#xff0c;成为会员单位。 中国互联网协会隶属于中华人民共和国工业和信息化部&#xff0c;是由中国互联网行业及与互联网相关的企事业单位、社会组织…

网络编程--模拟HTTP服务器

下面是一个简单的例子&#xff0c;来模拟HTTP服务器 这里只是简单的按照 HTTP 协议来构造数据 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <sys/wait.h> #include <string.h> #include <arpa/inet.h>//处理连…

牛客30道Java专项练习-错题-01

一、Java初始化过程&#xff1a; 初始化父类种的静态成员变量和静态代码块&#xff0c;顺序执行初始化子类种的静态成员变量和静态代码块&#xff0c;顺序执行初始化父类的普通成员变量和代码块&#xff0c;再执行父类的构造函数初始化子类的成员变量和代码块&#xff0c;在执…

2024考研408-计算机网络 第一章-计算机网络体系结构学习笔记.md

文章目录 前言一、计算机网络概述1.1、概念及功能1.1.1、计算机网络的概念1.1.2、计算机网络的功能功能1、数据通信功能2、资源共享功能3、分布式处理功能4、提高可靠性&#xff08;分布式处理引申功能&#xff09;功能5、负载均衡&#xff08;也是分布式处理引申功能&#xff…

Javascript Object学习1

JavaScript原生提供一个Object对象&#xff0c;O大写&#xff0c;所有其他对象都继承自这个对象&#xff1b; Object本身也是一个构造函数&#xff0c;可以直接通过它来生成新对象&#xff1b; 对象的初始化有两种方式&#xff0c;构造函数模式和字面量模式&#xff1b; 下面对…

Meta分析的选题与文献计量分析CiteSpace应用丨R语言Meta分析【数据清洗、精美作图、回归分析、诊断分析、不确定性及贝叶斯应用】

目录 ​专题一、Meta分析的选题与文献计量分析CiteSpace应用 专题二、Meta分析与R语言数据清洗及相关应用 专题三、R语言Meta分析与精美作图 专题四、R语言Meta回归分析 专题五、R语言Meta诊断分析与进阶 专题六、R语言Meta分析的不确定性及贝叶斯应用 专题七、深度拓展…

innovus修short脚本

innovus版脚本分享&#xff1a; deselectAll foreach short [dbGet [dbGet top.markers.subType Short] -p] { set box [dbGet $short.box] set layer [dbGet $short.layer.name] select_obj [dbGet [dbQuery -area $box -layer $layer -objectType wire].net.is CTS clock 0…

SpringBoot 集成 EasyExcel 3.x 优雅实现 Excel 导入导出

介绍 EasyExcel 是一个基于 Java 的、快速、简洁、解决大文件内存溢出的 Excel 处理工具。它能让你在不用考虑性能、内存的等因素的情况下&#xff0c;快速完成 Excel 的读、写等功能。 EasyExcel文档地址&#xff1a; https://easyexcel.opensource.alibaba.com/ 快速开始 …

Generative Diffusion Prior for Unified Image Restoration and Enhancement 论文阅读笔记

这是CVPR2023的一篇用diffusion先验做图像修复和图像增强的论文 之前有一篇工作做了diffusion先验&#xff08;Bahjat Kawar, Michael Elad, Stefano Ermon, and Jiaming Song, “Denoising diffusion restoration models,” arXiv preprint arXiv:2201.11793, 2022. 2, 4, 6,…

6. Spring Boot 的创建和使用

目录 1. 什么是 Spring Boot 2. Spring Boot 的优点 3. Spring Boot 项目的创建 3.1 使用 Idea 创建 3.2 网页版创建 4. 项目介绍和运行 4.1 运行项目 4.2 通过浏览器输出 5. 注意事项 1. 什么是 Spring Boot Spring 的诞生是为了简化 Java 程序的开发的&#xff0c…