feat: 完成优惠券发券逻辑更改

src/pages/transaction/marketingAbility/merchantCoupon/components/DeliverCoupon/index.tsx

@@ -2,10 +2,10 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-29 09:36:25
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-11-15 16:44:32
+ * @LastEditTime: 2021-11-15 17:11:36
  * @Description: 发券明细
  */
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useMemo } from 'react';
 import {
   Space,
   Button,
@@ -28,7 +28,6 @@ import { querySchema, drawerSchema } from './schema';
 
 const { confirm } = Modal;
 
-const outerFormActions = createFormActions();
 const drawerFormActions = createFormActions();
 
 export type SuitableMemberType = {
@@ -156,42 +155,21 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
     onChange,
     ...rest
   } = props;
-  const defaultSuitableMemberList = memberList ? memberList.map((item) => ({ onlyId: `${item.memberId}+${item.roleId}`, ...item })) : [];
   const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
   const [visibleDrawer, setVisibleDrawer] = useState(false);
-  const [suitableMemberList, setSuitableMemberList] = useState<SuitableMemberType[]>(defaultSuitableMemberList);
-  const [listLoading, setListLoading] = useState(false);
+  const [suitableMemberList, setSuitableMemberList] = useState<SuitableMemberType[]>([]);
+  const [queryValue, setQueryValue] = useState<ExtraFetchType | null>(null);
 
   const [rowSelection, RowCtl] = useRowSelectionTable({ customKey: 'onlyId', type: 'checkbox' });
 
-  // 获取已选择的会员类型列表
-  const fetchSuitableMemberIncludeList = async (params?: Omit<ExtraFetchType, 'suitableMemberLevelTypes'> & { memberList?: MemberListItemType[] }) => {
-    if (!memberList) {
-      return;
-    }
-    setListLoading(true);
-    const res = await PublicApi.postMemberManageMarketingSuitableList({
-      ...(params || {}),
-      memberList: memberList,
-    }, {
-      ctlType: 'none',
-    });
-    setListLoading(false);
-    if (res.code === 1000) {
-      setSuitableMemberList(res.data?.map((item) => ({
-        onlyId: `${item.memberId}+${item.roleId}`,
-        ...item,
-      })));
-    }
+  // 根据会员名称过滤会员列表
+  const handleFilterMemberListByName = (value: ExtraFetchType) => {
+    setQueryValue(value);
   };
 
-  useEffect(() => {
-    fetchSuitableMemberIncludeList();
-  }, [memberList]);
-
   // 获取未选择的会员类型列表
   const fetchSuitableMemberExcludeList = async (params: FetchParamsType & ExtraFetchType) => {
-    const excludeMemberList = suitableMemberList.map((item) => ({
+    const excludeMemberList = memberList.map((item) => ({
       memberId: item.memberId,
       roleId: item.roleId,
     }));
@@ -351,6 +329,10 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
       </Button>
     </Space>
   );
+
+  const filtered = useMemo(() => (
+    queryValue && queryValue?.name ? suitableMemberList.filter((item) => item.name.includes(queryValue.name)) : suitableMemberList
+  ), [queryValue, suitableMemberList]);
   
   return (
     <MellowCard
@@ -360,8 +342,7 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
       <PolymericTable
         rowKey="onlyId"
         columns={outerColumns}
-        dataSource={suitableMemberList}
-        loading={listLoading}
+        dataSource={filtered}
         pagination={null}
         rowSelection={outerRowSelection}
         searchFormProps={{
@@ -370,8 +351,13 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
             ControllerBtns,
             RangePicker: DatePicker.RangePicker,
           },
-          effects: ($, actions) => {},
-          onSubmit: (values: ExtraFetchType) => fetchSuitableMemberIncludeList(values),
+          effects: ($, actions) => {
+            // 这里不需要单独去监听 reset事件，Search内部点击重置按钮也会触发 submit 事件
+            // onFormReset$().subscribe(() => {
+            //   console.log('重置了')
+            // });
+          },
+          onSubmit: (values: ExtraFetchType) => handleFilterMemberListByName(values),
         }}
       />