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

Reviewed-on: daoyoucloud/tachybase#1583
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>

packages/core/client/src/schema-component/antd/association-field/InternalCascadeSelect.tsx

@@ -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}>
-        <FormProvider form={selectForm}>
+        {collectionField.interface === 'm2o' ? (
-          {collectionField.interface === 'm2o' ? (
+          <SchemaComponent
-            <SchemaComponent
+            components={{ FormItem }}
-              components={{ FormItem }}
+            schema={{
-              schema={{
+              ...fieldSchema,
-                ...fieldSchema,
+              default: field.value,
-                default: field.value,
+              title: '',
-                title: '',
+              'x-component': AssociationCascadeSelect,
-                'x-component': AssociationCascadeSelect,
+              'x-component-props': {
-                'x-component-props': {
+                ...props,
-                  ...props,
+              },
-                },
+            }}
-              }}
+          />
-            />
+        ) : (
-          ) : (
+          <SchemaField schema={schema} />
-            <SchemaField schema={schema} />
+        )}
-          )}
+      </FormProvider>
-        </FormProvider>
-      )
     );
   },
   { displayName: 'InternalCascadeSelect' },

packages/core/client/src/schema-component/antd/association-field/InternalCascader.tsx

@@ -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: {