feat: 添加 发券明细 组件

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

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-29 09:36:25
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-29 10:19:56
+ * @Description: 发券明细
+ */
+import React, { useState, useRef } from 'react';
+import {
+  Space,
+  Button,
+  Drawer,
+  message,
+} from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { StandardTable } from 'god';
+import { ColumnType } from 'antd/lib/table/interface';
+import { createFormActions } from '@formily/antd';
+import { DatePicker } from '@formily/antd-components';
+import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
+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 { querySchema, drawerSchema } from './schema';
+
+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 = {
+  /**
+   * 数据id
+   */
+  productId: number,
+  /**
+   * 商品图片
+   */
+  productImg: string,
+  /**
+   * 商品图片
+   */
+  productName: string,
+  /**
+   * 商品品类
+   */
+  category: string,
+  /**
+   * 商品品牌
+   */
+  brand: string,
+  /**
+   * 商品单位
+   */
+  unit: string,
+  /**
+   * 商品单价
+   */
+  price: number,
+}
+
+interface IProps extends MellowCardProps {
+  /**
+   * 数据
+   */
+  dataSource?: ListItemDataType[];
+};
+
+const DeliverCoupon: React.FC<IProps> = (props) => {
+  const {
+    dataSource,
+    ...rest
+  } = props;
+  const ref = useRef<any>({});
+  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
+  const [visibleDrawer, setVisibleDrawer] = useState(false);
+
+  const [rowSelection, RowCtl] = useRowSelectionTable({ customKey: 'roleId', type: 'checkbox' });
+
+  const fetchData = async (params: any) => {
+    let res = await PublicApi.getMemberAbilityMaintenancePage(params);
+    return res.data;
+  };
+
+  const columns: ColumnType<any>[] = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      align: 'center',
+    },
+    {
+      title: '会员名称',
+      dataIndex: 'name',
+      align: 'center',
+    },
+    {
+      title: '适用用户',
+      dataIndex: 'memberTypeName',
+    },
+    {
+      title: '会员类型',
+      dataIndex: 'registerTime',
+    },
+    {
+      title: '会员角色',
+      dataIndex: 'registerTime',
+    },
+    {
+      title: '会员等级',
+      dataIndex: 'registerTime',
+    },
+    {
+      title: '成为会员时间',
+      dataIndex: 'registerTime',
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      align: 'center',
+      render: (_, record) => (
+        <>
+          <Button
+            type="link"
+            onClick={() => {}}
+          >
+            删除
+          </Button>
+        </>
+      ),
+    },
+  ];
+
+  const outerRowSelection = {
+    onChange: (keys: number[]) => {
+      setSelectedRowKeys(keys);
+    },
+    selectedRowKeys: selectedRowKeys,
+  };
+
+  const handleVisibleDrawer = (flag: boolean) => {
+    setVisibleDrawer(!!flag);
+  };
+
+  const handleConfirm = () => {
+    if (!RowCtl.selectRow.length) {
+      message.warning('请选择会员角色');
+    }
+    handleVisibleDrawer(false);
+  };
+
+  const ControllerBtns = () => (
+    <Space size={16}>
+      <Button
+        type="primary"
+        onClick={() => handleVisibleDrawer(true)}
+      >
+        <PlusOutlined />
+        选择会员
+      </Button>
+      <Button
+        onClick={() => {}}
+      >
+        批量删除
+      </Button>
+    </Space>
+  );
+  
+  return (
+    <MellowCard
+      title="发券明细"
+      {...rest}
+    >
+      <StandardTable
+        tableProps={{
+          rowKey: 'validateId',
+        }}
+        columns={columns}
+        currentRef={ref}
+        fetchTableData={(params: any) => fetchData(params)}
+        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}
+          />
+        }
+      />
+      
+      <Drawer
+        title="选择会员"
+        width={1000}
+        onClose={() => handleVisibleDrawer(false)}
+        visible={visibleDrawer}
+        footer={
+          <div
+            style={{
+              textAlign: 'right',
+            }}
+          >
+            <Button onClick={() => handleVisibleDrawer(false)} style={{ marginRight: 16 }}>
+              取 消
+            </Button>
+            <Button onClick={handleConfirm} type="primary">
+              确 定
+            </Button>
+          </div>
+        }
+      >
+        <StandardTable
+          tableProps={{
+            rowKey: 'roleId',
+          }}
+          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}
+            />
+          }
+        />
+      </Drawer>
+    </MellowCard>
+  );
+};
+
+export default DeliverCoupon;
\ No newline at end of file

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

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-29 09:36:35
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-29 10:18:11
+ * @Description: 
+ */
+import { ISchema } from '@formily/antd';
+import { FORM_FILTER_PATH } from '@/formSchema/const';
+
+export const querySchema: ISchema = {
+  type: 'object',
+  properties: {
+    megaLayout: {
+      type: 'object',
+      'x-component': 'mega-layout',
+      properties: {
+        topLayout: {
+          type: 'object',
+          'x-component': 'Mega-Layout',
+          'x-component-props': {
+            grid: true,
+          },
+          properties: {
+            ctl: {
+              type: 'object',
+              'x-component': 'ControllerBtns',
+            },
+            name: {
+              type: 'string',
+              'x-component': 'Search',
+              'x-component-props': {
+                placeholder: '搜索',
+                tip: '输入 优惠劵名称 进行搜索',
+              },
+            },
+          },
+        },
+        [FORM_FILTER_PATH]: {
+          type: 'object',
+          'x-component': 'flex-layout',
+          'x-component-props': {
+            colStyle: {
+              marginLeft: 20,
+            },
+          },
+          properties: {
+            id: {
+              type: 'string',
+              'x-component-props': {
+                placeholder: '优惠劵ID',
+                allowClear: true, 
+                style: {
+                  width: 160,
+                },
+              },
+            },
+            '[startTime2, endTime2]': {
+              type: 'object',
+              'x-component': 'RangePicker',
+              'x-component-props': {
+                placeholder: ['劵有效期起始时间', '劵有效期截止时间'],
+                showTime: true,
+              },
+            },
+            type: {
+              type: 'string',
+              default: undefined,
+              enum: [],
+              'x-component-props': {
+                placeholder: '优惠劵类型(所有)',
+                allowClear: true, 
+              },
+            },
+            submit: {
+              'x-component': 'Submit',
+              'x-mega-props': {
+                span: 1,
+              },
+              'x-component-props': {
+                children: '查询',
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export const drawerSchema: ISchema = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      'x-component': 'Search',
+      'x-component-props': {
+        placeholder: '搜索',
+        align: 'flex-start',
+        tip: '输入 会员名称 进行搜索',
+      },
+    },
+    [FORM_FILTER_PATH]: {
+      type: 'object',
+      'x-component': 'Mega-Layout',
+      'x-component-props': {
+        grid: true,
+        columns: 4,
+      },
+      properties: {
+        id: {
+          type: 'string',
+          'x-component-props': {
+            placeholder: '会员ID',
+            allowClear: true, 
+          },
+        },
+        memberType: {
+          type: 'string',
+          default: undefined,
+          enum: [],
+          'x-component-props': {
+            placeholder: '会员类型(所有)',
+            allowClear: true, 
+          },
+        },
+        memberLevel: {
+          type: 'string',
+          default: undefined,
+          enum: [],
+          'x-component-props': {
+            placeholder: '会员等级(所有)',
+            allowClear: true, 
+          },
+        },
+        applicable: {
+          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': {
+            span: 1,
+          },
+          'x-component-props': {
+            children: '查询',
+          },
+        },
+      },
+    },
+  },
+};
\ No newline at end of file