@aliretail/react-materials-components/demo/StockTableEdit/example.md

B 端物料组件库

---
title: StockTableEdit-Simple
order: 1
---

参考纪元中的物料组件，TableEdit
需要校验的话，引用组件内部的 validate 方法
外部校验，检验好后，通过调用内部的 setErrors 方法，将错误信息传过去，错误信息格式{[row]:{[dataIndex]:errMessage}},row 为第几行，从 0 开始

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

function onChange(data) {
  window.console.log(data);
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: [],
      status: '',
      value2: [
        {
          goodsName: 'Brian Moore',
          goodsEncode: '5198494444',
          code: 1,
          id: 1,
        },
      ],
      value3: [],
      value4: [],
      value5: [],
    };
  }

  onChange = (data) => {
    window.console.log(data);
  };
  controlChange = (data) => {
    // window.console.log(data);
    this.setState(data);
  };

  render() {
    const columns = [
      {
        title: '货品',
        dataIndex: 'goodsName',
        // cell:(value)=>{
        //     return value
        //   }
      },
      {
        title: '货品编码',
        dataIndex: 'goodsEncode',
      },
      {
        title: '当前库存',
        dataIndex: 'sort',
      },
      {
        title: '库存数量',
        dataIndex: 'number',
        type: 'inputNumber',
        rules: {
          required: true,
          message: '请输入数据',
        },
      },
      {
        title: '单位',
        dataIndex: 'unit',
      },
    ];

    const filterDialogProps = {
      title: '搜索货品',
      url: 'https://rap2api.alibaba-inc.com/app/mock/6013/aliretail_materials/api/retailforce_oms/item_list_Items_at_page',
      columns: [
        {
          title: '货品名称',
          dataIndex: 'goodsName',
          width: '60%',
        },
        {
          title: '货品编码',
          dataIndex: 'goodsEncode',
        },
      ],
      filterConfigList: [
        {
          code: 'goodsName',
          codeName: '搜货品名称',
          inputPlaceholder: '请输入货品名称',
        },
        {
          code: 'goodsEncode',
          codeName: '搜货品编码',
          inputPlaceholder: '请输入货品编码',
        },
      ],
      requestExtraParams: { extraName: 'name' },
      selectedRowList: [],
      onSelected: () => {},
    };

    const defaultvalue = [
      {
        goodsName: 'Brian Moore',
        goodsEncode: '5198494444',
        code: 1,
        id: 1,
      },
    ];

    const newColumns = [
      ...columns,
      {
        dataIndex: 'option',
        title: '操作',
        cell: (value, index, record) => {
          return <span>删除</span>;
        },
      },
    ];

    const { value, status, value1, value2, value3, value4, value5 } = this.state;
    return (
      <div>
        <div>修改，受控列表, value有值</div>
        <StockTableEdit
          {...{
            filterDialogProps,
            columns,
            title: '修改，非受控列表,默认数据',
            defaultvalue,
            // requestOptions,
            value,
            onChange: (value) => {
              this.controlChange({ value });
            },
            status,
            ref: 'testTable',
            onNumberInputFoucs: (...args) => {
              console.log(...args);
            },
            onNumberInputBlur: (...args) => {
              console.log(...args);
            },
            onNumberChange: (...args) => {
              console.log(...args);
            },
            numberStep: 2,
          }}
        />
        <div style={{ marginBottom: 20 }}></div>

        <button
          onClick={() => {
            // 内部校验，通过columns中的对应的rules
            this.refs.testTable.validate((err, value) => {
              console.log(err, value);
            });
          }}
        >
          校验
        </button>
        <button
          onClick={() => {
            // setErrors方法设置外部错误
            this.refs.testTable.setErrors({ 1: { number: '外部校验错误' } });
          }}
        >
          外部检验错误
        </button>
        <div style={{ marginBottom: 20 }}></div>
        <div>受控列表， 不需要删除操作列，needDelete为false </div>
        <StockTableEdit
          {...{
            filterDialogProps,
            columns,
            title: '不需要删除操作列',
            defaultvalue,
            // requestOptions,
            value: value1,
            onChange: (value1) => {
              this.controlChange({ value1 });
            },
            needDelete: false,
          }}
        />
        <div style={{ marginBottom: 20 }}></div>
        <div>受控列表， 不需要删除操作列，且在这边有操作，在columns里面添加一个操作列</div>
        <StockTableEdit
          {...{
            filterDialogProps,
            columns: newColumns,
            title: '不需要删除操作列，加操作项',
            defaultvalue,
            // requestOptions,
            value: value2,
            onChange: (value2) => {
              this.controlChange({ value2 });
            },
            needDelete: false,
          }}
        />
        <div style={{ marginBottom: 20 }}></div>
        <div>只展示，isPreview:true</div>
        <StockTableEdit
          {...{
            filterDialogProps,
            columns,
            title: '纯展示',
            value: value3,
            // requestOptions,
            onChange: (value3) => {
              this.controlChange({ value3 });
            },
            onChange: this.controlChange,
            isPreview: true,
          }}
        />
        <div style={{ marginBottom: 20 }}></div>
        <div>右侧按钮改变变成其他组件或什么</div>
        <StockTableEdit
          {...{
            filterDialogProps,
            columns,
            title: '右侧按钮变化',
            defaultvalue,
            // requestOptions,
            value: value4,
            onChange: (value4) => {
              this.controlChange({ value4 });
            },
            topRight: 'dddd',
          }}
        />
        <div style={{ marginBottom: 20 }}></div>
        <div>右侧按钮样式和文案修改</div>
        <StockTableEdit
          {...{
            filterDialogProps,
            columns,
            title: '右侧按钮样式改变',
            defaultvalue,
            // requestOptions,
            value: value5,
            onChange: (value5) => {
              this.controlChange({ value5 });
            },
            buttonText: 'button',
            buttonProps: { type: 'primary' },
          }}
        />
        <div>表头右侧内容自定义</div>
        <StockTableEdit
          {...{
            filterDialogProps,
            columns,
            title: '右侧按钮样式改变',
            defaultvalue,
            // requestOptions,
            value: value5,
            onChange: (value5) => {
              this.controlChange({ value5 });
            },
            topRightLeftExtContent: (
              <div>
                <Button type="primary">额外添加的左侧按钮</Button>
              </div>
            ),
            topRightRightExtContent: (
              <div>
                <Button>额外添加的右侧按钮</Button>
              </div>
            ),
          }}
        />
        <div style={{ marginBottom: 20 }}></div>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```