feat: improve code
This commit is contained in:
parent
20c839bfa9
commit
b0056e1aa1
@ -38,7 +38,7 @@ export const SiteTitle = () => {
|
|||||||
{!loading && data?.logo?.url && (
|
{!loading && data?.logo?.url && (
|
||||||
<img className={'site-logo'} src={data?.logo?.url} />
|
<img className={'site-logo'} src={data?.logo?.url} />
|
||||||
)}
|
)}
|
||||||
{!loading && !data.showLogoOnly && data.title && (
|
{!loading && !data?.showLogoOnly && data?.title && (
|
||||||
<div className={'site-title'}>{data.title}</div>
|
<div className={'site-title'}>{data.title}</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -62,6 +62,7 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-info {
|
.site-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -72,5 +73,6 @@
|
|||||||
.site-title {
|
.site-title {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
padding-right: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -34,8 +34,7 @@ const schema = {
|
|||||||
'x-component': 'Cascader',
|
'x-component': 'Cascader',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
changeOnSelect: true,
|
changeOnSelect: true,
|
||||||
loadData: '{{ loadData }}',
|
loadData: '{{ loadChinaRegionData }}',
|
||||||
useDataSource: '{{ useDataSource }}',
|
|
||||||
labelInValue: true,
|
labelInValue: true,
|
||||||
maxLevel: 3,
|
maxLevel: 3,
|
||||||
fieldNames: {
|
fieldNames: {
|
||||||
@ -46,7 +45,7 @@ const schema = {
|
|||||||
// changeOnSelect: true,
|
// changeOnSelect: true,
|
||||||
},
|
},
|
||||||
'x-reactions': [
|
'x-reactions': [
|
||||||
// '{{useAsyncDataSource(loadOptions)}}',
|
'{{useAsyncDataSource(loadChinaRegions)}}',
|
||||||
{
|
{
|
||||||
target: 'read',
|
target: 'read',
|
||||||
fulfill: {
|
fulfill: {
|
||||||
@ -67,8 +66,7 @@ const schema = {
|
|||||||
'x-component': 'Cascader',
|
'x-component': 'Cascader',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
changeOnSelect: true,
|
changeOnSelect: true,
|
||||||
loadData: '{{ loadData }}',
|
loadData: '{{ loadChinaRegionData }}',
|
||||||
useDataSource: '{{ useDataSource }}',
|
|
||||||
labelInValue: true,
|
labelInValue: true,
|
||||||
fieldNames: {
|
fieldNames: {
|
||||||
label: 'name',
|
label: 'name',
|
||||||
@ -80,32 +78,30 @@ const schema = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const useDataSource = ({ onSuccess }) => {
|
// disableAsyncDataSource
|
||||||
const field = useField<ArrayField>();
|
const loadChinaRegions = async (field) => {
|
||||||
const maxLevel = field.componentProps.maxLevel || 3;
|
const maxLevel = field.componentProps.maxLevel || 3;
|
||||||
const resource = Resource.make('china_regions');
|
const resource = Resource.make('china_regions');
|
||||||
useRequest(
|
const { data } = await resource.list({
|
||||||
() =>
|
|
||||||
resource.list({
|
|
||||||
perPage: -1,
|
perPage: -1,
|
||||||
filter: {
|
filter: {
|
||||||
level: 1,
|
level: 1,
|
||||||
},
|
},
|
||||||
}),
|
});
|
||||||
{
|
return (
|
||||||
formatResult: (data) =>
|
data?.map((item) => {
|
||||||
data?.data?.map((item) => {
|
|
||||||
if (maxLevel !== 1) {
|
if (maxLevel !== 1) {
|
||||||
item.isLeaf = false;
|
item.isLeaf = false;
|
||||||
}
|
}
|
||||||
return item;
|
return item;
|
||||||
}),
|
}) || []
|
||||||
onSuccess,
|
|
||||||
},
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadData = (selectedOptions: CascaderOptionType[], field: ArrayField) => {
|
const loadChinaRegionData = (
|
||||||
|
selectedOptions: CascaderOptionType[],
|
||||||
|
field: ArrayField,
|
||||||
|
) => {
|
||||||
const maxLevel = field.componentProps.maxLevel || 3;
|
const maxLevel = field.componentProps.maxLevel || 3;
|
||||||
const targetOption = selectedOptions[selectedOptions.length - 1];
|
const targetOption = selectedOptions[selectedOptions.length - 1];
|
||||||
targetOption.loading = true;
|
targetOption.loading = true;
|
||||||
@ -132,6 +128,6 @@ const loadData = (selectedOptions: CascaderOptionType[], field: ArrayField) => {
|
|||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
return (
|
return (
|
||||||
<SchemaRenderer debug scope={{ useDataSource, loadData }} schema={schema} />
|
<SchemaRenderer debug scope={{ loadChinaRegions, loadChinaRegionData }} schema={schema} />
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -28,11 +28,10 @@ export const Cascader = connect(
|
|||||||
onChange,
|
onChange,
|
||||||
loadData,
|
loadData,
|
||||||
labelInValue,
|
labelInValue,
|
||||||
useDataSource,
|
|
||||||
fieldNames = defaultFieldNames,
|
fieldNames = defaultFieldNames,
|
||||||
...others
|
...others
|
||||||
} = props;
|
} = props;
|
||||||
console.log('Cascader', props)
|
console.log('Cascader', props);
|
||||||
// 兼容值为 object[] 的情况
|
// 兼容值为 object[] 的情况
|
||||||
const toValue = () => {
|
const toValue = () => {
|
||||||
return toArr(value).map((item) => {
|
return toArr(value).map((item) => {
|
||||||
@ -46,6 +45,7 @@ export const Cascader = connect(
|
|||||||
const values = toArr(value);
|
const values = toArr(value);
|
||||||
if (values.length !== labels.length) {
|
if (values.length !== labels.length) {
|
||||||
labels = toValue();
|
labels = toValue();
|
||||||
|
selectedOptions = values;
|
||||||
}
|
}
|
||||||
if (selectedOptions.length === 0) {
|
if (selectedOptions.length === 0) {
|
||||||
selectedOptions = values;
|
selectedOptions = values;
|
||||||
@ -73,14 +73,6 @@ export const Cascader = connect(
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
// 这里没有用 x-reactions 是因为 readyPretty=true 时不需要
|
|
||||||
if (typeof useDataSource === 'function') {
|
|
||||||
useDataSource({
|
|
||||||
onSuccess: (data) => {
|
|
||||||
field.dataSource = data;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (loadData) {
|
if (loadData) {
|
||||||
Object.assign(others, {
|
Object.assign(others, {
|
||||||
loadData: (selectedOptions: CascaderOptionType[]) => {
|
loadData: (selectedOptions: CascaderOptionType[]) => {
|
||||||
|
@ -28,6 +28,7 @@ export const chinaRegion: FieldOptions = {
|
|||||||
children: 'children',
|
children: 'children',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
'x-reactions': ['{{useAsyncDataSource(loadChinaRegions)}}'],
|
||||||
'x-decorator': 'FormItem',
|
'x-decorator': 'FormItem',
|
||||||
'x-designable-bar': 'Cascader.DesignableBar',
|
'x-designable-bar': 'Cascader.DesignableBar',
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user