feat: 添加适用用户展示

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

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-08-02 16:56:32
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-08-02 17:48:07
+ * @Description: 适用用户
+ */
+import React, { useMemo } from 'react';
+import {
+  SchemaForm,
+  SchemaMarkupField as Field,
+} from '@formily/antd';
+import MellowCard, { MellowCardProps }  from '@/components/MellowCard';
+import TofuCheckGroup from '../../../components/FormilyFieldItem/TofuCheckGroup';
+import MemberCheckboxGroup from '../../../components/FormilyFieldItem/MemberCheckboxGroup';
+import { OptionItemType as MemberOptionItemType } from '../../../components/MemberCheckboxGroup';
+import ApplicableList from '../../../components/FormilyFieldItem/ApplicableList';
+
+export type ApplicationMemberLevelType = Omit<MemberOptionItemType, 'value'> & { id: string }
+
+interface IProps extends MellowCardProps {
+  /**
+   * 适用会员信息
+   */
+  applicableMember: {
+    /**
+     * 适用用户
+     */
+    suitableMemberTypes: {}[],
+    /**
+     * 适用用户角色
+     */
+    applicationUserRole: {}[],
+    /**
+     * 适用用户列表
+     */
+    applicationMemberLevel: ApplicationMemberLevelType[],
+  },
+}
+
+const ApplicableMember: React.FC<IProps> = (props) => {
+  const { applicableMember, ...rest } = props;
+
+  const useFields = (): any => (
+    useMemo(() => ({
+      TofuCheckGroup,
+      MemberCheckboxGroup,
+      ApplicableList,
+    }), [])
+  );
+
+  const showApplicationMemberLevel = true;
+
+  return (
+    <MellowCard
+      title="适用用户"
+      bodyStyle={{
+        paddingBottom: 0,
+      }}
+      {...rest}
+    >
+      <SchemaForm
+        labelAlign="left"
+        labelCol={3}
+        wrapperCol={21}
+        fields={useFields()}
+        editable={false}
+      >
+        <Field
+          type="string"
+          enum={[]}
+          title="适用用户"
+          name="suitableMemberTypes"
+          x-component="TofuCheckGroup"
+        />
+        {showApplicationMemberLevel && (
+          <>
+            <Field
+              type="string"
+              enum={[]}
+              default={[0]}
+              title="适用用户角色"
+              name="applicationUserRole"
+              x-component="TofuCheckGroup"
+            />
+            <Field
+              type="string"
+              enum={applicableMember?.applicationMemberLevel?.map((item) => ({ ...item, value: item.id }))}
+              name="applicationMemberLevel"
+              x-component="MemberCheckboxGroup"
+            />
+          </>
+        )}
+      </SchemaForm>
+    </MellowCard>
+  );
+};
+
+export default ApplicableMember;

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

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-25 17:23:30
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-07-23 15:16:09
+ * @LastEditTime: 2021-08-02 17:35:52
  * @Description: 商家优惠券页面详情组件
  */
 import React, { useMemo } from 'react';
@@ -34,6 +34,7 @@ import ApplicableGoods, { ListItemDataType } from '../../components/ApplicableGo
 import ApplicableShopList from '../../components/ApplicableShopList';
 import ApplicableCategories from '../../components/ApplicableCategories';
 import ApplicableBrands from '../../components/ApplicableBrands';
+import ApplicableMember, { ApplicationMemberLevelType } from '../../components/ApplicableMember';
 import InnerFlowRecords from '../../components/InnerFlowRecords';
 
 export type DetailType = BacisInfoPropsType['dataSource'] & CouponRulesPropsType['dataSource'] & {
@@ -123,6 +124,10 @@ export type DetailType = BacisInfoPropsType['dataSource'] & CouponRulesPropsType
    * 适用商城
    */
   suitableMallTypes?: ShopItemType[],
+  /**
+   * 适用会员
+   */
+  suitableMemberLevelTypes?: ApplicationMemberLevelType[],
 };
 
 interface IProps {
@@ -156,6 +161,10 @@ const MerchantCouponDetail: React.FC<IProps> = (props) => {
       key: 'couponRules',
       name: '优惠券规则',
     },
+    {
+      key: 'applicableShopList',
+      name: '适用商城',
+    },
     (
       dataSource?.type === MERCHANT_COUPON_TYPE_PRODUCT
       || dataSource?.type === MERCHANT_COUPON_TYPE_VOUCHER
@@ -182,7 +191,7 @@ const MerchantCouponDetail: React.FC<IProps> = (props) => {
         : null
     ),
     {
-      key: 'applicableShopList',
+      key: 'applicableMember',
       name: '适用商城',
     },
     {
@@ -258,6 +267,14 @@ const MerchantCouponDetail: React.FC<IProps> = (props) => {
               id="couponRules"
             />
           </Col>
+
+          {/* 适用商城 */}
+          <Col span={24}>
+            <ApplicableShopList
+              options={shopList}
+              id="applicableShopList"
+            />
+          </Col>
           
           {/* 适用商品 */}
           {
@@ -307,12 +324,16 @@ const MerchantCouponDetail: React.FC<IProps> = (props) => {
                 : null
             )
           }
-          
-          {/* 适用商城 */}
+
+          {/* 适用用户 */}
           <Col span={24}>
-            <ApplicableShopList
-              options={shopList}
-              id="applicableShopList"
+            <ApplicableMember
+              applicableMember={{
+                suitableMemberTypes: [],
+                applicationUserRole: [],
+                applicationMemberLevel: dataSource?.suitableMemberLevelTypes,
+              }}
+              id="applicableMember"
             />
           </Col>