Commit f0d9f677 authored by XieZhiXiong's avatar XieZhiXiong

chore: 隔绝样式影响、补充属性

parent ecbf0961
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: XieZhiXiong * @Author: XieZhiXiong
* @Date: 2021-08-05 14:54:18 * @Date: 2021-08-05 14:54:18
* @LastEditors: XieZhiXiong * @LastEditors: XieZhiXiong
* @LastEditTime: 2021-08-07 16:36:14 * @LastEditTime: 2021-08-10 16:42:18
* @Description: * @Description:
*/ */
import React from 'react'; import React from 'react';
...@@ -20,7 +20,7 @@ const AddressRadioGroupFormilyItem = connect()((props) => { ...@@ -20,7 +20,7 @@ const AddressRadioGroupFormilyItem = connect()((props) => {
...rest ...rest
} = props; } = props;
return ( return (
<div style={{ flex: 1 }}> <div style={{ flex: 1, overflow: 'hidden' }}>
<AddressRadioGroup <AddressRadioGroup
addressType={addressType} addressType={addressType}
isDefault={isDefault} isDefault={isDefault}
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
&-input { &-input {
flex: 1; flex: 1;
overflow: hidden;
} }
&-action { &-action {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: XieZhiXiong * @Author: XieZhiXiong
* @Date: 2021-08-05 10:28:06 * @Date: 2021-08-05 10:28:06
* @LastEditors: XieZhiXiong * @LastEditors: XieZhiXiong
* @LastEditTime: 2021-08-10 10:20:55 * @LastEditTime: 2021-08-10 16:55:26
* @Description: 地址选择 FormItem * @Description: 地址选择 FormItem
*/ */
import React, { useState, useEffect, useMemo, useRef } from 'react'; import React, { useState, useEffect, useMemo, useRef } from 'react';
...@@ -148,7 +148,7 @@ const AddressSelect: React.FC<IProps> = (props) => { ...@@ -148,7 +148,7 @@ const AddressSelect: React.FC<IProps> = (props) => {
triggerChange(undefined); triggerChange(undefined);
} }
if (isDefaultAddress && defaultItem) { if (isDefaultAddress && defaultItem && !disabled) {
const { shipperName, receiverName, ...rest } = defaultItem; const { shipperName, receiverName, ...rest } = defaultItem;
const next = { const next = {
name: shipperName || receiverName, name: shipperName || receiverName,
...@@ -427,12 +427,17 @@ const AddressSelect: React.FC<IProps> = (props) => { ...@@ -427,12 +427,17 @@ const AddressSelect: React.FC<IProps> = (props) => {
}} }}
> >
<div className={styles['address-select']}> <div className={styles['address-select']}>
<Select <div className={styles['address-select-input']}>
options={options} <Select
value={value?.id} options={options}
onChange={handleSelectChange} value={value?.id}
disabled={disabled} onChange={handleSelectChange}
/> disabled={disabled}
style={{
width: '100%',
}}
/>
</div>
<Button <Button
onClick={() => handleVisibleDrawer(true)} onClick={() => handleVisibleDrawer(true)}
className={styles['address-select-action']} className={styles['address-select-action']}
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: XieZhiXiong * @Author: XieZhiXiong
* @Date: 2021-08-05 14:02:46 * @Date: 2021-08-05 14:02:46
* @LastEditors: XieZhiXiong * @LastEditors: XieZhiXiong
* @LastEditTime: 2021-08-10 14:05:13 * @LastEditTime: 2021-08-10 16:58:04
* @Description: * @Description:
*/ */
import { ISchema } from '@formily/antd'; import { ISchema } from '@formily/antd';
...@@ -14,228 +14,238 @@ export const createSchema = (addressType = 2): ISchema => { ...@@ -14,228 +14,238 @@ export const createSchema = (addressType = 2): ISchema => {
return { return {
type: 'object', type: 'object',
properties: { properties: {
ADDRESS_LIST: { MEGA_LAYOUT: {
type: 'object', type: 'object',
'x-component': 'FlagBox', 'x-component': 'Mega-Layout',
'x-component-props': { 'x-component-props': {
title: `选择${typeCN}地址`, grid: false,
border: false,
}, },
properties: { properties: {
MEGA_LAYOUT_1: { ADDRESS_LIST: {
type: 'object', type: 'object',
'x-component': 'Mega-Layout', 'x-component': 'FlagBox',
'x-component-props': { 'x-component-props': {
wrapperCol: 24, title: `选择${typeCN}地址`,
border: false,
}, },
properties: { properties: {
address: { MEGA_LAYOUT_1: {
type: 'string', type: 'object',
'x-component': 'AddressRadioGroup', 'x-component': 'Mega-Layout',
'x-component-props': { 'x-component-props': {
onClickEdit: '{{ handleEditAddress }}', wrapperCol: 24,
},
properties: {
address: {
type: 'string',
'x-component': 'AddressRadioGroup',
'x-component-props': {
onClickEdit: '{{ handleEditAddress }}',
},
},
}, },
}, },
}, },
}, },
}, ADD_ACTION: {
},
ADD_ACTION: {
type: 'object',
'x-component': 'AddButton',
},
ADDRESS_NEW: {
type: 'object',
'x-component': 'FlagBox',
'x-component-props': {
title: `填写${typeCN}信息`,
border: false,
},
visible: false,
properties: {
MEGA_LAYOUT_2: {
type: 'object', type: 'object',
'x-component': 'mega-layout', 'x-component': 'AddButton',
},
ADDRESS_NEW: {
type: 'object',
'x-component': 'FlagBox',
'x-component-props': { 'x-component-props': {
labelCol: 4, title: `填写${typeCN}信息`,
wrapperCol: 20, border: false,
labelAlign: 'left',
}, },
visible: false,
properties: { properties: {
name: { MEGA_LAYOUT_2: {
type: 'string',
title: `${operator}人`,
'x-component-props': {
placeholder: '请输入',
},
'x-rules': [
{
required: true,
message: `请输入${operator}人`,
},
{
limitByte: true, // 自定义校验规则
maxByte: 20,
},
],
required: true,
},
MEGA_LAYOUT_2_1: {
type: 'object', type: 'object',
'x-component': 'mega-layout', 'x-component': 'mega-layout',
'x-component-props': { 'x-component-props': {
label: `{{ required("${typeCN}地区") }}`, full: false,
wrapperCol: 24, labelCol: 4,
wrapperCol: 20,
labelAlign: 'left',
}, },
required: true,
properties: { properties: {
MEGA_LAYOUT_2_1_1: { name: {
type: 'string',
title: `${operator}人`,
'x-component-props': {
placeholder: '请输入',
},
'x-rules': [
{
required: true,
message: `请输入${operator}人`,
},
{
limitByte: true, // 自定义校验规则
maxByte: 20,
},
],
required: true,
},
MEGA_LAYOUT_2_1: {
type: 'object', type: 'object',
'x-component': 'mega-layout', 'x-component': 'mega-layout',
'x-component-props': { 'x-component-props': {
grid: true, label: `{{ required("${typeCN}地区") }}`,
full: true, wrapperCol: 24,
autoRow: true,
columns: 3,
}, },
required: true,
properties: { properties: {
provinceCode: { MEGA_LAYOUT_2_1_1: {
type: 'string', type: 'object',
enum: [], 'x-component': 'mega-layout',
'x-component-props': { 'x-component-props': {
placeholder: '-省份/直辖市-', grid: true,
full: true,
autoRow: true,
columns: 3,
}, },
'x-linkages': [ properties: {
{ provinceCode: {
type: 'value:linkage', type: 'string',
condition: '{{ !!$self.value }}', // $self.value 不生效不知道咋滴 enum: [],
origin: 'provinceCode', 'x-component-props': {
target: 'cityCode', placeholder: '-省份/直辖市-',
},
'x-linkages': [
{
type: 'value:linkage',
condition: '{{ !!$self.value }}', // $self.value 不生效不知道咋滴
origin: 'provinceCode',
target: 'cityCode',
},
],
required: true,
}, },
], cityCode: {
required: true, type: 'string',
}, enum: [],
cityCode: { 'x-component-props': {
type: 'string', placeholder: '-市-',
enum: [], },
'x-component-props': { 'x-linkages': [
placeholder: '-市-', {
}, type: 'value:linkage',
'x-linkages': [ condition: '{{ !!$self.value }}', // $self.value 不生效不知道咋滴
{ origin: 'cityCode',
type: 'value:linkage', target: 'districtCode',
condition: '{{ !!$self.value }}', // $self.value 不生效不知道咋滴 },
origin: 'cityCode', ],
target: 'districtCode', required: true,
},
districtCode: {
type: 'string',
enum: [],
'x-component-props': {
placeholder: '-区-',
},
required: true,
}, },
],
required: true,
},
districtCode: {
type: 'string',
enum: [],
'x-component-props': {
placeholder: '-区-',
}, },
required: true,
}, },
}, },
}, },
}, detailed: {
}, type: 'string',
detailed: { title: '详细地址',
type: 'string', 'x-component-props': {
title: '详细地址', placeholder: '请输入详细地址(最长60个字符,30个汉字)',
'x-component-props': { },
placeholder: '请输入详细地址(最长60个字符,30个汉字)', 'x-rules': [
}, {
'x-rules': [ required: true,
{ message: '请输入详细地址',
required: true, },
message: '请输入详细地址', {
limitByte: true, // 自定义校验规则
maxByte: 60,
}
],
}, },
{ postalCode: {
limitByte: true, // 自定义校验规则 type: 'string',
maxByte: 60, title: '邮编',
} 'x-component-props': {},
], 'x-rules': [
}, {
postalCode: { limitByte: true, // 自定义校验规则
type: 'string', maxByte: 20,
title: '邮编', }
'x-component-props': {}, ],
'x-rules': [ },
{ MEGA_LAYOUT_2_2: {
limitByte: true, // 自定义校验规则
maxByte: 20,
}
],
},
MEGA_LAYOUT_2_2: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
label: '{{ required("手机号码") }}',
wrapperCol: 24,
},
properties: {
MEGA_LAYOUT2_1: {
type: 'object', type: 'object',
'x-component': 'mega-layout', 'x-component': 'mega-layout',
'x-component-props': { 'x-component-props': {
grid: true, label: '{{ required("手机号码") }}',
full: true, wrapperCol: 24,
}, },
properties: { properties: {
areaCode: { MEGA_LAYOUT2_1: {
type: 'string', type: 'object',
enum: [], 'x-component': 'mega-layout',
'x-component-props': {
placeholder: '请选择',
},
required: true,
},
phone: {
type: 'string',
required: true,
'x-mega-props': {
span: 3,
},
'x-component-props': { 'x-component-props': {
placeholder: '请输入你的手机号码', grid: true,
maxLength: 11, full: true,
}, },
'x-rules': [ properties: {
{ areaCode: {
pattern: PATTERN_MAPS.phone, type: 'string',
message: '请输入正确格式的手机号', enum: [],
'x-component-props': {
placeholder: '请选择',
},
required: true,
}, },
], phone: {
type: 'string',
required: true,
'x-mega-props': {
span: 3,
},
'x-component-props': {
placeholder: '请输入你的手机号码',
maxLength: 11,
},
'x-rules': [
{
pattern: PATTERN_MAPS.phone,
message: '请输入正确格式的手机号',
},
],
},
},
}, },
}, },
}, },
}, tel: {
}, type: 'string',
tel: { title: '电话号码',
type: 'string', 'x-component-props': {},
title: '电话号码', 'x-rules': [
'x-component-props': {}, {
'x-rules': [ pattern: PATTERN_MAPS.tel,
{ message: '请输入正确格式的电话号码',
pattern: PATTERN_MAPS.tel, },
message: '请输入正确格式的电话号码', ],
}, },
], isDefault: {
}, type: 'boolean',
isDefault: { title: '是否默认',
type: 'boolean', 'x-component': 'Switch',
title: '是否默认', },
'x-component': 'Switch', },
}, },
}, },
}, },
}, },
}, }
}, },
}; };
}; };
\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: XieZhiXiong * @Author: XieZhiXiong
* @Date: 2021-08-05 11:26:43 * @Date: 2021-08-05 11:26:43
* @LastEditors: XieZhiXiong * @LastEditors: XieZhiXiong
* @LastEditTime: 2021-08-05 11:30:21 * @LastEditTime: 2021-08-10 16:49:14
* @Description: * @Description:
*/ */
import React from 'react'; import React from 'react';
...@@ -15,12 +15,16 @@ const CustomAddressSelect = connect()((props) => { ...@@ -15,12 +15,16 @@ const CustomAddressSelect = connect()((props) => {
value, value,
onChange, onChange,
addressType, addressType,
isDefault,
disabled,
...rest ...rest
} = props; } = props;
return ( return (
<div style={{ flex: 1 }}> <div style={{ flex: 1, overflow: 'hidden' }}>
<AddressSelect <AddressSelect
addressType={addressType} addressType={addressType}
isDefault={isDefault}
disabled={disabled}
value={value} value={value}
onChange={onChange} onChange={onChange}
{...rest} {...rest}
......
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