feat: 展示 资质文件

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

@@ -6,59 +6,66 @@
  * @Description: 会员公司资质
  */
 import React from 'react';
-import { Descriptions } from 'antd';
+// import { Descriptions } from 'antd';
+import {
+  createFormActions,
+} from '@formily/antd';
+import { DatePicker, Checkbox } from '@formily/antd-components';
+import { normalizeFiledata } from '@/utils';
+import NiceForm from '@/components/NiceForm';
 import MellowCard, { MellowCardProps } from '@/components/MellowCard';
-import styles from './index.less';
+import { schema } from './schema';
+import QualitiesUpload from '../QualitiesUpload';
+import QualitiesUploadFormItem from '../QualitiesUploadFormItem';
+// import styles from './index.less';
 
-interface IProps extends MellowCardProps {}
+export type ValueType = {
+  /**
+   * 文件url
+   */
+  url: string,
+  /**
+   * 文件名称
+   */
+  name: string,
+  /**
+   * 到期日
+   */
+  expireDay: string,
+  /**
+   * 有效期
+   */
+  permanent: number,
+}
+
+interface IProps extends MellowCardProps {
+  /**
+   * 数据
+   */
+  dataSource: ValueType[],
+}
+
+const formActions = createFormActions();
 
 const MemberDocQualification: React.FC<IProps> = (props: IProps) => {
-  const { ...rest } = props;
+  const { dataSource = [], ...rest } = props;
+
+  const qualities = (
+    Array.isArray(dataSource)
+      ? dataSource.map((item) => ({
+        file: item.url ? [normalizeFiledata(item.url)] : [],
+        expireDay: item.expireDay,
+        permanent: item.permanent === 1 ? [item.permanent] : [],
+      }))
+      : []
+  );
+
   return (
     <MellowCard
       title="资质证明"
       {...rest}
     >
-      <ul className={styles.qualification}>
-        <li className={styles['qualification-item']}>
-          <div className={styles['qualification-item-wrap']}>
-            <div className={styles['qualification-item-left']}>
-
-            </div>
-            <div className={styles['qualification-item-right']}>
-              <Descriptions column={1}>
-                <Descriptions.Item label="到期日">2022-10-01</Descriptions.Item>
-                <Descriptions.Item label="有效期" style={{ paddingBottom: 0 }}>长期有效</Descriptions.Item>
-              </Descriptions>
-            </div>
-          </div>
-        </li>
-        <li className={styles['qualification-item']}>
-          <div className={styles['qualification-item-wrap']}>
-            <div className={styles['qualification-item-left']}>
-
-            </div>
-            <div className={styles['qualification-item-right']}>
-              <Descriptions column={1}>
-                <Descriptions.Item label="到期日">2022-10-01</Descriptions.Item>
-                <Descriptions.Item label="有效期" style={{ paddingBottom: 0 }}>长期有效</Descriptions.Item>
-              </Descriptions>
-            </div>
-          </div>
-        </li>
-        <li className={styles['qualification-item']}>
-          <div className={styles['qualification-item-wrap']}>
-            <div className={styles['qualification-item-left']}>
-
-            </div>
-            <div className={styles['qualification-item-right']}>
-              <Descriptions column={1}>
-                <Descriptions.Item label="到期日">2022-10-01</Descriptions.Item>
-                <Descriptions.Item label="有效期" style={{ paddingBottom: 0 }}>长期有效</Descriptions.Item>
-              </Descriptions>
-            </div>
-          </div>
-        </li>
+      {/* <ul className={styles.qualification}>
         <li className={styles['qualification-item']}>
           <div className={styles['qualification-item-wrap']}>
             <div className={styles['qualification-item-left']}>
@@ -72,20 +79,26 @@ const MemberDocQualification: React.FC<IProps> = (props: IProps) => {
             </div>
           </div>
         </li>
-        <li className={styles['qualification-item']}>
-          <div className={styles['qualification-item-wrap']}>
-            <div className={styles['qualification-item-left']}>
+      </ul> */}
+      <NiceForm
+        previewPlaceholder="' '"
+        initialValues={{
+          qualities,
+        }}
+        components={{
+          DatePicker,
+          Checkbox,
+          CheckboxGroup: Checkbox.Group,
+          QualitiesUpload,
+          QualitiesUploadFormItem,
+        }}
+        effects={() => {
 
-            </div>
-            <div className={styles['qualification-item-right']}>
-              <Descriptions column={1}>
-                <Descriptions.Item label="到期日">2022-10-01</Descriptions.Item>
-                <Descriptions.Item label="有效期" style={{ paddingBottom: 0 }}>长期有效</Descriptions.Item>
-              </Descriptions>
-            </div>
-          </div>
-        </li>
-      </ul>
+        }}
+        actions={formActions}
+        schema={schema}
+        editable={false}
+      />
     </MellowCard>
   );
 };

src/pages/member/components/MemberDocQualification/schema.ts

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-07 15:11:27
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-07 15:18:25
+ * @Description: 
+ */
+import { ISchema } from '@formily/antd';
+
+export const schema: ISchema = {
+  type: 'object',
+  properties: {
+    MEGA_LAYOUT: {
+      type: 'object',
+      'x-component': 'Mega-Layout',
+      properties: {
+        qualities: {
+          type: 'string',
+          'x-component': 'QualitiesUploadFormItem',
+          'x-component-props': {
+            colSpan: 24,
+          },
+        },
+      },
+    },
+  },
+};
\ No newline at end of file

src/pages/member/memberPrVerifyChange1/detail.tsx

@@ -167,6 +167,7 @@ const MemberPrVerifyChange1Detail: React.FC<{}> = () => {
           {/* 资质证明 */}
           <Col span={24}>
             <MemberDocQualification
+              dataSource={memberInfo?.qualities}
               id="qualificationInfo"
             />
           </Col>

src/pages/member/memberPrVerifyChange1/verify.tsx

@@ -209,6 +209,7 @@ const MemberPrVerifyChange1Verify: React.FC<{}> = () => {
           {/* 资质证明 */}
           <Col span={24}>
             <MemberDocQualification
+              dataSource={memberInfo?.qualities}
               id="qualificationInfo"
             />
           </Col>

src/pages/member/memberPrVerifyChange2/detail.tsx

@@ -167,6 +167,7 @@ const MemberPrVerifyChange2Detail: React.FC<{}> = () => {
           {/* 资质证明 */}
           <Col span={24}>
             <MemberDocQualification
+              dataSource={memberInfo?.qualities}
               id="qualificationInfo"
             />
           </Col>

src/pages/member/memberPrVerifyChange2/verify.tsx

@@ -209,6 +209,7 @@ const MemberPrVerifyChange2Verify: React.FC<{}> = () => {
           {/* 资质证明 */}
           <Col span={24}>
             <MemberDocQualification
+              dataSource={memberInfo?.qualities}
               id="qualificationInfo"
             />
           </Col>

src/pages/member/memberPrVerifyChangeConfirm/detail.tsx

@@ -167,6 +167,7 @@ const MemberPrVerifyChangeConfirmDetail: React.FC<{}> = () => {
           {/* 资质证明 */}
           <Col span={24}>
             <MemberDocQualification
+              dataSource={memberInfo?.qualities}
               id="qualificationInfo"
             />
           </Col>

src/pages/member/memberPrVerifyChangeConfirm/verify.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-05-26 10:26:37
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-04 14:28:21
+ * @LastEditTime: 2021-06-07 15:35:44
  * @Description: 确认会员变更
  */
 import React, { useState, useEffect } from 'react';
@@ -209,6 +209,7 @@ const MemberPrVerifyChangeConfirmVerify: React.FC<{}> = () => {
           {/* 资质证明 */}
           <Col span={24}>
             <MemberDocQualification
+              dataSource={memberInfo?.qualities}
               id="qualificationInfo"
             />
           </Col>

src/pages/member/memberPrVerifyComingData/components/UploadQualificationsDrawer/index.tsx

@@ -54,7 +54,7 @@ export type ValueType = {
   /**
    * 有效期
    */
-  permanent: number,
+  permanent: number[],
 }
 
 interface IProps {
@@ -87,9 +87,9 @@ const UploadQualificationsDrawer: React.FC<IProps> = (props: IProps) => {
     }
   };
 
-  const handleSubmit = (values: { channelLevel: ValueType[] }) => {
+  const handleSubmit = (values: { qualities: ValueType[] }) => {
     if (onSubmit) {
-      onSubmit(values.channelLevel);
+      onSubmit(values.qualities);
     }
   };
 

src/pages/member/memberPrVerifyComingData/components/UploadQualificationsDrawer/schema.ts

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-01 20:04:02
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-02 09:48:03
+ * @LastEditTime: 2021-06-07 15:11:08
  * @Description: 
  */
 import { ISchema } from '@formily/antd';
@@ -14,7 +14,7 @@ export const schema: ISchema = {
       type: 'object',
       'x-component': 'Mega-Layout',
       properties: {
-        channelLevel: {
+        qualities: {
           type: 'string',
           'x-component': 'QualitiesUploadFormItem',
           'x-component-props': {