Skip to content

J
jinfa-platform
Commit 40fd6227 authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

chore: 处理编辑地址逻辑

parent 40f76a60
Show whitespace changes
Inline Side-by-side
Showing with 146 additions and 33 deletions
src/components/AddressSelect/index.tsx
View file @ 40fd6227
......@@ -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
View file @ 40fd6227
......@@ -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,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment