营销报表新增组织机构选择、导出所有报表

src/pages/order/order-market-report/index.jsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import { DownloadOutlined } from '@ant-design/icons';
-import { Button, Table, Card, DatePicker, message, Pagination } from 'antd';
+import { Button, Table, Card, DatePicker, message, Pagination, Spin, TreeSelect } from 'antd';
 import styles from './index.less';
 import moment from 'moment';
 import marketAPI from "./service";
-
 import ExportJsonExcel from "js-export-excel"
 
+const { TreeNode } = TreeSelect;
 const { RangePicker } = DatePicker;
 const columns = [
     {
@@ -382,6 +382,14 @@ const columns = [
     }
 ]
 
+const LoadingCard = () => {
+    return (
+        <div className={styles['loading-card']}>
+            <Spin size="large" />
+        </div>
+    )
+}
+
 /**
  * 营销报表
  * @returns 
@@ -392,19 +400,21 @@ export default function Index() {
     const [current, setCurrent] = useState(1);
     const [pageSize, setPageSize] = useState(10);
     const [total, setTotal] = useState(0);
-
+    const [orgTree, setOrgTree] = useState([]);
+    const [showLoading, setShowLoading] = useState(false);
     const [timeRange, setTimeRange] = useState([
         moment(moment(new Date(Date.now() - 24 * 60 * 60 * 1000 * 7)).format('YYYY-MM-DD 00:00:00')),
         moment(moment(new Date(Date.now())).format('YYYY-MM-DD 23:59:59')),
     ]);	//日期选择器
+    const [currentOrg, setCurrentOrg] = useState('');
 
     useEffect(() => {
         queryMarketReport();
     }, [current, pageSize, timeRange]);
 
-    // useEffect(() => {
-    //     calcTotal();
-    // }, [data]);
+    useEffect(() => {
+        onGetOrgTree();
+    }, []);
 
     //计算总计
     const calcTotal = () => {
@@ -434,10 +444,15 @@ export default function Index() {
 
     const queryMarketReport = async () => {
         const jsonData = {
+            startTime: timeRange[0],
+            endTime: timeRange[1],
             current: current,
             pageSize: pageSize
         }
+        currentOrg.key && (jsonData.shopId = currentOrg.key);
+        setShowLoading(true);
         const response = await marketAPI.getMarketReportList(jsonData);
+        setShowLoading(false);
         if (response.statusCode === 200) {
             setData(response.data.data);
             setTotal(response.data.total);
@@ -453,49 +468,112 @@ export default function Index() {
     }
 
     //下载Excel
-    const onDownloadExcel = () => {
-        let option = {};  //option代表的就是excel文件
-        const date = new Date();
-        const excelName =  "营销报表-" + date.toLocaleString().replaceAll('\/', '-');
-        option.fileName = excelName;  //excel文件名称
-        const sheetHeader = [];
-        Object.keys(data[0]).forEach(item => {
-            sheetHeader.push(item);
-        });
-        console.log('sheetHeader', sheetHeader);
-        option.datas = [
-            {
-                sheetData: data,            //excel文件中的数据源
-                sheetName: excelName,       //excel文件中sheet页名称
-                sheetFilter: sheetHeader,   //excel文件中需显示的列数据
-                sheetHeader: ['ID', '时间', '店铺名称', '店铺ID', '营收流水', 
-                '实际营收', '会员价', '优惠券', '活动折扣', '营收流水', 
-                '营收流水', '客单价-流水单价', '客单价-实收单价', '单单价-总流水', '单单价-总实收',
-                '现金-交易笔数', '现金收入', '微信-交易笔数', '微信收入', '会员收入', '非会员收入'
-                ]    //excel文件中每列的表头名称
+    const onDownloadExcel = async () => {
+        const jsonData = {
+            startTime: timeRange[0],
+            endTime: timeRange[1],
+        }
+        currentOrg.key && (jsonData.shopId = currentOrg.key);
+        setShowLoading(true);
+        const response = await marketAPI.marketingReportExport(jsonData);
+        setShowLoading(false);
+        if (response.statusCode === 200) {
+            let option = {};  //option代表的就是excel文件
+            const date = new Date();
+            const excelName = "营销报表-" + date.toLocaleString().replaceAll('\/', '-');
+            option.fileName = excelName;  //excel文件名称
+            const sheetHeader = [];
+            Object.keys(response.data[0]).forEach(item => {
+                sheetHeader.push(item);
+            });
+            console.log('sheetHeader', sheetHeader);
+            option.datas = [
+                {
+                    sheetData: response.data,            //excel文件中的数据源
+                    sheetName: excelName,       //excel文件中sheet页名称
+                    sheetFilter: sheetHeader,   //excel文件中需显示的列数据
+                    sheetHeader: ['ID', '时间', '店铺名称', '店铺ID', '营收流水',
+                        '实际营收', '会员折扣', '优惠券折扣', '活动折扣','客单价-流水单价', '客单价-实收单价', 
+                        '单单价-总流水', '单单价-总实收',
+                        '现金-交易笔数', '现金收入', '微信-交易笔数', '微信收入', '会员收入', '非会员收入'
+                    ]    //excel文件中每列的表头名称
+                }
+            ]
+            let toExcel = new ExportJsonExcel(option);  //生成excel文件
+            toExcel.saveExcel();
+        } else {
+            message.error(response.errors || '导出失败');
+        }
+    }
+
+    //获取组织树
+    const onGetOrgTree = async () => {
+        setShowLoading(true);
+        const response = await marketAPI.getOrgTree();
+        setShowLoading(false);
+        if (response.statusCode === 200) {
+            const originTree = response.data;
+            onSetOrgTreeStatus(originTree);
+            setOrgTree(originTree);
+        } else {
+            message.error(response.errors || '获取组织树出错');
+        }
+    }
+
+    //设置组织树不可选择状态
+    const onSetOrgTreeStatus = (originTree) => {
+        originTree.forEach(treeItem => {
+            if (treeItem.children && treeItem.children.length > 0) {
+                onSetOrgTreeStatus(treeItem.children);
+            } else {
+                if (treeItem.type === 2 || treeItem.type === 3) {
+                    treeItem.disabled = false;
+                } else {
+                    treeItem.disabled = true;
+                }
             }
-        ]
-        let toExcel = new ExportJsonExcel(option);  //生成excel文件
-        toExcel.saveExcel();
+        });
     }
 
     return (
         <PageContainer>
+            {showLoading ? <LoadingCard></LoadingCard> : null}
             <Card className={styles['data-search-card']}>
                 <div className={styles['data-search-box']}>
-                    <RangePicker className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => {
-                        let tempDate = [
-                            moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')),
-                            moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')),
-                        ]
-                        setTimeRange(tempDate);
-                    }} />
+                    <div className={styles['data-search-left']}>
+                        <RangePicker className={styles['my-range-picker']} value={timeRange} onChange={(date, dateStrings) => {
+                            let tempDate = [
+                                moment(moment(new Date(dateStrings[0])).format('YYYY-MM-DD 00:00:00')),
+                                moment(moment(new Date(dateStrings[1])).format('YYYY-MM-DD 23:59:59')),
+                            ]
+                            setTimeRange(tempDate);
+                        }} />
+                        <TreeSelect
+                            style={{
+                                width: '300px',
+                                marginLeft: '50px'
+                            }}
+                            dropdownStyle={{
+                                maxHeight: 400,
+                                overflow: 'auto',
+                            }}
+                            treeData={orgTree}
+                            onSelect={(value, node) => {
+                                if (node.type === 2 || node === 3) {
+                                    setCurrentOrg(node);
+                                }
+                            }}
+                            placeholder="请选择组织架构"
+                            treeDefaultExpandAll
+                        />
+                    </div>
+
                     <div className={styles['data-search-btns']}>
                         <Button type="primary" icon={<DownloadOutlined />} size='middle' onClick={onDownloadExcel}>
                             下载
                         </Button>
                         <Button className={styles['search-btn-item']}>重置</Button>
-                        <Button className={styles['search-btn-item']} type="primary">查询</Button>
+                        <Button className={styles['search-btn-item']} type="primary" onClick={queryMarketReport}>查询</Button>
                     </div>
                 </div>
             </Card>

src/pages/order/order-market-report/index.less

@@ -17,4 +17,25 @@
     justify-content: flex-end;
     align-items: center;
     height: 50px;
+}
+
+.data-search-left {
+    display: flex;
+    align-items: center;
+}
+
+// 加载中
+.loading-card {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999;
+    background-color: rgba(0, 0, 0, 0.5);
 }

src/pages/order/order-market-report/service.js

@@ -1,10 +1,26 @@
 import { request } from 'umi';
 
 export default {
+    //获取分页数据
     getMarketReportList(data) {
         return request(`/kitchen/api/report-statistics/marketing-report`, {
             method: 'Post',
             data: data,
         });
+    },
+
+    //获取组织架构
+    getOrgTree() {
+        return request(`/kitchen/api/report-statistics/org-tree`, {
+            method: 'GET',
+        });
+    },
+
+    //下载报表
+    marketingReportExport(data) {
+        return request(`/kitchen/api/report-statistics/marketing-report-export`, {
+            method: 'Post',
+            data: data,
+        });
     }
 };