react-antd-sku

在线案例

<Sku
  ref={this.skuRef}
  form={form}
  label1="规格属性"
  label2="价格"
  formItemLayout={{
    labelCol: {
      span: 4
    },
    wrapperCol: {
      span: 20
    }
  }}
  useDefaultButton={false}
  skuPropsList={skuPropsList}
  skuPropVoList={propVoList}
  addTagApi={this.addTagApi}
  filterSku={skuTags => {
    let k = skuTags
      .map(tag => tag.id)
      .sort()
      .join(":");
    let sku = skuData.filter(sku => {
      let k1 = sku.tags.sort().join(":");
      return k === k1;
    });
    return sku[0];
  }}
  extras={[
    {
      title: "建议售价",
      dataIndex: "preprice",
      width: 150,
      render: (v, record, row) => {
        return this.renderBaseFormItem({
          key: `${record.rowKey}.preprice`,
          config: {
            initialValue: v
          },
          el: (
            <Input
              style={{
                padding: 0,
                textAlign: "center"
              }}
              placeholder="请输入原价"
            />
          )
        });
      }
    }
  ]}
  footer={() => (
    <p>
      <span style={{ margin: "0 10px" }}>批量设置:</span>
      <a
        href="void:javascript(0)"
        type="link"
        onClick={() => {
          this.setState(
            {
              dialogTitle: "价格",
              dialogOpt: "price"
            },
            () => {
              this.dialog.current.show();
            }
          );
          return false;
        }}
      >
        价格
      </a>
    </p>
  )}
  onChange={v => {
    this.setState({
      tmpSkuProps: v.tmpSkuProps,
      skuTableColumns: v.skuTableColumns,
      skuTableDataSource: v.skuTableDataSource
    });
  }}
/>

API

| 参数 | 说明 | 类型 | 默认值 | 案例 | | ---------------- | ----------------------------------------------- | ---------------------- | ------ | ------------------------------------------------------------ | | title | 表格头部 , 同antd Table | Function | | ()=>"表头" | | footer | 表格尾部 ,同antd Table | Function | | ()=>Footer | | useDefaultButton | 使用默认的"添加属性" 按钮 | | TRUE | | | extras | 拓展sku 列 | Function=>Array|[] | | | | form | 接管 sku 内 form | | | | | skuPropsList | 属性列表 | Array | | [ { id: 4, propertyName: "规格"}, ] | | skuPropVoList | 显示数据时, 属性及其tag | Array | | [ { id: 4, propertyName: "规格", tagList: [ { id: 1, tagName: "a" } ] } ] | | addTagApi | tag 添加时api | Function=>Promise | | | | filterSku | 显示 sku 表格时,根据 sku 组合 查找指定 sku 数据 | Function=> sku | | | | onChange | sku 更新时事件, 传出表格所有数据 | | | | | 事件 | 说明 | | | | | reset | 重置 sku 设计区 | Function | | | | addOneProp | 添加一个属性选择框 | Function | | | | refreshSKUTable | 刷新 sku 表格 | Function | | | | setCurrentProp | 新增属性时 设置回显到选择框 | Function( propertyId ) | | | | | | | | |