feat: 级联选择器增加选中项标题事件动作变量

baidu · Dec 5, 2024 · b67e2b5 · b67e2b5
1 parent 13f2aa3
commit b67e2b5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 30 deletions.
diff --git a/packages/amis-editor/src/plugin/Form/NestedSelect.tsx b/packages/amis-editor/src/plugin/Form/NestedSelect.tsx
@@ -141,7 +141,8 @@ export class NestedSelectControlPlugin extends BasePlugin {
                 type: 'object',
                 title: '数据',
                 properties: {
-                  value
+                  value,
+                  label: {type: 'string', title: '选中项标题'}
                 }
               }
             }
@@ -164,7 +165,8 @@ export class NestedSelectControlPlugin extends BasePlugin {
                 type: 'object',
                 title: '数据',
                 properties: {
-                  value
+                  value,
+                  label: {type: 'string', title: '选中项标题'}
                 }
               }
             }
@@ -187,7 +189,8 @@ export class NestedSelectControlPlugin extends BasePlugin {
                 type: 'object',
                 title: '数据',
                 properties: {
-                  value
+                  value,
+                  label: {type: 'string', title: '选中项标题'}
                 }
               }
             }

diff --git a/packages/amis/src/renderers/Form/NestedSelect.tsx b/packages/amis/src/renderers/Form/NestedSelect.tsx
@@ -210,32 +210,18 @@ export default class NestedSelectControl extends React.Component<
   }
 
   async removeItem(index: number, e?: React.MouseEvent<HTMLElement>) {
-    let {
-      onChange,
-      selectedOptions,
-      joinValues,
-      valueField,
-      extractValue,
-      delimiter,
-      value
-    } = this.props;
+    let {onChange, selectedOptions} = this.props;
 
     e && e.stopPropagation();
 
     selectedOptions.splice(index, 1);
 
-    if (joinValues) {
-      value = (selectedOptions as Options)
-        .map(item => item[valueField || 'value'])
-        .join(delimiter || ',');
-    } else if (extractValue) {
-      value = (selectedOptions as Options).map(
-        item => item[valueField || 'value']
-      );
-    }
+    const value = this.getValue();
+    const label = this.getValue('label');
 
     const isPrevented = await this.dispatchEvent('change', {
-      value
+      value,
+      label
     });
     isPrevented || onChange(value);
   }
@@ -315,7 +301,8 @@ export default class NestedSelectControl extends React.Component<
     }
 
     const isPrevented = await this.dispatchEvent('change', {
-      value
+      value,
+      label: option.label
     });
     isPrevented || onChange(value);
     isPrevented || this.handleResultClear();
@@ -476,24 +463,25 @@ export default class NestedSelectControl extends React.Component<
   }
 
   @autobind
-  getValue() {
+  getValue(propName?: string) {
     let {
       selectedOptions,
       joinValues,
       valueField,
+      labelField,
       extractValue,
       delimiter,
       value
     } = this.props;
+    const attribute =
+      propName === 'label' ? labelField || 'label' : valueField || 'value';
 
     if (joinValues) {
       value = (selectedOptions as Options)
-        .map(item => item[valueField || 'value'])
+        .map(item => item[attribute])
         .join(delimiter || ',');
     } else if (extractValue) {
-      value = (selectedOptions as Options).map(
-        item => item[valueField || 'value']
-      );
+      value = (selectedOptions as Options).map(item => item[attribute]);
     }
 
     return value;
@@ -504,14 +492,16 @@ export default class NestedSelectControl extends React.Component<
     const {onFocus, disabled} = this.props;
 
     const value = this.getValue();
+    const label = this.getValue('label');
 
     if (!disabled && !this.state.isOpened) {
       this.setState({
         isFocused: true
       });
 
       const isPrevented = await this.dispatchEvent('focus', {
-        value
+        value,
+        label
       });
       isPrevented || (onFocus && onFocus(e));
     }
@@ -522,13 +512,15 @@ export default class NestedSelectControl extends React.Component<
     const {onBlur} = this.props;
 
     const value = this.getValue();
+    const label = this.getValue('label');
 
     this.setState({
       isFocused: false
     });
 
     const isPrevented = await this.dispatchEvent('blur', {
-      value
+      value,
+      label
     });
     isPrevented || (onBlur && onBlur(e));
   }