Commit d6e21304 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
parents 566d28cd 7a514ef1
/*
* @Author: XieZhiXiong
* @Date: 2021-08-05 10:28:06
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-08-10 16:55:26
* @Description: 地址选择 FormItem
*/
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';
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
import NiceForm from '@/components/NiceForm';
import { createSchema } from './schema';
import { AddressSelectContextProvider } from './context';
import { AddressItemType, AddressValueType } from './components/AddressRadioGroup';
import AddressRadioGroup from './components/AddressRadioGroupFormilyItem';
import styles from './index.less';
const formActions = createFormActions();
const {
onFormInit$,
} = FormEffectHooks;
interface IProps {
/**
* 类型:1 收货地址 2 发货地址,默认 2
*/
addressType?: 1 | 2,
/**
* 值
*/
value?: AddressValueType,
/**
* 选择触发改变
*/
onChange?: (value: AddressValueType) => void,
/**
* 是否默认选择 默认地址,是的话会触发 onChange value为默认地址,默认为false
*/
isDefaultAddress?: boolean,
/**
* 是否禁用
*/
disabled: boolean,
}
export type SubmitValuesType = {
/**
* 地址单选选中的值
*/
address?: AddressValueType,
/**
* 收件人名称 或 发货人名称
*/
name: string,
/**
* 省级code
*/
provinceCode: string,
/**
* 市级code
*/
cityCode: string,
/**
* 区级code
*/
districtCode: string,
/**
* 详细地址
*/
detailed: string,
/**
* 邮编
*/
postalCode: string,
/**
* 区号
*/
areaCode: string,
/**
* 手机号码
*/
phone: string,
/**
* 电话号码
*/
tel: string,
/**
* 是否是默认
*/
isDefault: boolean,
}
const AddressSelect: React.FC<IProps> = (props) => {
const {
addressType = 2,
value,
onChange,
isDefaultAddress = false,
disabled = false,
} = props;
const [list, setList] = useState<AddressValueType[]>([]);
const [internalValue, setInternalValue] = useState<AddressValueType>();
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);
}
};
const getAddressList = () => {
const fetchAction = addressType === 2 ? PublicApi.getLogisticsSelectListShipperAddress() : PublicApi.getLogisticsSelectListReceiverAddress();
fetchAction.then((res: IRequestSuccess<AddressItemType[]>) => {
if (res.code === 1000) {
const defaultItem = res.data?.find((item) => item.isDefault);
const listArr = res.data?.map(({ shipperName, receiverName, ...rest }) => ({
name: shipperName || receiverName,
...rest,
}))
setList(listArr);
// 这里处理如果设置了回调默认地址,然后进行了删除这条默认地址地址操作
// 之后重新请求了列表,但因为之前的默认地址被删除了,需要重新置空地址值
if (
isDefaultAddress
&& value
&& value.id
&& !listArr.find((item) => item.id === value.id)
) {
if (!('value' in props)) {
setInternalValue(undefined);
}
triggerChange(undefined);
}
if (isDefaultAddress && defaultItem && !disabled) {
const { shipperName, receiverName, ...rest } = defaultItem;
const next = {
name: shipperName || receiverName,
...rest,
};
if (!('value' in props)) {
setInternalValue(next);
}
triggerChange(next);
}
}
}).catch((err) => {
console.warn(err);
});
};
// 获取手机code
const fetchTelCode = async () => {
const { data, code } = await PublicApi.getManageCountryAreaGetTelCode();
if (code === 1000) {
return data;
}
return [];
};
useEffect(() => {
if ('value' in props) {
setInternalValue(value);
}
}, [value]);
useEffect(() => {
getAddressList();
}, []);
const handleVisibleDrawer = (flag?: boolean) => {
setVisibleDrawer(!!flag);
};
const handleSelectChange = (value: number) => {
const current = list.find((item) => item.id === value);
if (!('value' in props)) {
setInternalValue(current);
}
if (current) {
triggerChange(current);
}
};
const handleSubmit = async (values: SubmitValuesType) => {
let next = values.address;
// 有值表示是新增 或 修改操作
if (values.name) {
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,
id: 0,
provinceName,
cityName,
districtName,
address: detailed,
isDefault: isDefault ? 1 : 0,
};
// 新增地址
if (!editAddressId.current) {
try {
setSubmitLoading(true);
const addRes = addressType === 2
? await PublicApi.postLogisticsShipperAddressAdd({
...commonPayload,
shipperName: name,
})
: await PublicApi.postLogisticsReceiverAddressAdd({
...commonPayload,
receiverName: name,
});
if (addRes.code === 1000) {
next = {
fullAddress: `${provinceName}${cityName}${districtName}`,
id: addRes.data?.id,
isDefault: values.isDefault ? 1 : 0,
name: values.name,
phone: values.tel,
};
// 重新获取列表,打新添加的内容加载出来
getAddressList();
formActions.reset({ selector: 'ADDRESS_NEW.*', validate: false });
formActions.setFieldState('ADDRESS_NEW', state => {
state.visible = false;
});
}
setSubmitLoading(false);
} catch (error) {
console.warn(error)
}
}
// 编辑地址
if (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);
}
triggerChange(next);
handleVisibleDrawer(false);
};
const useFields = (): any => (
useMemo(() => ({
AddressRadioGroup,
}), [])
);
const createRichTextUtils = () => {
return {
required(text) {
return React.createElement('div', { className: styles['label-required'] }, text);
},
}
}
const handleAddAddress = async () => {
formActions.reset({ selector: 'ADDRESS_NEW.*', validate: false });
formActions.setFieldState('ADDRESS_NEW', state => {
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,
})));
});
};
const AddButton = useMemo(() => {
return () => (
<div>
<Button onClick={handleAddAddress}>{`新增${addressType === 2 ? '发货' : '收货'}地址`}</Button>
<Divider style={{ marginBottom: 4 }} />
</div>
);
}, []);
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,
label: `${item.name} ${item.fullAddress} ${item.phone}`,
}));
}, [list]);
return (
<AddressSelectContextProvider
value={{
addressList: list,
refresh: getAddressList,
}}
>
<div className={styles['address-select']}>
<div className={styles['address-select-input']}>
<Select
options={options}
value={value?.id}
onChange={handleSelectChange}
disabled={disabled}
style={{
width: '100%',
}}
/>
</div>
<Button
onClick={() => handleVisibleDrawer(true)}
className={styles['address-select-action']}
disabled={disabled}
>
管理
</Button>
</div>
<Drawer
title="更改收货地址信息"
width={800}
onClose={() => handleVisibleDrawer(false)}
visible={visibleDrawer}
footer={
<div
style={{
textAlign: 'right',
}}
>
<Button onClick={() => handleVisibleDrawer(false)} style={{ marginRight: 16 }}>
取 消
</Button>
<Button
onClick={() => formActions.submit()}
type="primary"
loading={submitLoading}
>
确 定
</Button>
</div>
}
>
<NiceForm
previewPlaceholder="' '"
components={{
AddButton,
}}
expressionScope={{
handleEditAddress,
...createRichTextUtils(),
}}
value={{
address: internalValue,
}}
fields={useFields()}
effects={($, { setFieldState }) => {
onFormInit$().subscribe(() => {
setFieldState('address', (state) => {
state.props['x-component-props'] = {
...(state.props['x-component-props'] || {}),
isDefaultAddress,
addressType,
};
});
});
useLinkEnumEffect('areaResponses', result =>
result.map(v => ({
label: v.name,
value: v.code,
})),
'code'
);
useAsyncSelect('areaCode', fetchTelCode);
}}
actions={formActions}
schema={useMemo(() => createSchema(addressType), [addressType])}
onSubmit={values => handleSubmit(values)}
/>
</Drawer>
</AddressSelectContextProvider>
);
};
export default AddressSelect;
/*
* @Author: XieZhiXiong
* @Date: 2021-08-05 10:28:06
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-08-11 20:05:50
* @Description: 地址选择 FormItem
*/
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';
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
import NiceForm from '@/components/NiceForm';
import { createSchema } from './schema';
import { AddressSelectContextProvider } from './context';
import { AddressItemType, AddressValueType } from './components/AddressRadioGroup';
import AddressRadioGroup from './components/AddressRadioGroupFormilyItem';
import styles from './index.less';
const formActions = createFormActions();
const {
onFormInit$,
} = FormEffectHooks;
interface IProps {
/**
* 类型:1 收货地址 2 发货地址,默认 2
*/
addressType?: 1 | 2,
/**
* 值
*/
value?: AddressValueType,
/**
* 选择触发改变
*/
onChange?: (value: AddressValueType) => void,
/**
* 是否默认选择 默认地址,是的话会触发 onChange value为默认地址,默认为false
*/
isDefaultAddress?: boolean,
/**
* 是否禁用
*/
disabled: boolean,
}
export type SubmitValuesType = {
/**
* 地址单选选中的值
*/
address?: AddressValueType,
/**
* 收件人名称 或 发货人名称
*/
name: string,
/**
* 省级code
*/
provinceCode: string,
/**
* 市级code
*/
cityCode: string,
/**
* 区级code
*/
districtCode: string,
/**
* 详细地址
*/
detailed: string,
/**
* 邮编
*/
postalCode: string,
/**
* 区号
*/
areaCode: string,
/**
* 手机号码
*/
phone: string,
/**
* 电话号码
*/
tel: string,
/**
* 是否是默认
*/
isDefault: boolean,
}
const AddressSelect: React.FC<IProps> = (props) => {
const {
addressType = 2,
value,
onChange,
isDefaultAddress = false,
disabled = false,
} = props;
const [list, setList] = useState<AddressValueType[]>([]);
const [internalValue, setInternalValue] = useState<AddressValueType>();
const [visibleDrawer, setVisibleDrawer] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false);
// 记录当前编辑的地址id
const editAddressId = useRef<number | null>(null);
// 记录是否是新增或编辑操作
const actionFlagRef = useRef<boolean>(false);
const triggerChange = (value: AddressValueType) => {
if (onChange) {
onChange(value);
}
};
const getAddressList = () => {
const fetchAction = addressType === 2 ? PublicApi.getLogisticsSelectListShipperAddress() : PublicApi.getLogisticsSelectListReceiverAddress();
fetchAction.then((res: IRequestSuccess<AddressItemType[]>) => {
if (res.code === 1000) {
const defaultItem = res.data?.find((item) => item.isDefault);
const listArr = res.data?.map(({ shipperName, receiverName, ...rest }) => ({
name: shipperName || receiverName,
...rest,
}))
setList(listArr);
// 这里处理如果设置了回调默认地址,然后进行了删除这条默认地址地址操作
// 之后重新请求了列表,但因为之前的默认地址被删除了,需要重新置空地址值
if (
isDefaultAddress
&& value
&& value.id
&& !listArr.find((item) => item.id === value.id)
) {
if (!('value' in props)) {
setInternalValue(undefined);
}
triggerChange(undefined);
}
if (isDefaultAddress && defaultItem && !disabled && !actionFlagRef.current) {
const { shipperName, receiverName, ...rest } = defaultItem;
const next = {
name: shipperName || receiverName,
...rest,
};
if (!('value' in props)) {
setInternalValue(next);
}
triggerChange(next);
}
}
}).catch((err) => {
console.warn(err);
});
};
// 获取手机code
const fetchTelCode = async () => {
const { data, code } = await PublicApi.getManageCountryAreaGetTelCode();
if (code === 1000) {
return data;
}
return [];
};
useEffect(() => {
if ('value' in props) {
setInternalValue(value);
}
}, [value]);
useEffect(() => {
getAddressList();
}, []);
const handleVisibleDrawer = (flag?: boolean) => {
setVisibleDrawer(!!flag);
};
const handleSelectChange = (value: number) => {
const current = list.find((item) => item.id === value);
if (!('value' in props)) {
setInternalValue(current);
}
if (current) {
triggerChange(current);
}
};
const handleSubmit = async (values: SubmitValuesType) => {
let next = values.address;
// 有值表示是新增 或 修改操作
if (values.name) {
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,
id: 0,
provinceName,
cityName,
districtName,
address: detailed,
isDefault: isDefault ? 1 : 0,
};
// 新增地址
if (!editAddressId.current) {
try {
setSubmitLoading(true);
const addRes = addressType === 2
? await PublicApi.postLogisticsShipperAddressAdd({
...commonPayload,
shipperName: name,
})
: await PublicApi.postLogisticsReceiverAddressAdd({
...commonPayload,
receiverName: name,
});
if (addRes.code === 1000) {
next = {
fullAddress: `${provinceName}${cityName}${districtName}`,
id: addRes.data?.id,
isDefault: values.isDefault ? 1 : 0,
name: values.name,
phone: values.phone,
};
// 重新获取列表,打新添加的内容加载出来
// 不触发默认值提交
actionFlagRef.current = true;
getAddressList();
formActions.reset({ selector: 'ADDRESS_NEW.*', validate: false });
formActions.setFieldState('ADDRESS_NEW', state => {
state.visible = false;
});
}
setSubmitLoading(false);
} catch (error) {
console.warn(error)
}
}
// 编辑地址
if (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.phone,
};
// 重新获取列表,打新添加的内容加载出来
// 不触发默认值提交
actionFlagRef.current = true;
getAddressList();
editAddressId.current = null;
formActions.reset({ selector: 'ADDRESS_NEW.*' });
}
setSubmitLoading(false);
} catch (error) {
console.warn(error)
}
}
}
if (!('value' in props)) {
setInternalValue(next);
}
triggerChange(next);
handleVisibleDrawer(false);
};
const useFields = (): any => (
useMemo(() => ({
AddressRadioGroup,
}), [])
);
const createRichTextUtils = () => {
return {
required(text) {
return React.createElement('div', { className: styles['label-required'] }, text);
},
}
}
const handleAddAddress = async () => {
formActions.reset({ selector: 'ADDRESS_NEW.*', validate: false });
const visible = formActions.getFieldState('ADDRESS_NEW', targetState => {
return targetState.visible;
});
formActions.setFieldState('ADDRESS_NEW', state => {
state.visible = !visible;
});
formActions.setFieldState('ADD_ACTION', state => {
state.props['x-component-props'] = {
flag: visible,
};
});
// 先获取地区信息
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 AddButton = useMemo(() => {
return (props) => {
const { flag = true } = props;
return (
<div>
<Button onClick={handleAddAddress}>
{flag ? `新增${addressType === 2 ? '发货' : '收货'}地址` : '取消'}
</Button>
<Divider style={{ marginBottom: 4 }} />
</div>
);
}
}, []);
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;
});
formActions.setFieldState('ADD_ACTION', state => {
state.props['x-component-props'] = {
flag: false,
};
});
editAddressId.current = id;
} else {
message.warn('获取地址信息失败');
}
} catch (error) {
console.warn(error);
}
};
const options = useMemo(() => {
return list.map((item) => ({
value: item.id,
label: `${item.name} ${item.fullAddress} ${item.phone}`,
}));
}, [list]);
return (
<AddressSelectContextProvider
value={{
addressList: list,
refresh: getAddressList,
}}
>
<div className={styles['address-select']}>
<div className={styles['address-select-input']}>
<Select
options={options}
value={value?.id}
onChange={handleSelectChange}
disabled={disabled}
style={{
width: '100%',
}}
/>
</div>
<Button
onClick={() => handleVisibleDrawer(true)}
className={styles['address-select-action']}
disabled={disabled}
>
管理
</Button>
</div>
<Drawer
title="更改收货地址信息"
width={800}
onClose={() => handleVisibleDrawer(false)}
visible={visibleDrawer}
footer={
<div
style={{
textAlign: 'right',
}}
>
<Button onClick={() => handleVisibleDrawer(false)} style={{ marginRight: 16 }}>
取 消
</Button>
<Button
onClick={() => formActions.submit()}
type="primary"
loading={submitLoading}
>
确 定
</Button>
</div>
}
>
<NiceForm
previewPlaceholder="' '"
components={{
AddButton,
}}
expressionScope={{
handleEditAddress,
...createRichTextUtils(),
}}
value={{
address: internalValue,
}}
fields={useFields()}
effects={($, { setFieldState }) => {
onFormInit$().subscribe(() => {
setFieldState('address', (state) => {
state.props['x-component-props'] = {
...(state.props['x-component-props'] || {}),
isDefaultAddress,
addressType,
};
});
});
useLinkEnumEffect('areaResponses', result =>
result.map(v => ({
label: v.name,
value: v.code,
})),
'code'
);
useAsyncSelect('areaCode', fetchTelCode);
}}
actions={formActions}
schema={useMemo(() => createSchema(addressType), [addressType])}
onSubmit={values => handleSubmit(values)}
/>
</Drawer>
</AddressSelectContextProvider>
);
};
export default AddressSelect;
......@@ -2,7 +2,7 @@
* @Author: XieZhiXiong
* @Date: 2021-08-05 14:02:46
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-08-10 16:58:04
* @LastEditTime: 2021-08-11 18:07:18
* @Description:
*/
import { ISchema } from '@formily/antd';
......@@ -192,12 +192,16 @@ export const createSchema = (addressType = 2): ISchema => {
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
columns: 3,
full: true,
},
properties: {
areaCode: {
type: 'string',
enum: [],
'x-mega-props': {
span: 1,
},
'x-component-props': {
placeholder: '请选择',
},
......@@ -207,7 +211,7 @@ export const createSchema = (addressType = 2): ISchema => {
type: 'string',
required: true,
'x-mega-props': {
span: 3,
span: 2,
},
'x-component-props': {
placeholder: '请输入你的手机号码',
......
......@@ -314,3 +314,8 @@
padding-bottom: 6px;
}
}
// 隐藏表格头 td 的 竖线
.ant-table-thead > tr > th::before {
display: none;
}
\ No newline at end of file
......@@ -113,10 +113,10 @@ const purchaseList: React.FC<Iprops> = ({
</div>
<div className={style.text}>
<p>商品ID:{record.associatedDataId}</p>
<p className={style.nowrap}>商品名称:{record.associatedGoods}</p>
<p className={style.nowrap}>商品名称:{record.associatedMaterielName}</p>
</div>
<div className={style.text}>
<p>规格型号:{record.associatedType}</p>
<p>规格型号:{record.associatedGoods}</p>
<p>品类:{record.associatedCategory}</p>
</div>
<div className={style.text}>
......
......@@ -121,7 +121,7 @@ const FormList = (props: any) => {
name: _filter(sourceType, item, ['', 'name', 'name', 'name']),//物料名称
type: _filter(sourceType, item, ['', 'model', 'type', 'model']),//物料规格
customerCategory: { // 品类
name: _filter(sourceType, item, ['', 'category', 'brandName', '']),
name: _filter(sourceType, item, ['', 'category', 'categoryName', '']),
category: _filter(sourceType, item, ['', 'category', '', '']),
id: _filterArr(sourceType, item, ['', 'goodsId', 'categoryId', 'ids']),
},
......@@ -238,7 +238,7 @@ const FormList = (props: any) => {
render: (text: any, record: any, index: number) =>
<Form.Item
name={`price${index}`}
initialValue={text}
initialValue={Number(text).toFixed(2)}
rules={[{ required: true, message: '请输入' }]}
>
<Input
......@@ -247,7 +247,7 @@ const FormList = (props: any) => {
}}
onChange={(e) => setInput(e, 'price', index)}
addonBefore="¥"
defaultValue={text}
defaultValue={Number(text).toFixed(2)}
disabled={Object.keys(Row).length != 0 ? true : false}
/>
</Form.Item>
......@@ -320,8 +320,8 @@ const FormList = (props: any) => {
isHasTax: item.isHasTax,
taxRate: item.taxRate,
purchaseCount: item.purchaseCount,
price: Number(item.price),
bidCount: item.bidCount,
price: Number(item.price).toFixed(2),
bidCount: Number(item.bidCount).toFixed(2),
bidAmount: item.bidCount && item.price ? (Number(item.bidCount) * Number(item.price)).toFixed(2) : '',
associatedMaterielName: Object.keys(Row).length === 0 ? '' : item.associatedMaterielName,
associatedGoods: Object.keys(Row).length === 0 ? '' : item.associatedGoods,
......
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { OrderTypeMap, PurchaseOrderInsideWorkStateTexts, PurchaseOrderOutWorkStateTexts } from '@/constants/order';
/**
* 除了订单必填字段, 默认
*/
......@@ -42,30 +41,24 @@ export const tableListSchema: ISchema = {
"x-component-props": {
placeholder: '请选择订单类型'
},
enum: Object.keys(OrderTypeMap).map(item => ({
label: OrderTypeMap[item],
value: item,
}))
enum: []
},
"externalState": {
type: 'string',
"x-component-props": {
placeholder: '请选择外部状态'
},
enum: Object.keys(PurchaseOrderOutWorkStateTexts).map(item => ({
label: PurchaseOrderOutWorkStateTexts[item],
value: item,
}))
enum: []
},
"interiorState": {
type: 'string',
"x-component-props": {
placeholder: '请选择内部状态'
},
enum: Object.keys(PurchaseOrderInsideWorkStateTexts).map(item => ({
label: PurchaseOrderInsideWorkStateTexts[item],
value: item,
}))
enum: []
},
"[startCreateTime,endCreateTime]": {
type: 'array',
......
......@@ -2,7 +2,7 @@
* @Author: XieZhiXiong
* @Date: 2021-05-27 16:13:26
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-06-01 17:58:12
* @LastEditTime: 2021-08-12 09:36:50
* @Description:
*/
import { ISchema } from '@formily/antd';
......@@ -155,7 +155,7 @@ const formSchema: ISchema = {
type: 'object',
'x-component': 'TabPane',
'x-component-props': {
tab: '会员更流程',
tab: '会员更流程',
},
properties: {
MEGA_LAYOUT1: {
......
/*
* @Author: XieZhiXiong
* @Date: 2021-01-06 11:36:35
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-08-11 19:55:25
* @Description:
*/
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import {
ORDER_TYPE2_INQUIRY,
ORDER_TYPE2_DEMAND,
ORDER_TYPE2_SPOT,
ORDER_TYPE2_CENTRALIZED,
ORDER_TYPE2_POINTS,
ORDER_TYPE2_CHANNEL_DIRECT,
ORDER_TYPE2_CHANNEL_SPOT,
ORDER_TYPE2_CHANNEL_POINTS,
ORDER_TYPE2,
} from '@/constants/order';
import { GlobalConfig } from '@/global/config';
const orderTypeArr = GlobalConfig.web.orderType.map((item) => ({
label: item.platformWayName,
value: item.id,
}));
export const listSearchSchema: ISchema = {
type: 'object',
......@@ -65,40 +67,7 @@ export const listSearchSchema: ISchema = {
orderType: {
type: 'string',
default: undefined,
enum: [
{
label: ORDER_TYPE2[ORDER_TYPE2_INQUIRY],
value: ORDER_TYPE2_INQUIRY,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_DEMAND],
value: ORDER_TYPE2_DEMAND,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_SPOT],
value: ORDER_TYPE2_SPOT,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_CENTRALIZED],
value: ORDER_TYPE2_CENTRALIZED,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_POINTS],
value: ORDER_TYPE2_POINTS,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_CHANNEL_DIRECT],
value: ORDER_TYPE2_CHANNEL_DIRECT,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_CHANNEL_SPOT],
value: ORDER_TYPE2_CHANNEL_SPOT,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_CHANNEL_POINTS],
value: ORDER_TYPE2_CHANNEL_POINTS,
},
],
enum: orderTypeArr,
'x-component-props': {
placeholder: '订单类型',
allowClear: true,
......
/*
* @Author: XieZhiXiong
* @Date: 2021-01-06 11:36:35
* @LastEditors: XieZhiXiong
* @LastEditTime: 2021-08-11 19:55:18
* @Description:
*/
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import {
ORDER_TYPE2_INQUIRY,
ORDER_TYPE2_DEMAND,
ORDER_TYPE2_SPOT,
ORDER_TYPE2_CENTRALIZED,
ORDER_TYPE2_POINTS,
ORDER_TYPE2_CHANNEL_DIRECT,
ORDER_TYPE2_CHANNEL_SPOT,
ORDER_TYPE2_CHANNEL_POINTS,
ORDER_TYPE2,
} from '@/constants/order';
import { GlobalConfig } from '@/global/config';
const orderTypeArr = GlobalConfig.web.orderType.map((item) => ({
label: item.platformWayName,
value: item.id,
}));
export const listSearchSchema: ISchema = {
type: 'object',
......@@ -65,40 +67,7 @@ export const listSearchSchema: ISchema = {
type: {
type: 'string',
default: undefined,
enum: [
{
label: ORDER_TYPE2[ORDER_TYPE2_INQUIRY],
value: ORDER_TYPE2_INQUIRY,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_DEMAND],
value: ORDER_TYPE2_DEMAND,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_SPOT],
value: ORDER_TYPE2_SPOT,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_CENTRALIZED],
value: ORDER_TYPE2_CENTRALIZED,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_POINTS],
value: ORDER_TYPE2_POINTS,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_CHANNEL_DIRECT],
value: ORDER_TYPE2_CHANNEL_DIRECT,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_CHANNEL_SPOT],
value: ORDER_TYPE2_CHANNEL_SPOT,
},
{
label: ORDER_TYPE2[ORDER_TYPE2_CHANNEL_POINTS],
value: ORDER_TYPE2_CHANNEL_POINTS,
},
],
enum: orderTypeArr,
'x-component-props': {
placeholder: '订单类型',
allowClear: 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