From e4b4436d23d5fa2fff83f1d4f15119477e624588 Mon Sep 17 00:00:00 2001
From: Katherine <katherine_15995@163.com>
Date: Sun, 29 Jun 2025 20:40:28 +0800
Subject: [PATCH] Refactor/association field enable link (#7132)

* feat: association select support enable link

* refactor: code improve

* fix: merge bug

* fix: bug

* fix: bug

* fix: bug
---
 .../AssociationReadPrettyFieldModel.tsx       | 18 +++-
 .../AssociationSelectReadPrettyFieldModel.tsx | 89 +++++++++++++++++--
 2 files changed, 98 insertions(+), 9 deletions(-)

diff --git a/packages/core/client/src/flow/models/fields/ReadPrettyField/AssociationFieldModel/AssociationReadPrettyFieldModel.tsx b/packages/core/client/src/flow/models/fields/ReadPrettyField/AssociationFieldModel/AssociationReadPrettyFieldModel.tsx
index 8a089ade71..e80d4264d6 100644
--- a/packages/core/client/src/flow/models/fields/ReadPrettyField/AssociationFieldModel/AssociationReadPrettyFieldModel.tsx
+++ b/packages/core/client/src/flow/models/fields/ReadPrettyField/AssociationFieldModel/AssociationReadPrettyFieldModel.tsx
@@ -11,6 +11,22 @@ import React from 'react';
 import { ReadPrettyFieldModel } from '../ReadPrettyFieldModel';
 
 export class AssociationReadPrettyFieldModel extends ReadPrettyFieldModel {
-  resource;
   targetCollection;
 }
+
+AssociationReadPrettyFieldModel.registerFlow({
+  key: 'AssociationReadPrettyFieldDefault',
+  auto: true,
+  sort: 150,
+  steps: {
+    step1: {
+      handler(ctx, params) {
+        const { collectionField } = ctx.model;
+        const { target } = collectionField?.options || {};
+        const collectionManager = collectionField.collection.collectionManager;
+        const targetCollection = collectionManager.getCollection(target);
+        ctx.model.targetCollection = targetCollection;
+      },
+    },
+  },
+});
diff --git a/packages/core/client/src/flow/models/fields/ReadPrettyField/AssociationFieldModel/AssociationSelectReadPrettyFieldModel.tsx b/packages/core/client/src/flow/models/fields/ReadPrettyField/AssociationFieldModel/AssociationSelectReadPrettyFieldModel.tsx
index 54480cea0c..f8ed9b6b9c 100644
--- a/packages/core/client/src/flow/models/fields/ReadPrettyField/AssociationFieldModel/AssociationSelectReadPrettyFieldModel.tsx
+++ b/packages/core/client/src/flow/models/fields/ReadPrettyField/AssociationFieldModel/AssociationSelectReadPrettyFieldModel.tsx
@@ -8,10 +8,28 @@
  */
 
 import React from 'react';
+import { Button } from 'antd';
+import { tval } from '@nocobase/utils/client';
 import { AssociationReadPrettyFieldModel } from './AssociationReadPrettyFieldModel';
 import { FlowEngineProvider, reactive } from '@nocobase/flow-engine';
 import { getUniqueKeyFromCollection } from '../../../../../collection-manager/interfaces/utils';
-import { tval } from '@nocobase/utils/client';
+
+const LinkToggleWrapper = ({ enableLink, children, currentRecord, ...props }) => {
+  return enableLink ? (
+    <Button
+      style={{ padding: 0, height: 'auto' }}
+      type="link"
+      {...props}
+      onClick={(e) => {
+        props.onClick(e, currentRecord);
+      }}
+    >
+      {children}
+    </Button>
+  ) : (
+    children
+  );
+};
 
 export class AssociationSelectReadPrettyFieldModel extends AssociationReadPrettyFieldModel {
   public static readonly supportedFieldInterfaces = [
@@ -24,9 +42,13 @@ export class AssociationSelectReadPrettyFieldModel extends AssociationReadPretty
     'updatedBy',
     'createdBy',
   ];
+
+  set onClick(fn) {
+    this.setProps({ ...this.props, onClick: fn });
+  }
   @reactive
   public render() {
-    const { fieldNames } = this.props;
+    const { fieldNames, enableLink = true } = this.props;
     const value = this.getValue();
     if (!this.collectionField || !value) {
       return;
@@ -58,27 +80,37 @@ export class AssociationSelectReadPrettyFieldModel extends AssociationReadPretty
         ...targetLabelField.getComponentProps(),
       },
     });
-    model.setSharedContext({ ...this.ctx.shared, value: value?.[fieldNames.label] });
+    model.setSharedContext({
+      ...this.ctx.shared,
+      value: value?.[fieldNames.label],
+      currentRecord: value,
+    });
     model.setParent(this.parent);
     if (Array.isArray(value)) {
       return (
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
           {value.map((v, idx) => {
             const mol = model.createFork({}, `${idx}`);
-            mol.setSharedContext({ index: idx, value: v?.[fieldNames.label], record: this.ctx.shared.record });
+            mol.setSharedContext({ ...this.ctx.shared, index: idx, value: v?.[fieldNames.label], currentRecord: v });
             return (
               <React.Fragment key={idx}>
                 {idx > 0 && <span style={{ color: 'rgb(170, 170, 170)' }}>,</span>}
-                <FlowEngineProvider engine={this.flowEngine}>
-                  {v?.[fieldNames.label] ? mol.render() : this.flowEngine.translate('N/A')}
-                </FlowEngineProvider>
+                <LinkToggleWrapper enableLink={enableLink} {...this.props} currentRecord={v}>
+                  <FlowEngineProvider engine={this.flowEngine}>
+                    {v?.[fieldNames.label] ? mol.render() : this.flowEngine.translate('N/A')}
+                  </FlowEngineProvider>
+                </LinkToggleWrapper>
               </React.Fragment>
             );
           })}
         </div>
       );
     }
-    return <FlowEngineProvider engine={this.flowEngine}>{model.render()}</FlowEngineProvider>;
+    return (
+      <LinkToggleWrapper enableLink={enableLink} {...this.props} currentRecord={value}>
+        <FlowEngineProvider engine={this.flowEngine}>{model.render()}</FlowEngineProvider>
+      </LinkToggleWrapper>
+    );
   }
 }
 
@@ -103,5 +135,46 @@ AssociationSelectReadPrettyFieldModel.registerFlow({
         ctx.model.setProps({ fieldNames: newFieldNames });
       },
     },
+    enableLink: {
+      title: 'Enable link',
+      uiSchema: {
+        enableLink: {
+          'x-component': 'Switch',
+          'x-decorator': 'FormItem',
+        },
+      },
+      defaultParams: {
+        enableLink: true,
+      },
+      handler(ctx, params) {
+        ctx.model.onClick = (e, currentRecord) => {
+          ctx.model.dispatchEvent('click', {
+            event: e,
+            filterByTk: currentRecord[ctx.model.targetCollection.filterTargetKey],
+            collectionName: ctx.model.targetCollection.name,
+          });
+          ctx.model.setStepParams('FormModel.default', 'step1', {
+            collectionName: ctx.model.targetCollection.name,
+          });
+        };
+        ctx.model.setProps('enableLink', params.enableLink);
+      },
+    },
+  },
+});
+
+AssociationSelectReadPrettyFieldModel.registerFlow({
+  key: 'handleClick',
+  title: tval('Click event'),
+  on: {
+    eventName: 'click',
+  },
+  steps: {
+    openView: {
+      use: 'openView',
+      defaultParams(ctx) {
+        return {};
+      },
+    },
   },
 });