> 最低基线版本：2025.1101

## 组件概述

EbEditValueCom 是一个批量编辑组件，支持弹窗和内嵌两种模式，用于批量编辑选中数据的字段值。

## 接口定义

|  |
| --- |

### EditValueComProps

继承自 `BatchEditValueExportProps`和 `Attributes`。

| 属性名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| selectedIds | string\[\] | **必填** | 选中的数据ID数组 |
| colFieldIds | string\[\] | 可选 | 列字段ID数组，为空则使用所有可编辑字段 |
| dataset | DataSet | **必填** | 数据集对象，需包含id和appId |
| setStore | (batchEditValueStore: BatchEditValueStore) =\> void | 可选 | 设置组件内部store，可以通过这个调用组件内方法，如保存方法 |
| fieldChooseWidthFixation | 0 \|1 | 可选 | 字段选择框宽度固定：0-默认，1-固定 |
| isMobile | boolean | 可选 | 是否为移动端 |
| onSave | (data: any) =\> void | 可选 | 自定义保存接口，默认使用内置保存，默认不要传这个 |
| useDialog | boolean | 可选 | 是否使用弹窗模式 |
| visible | boolean | 可选，useDialog后必填 | 弹窗显隐状态 |
| onVisibleChange | (visible: boolean) =\> void | useDialog后必填 | 弹窗显隐状态变化回调 |
| searchParams | AnyObj | 可选 | 过滤参数对象 |
| dialogProps | AnyObj | 可选 | Dialog组件属性（地址：https://部署的E10服务地址/ui/dialog，如[https://www.e-cology.com.cn/ui/dialog](https://www.e-cology.com.cn/ui/dialog))，可覆盖默认配置 |
| afterSave | (res: any) =\> void | 可选 | 保存后回调 |
| value | any\[\] | 可选 | 绑定的值数组 |
| onChange | (editAreaValues: any\[\]) =\> void | 可选 | 值变化回调，返回修改后的数组 |
| label | string | 可选 | 标签文本 |

## 使用方式

### 方式一：组件式调用

通过全局 `CorsComponent`包装器调用。

```javascript
const { CorsComponent } = window.weappUi;

<CorsComponent
  app="@weapp/ebdfpage"
  compName="EbEditValueCom"
  dataset={{
    id: 'your-obj-id', //必需，表单id
    appId: 'your-app-id', // 必需,应用id
  }}
  selectedIds={['12312332', '1231234524']} //必需，要修改的数据id
  colFieldIds={['1167660754364981263', '1167660754364981265']}  //必需，列字段id，如不传或为空，则为当前表单所有可编辑列
  useDialog // 可选。是否使用默认的Dialog,如不使用Dialog模式，则保存需要使用store.onSave((res)=>{console.log(res)})自行触发
  visible={visible} // 可选。控制dialog的显隐标记
  onVisibleChange={onVisibleChange} // 可选。控制dialog的显隐的函数
  dialogProps={{}} // 可选。继承所有Dialog组件的属性，可实现复写Dialog
/>
```

### 方式二：异步引入调用

通过 `corsImport`异步加载模块。

```javascript
const { corsImport } = window.weappUtils;

constructor(props: any) {
  super(props);
  this.state = {
    com:null,
  };
}

componentDidMount(){
  this.getCom()
}

const getCom = ()=>{
  corsImport('@weapp/ebdfpage').then((Module) => {
    const { EbEditValueCom } = Module;
    const com = (
      <EbEditValueCom
        dataset={{
          id: '1167660754364981249',
          appId: 'your-app-id',
        }}
        selectedIds={['12312332', '1231234524']}
        colFieldIds={['1167660754364981263', '1167660754364981265']}
        searchParams={params1}
        useDialog
        visible={flowVisible}
        onVisibleChange={this.onVisibleChange}
        dialogProps={{}}
      />
    );
    this.setState({ com }); //可以暂存后再去渲染
  });
}
render(){
  return <>{this.state.com}</>
}
```

## 完整示例

### 示例1：弹窗模式

**复制**

```javascript
import React, { useState } from 'react';

const BatchEditExample = () => {
  const [visible, setVisible] = useState(false);
  const { CorsComponent } = window.weappUi;
  
  const handleSave = (data) => {
    console.log('保存数据:', data);
  };
  
  const handleAfterSave = (res) => {
    console.log('保存结果:', res);
    setVisible(false);
  };
  
  return (
    <div>
      <button onClick={() => setVisible(true)}>批量编辑</button>
      
      <CorsComponent
        weId="batch_edit_example"
        app="@weapp/ebdfpage"
        compName="EbEditValueCom"
        dataset={{
          id: '1167660754364981249',
          appId: 'your-app-id',
        }}
        selectedIds={['12312332', '1231234524']}
        colFieldIds={['1167660754364981263', '1167660754364981265']}
        useDialog
        visible={visible}
        onVisibleChange={setVisible}
        onSave={handleSave}
        afterSave={handleAfterSave}
        dialogProps={{
          width: 800,
          title: '批量编辑',
          maskClosable: false,
        }}
      />
    </div>
  );
};
```

### 示例2：内嵌模式

```javascript
import React from 'react';

const InlineEditExample = () => {
  const { CorsComponent } = window.weappUi;
  
  return (
    <div>
      <h3>批量编辑区域</h3>
      <CorsComponent
        weId="inline_edit_example"
        app="@weapp/ebdfpage"
        compName="EbEditValueCom"
        dataset={{
          id: '1167660754364981249',
          appId: 'your-app-id',
        }}
        selectedIds={['12312332', '1231234524']}
        colFieldIds={['field1', 'field2', 'field3']}
        onChange={(values) => {
          console.log('值发生变化:', values);
        }}
      />
    </div>
  );
};
```

## 参数说明

### 必填参数

- **selectedIds**: 需要批量编辑的数据记录ID数组
- **dataset**: 数据集配置对象，需包含 `id`和 `appId`

### 可选参数

- **colFieldIds**: 指定要编辑的字段ID数组，为空时使用表单所有可编辑字段
- **useDialog**: 设置为 `true`时启用弹窗模式
- **visible**: 控制弹窗显示状态，需配合 `onVisibleChange`使用
- **searchParams**: 过滤条件参数
- **dialogProps**: 弹窗属性，可配置宽度、标题等
- **onSave**: 自定义保存逻辑，不传则使用组件内置保存
- **afterSave**: 保存完成后回调

## 注意事项

1. **环境依赖**：确保全局对象 `window.weappUi`或 `window.weappUtils`已正确加载
2. **弹窗模式**：使用 `useDialog`时需配合 `visible`和 `onVisibleChange`管理状态
3. **必填参数**：`selectedIds`和 `dataset`必须提供有效值
4. **数据权限**：确保用户有对应数据的编辑权限
5. **异步加载**：异步引入方式需处理加载状态和错误情况
6. **字段控制**：通过 `colFieldIds`限制可编辑字段，不传则显示所有可编辑字段
7. **保存回调**：`afterSave`在保存成功后触发，无论是否使用自定义保存逻辑

## 常见问题

**Q: 如何获取组件实例？**

A: 通过 `refsObj`属性获取组件内部引用

**Q: 如何自定义字段宽度？**

A: 通过 `fieldChooseWidthFixation`控制字段选择框宽度

**Q: 移动端适配？**

A: 暂不支持

**Q: 如何传递搜索条件？**

A: 通过 `searchParams`传递过滤参数，组件会基于此参数加载数据
