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 @@
&-activity {
height: 56px;
width: 100%;
border: 1px solid #EDEEEF;
display: flex;
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) => {
return []
}, [property])
const _recordDetail = useMemo(() => {
if (record) {
if (type === 1) {
return (
<div className={styles['banner-record-activity']}>
<img src={record?.logoUrl} />
<div className={styles['banner-record-activity-right']}>
<Tooltip title={record?.name}>
<div className={styles['banner-record-activity-right-top']}>{record?.name}</div>
</Tooltip>
const recordDetail = () => {
return useMemo(() => {
if (record) {
if (type === 1) {
return (
<div className={styles['banner-record-activity']}>
<img src={record?.logoUrl} />
<div className={styles['banner-record-activity-right']}>
<Tooltip title={record?.name}>
<div className={styles['banner-record-activity-right-top']}>{record?.name}</div>
</Tooltip>
</div>
</div>
</div>
)
}
if (type === 2) {
return (
<div className={styles['banner-record-activity']}>
<img src={record?.templatePicUrl || record?.logoUrl} />
<div className={styles['banner-record-activity-right']}>
<Tooltip title={record?.name}>
<div className={styles['banner-record-activity-right-top']}>{record?.name}</div>
)
}
if (type === 2) {
return (
<div className={styles['banner-record-activity']}>
<img src={record?.templatePicUrl || record?.logoUrl} />
<div className={styles['banner-record-activity-right']}>
<Tooltip title={record?.name}>
<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>
{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>
</div>
)
)
}
}
}
}, [type, record])
return null
}, [type, record])
}
recordDetail.isFieldComponent = true
const _onShopClose = () => {
console.log('close')
......@@ -265,20 +270,9 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
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 = () => {
switch (type) {
const chooseType = fixtureContext?.formActions.getFieldValue('type')
switch (chooseType) {
case 2:
setActVisible(true);
break;
......@@ -288,6 +282,17 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
break;
}
}
// const _onChoose = () => {
// switch (type) {
// case 2:
// setActVisible(true);
// break;
// case 1:
// case 4:
// setMixVisible(true);
// break;
// }
// }
const _onChooseConfirm = (record) => {
setRecord(record);
switch (type) {
......@@ -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 = {
// onSubmit: handleSubmit,
......@@ -352,12 +357,22 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
}
},
actions: fixtureContext?.formActions,
components: { FormilyUpload },
components: { FormilyUpload, recordDetail },
};
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值
......@@ -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 (
<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>
)
}
<>
<NiceForm
value={formValue}
{...formProps}
onSubmit={handleSumit}
schema={cardNavSchema}
effects={($, actions) => {
useAsyncInitSelect(['type', 'id', 'channel'], fetchSelectOptions)
}}
/>
<MixDrawer
onClose={_onShopClose}
property={property}
type={type}
type={navType}
onConfirm={_onChooseConfirm}
visible={mixVisible}
/>
......@@ -538,8 +420,134 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
onClose={_onActClose}
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
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/cardNavItem/schema.ts
View file @ f14d4f68
......@@ -44,7 +44,7 @@ export const cardNavSchema: ISchema = {
"x-component-props": {
rowStyle: {
justifyContent: 'flex-start',
alignItems: 'flex-end',
alignItems: 'flex-start',
},
},
properties: {
......@@ -68,6 +68,11 @@ export const cardNavSchema: ISchema = {
target: 'url',
condition: "{{handleTypeChange($value, 'url')}}"
},
{
type: 'value:visible',
target: 'recordDetail',
condition: "{{$value === 1}}"
},
],
'x-rules': [
{
......@@ -85,7 +90,7 @@ export const cardNavSchema: ISchema = {
sumbit: {
'x-component': 'Children',
'x-component-props': {
children: '{{SelectBtn}}'
children: '{{SelectBtn}}',
},
'x-mega-props': {
span: 1,
......@@ -93,6 +98,9 @@ export const cardNavSchema: ISchema = {
},
}
},
recordDetail: {
'x-component': 'recordDetail',
},
id: {
type: 'string',
title: '品类',
......
src/pages/pageCustomized/mobileSettingPanel/settingWrap.tsx
View file @ f14d4f68
......@@ -22,12 +22,14 @@ const SettingWrap: React.FC<SettingPanelPropsType> = (props) => {
const { children, footer, onOK, onCancel, confirmLoading = false, shopId, property } = props
const handleConfirm = (e) => {
clearSelectedStatus()
// formActions && formActions.validate().then((res) => {
// onOK ? onOK(e) : clearSelectedStatus()
// }).catch((error) => {
// console.log(error)
// })
formActions.validate().then((res) => {
formActions.submit().then(() => {
clearSelectedStatus()
})
// onOK ? onOK(e) : clearSelectedStatus()
}).catch((error) => {
console.log(error)
})
}
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