fix(数据表): 树数据表-级联修复,修复级联选择编辑无显示 (#1583)

Reviewed-on: daoyoucloud/tachybase#1583
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>
This commit is contained in:
wjh 2024-10-09 15:57:06 +08:00 committed by bai.zixv
parent 4cda546880
commit 725e31871c
2 changed files with 39 additions and 25 deletions

View File

@ -45,6 +45,7 @@ const CascadeSelect = connect((props) => {
const resource = api.resource(collectionField.target);
const { getCollectionJoinField, getInterface } = useCollectionManager_deprecated();
const fieldNames = associationField?.componentProps?.fieldNames;
const [change, setChange] = useState(false);
const targetField =
collectionField?.target &&
fieldNames?.label &&
@ -57,7 +58,7 @@ const CascadeSelect = connect((props) => {
}, [targetField]);
const field: any = useField();
useEffect(() => {
if (value) {
if (value && !change) {
const values = Array.isArray(value)
? extractLastNonNullValueObjects(
value?.filter((v) => v.value),
@ -73,7 +74,7 @@ const CascadeSelect = connect((props) => {
});
setSelectedOptions(options);
}
}, []);
}, [value]);
const mapOptionsToTags = useCallback(
(options) => {
try {
@ -140,6 +141,7 @@ const CascadeSelect = connect((props) => {
};
const handleSelect = async (value, option, index) => {
setChange(true);
const data = await handleGetOptions({ parentId: option?.id });
const options = [...selectedOptions];
options.splice(index + 1);
@ -272,6 +274,13 @@ export const InternalCascadeSelect = observer(
return [{}];
};
const defaultValue = toValue();
useEffect(() => {
const isChange = selectForm.values?.select_array?.filter((value) => value && Object.keys(value).length);
if (collectionField.interface !== 'm2o' && props.value && !isChange.length) {
const value = extractLastNonNullValueObjects(defaultValue).filter((v) => v && Object.keys(v).length > 0);
selectForm.setValues({ select_array: value });
}
}, [props.value]);
const schema = {
type: 'object',
properties: {
@ -315,26 +324,24 @@ export const InternalCascadeSelect = observer(
},
};
return (
props.value !== null && (
<FormProvider form={selectForm}>
{collectionField.interface === 'm2o' ? (
<SchemaComponent
components={{ FormItem }}
schema={{
...fieldSchema,
default: field.value,
title: '',
'x-component': AssociationCascadeSelect,
'x-component-props': {
...props,
},
}}
/>
) : (
<SchemaField schema={schema} />
)}
</FormProvider>
)
<FormProvider form={selectForm}>
{collectionField.interface === 'm2o' ? (
<SchemaComponent
components={{ FormItem }}
schema={{
...fieldSchema,
default: field.value,
title: '',
'x-component': AssociationCascadeSelect,
'x-component-props': {
...props,
},
}}
/>
) : (
<SchemaField schema={schema} />
)}
</FormProvider>
);
},
{ displayName: 'InternalCascadeSelect' },

View File

@ -56,12 +56,12 @@ const Cascade = connect((props) => {
const changOnSelect = fieldSchema['x-component-props']?.changOnSelect || false;
const field: any = useField();
const [selectedOptions, setSelectedOptions] = useState([]);
const [chang, setChang] = useState(false);
const [change, setChange] = useState(false);
const [dataList, setDataList] = useState({});
const { styles } = useStyles();
useEffect(() => {
const propsValue = props.value || fieldSchema['x-component-props'].value;
if (!chang && propsValue) {
if (!change && propsValue) {
if (!propsValue.parent && !Object.keys(dataList).length) {
resource
.list({
@ -116,7 +116,7 @@ const Cascade = connect((props) => {
};
const handleSelect = async (option) => {
setChang(true);
setChange(true);
if (option) {
if (['o2m', 'm2m'].includes(collectionField.interface)) {
const fieldValue = Array.isArray(associationField.fieldValue) ? associationField.fieldValue : [];
@ -243,6 +243,13 @@ export const InternalCascader = observer(
return [{}];
};
const defaultValue = toValue();
useEffect(() => {
const isChange = selectForm.values?.select_array?.filter((value) => value && Object.keys(value).length);
if (collectionField.interface !== 'm2o' && props.value && !isChange.length) {
selectForm.setInitialValues({ select_array: defaultValue });
}
}, [props.value]);
const schema = {
type: 'object',
properties: {