# 一、概述

    列表按钮为页面列表组件本身的能力，考虑到目前已有功能和各个业务模式当前需求下的按钮接入需求，【按钮配置】继续保留，同时保留组件的自定义能力，按钮分为两类：一类是**数据源按钮**，另一类是**组件自定义按钮**（具体动作接事件动作的单击）；数据源按钮可通过后端接口的形式对接进来在表格展示，组件自定义按钮只针对当前组件生效，不回写数据源。针对列表组件做以下整理：

## 1、数据源按钮

         数据源按钮同步过来，支持按钮配置，可配置【启用】和【显示位置】，按钮默认是关闭的（兼容历史场景），支持批量开启操作；内部抽象sdk等动作标识，前端只给触发，不做业务逻辑实现

# 二、按钮配置实现

## 1、按钮配置Com

```typescript
 <CorsComponent
        weId={`${this.props.weId || ''}_73rnip`}
        app="@weapp/ebdform"
        compName="ButtonConfig"
        dataset={{
            groupId: '787963620946870272',
            type: 'FORM',
            id: '787963822673854465',
            text: 'erwq',
          }}
        data={[]}//默认数据
        onSure={this.onConfirm} // 确定回调，两个参数
		//事件内部需求一些参数传递进去
        page={{
            appid: '602502801171496961',
            client: 'PC',
            datasetVals: [], // 可能是数据集相关，PageLink组件参数相同
            id: '677445243167776768',
            module: 'EB_PAGE',
            name: '',
          }}
		//显示位置相关一些配置
       positionParams={{
            positionKeys: [
              ['rightTop', 'rightTopDropDown', 'rightTopBatch'],
              ['lineEnd', 'LineEndDropDown'],
            ],
            permissionConditionKeys: ['lineEnd', 'LineEndDropDown'],
            needBtnOperateType: true,
            operateTypeKeys: ['rightTop', 'rightTopDropDown', 'rightTopBatch'],
            operateTypeHelpTip:
              '仅在按钮显示在表格 “右上角、右上角更多菜单或右上角批量操作菜单” 时生效',
            positionData: [
              {
                id: 'rightTop',
                title: getLabel('55668', '右上角'),
                img: 'button_position/list_right_top.svg',
              },
              {
                id: 'rightTopDropDown',
                title: getLabel('116108', '右上角更多菜单'),
                img: 'button_position/list_right_top_more.svg',
              },
              {
                id: 'rightTopBatch',
                title: getLabel('116109', '右上角批量操作菜单'),
                img: 'button_position/list_right_top_batch.svg',
              },
              {
                id: 'lineEnd',
                title: getLabel('107086', '行上'),
                img: 'button_position/list_row_out.svg',
              },
              {
                id: 'LineEndDropDown',
                title: getLabel('56768', '行末下拉'),
                img: 'button_position/list_row_inner.svg',
              },
            ],
          }}
        actionParams={{
          /** 事件动作的传参 */
          /** 如果需要限制某种按钮类型，得包一层对象，key随便取，内部得有showPositionKeys */
          params: {
            showPositionKeys: lineKeys, // ['lineEnd', 'LineEndDropDown']
			/*
			*
				` // 可通过this对象获取行数据以及dom对象, this对象格式: {target: ..., data: {...}}
  				//获取行数据，比如该行数据为{id: 1, name: Joy, age: 18}
  				var data = this.data;     //data = {id: 1, name: Joy, age: 18}
  				var name = data.name;     //获取行数据字段为name的值, name=Joy
  				//获取按钮dom对象
  				var target = this.target; //target为按钮的dom对象
  				target.innerText='delete' //修改当前按钮名称为'delete'`;
			*
			*/	
            jsCodePlaceholder: listJsPlaceholder,
          },
          /** 如果不需要限制按钮类型，就全部写在otherParams内 */
          otherParams: {},
        }}
/>
```

**PositionParams types参数说明**

```typescript
export type PositionParams = {
  /* 枚举所有的位置key，形成互斥关系[[],[]]，如果没互斥关系[[]]，一个数据组就可以了
   *  互斥关系: 按钮的显示位置在同[]之间只能选一个
   */
  positionKeys: Array<string>[];
  // 枚举需要启用过滤配置的按钮位置key
  // needConditionKeys: string[];
  //枚举按钮权限需要添加条件的按钮key
  permissionConditionKeys: string[];
  //显示位置数据
  positionData: PositionData[];
  /**
   * 按钮执行方式相关
   *  needBtnOperateType:是否需要执行方式选项
   *  operateTypeKeys: 需要执行方式控制的位置keys
   * operateTypeHelpTip:执行方式的help说明
   */
  needBtnOperateType?: boolean;
  operateTypeKeys?: string[];
  operateTypeHelpTip?: string | ReactElement;
};
```

## 2、按钮数据data说明

导出按钮为例：

```typescript
/**
 * rightTopKeys : 列表右上角按钮keys
 * lineKeys ： 列表行上数据按钮keys
 */
export const rightTopKeys = ['rightTop', 'rightTopDropDown', 'rightTopBatch'];
export const lineKeys = ['lineEnd', 'LineEndDropDown']; 

static defaultButtonconstns = {
    buttonType: 'COMCUSTOM',//组件自定义 COMCUSTOM   其他  数据源按钮
    buttonKey: ComCustomConstBtn.ExportButton, //按钮key，区分组件按钮类别 
    system: 1, //eb表单内部有系统和自定义区分
    id: `${UUID(16)}`,
    name: getLabel('55843', '导出'),
    enable: 0, //是否启用
    onlyIcon: 0, //是否仅显示图标
    scope: 'PC', // 显示设备 'PC,MOBILE'
    btnPositionData: rightTopKeys, //按钮显示的可选位置
    showPosition: [rightTopKeys[1]],//当前按钮默认显示位置
    actions: [],//动作数据，后面详细介绍（这块目前主要针对的是eb表单）
    hideAction: true,//隐藏动作配置，一些自定义按钮存在默认行为
    permissions: [ //权限相关的数据
      {
        content: '',
        contentSpan: '',
        id: `-${UUID()}`,
        levelScope: { minShowlevel: '', maxShowlevel: '' },
        permissionType: 'all',
        relation: '0',
      },
    ],
  };
```

eb表单按钮的actions介绍(其他数据源不需要参考)

```json
[
 {	
	"id":"839601106569936897",
	"deleteType":0,
	"idStr":"839601106569936897",
	"name":"",
	"buttonId":"827697561691914241",
	"actionType":"openpage",
	"datarule":"",
	"conditionTxt":"",
	"enable":1,
	"showOrder":0,
	"url":"{"openMode":"0","name":"首页","page":{"pageId":"602502801171496960","openMode":"0","pageName":"首页","pageType":"PAGE","terminalScopes":"PC,MOBILE","appid":"602502801171496961"},"params":[]}",
	"openType":"1",
	"windowSize":60.0,
	"interfacePath":"",
	"desc":"",
	"urlType":"0",
	"interfaceType":"",
	"confirmTitle":"",
	"confirmContent":"",
	"confirmTrue":"",
	"confirmFalse":"",
	"ecode":""
  }
]
```

# 三、其他数据源列表按钮接入

## 1、返回的数据格式

```typescript
eg:
{
    buttonType: '',//组件自定义 COMCUSTOM   其他  数据源按钮
    buttonKey: 'forward', //按钮key，区分组件按钮类别 
    system: 1, //eb表单内部有系统和自定义区分
    id: `${UUID(16)}`,
    name: 转发
    enable: 0, //是否启用
    onlyIcon: 0, //是否仅显示图标
    scope: 'PC', // 显示设备 'PC,MOBILE'
    btnPositionData: ['lineEnd', 'LineEndDropDown'], //按钮显示的可选位置
    showPosition: ['LineEndDropDown'],//当前按钮默认显示位置
    actions: [],//动作数据，后面详细介绍（这块目前主要针对的是eb表单）
    hideAction: true,//隐藏动作配置，一些自定义按钮存在默认行为
    permissions: [],
	package:"@weapp/workflow",//前端服务名称
  }
```

## 2、按钮触发sdk交互方案

```typescript

corsImport('@weapp/workflow').then(({ executeBtnActions }) => {
      
        executeBtnActions(this.props, btnData, rowData, (type:string)=>{
			//回调（刷新、清空按钮、更新当前数据...）
		},{ 
		...
		});
 });
```
