图表部门选择修复

src/pages/PurchaseAdmin/PurchaseList/Report/Department.js

@@ -29,6 +29,11 @@ function Department(props) {
   const [current, setCurrent] = useState(null);
   const [currentDep, setCurrentDep] = useState(null);
   const chartRef = useRef(null);
+  const filterRef = useRef({ pageSize: 99999 });
+  //控制图表部门选择参数
+  const [loadedDepKey, setLoadedDepKey] = useState([]);
+  const [expandedDepKey, setExpandedDepKey] = useState([]);
+
   const columns = [
     {
       title: '部门名称',
@@ -88,12 +93,15 @@ function Department(props) {
     //   render: percent => (percent * 100).toFixed(2) + '%',
     // },
   ];
-  const filterRef = useRef({ pageSize: 99999 });
   const handleSearch = () => {
     const { time } = form.getFieldsValue();
     filterRef.current.s_time = time[0] ? moment(time[0]).format('YYYY-MM') : null;
     filterRef.current.e_time = time[1] ? moment(time[1]).format('YYYY-MM') : null;
 
+    //重置图表部门选择
+    setLoadedDepKey([]);
+    setExpandedDepKey([]);
+
     dispatch({
       type: 'report/queryDepReport',
       payload: {
@@ -125,7 +133,12 @@ function Department(props) {
       </Form>
     );
   };
-  const onExpand = (expanded, record) => {
+
+  //控制图表部门选择展开/加载
+  const onExpandDep = keys => {
+    setExpandedDepKey(keys);
+  };
+  const onLoadDep = (expanded, record) => {
     return new Promise(resolve => {
       if (expanded && !record.isLoad) {
         dispatch({
@@ -141,6 +154,7 @@ function Department(props) {
       }
     });
   };
+
   const showUserModal = item => {
     // const showDepCompare = item => {
     const { s_time, e_time } = filterRef.current;
@@ -200,11 +214,11 @@ function Department(props) {
           backgroundColor: 'transparent',
           formatter: () => ' ',
         },
-        itemStyle: { color: '#f7f7f7' },
+        itemStyle: { color: '#fff' },
         emphasis: {
           label: { show: false },
           labelLine: { show: false },
-          itemStyle: { color: '#f7f7f7' },
+          itemStyle: { color: '#fff' },
         },
         label: { show: false },
         labelLine: { show: false },
@@ -235,7 +249,10 @@ function Department(props) {
         onSelect={(_, node) => {
           handleChangeCurrent(node);
         }}
-        loadData={node => onExpand(true, node)}
+        treeExpandedKeys={expandedDepKey}
+        onTreeExpand={keys => onExpandDep(keys)}
+        treeLoadedKeys={loadedDepKey}
+        loadData={node => onLoadDep(true, node)}
         value={currentDep}
       />
     );
@@ -271,7 +288,7 @@ function Department(props) {
           columns={columns}
           dataSource={dep.list}
           pagination={false}
-          onExpand={onExpand}
+          onExpand={onLoadDep}
         />
         <Affix offsetTop={20}>
           <Card