chore: 完善发券相关

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-07-28 18:07:52
+ * @LastEditTime: 2021-08-02 16:48:12
  * @Description: 发券明细
  */
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   Space,
   Button,
@@ -47,37 +47,69 @@ export type SuitableMemberType = {
   /**
    * 会员名称
    */
-  name: string,
+  name?: string,
   /**
    * 适用用户
    */
-  memberAgeTypeName: string,
+  memberAgeTypeName?: string,
   /**
    * 会员类型
    */
-  memberTypeName: string,
+  memberTypeName?: string,
   /**
-   * 会员等级
+   * 等级标签
    */
-  level: string,
+  levelTag?: string,
   /**
    * 会员角色
    */
-  roleName: string,
+  roleName?: string,
   /**
    * 成为会员时间开始
    */
-  becomeTimeStart: string,
+  becomeTime?: string,
+  /**
+   * 是否显示删除按钮
+   */
+  showDelete?: boolean,
+}
+
+type MemberListItemType = {
+  /**
+   * 会员id
+   */
+  memberId: number,
+  /**
+   * 角色id
+   */
+  roleId: number,
 }
 
 interface IProps extends Omit<MellowCardProps, 'onChange'> {
   /**
+   * 适用会员等级类型
+   */
+  suitableMemberLevelTypes: number[],
+  /**
+   * 已发券用户
+   */
+  memberList: {
+    /**
+     * 会员id
+     */
+    memberId: number,
+    /**
+     * 角色Id
+     */
+    roleId: number,
+  }[],
+  /**
    * 点击确认触发事件，参数待定
    */
-  onChange?: (value: SuitableMemberType[]) => void,
+  onChange?: (value: ChangeValueItem[]) => void,
 }
 
-type ExtraFetchType = FetchParamsType & {
+export type ExtraFetchType = {
   /**
    * 会员id
    */
@@ -104,27 +136,72 @@ type ExtraFetchType = FetchParamsType & {
   /**
    * 成为会员时间开始
    */
-  becomeTimeStart: string,
+  becomeTime: string,
   /**
    * 成为会员时间结束
    */
   becomeTimeEnd: string,
+  /**
+   * 适用会员等级类型
+   */
+  suitableMemberLevelTypes: number[],
 }
 
+export type ChangeValueItem = Omit<SuitableMemberType, 'onlyId'>
+
 const DeliverCoupon: React.FC<IProps> = (props) => {
   const {
+    memberList,
+    suitableMemberLevelTypes,
     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 [selectedMember, setSelectedMember] = useState<SuitableMemberType[]>([]);
+  const [suitableMemberList, setSuitableMemberList] = useState<SuitableMemberType[]>(defaultSuitableMemberList);
+  const [listLoading, setListLoading] = useState(false);
 
   const [rowSelection, RowCtl] = useRowSelectionTable({ customKey: 'onlyId', type: 'checkbox' });
 
-  const fetchSuitableList = async (params: ExtraFetchType) => {
-    const payload = { ...params };
-    const res = await PublicApi.postMemberManageMarketingSuitablePage(payload, { ctlType: 'none' });
+  // 获取已选择的会员类型列表
+  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,
+      })));
+    }
+  };
+
+  useEffect(() => {
+    fetchSuitableMemberIncludeList();
+  }, [memberList]);
+
+  // 获取未选择的会员类型列表
+  const fetchSuitableMemberExcludeList = async (params: FetchParamsType & ExtraFetchType) => {
+    const excludeMemberList = suitableMemberList.map((item) => ({
+      memberId: item.memberId,
+      roleId: item.roleId,
+    }));
+    const res = await PublicApi.postMemberManageMarketingSuitablePage({
+      ...params,
+      excludeMemberList,
+      suitableMemberLevelTypes: suitableMemberLevelTypes || [],
+    }, {
+      ctlType: 'none',
+    });
     if (res.code === 1000) {
       const { data, ...rest } = res.data;
       const newData = data.map((item) => ({
@@ -136,7 +213,7 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
     return { data: [], totalCount: 0 };
   };
 
-  const columns: ColumnType<any>[] = [
+  const columns: ColumnType<SuitableMemberType>[] = [
     {
       title: 'ID',
       dataIndex: 'memberId',
@@ -169,7 +246,7 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
     },
   ];
 
-  const triggerChange = (value: SuitableMemberType[]) => {
+  const triggerChange = (value: ChangeValueItem[]) => {
     if (onChange) {
       onChange(value);
     }
@@ -191,8 +268,11 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
       message.warning('请选择会员');
       return;
     }
-    setSelectedMember(RowCtl.selectRow);
-    triggerChange(RowCtl.selectRow);
+    const newData = [...suitableMemberList];
+    newData.concat(RowCtl.selectRow.map((item) => ({ ...item, showDelete: true })));
+    setSuitableMemberList(newData);
+    const filtered = newData.map(({ onlyId, showDelete, ...rest }) => ({ ...rest }));
+    triggerChange(filtered);
     handleVisibleDrawer(false);
   };
 
@@ -206,9 +286,9 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
       icon: <ExclamationCircleOutlined />,
       content: `确定需要删除选中的会员吗？`,
       onOk() {
-        const filtered = selectedMember.filter((item) => !keys.includes(item.onlyId));
-        setSelectedMember(filtered);
-        triggerChange(filtered);
+        const filtered = suitableMemberList.filter((item) => !keys.includes(item.onlyId));
+        setSuitableMemberList(filtered);
+        triggerChange(filtered.map(({ onlyId, showDelete, ...rest }) => ({ ...rest })));
         setSelectedRowKeys([]);
       },
     });
@@ -217,9 +297,11 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
   const outerColumns = columns.concat({
     title: '操作',
     dataIndex: 'option',
+    align: 'center',
     render: (_, record) => (
       <Button 
-        type="link" 
+        type="link"
+        disabled={!record.showDelete}
         onClick={() => handleBatchDelete([record.onlyId])}
       >
         删除
@@ -275,7 +357,8 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
       <PolymericTable
         rowKey="onlyId"
         columns={outerColumns}
-        dataSource={selectedMember}
+        dataSource={suitableMemberList}
+        loading={listLoading}
         pagination={null}
         rowSelection={outerRowSelection}
         searchFormProps={{
@@ -296,6 +379,7 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
               fetchSelectOptions,
             );
           },
+          onSubmit: (values: ExtraFetchType) => fetchSuitableMemberIncludeList(values),
         }}
       />
       
@@ -326,9 +410,10 @@ const DeliverCoupon: React.FC<IProps> = (props) => {
           rowKey="onlyId"
           columns={columns}
           rowSelection={rowSelection}
-          fetchDataSource={fetchSuitableList}
+          fetchDataSource={fetchSuitableMemberExcludeList}
           defaultPageSize={15}
           searchFormProps={{
+            actions: drawerFormActions,
             schema: drawerSchema,
             components: {
               NumberPicker,

src/pages/transaction/marketingAbility/merchantCoupon/merchantCouponAnalysis/deliver/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-28 17:51:33
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-07-28 17:33:55
+ * @LastEditTime: 2021-08-02 16:49:28
  * @Description: 商家优惠劵发劵
  */
 import React, { useState, useEffect, useRef } from 'react';
@@ -19,28 +19,26 @@ import {
 import { history } from 'umi';
 import { usePageStatus } from '@/hooks/usePageStatus';
 import { PublicApi } from '@/services/api';
-import { GetMarketingCouponWaiteExecuteGetResponse } from '@/services/MarketingApi';
-import { findLastIndexFlowState } from '@/utils';
+import { GetMarketingCouponWaiteExecuteGrantGetResponse } from '@/services/MarketingApi';
 import AnchorPage from '@/layouts/AnchorPage';
-import AuditProcess from '@/components/AuditProcess';
 import BacisInfo from '../../components/BacisInfo';
 import CouponRules from '../../components/CouponRules';
-import DeliverCoupon, { SuitableMemberType } from '../../components/DeliverCoupon';
+import DeliverCoupon, { SuitableMemberType, ChangeValueItem } from '../../components/DeliverCoupon';
 
 const MerchantCouponAnalysisDeliver: React.FC<{}> = () => {
   const { id } = usePageStatus();
-  const [couponInfo, setCouponInfo] = useState<GetMarketingCouponWaiteExecuteGetResponse>(null);
+  const [couponInfo, setCouponInfo] = useState<GetMarketingCouponWaiteExecuteGrantGetResponse>(null);
   const [infoLoading, setInfoLoading] = useState(false);
   const [submitLoading, setSubmitLoading] = useState(false);
 
-  const deliverRef = useRef<SuitableMemberType[]>([]);
+  const deliverRef = useRef<ChangeValueItem[]>([]);
 
   const getBasicInfo = () => {
     if (!id) {
       return;
     }
     setInfoLoading(true);
-    PublicApi.getMarketingCouponWaiteExecuteGet({
+    PublicApi.getMarketingCouponWaiteExecuteGrantGet({
       id,
     }).then(res => {
       if (res.code === 1000) {
@@ -64,7 +62,7 @@ const MerchantCouponAnalysisDeliver: React.FC<{}> = () => {
       return;
     }
     if (!deliverRef.current.length) {
-      message.warning('未选择任何会员');
+      message.warning('没有可提交的发券数据');
       return;
     }
     setSubmitLoading(true);
@@ -85,10 +83,6 @@ const MerchantCouponAnalysisDeliver: React.FC<{}> = () => {
 
   const anchorsArr = [
     {
-      key: 'verifySteps',
-      name: '流转进度',
-    },
-    {
       key: 'basicInfo',
       name: '基本信息',
     },
@@ -119,20 +113,6 @@ const MerchantCouponAnalysisDeliver: React.FC<{}> = () => {
         )}
       >
         <Row gutter={[16, 16]}>
-          {/* 流转记录 */}
-          <Col span={24}>
-            <AuditProcess
-              innerVerifySteps={couponInfo?.taskSteps.map((item) => ({
-                step: item.step,
-                stepName: item.taskName,
-                roleName: item.roleName,
-                status: item.isExecute ? 'finish' : 'wait',
-              }))}
-              innerVerifyCurrent={findLastIndexFlowState(couponInfo?.taskSteps)}
-              id="verifySteps"
-            />
-          </Col>
-          
           {/* 基本信息 */}
           <Col span={24}>
             <BacisInfo
@@ -167,9 +147,11 @@ const MerchantCouponAnalysisDeliver: React.FC<{}> = () => {
             />
           </Col>
           
-          {/* 优惠券规则 */}
+          {/* 发券明细 */}
           <Col span={24}>
             <DeliverCoupon
+              memberList={couponInfo?.memberList}
+              suitableMemberLevelTypes={couponInfo?.suitableMemberLevelTypes}
               onChange={handleDeliverChange}
               id="deliverCoupon"
             />

src/pages/transaction/marketingAbility/merchantCoupon/merchantCouponAnalysis/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-22 11:10:57
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-08-02 10:41:37
+ * @LastEditTime: 2021-08-02 16:49:39
  * @Description: 商家优惠劵执行
  */
 import React, { useRef } from 'react';