@aliretail/react-materials-components/demo/FilterSelectorDialog/single.md

B 端物料组件库

---
title: 单选弹框
order: 1
---

# 单选弹框

appCode 和 apiCode 也能访问，但是物料库中无法访问到接口正确显示内容暂时仅使用 url 的方式

具体选中之后 onChange 的参数可以打开控制台看参数

````jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { FilterSelectorDialog } from '@aliretail/react-materials-components';
import { Button } from '@alifd/next';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '搜索货品',
      appCode: 'retailforce_oms',
      apiCode: 'item_list_Items_at_page',
      url: 'https://rap2api.alibaba-inc.com/app/mock/6013/aliretail_materials/api/retailforce_oms/item_list_Items_at_page',
    };
  }

  // 获取选中的数据
  getDialogData = (data, btnId) => {
    console.log(data, btnId);
  };

  render() {
    // 测试数据
    const columns = [
      {
        title: '货品名称',
        dataIndex: 'goodsName',
        width: '60%',
      },
      {
        title: '货品编码',
        dataIndex: 'goodsEncode',
      },
    ];
    const filterConfigList = [
      {
        code: 'goodsName',
        codeName: '搜货品名称',
        inputPlaceholder: '请输入货品名称',
      },
      {
        code: 'goodsEncode',
        codeName: '搜货品编码',
        inputPlaceholder: '请输入货品编码',
      },
    ];

    const { btnVal, title, apiCode, appCode, url } = this.state;

    return (
      <div>
        <FilterSelectorDialog
          columns={columns} // table表头
          filterConfigList={filterConfigList} // 下拉框data
          title={title} // 弹窗标题
          onChange={this.getDialogData} // 返回选中的item数组和id数组
          url={url}
          // appCode={appCode}
          // apiCode={apiCode}
          hasTableBorder={false} // 表格不带边框
          mode="single" //是否多选
          primaryKey="code"
          dialogHeight={600}
          dialogWidth={500}
          tablePageSizeList={[5, 10, 20]}
          selectedRowList={[{ code: 1, name: '1' }]} // 按钮选中回显
        >
          <Button type="primary">添加单选货品</Button>
        </FilterSelectorDialog>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);
````