feat: 新增 待审核入库资料展示 入库信息相关

src/components/NiceForm/components/CustomUpload.tsx

@@ -2,8 +2,12 @@ import React from 'react'
 import UploadImage from "@/components/UploadImage"
 
 const CustomUpload = (props) => {
-  const { mutators } = props
-  const uploadProps = props.props['x-component-props'] || {}
+  const { mutators, editable } = props
+  const XComponentProps = props.props['x-component-props'] || {}
+  const uploadProps = {
+    ...XComponentProps,
+    disabled: !editable || XComponentProps.disabled,
+  }
   return <UploadImage
     imgUrl={props.value}
     onChange={data => {

src/pages/member/components/AreaSelect/SelectItem.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-10 14:30:16
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-10 15:29:04
+ * @Description: 区域选择单个Select
+ */
+import React from 'react';
+import { Select } from 'antd';
+import { SelectProps } from 'antd/lib/select';
+
+interface IProps extends SelectProps<string> {
+  /**
+   * 选项
+   */
+  options: {
+    /**
+     * 描述
+     */
+    label: string,
+    /**
+     * 值
+     */
+    value: any,
+  }[],
+}
+
+const AreaSelectItem = (props: IProps) => {
+  const {
+    disabled,
+    value,
+    options,
+  } = props;
+
+  const current = options.find((item) => item.value === value);
+
+  if (!disabled) {
+    return (
+      <Select
+        style={{
+          width: '100%',
+        }}
+        {...props}
+      >
+        {options.map((item) => (
+          <Select.Option
+            key={item.value}
+            value={item.value}
+          >
+            {item.label}
+          </Select.Option>
+        ))}
+      </Select>
+    );
+  }
+
+  return (
+    <div>{current?.label}</div>
+  );
+};
+
+export default AreaSelectItem;

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

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-10 14:27:37
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-10 16:00:07
+ * @Description: 区域选择
+ */
+import React, { useState, useEffect } from 'react';
+import { Row, Col } from 'antd';
+import { PublicApi } from '@/services/api';
+import SelectItem from './SelectItem';
+
+function isObj(value) {
+  return typeof value === 'object';
+};
+
+type AreaCodeType = {
+  /**
+   * 区域编码
+   */
+  value: string
+  /**
+   * 区域名称
+   */
+  label: string
+}
+
+const AreaSelect  = (props) => {
+  const {
+    mutators,
+    editable,
+  } = props;
+  const value = isObj(props.value) ? props.value : {};
+  const XComponentProps = props.props['x-component-props'] || {};
+  const SelectProps = {
+    ...XComponentProps,
+    disabled: !editable || XComponentProps.disabled,
+  };
+
+  const [provinceList, setProvinceList] = useState<AreaCodeType[]>([]);
+  const [cityList, setCityList] = useState<AreaCodeType[]>([]);
+  const [districtList, setDistrictList] = useState<AreaCodeType[]>([]);
+
+  const [provinceLoading, setProvinceLoading] = useState(false);
+  const [cityLoading, setCityLoading] = useState(false);
+  const [districtLoading, setDistrictLoading] = useState(false);
+
+  const [provinceValue, setProvinceValue] = useState('');
+  const [cityValue, setCityValue] = useState('');
+  const [districtValue, setDistrictValue] = useState('');
+
+  const getProvinceList = async () => {
+    setProvinceLoading(true);
+    const res = await PublicApi.getMemberAreaProvince();
+    if (res.code === 1000) {
+      setProvinceList(res.data.map((item) => ({ label: item.name, value: item.code })));
+    }
+    setProvinceLoading(false);
+  };
+  
+  const getCityList = async (code: string) => {
+    if (!code) {
+      return;
+    }
+    setCityLoading(true);
+    const res = await PublicApi.getMemberAreaCity({ code });
+    if (res.code === 1000) {
+      setCityList(res.data.map((item) => ({ label: item.name, value: item.code })));
+    }
+    setCityLoading(false);
+  };
+  
+  const getDistrictList = async (code: string) => {
+    if (!code) {
+      return;
+    }
+    setDistrictLoading(true);
+    const res = await PublicApi.getMemberAreaDistrict({ code });
+    if (res.code === 1000) {
+      setDistrictList(res.data.map((item) => ({ label: item.name, value: item.code })));
+    }
+    setDistrictLoading(false);
+  };
+
+  useEffect(() => {
+    const {
+      provinceCode,
+      cityCode,
+      districtCode,
+    } = value;
+    setProvinceValue(provinceCode);
+    setCityValue(cityCode);
+    setDistrictValue(districtCode);
+  }, [value]);
+
+  useEffect(() => {
+    getProvinceList();
+  }, []);
+  
+  useEffect(() => {
+    getCityList(provinceValue);
+  }, [provinceValue]);
+  
+  useEffect(() => {
+    getDistrictList(cityValue);
+  }, [cityValue]);
+
+  const handleProvinceChange = (next: string) => {
+    setProvinceValue(next);
+    setCityValue(undefined);
+    setCityList([]);
+    setDistrictList([]);
+    setDistrictValue(undefined);
+    mutators.change({ ...value, provinceCode: next, cityCode: undefined, districtCode: undefined });
+  };
+  
+  const handleCityChange = (next: string) => {
+    setCityValue(next);
+    setDistrictList([]);
+    setDistrictValue(undefined);
+    mutators.change({ ...value, cityCode: next, districtCode: undefined });
+  };
+  
+  const handleDistrictChange = (next: string) => {
+    setDistrictValue(next);
+    mutators.change({ ...value, districtCode: next });
+  };
+
+  return (
+    <div
+      style={{
+        width: '100%',
+      }}
+    >
+      <Row gutter={16}>
+        <Col span={8}>
+          <SelectItem
+            placeholder="- 省 -"
+            allowClear
+            {...SelectProps}
+            value={provinceValue}
+            options={provinceList}
+            loading={provinceLoading}
+            onChange={handleProvinceChange}
+          />
+        </Col>
+        <Col span={8}>
+          <SelectItem
+            placeholder="- 市 -"
+            allowClear
+            {...SelectProps}
+            value={cityValue}
+            options={cityList}
+            loading={cityLoading}
+            onChange={handleCityChange}
+          />
+        </Col>
+        <Col span={8}>
+          <SelectItem
+            placeholder="- 县 / 区 -"
+            allowClear
+            {...SelectProps}
+            value={districtValue}
+            options={districtList}
+            loading={districtLoading}
+            onChange={handleDistrictChange}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+AreaSelect.isFieldComponent = true;
+
+export default AreaSelect

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

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-05-21 17:14:39
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-03 10:34:49
+ * @LastEditTime: 2021-06-10 09:57:18
  * @Description: 会员入库信息
  */
 import React from 'react';
@@ -50,7 +50,7 @@ const MemberDocIncomingInfo: React.FC<IProps> = (props: IProps) => {
   } = props;
 
   const data: DataItem[] = [];
-  
+
   dataSource.forEach((item) => {
     item.elements.forEach((ele) => {
       data.push({

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

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-01 18:15:20
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-02 11:15:17
+ * @LastEditTime: 2021-06-10 16:05:26
  * @Description: 修改入库资料抽屉
  */
 import React from 'react';
@@ -14,6 +14,7 @@ import { Radio, Checkbox } from '@formily/antd-components';
 import { createAsyncFormActions } from '@formily/antd';
 import NiceForm from '@/components/NiceForm';
 import { schema, GroupItem } from './schema';
+import AreaSelect from '../../../components/AreaSelect';
 
 export type ValueType = { [key: string]: any }
 
@@ -84,6 +85,7 @@ const ChangeComingDataDrawer: React.FC<IProps> = (props: IProps) => {
         components={{
           RadioGroup: Radio.Group,
           CheckboxGroup: Checkbox.Group,
+          AreaSelect,
         }}
         effects={() => {
 

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

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-10 10:29:26
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-10 16:07:30
+ * @Description: 入库资料展示用
+ */
+import React from 'react';
+import { Radio, Checkbox } from '@formily/antd-components';
+import { createAsyncFormActions } from '@formily/antd';
+import NiceForm from '@/components/NiceForm';
+import MellowCard, { MellowCardProps } from '@/components/MellowCard';
+import { schema, GroupItem } from './schema';
+import AreaSelect from '../../../components/AreaSelect';
+
+export type ValueType = { [key: string]: any }
+
+const formActions = createAsyncFormActions();
+
+interface IProps extends MellowCardProps {
+  /**
+   * 资料组
+   */
+  groups: GroupItem[],
+}
+
+const DepositDetailsCard: React.FC<IProps> = (props: IProps) => {
+  const {
+    groups,
+    ...rest
+  } = props;
+  return (
+    <MellowCard
+      title="入库信息"
+      {...rest}
+    >
+      <NiceForm
+        previewPlaceholder=" "
+        components={{
+          RadioGroup: Radio.Group,
+          CheckboxGroup: Checkbox.Group,
+          AreaSelect,
+        }}
+        effects={() => {
+
+        }}
+        actions={formActions}
+        schema={schema(groups)}
+        editable={false}
+        colon
+      />
+    </MellowCard>
+  );
+};
+
+export default DepositDetailsCard;

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

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-10 10:35:55
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-10 13:47:48
+ * @Description: 
+ */
+import { ISchema } from '@formily/antd';
+import { createMemberSchema, ElementType } from '../../../utils';
+
+export type GroupItem = {
+  /**
+   * 组名
+   */
+  groupName: string,
+  /**
+   * 元素
+   */
+  elements: ElementType[],
+};
+
+export const schema = (groups: GroupItem[]): ISchema => {
+  let fields = {};
+  (groups || []).forEach((item) => {
+    fields = Object.assign({}, fields, createMemberSchema(item.elements));
+  });
+  const depositSchema: ISchema = {
+    type: 'object',
+    properties: {
+      MEGA_LAYOUT: {
+        'x-component': 'Mega-Layout',
+        'x-component-props': {
+          grid: true,
+          full: true,
+          columns: 3,
+          autoRow:  true,
+          labelWidth: 104,
+          wrapperCol: 20,
+          labelAlign: 'left',
+        },
+        properties: fields,
+      },
+    },
+  };
+  return depositSchema;
+};
\ No newline at end of file

src/pages/member/memberPrVerifyComingData/detail.tsx

@@ -26,9 +26,10 @@ import {
 } from '../constant';
 import MemberBasicInfo from '../components/MemberBasicInfo';
 import PicWrap from '../components/PicWrap';
+import DepositDetailsCard from './components/DepositDetailsCard';
 
 const MemberPrVerifyComingDataDetail: React.FC<{}> = () => {
-  const { id, validateId } = usePageStatus();
+  const { validateId } = usePageStatus();
   const [memberInfo, setMemberInfo] = useState<GetMemberDepositVerifyDetailResponse>(null);
   const [infoLoading, setInfoLoaading] = useState(false);
 
@@ -70,6 +71,10 @@ const MemberPrVerifyComingDataDetail: React.FC<{}> = () => {
         : []
     ),
     {
+      key: 'incomingInfo',
+      name: '入库信息',
+    },
+    {
       key: 'flowRecords',
       name: '流转记录',
     },
@@ -150,6 +155,14 @@ const MemberPrVerifyComingDataDetail: React.FC<{}> = () => {
               : null
           }
 
+          {/* 入库信息 */}
+          <Col span={24}>
+            <DepositDetailsCard
+              groups={memberInfo?.depositDetails}
+              id="incomingInfo"
+            />
+          </Col>
+
           {/* 流转记录 */}
           <Col span={24}>
             <FlowRecords

src/pages/member/memberPrVerifyComingData/verify.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-05-24 17:01:57
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-02 15:23:56
+ * @LastEditTime: 2021-06-10 16:09:07
  * @Description: 审核入库资料
  */
 import React, { useState, useEffect } from 'react';
@@ -32,13 +32,14 @@ import {
   MEMBER_INNER_COLUMNS,
 } from '../constant';
 import MemberBasicInfo from '../components/MemberBasicInfo';
+import DepositDetailsCard from './components/DepositDetailsCard';
 import PicWrap from '../components/PicWrap';
 import VerifyComingDataDrawer, { ValueType as VerifyData } from './components/VerifyComingDataDrawer';
 import ChangeComingDataDrawer, { ValueType as ComingData } from './components/ChangeComingDataDrawer';
 import UploadQualificationsDrawer, { ValueType as QualificationData } from './components/UploadQualificationsDrawer';
 
 const MemberPrVerifyComingDataVerify: React.FC<{}> = () => {
-  const { id, validateId } = usePageStatus();
+  const { validateId } = usePageStatus();
   const [memberInfo, setMemberInfo] = useState<GetMemberDepositVerifyDetailResponse>(null);
   const [infoLoading, setInfoLoaading] = useState(false);
   const [visibleVerifyDrawer, setVisibleVerifyDrawer] = useState(false);
@@ -141,6 +142,10 @@ const MemberPrVerifyComingDataVerify: React.FC<{}> = () => {
         : []
     ),
     {
+      key: 'incomingInfo',
+      name: '入库信息',
+    },
+    {
       key: 'flowRecords',
       name: '流转记录',
     },
@@ -244,6 +249,14 @@ const MemberPrVerifyComingDataVerify: React.FC<{}> = () => {
               : null
           }
 
+          {/* 入库信息 */}
+          <Col span={24}>
+            <DepositDetailsCard
+              groups={memberInfo?.depositDetails}
+              id="incomingInfo"
+            />
+          </Col>
+
           {/* 流转记录 */}
           <Col span={24}>
             <FlowRecords

src/pages/member/memberQuery/addSubRole.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-01-06 11:36:35
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-04 15:53:07
+ * @LastEditTime: 2021-06-10 16:04:15
  * @Description: 新增会员角色
  */
 import React, { useState, useEffect } from 'react';
@@ -11,11 +11,13 @@ import { Button, Card, Spin, message } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { SaveOutlined } from '@ant-design/icons';
 import { createFormActions, FormEffectHooks } from '@formily/antd';
+import { Radio, Checkbox } from '@formily/antd-components';
 import { usePageStatus } from '@/hooks/usePageStatus';
 import ReutrnEle from '@/components/ReturnEle';
 import NiceForm from '@/components/NiceForm';
 import { PublicApi } from '@/services/api';
 import { schema, GroupItem } from './schema/createRole';
+import AreaSelect from '../components/AreaSelect';
 
 const formActions = createFormActions();
 const {
@@ -102,6 +104,11 @@ const AddSubRole: React.FC<any> = props => {
           <NiceForm
             onSubmit={handleSubmit}
             actions={formActions}
+            components={{
+              RadioGroup: Radio.Group,
+              CheckboxGroup: Checkbox.Group,
+              AreaSelect,
+            }}
             effects={() => {
               onFormInputChange$().subscribe(() => {
                 if (!unsaved) {

src/pages/member/memberQuery/applyMember/index.tsx

@@ -2,13 +2,13 @@
  * @Author: XieZhiXiong
  * @Date: 2021-05-26 16:52:48
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-08 17:14:38
+ * @LastEditTime: 2021-06-10 16:06:51
  * @Description: 申请会员
  */
 import React, { useState, useEffect, useRef } from 'react';
 import { history, Prompt } from 'umi';
 import { Button, Spin, Space, message } from 'antd';
-import { Checkbox, DatePicker } from '@formily/antd-components';
+import { Checkbox, DatePicker, Radio } from '@formily/antd-components';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import {
   createFormActions,
@@ -27,6 +27,7 @@ import RegisterInfo from './components/RegisterInfo';
 import SubmitSuccess from './components/SubmitSuccess';
 import QualitiesUpload from '../../components/QualitiesUpload';
 import QualitiesUploadFormItem from '../../components/QualitiesUploadFormItem';
+import AreaSelect from '../../components/AreaSelect';
 
 type ValueType = {
   step3: { [key: string]: any },
@@ -325,6 +326,8 @@ const MemberQueryApplyMember: React.FC = () => {
               Checkbox,
               CheckboxGroup: Checkbox.Group,
               DatePicker,
+              RadioGroup: Radio.Group,
+              AreaSelect,
               QualitiesUpload,
               QualitiesUploadFormItem,
             }}

src/pages/member/memberQuery/updateMember/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-04 15:37:19
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-06-04 15:54:38
+ * @LastEditTime: 2021-06-10 16:03:09
  * @Description: 修改会员注册信息
  */
 import React, { useState, useEffect } from 'react';
@@ -11,11 +11,13 @@ import { Button, Card, Spin, message } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { SaveOutlined } from '@ant-design/icons';
 import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
+import { Radio, Checkbox } from '@formily/antd-components';
 import { usePageStatus } from '@/hooks/usePageStatus';
 import ReutrnEle from '@/components/ReturnEle';
 import NiceForm from '@/components/NiceForm';
 import { PublicApi } from '@/services/api';
 import { schema, GroupItem } from '../schema/createRole';
+import AreaSelect from '../../components/AreaSelect';
 
 const formActions = createFormActions();
 const {
@@ -101,6 +103,11 @@ const MemberUpdate: React.FC<any> = props => {
           <NiceForm
             onSubmit={handleSubmit}
             actions={formActions}
+            components={{
+              RadioGroup: Radio.Group,
+              CheckboxGroup: Checkbox.Group,
+              AreaSelect,
+            }}
             effects={() => {
               onFormInputChange$().subscribe(() => {
                 if (!unsaved) {

src/pages/member/utils.tsx

@@ -64,6 +64,10 @@ export type ElementType = {
    * 是否禁用
    */
   disabled?: boolean,
+  /**
+   * 是否可编辑的
+   */
+  editable?: boolean,
 }
 
 export function coverColFiltersItem(
@@ -81,7 +85,7 @@ export function coverColFiltersItem(
   }
 };
 
-type FieldType = 'string' | 'long' | 'upload' | 'radio' | 'select' | 'checkbox' | 'areas';
+type FieldType = 'string' | 'long' | 'upload' | 'radio' | 'select' | 'checkbox' | 'area';
 
 // 字段校验规则枚举：0-无校验规则，1-邮箱规则，2-手机号码规则，3-身份证规则，4-电话号码规则
 const RULE_REG_MAP = {
@@ -96,7 +100,7 @@ const getFieldType = (field: ElementType) => {
   let description: { [key: string]: any } = {
     'x-component-props': {
       placeholder: field.fieldRemark, 
-      disabled: field.disabled, 
+      disabled: field.disabled || field.editable || false,
     },
   };
   // 公共的属性
@@ -131,7 +135,7 @@ const getFieldType = (field: ElementType) => {
         'x-component': 'CustomUpload',
         'x-component-props': {
           showDesc: false,
-          disabled: field.disabled,
+          disabled: field.disabled || field.editable || false,
         },
       };
       break;
@@ -142,7 +146,7 @@ const getFieldType = (field: ElementType) => {
         enum: field.fieldEnum,
         'x-component-props': {
           showDesc: false,
-          disabled: field.disabled,
+          disabled: field.disabled || field.editable || false,
         },
       };
       break;
@@ -160,6 +164,12 @@ const getFieldType = (field: ElementType) => {
       };
       break;
     }
+    case 'area': {
+      description = {
+        'x-component': 'AreaSelect',
+      };
+      break;
+    }
     default:
       break;
   }