fix: 修复自定义组件下拉框没有自定义显示选项 (#730)
Reviewed-on: daoyoucloud/tachycode#730 Co-authored-by: wjh <wwwjh0710@163.com> Co-committed-by: wjh <wwwjh0710@163.com>
This commit is contained in:
parent
a20a4df543
commit
e0be6a7aba
6
.changeset/fuzzy-snails-arrive.md
Normal file
6
.changeset/fuzzy-snails-arrive.md
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
---
|
||||||
|
"@hera/plugin-core": patch
|
||||||
|
"@nocobase/client": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
修复自定义组件没有格式化名称
|
@ -22,29 +22,10 @@ const isEmptyObject = (val: any) => !isValid(val) || (typeof val === 'object' &&
|
|||||||
|
|
||||||
const ObjectSelect = (props: Props) => {
|
const ObjectSelect = (props: Props) => {
|
||||||
const { value, options, onChange, mode, fieldNames, loading, rawOptions, defaultValue, ...others } = props;
|
const { value, options, onChange, mode, fieldNames, loading, rawOptions, defaultValue, ...others } = props;
|
||||||
const [defoptions, setDefOptions] = useState();
|
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
const collectionName = fieldSchema['collectionName'];
|
const collectionName = fieldSchema['collectionName'];
|
||||||
const filterField = others?.['params'];
|
|
||||||
const api = useAPIClient();
|
|
||||||
const form = useForm();
|
const form = useForm();
|
||||||
useAsyncEffect(async () => {
|
|
||||||
if (collectionName) {
|
|
||||||
const defValue = await api.request({
|
|
||||||
url: collectionName + ':list',
|
|
||||||
params: {
|
|
||||||
pageSize: 99999,
|
|
||||||
filter: filterField ? { ...filterField.filter } : {},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const changOptions = defValue?.data?.data.map((value) => {
|
|
||||||
value['label'] = value[fieldNames.label];
|
|
||||||
value['value'] = value[fieldNames.value];
|
|
||||||
return value;
|
|
||||||
});
|
|
||||||
setDefOptions(changOptions);
|
|
||||||
}
|
|
||||||
}, [filterField?.filter, collectionName]);
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (collectionName && fieldSchema['name'].toString().includes('custom') && defaultValue) {
|
if (collectionName && fieldSchema['name'].toString().includes('custom') && defaultValue) {
|
||||||
const name = fieldSchema['name'].toString().split('.')[1];
|
const name = fieldSchema['name'].toString().split('.')[1];
|
||||||
@ -60,7 +41,7 @@ const ObjectSelect = (props: Props) => {
|
|||||||
.map((val) => {
|
.map((val) => {
|
||||||
return isPlainObject(val) ? val[fieldNames.value] : val;
|
return isPlainObject(val) ? val[fieldNames.value] : val;
|
||||||
});
|
});
|
||||||
const filterOption = defoptions ? defoptions : options;
|
const filterOption = options;
|
||||||
const currentOptions = getCurrentOptions(values, filterOption, fieldNames)?.map((val) => {
|
const currentOptions = getCurrentOptions(values, filterOption, fieldNames)?.map((val) => {
|
||||||
return {
|
return {
|
||||||
label: val[fieldNames.label],
|
label: val[fieldNames.label],
|
||||||
@ -88,7 +69,7 @@ const ObjectSelect = (props: Props) => {
|
|||||||
}}
|
}}
|
||||||
labelInValue
|
labelInValue
|
||||||
notFoundContent={loading ? <Spin /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
notFoundContent={loading ? <Spin /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
|
||||||
options={defoptions || options}
|
options={options}
|
||||||
fieldNames={fieldNames}
|
fieldNames={fieldNames}
|
||||||
showSearch
|
showSearch
|
||||||
popupMatchSelectWidth={false}
|
popupMatchSelectWidth={false}
|
||||||
@ -105,7 +86,7 @@ const ObjectSelect = (props: Props) => {
|
|||||||
onChange={(changed) => {
|
onChange={(changed) => {
|
||||||
const current = getCurrentOptions(
|
const current = getCurrentOptions(
|
||||||
toArr(changed).map((v) => v.value),
|
toArr(changed).map((v) => v.value),
|
||||||
defoptions || rawOptions || options,
|
rawOptions || options,
|
||||||
fieldNames,
|
fieldNames,
|
||||||
);
|
);
|
||||||
if (['tags', 'multiple'].includes(mode as string) || props.multiple) {
|
if (['tags', 'multiple'].includes(mode as string) || props.multiple) {
|
||||||
@ -151,7 +132,7 @@ const useLabelOptions = (others) => {
|
|||||||
[fieldSchema['x-collection-field']],
|
[fieldSchema['x-collection-field']],
|
||||||
);
|
);
|
||||||
const request = {
|
const request = {
|
||||||
resource: collectionField?.target,
|
resource: collectionField?.target || fieldSchema['collectionName'],
|
||||||
action: 'list',
|
action: 'list',
|
||||||
params: {
|
params: {
|
||||||
pageSize: 99999,
|
pageSize: 99999,
|
||||||
@ -211,11 +192,37 @@ const useLabelOptions = (others) => {
|
|||||||
const FormulaSelect = (props) => {
|
const FormulaSelect = (props) => {
|
||||||
const { objectValue, loading, value, rawOptions, defaultValue, ...others } = props;
|
const { objectValue, loading, value, rawOptions, defaultValue, ...others } = props;
|
||||||
let mode: any = props.multiple ? 'multiple' : props.mode;
|
let mode: any = props.multiple ? 'multiple' : props.mode;
|
||||||
|
const filterField = others?.['params'];
|
||||||
|
const [options, setOptions] = useState([]);
|
||||||
|
const [collectionName, setCollectionName] = useState('');
|
||||||
|
const api = useAPIClient();
|
||||||
if (mode && !['multiple', 'tags'].includes(mode)) {
|
if (mode && !['multiple', 'tags'].includes(mode)) {
|
||||||
mode = undefined;
|
mode = undefined;
|
||||||
}
|
}
|
||||||
const modifiedProps = useLabelOptions(others);
|
const fieldProps = { ...others };
|
||||||
|
if (others?.collection && others.collection !== collectionName) {
|
||||||
|
api
|
||||||
|
.request({
|
||||||
|
url: others.collection + ':list',
|
||||||
|
params: {
|
||||||
|
pageSize: 99999,
|
||||||
|
filter: filterField ? { ...filterField.filter } : {},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
setOptions(res?.data.data);
|
||||||
|
fieldProps['options'] = res?.data.data;
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
return;
|
||||||
|
});
|
||||||
|
setCollectionName(others.collection);
|
||||||
|
} else if (others?.collection === collectionName) {
|
||||||
|
fieldProps['options'] = options.map((option) => {
|
||||||
|
return { ...option };
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const modifiedProps = useLabelOptions(fieldProps);
|
||||||
return (
|
return (
|
||||||
<ObjectSelect
|
<ObjectSelect
|
||||||
rawOptions={rawOptions}
|
rawOptions={rawOptions}
|
||||||
|
@ -353,6 +353,7 @@ export const FilterItemCustomDesigner: React.FC = () => {
|
|||||||
{component === 'Select' || component === 'AutoComplete' ? <SchemaSettingCollection /> : null}
|
{component === 'Select' || component === 'AutoComplete' ? <SchemaSettingCollection /> : null}
|
||||||
{component === 'Select' || component === 'AutoComplete' ? <SchemaSettingComponent /> : null}
|
{component === 'Select' || component === 'AutoComplete' ? <SchemaSettingComponent /> : null}
|
||||||
{component === 'Select' || component === 'AutoComplete' ? <EditTitleField /> : null}
|
{component === 'Select' || component === 'AutoComplete' ? <EditTitleField /> : null}
|
||||||
|
<EditFormulaTitleField />
|
||||||
<EditDefaultValue />
|
<EditDefaultValue />
|
||||||
<SchemaSettingsDivider />
|
<SchemaSettingsDivider />
|
||||||
<SchemaSettingsRemove
|
<SchemaSettingsRemove
|
||||||
|
Loading…
Reference in New Issue
Block a user