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