预定报表

config/routes.js

@@ -185,6 +185,13 @@ export default [
         component: './card/checkgoods',
         access: 'k10',
       },
+      {
+        name: '预定报表',
+        icon: 'smile',
+        path: '/card/reservation',
+        component: './card/reservation',
+        access: 'k10',
+      },
     ]
   },
   {

src/app.jsx

@@ -304,6 +304,13 @@ export async function getInitialState() {
               component: './card/checkgoods',
               access: 'k10',
             },
+            {
+              name: '预定报表',
+              icon: 'smile',
+              path: '/card/reservation',
+              component: './card/reservation',
+              access: 'k10',
+            },
           ]
         },
         {

src/pages/card/reservation/index.css

@@ -0,0 +1,39 @@
+.welcome-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.welcome-head-org {
+	flex-shrink: 0;
+	margin-left: 10px;
+	width: 300px !important;
+	cursor: pointer;
+
+}
+
+
+.my-loading {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: 999;
+}
+
+.device-list {
+	width: 200px;
+	margin-left: 30px;
+}
+
+.my-range-picker {
+	flex-shrink: 0;
+	width: 300px;
+}
+
+.tabs-title {
+	font-size: 20px;
+	margin-bottom: 20px;
+	font-weight: 600;
+}

src/pages/card/reservation/index.jsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from 'react';
+import { Card, Select, message, Spin, TreeSelect } from 'antd';
+import { DatePicker, Button, Tabs, Table, Tag, Space } from 'antd';
+import moment from 'moment';
+import API from "./service";
+import styles from './index.css';
+import { PageContainer } from '@ant-design/pro-layout';
+const { RangePicker } = DatePicker;
+
+const { TabPane } = Tabs;
+
+const ReservationGoodsColums = [
+  {
+    title: '商品',
+    dataIndex: 'name',
+  },
+  {
+    title: '用餐时段',
+    dataIndex: 'mealType',
+    render: (_, record) => {
+      if (record.mealType === '1') {
+        return '早餐'
+      }
+      if (record.mealType === '2') {
+        return '午餐'
+      }
+      if (record.mealType === '3') {
+        return '晚餐'
+      }
+    }
+  },
+  {
+    title: '预定数量',
+    dataIndex: 'qty',
+    sortDirections: ['ascend', 'descend'],
+    sorter: (a, b) => a.value - b.value
+  }
+]
+
+const ReservationUserColums = [
+  {
+    title: '预定商品人员名称',
+    dataIndex: 'name',
+  }
+]
+
+
+export default () => {
+  const [ReservationGoods, setReservationGoods] = useState([]);
+  const [ReservationUser, setReservationUser] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [timeRange, setTimeRange] = useState([
+    moment(moment(new Date(Date.now() + 24 * 60 * 60 * 1000)).format('YYYY-MM-DD 00:00:00')),
+    moment(moment(new Date(Date.now() + 24 * 60 * 60 * 1000)).format('YYYY-MM-DD 23:59:59')),
+  ]);	//日期选择器
+
+  //初始化数据
+  const initData = () => {
+    let jsonData = {
+      "beginTime": timeRange[0]._i,
+      "endTime": timeRange[1]._i
+    }
+    onGetReservationGoodsData(jsonData);
+    onGetReservationUserData(jsonData);
+  }
+
+  //获取材料数据
+  const onGetReservationGoodsData = async (jsonData) => {
+    let response;
+    setIsLoading(true);
+    response = await API.GetReservationGoods(jsonData);
+    setIsLoading(false);
+
+    if (response.succeeded) {
+      let sortArr = response.data.data.sort((a, b) => b.value - a.value);
+      setReservationGoods(sortArr);
+    } else {
+      console.log('Message:', response.msg || '获取预定商品失败');
+    }
+  }
+
+  //获取配方数据
+  const onGetReservationUserData = async (jsonData) => {
+    let response;
+    setIsLoading(true);
+    response = await API.GetReservationUser(jsonData);
+    setIsLoading(false);
+    if (response.succeeded) {
+      let sortArr = response.data.data.sort((a, b) => b.value - a.value);
+      setReservationUser(sortArr);
+    } else {
+      console.log('Message:', response.msg || '获取预定人员失败');
+      // message.error(response.msg || '获取配方信息失败');
+    }
+  }
+
+  const MyLoading = () => {
+    return (
+      <Spin className={styles['my-loading']} size="large" />
+    )
+  }
+  return (
+    <PageContainer>
+      <div className={styles['welcome-container']}>
+        {isLoading ? <MyLoading></MyLoading> : null}
+        <Card style={{ marginBottom: '30px' }}>
+          <div className={styles['welcome-head']} >
+            <div className={styles['echarts-card-choose']}>
+              <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>
+            <Button className={styles['echarts-card-btn']} type="primary" style={{ width: '100px' }} onClick={() => initData()}>查询</Button>
+          </div>
+        </Card>
+        <Card>
+          <Tabs tabPosition='left'>
+            <TabPane tab="预定菜品统计" key="1">
+              <div className={styles['tabs-title']}>
+                预定菜品统计
+              </div>
+              <Table columns={ReservationGoodsColums} dataSource={ReservationGoods} />
+            </TabPane>
+            <TabPane tab="预定人员列表" key="2">
+              <div className={styles['tabs-title']}>
+                预定人员列表
+              </div>
+              <Table columns={ReservationUserColums} dataSource={ReservationUser} />
+            </TabPane>
+          </Tabs>
+        </Card>
+      </div>
+    </PageContainer>
+  );
+};

src/pages/card/reservation/service.js

@@ -0,0 +1,19 @@
+import { request } from 'umi';
+
+export default {
+  //获取所有门店
+  GetReservationUser(data) {
+    return request('/kitchen/api/Reservation/GetReservationUser', {
+      method: 'POST',
+      data
+    });
+  },
+
+  //获取会员分页
+  GetReservationGoods(data) {
+    return request('/kitchen/api/Reservation/GetReservationGoods', {
+      method: 'POST',
+      data
+    });
+  }
+}