396 lines
15 KiB
TypeScript
396 lines
15 KiB
TypeScript
// 积分记录查询
|
|
import { connect } from "umi";
|
|
import type { CurrentUser } from "umi";
|
|
import type { ConnectState } from "@/models/connect";
|
|
import React, { useImperativeHandle, useRef, useState } from "react";
|
|
import ProCard from "@ant-design/pro-card";
|
|
import { MenuFoldOutlined } from "@ant-design/icons";
|
|
import type { FormInstance } from "antd";
|
|
import { Button, message, Space, Spin, Tree } from "antd";
|
|
import useRequest from "@ahooksjs/use-request";
|
|
import { getServerpartTree } from "@/services/options";
|
|
import type { ActionType } from "@ant-design/pro-table";
|
|
import ProTable from "@ant-design/pro-table";
|
|
import ReactHTMLTableToExcel from "react-html-table-to-excel";
|
|
import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree";
|
|
import { handeGetNestingAUTOTYPEList, handleGetCONSUMPTIONRECORDList, handleGetPOINTRECORDList } from "../service";
|
|
import PageTitleBox from "@/components/PageTitleBox";
|
|
import moment from 'moment'
|
|
import session from "@/utils/session";
|
|
import { handleSetlogSave } from "@/utils/format";
|
|
import OrderDetailModal from "../BookingMealOrder/components/orderDetailModal";
|
|
import MemberDetail from "../memberInfor/component/memberDetail";
|
|
import { highlightText } from "@/utils/highlightText";
|
|
|
|
|
|
const PointsRecordSearch: React.FC<{ currentUser: CurrentUser, isComponent?: Boolean, parentDetail?: any, searchReq?: any, onRef?: any, height?: any }> = (props) => {
|
|
// searchReq 传入的自定义参数
|
|
const { currentUser, isComponent, parentDetail, searchReq, onRef, height } = props
|
|
const downloadBtnRef = useRef<any>()
|
|
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())
|
|
|
|
let POINTTYPEObj = session.get('POINTTYPEObj')
|
|
let SCORETYPETree = session.get('SCORETYPETree')
|
|
let MEMBERSHIPLEVELYNObj = session.get('MEMBERSHIPLEVELYNObj')
|
|
let MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj')
|
|
|
|
// 树相关的属性和方法
|
|
const [selectedId, setSelectedId] = useState<string>()
|
|
// 导出的加载效果
|
|
const [showLoading, setShowLoading] = useState<boolean>(false)
|
|
// 是否显示打印的表格
|
|
const [showExportTable, setShowExportTable] = useState<boolean>(false)
|
|
// 查询的条件
|
|
const [searchParams, setSearchParams] = useState<any>()
|
|
|
|
// 显示订单详情的悬浮框
|
|
const [showOrderModal, setShowOrderModal] = useState<boolean>(false)
|
|
const [currentRow, setCurrentRow] = useState<any>()
|
|
// 显示详情抽屉
|
|
const [showDetailDrawer, setShowDetailDrawer] = useState<boolean>(false)
|
|
// 当前查询的文字
|
|
const [currentSearchText, setCurrentSearchText] = useState<string>('')
|
|
|
|
const columns: any = [
|
|
{
|
|
title: '查询内容',
|
|
dataIndex: 'searchText',
|
|
hideInTable: true,
|
|
fieldProps: {
|
|
placeholder: '请输入门店名称/用户昵称'
|
|
}
|
|
},
|
|
{
|
|
title: '查询时间',
|
|
dataIndex: 'search_date',
|
|
valueType: 'dateRange',
|
|
hideInTable: true,
|
|
hideInDescriptions: true,
|
|
search: {
|
|
transform: (value) => {
|
|
return {
|
|
OPERATE_DATE_Start: value[0],
|
|
OPERATE_DATE_End: value[1],
|
|
};
|
|
},
|
|
},
|
|
fieldProps: {
|
|
ranges: {
|
|
"本月": [moment().startOf('M'), moment()],
|
|
"上月": [moment().subtract(1, 'M').startOf('M'), moment().subtract(1, 'M').endOf('M')],
|
|
"近三月": [moment().subtract(3, 'M').startOf('M'), moment().endOf('M')],
|
|
"近半年": [moment().subtract(6, 'M').startOf('M'), moment().endOf('M')],
|
|
}
|
|
},
|
|
initialValue: [moment().startOf('M'), moment()],
|
|
},
|
|
{
|
|
title: "会员昵称",
|
|
width: 150,
|
|
dataIndex: "MEMBERSHIP_NAME",
|
|
hideInSearch: true,
|
|
align: 'center',
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return isComponent && !searchReq ? record?.MEMBERSHIP_NAME || "" : record?.MEMBERSHIP_NAME ? <a onClick={() => {
|
|
setCurrentRow(record)
|
|
setShowDetailDrawer(true)
|
|
handleSetlogSave(`查看${record?.MEMBERSHIP_NAME}【${record?.MEMBERSHIP_ID}】会员信息`)
|
|
}}>
|
|
{/* {record?.MEMBERSHIP_NAME} */}
|
|
{highlightText(record?.MEMBERSHIP_NAME, currentSearchText)}
|
|
</a> : "-"
|
|
}
|
|
},
|
|
{
|
|
title: "会员等级",
|
|
width: 150,
|
|
dataIndex: "MEMBERSHIP_LEVEL",
|
|
hideInSearch: true,
|
|
align: 'center',
|
|
ellipsis: true,
|
|
valueType: 'select',
|
|
valueEnum: MEMBERSHIPLEVELYNObj,
|
|
sorter: true
|
|
},
|
|
{
|
|
title: "会员类型",
|
|
width: 120,
|
|
dataIndex: "MEMBERSHIP_TYPE",
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
align: 'center',
|
|
valueType: 'select',
|
|
valueEnum: {
|
|
...MEMBERSHIPTYPEYNObj,
|
|
},
|
|
sorter: true
|
|
},
|
|
{
|
|
title: '会员标签',
|
|
dataIndex: "MEMBERSHIP_TARGET",
|
|
valueType: 'treeSelect',
|
|
align: 'center',
|
|
width: 120,
|
|
request: async () => {
|
|
const req = {
|
|
AUTOTYPE_TYPEID: '2000',
|
|
AUTOTYPE_PID: "",
|
|
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
|
AUTOTYPE_VALID: 1,
|
|
SearchKey: ""
|
|
}
|
|
const data = await handeGetNestingAUTOTYPEList(req);
|
|
console.log('datadatadatadatadata', data);
|
|
return data
|
|
},
|
|
fieldProps: {
|
|
multiple: true,
|
|
allowClear: true,
|
|
showSearch: true,
|
|
filterTreeNode: (input, node) => {
|
|
// ✅ 输入时根据 AUTOTYPE_NAME 模糊匹配
|
|
return node?.AUTOTYPE_NAME?.toLowerCase()?.includes(input.toLowerCase());
|
|
},
|
|
treeDefaultExpandAll: true,
|
|
fieldNames: {
|
|
label: 'AUTOTYPE_NAME',
|
|
value: 'AUTOTYPE_ID',
|
|
}
|
|
}
|
|
},
|
|
{
|
|
title: "积分方式",
|
|
width: 120,
|
|
dataIndex: "POINT_TYPE",
|
|
ellipsis: true,
|
|
valueType: 'select',
|
|
align: 'center',
|
|
valueEnum: {
|
|
// "0": "全部",
|
|
"1": "累计",
|
|
"-1": "消耗"
|
|
},
|
|
// initialValue: "0"
|
|
},
|
|
{
|
|
title: "积分来源",
|
|
width: 120,
|
|
dataIndex: "POINT_SOURCE",
|
|
ellipsis: true,
|
|
valueType: 'treeSelect',
|
|
align: 'center',
|
|
request: () => {
|
|
return SCORETYPETree
|
|
},
|
|
fieldProps: {
|
|
allowClear: true
|
|
}
|
|
// valueEnum: {
|
|
// "0": "全部",
|
|
// "1000": "消费赠送",
|
|
// "2000": "消费抵扣",
|
|
// "3000": "注册赠送"
|
|
// },
|
|
// initialValue: "0"
|
|
},
|
|
{
|
|
title: "订单编号",
|
|
width: 250,
|
|
dataIndex: "TICKET_CODE",
|
|
hideInSearch: true,
|
|
align: 'center',
|
|
ellipsis: true,
|
|
valueType: 'digit',
|
|
render: (_, record) => {
|
|
return record?.TICKET_CODE ? <a onClick={() => {
|
|
setCurrentRow(record)
|
|
setShowOrderModal(true)
|
|
}}>{record?.TICKET_CODE}</a> : "-"
|
|
}
|
|
},
|
|
{
|
|
title: "获取时间",
|
|
width: 150,
|
|
dataIndex: "CREATE_DATE",
|
|
hideInSearch: true,
|
|
align: 'center',
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return record?.CREATE_DATE ? moment(record?.CREATE_DATE).format('YYYY-MM-DD HH:mm:ss') : "-"
|
|
},
|
|
sorter: true,
|
|
defaultSortOrder: 'descend',
|
|
},
|
|
{
|
|
title: "本次积分",
|
|
width: 120,
|
|
dataIndex: "CURRENT_POINT",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
valueType: "digit",
|
|
sorter: true
|
|
},
|
|
{
|
|
title: "累计积分",
|
|
width: 120,
|
|
dataIndex: "MEMBERSHIP_POINT",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
valueType: "digit",
|
|
sorter: true
|
|
},
|
|
{
|
|
title: "实付金额",
|
|
width: 120,
|
|
dataIndex: "PAY_AMOUNT",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
valueType: "digit",
|
|
sorter: true
|
|
},
|
|
{
|
|
title: "门店名称",
|
|
width: 150,
|
|
dataIndex: "SHOPNAME",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
render: (_, record) => {
|
|
return highlightText(record?.SHOPNAME, currentSearchText)
|
|
}
|
|
},
|
|
{
|
|
title: "服务区名称",
|
|
width: 150,
|
|
dataIndex: "SERVERPART_NAME",
|
|
hideInSearch: true,
|
|
align: 'center',
|
|
ellipsis: true,
|
|
},
|
|
]
|
|
|
|
const handleCloseModal = () => {
|
|
setShowOrderModal(false)
|
|
setCurrentRow(null)
|
|
setShowDetailDrawer(false)
|
|
}
|
|
|
|
useImperativeHandle(onRef, () => ({
|
|
actionRef
|
|
}));
|
|
|
|
|
|
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
|
|
}}
|
|
headerTitle={isComponent ? '' : <PageTitleBox props={props} />}
|
|
search={isComponent ? false : { span: 6, defaultCollapsed: false }}
|
|
scroll={{ x: '100%', y: isComponent ? height ? `${height}` : '300px' : 'calc(100vh - 480px)' }}
|
|
options={isComponent ? false : {
|
|
density: true,
|
|
reload: true,
|
|
setting: true
|
|
}}
|
|
request={async (params, sorter) => {
|
|
|
|
const sortstr = Object.keys(sorter).map(n => {
|
|
const value = sorter[n]
|
|
return value ? `${n} ${value.replace('end', '')}` : ''
|
|
})
|
|
|
|
const req: any = isComponent ? searchReq ? {
|
|
...searchReq,
|
|
PageIndex: params?.current,
|
|
PageSize: 20,
|
|
} : {
|
|
SearchParameter: {
|
|
OWNERUNIT_ID: 911,
|
|
MEMBERSHIP_IDS: parentDetail?.MEMBERSHIP_ID,
|
|
MEMBERSHIP_TARGET: params?.MEMBERSHIP_TARGET && params?.MEMBERSHIP_TARGET.length > 0 ? params?.MEMBERSHIP_TARGET.toString() : ""
|
|
},
|
|
PageIndex: params?.current,
|
|
PageSize: 20,
|
|
// sortstr: "OPERATE_DATE desc",
|
|
sortStr: sortstr.toString()
|
|
} : {
|
|
SearchParameter: {
|
|
// PROVINCE_CODE: currentUser?.ProvinceCode || "",
|
|
OPERATE_DATE_Start: params?.OPERATE_DATE_Start || "",
|
|
OPERATE_DATE_End: params?.OPERATE_DATE_End || "",
|
|
OWNERUNIT_ID: 911,
|
|
POINT_TYPE: params?.POINT_TYPE === '0' ? '' : params?.POINT_TYPE,
|
|
POINT_SOURCE: params?.POINT_SOURCE === '0' ? '' : params?.POINT_SOURCE,
|
|
MEMBERSHIP_TARGET: params?.MEMBERSHIP_TARGET && params?.MEMBERSHIP_TARGET.length > 0 ? params?.MEMBERSHIP_TARGET.toString() : ""
|
|
},
|
|
PageIndex: params?.current,
|
|
PageSize: 20,
|
|
// sortstr: "OPERATE_DATE desc",
|
|
sortStr: sortstr.toString(),
|
|
keyWord: {
|
|
Key: "MEMBERSHIP_NAME,SHOPNAME",
|
|
Value: params?.searchText
|
|
}
|
|
}
|
|
const data = await handleGetPOINTRECORDList(req)
|
|
setCurrentSearchText(params?.searchText || "")
|
|
handleSetlogSave(`点击查询按钮`)
|
|
|
|
if (data.List && data.List.length > 0) {
|
|
return { data: data.List, success: true, total: data.TotalCount }
|
|
}
|
|
return { data: [], success: true }
|
|
}}
|
|
toolbar={{
|
|
actions: [
|
|
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<OrderDetailModal modalVisible={showOrderModal} handleCloseModal={handleCloseModal} currentRow={currentRow} />
|
|
|
|
{/* 会员详情 */}
|
|
<MemberDetail showDetailDrawer={showDetailDrawer}
|
|
currentRow={currentRow}
|
|
handleCloseModal={handleCloseModal}
|
|
currentUser={currentUser} />
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.currentUser
|
|
}))(PointsRecordSearch);
|