tree ui组件添加多条数据,调接口, style Component样式布局

columns.js 文件是表格的标题

import moment from ‘moment’;
const columns = [
{
title: ‘Category’,
dataIndex: ‘onlineTaxonomyName’,
key: ‘Category’,
sorter: true
},
{
title: ‘Offline Category’,
dataIndex: ‘offlineTaxonomyName’,
key: ‘Offline Category’
},
{
title: ‘Hierarchy’,
dataIndex: ‘hierarchy’,
key: ‘Hierarchy’
},
{
title: ‘Date Added’,
dataIndex: ‘createdTime’,
key: ‘Date Added’,
sorter: true,
render: createdTime => {
return createdTime
? moment(parseInt(createdTime)).format(‘MMM D,YYYY HH:mm:ss’)
: ‘-’;
}
},
{
title: ‘Added By’,
dataIndex: ‘email’,
key: ‘Added By’
},
{
title: ‘’,
key: ‘action’,
width: ‘1px’
}
];
export default columns;

dropList.js 文件select的option的内容
const dropList = [
  {
    // label: 'Hierarchy',
    name: 'Hierarchy',
    placeholder: 'Hierarchy',
    options: [
      {
        option: 'Division',
        value: 'Division'
      },
      {
        option: 'Group',
        value: 'Group'
      },
      {
        option: 'Dept',
        value: 'Dept'
      },
      {
        option: 'Class',
        value: 'Class'
      },
      {
        option: 'Subclass',
        value: 'Subclass'
      }
    ]
  }
];
export default dropList;

表格的数据

import React, { useState, useEffect, useRef } from 'react';
import { Modal, message } from 'antd';
import axios from '@/api';
import SearchInput from '@/components/SearchInput/SearchInput';
import TableFilterBar from '@/components/BasicTable/TableFilterBar/TableFilterBar';
import BasicTable from '@/components/BasicTable/BasicTable';
import BasePagination from '../../../mpe/components/BasePagination/BasePagination';
import {
  Section,
  Header,
  TableStyle,
  ButtonAdd,
  DivFlex,
  DeleteImg
} from './MerchandiseAndHierarchy.style.js';
import columns from './columns.js';
import dropList from './dropList.js';
import AddModals from './AddModal.jsx';
import IconTrash from './assets/trash.svg';

function MerchandiseAndHierarchy() {
  const [pagination, setPagination] = useState({
    pageNum: 1,
    pageSize: 10,
    total: 0,
    sort: '',
    field: ''
  });
  const [totalItem, setTotalItem] = useState('');
  const [tableList, setTableList] = useState([]);
  const [loading, setLoading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [deleteModal, setDeleteModal] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const [hierarchy, setHierarchy] = useState('');
  const [currentModalRecordId, setCurrentModalRecordId] = useState(0);
  const addModalsRef = useRef(null);
  const [deleteRecord, setDeleteRecord] = useState('');
  const [distance, setDistance] = useState(0);
  const [movingDistance, setmovingDistance] = useState(-72);

// 添加数据成功的弹框
  function success() {
    message.success({
      content: `Successfully added, You can view the relevant list.`,
      className: 'custom-class',
      style: {
        marginTop: '20vh'
      }
    });
  }

  function handleFormSubmit(value) {
    const hierarchyValue = value?.Hierarchy ?? '';
    setHierarchy(hierarchyValue);
  }

  useEffect(() => {
    const { pageSize } = pagination;
    getList(1, pageSize);
  }, [hierarchy]);

  const SearchInputEvent = e => {
    setInputValue(e);
  };

  const onPressEnter = e => {
    setInputValue(inputValue);
    const { pageNum, pageSize } = pagination;
    getList(pageNum, pageSize);
  };
 
 // 表格的排序
  function getList(pageNum, pageSize, sort, field) {
    setLoading(true);
    axios
      .get(
        `${
          window.ENV.IFR_API
        }/online-offline-mapping/list/page?pageNum=${pageNum}&pageSize=${pageSize}&category=${inputValue}&hierarchy=${hierarchy}&orderBy=${
          sort ? sort : ''
        }&field
=${field ? field : ''}`
      )
      .then(res => {
        setTableList(res.data.list);
        setTotalItem(res.data.totalItem);
        setPagination({
          ...pagination,
          pageNum: pageNum,
          pageSize: pageSize,
          total: res.data.totalItem
        });
        setLoading(false);
      });
  }

// 删除当前行的数据
  async function deleteData() {
    const res = await axios.delete(
      `${window.ENV.IFR_API}/online-offline-mapping/${currentModalRecordId}`
    );
    if (Number(res?.data?.code) === 200) {
      const { pageNum, pageSize } = pagination;
      if (pageNum > 1) {
        getList(pageNum, pageSize);
      } else {
        getList(1, pageSize);
      }
      setLoading(false);
      setDeleteModal(false);
      message.success('Delete current data successfully');
    } else {
      message.error('Failed to delete current data');
    }
  }

  async function postData() {
    const postDataTree = addModalsRef?.current?.beatFlatTreeData;
    const res = await axios.post(
      `${window.ENV.IFR_API}/online-offline-mapping/add`,
      postDataTree
    );
    const postDat = res || [];
    if (postDat?.data.code == 200) {
      setModalVisible(false);
      const { pageSize } = pagination;
      getList(1, pageSize);
      setLoading(false);
      success();
    } else {
      message.error('Failed add, Please try again.');
    }
  }

  useEffect(() => {
    const { pageNum, pageSize } = pagination;
    getList(pageNum, pageSize);
  }, []);

  function changePageNum(pageNum) {
    const { pageSize } = pagination;
    getList(pageNum, pageSize);
  }

  function changePageSize(pageSize) {
    getList(1, pageSize);
  }

  const onclickDelete = deleteRecord => {
    setLoading(false);
    setDeleteModal(true);
    setCurrentModalRecordId(deleteRecord);
  };

  const onOkPost = () => {
    postData();
  };

  const onChangeTableSort = (pagination, filters, sorter) => {
    const { pageNum, pageSize } = pagination;
    if (sorter.field) {
      pagination.field = sorter.field;
      pagination.sort = sorter.order === 'ascend' ? 'asc' : 'desc';
      setPagination({
        sort: pagination.sort,
        field: pagination.field
      });
    } else {
      pagination.field = sorter.field;
      pagination.sort = 'asc';
      setPagination({
        sort: pagination.sort,
        field: pagination.field
      });
    }
    if (pageNum > 1) {
      getList(pageNum, pageSize, pagination.sort, pagination.field);
    } else {
      getList(1, pageSize, pagination.sort, pagination.field);
    }
  };
  const onClickRow = record => {
    return {
      onMouseEnter: () => {
        let currentClassName = 'uuid-' + record.id;
        let slider = document.getElementsByClassName(currentClassName)[0];
        let perIndexChild = slider.offsetTop;
        setDistance(perIndexChild);
        setmovingDistance(0);
        setDeleteRecord(record.id);
      },
      onMouseLeave: () => {
        setmovingDistance(-75);
      }
    };
  };

  return (
    <Section>
      <Header>Merchandise and Hierarchy</Header>
      <DivFlex>
        <SearchInput
          change={SearchInputEvent}
          onPressEnter={onPressEnter}
          placeholder={'Search'}
        />
        <>
          <ButtonAdd onClick={() => setModalVisible(true)}>Add Mapping</ButtonAdd>
          <Modal
            title=" Add Category Mapping "
            centered
            style={{ top: 20 }}
            getContainer={false}
            visible={modalVisible}
            onOk={onOkPost}
            okText={'Confirm'}
            keyboard={false}
            maskClosable={false}
            onCancel={() => setModalVisible(false)}
          >
            <AddModals ref={addModalsRef} />
          </Modal>
        </>
      </DivFlex>
      <TableFilterBar
        hideDate
        recordType="item"
        dropDowns={dropList}
        recordsCount={totalItem}
        handleFormSubmit={value => handleFormSubmit(value)}
        style={{
          marginTop: '20px'
        }}
      />
      <div style={{ position: 'relative', overflow: 'hidden' }} id="divTop">
        <TableStyle>
          <BasicTable
            id="approval-table"
            columns={columns}
            dataSource={tableList}
            bordered={false}
            rowKeyName="id"
            loading={loading}
            pagination={{
              pageNum: pagination.pageNum,
              pageSize: pagination.pageSize
            }}
            onChange={onChangeTableSort}
            onRow={onClickRow}
            rowClassName={(record, index) => {
              let className = 'light-row' + ' uuid-' + record.id;
              if (index % 2 === 1) className = 'dark-row' + ' uuid-' + record.id;
              return className;
            }}
          ></BasicTable>
          <DeleteImg
            style={{
              position: 'absolute',
              top: `${distance}px`,
              display: 'block',
              right: `${movingDistance}px`,
              transition: 'right 0.5s'
            }}
            onMouseEnter={() => {
              setmovingDistance(0);
            }}
            onMouseLeave={() => {
              setmovingDistance(-75);
            }}
          >
            <img
              src={IconTrash}
              onClick={() => onclickDelete(deleteRecord)}
              className="deleteImg"
            />
          </DeleteImg>
        </TableStyle>
      </div>
      <BasePagination
        pageNum={pagination.pageNum}
        pageSize={pagination.pageSize}
        total={pagination.total}
        showSizeChanger={true}
        defaultCurrent={1}
        changePageSize={value => changePageSize(value)}
        changePageNum={value => changePageNum(value)}
        showSizeChange={true}
      ></BasePagination>
      <Modal
        title="Tip"
        visible={deleteModal}
        onOk={deleteData}
        okText={'Delete'}
        onCancel={() => setDeleteModal(false)}
        style={{ borderTop: 'unset' }}
        className={'ModalDelete'}
      >
        Please confirm to delete the mapping?
      </Modal>
    </Section>
  );
}
export default MerchandiseAndHierarchy;

styled component写样式

import styled from '@emotion/styled/macro';
export const Section = styled.div`
  font-family: Nunito Sans;
  font-style: normal;
  padding: 33px 40px 151px 40px;
  background-color: white;
  position: relative;
  min-height: 100%;

  .ant-modal-title {
    color: 1b1b1b;
  }
  .ModalDelete {
    .ant-modal-content {
      .ant-modal-footer {
        border-top: unset !important;
      }
    }
  }

  .ant-modal-content {
    width: 672px;
    height: 612px;
  }
  .ant-spin-nested-loading > div > .ant-spin {
    top: 230px;
  }
`;
export const Header = styled.div`
  font-family: ibm-plex-serif;
  font-size: 32px;
  color: #000000;
  letter-spacing: 0;
  font-weight: 900;
  line-height: 40px;
  margin-bottom: 30px;
`;
export const ButtonAdd = styled.div`
  width: 136px;
  height: 48px;
  background: #e9425b;
  color: #ffffff;
  text-align: center;
  line-height: 48px;
  border-radius: 28px;
  font-size: 14px;
  cursor: pointer;
`;
export const DivFlex = styled.div`
  display: flex;
  just-content: space-between;
  .ant-modal-header {
    background: #f2f2f2;
  }
  .ant-modal-title {
    color: #1b1b1b;
    font-weight: Bold;
  }
`;
export const TableStyle = styled.div`
  position: relative;
  .ant-table-tbody {
    > tr.ant-table-row:hover {
      background: #eff7fb;
      width: 100%;
    }
  }
  .ant-table-tbody {
    > tr.ant-table-row:hover {
      > td {
        background: #eff7fb;
      }
    }
  }
  tbody > tr > td:first-of-type:hover {
    text-decoration: underline;
  }
  .css-begbtt-Section .dark-row {
    background-color: unset;
  }
`;
export const DeleteImg = styled.div`
  width: 72px;
  height: 48px;
  background: #eff7fb;
  position: absolute;
  right: -72px;
  .deleteImg {
    width: 72px;
    height: 24px;
    cursor: pointer;
    margin-top: 12px;
  }
`;

AddModal.jsx 弹框添加数据

import React, {
  useState,
  useEffect,
  Fragment,
  useImperativeHandle,
  forwardRef
} from 'react';
import axios from '@/api';
import { AddBox, BoxLeft, BoxRight, LoadingBox } from './AddModal.style.js';
import { Tree, Spin } from 'antd';

export default forwardRef((props, ref) => {
  const [onlineTaxonomyId, setOnlineTaxonomyId] = useState('');
  const [onlineTaxonomyName, setOnlineTaxonomyName] = useState('');
  const [data, setResData] = useState([]);
  const [treeDataCheckout, setTreeDataCheckout] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [checkedKeys, setCheckedKeys] = useState();
  const [beatFlatTreeData, setBeatFlatTreeData] = useState();
  useImperativeHandle(ref, () => ({
    beatFlatTreeData
  }));
  const loopTree = data =>
    data.map(item => {
      if (item.children) {
        return {
          title: item.taxonomyName,
          key: item.taxonomyId + ' ' + item.taxonomyName + ' ' + item.createdTime,
          hierarchy: item.hierarchy,
          // path: item.path,
          children: loopTree(item.children)
          // children: []
        };
      }
      return {
        title: item.taxonomyName,
        key: item.taxonomyId + ' ' + item.taxonomyName + ' ' + item.createdTime,
        hierarchy: item.hierarchy
        // path: item.path,
      };
    });

  async function getTreeData() {
    const res = await axios.get(
      `${window.ENV.IFR_API}/listing/category/tree?taxonomyId=45&depth=3&platform=Web`
    );
    const list = [res?.data?.data] ?? [];
    setResData(loopTree(list));
  }

  async function getTreeDataCheckout() {
    const res = await axios.get(
      `${window.ENV.IFR_API}/offline-taxonomy/full-tree?taxonomyId=0&depth=3&hierarchy=Root`
    );
    const resData = [res?.data.data] ?? [];
    setTreeDataCheckout(loopTree(resData));
  }

  useEffect(() => {
    getTreeData();
    getTreeDataCheckout();
  }, []);

  const onCheck = (checkedKeysValue, title) => {
    let beatFlatTreeData = [];
    const BeatFlat = (treeData, id) => {
      treeData &&
        treeData.forEach(val => {
          if (treeData.children && treeData.children.length) {
            BeatFlat(val.children, id);
          }
          beatFlatTreeData.push({
            onlineTaxonomyId: onlineTaxonomyId,
            onlineTaxonomyName: onlineTaxonomyName,
            offlineTaxonomyName: val?.title,
            offlineTaxonomyId: val?.key?.split(' ')[0],
            hierarchy: val.hierarchy
          });
        });
    };
    BeatFlat(title?.checkedNodes);
    setBeatFlatTreeData(beatFlatTreeData);
    setCheckedKeys(checkedKeysValue);
  };

  const onSelect = (selectedKeysValue, info) => {
    const onlineTaxonomyName = info?.node?.title;
    const onlineTaxonomyId = info?.node?.key && info?.node?.key.split(' ')[0];
    setOnlineTaxonomyId(onlineTaxonomyId);
    setOnlineTaxonomyName(onlineTaxonomyName);
    setSelectedKeys(selectedKeysValue);
  };

  return (
    <>
      <AddBox>
        <BoxLeft>
          {data.length > 0 ? (
            <Tree
              className="draggable-tree"
              draggable
              blockNode
              treeData={data}
              defaultExpandAll={true}
              onSelect={onSelect}
              // defaultExpandAll={true}
            />
          ) : (
            <LoadingBox>
              <Spin />
            </LoadingBox>
          )}
        </BoxLeft>
        <BoxRight>
          {/*
                    function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys})
                */}
          {treeDataCheckout.length > 0 ? (
            <Tree
              // onExpand={onExpand}
              checkable
              onCheck={onCheck}
              treeData={treeDataCheckout}
              selectedKeys={selectedKeys}
              onSelect={onSelect}
              checkedKeys={checkedKeys}
              // defaultExpandAll={true}
            />
          ) : (
            <LoadingBox>
              <Spin />
            </LoadingBox>
          )}
        </BoxRight>
      </AddBox>
    </>
  );
});

AddModal.style.js 弹框的样式

import styled from '@emotion/styled/macro';
export const AddBox = styled.div`
  width: 624px;
  height: 422px;
  display: flex;
  > div {
    width: 300px;
    height: 422px;
    border: 1px solid #f2f2f2;
    border-radius: 8px;
    overflow-y: auto;
    overflow-x: hidden;
  }
`;

export const BoxLeft = styled.div`
  margin-right: 24px;
`;
export const BoxRight = styled.div``;
export const LoadingBox = styled.div`
  margin: 164px 0;
  margin-bottom: 20px;
  padding: 30px 50px;
  text-align: center;
  border-radius: 4px;
`;

是把数据牌平,

 const loopTree = data =>
    data.map(item => {
      if (item.children) {
        return {
          title: item.taxonomyName,
          key: item.taxonomyId + ' ' + item.taxonomyName + ' ' + item.createdTime,
          hierarchy: item.hierarchy,
          // path: item.path,
          children: loopTree(item.children)
          // children: []
        };
      }
      return {
        title: item.taxonomyName,
        key: item.taxonomyId + ' ' + item.taxonomyName + ' ' + item.createdTime,
        hierarchy: item.hierarchy
        // path: item.path,
      };
    });

后端的数据格式

[
    {
        "taxonomyId": "4724531",
        "code": "20000055",
        "taxonomyName": "New Arrivals",
        "parentTaxonomyId": "45",
        "parentTaxonomyCode": "Categories",
        "icon": "",
        "image": "https://imgproxy.dev.platform.michaels.com/XXTpt9MjeIKtJwhEo-W6WCFk1c9-K_Ll4qb5g7o5vco/aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL2Ntcy1mZ20tZGV2MDAvNTYzMzYxNDM4Nzc2NDY0MTc5Mg.jpg",
        "channel": 1,
        "isActive": true,
        "isLeaf": true,
        "isTranslateComplete": true,
        "isChain": true,
        "isLanding": true,
        "type": 3,
        "onlineBegin": null,
        "onlineEnd": null,
        "keywords": "",
        "metaDescription": "Browse all of our new arrivals across all categories, including new craft supplies, frames, kids’ activities, and party supplies. Shop online for same-day delivery, curbside pickup, or at a Michaels near you.",
        "seoHeadline": "New Arrivals | Michaels",
        "seoUrl": "",
        "path": "root//Shop Categories//New Arrivals",
        "parentTaxonomyPath": "root//Shop Categories",
        "urlPath": "root//shop-categories//new-arrivals",
        "urlCode": "new-arrivals",
        "sort": 0,
        "filters": "",
        "description": "",
        "siteMerchantDescription": "New Arrivals",
        "siteMerchantOnline": true,
        "isShowWeb": true,
        "isShowMobile": false,
        "siteMerchantShowSubCategoriesInMenu": true,
        "mkrPlanCommissionRate": null,
        "mkrPlusPlanCommissionRate": null,
        "createdBy": "0",
        "createdTime": "1619392287000",
        "updatedBy": "5185569240601894912",
        "updatedTime": "1630401236199",
        "version": null,
        "platform": "Web",
        "isDeleted": false,
        "isBottom": false,
        "sortBy": 4,
        "children": []
    },
    {
        "taxonomyId": "5145631",
        "code": "20000591",
        "taxonomyName": "Cricut",
        "parentTaxonomyId": "45",
        "parentTaxonomyCode": "Categories",
        "icon": "",
        "image": "https://imgproxy.dev.platform.michaels.com/XXTpt9MjeIKtJwhEo-W6WCFk1c9-K_Ll4qb5g7o5vco/aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL2Ntcy1mZ20tZGV2MDAvNTM2Mjg3NTc5ODUwMjY0NTc2MA.jpg",
        "channel": 1,
        "isActive": true,
        "isLeaf": false,
        "isTranslateComplete": false,
        "isChain": false,
        "isLanding": true,
        "type": 1,
        "onlineBegin": null,
        "onlineEnd": null,
        "keywords": "wre",
        "metaDescription": "Create personalized crafts with Cricut die-cutting machines, tools, and accessories. Shop online for same-day delivery, curbside pickup, or at a Michaels near you for the biggest Cricut destination in the world.",
        "seoHeadline": "Cricut Machine, Tools & Accessories | Michaels",
        "seoUrl": "",
        "path": "root//Shop Categories//Cricut",
        "parentTaxonomyPath": "root//Shop Categories",
        "urlPath": "root//shop-categories//cricut",
        "urlCode": "cricut",
        "sort": 1,
        "filters": "",
        "description": "rewre",
        "siteMerchantDescription": "Cricut",
        "siteMerchantOnline": true,
        "isShowWeb": true,
        "isShowMobile": true,
        "siteMerchantShowSubCategoriesInMenu": true,
        "mkrPlanCommissionRate": null,
        "mkrPlusPlanCommissionRate": null,
        "createdBy": "0",
        "createdTime": "1619312900000",
        "updatedBy": "5185569240601894912",
        "updatedTime": "1630311120302",
        "version": null,
        "platform": "All",
        "isDeleted": false,
        "isBottom": true,
        "sortBy": 6,
        "children": [
            {
                "taxonomyId": "5183518",
                "code": "20000660",
                "taxonomyName": "Cricut Joy",
                "parentTaxonomyId": "5145631",
                "parentTaxonomyCode": "20000591",
                "icon": "",
                "image": "",
                "channel": 1,
                "isActive": false,
                "isLeaf": false,
                "isTranslateComplete": false,
                "isChain": false,
                "isLanding": false,
                "type": 2,
                "onlineBegin": null,
                "onlineEnd": null,
                "keywords": "",
                "metaDescription": "",
                "seoHeadline": "",
                "seoUrl": "",
                "path": "root//Shop Categories//Cricut//Cricut Joy",
                "parentTaxonomyPath": "root//Shop Categories//Cricut",
                "urlPath": "root//shop-categories//cricut//cricut-joy",
                "urlCode": "cricut-joy",
                "sort": 0,
                "filters": "",
                "description": "",
                "siteMerchantDescription": "Cricut",
                "siteMerchantOnline": true,
                "isShowWeb": true,
                "isShowMobile": true,
                "siteMerchantShowSubCategoriesInMenu": true,
                "mkrPlanCommissionRate": null,
                "mkrPlusPlanCommissionRate": null,
                "createdBy": "0",
                "createdTime": "1619312900000",
                "updatedBy": "0",
                "updatedTime": "1628837533619",
                "version": null,
                "platform": "All",
                "isDeleted": false,
                "isBottom": false,
                "sortBy": null,
                "children": [
                    {
                        "taxonomyId": "5183527",
                        "code": "20000667",
                        "taxonomyName": "Cricut Joy Insert Cards",
                        "parentTaxonomyId": "5183518",
                        "parentTaxonomyCode": "20000660",
                        "icon": "",
                        "image": "",
                        "channel": 1,
                        "isActive": false,
                        "isLeaf": true,
                        "isTranslateComplete": false,
                        "isChain": false,
                        "isLanding": false,
                        "type": 2,
                        "onlineBegin": null,
                        "onlineEnd": null,
                        "keywords": "",
                        "metaDescription": "",
                        "seoHeadline": "",
                        "seoUrl": "",
                        "path": "root//Shop Categories//Cricut//Cricut Joy//Cricut Joy Insert Cards",
                        "parentTaxonomyPath": "root//Shop Categories//Cricut//Cricut Joy",
                        "urlPath": "root//shop-categories//cricut//cricut-joy//cricut-joy-insert-cards",
                        "urlCode": "cricut-joy-insert-cards",
                        "sort": 0,
                        "filters": "",
                        "description": "",
                        "siteMerchantDescription": "Cricut",
                        "siteMerchantOnline": true,
                        "isShowWeb": true,
                        "isShowMobile": true,
                        "siteMerchantShowSubCategoriesInMenu": true,
                        "mkrPlanCommissionRate": null,
                        "mkrPlusPlanCommissionRate": null,
                        "createdBy": "0",
                        "createdTime": "1619392287000",
                        "updatedBy": "0",
                        "updatedTime": "1628837534967",
                        "version": null,
                        "platform": "All",
                        "isDeleted": false,
                        "isBottom": false,
                        "sortBy": null,
                        "children": []
                    },
                    {
                        "taxonomyId": "5183525",
                        "code": "20000665",
                        "taxonomyName": "Cricut Joy Cutting Machine",
                        "parentTaxonomyId": "5183518",
                        "parentTaxonomyCode": "20000660",
                        "icon": "",
                        "image": "",
                        "channel": 1,
                        "isActive": false,
                        "isLeaf": true,
                        "isTranslateComplete": false,
                        "isChain": false,
                        "isLanding": false,
                        "type": 2,
                        "onlineBegin": null,
                        "onlineEnd": null,
                        "keywords": "",
                        "metaDescription": "",
                        "seoHeadline": "",
                        "seoUrl": "",
                        "path": "root//Shop Categories//Cricut//Cricut Joy//Cricut Joy Cutting Machine",
                        "parentTaxonomyPath": "root//Shop Categories//Cricut//Cricut Joy",
                        "urlPath": "root//shop-categories//cricut//cricut-joy//cricut-joy-cutting-machine",
                        "urlCode": "cricut-joy-cutting-machine",
                        "sort": 1,
                        "filters": "",
                        "description": "",
                        "siteMerchantDescription": "Cricut",
                        "siteMerchantOnline": true,
                        "isShowWeb": true,
                        "isShowMobile": true,
                        "siteMerchantShowSubCategoriesInMenu": true,
                        "mkrPlanCommissionRate": null,
                        "mkrPlusPlanCommissionRate": null,
                        "createdBy": "0",
                        "createdTime": "1619392287000",
                        "updatedBy": "0",
                        "updatedTime": "1623998092000",
                        "version": null,
                        "platform": "All",
                        "isDeleted": false,
                        "isBottom": false,
                        "sortBy": null,
                        "children": []
                    },
                    {
                        "taxonomyId": "5183526",
                        "code": "20000666",
                        "taxonomyName": "Cricut Joy Materials, Mats & Tools",
                        "parentTaxonomyId": "5183518",
                        "parentTaxonomyCode": "20000660",
                        "icon": "",
                        "image": "",
                        "channel": 1,
                        "isActive": false,
                        "isLeaf": false,
                        "isTranslateComplete": false,
                        "isChain": false,
                        "isLanding": false,
                        "type": 2,
                        "onlineBegin": null,
                        "onlineEnd": null,
                        "keywords": "",
                        "metaDescription": "",
                        "seoHeadline": "",
                        "seoUrl": "",
                        "path": "root//Shop Categories//Cricut//Cricut Joy//Cricut Joy Materials, Mats & Tools",
                        "parentTaxonomyPath": "root//Shop Categories//Cricut//Cricut Joy",
                        "urlPath": "root//shop-categories//cricut//cricut-joy//cricut-joy-materials-mats-tools",
                        "urlCode": "cricut-joy-materials-mats-tools",
                        "sort": 2,
                        "filters": "",
                        "description": "",
                        "siteMerchantDescription": "Cricut",
                        "siteMerchantOnline": true,
                        "isShowWeb": true,
                        "isShowMobile": true,
                        "siteMerchantShowSubCategoriesInMenu": true,
                        "mkrPlanCommissionRate": null,
                        "mkrPlusPlanCommissionRate": null,
                        "createdBy": "0",
                        "createdTime": "1619312900000",
                        "updatedBy": "0",
                        "updatedTime": "1628837537430",
                        "version": null,
                        "platform": "All",
                        "isDeleted": false,
                        "isBottom": false,
                        "sortBy": null,
                        "children": []
                    },
                ]