fix(association-field): allow dissociate (#1940)

packages/core/client/src/locale/zh_CN.ts

@@ -313,6 +313,7 @@ export default {
   "Display field title": "显示字段标题",
   "Field component": "字段组件",
   "Allow multiple": "允许添加/关联多条",
+  "Allow dissociate": "允许移除已关联记录",
   "Quick upload": "快速上传",
   "Select file": "选择文件",
   "Subtable": "子表格",

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

@@ -9,6 +9,7 @@ export const AssociationFieldProvider = observer((props) => {
   const { getCollectionJoinField, getCollection } = useCollectionManager();
   const fieldSchema = useFieldSchema();
   const allowMultiple = fieldSchema['x-component-props']?.multiple !== false;
+  const allowDissociate = fieldSchema['x-component-props']?.allowDissociate !== false;
 
   const collectionField = useMemo(
     () => getCollectionJoinField(fieldSchema['x-collection-field']),
@@ -24,7 +25,9 @@ export const AssociationFieldProvider = observer((props) => {
   );
 
   return collectionField ? (
-    <AssociationFieldContext.Provider value={{ options: collectionField, field, allowMultiple, currentMode }}>
+    <AssociationFieldContext.Provider
+      value={{ options: collectionField, field, allowMultiple, allowDissociate, currentMode }}
+    >
       {props.children}
     </AssociationFieldContext.Provider>
   ) : null;

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

@@ -24,14 +24,18 @@ const ToOneNester = (props) => {
 
 const ToManyNester = observer((props) => {
   const fieldSchema = useFieldSchema();
-  const { field, allowMultiple } = useAssociationFieldContext<ArrayField>();
+  const { options, field, allowMultiple, allowDissociate } = useAssociationFieldContext<ArrayField>();
   const { t } = useTranslation();
   return (
     <Card bordered={true} style={{ position: 'relative' }}>
       {(field.value || []).map((value, index) => {
+        let allowed = allowDissociate;
+        if (!allowDissociate) {
+          allowed = !value?.[options.targetKey];
+        }
         return (
           <>
-            {!field.readPretty && (
+            {!field.readPretty && allowed && (
               <div style={{ textAlign: 'right' }}>
                 <CloseCircleOutlined
                   style={{ zIndex: 1000, position: 'absolute', color: '#a8a3a3' }}

packages/core/client/src/schema-component/antd/association-field/context.ts

@@ -6,6 +6,7 @@ export interface AssociationFieldContextProps {
   field?: GeneralField;
   currentMode?: string;
   allowMultiple?: boolean;
+  allowDissociate?: boolean;
 }
 
 export const AssociationFieldContext = createContext<AssociationFieldContextProps>({});

packages/core/client/src/schema-component/antd/association-field/hooks.ts

@@ -35,6 +35,7 @@ export function useAssociationFieldContext<F extends GeneralField>() {
     field: F;
     currentMode: string;
     allowMultiple?: boolean;
+    allowDissociate?: boolean;
   };
 }
 

packages/core/client/src/schema-component/antd/form-item/FormItem.tsx

@@ -3,6 +3,7 @@ import { ArrayCollapse, ArrayItems, FormLayout, FormItem as Item } from '@formil
 import { Field } from '@formily/core';
 import { ISchema, Schema, observer, useField, useFieldSchema } from '@formily/react';
 import { uid } from '@formily/shared';
+import { Select } from 'antd';
 import _ from 'lodash';
 import moment from 'moment';
 import React, { useContext, useEffect } from 'react';
@@ -32,7 +33,6 @@ import { FilterDynamicComponent } from '../table-v2/FilterDynamicComponent';
 import { isInvariable } from '../variable';
 import { FilterFormDesigner } from './FormItem.FilterFormDesigner';
 import { useEnsureOperatorsValid } from './SchemaSettingOptions';
-import { Select } from 'antd';
 
 const defaultInputStyle = css`
   & > .nb-form-item {
@@ -175,6 +175,7 @@ FormItem.Designer = function Designer() {
 
   const fieldSchemaWithoutRequired = _.omit(fieldSchema, 'required');
 
+  const isSubFormMode = fieldSchema['x-component-props'].mode === 'Nester';
   const isPickerMode = fieldSchema['x-component-props'].mode === 'Picker';
   const showFieldMode = isAssociationField && fieldModeOptions && !isTableField;
   const showModeSelect = showFieldMode && isPickerMode;
@@ -687,6 +688,29 @@ FormItem.Designer = function Designer() {
           }}
         />
       ) : null}
+      {IsShowMultipleSwitch() && isSubFormMode ? (
+        <SchemaSettings.SwitchItem
+          key="allowDissociate"
+          title={t('Allow dissociate')}
+          checked={fieldSchema['x-component-props']?.allowDissociate !== false}
+          onChange={(value) => {
+            const schema = {
+              ['x-uid']: fieldSchema['x-uid'],
+            };
+            fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+            field.componentProps = field.componentProps || {};
+
+            fieldSchema['x-component-props'].allowDissociate = value;
+            field.componentProps.allowDissociate = value;
+
+            schema['x-component-props'] = fieldSchema['x-component-props'];
+            dn.emit('patch', {
+              schema,
+            });
+            refresh();
+          }}
+        />
+      ) : null}
       {field.readPretty && options.length > 0 && fieldSchema['x-component'] === 'CollectionField' && !isFileField && (
         <SchemaSettings.SwitchItem
           title={t('Enable link')}