fix: 字段选择组件多选问题修复 (#132)

* fix: 字段选择组件多选问题修复 * fix: 类型报错 * chore: 优化代码 --------- Co-authored-by: yxh01132861 <[email protected]> Co-authored-by: yunji <[email protected]>
antvis · Jan 24, 2024 · cb01b6f · cb01b6f
1 parent e0a3134
commit cb01b6f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/packages/li-p2/src/components/Formily/FieldSelect/Select/index.tsx b/packages/li-p2/src/components/Formily/FieldSelect/Select/index.tsx
@@ -8,20 +8,32 @@ import React, { useState } from 'react';
 import useStyle from './style';
 import type { FieldSelectOptionType } from './types';
 
-const InternalSelect: React.FC<SelectProps<string, FieldSelectOptionType>> = (props) => {
+const InternalSelect: React.FC<SelectProps<string | string[], FieldSelectOptionType>> = (props) => {
   const { options, open: outerOpen = false, ...prop } = props;
   const prefixCls = usePrefixCls('formily-field-select');
   const [wrapSSR, hashId] = useStyle(prefixCls);
   const [internalOpen, setInternalOpen] = useState(outerOpen);
+  // Select 是否多选
+  const isMultiple = prop.mode;
 
   useUpdateEffect(() => {
     setInternalOpen(outerOpen);
   }, [outerOpen]);
 
   const onOptionClick = (val: string) => {
-    if (props.onChange) {
+    if (!props.onChange) return;
+    // 单选
+    if (!isMultiple) {
       props.onChange(val, options ?? []);
       setInternalOpen(false);
+    } else {
+      // 多选
+      if (!props.value) {
+        props.onChange([val], options ?? []);
+      } else if (Array.isArray(props.value)) {
+        const selectValues = Array.from(new Set(props.value.concat(val)));
+        props.onChange(selectValues, options ?? []);
+      }
     }
   };
 
@@ -41,10 +53,11 @@ const InternalSelect: React.FC<SelectProps<string, FieldSelectOptionType>> = (pr
           <div className={`${prefixCls}-dropdown`} style={{ height: dropdownHeight }}>
             <div className={`${prefixCls}-dropdown-container`}>
               {options?.map((item, index) => {
+                const isSelected = isMultiple ? props.value?.includes(item.value) : item.value === props.value;
                 return (
                   <div
                     className={cls(`${prefixCls}-item`, hashId, {
-                      [`${prefixCls}-item_selected`]: item.value === props.value,
+                      [`${prefixCls}-item_selected`]: isSelected,
                     })}
                     key={index}
                     onClick={() => onOptionClick(item.value)}

diff --git a/packages/li-p2/src/components/Formily/FieldSelect/index.tsx b/packages/li-p2/src/components/Formily/FieldSelect/index.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 import InternalSelect from './Select';
 import type { FieldSelectOptionType } from './Select/types';
 
-const FieldSelect: ReactFC<SelectProps<string, FieldSelectOptionType>> = connect(
+const FieldSelect: ReactFC<SelectProps<string | string[], FieldSelectOptionType>> = connect(
   InternalSelect,
   mapProps(
     {

diff --git a/...ages/li-p2/src/components/Formily/FilterConfiguration/FilterModal/FilterContent/index.tsx b/...ages/li-p2/src/components/Formily/FilterConfiguration/FilterModal/FilterContent/index.tsx
@@ -32,7 +32,7 @@ const FilterContent: React.FC<FilterContentProps> = (props) => {
   const openFieldSelect = outterValue.field ? false : true;
 
   // 筛选字段变更
-  const onFieldChange = (field: string) => {
+  const onFieldChange = (field: string | string[]) => {
     const _field = options.find((item) => item.value === field);
     if (_field) {
       setDomain(_field?.domain ?? []);