feat: improve code
This commit is contained in:
parent
b0056e1aa1
commit
da418720aa
@ -79,6 +79,10 @@ interface DesignableContextProps {
|
|||||||
|
|
||||||
export const useAsyncDataSource = (service: any) => (field: any) => {
|
export const useAsyncDataSource = (service: any) => (field: any) => {
|
||||||
field.loading = true;
|
field.loading = true;
|
||||||
|
const disableAsyncDataSource = field.componentProps.disableAsyncDataSource;
|
||||||
|
if (disableAsyncDataSource) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
service(field).then(
|
service(field).then(
|
||||||
action.bound((data: any) => {
|
action.bound((data: any) => {
|
||||||
field.dataSource = data;
|
field.dataSource = data;
|
||||||
@ -87,29 +91,23 @@ export const useAsyncDataSource = (service: any) => (field: any) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useChinaRegionDataSource = ({ onSuccess }) => {
|
export const loadChinaRegionDataSource = async (field) => {
|
||||||
const field = useField<ArrayField>();
|
|
||||||
const maxLevel = field.componentProps.maxLevel || 3;
|
const maxLevel = field.componentProps.maxLevel || 3;
|
||||||
const resource = Resource.make('china_regions');
|
const resource = Resource.make('china_regions');
|
||||||
console.log('useChinaRegionDataSource');
|
const { data } = await resource.list({
|
||||||
useRequest(
|
perPage: -1,
|
||||||
() =>
|
filter: {
|
||||||
resource.list({
|
level: 1,
|
||||||
perPage: -1,
|
|
||||||
filter: {
|
|
||||||
level: 1,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
formatResult: (data) =>
|
|
||||||
data?.data?.map((item) => {
|
|
||||||
if (maxLevel !== 1) {
|
|
||||||
item.isLeaf = false;
|
|
||||||
}
|
|
||||||
return item;
|
|
||||||
}),
|
|
||||||
onSuccess,
|
|
||||||
},
|
},
|
||||||
|
});
|
||||||
|
console.log('loadChinaRegions', data, field.value);
|
||||||
|
return (
|
||||||
|
data?.map((item) => {
|
||||||
|
if (maxLevel !== 1) {
|
||||||
|
item.isLeaf = false;
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
}) || []
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -147,7 +145,7 @@ export const SchemaField = createSchemaField({
|
|||||||
useAsyncDataSource,
|
useAsyncDataSource,
|
||||||
ChinaRegion: {
|
ChinaRegion: {
|
||||||
loadData: loadChinaRegionData,
|
loadData: loadChinaRegionData,
|
||||||
useDataSource: useChinaRegionDataSource,
|
loadDataSource: loadChinaRegionDataSource,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
@ -73,7 +73,7 @@ Chart.DesignableBar = observer((props) => {
|
|||||||
setVisible(false);
|
setVisible(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
修改文本段
|
修改内容
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Divider />
|
<Menu.Divider />
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
@ -87,7 +87,7 @@ Chart.DesignableBar = observer((props) => {
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
删除当前文本
|
移除
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
@ -19,7 +19,6 @@ export const chinaRegion: FieldOptions = {
|
|||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
changeOnSelect: true,
|
changeOnSelect: true,
|
||||||
loadData: '{{ ChinaRegion.loadData }}',
|
loadData: '{{ ChinaRegion.loadData }}',
|
||||||
useDataSource: '{{ ChinaRegion.useDataSource }}',
|
|
||||||
labelInValue: true,
|
labelInValue: true,
|
||||||
maxLevel: 3,
|
maxLevel: 3,
|
||||||
fieldNames: {
|
fieldNames: {
|
||||||
@ -28,7 +27,7 @@ export const chinaRegion: FieldOptions = {
|
|||||||
children: 'children',
|
children: 'children',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
'x-reactions': ['{{useAsyncDataSource(loadChinaRegions)}}'],
|
'x-reactions': ['{{useAsyncDataSource(ChinaRegion.loadDataSource)}}'],
|
||||||
'x-decorator': 'FormItem',
|
'x-decorator': 'FormItem',
|
||||||
'x-designable-bar': 'Cascader.DesignableBar',
|
'x-designable-bar': 'Cascader.DesignableBar',
|
||||||
},
|
},
|
||||||
|
8
packages/client/src/schemas/designable-bar/style.less
Normal file
8
packages/client/src/schemas/designable-bar/style.less
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.designable-info {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
background: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0 5px;
|
||||||
|
border-bottom-right-radius: 2px;
|
||||||
|
}
|
@ -12,12 +12,7 @@ import {
|
|||||||
useForm,
|
useForm,
|
||||||
RecursionField,
|
RecursionField,
|
||||||
} from '@formily/react';
|
} from '@formily/react';
|
||||||
import {
|
import { useSchemaPath, SchemaField, useDesignable, removeSchema } from '../';
|
||||||
useSchemaPath,
|
|
||||||
SchemaField,
|
|
||||||
useDesignable,
|
|
||||||
removeSchema,
|
|
||||||
} from '../';
|
|
||||||
import get from 'lodash/get';
|
import get from 'lodash/get';
|
||||||
import { Button, Dropdown, Menu, Space } from 'antd';
|
import { Button, Dropdown, Menu, Space } from 'antd';
|
||||||
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
|
import { MenuOutlined, DragOutlined } from '@ant-design/icons';
|
||||||
@ -31,17 +26,18 @@ import constate from 'constate';
|
|||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { uid } from '@formily/shared';
|
import { uid } from '@formily/shared';
|
||||||
import { getSchemaPath } from '../../components/schema-renderer';
|
import { getSchemaPath } from '../../components/schema-renderer';
|
||||||
|
import { useCollection } from '../../constate';
|
||||||
|
|
||||||
export const DesignableBar = observer((props) => {
|
export const DesignableBar = observer((props) => {
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const { designable, schema, refresh, deepRemove } = useDesignable();
|
const { designable, schema, refresh, deepRemove } = useDesignable();
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const { dragRef } = useContext(DraggableBlockContext);
|
const { dragRef } = useContext(DraggableBlockContext);
|
||||||
if (!designable) {
|
const collectionName = field.componentProps.collectionName;
|
||||||
return null;
|
const { collection } = useCollection({ collectionName });
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<div className={cls('designable-bar', { active: visible })}>
|
<div className={cls('designable-bar', { active: visible })}>
|
||||||
|
<div className={'designable-info'}>{collection?.title || collection?.name}</div>
|
||||||
<span
|
<span
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
@ -2,6 +2,8 @@ import React from 'react';
|
|||||||
import { ISchema as IFormilySchema, observer, Schema, useField } from '@formily/react';
|
import { ISchema as IFormilySchema, observer, Schema, useField } from '@formily/react';
|
||||||
import { extend } from 'umi-request';
|
import { extend } from 'umi-request';
|
||||||
|
|
||||||
|
import './designable-bar/style.less';
|
||||||
|
|
||||||
export type FormilyISchema = IFormilySchema
|
export type FormilyISchema = IFormilySchema
|
||||||
|
|
||||||
export interface ISchema extends IFormilySchema {
|
export interface ISchema extends IFormilySchema {
|
||||||
|
@ -93,7 +93,7 @@ Input.DesignableBar = observer((props) => {
|
|||||||
// }
|
// }
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
删除当前区块
|
移除
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
@ -137,7 +137,7 @@ Markdown.Void.DesignableBar = observer((props) => {
|
|||||||
setVisible(false);
|
setVisible(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
修改文本段
|
修改内容
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Divider />
|
<Menu.Divider />
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
@ -151,7 +151,7 @@ Markdown.Void.DesignableBar = observer((props) => {
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
删除当前文本
|
移除
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
@ -206,7 +206,7 @@ Markdown.DesignableBar = observer((props) => {
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
删除当前字段
|
移除
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
}
|
}
|
||||||
|
@ -1953,10 +1953,11 @@ Table.DesignableBar = observer((props) => {
|
|||||||
const defaultPageSize =
|
const defaultPageSize =
|
||||||
field?.componentProps?.pagination?.defaultPageSize || 10;
|
field?.componentProps?.pagination?.defaultPageSize || 10;
|
||||||
const collectionName = field?.componentProps?.collectionName;
|
const collectionName = field?.componentProps?.collectionName;
|
||||||
const { fields } = useCollection({ collectionName });
|
const { collection, fields } = useCollection({ collectionName });
|
||||||
console.log({ collectionName });
|
console.log({ collectionName });
|
||||||
return (
|
return (
|
||||||
<div className={cls('designable-bar', { active: visible })}>
|
<div className={cls('designable-bar', { active: visible })}>
|
||||||
|
<div className={'designable-info'}>{collection?.title || collection?.name}</div>
|
||||||
<span
|
<span
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
Loading…
Reference in New Issue
Block a user