BomWeb/src/components/DDComponents/DepartmentField/index.js

import { TreeSelect } from 'antd';
import React, { useState, useEffect, useMemo } from 'react';
import { connect } from 'dva';
// import { queryDDdepList } from '@/services/boom';
// import { queryDDdepList } from '@/services/boom';

function DepartmentField(props) {
  const { value = [], onChange, defaultValue, depTrees } = props;
  // const [treeData, setTreeData] = useState([]);

  // const genTreeNode = dep => {
  //   return {
  //     id: dep.dept_id,
  //     pId: dep.parent_id,
  //     value: dep.dept_id,
  //     title: dep.name,
  //     isLeaf: false,
  //   };
  // };

  // const onLoadData = async ({ id }) => {
  //   let depList = await queryDDdepList({ dept_id: id });

  //   console.log(depList);
  //   if (depList.length > 0) {
  //     let nodes = depList.map(genTreeNode);
  //     setTreeData([...treeData, ...nodes]);
  //   }
  // };

  const findDepName = (list, ID) => {
    let result = '';
    const dep = list.find(item => item.ID === ID);
    if (dep) {
      result = dep.Name;
      return result;
    }
    for (let index = 0; index < list.length; index++) {
      const element = list[index];
      if (element?.children && element?.children.length) {
        result = findDepName(element.children, ID);
        if (result) {
          break;
        }
      }
    }
    return result;
  };

  const findDepID = (list, Name) => {
    let result = '';
    const dep = list.find(item => item.Name === Name);
    if (dep) {
      result = dep.ID;
    } else {
      for (let index = 0; index < list.length; index++) {
        const element = list[index];
        if (element?.children && element?.children.length) {
          result = findDepID(element.children, Name);
          if (result) {
            break;
          }
        }
      }
    }
    return result;
  };

  const defaultID = useMemo(() => {
    if (defaultValue !== undefined) {
      return findDepID(depTrees, defaultValue[0]);
    } else {
      return null;
    }
  }, [defaultValue]);

  const onChangeValue = (newValue, label) => {
    // const depName = findDepName(depTrees, newValue);
    onChange(String(newValue));
  };

  return (
    <TreeSelect
      showSearch
      // // multiple
      allowClear
      defaultValue={defaultID}
      dropdownStyle={{
        maxHeight: 400,
        overflow: 'auto',
      }}
      style={{ width: '100%' }}
      placeholder="请选择部门"
      treeData={depTrees}
      filterTreeNode={(input, option) => {
        return option.title.toLowerCase().includes(input.toLowerCase());
      }}
      onChange={onChangeValue}
    />
  );
}

export default connect(({ user }) => ({ depTrees: user.depTrees }))(DepartmentField);