Skip to content

J
jinfa-platform
Commit 01093727 authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

feat: 对接优惠券发券相关

parent 1c8c5039
Hide whitespace changes
Inline Side-by-side
Showing with 298 additions and 126 deletions
src/pages/transaction/marketingAbility/merchantCoupon/components/DeliverCoupon/index.tsx
View file @ 01093727
......@@ -2,103 +2,144 @@
* @Author: XieZhiXiong
* @Date: 2021-06-29 09:36:25
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-06-29 14:10:22
* @LastEditTime: 2021-07-28 18:07:52
* @Description: 发券明细
*/
import React, { useState, useRef } from 'react';
import React, { useState } from 'react';
import {
Space,
Button,
Drawer,
Modal,
message,
} from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { StandardTable } from 'god';
import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { ColumnType } from 'antd/lib/table/interface';
import { createFormActions } from '@formily/antd';
import { DatePicker } from '@formily/antd-components';
import { DatePicker, NumberPicker } from '@formily/antd-components';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { PublicApi } from '@/services/api';
import { useRowSelectionTable } from '@/hooks/useRowSelectionTable';
import MellowCard, { MellowCardProps } from '@/components/MellowCard';
import NiceForm from '@/components/NiceForm';
import PolymericTable, { FetchParamsType } from '@/components/PolymericTable';
import { querySchema, drawerSchema } from './schema';
const { confirm } = Modal;
const outerFormActions = createFormActions();
const drawerFormActions = createFormActions();
const fetchListData = async (params: any) => {
const payload = { ...params };
const res = await PublicApi.getMemberProcessRuleRolePage(payload);
if (res.code === 1000) {
return res.data;
}
return [];
};
export type ListItemDataType = {
export type SuitableMemberType = {
/**
* 会员id
*/
memberId: number,
/**
* 会员角色id
*/
roleId: number,
/**
* 唯一的id
*/
onlyId: string,
/**
* 数据id
* 会员名称
*/
productId: number,
name: string,
/**
* 商品图片
* 适用用户
*/
productImg: string,
memberAgeTypeName: string,
/**
* 商品图片
* 会员类型
*/
productName: string,
memberTypeName: string,
/**
* 商品品类
* 会员等级
*/
category: string,
level: string,
/**
* 商品品牌
* 会员角色
*/
brand: string,
roleName: string,
/**
* 商品单位
* 成为会员时间开始
*/
unit: string,
becomeTimeStart: string,
}
interface IProps extends Omit<MellowCardProps, 'onChange'> {
/**
* 商品单价
* 点击确认触发事件，参数待定
*/
price: number,
onChange?: (value: SuitableMemberType[]) => void,
}
interface IProps extends MellowCardProps {
type ExtraFetchType = FetchParamsType & {
/**
* 数据
* 会员id
*/
dataSource?: ListItemDataType[];
memberId: number,
/**
* 点击确认触发事件，参数待定
* 会员名称
*/
onConfirm?: (value: any) => void,
};
name: string,
/**
* 会员类型枚举
*/
memberTypeEnum: number,
/**
* 会员等级
*/
level: number,
/**
* 会员id和角色id数组，需要排除的数据
*/
excludeMemberList: {
memberId: number,
roleId: number,
}[],
/**
* 成为会员时间开始
*/
becomeTimeStart: string,
/**
* 成为会员时间结束
*/
becomeTimeEnd: string,
}
const DeliverCoupon: React.FC<IProps> = (props) => {
const {
dataSource,
onChange,
...rest
} = props;
const ref = useRef<any>({});
const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
const [visibleDrawer, setVisibleDrawer] = useState(false);
const [selectedMember, setSelectedMember] = useState<SuitableMemberType[]>([]);
const [rowSelection, RowCtl] = useRowSelectionTable({ customKey: 'roleId', type: 'checkbox' });
const [rowSelection, RowCtl] = useRowSelectionTable({ customKey: 'onlyId', type: 'checkbox' });
const fetchData = async (params: any) => {
let res = await PublicApi.getMemberAbilityMaintenancePage(params);
return res.data;
const fetchSuitableList = async (params: ExtraFetchType) => {
const payload = { ...params };
const res = await PublicApi.postMemberManageMarketingSuitablePage(payload, { ctlType: 'none' });
if (res.code === 1000) {
const { data, ...rest } = res.data;
const newData = data.map((item) => ({
onlyId: `${item.memberId}+${item.roleId}`,
...item,
}));
return {...res.data, data: newData};
}
return { data: [], totalCount: 0 };
};
const columns: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'id',
dataIndex: 'memberId',
align: 'center',
},
{
......@@ -108,28 +149,34 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
},
{
title: '适用用户',
dataIndex: 'memberTypeName',
dataIndex: 'memberAgeTypeName',
},
{
title: '会员类型',
dataIndex: 'registerTime',
dataIndex: 'memberTypeName',
},
{
title: '会员角色',
dataIndex: 'registerTime',
dataIndex: 'roleName',
},
{
title: '会员等级',
dataIndex: 'registerTime',
dataIndex: 'levelTag',
},
{
title: '成为会员时间',
dataIndex: 'registerTime',
dataIndex: 'becomeTime',
},
];
const triggerChange = (value: SuitableMemberType[]) => {
if (onChange) {
onChange(value);
}
};
const outerRowSelection = {
onChange: (keys: number[]) => {
onChange: (keys: string[]) => {
setSelectedRowKeys(keys);
},
selectedRowKeys: selectedRowKeys,
......@@ -141,11 +188,68 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
const handleConfirm = () => {
if (!RowCtl.selectRow.length) {
message.warning('请选择会员角色');
message.warning('请选择会员');
return;
}
setSelectedMember(RowCtl.selectRow);
triggerChange(RowCtl.selectRow);
handleVisibleDrawer(false);
};
const handleBatchDelete = (keys: string[]) => {
if (!keys.length) {
message.warning('请勾选需要删除的会员');
return;
}
confirm({
title: '提示',
icon: <ExclamationCircleOutlined />,
content: `确定需要删除选中的会员吗？`,
onOk() {
const filtered = selectedMember.filter((item) => !keys.includes(item.onlyId));
setSelectedMember(filtered);
triggerChange(filtered);
setSelectedRowKeys([]);
},
});
};
const outerColumns = columns.concat({
title: '操作',
dataIndex: 'option',
render: (_, record) => (
<Button
type="link"
onClick={() => handleBatchDelete([record.onlyId])}
>
删除
</Button>
),
});
// 初始化高级筛选选项
const fetchSelectOptions = async () => {
const res = await PublicApi.postMemberManageMarketingSuitablePageItems(null, {
ctlType: 'none',
});
if (res.code === 1000) {
const { data = {} }: any = res;
const {
memberTypes = [],
levels = [],
suitableMemberTypes = [],
} = data;
return {
memberType: memberTypes.map(item => ({ label: item.memberTypeName, value: item.memberTypeId })),
level: levels.map(item => ({ label: item.levelTag, value: item.level })),
suitableMemberType: suitableMemberTypes.map(item => ({ label: item.name, value: item.value })),
};
}
return {};
};
const ControllerBtns = () => (
<Space size={16}>
<Button
......@@ -156,7 +260,7 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
选择会员
</Button>
<Button
onClick={() => {}}
onClick={() => handleBatchDelete(selectedRowKeys)}
>
批量删除
</Button>
......@@ -168,33 +272,31 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
title="发券明细"
{...rest}
>
<StandardTable
tableProps={{
rowKey: 'validateId',
}}
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
<PolymericTable
rowKey="onlyId"
columns={outerColumns}
dataSource={selectedMember}
pagination={null}
rowSelection={outerRowSelection}
controlRender={
<NiceForm
actions={outerFormActions}
components={{
ControllerBtns,
RangePicker: DatePicker.RangePicker,
}}
onSubmit={values => ref.current.reload(values)}
effects={($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'name',
FORM_FILTER_PATH,
);
}}
schema={querySchema}
/>
}
searchFormProps={{
schema: querySchema,
components: {
ControllerBtns,
RangePicker: DatePicker.RangePicker,
},
effects: ($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'name',
FORM_FILTER_PATH,
);
useAsyncInitSelect(
['memberType', 'level', 'suitableMemberType'],
fetchSelectOptions,
);
},
}}
/>
<Drawer
......@@ -216,30 +318,35 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
</Button>
</div>
}
bodyStyle={{
paddingBottom: 0,
}}
>
<StandardTable
tableProps={{
rowKey: 'roleId',
}}
<PolymericTable
rowKey="onlyId"
columns={columns}
currentRef={ref}
rowSelection={rowSelection}
fetchTableData={(params: any) => fetchListData(params)}
controlRender={
<NiceForm
actions={drawerFormActions}
onSubmit={values => ref.current.reload(values)}
effects={($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'name',
FORM_FILTER_PATH,
);
}}
schema={drawerSchema}
/>
}
fetchDataSource={fetchSuitableList}
defaultPageSize={15}
searchFormProps={{
schema: drawerSchema,
components: {
NumberPicker,
},
effects: ($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'name',
FORM_FILTER_PATH,
);
useAsyncInitSelect(
['memberType', 'level', 'suitableMemberType'],
fetchSelectOptions,
);
},
}}
full
/>
</Drawer>
</MellowCard>
......
src/pages/transaction/marketingAbility/merchantCoupon/components/DeliverCoupon/schema.tsx
View file @ 01093727
......@@ -2,7 +2,7 @@
* @Author: XieZhiXiong
* @Date: 2021-06-29 09:36:35
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-06-29 10:18:11
* @LastEditTime: 2021-07-28 17:49:07
* @Description:
*/
import { ISchema } from '@formily/antd';
......@@ -31,7 +31,7 @@ export const querySchema: ISchema = {
'x-component': 'Search',
'x-component-props': {
placeholder: '搜索',
tip: '输入 优惠劵名称 进行搜索',
tip: '输入 会员名称 进行搜索',
},
},
},
......@@ -45,33 +45,48 @@ export const querySchema: ISchema = {
},
},
properties: {
id: {
memberId: {
type: 'string',
'x-component-props': {
placeholder: '优惠劵ID',
placeholder: '会员ID',
allowClear: true,
style: {
width: 160,
},
},
},
'[startTime2, endTime2]': {
type: 'object',
'x-component': 'RangePicker',
memberType: {
type: 'string',
default: undefined,
enum: [],
'x-component-props': {
placeholder: ['劵有效期起始时间', '劵有效期截止时间'],
showTime: true,
placeholder: '会员类型(所有)',
allowClear: true,
},
},
type: {
level: {
type: 'string',
default: undefined,
enum: [],
'x-component-props': {
placeholder: '优惠劵类型(所有)',
placeholder: '会员等级(所有)',
allowClear: true,
},
},
suitableMemberType: {
type: 'string',
default: undefined,
enum: [],
'x-component-props': {
placeholder: '适用用户(所有)',
allowClear: true,
},
},
'[startTime2, endTime2]': {
type: 'string',
'x-component': 'RangePicker',
'x-component-props': {
placeholder: ['成为会员起始时间', '成为会员截止时间'],
showTime: true,
},
},
submit: {
'x-component': 'Submit',
'x-mega-props': {
......@@ -105,17 +120,19 @@ export const drawerSchema: ISchema = {
'x-component': 'Mega-Layout',
'x-component-props': {
grid: true,
full: true,
autoRow: true,
columns: 4,
},
properties: {
id: {
memberId: {
type: 'string',
'x-component': 'NumberPicker',
'x-component-props': {
placeholder: '会员ID',
allowClear: true,
},
},
memberType: {
memberTypeEnum: {
type: 'string',
default: undefined,
enum: [],
......@@ -124,7 +141,7 @@ export const drawerSchema: ISchema = {
allowClear: true,
},
},
memberLevel: {
level: {
type: 'string',
default: undefined,
enum: [],
......@@ -133,7 +150,7 @@ export const drawerSchema: ISchema = {
allowClear: true,
},
},
applicable: {
suitableMemberType: {
type: 'string',
default: undefined,
enum: [],
......@@ -142,7 +159,7 @@ export const drawerSchema: ISchema = {
allowClear: true,
},
},
'[startTime2, endTime2]': {
'[becomeTimeStart, becomeTimeEnd]': {
type: 'string',
'x-component': 'RangePicker',
'x-component-props': {
......
src/pages/transaction/marketingAbility/merchantCoupon/merchantCouponAnalysis/deliver/index.tsx
View file @ 01093727
......@@ -2,15 +2,21 @@
* @Author: XieZhiXiong
* @Date: 2021-06-28 17:51:33
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-07-06 14:07:32
* @Description:
* @LastEditTime: 2021-07-28 17:33:55
* @Description: 商家优惠劵发劵
*/
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import {
Row,
Col,
Spin,
Button,
message,
} from 'antd';
import {
SendOutlined,
} from '@ant-design/icons';
import { history } from 'umi';
import { usePageStatus } from '@/hooks/usePageStatus';
import { PublicApi } from '@/services/api';
import { GetMarketingCouponWaiteExecuteGetResponse } from '@/services/MarketingApi';
......@@ -19,18 +25,21 @@ import AnchorPage from '@/layouts/AnchorPage';
import AuditProcess from '@/components/AuditProcess';
import BacisInfo from '../../components/BacisInfo';
import CouponRules from '../../components/CouponRules';
import DeliverCoupon from '../../components/DeliverCoupon';
import DeliverCoupon, { SuitableMemberType } from '../../components/DeliverCoupon';
const MerchantCouponAnalysisDeliver: React.FC<{}> = () => {
const { id } = usePageStatus();
const [couponInfo, setCouponInfo] = useState<GetMarketingCouponWaiteExecuteGetResponse>(null);
const [infoLoading, setInfoLoaading] = useState(false);
const [infoLoading, setInfoLoading] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false);
const deliverRef = useRef<SuitableMemberType[]>([]);
const getBasicInfo = () => {
if (!id) {
return;
}
setInfoLoaading(true);
setInfoLoading(true);
PublicApi.getMarketingCouponWaiteExecuteGet({
id,
}).then(res => {
......@@ -38,7 +47,7 @@ const MerchantCouponAnalysisDeliver: React.FC<{}> = () => {
setCouponInfo(res.data);
}
}).finally(() => {
setInfoLoaading(false);
setInfoLoading(false);
});
};
......@@ -46,6 +55,34 @@ const MerchantCouponAnalysisDeliver: React.FC<{}> = () => {
getBasicInfo();
}, []);
const handleDeliverChange = (value: SuitableMemberType[]) => {
deliverRef.current = value;
};
const handleSubmit = () => {
if (!id) {
return;
}
if (!deliverRef.current.length) {
message.warning('未选择任何会员');
return;
}
setSubmitLoading(true);
PublicApi.postMarketingCouponWaiteExecuteGrant({
id: +id,
grantMembers: deliverRef.current.map((item) => ({ subMemberId: item.memberId, subRoleId: item.roleId })),
}).then(res => {
if (res.code !== 1000) {
return;
}
setTimeout(() => {
history.goBack();
}, 800);
}).finally(() => {
setSubmitLoading(false);
});
};
const anchorsArr = [
{
key: 'verifySteps',
......@@ -70,6 +107,16 @@ const MerchantCouponAnalysisDeliver: React.FC<{}> = () => {
<AnchorPage
title={couponInfo?.name}
anchors={anchorsArr}
extra={(
<Button
type="primary"
icon={<SendOutlined style={{ transform: `rotate(-45deg)`, position: 'relative', top: -2 }} />}
onClick={handleSubmit}
loading={submitLoading}
>
提交
</Button>
)}
>
<Row gutter={[16, 16]}>
{/* 流转记录 */}
......@@ -121,6 +168,7 @@ const MerchantCouponAnalysisDeliver: React.FC<{}> = () => {
{/* 优惠券规则 */}
<Col span={24}>
<DeliverCoupon
onChange={handleDeliverChange}
id="deliverCoupon"
/>
</Col>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment