254 lines
12 KiB
TypeScript
254 lines
12 KiB
TypeScript
// 积分成长值汇总表
|
||
import { connect, CurrentUser } from "umi";
|
||
import { ConnectState } from "@/models/connect";
|
||
import { useEffect, useRef, useState } from "react";
|
||
import { Button, Col, Drawer, FormInstance, Row, Spin } from "antd";
|
||
import ProForm, { ProFormSelect } from "@ant-design/pro-form";
|
||
import './SummaryOfIntegralGrowthValue.less'
|
||
import { handeGetMembershipCount } from "../service";
|
||
import session from "@/utils/session";
|
||
import ProTable, { ActionType } from "@ant-design/pro-table";
|
||
import MemberInfor from "../memberInfor";
|
||
|
||
const SummaryOfIntegralGrowthValue: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
|
||
const { currentUser } = props
|
||
const formRef = useRef<FormInstance>();
|
||
const actionRef = useRef<ActionType>();
|
||
|
||
// 选择的tab
|
||
const [selectPageTab, setSelectPageTab] = useState<any>(1)
|
||
// 会员类型数据
|
||
const [membershipType, setMembershipType] = useState<any>()
|
||
// 会员等级数据
|
||
const [membershipLevel, setMembershipLevel] = useState<any>()
|
||
// 会员类型数量
|
||
const [membershipTypeTotal, setMembershipTypeTotal] = useState<number>(0)
|
||
// 会员等级数量
|
||
const [membershipLevelTotal, setmembershipLevelTotal] = useState<number>(0)
|
||
|
||
// 显示详情抽屉
|
||
const [showDetail, setShowDetail] = useState<boolean>(false)
|
||
const [currentRow, setCurrentRow] = useState<any>()
|
||
// 抽屉显示的标题
|
||
const [currentDrawerTitle, setCurrentDrawerTitle] = useState<string>()
|
||
// 1 是 会员类型 2是 会员等级
|
||
const [searchType, setSearchType] = useState<any>()
|
||
// 对应的枚举类型
|
||
const [valueType, setValueType] = useState<any>()
|
||
// 显示加载效果
|
||
const [showLoading, setShowLoading] = useState<boolean>(false)
|
||
|
||
let MEMBERSHIPLEVELYNObj = session.get('MEMBERSHIPLEVELYNObj')
|
||
let MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj')
|
||
|
||
const handleGetData = async (formData?: any) => {
|
||
console.log('formDataformDataformData', formData);
|
||
|
||
const req: any = {
|
||
CalcType: 1, // 会员类型
|
||
OwnerUnitId: currentUser?.OwnerUnitId,
|
||
ExcludeTest: formData ? formData?.ExcludeTest === 1 ? true : false : true,
|
||
StartDate: "",
|
||
EndDate: "",
|
||
MembershipType: "",
|
||
MembershipLevel: ""
|
||
}
|
||
const req2: any = {
|
||
CalcType: 2,// 会员等级
|
||
OwnerUnitId: currentUser?.OwnerUnitId,
|
||
ExcludeTest: formData ? formData?.ExcludeTest === 1 ? true : false : true,
|
||
StartDate: "",
|
||
EndDate: "",
|
||
MembershipType: "",
|
||
MembershipLevel: ""
|
||
}
|
||
setShowLoading(true)
|
||
const data = await handeGetMembershipCount(req)
|
||
const data2 = await handeGetMembershipCount(req2)
|
||
setShowLoading(false)
|
||
console.log('datadatadatadata', data);
|
||
console.log('data2data2data2', data2);
|
||
|
||
setMembershipType(data.List)
|
||
setMembershipLevel(data2.List)
|
||
setMembershipTypeTotal(data.OtherData)
|
||
setmembershipLevelTotal(data2.OtherData)
|
||
}
|
||
|
||
// 点击事件
|
||
const handleShowTableData = async (type: number, memberType: any) => {
|
||
// type 1 的话是 会员类型 2 的话是 会员等级 memberType 对应的枚举值
|
||
setCurrentDrawerTitle(`${type === 1 ? '会员类型' : type === 2 ? '会员等级' : ''}【${type === 1 ? MEMBERSHIPTYPEYNObj && memberType ? MEMBERSHIPTYPEYNObj[memberType] : '' : type === 2 ? MEMBERSHIPLEVELYNObj && memberType ? MEMBERSHIPLEVELYNObj[memberType] : '' : ''}】`)
|
||
setSearchType(type)
|
||
setValueType(memberType)
|
||
setShowDetail(true)
|
||
}
|
||
|
||
useEffect(() => {
|
||
handleGetData()
|
||
}, [])
|
||
|
||
return (
|
||
<div className="SummaryOfIntegralGrowthValueMain">
|
||
{
|
||
showLoading ?
|
||
<div
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
background: 'rgba(0,0,0,0.1)',
|
||
position: 'absolute',
|
||
zIndex: 5,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center'
|
||
}}
|
||
>
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: '15px 20px 10px',
|
||
background: '#fff',
|
||
borderRadius: '8px',
|
||
width: '200px'
|
||
}}>
|
||
<Spin />
|
||
<span style={{ marginLeft: '5px' }}>加载中...</span>
|
||
</div>
|
||
</div> : ''
|
||
}
|
||
|
||
<div className="SummaryOfIntegralGrowthValueTop">
|
||
{/* <div className="SummaryOfIntegralGrowthValueTitleBox">
|
||
<div className={selectPageTab === 1 ? 'SummaryOfIntegralGrowthValueTitle SummaryOfIntegralGrowthValueTitleSelect' : 'SummaryOfIntegralGrowthValueTitle'} onClick={() => {
|
||
setSelectPageTab(1)
|
||
}}>会员类型</div>
|
||
<div style={{ marginLeft: '48px' }} className={selectPageTab === 2 ? 'SummaryOfIntegralGrowthValueTitle SummaryOfIntegralGrowthValueTitleSelect' : 'SummaryOfIntegralGrowthValueTitle'} onClick={() => {
|
||
setSelectPageTab(2)
|
||
}}>会员等级</div>
|
||
</div> */}
|
||
|
||
<Row style={{ marginTop: "16px" }}>
|
||
<Col span={6}>
|
||
<ProForm
|
||
layout={'horizontal'}
|
||
formRef={formRef}
|
||
submitter={false}
|
||
onFinish={async (values: any) => {
|
||
console.log('valuesvaluesvaluesvalues', values);
|
||
handleGetData(values)
|
||
}}
|
||
>
|
||
<ProFormSelect
|
||
label={"是否排除测试会员"}
|
||
name={"ExcludeTest"}
|
||
options={[{ label: '是', value: 1 }, { label: '否', value: 0 }]}
|
||
initialValue={1}
|
||
/>
|
||
</ProForm>
|
||
</Col>
|
||
<Col span={12}></Col>
|
||
<Col span={6}>
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||
<Button style={{ marginRight: '8px' }} onClick={() => {
|
||
formRef.current?.resetFields()
|
||
}}>重置</Button>
|
||
<Button type={"primary"} onClick={() => {
|
||
formRef.current?.submit()
|
||
}}>查询</Button>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
|
||
</div>
|
||
|
||
|
||
<div className="SummaryOfIntegralGrowthValueBottom">
|
||
{
|
||
membershipType && membershipType.length > 0 ?
|
||
<>
|
||
<div className="SummaryOfIntegralGrowthValueTitleBox">
|
||
<div className="SummaryOfIntegralGrowthValueTitle">会员类型{membershipTypeTotal ? `（${membershipTypeTotal}人）` : ""}</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div className="SummaryOfIntegralGrowthValueContentBox">
|
||
<div className="SummaryOfIntegralGrowthValueItemOther">
|
||
{
|
||
membershipType.map((item: any) => {
|
||
return <div className="SummaryOfIntegralGrowthValueOtherItem" onClick={() => {
|
||
handleShowTableData(1, item.label)
|
||
}}>
|
||
<div className="otherItemTitle">{item.label === '0' ? '未授权用户' : MEMBERSHIPTYPEYNObj && item.label ? MEMBERSHIPTYPEYNObj[item.label] : ''}</div>
|
||
<div className="otherItemValue">{item.value}<span className="otherItemValueUnit">人</span></div>
|
||
<div className="addLabel">占比</div>
|
||
<div className="otherItemAddBox">
|
||
<span className="addValue">{item.key ? item.key > 1000 ? '1000%' : item.key + '%' : ""}</span>
|
||
</div>
|
||
</div>
|
||
})
|
||
}
|
||
|
||
</div>
|
||
</div>
|
||
</>
|
||
: ""
|
||
}
|
||
|
||
|
||
{
|
||
membershipLevel && membershipLevel.length > 0 ?
|
||
<>
|
||
<div className="SummaryOfIntegralGrowthValueTitleBox" style={{ marginTop: '32px' }}>
|
||
<div className="SummaryOfIntegralGrowthValueTitle">会员等级{membershipLevelTotal ? `（${membershipLevelTotal}人）` : ""}</div>
|
||
</div>
|
||
|
||
|
||
<div className="SummaryOfIntegralGrowthValueContentBox">
|
||
<div className="SummaryOfIntegralGrowthValueItemOther">
|
||
{
|
||
membershipLevel.map((item: any) => {
|
||
return <div className="SummaryOfIntegralGrowthValueOtherItem" onClick={() => {
|
||
handleShowTableData(2, item.label)
|
||
}}>
|
||
<div className="otherItemTitle">{item.label === '0' ? '未授权用户' : MEMBERSHIPLEVELYNObj && item.label ? MEMBERSHIPLEVELYNObj[item.label] : ''}</div>
|
||
<div className="otherItemValue">{item.value}<span className="otherItemValueUnit">人</span></div>
|
||
<div className="addLabel">占比</div>
|
||
<div className="otherItemAddBox">
|
||
<span className="addValue">{item.key ? item.key > 1000 ? '1000%' : item.key + '%' : ""}</span>
|
||
</div>
|
||
</div>
|
||
})
|
||
}
|
||
|
||
</div>
|
||
</div>
|
||
</>
|
||
: ""
|
||
}
|
||
</div>
|
||
|
||
|
||
<Drawer
|
||
width={'80%'}
|
||
title={currentDrawerTitle || ""}
|
||
visible={showDetail}
|
||
destroyOnClose
|
||
closable={false}
|
||
onClose={() => {
|
||
setSearchType(null)
|
||
setValueType(null)
|
||
setShowDetail(false)
|
||
}}
|
||
>
|
||
<MemberInfor searchType={searchType} valueType={valueType} isComponent={true} noMemberType={searchType === 1} noMemberLevel={searchType === 2} />
|
||
</Drawer>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default connect(({ user }: ConnectState) => ({
|
||
currentUser: user.currentUser
|
||
}))(SummaryOfIntegralGrowthValue); |