ci4sManagement-cloud/react-ui/src/pages/Pipeline/editPipeline/modelMenus.jsx

import { getComponentAll } from '@/services/pipeline/index.js';
import { Collapse } from 'antd';
import { useEffect, useState } from 'react';
import Styles from './modelMenus.less';
const ModelMenus = ({ onParDragEnd }) => {
  const [modelMenusList, setModelMenusList] = useState([]);
  useEffect(() => {
    getComponentAll().then((ret) => {
      console.log(ret);
      if (ret.code === 200) {
        setModelMenusList(ret.data);
      }
    });
  }, []);
  const dragEnd = (e, data) => {
    console.log(e, data);
    onParDragEnd({
      ...data,
      x: e.clientX,
      y: e.clientY,
      label: data.component_label,
      img: `/assets/images/${data.icon_path}.png`,
    });
  };
  const { Panel } = Collapse;
  return (
    <div className={Styles.collapse}>
      <div className={Styles.modelMenusTitle}>组件库</div>
      {modelMenusList && modelMenusList.length > 0 ? (
        <Collapse
          collapsible="header"
          defaultActiveKey={modelMenusList.map((item) => item.key + '')}
          expandIconPosition="end"
        >
          {modelMenusList && modelMenusList.length > 0
            ? modelMenusList.map((item) => (
                <Panel header={<div>{item.name}</div>} key={item.key}>
                  {item.value && item.value.length > 0
                    ? item.value.map((ele) => (
                        <div
                          key={ele.id}
                          draggable="true"
                          onDragEnd={(e) => {
                            dragEnd(e, ele);
                          }}
                          className={Styles.collapseItem}
                        >
                          {ele.icon_path && (
                            <img
                              style={{ height: '16px', marginRight: '15px' }}
                              src={`/assets/images/${ele.icon_path}.png`}
                              alt=""
                            />
                          )}
                          {ele.component_label}
                        </div>
                      ))
                    : ''}
                </Panel>
              ))
            : ''}
        </Collapse>
      ) : null}
    </div>
  );
};
export default ModelMenus;