cloud-JG/src/pages/CardInformation/CardVoucherRedemption/index.tsx

// 卡券发放统计 卡券兑换统计
import { ConnectState } from "@/models/connect";
import { connect, CurrentUser } from "umi";
import SelectCardVouch from "../CardVoucherSearch/components/selectCardVouch";
import { useRef, useState } from "react";
import ProTable, { ActionType } from "@ant-design/pro-table";
import PageTitleBox from "@/components/PageTitleBox";
import { FormInstance } from "antd";
import { handeGetCouponExchangeSummary } from "@/pages/travelMember/service";
import moment from 'moment'
import { highlightText } from "@/utils/highlightText";
import CardInfo from "../CardInformationManager/components/CardInfo";

const CardVoucherRedemption: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
    const { currentUser } = props
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    // 树相关的属性和方法
    const [selectedId, setSelectedId] = useState<string>()
    const [collapsible, setCollapsible] = useState<boolean>(false)
    // 当前查询的文字
    const [currentSearchText, setCurrentSearchText] = useState<string>('')
    // 显示详情的抽屉
    const [showDetail, setShowDetail] = useState<boolean>(false)
    // 当前行数据
    const [currentRow, setCurrentRow] = useState<any>()

    const columns: any = [
        {
            title: '查询内容',
            hideInTable: true,
            dataIndex: 'searchValue',
            fieldProps: {
                placeholder: '请输入卡券名称'
            }
        },
        {
            title: "卡券类型",
            dataIndex: "CouponType",
            width: 200,
            align: 'center',
            ellipsis: true,
            valueType: 'select',
            valueEnum: {
                "1000": "满减券",
                "2000": "折扣券",
                "3000": "抵扣券",
                "4000": "兑换券",
                "5000": "代金券",
                "9000": "实物券"
            }
        },
        {
            title: '统计时间',
            dataIndex: 'search_date',
            valueType: 'dateRange',
            hideInTable: true,
            hideInDescriptions: true,
            search: {
                transform: (value: any) => {
                    return {
                        STARTDATE: value[0],
                        ENDDATE: value[1],
                    };
                },
            },
            initialValue: [moment().startOf('M').format('YYYY-MM-DD'), moment().add(-1, 'day').format('YYYY-MM-DD')],
        },
        {
            title: "卡券名称",
            width: 250,
            dataIndex: "CouponName",
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
            render: (_, record) => {
                return record?.CouponName ?
                    record?.ServerpartShop_Id ? <a onClick={() => {
                        setCurrentRow({ ...record, COUPON_ID: record?.CouponId })
                        setShowDetail(true)
                    }}>
                        {highlightText(record?.CouponName, currentSearchText)}
                    </a> : highlightText(record?.CouponName, currentSearchText) : ""
            }
        },
        {
            title: "服务区名称",
            width: 250,
            dataIndex: "Serverpart_Name",
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
        },
        {
            title: "门店名称",
            width: 250,
            dataIndex: "ServerpartShop_Name",
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
        },
        {
            title: "使用数量",
            width: 150,
            dataIndex: "UsedCount",
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
        },
        {
            title: "订单金额",
            width: 150,
            dataIndex: "OrderAmount",
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
        },
        {
            title: "优惠金额",
            width: 150,
            dataIndex: "CouponAmount",
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
        },
        {
            title: "实付金额",
            width: 150,
            dataIndex: "PayAmount",
            align: 'center',
            hideInSearch: true,
            ellipsis: true,
        },
    ]

    return (
        <div>
            <div style={{ backgroundColor: '#fff', display: 'flex' }}>

                <SelectCardVouch setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} />
                <div style={{
                    width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
                    paddingTop: 0,
                    paddingBottom: 0,
                    paddingRight: 0
                }}>
                    <ProTable
                        actionRef={actionRef}
                        formRef={formRef}
                        columns={columns}
                        rowKey={(record: any) => {
                            return `${record?.CouponId}-${record?.Serverpart_Id}-${record?.ServerpartShop_Id}`
                        }}
                        bordered
                        expandable={{
                            expandRowByClick: true
                        }}
                        scroll={{ x: "100%", y: "calc(100vh - 430px)" }}
                        headerTitle={<PageTitleBox props={props} />} // 列表表头
                        search={{ span: 6 }}
                        request={async (params) => {
                            if (!selectedId) {
                                return
                            }

                            let req: any = {
                                OwnerUnitId: currentUser?.OwnerUnitId,
                                ServerpartId: "",
                                StartDate: params?.STARTDATE || "",
                                EndDate: params?.ENDDATE || "",
                                CouponType: params?.CouponType || ""
                            }

                            let data: any = await handeGetCouponExchangeSummary(req)
                            setCurrentSearchText(params?.searchValue || "")

                            if (data && data.length > 0) {
                                return { data: data, success: true }
                            }
                            return { data: [], success: true }
                        }}
                        toolbar={{
                            actions: [

                            ]
                        }}
                    />



                </div>
            </div>

            {/* 卡券的编辑 还是 新增 组件 */}
            <CardInfo showDetail={showDetail} currentRow={currentRow} currentUser={currentUser} parentRef={actionRef} setShowDetail={setShowDetail} setCurrentRow={setCurrentRow} readonly={true} />
        </div>
    )
}

export default connect(({ user }: ConnectState) => ({
    currentUser: user.currentUser
}))(CardVoucherRedemption);