feat: 对接优惠券发券相关

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

@@ -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

@@ -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

@@ -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>