Skip to content

J
jinfa-admin
Commit f14d4f68 authored by GuanHua's avatar GuanHua
Browse files
Options

fix: 品类导航表单校验写法

parent 4824ffa2
Hide whitespace changes
Inline Side-by-side
Showing with 225 additions and 206 deletions
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/cardNavItem/index.less
View file @ f14d4f68
...@@ -139,6 +139,7 @@ ...@@ -139,6 +139,7 @@
&-activity { &-activity {
height: 56px; height: 56px;
width: 100%;
border: 1px solid #EDEEEF; border: 1px solid #EDEEEF;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
......
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/cardNavItem/index.tsx
View file @ f14d4f68
...@@ -215,46 +215,51 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => { ...@@ -215,46 +215,51 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
return [] return []
}, [property]) }, [property])
const _recordDetail = useMemo(() => { const recordDetail = () => {
if (record) { return useMemo(() => {
if (type === 1) { if (record) {
return ( if (type === 1) {
<div className={styles['banner-record-activity']}> return (
<img src={record?.logoUrl} /> <div className={styles['banner-record-activity']}>
<div className={styles['banner-record-activity-right']}> <img src={record?.logoUrl} />
<Tooltip title={record?.name}> <div className={styles['banner-record-activity-right']}>
<div className={styles['banner-record-activity-right-top']}>{record?.name}</div> <Tooltip title={record?.name}>
</Tooltip> <div className={styles['banner-record-activity-right-top']}>{record?.name}</div>
</Tooltip>
</div>
</div> </div>
</div> )
) }
} if (type === 2) {
if (type === 2) { return (
return ( <div className={styles['banner-record-activity']}>
<div className={styles['banner-record-activity']}> <img src={record?.templatePicUrl || record?.logoUrl} />
<img src={record?.templatePicUrl || record?.logoUrl} /> <div className={styles['banner-record-activity-right']}>
<div className={styles['banner-record-activity-right']}> <Tooltip title={record?.name}>
<Tooltip title={record?.name}> <div className={styles['banner-record-activity-right-top']}>{record?.name}</div>
<div className={styles['banner-record-activity-right-top']}>{record?.name}</div> </Tooltip>
{record?.type === 2 && <div className={styles['banner-record-activity-right-bottom']}>{record?.memberName}</div>}
</div>
<div className={styles['banner-record-activity-tag']}><StatusTag title={record?.type === 1 ? '平台' : '商家'} type={record?.type === 1 ? 'success' : 'primary'} /></div>
</div>
)
}
if (type === 4) {
return (
<div className={styles['banner-record-shop']}>
<img src={record?.logo} />
<Tooltip title={record?.memberName}>
<span>{record?.memberName}</span>
</Tooltip> </Tooltip>
{record?.type === 2 && <div className={styles['banner-record-activity-right-bottom']}>{record?.memberName}</div>}
</div> </div>
<div className={styles['banner-record-activity-tag']}><StatusTag title={record?.type === 1 ? '平台' : '商家'} type={record?.type === 1 ? 'success' : 'primary'} /></div> )
</div> }
)
}
if (type === 4) {
return (
<div className={styles['banner-record-shop']}>
<img src={record?.logo} />
<Tooltip title={record?.memberName}>
<span>{record?.memberName}</span>
</Tooltip>
</div>
)
} }
} return null
}, [type, record]) }, [type, record])
}
recordDetail.isFieldComponent = true
const _onShopClose = () => { const _onShopClose = () => {
console.log('close') console.log('close')
...@@ -265,20 +270,9 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => { ...@@ -265,20 +270,9 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
setActVisible(false); setActVisible(false);
} }
// const _onChoose = () => {
// const chooseType = fixtureContext?.formActions.getFieldValue('type')
// switch (chooseType) {
// case 2:
// setActVisible(true);
// break;
// case 1:
// case 4:
// setMixVisible(true);
// break;
// }
// }
const _onChoose = () => { const _onChoose = () => {
switch (type) { const chooseType = fixtureContext?.formActions.getFieldValue('type')
switch (chooseType) {
case 2: case 2:
setActVisible(true); setActVisible(true);
break; break;
...@@ -288,6 +282,17 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => { ...@@ -288,6 +282,17 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
break; break;
} }
} }
// const _onChoose = () => {
// switch (type) {
// case 2:
// setActVisible(true);
// break;
// case 1:
// case 4:
// setMixVisible(true);
// break;
// }
// }
const _onChooseConfirm = (record) => { const _onChooseConfirm = (record) => {
setRecord(record); setRecord(record);
switch (type) { switch (type) {
...@@ -327,7 +332,7 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => { ...@@ -327,7 +332,7 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
); );
}; };
const SelectBtn = <Button block onClick={() => _onChoose()}>选择</Button> const SelectBtn = <Button style={{ marginTop: 32 }} block onClick={() => _onChoose()}>选择</Button>
const formProps = { const formProps = {
// onSubmit: handleSubmit, // onSubmit: handleSubmit,
...@@ -352,12 +357,22 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => { ...@@ -352,12 +357,22 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
} }
}, },
actions: fixtureContext?.formActions, actions: fixtureContext?.formActions,
components: { FormilyUpload }, components: { FormilyUpload, recordDetail },
}; };
const handleSumit = (values) => { const handleSumit = (values) => {
console.log(values, 'values') const newProps: any = {
...values,
icon: values.icon[0].url
}
if (values.channel) {
newProps.id = values.channel
}
console.log(newProps, 'newProps')
changeProps({
title: values.name,
props: Object.assign({ ...props }, newProps)
});
} }
// 会员弹框筛选select值 // 会员弹框筛选select值
...@@ -381,154 +396,21 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => { ...@@ -381,154 +396,21 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
} }
} }
// return (
// <>
// <NiceForm
// value={formValue}
// {...formProps}
// onSubmit={handleSumit}
// schema={cardNavSchema}
// effects={($, actions) => {
// useAsyncInitSelect(['type', 'id', 'channel'], fetchSelectOptions)
// // useAsyncSelect('primary', fetchPrimaryOption, ["name", "id"]);
// // onFieldInputChange$('*(primary, secondary)').subscribe(fieldState => {
// // const { originAsyncData } = fieldState;
// // const target = originAsyncData.filter((_item) => _item.value === fieldState.value)[0];
// // actions.setFieldValue('title', target.label);
// // });
// }}
// />
// <MixDrawer
// onClose={_onShopClose}
// property={property}
// type={navType}
// onConfirm={_onChooseConfirm}
// visible={mixVisible}
// />
// <ActivityDrawer
// selectId={id}
// visible={actVisible}
// onClose={_onActClose}
// onConfirm={_onChooseConfirm}
// />
// </>
// )
return ( return (
<div className={styles['banner']}> <>
<div className={styles['banner-box']}> <NiceForm
<div className={styles['banner-box-label']}>名称</div> value={formValue}
<Input key={`${selectedKey}-name`} defaultValue={name} onBlur={(e) => _onChangeByKey(e.target.value, 'name', e.target.value)} /> {...formProps}
</div> onSubmit={handleSumit}
<div className={styles['banner-box']}> schema={cardNavSchema}
<div className={styles['banner-box-label']}>图片</div> effects={($, actions) => {
{ icon ? ( useAsyncInitSelect(['type', 'id', 'channel'], fetchSelectOptions)
<div className={styles['banner-box-icon']}> }}
{/* <img src={icon} /> */} />
<ImageBox width='100%' height={96} imgUrl={icon} direction='column' />
<div className={styles['banner-box-icon-cover']}>
<UploadImage
onChange={(url) => { _onChangeByKey(url, 'icon') }}
listType="text"
>
<div className={styles['banner-box-icon-cover-bottom']}>
添加图像
</div>
</UploadImage>
<DeleteOutlined className={styles['banner-box-icon-cover-delete']} onClick={() => { _onChangeByKey('', 'icon') }} />
</div>
</div>
) : (
<UploadImage
onChange={(url) => { _onChangeByKey(url, 'icon') }}
listType="text"
>
<div className={styles['banner-box-icon']}>
<img src={uploadImgIcon} className={styles['banner-box-icon-add']} />
<div className={styles['banner-box-icon-cover']}>
<div className={styles['banner-box-icon-cover-bottom']}>
添加图像
</div>
</div>
</div>
</UploadImage>
)}
</div>
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>导航链接</div>
<Row gutter={20} style={{ marginBottom: 16 }}>
<Col span={_showChoose ? 18 : 24}>
<Select key={`${selectedKey}-type`} defaultValue={type} onChange={(value) => _onChangeByKey(value, 'type')} style={{ width: '100%' }} >
{
RedirectTypeList.map(selectItem => <Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>)
}
</Select>
</Col>
{_showChoose && <Col span={6}>
<Button block onClick={_onChoose}>选择</Button>
</Col>}
</Row>
{_recordDetail}
</div>
{
type === 3 && (
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>品类</div>
<Row gutter={20} style={{ marginBottom: 16 }}>
<Col span={24}>
<Select
key={`${selectedKey}-type`}
value={(categoryList && categoryList.some((item) => item.value === id)) ? id : undefined}
onChange={(value) => _onChangeByKey(value, 'id')}
style={{ width: '100%' }}
>
{
categoryList && categoryList.map(selectItem => (
<Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>
))
}
</Select>
</Col>
</Row>
</div>
)
}
{
type === 5 && (
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>频道</div>
<Row gutter={20} style={{ marginBottom: 16 }}>
<Col span={24}>
<Select
key={`${selectedKey}-type`}
value={_selectOption.some((item) => item.value ===id) ? id : undefined}
onChange={(value) => _onChangeByKey(value, 'id')}
style={{ width: '100%' }}
>
{
_selectOption.map(selectItem => (
<Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>
))
}
</Select>
</Col>
</Row>
</div>
)
}
{
type === 6 && (
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>链接地址</div>
<Input key={`${selectedKey}-name`} defaultValue={url} onBlur={(e) => _onChangeByKey(e.target.value, 'url')} />
</div>
)
}
<MixDrawer <MixDrawer
onClose={_onShopClose} onClose={_onShopClose}
property={property} property={property}
type={type} type={navType}
onConfirm={_onChooseConfirm} onConfirm={_onChooseConfirm}
visible={mixVisible} visible={mixVisible}
/> />
...@@ -538,8 +420,134 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => { ...@@ -538,8 +420,134 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
onClose={_onActClose} onClose={_onActClose}
onConfirm={_onChooseConfirm} onConfirm={_onChooseConfirm}
/> />
</div> </>
) )
// return (
// <div className={styles['banner']}>
// <div className={styles['banner-box']}>
// <div className={styles['banner-box-label']}>名称</div>
// <Input key={`${selectedKey}-name`} defaultValue={name} onBlur={(e) => _onChangeByKey(e.target.value, 'name', e.target.value)} />
// </div>
// <div className={styles['banner-box']}>
// <div className={styles['banner-box-label']}>图片</div>
// { icon ? (
// <div className={styles['banner-box-icon']}>
// {/* <img src={icon} /> */}
// <ImageBox width='100%' height={96} imgUrl={icon} direction='column' />
// <div className={styles['banner-box-icon-cover']}>
// <UploadImage
// onChange={(url) => { _onChangeByKey(url, 'icon') }}
// listType="text"
// >
// <div className={styles['banner-box-icon-cover-bottom']}>
// 添加图像
// </div>
// </UploadImage>
// <DeleteOutlined className={styles['banner-box-icon-cover-delete']} onClick={() => { _onChangeByKey('', 'icon') }} />
// </div>
// </div>
// ) : (
// <UploadImage
// onChange={(url) => { _onChangeByKey(url, 'icon') }}
// listType="text"
// >
// <div className={styles['banner-box-icon']}>
// <img src={uploadImgIcon} className={styles['banner-box-icon-add']} />
// <div className={styles['banner-box-icon-cover']}>
// <div className={styles['banner-box-icon-cover-bottom']}>
// 添加图像
// </div>
// </div>
// </div>
// </UploadImage>
// )}
// </div>
// <div className={styles['banner-box']}>
// <div className={styles['banner-box-label']}>导航链接</div>
// <Row gutter={20} style={{ marginBottom: 16 }}>
// <Col span={_showChoose ? 18 : 24}>
// <Select key={`${selectedKey}-type`} defaultValue={type} onChange={(value) => _onChangeByKey(value, 'type')} style={{ width: '100%' }} >
// {
// RedirectTypeList.map(selectItem => <Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>)
// }
// </Select>
// </Col>
// {_showChoose && <Col span={6}>
// <Button block onClick={_onChoose}>选择</Button>
// </Col>}
// </Row>
// {_recordDetail}
// </div>
// {
// type === 3 && (
// <div className={styles['banner-box']}>
// <div className={styles['banner-box-label']}>品类</div>
// <Row gutter={20} style={{ marginBottom: 16 }}>
// <Col span={24}>
// <Select
// key={`${selectedKey}-type`}
// value={(categoryList && categoryList.some((item) => item.value === id)) ? id : undefined}
// onChange={(value) => _onChangeByKey(value, 'id')}
// style={{ width: '100%' }}
// >
// {
// categoryList && categoryList.map(selectItem => (
// <Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>
// ))
// }
// </Select>
// </Col>
// </Row>
// </div>
// )
// }
// {
// type === 5 && (
// <div className={styles['banner-box']}>
// <div className={styles['banner-box-label']}>频道</div>
// <Row gutter={20} style={{ marginBottom: 16 }}>
// <Col span={24}>
// <Select
// key={`${selectedKey}-type`}
// value={_selectOption.some((item) => item.value ===id) ? id : undefined}
// onChange={(value) => _onChangeByKey(value, 'id')}
// style={{ width: '100%' }}
// >
// {
// _selectOption.map(selectItem => (
// <Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>
// ))
// }
// </Select>
// </Col>
// </Row>
// </div>
// )
// }
// {
// type === 6 && (
// <div className={styles['banner-box']}>
// <div className={styles['banner-box-label']}>链接地址</div>
// <Input key={`${selectedKey}-name`} defaultValue={url} onBlur={(e) => _onChangeByKey(e.target.value, 'url')} />
// </div>
// )
// }
// <MixDrawer
// onClose={_onShopClose}
// property={property}
// type={type}
// onConfirm={_onChooseConfirm}
// visible={mixVisible}
// />
// <ActivityDrawer
// selectId={id}
// visible={actVisible}
// onClose={_onActClose}
// onConfirm={_onChooseConfirm}
// />
// </div>
// )
} }
export default CardNavItem export default CardNavItem
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/cardNavItem/schema.ts
View file @ f14d4f68
...@@ -44,7 +44,7 @@ export const cardNavSchema: ISchema = { ...@@ -44,7 +44,7 @@ export const cardNavSchema: ISchema = {
"x-component-props": { "x-component-props": {
rowStyle: { rowStyle: {
justifyContent: 'flex-start', justifyContent: 'flex-start',
alignItems: 'flex-end', alignItems: 'flex-start',
}, },
}, },
properties: { properties: {
...@@ -68,6 +68,11 @@ export const cardNavSchema: ISchema = { ...@@ -68,6 +68,11 @@ export const cardNavSchema: ISchema = {
target: 'url', target: 'url',
condition: "{{handleTypeChange($value, 'url')}}" condition: "{{handleTypeChange($value, 'url')}}"
}, },
{
type: 'value:visible',
target: 'recordDetail',
condition: "{{$value === 1}}"
},
], ],
'x-rules': [ 'x-rules': [
{ {
...@@ -85,7 +90,7 @@ export const cardNavSchema: ISchema = { ...@@ -85,7 +90,7 @@ export const cardNavSchema: ISchema = {
sumbit: { sumbit: {
'x-component': 'Children', 'x-component': 'Children',
'x-component-props': { 'x-component-props': {
children: '{{SelectBtn}}' children: '{{SelectBtn}}',
}, },
'x-mega-props': { 'x-mega-props': {
span: 1, span: 1,
...@@ -93,6 +98,9 @@ export const cardNavSchema: ISchema = { ...@@ -93,6 +98,9 @@ export const cardNavSchema: ISchema = {
}, },
} }
}, },
recordDetail: {
'x-component': 'recordDetail',
},
id: { id: {
type: 'string', type: 'string',
title: '品类', title: '品类',
......
src/pages/pageCustomized/mobileSettingPanel/settingWrap.tsx
View file @ f14d4f68
...@@ -22,12 +22,14 @@ const SettingWrap: React.FC<SettingPanelPropsType> = (props) => { ...@@ -22,12 +22,14 @@ const SettingWrap: React.FC<SettingPanelPropsType> = (props) => {
const { children, footer, onOK, onCancel, confirmLoading = false, shopId, property } = props const { children, footer, onOK, onCancel, confirmLoading = false, shopId, property } = props
const handleConfirm = (e) => { const handleConfirm = (e) => {
clearSelectedStatus() formActions.validate().then((res) => {
// formActions && formActions.validate().then((res) => { formActions.submit().then(() => {
// onOK ? onOK(e) : clearSelectedStatus() clearSelectedStatus()
// }).catch((error) => { })
// console.log(error) // onOK ? onOK(e) : clearSelectedStatus()
// }) }).catch((error) => {
console.log(error)
})
} }
return ( return (
......
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