267 lines
9.6 KiB
TypeScript
267 lines
9.6 KiB
TypeScript
// 卡券领取统计
|
|
import { connect } from "umi";
|
|
import type { CurrentUser } from "umi";
|
|
import type { ConnectState } from "@/models/connect";
|
|
import React, { useRef, useState } from "react";
|
|
import { Drawer, Modal, type FormInstance } from "antd";
|
|
import type { ActionType } from "@ant-design/pro-table";
|
|
import ProTable from "@ant-design/pro-table";
|
|
import PageTitleBox from "@/components/PageTitleBox";
|
|
import { handeGetCouponStockList } from "@/pages/travelMember/service";
|
|
import moment from 'moment'
|
|
import CardVoucherSearch from "../CardVoucherSearch";
|
|
import { highlightText } from "@/utils/highlightText";
|
|
import CardInfo from "../CardInformationManager/components/CardInfo";
|
|
|
|
|
|
const CardHaveCollection: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
|
const { currentUser } = props
|
|
const actionRef = useRef<ActionType>();
|
|
const formRef = useRef<FormInstance>();
|
|
const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
|
|
const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
|
|
const [collapsible, setCollapsible] = useState<boolean>(false)
|
|
const [treeView, setTreeView] = useState<any>()
|
|
const [printIndex, setPrintIndex] = useState<number>(new Date().getTime())
|
|
|
|
|
|
// 树相关的属性和方法
|
|
const [selectedId, setSelectedId] = useState<string>()
|
|
// 导出的加载效果
|
|
const [showLoading, setShowLoading] = useState<boolean>(false)
|
|
// 是否显示打印的表格
|
|
const [showExportTable, setShowExportTable] = useState<boolean>(false)
|
|
// 查询的条件
|
|
const [searchParams, setSearchParams] = useState<any>()
|
|
|
|
// 点击行的数据
|
|
const [currentRow, setCurrentRow] = useState<any>()
|
|
// 显示详情
|
|
const [showDetial, setShowDetail] = useState<any>()
|
|
// 显示详情
|
|
const [showCouponDetial, setShowCouponDetail] = useState<any>()
|
|
// 当前查询的文字
|
|
const [currentSearchText, setCurrentSearchText] = useState<string>('')
|
|
|
|
const columns: any = [
|
|
{
|
|
title: '查询内容',
|
|
hideInTable: true,
|
|
dataIndex: 'searchValue',
|
|
fieldProps: {
|
|
placeholder: '请输入卡券名称'
|
|
}
|
|
},
|
|
{
|
|
title: "卡券类型",
|
|
dataIndex: "COUPON_TYPE",
|
|
width: 120,
|
|
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) => {
|
|
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: "COUPON_NAME",
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return record?.COUPON_NAME ?
|
|
<a onClick={() => {
|
|
setCurrentRow(record)
|
|
setShowCouponDetail(true)
|
|
}}>
|
|
{highlightText(record?.COUPON_NAME, currentSearchText)}
|
|
</a> : ""
|
|
}
|
|
},
|
|
{
|
|
title: "发放数量",
|
|
dataIndex: "COUPON_QUOTA",
|
|
width: 120,
|
|
align: 'center',
|
|
sorter: (a, b) => a.COUPON_QUOTA - b.COUPON_QUOTA,
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: "领取数量",
|
|
dataIndex: "TAKE_COUNT",
|
|
width: 120,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
sorter: (a, b) => a.TAKE_COUNT - b.TAKE_COUNT,
|
|
render: (_, record) => {
|
|
return record?.TAKE_COUNT ? <a onClick={() => {
|
|
setCurrentRow(record)
|
|
setShowDetail(true)
|
|
}}>{record?.TAKE_COUNT}</a> : "-"
|
|
}
|
|
},
|
|
{
|
|
title: "剩余数量",
|
|
dataIndex: "LAST_COUNT",
|
|
width: 120,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
sorter: (a, b) => a.LAST_COUNT - b.LAST_COUNT,
|
|
},
|
|
{
|
|
title: "发放金额",
|
|
dataIndex: "QUOTA_AMOUNT",
|
|
width: 120,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
sorter: (a, b) => a.QUOTA_AMOUNT - b.QUOTA_AMOUNT,
|
|
},
|
|
{
|
|
title: "领取金额",
|
|
dataIndex: "TAKE_AMOUNT",
|
|
width: 120,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
sorter: (a, b) => a.TAKE_AMOUNT - b.TAKE_AMOUNT,
|
|
},
|
|
{
|
|
title: "活动开始时间",
|
|
dataIndex: "START_TIME",
|
|
width: 180,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return record?.START_TIME ? moment(record?.START_TIME).format('YYYY-MM-DD') : "-"
|
|
}
|
|
},
|
|
{
|
|
title: "活动结束时间",
|
|
dataIndex: "END_TIME",
|
|
width: 180,
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return record?.END_TIME ? moment(record?.END_TIME).format('YYYY-MM-DD') : "-"
|
|
}
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div ref={(el) => {
|
|
// 打印报表
|
|
if (!reqDetailList || reqDetailList.length === 0) return;
|
|
setPrintOut(el);
|
|
}} >
|
|
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
|
<div style={{
|
|
width: '100%',
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
paddingRight: 0
|
|
}}>
|
|
<ProTable
|
|
actionRef={actionRef}
|
|
formRef={formRef}
|
|
columns={columns}
|
|
bordered
|
|
expandable={{
|
|
expandRowByClick: true
|
|
}}
|
|
scroll={{ y: 'calc(100vh - 430px)' }}
|
|
// headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>单品销售排行统计</span>}
|
|
headerTitle={<PageTitleBox props={props} />}
|
|
search={{ span: 6 }}
|
|
request={async (params) => {
|
|
const req: any = {
|
|
SearchParameter: {
|
|
COUPON_TYPES: params?.COUPON_TYPE || "",
|
|
TAKE_TIME_Start: params?.STARTDATE || "",// 开始时间
|
|
TAKE_TIME_End: params?.ENDDATE || "",// 结束时间
|
|
COUPON_ISVALID: 1
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
keyWord: {
|
|
key: "COUPON_NAME",
|
|
value: params?.searchValue || ""
|
|
},
|
|
sortStr: "END_TIME desc"
|
|
}
|
|
setSearchParams(params)
|
|
const data = await handeGetCouponStockList(req)
|
|
setCurrentSearchText(params?.searchValue || "")
|
|
console.log('datadatadatadatadata', data);
|
|
if (data.List && data.List.length > 0) {
|
|
return { data: data.List, success: true }
|
|
}
|
|
return { data: [], success: true }
|
|
|
|
}}
|
|
toolbar={{
|
|
actions: [
|
|
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<Drawer
|
|
title={currentRow?.COUPON_NAME || ""}
|
|
destroyOnClose={true}
|
|
width={'80%'}
|
|
bodyStyle={{
|
|
height: '700px', // 你可以根据需要调整高度
|
|
overflowY: 'auto',
|
|
}}
|
|
visible={showDetial}
|
|
onClose={() => {
|
|
setCurrentRow(null)
|
|
setShowDetail(false)
|
|
}}
|
|
>
|
|
<CardVoucherSearch isComponent={true} parentRow={currentRow} />
|
|
</Drawer>
|
|
|
|
{/* 卡券的编辑 还是 新增 组件 */}
|
|
|
|
<CardInfo showDetail={showCouponDetial} currentRow={currentRow} currentUser={currentUser} parentRef={actionRef} setShowDetail={setShowCouponDetail} setCurrentRow={setCurrentRow} readonly={true} />
|
|
</div >
|
|
)
|
|
}
|
|
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.currentUser
|
|
}))(CardHaveCollection);
|