MedicalWisdomCheckSys/src/components/MccsFileTree/index.tsx

/*
 * @Author: your name
 * @Date: 2021-09-06 10:28:12
 * @LastEditTime: 2021-10-18 10:41:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /MedicalWisdomCheckSys/src/components/MccsFileTree/index.tsx
 */


import React, { ReactNode, useEffect, useState, MouseEvent } from 'react'
import { Input, Spin, Image, Popconfirm } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import DirectoryTree from './components/DirectoryTree';
import './index.less'
import DelActionIcon from './images/del14px.png';
import EditActionIcon from './images/edit14px.png';
import AddActionIcon from './images/add.png';
import FileIcon from './images/file.png';

// const { DirectoryTree } = Tree;
const { Search } = Input;

//树形文件组件

enum Types { 'add', 'del', 'edit', 'search' };

type TypeVals = keyof typeof Types;

type MccsFileTreeProps = {
  onSelectHandle?: (data: MccsFileTree.childTree) => void, //选中回调
  actionHandle?: ({ type, data }: { type: string, data: MccsFileTree.childTree }) => void, //操作回调，包括编辑/删除/新增/搜索
  searchHandle?: (val: any) => void,
  switcherIcon?: ReactNode,
  treeData: MccsFileTree.childTree[] | [],
  defaultSelected?: string,  //传id
  formContent?: ReactNode,
  editable?: boolean
}

const MccsFileTree: React.FC<MccsFileTreeProps> = (props) => {
  const { treeData, onSelectHandle, actionHandle, defaultSelected, searchHandle, editable } = props;
  const [isLoading, setIsLoading] = useState(true);
  //当前选中的
  const [currentActivedIndex, setcurrentActivedIndex] = useState(defaultSelected ? defaultSelected : '');

  const actionFunc = (event:MouseEvent|undefined, type: TypeVals, data: MccsFileTree.childTree) => {
    event?.stopPropagation();
    actionHandle && actionHandle({ type, data: data });
  }

  //操作
  const Action = (props: MccsFileTree.childTree) => {
    const { isLeaf } = props;
    return (
      <div className='action'>
        {
          !isLeaf && (  //非叶子结点才可以新增
            <>
              <Image width={15} preview={false} onClick={(e) => actionFunc(e, 'add', props)} src={AddActionIcon} />
              <div style={{ width: 5 }}></div>
            </>
          )
        }
        <Image width={15} preview={false} onClick={(e) => actionFunc(e, 'edit', props)} src={EditActionIcon} />
        <div style={{ width: 5 }}></div>
        <Popconfirm
          title="是否确定删除?"
          onConfirm={(e)=>{actionFunc(e, 'del', props)}}
          okText="确定"
          cancelText="取消"
        >
          <Image width={15} preview={false} onClick={e=>e.stopPropagation()}  src={DelActionIcon} />
        </Popconfirm>
      </div>
    )
  }

  //叶子结点结构
  const TreeNode = (nodeProps: MccsFileTree.childTree) => {
    const { title, id,code } = nodeProps;
    return (
      <div className={currentActivedIndex == id ? 'treeNode actived' : 'treeNode'} onClick={onSelectHandle ? () => {
        setcurrentActivedIndex(id);
        onSelectHandle(nodeProps)
      } : () => { setcurrentActivedIndex(id); }}>
        <div style={{ display: 'flex', marginRight: 5, justifyContent: 'center', alignItems: 'center' }} ><Image width={15} preview={false} src={FileIcon} /> </div>
        <div className='treeNodeInner'>{`${code} ${title}`}</div>

        {(currentActivedIndex == id && editable) && <Action {...nodeProps} />  /*点击展示操作项*/}
      </div>
    )
  }
  //递归树形结构
  const loop = (data: MccsFileTree.childTree, i: number) => {

    const { title, children = [], ...restProps } = data;

    const label = <div className="node">{`${restProps.code} ${title}`}</div>;

    if (data.isLeaf) {
      return <TreeNode key={data.id} currentActivedIndex={currentActivedIndex} setcurrentActivedIndex={setcurrentActivedIndex} title={title} {...restProps} />
    }
    return (
      <DirectoryTree key={data.id} currentActivedIndex={currentActivedIndex} setcurrentActivedIndex={setcurrentActivedIndex}
        nodeLabel={label}  {...data} onClick={() => onSelectHandle ? onSelectHandle(data) : () => { }}
        action={editable && <Action  {...data} />} defaultCollapsed={true}
      >
        {
          children.map((item, index) => {
            if (item.isLeaf) {
              return <TreeNode currentActivedIndex={currentActivedIndex} setcurrentActivedIndex={setcurrentActivedIndex} key={index}   {...item} />
            } else {
              return loop(item, index);
            }
          })
        }
      </DirectoryTree>
    )
  }

  useEffect(() => {
    if (treeData.length > 0) {
      setIsLoading(false);
    }
  }, [treeData]);

  return (
    <div className='fileTree'>
      <div className="searchBar">
        {
          editable && (
            <div className="add" onClick={e => actionFunc(e, 'add', {
              title: '',
              id: `0`,
              isLeaf: false,
              code: `${new Date().getTime()}`,
              children: []
            })}><PlusOutlined /></div>
          )
        }
        <Search placeholder='请输入' className="inputArea" allowClear onSearch={(val, e) => searchHandle && searchHandle(val)} />
      </div>
      <div className='treeContainer'>
          {
            isLoading ? <div className='spinWrap'><Spin delay={500} /></div> : (
              <>
                {treeData.map((node, i) => {
                  return loop(node, i);
                })}
              </>
            )
          }
      </div>
    </div>
  );
};



export default MccsFileTree