fix: 择现有弹窗的报错以及弹窗ref替换不全的问题 (#8232)

packages/amis-editor-core/src/component/Preview.tsx

@@ -117,18 +117,6 @@ export default class Preview extends Component<PreviewProps> {
     setTimeout(() => clearStoresCache([this.env.session!]), 500);
   }
 
-  componentDidUpdate() {
-    const store = this.props.store;
-
-    if (store.activeDialogPath) {
-      let activeId = store.getSchemaByPath(
-        store.activeDialogPath.split('/')
-      )?.$$id;
-      activeId && store.setPreviewDialogId(activeId);
-      store.setActiveDialogPath('');
-    }
-  }
-
   unSensor?: () => void;
   layer?: HTMLDivElement;
   scrollLayer?: HTMLDivElement;

packages/amis-editor-core/src/component/factory.tsx

@@ -261,22 +261,23 @@ function addDefinitions(
   if (dialogMaxIndex) {
     Object.keys(definitions).forEach(ref => {
       const dialog = definitions[ref];
-      if (dialog.$$id === selectDialog.$$id) {
+      if (dialog.$$id === selectDialog) {
         dialogRefsName = ref;
       }
     });
   }
-  let dialogType = getFixDialogType(schema, selectDialog.$$id);
+  let dialogType = getFixDialogType(schema, selectDialog);
   let newDefinitions = {...definitions};
   if (!dialogRefsName) {
     dialogRefsName = dialogMaxIndex
       ? `${dialogType}-ref-${dialogMaxIndex + 1}`
       : `${dialogType}-ref-1`;
   }
+  let dialogBody = JSONGetById(schema, selectDialog);
   // 防止definition被查找到替换为$ref重新生成一下
   newDefinitions[dialogRefsName] = JSONPipeIn(
     JSONPipeOut({
-      ...selectDialog,
+      ...dialogBody,
       type: dialogType
     })
   );
@@ -327,7 +328,7 @@ function currentDialogOnchagne(
         );
         replacedSchema = replaceDialogtoRef(
           newSchema,
-          item.rhs?.__selectDialog.$$id,
+          item.rhs?.__selectDialog,
           dialogRefsName
         );
         if (item.rhs?.__relatedDialogId) {
@@ -352,11 +353,7 @@ function currentDialogOnchagne(
           rhs
         );
         editRefsName = dialogRefsName;
-        replacedSchema = replaceDialogtoRef(
-          newSchema,
-          rhs?.$$id,
-          dialogRefsName
-        );
+        replacedSchema = replaceDialogtoRef(newSchema, rhs, dialogRefsName);
       }
       // 编辑弹窗,从新建弹窗切换到现有弹窗,新生成弹窗id
       else if (
@@ -373,25 +370,18 @@ function currentDialogOnchagne(
       }
       // 编辑弹窗,选择了其他现有弹窗，原始弹窗id
       else if (
-        kind === 'N' &&
+        kind === 'E' &&
         path?.length > 1 &&
-        path?.[path.length - 2] === '__selectDialog' &&
-        path?.[path.length - 1] === '$$id'
+        path?.[path.length - 1] === '__selectDialog'
       ) {
-        let newPath = path.slice(0, -1);
-        let selectDialog = JSONGetByPath(newValue, newPath);
         const {newSchema, dialogRefsName} = addDefinitions(
           schema,
           definitions,
           dialogMaxIndex,
-          selectDialog
+          rhs
         );
         editRefsName = dialogRefsName;
-        replacedSchema = replaceDialogtoRef(
-          newSchema,
-          selectDialog?.$$id,
-          dialogRefsName
-        );
+        replacedSchema = replaceDialogtoRef(newSchema, rhs, dialogRefsName);
       }
       // 编辑弹窗,选择了其他现有弹窗，新生成弹窗id
       else if (
@@ -440,7 +430,7 @@ function SchemaFrom({
   definitions?: any;
   value: any;
   api?: any;
-  onChange: (value: any, diff: any, definitionChagne?: boolean) => void;
+  onChange: (value: any, diff: any) => void;
   popOverContainer?: () => HTMLElement | void;
   submitOnChange?: boolean;
   node?: EditorNodeType;
@@ -513,11 +503,19 @@ function SchemaFrom({
         onChange(newValue, diffValue);
 
         // 如果是选择现有弹窗，需要提取Definitions，在这里一起做变更
-        const schema = manager.store.schema;
+        const store = manager.store;
+        const schema = store.schema;
         let newSchema = currentDialogOnchagne(manager, diffValue, newValue);
         if (newSchema) {
           const schemaDiff = diff(schema, newSchema);
-          manager.store.definitionOnchangeValue(newSchema, schemaDiff);
+          store.definitionOnchangeValue(newSchema, schemaDiff);
+        }
+        if (store.activeDialogPath) {
+          let activeId = store.getSchemaByPath(
+            store.activeDialogPath.split('/')
+          )?.$$id;
+          activeId && store.setPreviewDialogId(activeId);
+          store.setActiveDialogPath('');
         }
       },
       data: createObjectFromChain([ctx, themeConfig, finalValue]),

packages/amis-editor-core/src/util.ts

@@ -1294,7 +1294,7 @@ export const getDialogActions = (
                   : '弹窗';
               dialogActions.push({
                 label: `${dialog.title || '-'}（${dialogTypeName}）`,
-                value: dialog
+                value: dialog.$$id
               });
             }
           }
@@ -1344,7 +1344,7 @@ export const getDialogActions = (
           // 没有 type: dialog的历史数据兼容一下
           dialogActions.push({
             ...dialogBodyContent,
-            type: dialogBody
+            type: Array.isArray(dialogBody) ? 'dialog' : dialogBody
           });
         } else {
           // 新建弹窗切换到现有弹窗把自身过滤掉
@@ -1353,7 +1353,7 @@ export const getDialogActions = (
               label: `${dialogBodyContent?.title || '-'}（${
                 dialogBodyMap.get(value)?.title
               }）`,
-              value: dialogBodyContent
+              value: dialogBodyContent.$$id
             });
           }
         }

packages/amis-editor/src/renderer/event-control/helper.tsx

@@ -21,6 +21,7 @@ import {
   DataSchema,
   filterTree,
   findTree,
+  guid,
   mapTree,
   normalizeApi,
   PlainObject,
@@ -439,7 +440,7 @@ export const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
               visibleOn: '__dialogSource === "current"',
               onChange: (value: any, oldValue: any, model: any, form: any) => {
                 form.setValueByName('args', {
-                  formCurrentDialog: true
+                  fromCurrentDialog: true
                 });
               }
             },
@@ -3035,23 +3036,16 @@ export const getEventControlConfig = (
 
         const chooseCurrentDialog = (action: ActionConfig, schema: Schema) => {
           const selectDialog = action.__selectDialog;
-          let dialogType = getFixDialogType(schema, selectDialog.$$id);
+          let dialogType = getFixDialogType(schema, selectDialog);
           // 选择现有弹窗后为了使之前的弹窗和现有弹窗$$id唯一，这里重新生成一下
-          let dialogCopy = JSONPipeIn(
-            JSONPipeOut({
-              ...selectDialog,
-              type: dialogType
-            })
-          );
-          // 在这里记录一下新dialogId
-          action.__relatedDialogId = dialogCopy.$$id;
-          if (selectDialog?.dialogType) {
-            action.actionType = 'dialog';
-            action.dialog = dialogCopy;
-          } else {
-            action.actionType = selectDialog.type || dialogType;
-            action[selectDialog.type || dialogType] = dialogCopy;
-          }
+          let newDialogId = guid();
+          action.actionType = dialogType;
+          action.dialog = {
+            $$id: newDialogId,
+            type: dialogType
+          };
+          // 在这里记录一下新生成的弹窗id
+          action.__relatedDialogId = newDialogId;
         };
 
         if (type === 'add') {

packages/amis-editor/src/renderer/event-control/index.tsx

@@ -710,7 +710,12 @@ export class EventControl extends React.Component<
     action?: ActionConfig,
     actionType?: keyof typeof dialogObjMap
   ) {
-    if (action && actionType && dialogObjMap[actionType]) {
+    if (
+      action &&
+      actionType &&
+      dialogObjMap[actionType] &&
+      !action?.args?.fromCurrentDialog
+    ) {
       let dialogBodyContent = dialogObjMap[actionType];
       let filterId = Array.isArray(dialogBodyContent)
         ? action[dialogBodyContent[0]].id || action[dialogBodyContent[1]].id
@@ -807,9 +812,9 @@ export class EventControl extends React.Component<
           data.actionData!.__dialogTitle = actionConfig?.[dialogObj!]?.title;
         }
 
-        if (actionConfig.args?.formCurrentDialog) {
+        if (actionConfig.args?.fromCurrentDialog) {
           data.actionData!.__dialogSource = 'current';
-          data.actionData!.__selectDialog = definitions[dialogRef];
+          data.actionData!.__selectDialog = definitions[dialogRef].$$id;
         } else {
           data.actionData!.__dialogSource = 'new';
         }
@@ -885,7 +890,7 @@ export class EventControl extends React.Component<
     if (definitions) {
       Object.keys(definitions).forEach(k => {
         const dialog = definitions[k];
-        if (dialog.$$id === action.__selectDialog.$$id) {
+        if (dialog.$$id === action.__selectDialog) {
           dialogRefsName = k;
         }
         if (k.includes('ref-')) {
@@ -894,7 +899,7 @@ export class EventControl extends React.Component<
         }
       });
     }
-    let dialogType = getFixDialogType(store.schema, action.__selectDialog.$$id);
+    let dialogType = getFixDialogType(store.schema, action.__selectDialog);
     if (!dialogRefsName) {
       dialogRefsName = dialogMaxIndex
         ? `${dialogType}-ref-${dialogMaxIndex + 1}`
@@ -914,7 +919,6 @@ export class EventControl extends React.Component<
     delete action.__actionSchema;
     if (type === 'add') {
       if (['dialog', 'drawer', 'confirmDialog'].includes(action.actionType)) {
-        this.addAction?.(config.eventKey, action);
         let args =
           action.actionType === 'dialog'
             ? 'dialog'
@@ -932,15 +936,13 @@ export class EventControl extends React.Component<
           let dialogRefsName = this.getRefsFromCurrentDialog(store, action);
           let path = `definitions/${dialogRefsName}`;
           store.setActiveDialogPath(path);
-        } else {
-          this.addAction?.(config.eventKey, action);
         }
+        this.addAction?.(config.eventKey, action);
       } else {
         this.addAction?.(config.eventKey, action);
       }
     } else if (type === 'update') {
       if (['dialog', 'drawer', 'confirmDialog'].includes(action.actionType)) {
-        this.updateAction?.(config.eventKey, config.actionIndex, action);
         let args =
           action.actionType === 'dialog'
             ? 'dialog'
@@ -958,6 +960,7 @@ export class EventControl extends React.Component<
           let path = `definitions/${dialogRefsName}`;
           store.setActiveDialogPath(path);
         }
+        this.updateAction?.(config.eventKey, config.actionIndex, action);
       } else {
         this.updateAction?.(config.eventKey, config.actionIndex, action);
       }