饼图选择部门初步

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { connect } from 'dva';
-import { Form, Table, DatePicker, Input, Button, Empty, Card, Affix } from 'antd';
+import { Form, Table, DatePicker, Input, Button, Empty, Card, Affix, TreeSelect } from 'antd';
 import styles from './report.less';
 import UserRptModal from './UserRptModal';
 import DepCompareModal from './DepCompareModal';
@@ -22,7 +22,7 @@ const initData = [
 ];
 
 function Department(props) {
-  const { dispatch, loading, dep } = props;
+  const { dispatch, loading, dep, depUserTree } = props;
   const [form] = Form.useForm();
   const [visible, setVisible] = useState(false);
   const [modalFilter, setModalFilter] = useState({});
@@ -175,10 +175,30 @@ function Department(props) {
       ],
     });
   };
+
+  const renderDepSelect = () => {
+    return (
+      <TreeSelect
+        showSearch
+        allowClear
+        placeholder="请选择部门"
+        style={{ width: '80%' }}
+        multiple={false}
+        treeData={depUserTree}
+        filterTreeNode={(input, option) => {
+          return option.props.title === input;
+        }}
+      />
+    );
+  };
+
   useEffect(() => {
     // dispatch({
     //   type: 'report/queryUserReport',
     // });
+    dispatch({
+      type: 'report/fetchDepV2',
+    });
     handleSearch();
     chartRef.current = echarts.init(document.getElementById('chart'));
   }, []);
@@ -210,8 +230,8 @@ function Department(props) {
         <Affix offsetTop={20}>
           <Card
             extra={<CloseOutlined onClick={() => setCurrent(null)} />}
-            title={current?.dep_name}
-            style={{ display: current ? 'block' : 'none', marginLeft: 20 }}
+            title={renderDepSelect()}
+            style={{ display: 'block', marginLeft: 20 }}
           >
             <div id="chart" style={{ width: 400, height: 340 }}></div>
           </Card>
@@ -226,5 +246,6 @@ function Department(props) {
 
 export default connect(({ report, loading }) => ({
   dep: report.dep,
+  depUserTree: report.depUserTree,
   loading: loading.models.report,
 }))(Department);

src/pages/PurchaseAdmin/PurchaseList/Report/models/report.js

@@ -12,11 +12,25 @@ import {
   queryUserProject,
   queryProjectReportNew,
 } from '@/services/workHours';
+import { queryDepV2 } from '@/services/approval';
 import { queryRole } from '@/services/SysAdmin';
 import { message } from 'antd';
 import moment from 'moment';
-import { filter, times } from 'lodash';
-// import list from '../../List/models/list';
+
+function getDepUserTree(data, map) {
+  data.title = `${data.Name}`;
+  data.key = `${data.ID}`;
+  data.value = `${data.ID}`;
+  map.set(data.ID, data);
+  if (!data.children) data.children = new Array();
+
+  if (data.children) {
+    data.children.forEach(item => {
+      getDepUserTree(item, map);
+    });
+  }
+  return data;
+}
 
 export default {
   namespace: 'report',
@@ -48,6 +62,7 @@ export default {
     },
     depCompare: [],
     depUserProject: [],
+    depUserTree: [],
     projectList: [],
     projectNew: [],
   },
@@ -290,6 +305,20 @@ export default {
         payload: { projectNew: res.data.child || [] },
       });
     },
+
+    *fetchDepV2({ payload, callback }, { call, put }) {
+      const response = yield call(queryDepV2, { pageSize: 999999 });
+      if (response) {
+        const depUserMap = new Map();
+        const depUserTree = response.data.list.map(item => {
+          return getDepUserTree(item, depUserMap);
+        });
+        yield put({
+          type: 'save',
+          payload: { depUserTree },
+        });
+      }
+    },
   },
 
   reducers: {

src/pages/PurchaseAdmin/PurchaseList/WorkingHours/models/workingHours.js

@@ -39,6 +39,7 @@ export default {
     project: [],
     projectList: { project0: [], project1: [] },
     filter: {},
+    depUserTree: [],
   },
 
   effects: {