react-antd-sku v1.0.1

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