chore: 处理编辑地址逻辑

src/components/AddressSelect/index.tsx

@@ -2,15 +2,17 @@
  * @Author: XieZhiXiong
  * @Date: 2021-08-05 10:28:06
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-08-06 14:54:48
+ * @LastEditTime: 2021-08-09 11:53:43
  * @Description: 地址选择 FormItem
  */
-import React, { useState, useEffect, useMemo } from 'react';
-import { Select, Button, Drawer, Divider } from 'antd';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { Select, Button, Drawer, Divider, message } from 'antd';
 import { PublicApi } from '@/services/api';
+import { GetLogisticsShipperAddressGetResponse, GetLogisticsReceiverAddressGetResponse } from '@/services/LogisticsApi';
 import {
   createFormActions,
   FormEffectHooks,
+  FormPath,
 } from '@formily/antd';
 import { IRequestSuccess } from '@/index';
 import { useLinkEnumEffect } from '@/components/NiceForm/linkages/linkEnum';
@@ -25,7 +27,6 @@ import styles from './index.less';
 const formActions = createFormActions();
 const {
   onFormInit$,
-  onFormMount$,
 } = FormEffectHooks;
 
 interface IProps {
@@ -111,6 +112,9 @@ const AddressSelect: React.FC<IProps> = (props) => {
   const [visibleDrawer, setVisibleDrawer] = useState(false);
   const [submitLoading, setSubmitLoading] = useState(false);
 
+  // 记录当前编辑的地址id
+  const editAddressId = useRef<number | null>(null);
+
   const triggerChange = (value: AddressValueType) => {
     if (onChange) {
       onChange(value);
@@ -172,6 +176,12 @@ const AddressSelect: React.FC<IProps> = (props) => {
   };
 
   useEffect(() => {
+    if ('value' in props) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  useEffect(() => {
     getAddressList();
   }, []);
 
@@ -180,7 +190,6 @@ const AddressSelect: React.FC<IProps> = (props) => {
   };
 
   const handleSelectChange = (value: number) => {
-    console.log('value', value)
     const current = list.find((item) => item.id === value);
 
     if (!('value' in props)) {
@@ -196,17 +205,20 @@ const AddressSelect: React.FC<IProps> = (props) => {
     console.log('values', values)
     let next = values.address;
 
-    // 新增地址
-    if (values.name) {
-      const provinceName = formActions.getFieldState('provinceCode', ({ values }) => {
-        return values[1].title;
-      });
-      const cityName = formActions.getFieldState('cityCode', ({ values }) => {
-        return values[1].title;
-      });
-      const districtName = formActions.getFieldState('districtCode', ({ values }) => {
-        return values[1].title;
+    const originData = formActions.getFieldState('provinceCode', (fieldState) => {
+      return fieldState.originData;
     });
+    if (!originData) {
+      message.warn('未找到地区信息');
+      return;
+    }
+    const currentProvince = originData.find((item) => item.code === values.provinceCode);
+    const currentCity = currentProvince?.areaResponses?.find((item) => item.code === values.cityCode);
+    const currentDistrict = currentCity?.areaResponses?.find((item) => item.code === values.districtCode);
+    const provinceName = currentProvince?.name;
+    const cityName = currentCity?.name;
+    const districtName = currentDistrict?.name;
+
     const { name, detailed, isDefault, ...rest } = values;
     const commonPayload = {
       ...rest,
@@ -217,6 +229,9 @@ const AddressSelect: React.FC<IProps> = (props) => {
       address: detailed,
       isDefault: isDefault ? 1 : 0,
     };
+
+    // 新增地址
+    if (values.name && !editAddressId.current) {
       try {
         setSubmitLoading(true);
         const addRes = addressType === 2
@@ -245,6 +260,41 @@ const AddressSelect: React.FC<IProps> = (props) => {
         console.warn(error)
       }
     }
+    // 编辑地址
+    if (values.name && editAddressId.current) {
+      try {
+        setSubmitLoading(true);
+        const addRes = addressType === 2
+          ? await PublicApi.postLogisticsShipperAddressUpdate({
+            ...commonPayload,
+            id: editAddressId.current,
+            shipperName: name,
+          })
+          : await PublicApi.postLogisticsReceiverAddressUpdate({
+            ...commonPayload,
+            id: editAddressId.current,
+            receiverName: name,
+          });
+        
+        if (addRes.code === 1000) {
+          next = {
+            fullAddress: `${provinceName}${cityName}${districtName}`,
+            id: editAddressId.current,
+            isDefault: values.isDefault ? 1 : 0,
+            name: values.name,
+            phone: values.tel,
+          };
+          // 重新获取列表，打新添加的内容加载出来
+          getAddressList();
+
+          editAddressId.current = null;
+          formActions.reset({ selector: 'ADDRESS_NEW.*' });
+        }
+        setSubmitLoading(false);
+      } catch (error) {
+        console.warn(error)
+      }
+    }
     if (!('value' in props)) {
       setInternalValue(next);
     }
@@ -266,9 +316,33 @@ const AddressSelect: React.FC<IProps> = (props) => {
     }
   }
 
-  const handleAddAddress = () => {
+  const handleAddAddress = async () => {
+    formActions.reset({ selector: 'ADDRESS_NEW.*' });
     formActions.setFieldState('ADDRESS_NEW', state => {
-      state.visible = !state.visible;
+      state.visible = true;
+    });
+    // 先获取地区信息
+    formActions.setFieldState('provinceCode', targetState => {
+      FormPath.setIn(targetState, 'props.x-props.hasFeedback', true);
+      FormPath.setIn(targetState, 'loading', true);
+    });
+    const areaRes = await PublicApi.getManageAreaAll();
+
+    formActions.setFieldState('provinceCode', targetState => {
+      FormPath.setIn(targetState, 'loading', false);
+    });
+    
+    if (areaRes.code !== 1000) {
+      message.warn('获取地区信息失败');
+      return;
+    }
+    const { data } = areaRes;
+    formActions.setFieldState('provinceCode', targetState => {
+      FormPath.setIn(targetState, 'originData', data);
+      FormPath.setIn(targetState, 'props.enum', data.map(v => ({
+        label: v.name,
+        value: v.code,
+      })));
     });
   };
 
@@ -281,6 +355,56 @@ const AddressSelect: React.FC<IProps> = (props) => {
     );
   }, []);
 
+  const handleEditAddress = async (id: number) => {
+    try {
+      // 先获取地区信息
+      formActions.setFieldState('provinceCode', targetState => {
+        FormPath.setIn(targetState, 'props.x-props.hasFeedback', true);
+        FormPath.setIn(targetState, 'loading', true);
+      });
+      const areaRes = await PublicApi.getManageAreaAll();
+
+      formActions.setFieldState('provinceCode', targetState => {
+        FormPath.setIn(targetState, 'loading', false);
+      });
+
+      if (areaRes.code !== 1000) {
+        message.warn('获取地区信息失败');
+        return;
+      }
+      const { data } = areaRes;
+      formActions.setFieldState('provinceCode', targetState => {
+        FormPath.setIn(targetState, 'originData', data);
+        FormPath.setIn(targetState, 'props.enum', data.map(v => ({
+          label: v.name,
+          value: v.code,
+        })));
+      });
+      const res = addressType === 2 ? await PublicApi.getLogisticsShipperAddressGet({ id: `${id}`}) : await PublicApi.getLogisticsReceiverAddressGet({ id: `${id}`});
+        if (res.code === 1000) {
+          formActions.setFieldValue('name', addressType === 2 ? (res.data as GetLogisticsShipperAddressGetResponse).shipperName : (res.data as GetLogisticsReceiverAddressGetResponse).receiverName);
+          formActions.setFieldValue('provinceCode', res.data.provinceCode);
+          formActions.setFieldValue('cityCode', res.data.cityCode);
+          formActions.setFieldValue('districtCode', res.data.districtCode);
+          formActions.setFieldValue('detailed', res.data.address);
+          formActions.setFieldValue('postalCode', res.data.postalCode);
+          formActions.setFieldValue('areaCode', res.data.areaCode);
+          formActions.setFieldValue('phone', res.data.phone);
+          formActions.setFieldValue('tel', res.data.tel);
+          formActions.setFieldValue('isDefault', res.data.isDefault);
+          formActions.setFieldState('ADDRESS_NEW', state => {
+            state.visible = true;
+          });
+
+          editAddressId.current = id;
+        } else {
+          message.warn('获取地址信息失败');
+        }
+    } catch (error) {
+      console.warn(error);
+    }
+  };
+
   const options = useMemo(() => {
     return list.map((item) => ({
       value: item.id,
@@ -341,10 +465,11 @@ const AddressSelect: React.FC<IProps> = (props) => {
             AddButton,
           }}
           expressionScope={{
+            handleEditAddress,
             ...createRichTextUtils(),
           }}
           initialValues={{
-            address: value,
+            address: internalValue,
           }}
           fields={useFields()}
           effects={($, { setFieldState }) => {
@@ -358,20 +483,6 @@ const AddressSelect: React.FC<IProps> = (props) => {
               });
             });
 
-            onFormMount$().subscribe(async () => {
-              const areaRes = await PublicApi.getManageAreaAll();
-              if (areaRes.code === 1000) {
-                const { data } = areaRes;
-                formActions.setFieldState('provinceCode', targetState => {
-                  targetState.originData = data;
-                  targetState.props.enum = data.map(v => ({
-                    label: v.name,
-                    value: v.code,
-                  }));
-                });
-              }
-            });
-
             useLinkEnumEffect('areaResponses', result =>
               result.map(v => ({
                 label: v.name,

src/components/AddressSelect/schema.ts

@@ -32,7 +32,9 @@ export const createSchema = (addressType = 2): ISchema => {
               address: {
                 type: 'string',
                 'x-component': 'AddressRadioGroup',
-                'x-component-props': {},
+                'x-component-props': {
+                  onClickEdit: '{{ handleEditAddress }}',
+                },
                 'x-rules': [
                   {
                     required: true,