部门报表

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

@@ -31,8 +31,8 @@ function Department(props) {
   const columns = [
     {
       title: '部门名称',
-      // render: record => <a onClick={() => showUserModal(record)}>{record.dep_name}</a>,
-      render: record => <a onClick={() => setCurrent(record)}>{record.dep_name}</a>,
+      render: record => <a onClick={() => showUserModal(record)}>{record.dep_name}</a>,
+      // render: record => <a onClick={() => setCurrent(record)}>{record.dep_name}</a>,
       width: '32%',
     },
     {
@@ -72,11 +72,11 @@ function Department(props) {
       title: '总计',
       dataIndex: 'total_cnt',
     },
-    {
-      title: '操作',
-      width: 80,
-      render: item => <a onClick={() => showDepCompare(item)}>详情</a>,
-    },
+    // {
+    //   title: '操作',
+    //   width: 80,
+    //   render: item => <a onClick={() => showDepCompare(item)}>详情</a>,
+    // },
     // {
     //   title: '付费工时数',
     //   dataIndex: 'pay_workload_cnt',
@@ -124,15 +124,20 @@ function Department(props) {
     );
   };
   const onExpand = (expanded, record) => {
-    if (expanded && !record.isLoad) {
-      dispatch({
-        type: 'report/queryDepReport',
-        payload: {
-          filter: filterRef.current,
-          record: record,
-        },
-      });
-    }
+    return new Promise(resolve => {
+      if (expanded && !record.isLoad) {
+        dispatch({
+          type: 'report/queryDepReport',
+          payload: {
+            filter: filterRef.current,
+            record: record,
+          },
+          callback: resolve,
+        });
+      } else {
+        resolve();
+      }
+    });
   };
   // const showUserModal = item => {
   const showDepCompare = item => {
@@ -144,17 +149,8 @@ function Department(props) {
     });
     setVisible(true);
   };
-  const renderChart = item => {
-    let data = [
-      { value: item.type_project_cnt, name: '执行项目人日' },
-      { value: item.type_sale_cnt, name: '售前支持' },
-      { value: item.type_market_cnt, name: '市场品牌' },
-      { value: item.type_normal_cnt, name: '日常' },
-      { value: item.type_standardize_cnt, name: '标准化' },
-      { value: item.type_rd_cnt, name: '研发' },
-    ];
-    // 过滤为0的值
-    data = data.filter(item => item.value);
+  const renderChart = () => {
+    current;
     chartRef.current.setOption({
       tooltip: {
         trigger: 'item',
@@ -163,7 +159,7 @@ function Department(props) {
         {
           type: 'pie',
           radius: '70%',
-          data: data,
+          data: current,
           emphasis: {
             itemStyle: {
               shadowBlur: 10,
@@ -176,6 +172,20 @@ function Department(props) {
     });
   };
 
+  const handleChangeCurrent = item => {
+    let data = [
+      { value: item.type_project_cnt, name: '执行项目人日' },
+      { value: item.type_sale_cnt, name: '售前支持' },
+      { value: item.type_market_cnt, name: '市场品牌' },
+      { value: item.type_normal_cnt, name: '日常' },
+      { value: item.type_standardize_cnt, name: '标准化' },
+      { value: item.type_rd_cnt, name: '研发' },
+    ];
+    // 过滤为0的值
+    data = data.filter(item => item.value);
+    setCurrent(data);
+  };
+
   const renderDepSelect = () => {
     return (
       <TreeSelect
@@ -184,10 +194,18 @@ function Department(props) {
         placeholder="请选择部门"
         style={{ width: '80%' }}
         multiple={false}
-        treeData={depUserTree}
+        treeData={dep.list}
+        fieldNames={{
+          label: 'dep_name',
+          value: 'dep_id',
+        }}
         filterTreeNode={(input, option) => {
           return option.props.title === input;
         }}
+        onSelect={(_, node) => {
+          handleChangeCurrent(node);
+        }}
+        loadData={node => onExpand(true, node)}
       />
     );
   };
@@ -205,7 +223,7 @@ function Department(props) {
 
   useEffect(() => {
     if (current) {
-      renderChart(current);
+      renderChart();
     }
   }, [current]);
 
@@ -229,11 +247,15 @@ function Department(props) {
         />
         <Affix offsetTop={20}>
           <Card
-            extra={<CloseOutlined onClick={() => setCurrent(null)} />}
+            // extra={<CloseOutlined onClick={() => setCurrent(null)} />}
             title={renderDepSelect()}
             style={{ display: 'block', marginLeft: 20 }}
           >
-            <div id="chart" style={{ width: 400, height: 340 }}></div>
+            {!current?.length && <Empty style={{ width: 400 }} />}
+            <div
+              id="chart"
+              style={{ width: 400, height: 340, display: current?.length > 0 ? 'block' : 'none' }}
+            ></div>
           </Card>
         </Affix>
       </div>

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

@@ -108,18 +108,36 @@ export default {
         payload: { projectUser: data },
       });
     },
-    *queryDepReport({ payload = {} }, { call, put, select }) {
+    *queryDepReport({ payload = {}, callback }, { call, put, select }) {
       const { filter = {}, record = {} } = payload;
+      const dep = yield select(s => s.report.dep);
       const { data } = yield call(queryDepReport, { ...filter, dep_id: record.dep_id });
       data.list.forEach(item => {
-        if (item.sub_dep_num) item.children = [];
+        if (item.sub_dep_num) {
+          item.children = [];
+          item.isLeaf = false;
+        } else {
+          item.isLeaf = true;
+        }
         item.isLoad = false;
       });
+
+      const find = (data, id, callback) => {
+        data.forEach(item => {
+          if (item.dep_id == id) {
+            callback(item);
+          }
+          if (item.children) find(item.children, id, callback);
+        });
+      };
+
       // 判断是否为根节点
       if (record.dep_id) {
-        const dep = yield select(s => s.report.dep);
-        record.children = data.list.length == 0 ? null : data.list;
-        record.isLoad = true;
+        let currentItem;
+        find(dep.list, record.dep_id, item => {
+          item.children = data.list.length == 0 ? null : data.list;
+          item.isLoad = true;
+        });
         yield put({
           type: 'save',
           payload: { dep: { ...dep, list: [...dep.list] } },
@@ -130,6 +148,7 @@ export default {
           payload: { dep: data },
         });
       }
+      callback?.();
     },
     *queryProjectReport({ payload }, { call, put }) {
       const { data } = yield call(queryProjectReport, {