feat: 调价删除按钮相关

src/pages/member/components/QualitiesUploadFormItem/index.less

@@ -14,4 +14,9 @@
   &:hover {
     background-color: @descriptions-bg;
   }
+}
+
+.del-btn {
+  position: relative;
+  top: -10px;
 }
\ No newline at end of file

src/pages/member/components/QualitiesUploadFormItem/index.tsx

@@ -2,12 +2,12 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-01 16:13:35
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-07 16:18:24
+ * @LastEditTime: 2021-06-15 11:53:20
  * @Description: 资质证明上传组件
  */
 import React from 'react';
 import { Row, Col, Button } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import { ArrayList } from '@formily/react-shared-components';
 import { Schema, SchemaField } from '@formily/antd';
 import { toArr, FormPath } from '@formily/shared';
@@ -16,6 +16,12 @@ import {
 } from '@/constants';
 import styles from './index.less';
 
+const expireDayTitle = (
+  <span style={{ marginTop: 40 }}>
+    到期日
+  </span>
+);
+
 const schema = new Schema({
   type: 'object',
   properties: {
@@ -39,6 +45,12 @@ const schema = new Schema({
             },
             accept: '.doc, .docx, .xls, .xlsx, .pot, .pps, .vsd, .wps, .dps, .pdf, .txt, .png, .jpg, .rar, .zip',
           },
+          'x-rules': [
+            {
+              required: true,
+              message: '请上传资质证明',
+            },
+          ],
         },
         MEGA_LAYOUT2: {
           type: 'object',
@@ -46,8 +58,13 @@ const schema = new Schema({
           properties: {
             expireDay: {
               type: 'string',
-              title: '到期日',
+              title: expireDayTitle,
               'x-component': 'DatePicker',
+              'x-component-props': {
+                style: {
+                  marginTop: 20,
+                },
+              },
             },
             permanent: {
               type: 'string',
@@ -75,7 +92,8 @@ const QualitiesUploadFormItem = (props) => {
   } = props;
   const { colSpan } = (props.props['x-component-props'] || {});
 
-  const onAdd = () => mutators.push(schema.getEmptyValue())
+  const onAdd = () => mutators.push(schema.getEmptyValue());
+  const onRemove = index => mutators.remove(index);
 
   const span = colSpan ? {
     span: colSpan,
@@ -89,16 +107,28 @@ const QualitiesUploadFormItem = (props) => {
     <ArrayList value={value}>
       <Row
         gutter={{ sm: 44, md: 88, lg: 88 }}
-        style={{
-          width: '100%',
-        }}
       >
         {toArr(value).map((item, index) => (
           <Col key={index} {...span}>
-            <SchemaField
-              path={FormPath.parse(path).concat(index)}
-              schema={schema}
-            />
+            <Row
+              gutter={50}
+              align="middle"
+            >
+              <Col flex={1}>
+                <SchemaField
+                  path={FormPath.parse(path).concat(index)}
+                  schema={schema}
+                />
+              </Col>
+              <Col>
+                <Button
+                  onClick={() => onRemove(index)}
+                  type="link"
+                  icon={<CloseCircleOutlined style={{ fontSize: 20 }} />}
+                  className={styles['del-btn']}
+                />
+              </Col>
+            </Row>
           </Col>
         ))}
         {editable && (