|
@@ -0,0 +1,60 @@
|
|
|
|
+import { TreeSelect } from 'antd';
|
|
|
|
+import React, { useState } from 'react';
|
|
|
|
+import { queryDDdepList } from '@/services/boom';
|
|
|
|
+
|
|
|
|
+function DepartmentField(props) {
|
|
|
|
+ const { value, onChange } = props;
|
|
|
|
+
|
|
|
|
+ // const [value, setValue] = useState();
|
|
|
|
+ const [treeData, setTreeData] = useState([]);
|
|
|
|
+
|
|
|
|
+ const genTreeNode = dep => {
|
|
|
|
+ return {
|
|
|
|
+ id: dep.dept_id,
|
|
|
|
+ pId: dep.parent_id,
|
|
|
|
+ value: dep.dept_id,
|
|
|
|
+ title: dep.name,
|
|
|
|
+ isLeaf: true,
|
|
|
|
+ };
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const onLoadData = async parentId => {
|
|
|
|
+ let depList = await queryDDdepList({ dept_id: parentId });
|
|
|
|
+ if (depList.length > 0) {
|
|
|
|
+ let nodes = depList.map(genTreeNode);
|
|
|
|
+ setTreeData([...treeData, ...nodes]);
|
|
|
|
+ } else if (parentId) {
|
|
|
|
+ let parentNode = treeData.find(item => item.id == parentId);
|
|
|
|
+ parentNode.isLeaf = false;
|
|
|
|
+ setTreeData([...treeData]);
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ const onChangeValue = newValue => {
|
|
|
|
+ onChange(newValue);
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ useEffect(() => {
|
|
|
|
+ onLoadData();
|
|
|
|
+ }, []);
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <TreeSelect
|
|
|
|
+ treeDataSimpleMode
|
|
|
|
+ style={{
|
|
|
|
+ width: '100%',
|
|
|
|
+ }}
|
|
|
|
+ value={value}
|
|
|
|
+ dropdownStyle={{
|
|
|
|
+ maxHeight: 400,
|
|
|
|
+ overflow: 'auto',
|
|
|
|
+ }}
|
|
|
|
+ placeholder="请选择部门"
|
|
|
|
+ onChange={onChangeValue}
|
|
|
|
+ loadData={onLoadData}
|
|
|
|
+ treeData={treeData}
|
|
|
|
+ />
|
|
|
|
+ );
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+export default DepartmentField;
|