feat: 添加 formily商品分类多选框 组件

src/pages/transaction/marketingAbility/merchantCoupon/components/FormilyFieldItem/CategoriesList/index.less

+@import '~antd/es/style/themes/default.less';
+
+.categories-list {
+  width: 100%;
+
+  &-item {
+    &-wrap {
+      padding: @padding-xs @padding-md;
+      background-color: @background-color-base;
+    }
+
+    &-fields {
+      :global {
+        .ant-form-item {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+
+  &-add {
+    width: 100%;
+    height: 49px;
+    text-align: center;
+    vertical-align: top;
+    background-color: @descriptions-bg;
+    border: 1px dashed @border-color-base;
+    border-radius: @border-radius-base;
+    cursor: pointer;
+    transition: all 0.3s;
+  
+    &:hover {
+      background-color: @descriptions-bg;
+    }
+  }
+}

src/pages/transaction/marketingAbility/merchantCoupon/components/FormilyFieldItem/CategoriesList/index.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-25 14:43:51
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-25 16:51:33
+ * @Description: formily 品牌列表
+ */
+import React from 'react';
+import { Row, Col, Button } from 'antd';
+import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
+import { ArrayList } from '@formily/react-shared-components';
+import { SchemaField } from '@formily/antd';
+import { toArr, FormPath } from '@formily/shared';
+import styles from './index.less';
+
+const FormilyCategoriesList = (props) => {
+  const {
+    value,
+    className,
+    editable,
+    path,
+    mutators,
+    schema,
+  } = props;
+  const { } = (props.props['x-component-props'] || {});
+
+  const onAdd = () => {
+    const items = Array.isArray(schema.items)
+      ? schema.items[schema.items.length - 1]
+      : schema.items;
+    mutators.push(items.getEmptyValue());
+  };
+  const onRemove = index => mutators.remove(index);
+
+  return (
+    <ArrayList value={value}>
+      <div className={styles['categories-list']}>
+        <Row gutter={[16, 16]}>
+          {toArr(value).map((item, index) => (
+            <Col key={index} span={12}>
+              <div className={styles['categories-list-item-wrap']}>
+                <Row
+                  gutter={16}
+                  align="middle"
+                >
+                  <Col flex={1} className={styles['categories-list-item-fields']}>
+                    <SchemaField path={FormPath.parse(path).concat(index)} />
+                  </Col>
+                  <Col>
+                    <Button
+                      onClick={() => onRemove(index)}
+                      type="link"
+                      icon={<DeleteOutlined style={{ fontSize: 14 }} />}
+                    />
+                  </Col>
+                </Row>
+              </div>
+            </Col>
+          ))}
+          {editable && (
+            <Col span={12}>
+              <Button
+                onClick={onAdd}
+                type="dashed"
+                className={styles['categories-list-add']}
+              >
+                <PlusOutlined />
+                添加
+              </Button>
+            </Col>
+          )}
+        </Row>
+      </div>
+    </ArrayList>
+  );
+};
+
+FormilyCategoriesList.isFieldComponent = true;
+
+export default FormilyCategoriesList;