374 lines
13 KiB
TypeScript
374 lines
13 KiB
TypeScript
// 会员等级分布
|
|
import { ConnectState } from "@/models/connect";
|
|
import { connect, CurrentUser } from "umi";
|
|
import LeftSelectMemberLevel from "./components/LeftSelectMemberLevel";
|
|
import { useRef, useState } from "react";
|
|
import ProTable, { ActionType } from "@ant-design/pro-table";
|
|
import { FormInstance } from "antd";
|
|
import PageTitleBox from "@/components/PageTitleBox";
|
|
import moment from 'moment'
|
|
import { handleSetlogSave } from "@/utils/format";
|
|
import session from "@/utils/session";
|
|
import { handleGetMEMBERSHIPList } from "../service";
|
|
|
|
const MembershipLevelDistribution: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
|
|
|
|
const actionRef = useRef<ActionType>();
|
|
const formRef = useRef<FormInstance>();
|
|
// 树相关的属性和方法
|
|
const [selectedId, setSelectedId] = useState<string>()
|
|
const [collapsible, setCollapsible] = useState<boolean>(false)
|
|
// 当前行数据
|
|
const [currentRow, setCurrentRow] = useState<any>()
|
|
// 显示详情抽屉
|
|
const [showDetailDrawer, setShowDetailDrawer] = useState<boolean>(false)
|
|
|
|
let MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj');
|
|
let CONSUMPTIONRECORDTYPEObj = session.get('CONSUMPTIONRECORDTYPEObj')
|
|
let MEMBERSHIPLEVELYNObj = session.get('MEMBERSHIPLEVELYNObj')
|
|
|
|
const columns: any = [
|
|
{
|
|
title: "用户昵称",
|
|
width: 200,
|
|
dataIndex: "MEMBERSHIP_NAME",
|
|
ellipsis: true,
|
|
align: 'center',
|
|
fixed: 'left',
|
|
render: (_, record) => {
|
|
return <a onClick={() => {
|
|
setCurrentRow(record)
|
|
setShowDetailDrawer(true)
|
|
handleSetlogSave(`查看${record?.MEMBERSHIP_NAME}【${record?.MEMBERSHIP_ID}】会员信息`)
|
|
}}>
|
|
{record?.MEMBERSHIP_NAME || ""}
|
|
</a>
|
|
},
|
|
fieldProps: {
|
|
placeholder: "请输入用户昵称/联系电话/证件号/车牌号"
|
|
}
|
|
},
|
|
{
|
|
title: "会员类型",
|
|
width: 120,
|
|
dataIndex: "MEMBERSHIP_TYPE",
|
|
ellipsis: true,
|
|
hideInTable: true,
|
|
align: 'center',
|
|
valueType: 'select',
|
|
// request: () => {
|
|
// let MEMBERSHIPTYPEYNList = session.get('MEMBERSHIPTYPEYNList')
|
|
// let newList: any = []
|
|
// if (MEMBERSHIPTYPEYNList && MEMBERSHIPTYPEYNList.length > 0) {
|
|
// MEMBERSHIPTYPEYNList.forEach((item: any) => {
|
|
// if (item.value !== 1) {
|
|
// // && item.value < 9000
|
|
// newList.push(item)
|
|
// }
|
|
// })
|
|
// }
|
|
// return newList
|
|
// }
|
|
valueEnum: {
|
|
...MEMBERSHIPTYPEYNObj,
|
|
},
|
|
initialValue: "1"
|
|
},
|
|
{
|
|
title: "会员类型",
|
|
width: 120,
|
|
dataIndex: "MEMBERSHIP_TYPE",
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
align: 'center',
|
|
valueType: 'select',
|
|
valueEnum: {
|
|
...MEMBERSHIPTYPEYNObj,
|
|
},
|
|
},
|
|
{
|
|
title: "会员编码",
|
|
width: 120,
|
|
dataIndex: "MEMBERSHIP_CODE",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: "会员性别",
|
|
width: 120,
|
|
dataIndex: "MEMBERSHIP_SEX",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
valueType: 'select',
|
|
valueEnum: {
|
|
0: '男',
|
|
1: '女',
|
|
}
|
|
},
|
|
{
|
|
title: "联系电话",
|
|
width: 120,
|
|
dataIndex: "MEMBERSHIP_MOBILEPHONE",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: "会员等级",
|
|
width: 120,
|
|
dataIndex: "MEMBERSHIP_LEVEL",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
valueType: 'select',
|
|
valueEnum: MEMBERSHIPLEVELYNObj,
|
|
initialValue: "1"
|
|
// request: () => {
|
|
// let MEMBERSHIPLEVELYNList = session.get('MEMBERSHIPLEVELYNList')
|
|
// let newList: any = []
|
|
// if (MEMBERSHIPLEVELYNList && MEMBERSHIPLEVELYNList.length > 0) {
|
|
// MEMBERSHIPLEVELYNList.forEach((item: any) => {
|
|
// if (item.value !== '1') {
|
|
// // && item.value < 9000
|
|
// newList.push(item)
|
|
// }
|
|
// })
|
|
// }
|
|
// return newList
|
|
// }
|
|
},
|
|
{
|
|
title: "会员积分",
|
|
width: 120,
|
|
dataIndex: "MEMBERSHIP_POINT",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
sorter: true,
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: "会员成长值",
|
|
width: 120,
|
|
dataIndex: "MEMBERGROWTH_VALUE",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: "账户余额",
|
|
width: 120,
|
|
dataIndex: "ACCOUNT_BALANCE",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
sorter: true,
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: "会员生日",
|
|
width: 150,
|
|
dataIndex: "MEMBERSHIP_BIRTHDAY",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
render: (_, record) => {
|
|
return record?.MEMBERSHIP_BIRTHDAY ? moment(record?.MEMBERSHIP_BIRTHDAY).format('YYYY-MM-DD') : '-'
|
|
}
|
|
},
|
|
{
|
|
title: "证件号码",
|
|
width: 150,
|
|
dataIndex: "CERTIFICATE_NUMBER",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: "会员卡号",
|
|
width: 120,
|
|
dataIndex: "MEMBERSHIP_CARD",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
},
|
|
// {
|
|
// title: "会员头像",
|
|
// width: 120,
|
|
// dataIndex: "MEMBERSHIP_HEADIMAGEURL",
|
|
// hideInSearch: true,
|
|
// ellipsis: true,
|
|
// align: 'center',
|
|
// render: (_, record) => {
|
|
// return record?.MEMBERSHIP_HEADIMAGEURL ? <a onClick={() => {
|
|
// window.open(record?.MEMBERSHIP_HEADIMAGEURL)
|
|
// }}>点击查看</a> : ""
|
|
// }
|
|
// },
|
|
{
|
|
title: "联系地址",
|
|
width: 180,
|
|
dataIndex: "MEMBERSHIP_ADDRESS",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: "车牌号",
|
|
width: 150,
|
|
dataIndex: "PLATE_NUMBER",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
},
|
|
// {
|
|
// title: "付费会员",
|
|
// width: 120,
|
|
// dataIndex: "ISPLUS",
|
|
// hideInSearch: true,
|
|
// ellipsis: true,
|
|
// align: 'center',
|
|
// valueType: 'select',
|
|
// valueEnum: {
|
|
// 0: "否",
|
|
// 1: "是"
|
|
// }
|
|
// },
|
|
{
|
|
title: "付费有效期",
|
|
width: 120,
|
|
dataIndex: "PLUS_EXPIRYDATE",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: "推荐人",
|
|
width: 120,
|
|
dataIndex: "RECOMMEND_NAME",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
},
|
|
// {
|
|
// title: "会员状态",
|
|
// width: 120,
|
|
// dataIndex: "MEMBERSHIP_STATE",
|
|
// ellipsis: true,
|
|
// align: 'center',
|
|
// valueType: 'select',
|
|
// valueEnum: COMPANY_STATEObj,
|
|
// initialValue: "1000"
|
|
// },
|
|
{
|
|
title: "最后活跃时间",
|
|
width: 150,
|
|
// BEHAVIORRECORD_TIME 用于排序 ACTIVE_LASTTIME 用于显示
|
|
dataIndex: "BEHAVIORRECORD_TIME",
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
sorter: true,
|
|
// defaultSortOrder: 'descend',
|
|
render: (_, record) => {
|
|
return record?.ACTIVE_LASTTIME ? moment(record?.ACTIVE_LASTTIME).format('YYYY-MM-DD HH:mm:ss') : '-'
|
|
}
|
|
},
|
|
{
|
|
title: "注册时间",
|
|
width: 150,
|
|
dataIndex: "ADDTIME",
|
|
align: 'center',
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
sorter: true,
|
|
// sorter: (a, b) => {
|
|
// const timeA = new Date(a.ADDTIME).getTime();
|
|
// const timeB = new Date(b.ADDTIME).getTime();
|
|
// return timeB - timeA; // 倒序排序
|
|
// },
|
|
// 默认排序配置
|
|
// defaultSortOrder: 'descend',
|
|
render: (_, record) => {
|
|
return record?.ADDTIME ? moment(record?.ADDTIME).format('YYYY-MM-DD HH:mm:ss') : '-'
|
|
}
|
|
},
|
|
{
|
|
title: "备注",
|
|
width: 120,
|
|
dataIndex: "MEMBERSHIP_DESC",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div>
|
|
|
|
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
|
<LeftSelectMemberLevel 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}
|
|
bordered
|
|
expandable={{
|
|
expandRowByClick: true
|
|
}}
|
|
scroll={{ x: "100%", y: "calc(100vh - 410px)" }}
|
|
headerTitle={<PageTitleBox props={props} />} // 列表表头
|
|
search={{ span: 6 }}
|
|
request={async (params, sorter) => {
|
|
if (!selectedId) {
|
|
return
|
|
}
|
|
const sortstr = Object.keys(sorter).map(n => {
|
|
const value = sorter[n]
|
|
return value ? `${n} ${value.replace('end', '')}` : ''
|
|
})
|
|
|
|
console.log('selectedIdselectedIdselectedId', selectedId);
|
|
const req: any = {
|
|
SearchParameter: {
|
|
OWNERUNIT_ID: 911,
|
|
MEMBERSHIP_LEVELS: selectedId,
|
|
MEMBERSHIP_STATE: params?.MEMBERSHIP_STATE,
|
|
},
|
|
keyWord: {
|
|
Key: "MEMBERSHIP_NAME,MEMBERSHIP_MOBILEPHONE,CERTIFICATE_NUMBER,MEMBERSHIP_CARD,MEMBERSHIP_ADDRESS,PLATE_NUMBER",
|
|
value: params?.MEMBERSHIP_NAME || ""
|
|
},
|
|
PageIndex: params.current || 1,
|
|
PageSize: params?.pageSize,
|
|
sortstr: sortstr.length ? sortstr.toString() === "MEMBERGROWTH_VALUE asc" || sortstr.toString() === "MEMBERGROWTH_VALUE desc" ? "" : sortstr.toString() : "",
|
|
}
|
|
|
|
handleSetlogSave(`查看了会员账户管理列表`)
|
|
|
|
const data = await handleGetMEMBERSHIPList(req)
|
|
if (data.List && data.List.length > 0) {
|
|
return { data: data.List, success: true, total: data.TotalCount }
|
|
}
|
|
return { data: [], success: true }
|
|
}}
|
|
toolbar={{
|
|
actions: [
|
|
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.currentUser
|
|
}))(MembershipLevelDistribution); |