# BatchOperator 批量提交

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/batch-operator/freepass)
- 平台：PC
- 维护者：许平源
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[BatchOperator]

## 代码演示

### 基础用法（路由模式）

直接引入组件进行使用，通过 to 传递路由

```jsx
import { RouteComponentProps, withRouter } from "react-router-dom";
import { PureComponent } from 'react';
import { RequestOptionConfig } from '@weapp/utils';
import { BatchOperator, Button, constants, OperatesType, ITableCellPos, SearchDatas, ITableColumn, ITableSelection, utils } from '@weapp/ui';
import DemoStore from './store'

const { formatParentPath, getHash } = utils;

const demoStore = new DemoStore();
const batchOpsStore = demoStore.batchOpsStore
const searchAdvancedStore = demoStore.searchAdvancedStore

const prefixCls = `${constants.uiPcClsPrefix}-demo-batch-ops`;

// 列表数据主接口
// 同步：返回ListView 所需全部数据，asyncCounts、asyncOperates 不再需要传入
// 异步：返回 data, columns, current, pageSize, displayData
const requestConfig: RequestOptionConfig = {
  url: '/api/workflow/list/data/getTodoListData/batch/batchAttention',
  method: 'post',
  params: {
    "dimension": "todo",
    "searchParams": {
      "formDatas": {},
      "quickSearchDatas": {},
      "type": "and",
      "initSearch": true
    },
    "params": {
      "tabid": "0",
      "sortParams": []
    },
    "sortParams": [],
    "current": 1,
    "pageSize": 10
  }

}
// 列表 count接口
// 异步：返回total
const asyncCounts: RequestOptionConfig = {
  url: '/api/workflow/list/total/getTodoListTotal/batch/batchAttention',
  method: 'post',
  params: {
    "dimension": "todo",
    "searchParams": {
      "formDatas": {},
      "quickSearchDatas": {},
      "type": "and",
      "initSearch": true
    },
    "params": {
      "tabid": "0",
      "sortParams": []
    },
    "sortParams": [],
    "current": 1,
    "pageSize": 10
  }
}
// 列表 operates接口  操作菜单、check权限
// 异步：返回operates, operatesPermission, checkBoxPermission
const asyncOperates: RequestOptionConfig = {
  url: '/api/workflow/list/check/getTodoListCheck/batch/batchAttention',
  method: 'post',
  params: {
    "current": 1,
    "pageSize": 10,
    "data": [
      {
        "firstViewDateTime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363858187042817",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "606286813388161027",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "606286813388161029",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "lastfeedbackdatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363819347787777",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605132510862589955",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605132510862589957",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363265364254721",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605077698489958407",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605077702784925699",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363914004979713",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605077698489958401",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605077698489958405",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          13,
          30,
          30
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363256765792262",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605048204949536768",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605048204949536770",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "needwfback": 0,
        "datasrc": 0
      }
    ]
  }
}

// @ts-ignore
@withRouter
class BatchOpsBasicDemo extends PureComponent<RouteComponentProps> {

  routeId: string = getHash();
  parentPath = formatParentPath(this.props as any);
  private listViewRef: any;

  state = {
    pagaInfo: {
      value: 2,
      pageSize: 10
    },
    visible: false
  }

  componentDidMount() {
    demoStore.getBatchSearchAd();

    // this.initData();
  }

  // initData = () => {
  //   const { listViewStore } = batchOpsStore;
  //   const { setState, displayData } = listViewStore;
  //   // mock模拟数据 实际开发中请使用上面 store.getData 的方式！！
  //   setTimeout(() => {
  //     let res = { ...mock2.mockData }

  //     if (res.status) {
  //       const { data: _d } = res;
  //       const { data, columns, current, pageSize, operates, displayData, operatesPermission = [], checkBoxPermission = [], total } = _d;

  //       setState({
  //         initColumns: columns,
  //         data, columns, operates, displayData, operatesPermission, checkBoxPermission, total, pageSize, current
  //       })
  //     }
  //   }, 50)
  // }

  // 获取 listView ref
  getListViewRef = (instance: any) => {
    this.listViewRef = instance
  }

  // 打开批量操作
  onClick = () => {
    this.props.history?.push(`${this.parentPath}/batchops-${this.routeId}`);
  }

  // 确定提交
  onSubmit = (selectedRowKeys: string[], deSelectedRowKeys?: string[], isSelectAll?: boolean) => {
    console.log('onSubmit isSelectAll:', isSelectAll, selectedRowKeys, deSelectedRowKeys)
    // 这一步不需要了，组件内部会在弹框关闭时清空已选数据
    // batchOpsStore.listViewStore.setState({ checkedKeys: [] })
    // 如果需要修改已选数据，改为使用下面方法（注意，如果开启了全选功能，注意清空 deSelectedRowKeys 数据）
    // batchOpsStore.setState({ selectedRowKeys: [], deSelectedRowKeys: [] })
  }

  // 取消
  onCancel = () => {
    console.log(this.listViewRef)
  }

  // 选中回调
  onSelect = (selectedRowKeys: string[], selectedRows: any[], currentRow: any | any[], type?: string) => {
    console.log(selectedRowKeys, selectedRows, currentRow, type)
  }

  // 选项操作
  onOperateClick = (item: OperatesType, data: object, pos: ITableCellPos) => {
    console.log(item, data, pos)
  }

  // 高级搜索前数据处理
  onSearchBefore = (data: SearchDatas, dataSource: string) => {
    return {
      formDatas: 'data.formDatas'
    };
  }
  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    const { listViewStore } = batchOpsStore;
    const { setState, displayData } = listViewStore
    console.log('onSort', columns, sortColumn)

    // 排序逻辑处理 mock
    const _d = JSON.parse(JSON.stringify(displayData))

    _d.sort((a: any, b: any) => {
      if (sortColumn.orderType === 'asc') {
        return Number(b.id) - Number(a.id)
      } else {
        return Number(a.id) - Number(b.id)
      }
    })

    setState({ columns, displayData: _d })
  }

  getColumns = (columns: ITableColumn[]) => {
    console.log('getColumns')
    return columns;
  }

  listViewProps = {
    getColumns: this.getColumns,
    module: "test",
  }

  searchAdvancedProps = {
    conditionId: '',
    module: "test",
    searchAdvancedStore: searchAdvancedStore,
  }

  render() {
    return (
      <div className={prefixCls}>
        <Button onClick={this.onClick}>批量提交</Button>
        <BatchOperator
          // 必传
          to={`${this.parentPath}/batchops-${this.routeId}`}
          batchOperatorStore={batchOpsStore}
          requestConfig={requestConfig}
          asyncCounts={asyncCounts}
          asyncOperates={asyncOperates}
          // 选传
          // dialog 设置
          // dialogProps={{
          //   title: '批量提交',
          //   height: 600,
          //   width: 800
          // }}

          // 操作回调
          onSubmit={this.onSubmit}
          onCancel={this.onCancel}

          // 分页配置（可不填）
          // pagationInfo={this.state.pagaInfo}

          searchAdvancedProps={this.searchAdvancedProps}

          listViewProps={this.listViewProps}

          onSelect={this.onSelect}
          onSort={this.onSort}
          onOperateClick={this.onOperateClick}

          listViewRef={this.getListViewRef}

          // 高级搜索前数据处理
          onSearchBefore={this.onSearchBefore}
        />
      </div>
    );
  }
}

export default BatchOpsBasicDemo;
```

### 非路由模式

非路由模式，有外部传入 visible 进行受控展示

```jsx
import { RouteComponentProps, withRouter } from "react-router-dom";
import { PureComponent } from 'react';
import { inject, observer } from 'mobx-react';
import { RequestOptionConfig } from '@weapp/utils';
import { BatchOperator, Button, constants, OperatesType, ITableCellPos, SearchDatas, ITableColumn } from '@weapp/ui';
import { utils } from "@weapp/ui";
import DemoStore from './store'

const { formatParentPath, getHash } = utils;

const demoStore = new DemoStore();
const batchOpsStore = demoStore.batchOpsStore
const searchAdvancedStore = demoStore.searchAdvancedStore

const prefixCls = `${constants.uiPcClsPrefix}-demo-batch-ops`;

// 列表数据主接口
// 同步：返回ListView 所需全部数据，asyncCounts、asyncOperates 不再需要传入
// 异步：返回 data, columns, current, pageSize, displayData
const requestConfig: RequestOptionConfig = {
  url: '/api/workflow/list/data/getTodoListData/batch/batchAttention',
  method: 'post',
  params: {
    "dimension": "todo",
    "searchParams": {
      "formDatas": {},
      "quickSearchDatas": {},
      "type": "and",
      "initSearch": true
    },
    "params": {
      "tabid": "0",
      "sortParams": []
    },
    "sortParams": [],
    "current": 1,
    "pageSize": 10
  }

}
// 列表 count接口
// 异步：返回total
const asyncCounts: RequestOptionConfig = {
  url: '/api/workflow/list/total/getTodoListTotal/batch/batchAttention',
  method: 'post',
  params: {
    "dimension": "todo",
    "searchParams": {
      "formDatas": {},
      "quickSearchDatas": {},
      "type": "and",
      "initSearch": true
    },
    "params": {
      "tabid": "0",
      "sortParams": []
    },
    "sortParams": [],
    "current": 1,
    "pageSize": 10
  }
}
// 列表 operates接口  操作菜单、check权限
// 异步：返回operates, operatesPermission, checkBoxPermission
const asyncOperates: RequestOptionConfig = {
  url: '/api/workflow/list/check/getTodoListCheck/batch/batchAttention',
  method: 'post',
  params: {
    "current": 1,
    "pageSize": 10,
    "data": [
      {
        "firstViewDateTime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363858187042817",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "606286813388161027",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "606286813388161029",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "lastfeedbackdatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363819347787777",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605132510862589955",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605132510862589957",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363265364254721",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605077698489958407",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605077702784925699",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363914004979713",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605077698489958401",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605077698489958405",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          13,
          30,
          30
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363256765792262",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605048204949536768",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605048204949536770",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "needwfback": 0,
        "datasrc": 0
      }
    ]
  }
}

// @ts-ignore
@withRouter
class BatchOpsBasicDemo extends PureComponent<RouteComponentProps> {

  routeId: string = getHash();
  parentPath = formatParentPath(this.props as any);
  private listViewRef: any;

  state = {
    pagaInfo: {
      value: 2,
      pageSize: 10
    },
    visible: false
  }

  componentDidMount() {
    demoStore.getBatchSearchAd();
  }

  // 获取 listView ref
  getListViewRef = (instance: any) => {
    this.listViewRef = instance
  }

  // 打开批量操作
  onClick = () => {
    this.setState({ visible: true })
  }

  // 确定提交
  onSubmit = (selectedRowKeys: string[], deSelectedRowKeys?: string[], isSelectAll?: boolean) => {
    console.log('onSubmit isSelectAll:', isSelectAll, selectedRowKeys, deSelectedRowKeys)
    // 这一步不需要了，组件内部会在弹框关闭时清空已选数据
    // batchOpsStore.listViewStore.setState({ checkedKeys: [] })
    // 如果需要修改已选数据，改为使用下面方法（注意，如果开启了全选功能，注意清空 deSelectedRowKeys 数据）
    // batchOpsStore.setState({ selectedRowKeys: [], deSelectedRowKeys: [] })
  }

  // 取消
  onCancel = () => {
    console.log(this.listViewRef)
    this.setState({ visible: false })
  }

  // 选中回调
  onSelect = (selectedRowKeys: string[], selectedRows: any[], currentRow: any | any[]) => {
    console.log(selectedRowKeys, selectedRows, currentRow)
  }

  // 选项操作
  onOperateClick = (item: OperatesType, data: object, pos: ITableCellPos) => {
    console.log(item, data, pos)
  }

  // 高级搜索前数据处理
  onSearchBefore = (data: SearchDatas, dataSource: string) => {
    return {
      formDatas: 'data.formDatas'
    };
  }
  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    const { listViewStore } = batchOpsStore;
    const { setState, displayData } = listViewStore
    console.log('onSort', columns, sortColumn)

    // 排序逻辑处理 mock
    const _d = JSON.parse(JSON.stringify(displayData))

    _d.sort((a: any, b: any) => {
      if (sortColumn.orderType === 'asc') {
        return Number(b.id) - Number(a.id)
      } else {
        return Number(a.id) - Number(b.id)
      }
    })

    setState({ columns, displayData: _d })
  }

  getColumns = (columns: ITableColumn[]) => {
    console.log('getColumns')
    return columns;
  }
  searchAdvancedProps = {
    conditionId: '',
    module: "test",
    searchAdvancedStore: searchAdvancedStore
  }

  listViewProps = {
    getColumns: this.getColumns,
    module: "test",
  }

  footerBtn = [
    {
      key: 'submit',
    },
    {
      key: 'custom',
      render: (key?: string) => {
        return <Button key={key}>自定义</Button>
      }
    },
    {
      key: 'cancel',
    },
  ]

  render() {

    return (
      <div className={prefixCls}>
        <Button onClick={this.onClick}>批量提交</Button>
        <BatchOperator
          // 非路由
          visible={this.state.visible}

          batchOperatorStore={batchOpsStore}
          requestConfig={requestConfig}
          asyncCounts={asyncCounts}
          asyncOperates={asyncOperates}
          // 选传
          // dialog 设置
          // dialogProps={{
          //   title: '批量提交',
          //   height: 600,
          //   width: 800
          // }}

          // 操作回调
          onSubmit={this.onSubmit}
          onCancel={this.onCancel}

          // 分页配置（可不填）
          // pagationInfo={this.state.pagaInfo}

          searchAdvancedProps={this.searchAdvancedProps}

          listViewProps={this.listViewProps}

          onSelect={this.onSelect}
          onSort={this.onSort}
          onOperateClick={this.onOperateClick}

          listViewRef={this.getListViewRef}

          // 高级搜索前数据处理
          onSearchBefore={this.onSearchBefore}

          footerBtn={this.footerBtn}
        />
      </div>
    );
  }
}

export default BatchOpsBasicDemo;
```

### 高级搜索简易模式

```jsx
import { RouteComponentProps, withRouter } from "react-router-dom";
import { PureComponent } from 'react';
import { inject, observer } from 'mobx-react';
import { RequestOptionConfig } from '@weapp/utils';
import { BatchOperator, Button, constants, OperatesType, ITableCellPos, SearchDatas, ITableColumn } from '@weapp/ui';
import { utils } from "@weapp/ui";
import DemoStore from './store'

const { formatParentPath, getHash } = utils;

const demoStore = new DemoStore();
const batchOpsStore = demoStore.batchOpsStore
const searchAdvancedStore = demoStore.searchAdvancedStore

const prefixCls = `${constants.uiPcClsPrefix}-demo-batch-ops`;

// 列表数据主接口
// 同步：返回ListView 所需全部数据，asyncCounts、asyncOperates 不再需要传入
// 异步：返回 data, columns, current, pageSize, displayData
const requestConfig: RequestOptionConfig = {
  url: '/api/workflow/list/data/getTodoListData/batch/batchAttention',
  method: 'post',
  params: {
    "dimension": "todo",
    "searchParams": {
      "formDatas": {},
      "quickSearchDatas": {},
      "type": "and",
      "initSearch": true
    },
    "params": {
      "tabid": "0",
      "sortParams": []
    },
    "sortParams": [],
    "current": 1,
    "pageSize": 10
  }

}
// 列表 count接口
// 异步：返回total
const asyncCounts: RequestOptionConfig = {
  url: '/api/workflow/list/total/getTodoListTotal/batch/batchAttention',
  method: 'post',
  params: {
    "dimension": "todo",
    "searchParams": {
      "formDatas": {},
      "quickSearchDatas": {},
      "type": "and",
      "initSearch": true
    },
    "params": {
      "tabid": "0",
      "sortParams": []
    },
    "sortParams": [],
    "current": 1,
    "pageSize": 10
  }
}
// 列表 operates接口  操作菜单、check权限
// 异步：返回operates, operatesPermission, checkBoxPermission
const asyncOperates: RequestOptionConfig = {
  url: '/api/workflow/list/check/getTodoListCheck/batch/batchAttention',
  method: 'post',
  params: {
    "current": 1,
    "pageSize": 10,
    "data": [
      {
        "firstViewDateTime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363858187042817",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "606286813388161027",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "606286813388161029",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "lastfeedbackdatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363819347787777",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605132510862589955",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605132510862589957",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363265364254721",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605077698489958407",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605077702784925699",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363914004979713",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605077698489958401",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605077698489958405",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          13,
          30,
          30
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363256765792262",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605048204949536768",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605048204949536770",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "needwfback": 0,
        "datasrc": 0
      }
    ]
  }
}

// @ts-ignore
@withRouter
class BatchOpsBasicDemo extends PureComponent<RouteComponentProps> {

  routeId: string = getHash();
  parentPath = formatParentPath(this.props as any);
  private listViewRef: any;

  state = {
    pagaInfo: {
      value: 2,
      pageSize: 10
    },
    visible: false
  }

  componentDidMount() {
    demoStore.getBatchSearchAd();
  }

  // 获取 listView ref
  getListViewRef = (instance: any) => {
    this.listViewRef = instance
  }

  // 打开批量操作
  onClick = () => {
    this.props.history?.push(`${this.parentPath}/batchops-${this.routeId}`);
  }

  // 确定提交
  onSubmit = (selectedRowKeys: string[], deSelectedRowKeys?: string[], isSelectAll?: boolean) => {
    console.log('onSubmit isSelectAll:', isSelectAll, selectedRowKeys, deSelectedRowKeys)
    // 这一步不需要了，组件内部会在弹框关闭时清空已选数据
    // batchOpsStore.listViewStore.setState({ checkedKeys: [] })
    // 如果需要修改已选数据，改为使用下面方法（注意，如果开启了全选功能，注意清空 deSelectedRowKeys 数据）
    // batchOpsStore.setState({ selectedRowKeys: [], deSelectedRowKeys: [] })
  }

  // 取消
  onCancel = () => {
    console.log(this.listViewRef)
  }

  // 选中回调
  onSelect = (selectedRowKeys: string[], selectedRows: any[], currentRow: any | any[]) => {
    console.log(selectedRowKeys, selectedRows, currentRow)
  }

  // 选项操作
  onOperateClick = (item: OperatesType, data: object, pos: ITableCellPos) => {
    console.log(item, data, pos)
  }

  // 高级搜索前数据处理
  onSearchBefore = (data: SearchDatas, dataSource: string) => {
    return {
      formDatas: 'data.formDatas'
    };
  }
  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    const { listViewStore } = batchOpsStore;
    const { setState, displayData } = listViewStore
    console.log('onSort', columns, sortColumn)

    // 排序逻辑处理 mock
    const _d = JSON.parse(JSON.stringify(displayData))

    _d.sort((a: any, b: any) => {
      if (sortColumn.orderType === 'asc') {
        return Number(b.id) - Number(a.id)
      } else {
        return Number(a.id) - Number(b.id)
      }
    })

    setState({ columns, displayData: _d })
  }

  getColumns = (columns: ITableColumn[]) => {
    console.log('getColumns')
    return columns;
  }

  searchAdvancedProps: any = {
    conditionId: '',
    module: "test",
    searchAdvancedStore: searchAdvancedStore,
    mode: 'simple',
    onlyShowIcon: true
  }

  listViewProps = {
    getColumns: this.getColumns,
    module: "test",
  }

  render() {

    return (
      <div className={prefixCls}>
        <Button onClick={this.onClick}>批量提交</Button>
        <BatchOperator
          // 必传
          to={`${this.parentPath}/batchops-${this.routeId}`}
          batchOperatorStore={batchOpsStore}
          requestConfig={requestConfig}
          asyncCounts={asyncCounts}
          asyncOperates={asyncOperates}
          // 选传
          // dialog 设置
          // dialogProps={{
          //   title: '批量提交',
          //   height: 600,
          //   width: 800
          // }}

          // 操作回调
          onSubmit={this.onSubmit}
          onCancel={this.onCancel}

          // 分页配置（可不填）
          // pagationInfo={this.state.pagaInfo}

          searchAdvancedProps={this.searchAdvancedProps}

          listViewProps={this.listViewProps}

          onSelect={this.onSelect}
          onSort={this.onSort}
          onOperateClick={this.onOperateClick}

          listViewRef={this.getListViewRef}

          // 高级搜索前数据处理
          onSearchBefore={this.onSearchBefore}
        />
      </div>
    );
  }
}

export default BatchOpsBasicDemo;
```

### 高级搜索快捷搜索框

```jsx
import { RouteComponentProps, withRouter } from "react-router-dom";
import { PureComponent } from 'react';
import { inject, observer } from 'mobx-react';
import { RequestOptionConfig } from '@weapp/utils';
import { BatchOperator, Button, constants, OperatesType, ITableCellPos, SearchDatas, ITableColumn } from '@weapp/ui';
import { utils } from "@weapp/ui";
import DemoStore from './store'

const { formatParentPath, getHash } = utils;

const demoStore = new DemoStore();
const batchOpsStore = demoStore.batchOpsStore
const searchAdvancedStore = demoStore.searchAdvancedStore

const prefixCls = `${constants.uiPcClsPrefix}-demo-batch-ops`;

// 列表数据主接口
// 同步：返回ListView 所需全部数据，asyncCounts、asyncOperates 不再需要传入
// 异步：返回 data, columns, current, pageSize, displayData
const requestConfig: RequestOptionConfig = {
  url: '/api/workflow/core/list/data/getTodoListData/batch/batchAttention',
  method: 'post',
  params: {
    "dimension": "todo",
    "searchParams": {
      "formDatas": {},
      "quickSearchDatas": {},
      "type": "and",
      "initSearch": true
    },
    "params": {
      "tabid": "0",
      "sortParams": []
    },
    "sortParams": [],
    "current": 1,
    "pageSize": 10
  }

}
// 列表 count接口
// 异步：返回total
const asyncCounts: RequestOptionConfig = {
  url: '/api/workflow/core/list/total/getTodoListTotal/batch/batchAttention',
  method: 'post',
  params: {
    "dimension": "todo",
    "searchParams": {
      "formDatas": {},
      "quickSearchDatas": {},
      "type": "and",
      "initSearch": true
    },
    "params": {
      "tabid": "0",
      "sortParams": []
    },
    "sortParams": [],
    "current": 1,
    "pageSize": 10
  }
}
// 列表 operates接口  操作菜单、check权限
// 异步：返回operates, operatesPermission, checkBoxPermission
const asyncOperates: RequestOptionConfig = {
  url: '/api/workflow/core/list/check/getTodoListCheck/batch/batchAttention',
  method: 'post',
  params: {
    "current": 1,
    "pageSize": 10,
    "data": [
      {
        "firstViewDateTime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363858187042817",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "606286813388161027",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "606286813388161029",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "lastfeedbackdatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363819347787777",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605132510862589955",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605132510862589957",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363265364254721",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605077698489958407",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605077702784925699",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363914004979713",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605077698489958401",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605077698489958405",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          13,
          30,
          30
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363256765792262",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605048204949536768",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605048204949536770",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "needwfback": 0,
        "datasrc": 0
      }
    ]
  }
}

// @ts-ignore
@withRouter
class BatchOpsBasicDemo extends PureComponent<RouteComponentProps> {

  routeId: string = getHash();
  parentPath = formatParentPath(this.props as any);
  private listViewRef: any;

  state = {
    pagaInfo: {
      value: 2,
      pageSize: 10
    },
    visible: false
  }

  componentDidMount() {
    demoStore.getBatchSearchAd();
  }

  // 获取 listView ref
  getListViewRef = (instance: any) => {
    this.listViewRef = instance
  }

  // 打开批量操作
  onClick = () => {
    this.props.history?.push(`${this.parentPath}/batchops-${this.routeId}`);
  }

  // 确定提交
  onSubmit = (selectedRowKeys: string[], deSelectedRowKeys?: string[], isSelectAll?: boolean) => {
    console.log('onSubmit isSelectAll:', isSelectAll, selectedRowKeys, deSelectedRowKeys)
    // 这一步不需要了，组件内部会在弹框关闭时清空已选数据
    // batchOpsStore.listViewStore.setState({ checkedKeys: [] })
    // 如果需要修改已选数据，改为使用下面方法（注意，如果开启了全选功能，注意清空 deSelectedRowKeys 数据）
    // batchOpsStore.setState({ selectedRowKeys: [], deSelectedRowKeys: [] })
  }

  // 取消
  onCancel = () => {
    console.log(this.listViewRef)
  }

  // 选中回调
  onSelect = (selectedRowKeys: string[], selectedRows: any[], currentRow: any | any[]) => {
    console.log(selectedRowKeys, selectedRows, currentRow)
  }

  // 选项操作
  onOperateClick = (item: OperatesType, data: object, pos: ITableCellPos) => {
    console.log(item, data, pos)
  }

  // 高级搜索前数据处理
  onSearchBefore = (data: SearchDatas, dataSource: string) => {
    return {
      formDatas: 'data.formDatas'
    };
  }
  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    const { listViewStore } = batchOpsStore;
    const { setState, displayData } = listViewStore
    console.log('onSort', columns, sortColumn)

    // 排序逻辑处理 mock
    const _d = JSON.parse(JSON.stringify(displayData))

    _d.sort((a: any, b: any) => {
      if (sortColumn.orderType === 'asc') {
        return Number(b.id) - Number(a.id)
      } else {
        return Number(a.id) - Number(b.id)
      }
    })

    setState({ columns, displayData: _d })
  }

  getColumns = (columns: ITableColumn[]) => {
    console.log('getColumns')
    return columns;
  }

  searchAdvancedProps = {
    conditionId: '',
    module: "test",
    searchAdvancedStore: searchAdvancedStore,
    quickSearchInputProps: {
      suffix: null
    }
  }

  listViewProps = {
    getColumns: this.getColumns,
    module: "test",
  }

  render() {

    return (
      <div className={prefixCls}>
        <Button onClick={this.onClick}>批量提交</Button>
        <BatchOperator
          // 必传
          to={`${this.parentPath}/batchops-${this.routeId}`}
          batchOperatorStore={batchOpsStore}
          requestConfig={requestConfig}
          asyncCounts={asyncCounts}
          asyncOperates={asyncOperates}
          // 选传
          // dialog 设置
          // dialogProps={{
          //   title: '批量提交',
          //   height: 600,
          //   width: 800
          // }}

          // 操作回调
          onSubmit={this.onSubmit}
          onCancel={this.onCancel}

          // 分页配置（可不填）
          // pagationInfo={this.state.pagaInfo}

          searchAdvancedProps={this.searchAdvancedProps}

          listViewProps={this.listViewProps}

          onSelect={this.onSelect}
          onSort={this.onSort}
          onOperateClick={this.onOperateClick}

          listViewRef={this.getListViewRef}

          // 高级搜索前数据处理
          onSearchBefore={this.onSearchBefore}
        />
      </div>
    );
  }
}

export default BatchOpsBasicDemo;
```

### 全选

全选将在 onSubmit 时抛出全选标识，详情看 demo 案例

```jsx
import { RouteComponentProps, withRouter } from "react-router-dom";
import { PureComponent } from 'react';
import { RequestOptionConfig } from '@weapp/utils';
import { BatchOperator, Button, constants, OperatesType, ITableCellPos, SearchDatas, ITableColumn, ITableSelection } from '@weapp/ui';
import { utils } from "@weapp/ui";
import DemoStore from './store'
import { defaultProps } from './mock';

const { formatParentPath, getHash } = utils;

const demoStore = new DemoStore();
const batchOpsStore = demoStore.batchOpsStore
const searchAdvancedStore = demoStore.searchAdvancedStore

const prefixCls = `${constants.uiPcClsPrefix}-demo-batch-ops`;

// 列表数据主接口
// 同步：返回ListView 所需全部数据，asyncCounts、asyncOperates 不再需要传入
// 异步：返回 data, columns, current, pageSize, displayData
const requestConfig: RequestOptionConfig = {
  url: '/api/workflow/list/data/getTodoListData/batch/batchAttention',
  method: 'post',
  params: {
    "dimension": "todo",
    "searchParams": {
      "formDatas": {},
      "quickSearchDatas": {},
      "type": "and",
      "initSearch": true
    },
    "params": {
      "tabid": "0",
      "sortParams": []
    },
    "sortParams": [],
    "current": 1,
    "pageSize": 10
  }

}
// 列表 count接口
// 异步：返回total
const asyncCounts: RequestOptionConfig = {
  url: '/api/workflow/list/total/getTodoListTotal/batch/batchAttention',
  method: 'post',
  params: {
    "dimension": "todo",
    "searchParams": {
      "formDatas": {},
      "quickSearchDatas": {},
      "type": "and",
      "initSearch": true
    },
    "params": {
      "tabid": "0",
      "sortParams": []
    },
    "sortParams": [],
    "current": 1,
    "pageSize": 10
  }
}
// 列表 operates接口  操作菜单、check权限
// 异步：返回operates, operatesPermission, checkBoxPermission
const asyncOperates: RequestOptionConfig = {
  url: '/api/workflow/list/check/getTodoListCheck/batch/batchAttention',
  method: 'post',
  params: {
    "current": 1,
    "pageSize": 10,
    "data": [
      {
        "firstViewDateTime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363858187042817",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "606286813388161027",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "606286813388161029",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "lastfeedbackdatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          49,
          8
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          22,
          19,
          42,
          30
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363819347787777",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605132510862589955",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605132510862589957",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          48,
          59
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          17,
          3,
          13
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363265364254721",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605077698489958407",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605077702784925699",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          46,
          49
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363914004979713",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605077698489958401",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605077698489958405",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          13,
          30,
          31
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          49,
          21
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          13,
          30,
          30
        ],
        "needwfback": 0,
        "datasrc": 0
      },
      {
        "firstViewDateTime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "requestname": "流程计划触发生成的流程-->fxh六",
        "requestlevel": 0,
        "userid": "3571957607125021547",
        "creatertype": 0,
        "isAgent": false,
        "preisremark": 0,
        "finish": false,
        "id": "621363256765792262",
        "nodeid": "7832097490807697633",
        "forwardright": 0,
        "isCopy": false,
        "workflowid": "7832097485759430003",
        "showorder": 0,
        "creatorjob": "0",
        "module": 0,
        "deleteType": 0,
        "creatorsubcom": "0",
        "beagentusertype": 0,
        "requestid": "605048204949536768",
        "lastfeedbackoperator": "0",
        "flowstatus": 6,
        "isremark": 0,
        "supervisionstatus": 0,
        "creater": "3571957607125021547",
        "isTodo": false,
        "cid": "605048204949536770",
        "viewdatetime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "readMark": 0,
        "tenantKey": "T3TTMDXVKX",
        "serialVersionUID": "1896343104857516087",
        "requestlogid": "0",
        "overdue": false,
        "datatype": 0,
        "receivedatetime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "creatordept": "3571957383129221188",
        "triggerSource": 0,
        "seclevel": 0,
        "creator": "3571957607125021547",
        "isbereject": 0,
        "isremarktype": 0,
        "updateTime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "workflowtype": "-7832046155960083941",
        "isprocessed": 0,
        "lastfeedbackoperatortype": 0,
        "createTime": [
          2021,
          8,
          2,
          10,
          46,
          48
        ],
        "beagentuserid": "0",
        "createdatetime": [
          2021,
          6,
          19,
          11,
          36,
          3
        ],
        "needwfback": 0,
        "datasrc": 0
      }
    ]
  }
}

// @ts-ignore
@withRouter
class BatchOpsBasicDemo extends PureComponent<RouteComponentProps> {

  // routeId: string = getHash()

  routeId: string = 'selectAll';
  parentPath = formatParentPath(this.props as any);
  private listViewRef: any;

  state = {
    pagaInfo: {
      value: 1,
      pageSize: 10
    },
    visible: false
  }

  componentDidMount() {
    demoStore.getBatchSearchAd();
  }

  // 获取 listView ref
  getListViewRef = (instance: any) => {
    this.listViewRef = instance
  }

  // 打开批量操作
  onClick = () => {
    this.props.history?.push(`${this.parentPath}/batchops-${this.routeId}`);
  }

  // 确定提交
  onSubmit = (selectedRowKeys: string[], deSelectedRowKeys?: string[], isSelectAll?: boolean) => {
    console.log('onSubmit isSelectAll:', isSelectAll, selectedRowKeys, deSelectedRowKeys)
    // 这一步不需要了，组件内部会在弹框关闭时清空已选数据
    // batchOpsStore.listViewStore.setState({ checkedKeys: [] })
    // 如果需要修改已选数据，改为使用下面方法（注意，如果开启了全选功能，注意清空 deSelectedRowKeys 数据）
    // batchOpsStore.setState({ selectedRowKeys: [], deSelectedRowKeys: [] })

    this.props.history.go(-1);
    this.setState({
      pagaInfo: {
        pageSize: 10,
        value: 1,
      }
    })

    // 以前使用 submit 时，需要手动清理 listView 的 checkedKeys，现在这一步不需要了，组件内部会在弹框关闭时清空已选数据
    // batchOpsStore.listViewStore.setState({ checkedKeys: [] })
    // 如果需要修改已选数据，改为使用下面方法（注意，如果开启了全选功能，注意清空 deSelectedRowKeys 数据）
    // batchOpsStore.setState({ selectedRowKeys: [], deSelectedRowKeys: [] })
  }

  // 取消
  onCancel = () => {
    console.log(this.listViewRef)
  }

  // 选中回调
  onSelect = (selectedRowKeys: string[], selectedRows: any[], currentRow: any | any[], type?: string) => {
    console.log(selectedRowKeys, selectedRows, currentRow, type)
  }

  // 选项操作
  onOperateClick = (item: OperatesType, data: object, pos: ITableCellPos) => {
    console.log(item, data, pos)
  }

  // 高级搜索前数据处理
  onSearchBefore = (data: SearchDatas, dataSource: string) => {
    console.log('onSearchBefore')
    return {
      formDatas: 'data.formDatas',
      ...data,
      dataSource: dataSource
    };
  }
  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    const { listViewStore } = batchOpsStore;
    const { setState, displayData } = listViewStore
    console.log('onSort', columns, sortColumn)

    // 排序逻辑处理 mock
    const _d = JSON.parse(JSON.stringify(displayData))

    _d.sort((a: any, b: any) => {
      if (sortColumn.orderType === 'asc') {
        return Number(b.id) - Number(a.id)
      } else {
        return Number(a.id) - Number(b.id)
      }
    })

    setState({ columns, displayData: _d })
  }

  getColumns = (columns: ITableColumn[]) => {
    console.log('getColumns')
    return columns;
  }

  listViewProps = {
    getColumns: this.getColumns,
    module: "test",
  }

  searchAdvancedProps = {
    conditionId: '',
    module: "test",
    searchAdvancedStore: searchAdvancedStore,
  }

  onPageChange = (value: number, pageSize: number) => {
    console.log('pageChange', value, pageSize)
    this.setState({
      pagaInfo: {
        value,
        pageSize
      },
    })
  }
  render() {
    return (
      <div className={prefixCls}>
        <Button onClick={this.onClick}>批量提交</Button>
        <BatchOperator
          // 必传
          to={`${this.parentPath}/batchops-${this.routeId}`}
          batchOperatorStore={batchOpsStore}
          // requestConfig={requestConfig}
          // asyncCounts={asyncCounts}
          // asyncOperates={asyncOperates}
          // 选传
          // dialog 设置
          // dialogProps={{
          //   title: '批量提交',
          //   height: 600,
          //   width: 800
          // }}

          // 操作回调
          onSubmit={this.onSubmit}
          onCancel={this.onCancel}

          // 分页配置（可不填）
          // pagationInfo={this.state.pagaInfo}
          // onPageChange={this.onPageChange}

          searchAdvancedProps={this.searchAdvancedProps}

          listViewProps={this.listViewProps}

          onSelect={this.onSelect}
          onSort={this.onSort}
          onOperateClick={this.onOperateClick}

          listViewRef={this.getListViewRef}

          // 高级搜索前数据处理
          onSearchBefore={this.onSearchBefore}

          // 开启全选功能
          isBatchSelect

          {...defaultProps as any}
        />
      </div>
    );
  }
}

export default BatchOpsBasicDemo;
```

### 默认第一页数据是否选中

默认开启，支持关闭

```jsx
import { RouteComponentProps, withRouter } from "react-router-dom";
import { PureComponent } from 'react';
import { RequestOptionConfig } from '@weapp/utils';
import { BatchOperator, Button, constants, OperatesType, ITableCellPos, SearchDatas, ITableColumn, ITableSelection, Switch } from '@weapp/ui';
import { utils } from "@weapp/ui";
import DemoStore from './store'
import { defaultProps } from './mock';

const { formatParentPath, getHash } = utils;

const demoStore = new DemoStore();
const batchOpsStore = demoStore.batchOpsStore
const searchAdvancedStore = demoStore.searchAdvancedStore

const prefixCls = `${constants.uiPcClsPrefix}-demo-batch-ops`;

// @ts-ignore
@withRouter
class BatchOpsBasicDemo extends PureComponent<RouteComponentProps> {

  // routeId: string = getHash()

  routeId: string = 'firstPageSelected';
  parentPath = formatParentPath(this.props as any);
  private listViewRef: any;

  state = {
    pagaInfo: {
      value: 1,
      pageSize: 10
    },
    visible: false,
    firstPageSelected: false
  }

  componentDidMount() {
    demoStore.getBatchSearchAd();
  }

  // 获取 listView ref
  getListViewRef = (instance: any) => {
    this.listViewRef = instance
  }

  // 打开批量操作
  onClick = () => {
    this.props.history?.push(`${this.parentPath}/batchops-${this.routeId}`);
  }

  // 确定提交
  onSubmit = (selectedRowKeys: string[], deSelectedRowKeys?: string[], isSelectAll?: boolean) => {
    console.log('onSubmit isSelectAll:', isSelectAll, selectedRowKeys, deSelectedRowKeys)
    // 这一步不需要了，组件内部会在弹框关闭时清空已选数据
    // batchOpsStore.listViewStore.setState({ checkedKeys: [] })
    // 如果需要修改已选数据，改为使用下面方法（注意，如果开启了全选功能，注意清空 deSelectedRowKeys 数据）
    // batchOpsStore.setState({ selectedRowKeys: [], deSelectedRowKeys: [] })

    this.props.history.go(-1);
    this.setState({
      pagaInfo: {
        pageSize: 10,
        value: 1,
      }
    })

    // 以前使用 submit 时，需要手动清理 listView 的 checkedKeys，现在这一步不需要了，组件内部会在弹框关闭时清空已选数据
    // batchOpsStore.listViewStore.setState({ checkedKeys: [] })
    // 如果需要修改已选数据，改为使用下面方法（注意，如果开启了全选功能，注意清空 deSelectedRowKeys 数据）
    // batchOpsStore.setState({ selectedRowKeys: [], deSelectedRowKeys: [] })
  }

  // 取消
  onCancel = () => {
    console.log(this.listViewRef)
  }

  // 选中回调
  onSelect = (selectedRowKeys: string[], selectedRows: any[], currentRow: any | any[], type?: string) => {
    console.log(selectedRowKeys, selectedRows, currentRow, type)
  }

  // 选项操作
  onOperateClick = (item: OperatesType, data: object, pos: ITableCellPos) => {
    console.log(item, data, pos)
  }

  // 高级搜索前数据处理
  onSearchBefore = (data: SearchDatas, dataSource: string) => {
    return {
      formDatas: 'data.formDatas'
    };
  }
  onSort = (columns: ITableColumn[], sortColumn: ITableColumn) => {
    const { listViewStore } = batchOpsStore;
    const { setState, displayData } = listViewStore
    console.log('onSort', columns, sortColumn)

    // 排序逻辑处理 mock
    const _d = JSON.parse(JSON.stringify(displayData))

    _d.sort((a: any, b: any) => {
      if (sortColumn.orderType === 'asc') {
        return Number(b.id) - Number(a.id)
      } else {
        return Number(a.id) - Number(b.id)
      }
    })

    setState({ columns, displayData: _d })
  }

  getColumns = (columns: ITableColumn[]) => {
    console.log('getColumns')
    return columns;
  }

  listViewProps = {
    getColumns: this.getColumns,
    module: "test",
  }

  searchAdvancedProps = {
    conditionId: '',
    module: "test",
    searchAdvancedStore: searchAdvancedStore,
  }

  onPageChange = (value: number, pageSize: number) => {
    console.log('pageChange', value, pageSize)
    this.setState({
      pagaInfo: {
        value,
        pageSize
      },
    })
  }

  handleSwitch = () => {
    this.setState({ firstPageSelected: !this.state.firstPageSelected })
  }
  render() {
    return (
      <div className={prefixCls}>
        <Switch onChange={this.handleSwitch} value={this.state.firstPageSelected}>
          {this.state.firstPageSelected
            ? '默认选中第一页数据'
            : '默认不选中第一页数据'}
        </Switch>
        <Button onClick={this.onClick}>批量提交</Button>
        <BatchOperator
          // 必传
          to={`${this.parentPath}/batchops-${this.routeId}`}
          batchOperatorStore={batchOpsStore}

          firstPageSelected={this.state.firstPageSelected}
          // requestConfig={requestConfig}
          // asyncCounts={asyncCounts}
          // asyncOperates={asyncOperates}
          // 选传
          // dialog 设置
          // dialogProps={{
          //   title: '批量提交',
          //   height: 600,
          //   width: 800
          // }}

          // 操作回调
          onSubmit={this.onSubmit}
          onCancel={this.onCancel}

          // 分页配置（可不填）
          pagationInfo={this.state.pagaInfo}
          onPageChange={this.onPageChange}

          searchAdvancedProps={this.searchAdvancedProps}

          listViewProps={this.listViewProps}

          onSelect={this.onSelect}
          onSort={this.onSort}
          onOperateClick={this.onOperateClick}

          listViewRef={this.getListViewRef}

          // 高级搜索前数据处理
          onSearchBefore={this.onSearchBefore}

          {...defaultProps as any}
        />
      </div>
    );
  }
}

export default BatchOpsBasicDemo;
```

## 注意

必须通过 listViewProps 和 searchAdvancedProps 传递 moduel 参数，详情见 demo。

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| to | 跳转的地址 （路由模式） | string | 否 |  |
| visible | 是否展示（非路由模式，受控） | boolean | 否 |  |
| path | 跳转的路由 | string | 否 |  |
| requestConfig | 同步：返回 ListView 所需全部数据，asyncCounts、asyncOperates 不再需要传入 \| 异步：返回 data, columns, current, pageSize, displayData | RequestOptionConfig | 是 |  |
| asyncCounts | 列表 count 接口(异步：返回 total) | RequestOptionConfig | 否 |  |
| asyncOperates | 列表 operates 接口 操作菜单、check 权限(异步：返回 operates, operatesPermission, checkBoxPermission) | RequestOptionConfig | 否 |  |
| dialogProps | 弹层设置 | 同 dialog 对 props | 否 |  |
| cancelText | 取消按钮文字 | string | 否 |  |
| onCancel | 取消回调 | () => void | 否 |  |
| okText | 确认按钮文字 | string | 否 |  |
| onSubmit | 确认回调 | ( selectedRowKeys: string[],deSelectedRowKeys: string[],isSelectAll?: boolean ) => void; | 否 |  |
| onSelect | 选中回调 | ( selectedkeys: string[], selectedRows: Data[], changeRow: Data \| Data[]) => any; | 否 |  |
| onSort | 排序回调 | (columns: ITableColumn[], sortColumn: ITableColumn) => void; | 否 |  |
| onOperateClick | 操作点击回调 | (item: OperatesType, data: object, pos: ITableCellPos) => void; | 否 |  |
| onSearchBefore | 高级搜索前数据处理函数 | onSearchBefore?: (data: SearchDatas, dataSource: string ) => AnyObj \| Promise | 否 |  |
| batchOperatorStore | 批量操作 store | BatchOperatorStoreType | 是 |  |
| listViewRef | listView 对 ref | any | 否 |  |
| pagationInfo | 分页配置 | PaginationProps | 否 |  |
| searchAdvancedProps | 高级搜索配置 | SearchAdvancedProps | 是 |  |
| useSubmitBtn | 提交按钮是否一直可用（传递 true 时，提交按钮一直可用，传递 false 时，仅当有选中项时提交按钮可用） | boolean | 否 |  |
| footerBtn | 自定义底部按钮(确认按钮和取消按钮暂不支持只定义) | BatchOperatorFooterBtnType[] | 否 |  |
| firstPageSelected | 第一页是否默认选中（每次请求数据，第一页都会被默认选中） | boolean | - | false |
| requestHeaderParams | 支持传递 headers | AnyObj | - | {} |
| getButtons | 自定义 dialog buttons | (buttons: ReactNode[]) => ReactNode[] | 否 | - |
## Store 参数：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| listViewStore | 批量操作 store | ListViewStore | 是 |  |
| requestConfig | 请求 data 主接口 先渲染列表数据（同 listView 的 asyncList） | RequestOptionConfig | 是 |  |
| asyncCounts | 请求 data 分页配置接口（同 listView 的 asyncCounts） | RequestOptionConfig | 否 |  |
| asyncOperates | 请求配置接口（同 listView 的 asyncOperates） | RequestOptionConfig | 否 |  |
| submitDisabled | 提交按钮是否可用（受控，该配置会覆盖 props.useSubmitBtn） | boolean | 否 | undefined |
| pagationInfo | 分页配置 | tablePageInfoType | 否 |  |
## 全选使用说明：

针对全选功能，批量操作组件做如下调整：

### API 调整：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| onSubmit | 批量操作回调 | ( selectedRowKeys: string[],deSelectedRowKeys: string[],isSelectAll?: boolean ) => void; | 否 |  |
| isBatchSelect | 是否开启批量全选 | boolean | - | false |
| defaultSelectAll | 默认批量全选状态（该属性仅开启全选功能后生效） | boolean | - | true |
请注意：
**请通过 `` 启用批量全选功能，不要通过 `` 复写 `` 和 ``！**

### store 调整：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| isBatchSelect | 是否开启批量全选 | boolean | - | false |
| isSelectAll | 是否全部选择（仅当批量全选启用时生效） | boolean | - | true |
| selectedRowKeys | 选中的 rowKeys | string[] | - | [] |
| deSelectedRowKeys | 取消选中的 rowKeys（全选模式使用） | string[] | - | [] |
请注意：

1. `isBatchSelect` 用于组件判断批量全选功能是否启用，`isSelectAll` 用于组件内判断当前是否处于全选状态。
2. 如模块需要使用 `store` 中的数据判断组件当前是否处于全选状态，请使用 `(isBatchSelect && isSelectAll)`！
3. 全选状态时，`selectedRowKeys` 仅为当前页的选中数据，仅用于数据渲染！
4. 全选状态时，`deSelectedRowKeys` 为所有取消选中的数据的 keys 集合。
5. 若启用全选功能，请通过 `batchOperatorStore.setState` 更新 `selectedRowKeys`，不再使用 `listViewStore.setState` 更新 `checkedKeys`!

### onSubmit 方法使用调整说明：

请注意：

1. 当前批量操作处于全选状态时（`isSelectAll` 为 true ），第一个参数 `selectedRowKeys` 返回的是 [], `deSelectedRowKeys` 返回的是所有未选中数据的集合。
2. 当前批量操作不处于全选状态时（`isSelectAll` 为 false ），第一个参数 `selectedRowKeys` 返回的是所有选中数据, `deSelectedRowKeys` 返回的是 []。

```
onSubmit = (selectedRowKeys: string[],deSelectedRowKeys: string[], isSelectAll?: boolean) => {
  console.log('onSubmit isSelectAll:', isSelectAll, selectedRowKeys, deSelectedRowKeys)

  // 以前使用 submit 时，需要手动清理 listView 的 checkedKeys，现在这一步不需要了，组件内部会在弹框关闭时清空已选数据
  // batchOperatorStore.listViewStore.setState({ checkedKeys: [] })

  // 如果需要修改已选数据，改为使用下面方法（注意，如果开启了全选功能，注意同时处理 deSelectedRowKeys 数据）
  // batchOperatorStore.setState({ selectedRowKeys: [], deSelectedRowKeys: [] })
}
```
