feat; 核销统计页面新增

scripts/webpack.dev.js

@@ -14,7 +14,7 @@ let _devConfig = {
     proxy: {
       "/PMS": {
         // target: "http://192.168.8.7:3001/mock/3247",
-        target: "http://10.10.128.65:3001/mock/18",
+        target: "http://10.10.128.65:3001/mock/11",
         pathRewrite: {
           "^/PMS": "",
         },

src/pages/OperationCenter/OperationSales/CouponMgm/WriteOffDetail/loadable.jsx

@@ -1,37 +1,30 @@
 import React, { useState, useRef, useEffect } from "react";
 import {  message, Pagination, Table, Space, Modal, } from "antd";
-// import { dictionary, utils } from "@/config/common";
+import { dictionary, utils } from "@/config/common";
 // import moment from 'moment'
-// import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
+import {   useSetState , useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
 import ajax from '@/services/OperationCenter/OperationSales/index'
 import {  FormInput, FormSelect, ResultFlow } from "@/components"
 import "./index.scss";
 // import errorImg from "@/assets/images/layout/error.png"
 // import {  useLocation } from "react-router-dom";
-//pn  size  rule_id 优惠券名称对应id operator_id 商户id type 优惠券类型 plate 车牌号 start_time  end_time  
-//status  message  data  list  
-// id  
-// operator_id  
-// rule_id  
-// get_channel 领取渠道 
-// user 领取用户 
-// get_time 领取时间 
-// use_time 使用时间 
-// road_id  
-// plate 车牌 
-// order_mount 订单金额 
-// refund_mount 优惠金额 
-// actual_mount 实付金额 
-// equipment  
-// name 优惠券名称 
-// type  
-// road 停车场 
-// operator 商户 
-// equipment_name 支付设备 
-// rule_type 优惠券类型
+
 function WriteOffDetail() {
     const [resultData, setResultData] = useState([])
     const [loading, setLoading] = useState(false)
+    const [defaultParams, setDefaultParams] = useSessionStorageState('writeOffStat_formData',{
+        defaultValue:{}
+    })
+    const [typeOptions,setTypeOptions] = useState([])
+    const [pageData, setPageData] = useSetState({ // 分页参数
+        pn: defaultParams?.pn || 1,
+        page_size:defaultParams?.page_size || 20,
+    })
+    const [formData, setFormData] = useSetState({ 
+        name: defaultParams ? defaultParams.name : '',
+        status: defaultParams ? defaultParams.status : '',
+        coupon_type: defaultParams ? defaultParams.coupon_type : '',
+    })
     const getOffList = ()=>{
         ajax.getOffList().then((res)=>{
             if(res.status == 20000){
@@ -152,6 +145,35 @@ function WriteOffDetail() {
             align: 'center'
         }
     ];
+
+    // 获取优惠券类型选项
+    const getCouponOptions = ()=>{
+        ajax.getCouponOptions().then(res => {
+            if (res.status == 20000) { 
+                setTypeOptions(res.data)
+            } else {
+                message.error(res.message)
+            }
+        }).catch(err => {
+            console.log(err)
+        }).finally(()=>{
+            
+        })
+    }
+
+    const onShowSizeChange = (current, pageSize) => {
+        let pn
+        if (pageData.page_size == pageSize) {
+            pn = current
+        } else {
+            pn = 1
+        }
+        setPageData({
+            pn: pn,
+            page_size: pageSize,
+        })
+    }
+
     useEffect(()=>{
         getOffList()
     },[])
@@ -160,9 +182,32 @@ function WriteOffDetail() {
             <div className="inroad-search-container off-detail">
                 <div className="left-search">
                     <div className="title">查询条件</div>
+                    <FormSelect 
+                        yisaLabel="优惠券类型"
+                        yisaData={typeOptions}
+                        defaultValue={ formData.coupon_type || null }  
+                        placeholder=""
+                        hasUnlimited={ false }
+                        showClose={true}
+                        onChange={ e=>{setFormData({coupon_type:e})} }
+                    />
+                    <FormInput
+                        yisaLabel="领取用户"
+                        placeholder="请输入领取用户"
+                        value="aaa"
+                        showClose={true}
+                        onChange={e => { }  }
+                    />
                     <FormInput
-                        yisaLabel="优惠券名称"
-                        placeholder="输入优惠券名称"
+                        yisaLabel="停车场名称"
+                        placeholder="请输入停车场名称"
+                        value="aaa"
+                        showClose={true}
+                        onChange={e => { }  }
+                    />
+                    <FormInput
+                        yisaLabel="车牌号"
+                        placeholder="请输入车牌号"
                         value="aaa"
                         showClose={true}
                         onChange={e => { }  }
@@ -193,6 +238,20 @@ function WriteOffDetail() {
                                 pagination={false}
                             ></Table>
                         </div>
+                        <div>
+                            <Pagination
+                                className="pagination-common"
+                                showSizeChanger={true}
+                                showQuickJumper={true}
+                                // showTotal={() => `共 ${total_records} 条`}
+                                total={resultData.total}
+                                current={pageData.pn}
+                                pageSize={pageData.page_size}
+                                pageSizeOptions={dictionary?.pageSizeOptions}
+                                onChange={onShowSizeChange}
+                                onShowSizeChange={onShowSizeChange}
+                            />
+                        </div>
                     </ResultFlow>
                 </div>
             </div>

src/pages/OperationCenter/OperationSales/CouponMgm/WriteOffStat/index.scss

@@ -3,3 +3,79 @@ $color-container-bg : var(--color-container-bg);
 $color-user-list-bg : var(--color-user-list-bg);
 $color-text : var(--color-text);
 $color-primary : var(--color-primary);
+.inroad-search-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    p{
+      margin-bottom: 0;
+    }
+  
+    .components-title{
+      width: 100%;
+      font-size: 16px;
+      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+      font-weight: 700;
+      text-align: left;
+      color: var(--color-text);
+      margin-bottom: 20px;
+    }
+    .tabs{
+      display: flex;
+      div{
+        flex: 1;
+        padding-bottom:10px;
+        text-align: center;
+        cursor: pointer;
+        border-bottom: 3px solid rgba($color: #00CCFF, $alpha: 0);
+      }
+      .active{
+        border-bottom: 3px solid rgba($color: #00CCFF, $alpha: 0.9);
+      }
+    }
+    .total-row-wrapper{
+      justify-content: flex-start;
+      align-items: center;
+      .export-content{
+        width: 68px;
+        height: 34px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #3b97ff;
+        border-radius: 4px;
+        cursor: pointer;
+        color: #fff;
+        margin-right: 10px;
+      }
+    }
+    .cc-result-flow .table-wrap{
+      height: calc(100% - 32px - 15px);
+      &:hover {
+        &::-webkit-scrollbar{
+          width: 8px;
+          height: 8px;
+        }
+      }
+    }
+    .download{
+      font-size: 14px;
+      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+      font-weight: 400;
+      text-align: center;
+      color: #00ccff;
+    }
+    .ant-table-tbody > tr > td {
+      word-wrap: break-word;
+      word-break: break-all;
+    }
+    .searchWrap{
+        &>div{
+            margin-bottom: 16px;
+        }
+    }
+    .bottomBox{
+      display: flex;
+      justify-content: space-between;
+    }
+  }

src/pages/OperationCenter/OperationSales/CouponMgm/WriteOffStat/loadable.jsx

@@ -1,23 +1,163 @@
 import React, { useState, useRef, useEffect } from "react";
-// import {  message, Pagination, Table, Space, Modal, } from "antd";
-// import { dictionary, utils } from "@/config/common";
+import {  message, Pagination, Table, Space, Modal, } from "antd";
+import { dictionary, utils } from "@/config/common";
 // import moment from 'moment'
-// import {   useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
+import { useSetState,  useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks';
 // import ajax from "@/services"
 // import {  FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components"
 // import "./index.scss";
 // import errorImg from "@/assets/images/layout/error.png"
 // import {  useLocation } from "react-router-dom";
-//序号 优惠券名称 优惠券类型 领取量 使用量 核销总额 
-// "couponStatisticsId": "1816989566343731019",
-// "couponRuleId": "1816961195247290414",
-// "couponType": 0,
-// "receiveAmount": 65,
-// "usedAmount": 0,
-// "totalMoney": 0,
-// "couponName": "8月新增道路泊位优惠券"
+import ajax from '@/services/OperationCenter/OperationSales/index'
+import {  FormInput, FormSelect, ResultFlow } from "@/components"
+import "./index.scss";
+
 function WriteOffStat() {
-    return <div>WriteOffStat</div>
+    const [resultData, setResultData] = useState([])
+    const [loading, setLoading] = useState(false)
+    const [defaultParams, setDefaultParams] = useSessionStorageState('writeOffStat_formData',{
+        defaultValue:{}
+    })
+    const [pageData, setPageData] = useSetState({ // 分页参数
+        pn: defaultParams?.pn || 1,
+        page_size:defaultParams?.page_size || 20,
+    })
+    const [formData, setFormData] = useSetState({ 
+        name: defaultParams ? defaultParams.name : '',
+        status: defaultParams ? defaultParams.status : '',
+        coupon_type: defaultParams ? defaultParams.coupon_type : '',
+    })
+    const getCountList = ()=>{
+        ajax.getCountList().then((res)=>{
+            if(res.status == 20000){
+                setResultData(res.data)
+            }else{
+
+            }
+        })
+    }
+    const columns = [
+        {
+            title: '序号',
+            dataIndex: 'id',
+            key: 'id',
+            width: 150,
+        },
+        {
+            title: '优惠券名称',
+            dataIndex: 'name',
+            key: 'name',
+            // width: 150,
+            ellipsis: true,
+            align: 'center'
+        },
+        {
+            title: '优惠券类型',
+            dataIndex: 'type',
+            key: 'type',
+            // width: 150,
+            ellipsis: true,
+            align: 'center'
+        },
+        {
+            title: '领取量',
+            dataIndex: 'get_num',
+            key: 'get_num',
+            // width: 150,
+            ellipsis: true,
+            align: 'center'
+        },
+        {
+            title: '使用量',
+            dataIndex: 'use_num',
+            key: 'use_num',
+            // width: 150,
+            ellipsis: true,
+            align: 'center'
+        },
+        {
+            title: '核销总额',
+            dataIndex: 'total',
+            key: 'total',
+            // width: 150,
+            ellipsis: true,
+            align: 'center'
+        }
+    ];
+
+    const onShowSizeChange = (current, pageSize) => {
+        let pn
+        if (pageData.page_size == pageSize) {
+            pn = current
+        } else {
+            pn = 1
+        }
+        setPageData({
+            pn: pn,
+            page_size: pageSize,
+        })
+    }
+    useEffect(()=>{
+        getCountList()
+    },[])
+    return (
+        <>
+            <div className="inroad-search-container off-detail">
+                <div className="left-search">
+                    <div className="title">查询条件</div>
+                    <FormInput
+                        yisaLabel="优惠券名称"
+                        placeholder="输入优惠券名称"
+                        value="aaa"
+                        showClose={true}
+                        onChange={e => { }  }
+                    />
+                </div>
+                <div className="right-list">
+                    <ResultFlow
+                        hasLoad={true}
+                        loading={loading}
+                        resultData={resultData.list}
+                        message={"暂无数据"}
+                    >
+                        <div className="total-row-wrapper">
+                            {/* <ExportBtn {...exportParams} ><div className="export-content">导出</div></ExportBtn> */}
+                            <span className="number-wrapper">
+                                <span className="letter">共查询到</span>
+                                <span className="total-number"> {resultData.total} </span>
+                                <span className="letter">条结果</span>
+                            </span>
+                        </div>
+                        <div className="table-wrap">
+                            <Table
+                                rowKey='id'
+                                columns={columns}
+                                className="yisa-table"
+                                dataSource={resultData.list}
+                                loading={loading}
+                                pagination={false}
+                            ></Table>
+                        </div>
+                        <div>
+                            <Pagination
+                                className="pagination-common"
+                                showSizeChanger={true}
+                                showQuickJumper={true}
+                                // showTotal={() => `共 ${total_records} 条`}
+                                total={resultData.total}
+                                current={pageData.pn}
+                                pageSize={pageData.page_size}
+                                pageSizeOptions={dictionary?.pageSizeOptions}
+                                onChange={onShowSizeChange}
+                                onShowSizeChange={onShowSizeChange}
+                            />
+                        </div>
+                    </ResultFlow>
+                </div>
+            </div>
+        </>
+    )
 }
 
+
 export default WriteOffStat;

src/services/OperationCenter/OperationSales/index.js

@@ -154,6 +154,16 @@ const handleCouponDelete= (p)=>{
   })
 }
 
+// 优惠券管理-核销统计-列表 
+const getCountList= (p)=>{
+  return ajax({
+    url: "/api/ope/coupon/count_list",
+    type: 'post',
+    data: p
+  })
+}
+
+
 
 export default {
   getCouponList,
@@ -174,5 +184,6 @@ export default {
   getTemplateEdit,
   getOffList,
   handleOffExport,
-  handleCouponDelete
+  handleCouponDelete,
+  getCountList
 }