diff --git a/src/pages/order/order-market-report/index.jsx b/src/pages/order/order-market-report/index.jsx index 36c3116..deca9b1 100644 --- a/src/pages/order/order-market-report/index.jsx +++ b/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 ( +
+ +
+ ) +} + /** * 营销报表 * @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 ( + {showLoading ? : null}
- { - 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); - }} /> +
+ { + 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); + }} /> + { + if (node.type === 2 || node === 3) { + setCurrentOrg(node); + } + }} + placeholder="请选择组织架构" + treeDefaultExpandAll + /> +
+
- +
diff --git a/src/pages/order/order-market-report/index.less b/src/pages/order/order-market-report/index.less index 9487917..ed50ea4 100644 --- a/src/pages/order/order-market-report/index.less +++ b/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); } \ No newline at end of file diff --git a/src/pages/order/order-market-report/service.js b/src/pages/order/order-market-report/service.js index e5a3880..7820383 100644 --- a/src/pages/order/order-market-report/service.js +++ b/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, + }); } };