@kmkf-fe-packages/basic-components 0.21.4 → 0.22.0-alpha.1

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle, useMemo } from 'react';
-import { Cascader, DatePicker, InputNumber, Input, Select, Upload, Image, message, Radio, Space, Spin, Modal, Button, Checkbox, Row, Col, Slider, Rate, Form, Tabs, ConfigProvider, Pagination, Popover, Table } from 'antd';
+import { Cascader, DatePicker, InputNumber, Input, Select, Upload, Image, message, Radio, Space, Spin, Modal, Button, Checkbox, Row, Col, Slider, Rate, Form, Tabs, ConfigProvider, Pagination, Table, Popover } from 'antd';
 import { EyeOutlined, DeleteOutlined } from '@ant-design/icons';
 import request, { extend as extend$1 } from 'umi-request';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { AddressData, BsAddressData, request as request$1, ExpressData, LogisticsAddressData, uuid } from '@kmkf-fe-packages/kmkf-utils';
+import { AddressData, BsAddressData, request as request$1, ExpressData, uuid, LogisticsAddressData } from '@kmkf-fe-packages/kmkf-utils';
 import zhCN from 'antd/lib/locale/zh_CN';
 import pubsub from 'pubsub-js';
 import { cloneDeep } from 'lodash';
@@ -8435,7 +8435,7 @@ var Sku = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   var handleSure = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var type, SKU, _ref3, _ref4, _ref5, _ref6, _ref7, _yield$request, _yield$request$data, data;
+      var type, SKU, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _yield$request, _yield$request$data, data;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -8470,7 +8470,10 @@ var Sku = /*#__PURE__*/forwardRef(function (props, ref) {
               }) === null || _ref4 === void 0 ? void 0 : _ref4.picUrl,
               outerSkuId: (_ref5 = SKU || {
                 outerSkuId: ''
-              }) === null || _ref5 === void 0 ? void 0 : _ref5.outerSkuId
+              }) === null || _ref5 === void 0 ? void 0 : _ref5.outerSkuId,
+              skuId: ((_ref6 = SKU || {
+                skuId: ''
+              }) === null || _ref6 === void 0 ? void 0 : _ref6.skuId) || ''
             });
             _context.next = 16;
             break;
@@ -8491,12 +8494,15 @@ var Sku = /*#__PURE__*/forwardRef(function (props, ref) {
             props.handleOk({
               enableItemId: data.length > 0 ? data[0]['supplierItemOuterId'] : '',
               enableSupplierName: data.length > 0 ? data[0]['supplierName'] : '',
-              propertiesName: ((_ref6 = SKU || {
+              propertiesName: ((_ref7 = SKU || {
                 label: ''
-              }) === null || _ref6 === void 0 ? void 0 : _ref6.label) || '',
-              picUrl: (_ref7 = SKU || {
+              }) === null || _ref7 === void 0 ? void 0 : _ref7.label) || '',
+              picUrl: (_ref8 = SKU || {
                 picUrl: ''
-              }) === null || _ref7 === void 0 ? void 0 : _ref7.picUrl
+              }) === null || _ref8 === void 0 ? void 0 : _ref8.picUrl,
+              skuId: ((_ref9 = SKU || {
+                skuId: ''
+              }) === null || _ref9 === void 0 ? void 0 : _ref9.skuId) || ''
             });
           case 16:
             setVisible(false);
@@ -8874,8 +8880,331 @@ var ChooseBaby = function ChooseBaby(props) {
   }));
 };
 
+var GoodItem = function GoodItem(props) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? {
+      shopId: '',
+      imgList: []
+    } : _props$value,
+    _props$maxLength = props.maxLength,
+    maxLength = _props$maxLength === void 0 ? 20 : _props$maxLength,
+    onChange = props.onChange,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 2 : _props$type,
+    _props$shopList = props.shopList,
+    shopList = _props$shopList === void 0 ? [] : _props$shopList,
+    showHeader = props.showHeader,
+    _props$showChangeBtn = props.showChangeBtn,
+    showChangeBtn = _props$showChangeBtn === void 0 ? true : _props$showChangeBtn,
+    otherOperations = props.otherOperations,
+    canUpdateNumber = props.canUpdateNumber,
+    enableItemId = props.enableItemId,
+    enableSupplierName = props.enableSupplierName,
+    userNick = props.userNick,
+    disabled = props.disabled,
+    changeSku = props.changeSku,
+    width = props.width;
+  console.log('value', value);
+  var shopId = value.shopId,
+    imgList = value.imgList;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var skuRef = useRef();
+  //是否是淘宝店铺
+  var isTaobaoPlat = useMemo(function () {
+    console.log('shopId', shopId);
+    return shopList.some(function (item) {
+      return item.shopId === shopId && item.shopSourceStr === 'TAOBAO';
+    });
+  }, [shopId]);
+  // 查询SKU
+  var querySkus = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+      var shopId, numIids;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            shopId = _ref.shopId, numIids = _ref.numIids;
+            return _context.abrupt("return", extendRequest('/qy/gdfw/workOrder/queryItemSkus', {
+              method: 'post',
+              data: {
+                shopId: shopId,
+                numIids: numIids
+              }
+            }));
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function querySkus(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  //删除行
+  var handleDelete = function handleDelete(record, index) {
+    var newSelect = imgList.filter(function (_, i) {
+      return index !== i;
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      shopId: shopId,
+      imgList: _toConsumableArray(newSelect)
+    });
+  };
+  //选择sku
+  var handleSelectSku = function handleSelectSku(_ref3) {
+    var enableItemId = _ref3.enableItemId,
+      enableSupplierName = _ref3.enableSupplierName,
+      propertiesName = _ref3.propertiesName,
+      picUrl = _ref3.picUrl,
+      outerSkuId = _ref3.outerSkuId,
+      skuId = _ref3.skuId;
+    var newList = JSON.parse(JSON.stringify(imgList));
+    if (type === 4) {
+      newList[newList.length - 1].itemId = enableItemId;
+      newList[newList.length - 1].supplierName = enableSupplierName;
+    } else {
+      newList[newList.length - 1].propertiesName = propertiesName;
+    }
+    if (type === 1) {
+      if (outerSkuId) newList[newList.length - 1].outerSkuId = outerSkuId;
+      if (skuId) newList[newList.length - 1].skuId = skuId;
+    }
+    //替换成sku的图片
+    picUrl && (newList[newList.length - 1].picUrl = picUrl);
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      shopId: shopId,
+      imgList: newList
+    });
+  };
+  //选择回调
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(list) {
+      var newList, newImgList, _yield$querySkus, data, _skuRef$current, options;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            console.log('🚀 ~ file: table.tsx:160 ~ onSubmit ~ list:', list);
+            newList = list.map(function (item) {
+              //过滤属性 只保存需要的字段
+              var params = {
+                uuid: uuid(),
+                platform: item.platform,
+                price: item.price,
+                canDelete: true,
+                title: item.title,
+                outerId: item.outerId,
+                picUrl: item.picUrl,
+                numIid: item.numIid,
+                skuId: item.skuId,
+                outerSkuId: item.outerSkuId
+              };
+              // if (type === 1) {
+              //   params.outerId = item.outerId; //编码
+              // }
+              if (changeSku) {
+                params.propertiesName = '';
+              }
+              // if (type === 4) {
+              //   if (enableItemId) {
+              //     params.itemId = '';
+              //   }
+              //   if (enableSupplierName) {
+              //     params.supplierName = '';
+              //   }
+              // }
+              return params;
+            });
+            newImgList = changeSku || type === 4 ? [].concat(_toConsumableArray(imgList), _toConsumableArray(newList)) : _toConsumableArray(newList);
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+              shopId: shopId,
+              imgList: newImgList
+            });
+            setVisible(false);
+            //供应上编码组件 ｜｜ 商品组件且可以选择sku
+            if (!(type === 4 && (enableItemId || enableSupplierName) || type !== 4 && changeSku && isTaobaoPlat && list.length > 0)) {
+              _context2.next = 11;
+              break;
+            }
+            _context2.next = 8;
+            return querySkus({
+              shopId: shopId,
+              numIids: list[0].numIid
+            });
+          case 8:
+            _yield$querySkus = _context2.sent;
+            data = _yield$querySkus.data;
+            if (data.length > 0 && data[0]['skus'] && data[0]['skus']['length'] > 0) {
+              options = data[0]['skus'].map(function (item) {
+                return {
+                  label: item.propertiesName.split(';').map(function (i) {
+                    return i.split(':').slice(2);
+                  }).join(';'),
+                  value: item.skuId,
+                  picUrl: item.picUrl,
+                  outerSkuId: item === null || item === void 0 ? void 0 : item.outerSkuId,
+                  skuId: item.skuId
+                };
+              });
+              (_skuRef$current = skuRef.current) === null || _skuRef$current === void 0 ? void 0 : _skuRef$current.open({
+                shopId: shopId,
+                numIids: list[0].numIid,
+                options: options
+              });
+            }
+          case 11:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function onSubmit(_x2) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  //商品信息
+  var GOODS_INFO_COLUMNS = function GOODS_INFO_COLUMNS() {
+    return [{
+      dataIndex: 'title',
+      title: "\u5546\u54C1\u540D\u79F0",
+      align: 'center',
+      ellipsis: true,
+      width: 250
+    }, {
+      dataIndex: 'outerId',
+      title: "\u5546\u54C1\u7F16\u7801",
+      align: 'center',
+      ellipsis: true,
+      width: 250
+    }, {
+      dataIndex: 'picUrl',
+      title: "\u56FE\u7247",
+      align: 'center',
+      ellipsis: true,
+      width: 100,
+      render: function render(val) {
+        return /*#__PURE__*/React.createElement(Image, {
+          width: 60,
+          src: val
+        });
+      }
+    }, {
+      dataIndex: 'numIid',
+      title: "\u5546\u54C1id",
+      align: 'center',
+      ellipsis: true,
+      width: 250
+    }, {
+      dataIndex: 'skuId',
+      title: "SKU ID",
+      align: 'center',
+      ellipsis: true,
+      width: 250
+    }, {
+      dataIndex: 'outerSkuId',
+      title: "SKU \u7F16\u7801",
+      align: 'center',
+      ellipsis: true,
+      width: 250
+    }, {
+      dataIndex: 'propertiesName',
+      title: "SKU \u4FE1\u606F",
+      align: 'center',
+      ellipsis: true,
+      width: 250
+    }];
+  };
+  var headerList = showHeader || {
+    1: ['title', 'outerId', 'picUrl', 'numIid', 'skuId', 'outerSkuId', 'propertiesName' // sku信息
+    ]
+  }[type] || [];
+  var newColumns = useMemo(function () {
+    var columnList = [{
+      dataIndex: '',
+      title: '序号',
+      align: 'center',
+      ellipsis: true,
+      width: 50,
+      render: function render(val, record, index) {
+        return /*#__PURE__*/React.createElement("span", null, index + 1);
+      }
+    }].concat(_toConsumableArray(GOODS_INFO_COLUMNS().filter(function (t) {
+      return headerList.includes(t === null || t === void 0 ? void 0 : t.dataIndex);
+    })));
+    if (!disabled) {
+      columnList.push({
+        dataIndex: '',
+        title: "\u64CD\u4F5C",
+        align: 'center',
+        ellipsis: true,
+        width: 100,
+        render: function render(val, record, index) {
+          return record.canDelete ? /*#__PURE__*/React.createElement(Button, {
+            type: "link",
+            onClick: function onClick() {
+              return handleDelete(record, index);
+            }
+          }, "\u5220\u9664") : null;
+        }
+      });
+    }
+    return columnList;
+  }, [headerList, value, disabled]);
+  var handleChangeGoods = function handleChangeGoods() {
+    var _props$value2;
+    console.log('shopId', shopId, props.value);
+    if (!((_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.shopId)) {
+      message.error('请选择店铺');
+      return;
+    }
+    setVisible(true);
+  };
+  window.handleChangeGoods = handleChangeGoods;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !disabled && showChangeBtn && /*#__PURE__*/React.createElement("div", {
+    style: {
+      float: 'right'
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "link",
+    onClick: handleChangeGoods
+  }, "\u9009\u62E9\u5546\u54C1"), otherOperations), /*#__PURE__*/React.createElement(Table, {
+    columns: newColumns,
+    dataSource: value.imgList,
+    rowKey: 'uuid',
+    size: "small",
+    pagination: false,
+    scroll: {
+      x: '100%'
+    },
+    locale: {
+      emptyText: '暂无数据'
+    }
+  }), visible ? /*#__PURE__*/React.createElement(GoodsModal, {
+    visible: visible,
+    onSubmit: onSubmit,
+    width: width,
+    type: type,
+    imgList: imgList,
+    shopList: shopList,
+    shopId: shopId,
+    maxLength: maxLength,
+    changeSku: changeSku,
+    onCancel: function onCancel() {
+      setVisible(false);
+    }
+  }) : null, /*#__PURE__*/React.createElement(Sku, {
+    handleOk: handleSelectSku,
+    ref: skuRef,
+    userNick: userNick,
+    type: type
+  }));
+};
+
 var TBGoodSerial = function TBGoodSerial(props) {
-  return /*#__PURE__*/React.createElement(Goods, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React.createElement(GoodItem, _objectSpread2(_objectSpread2({}, props), {}, {
     type: 1
   }));
 };
@@ -9229,7 +9558,9 @@ var Payment = function Payment(props) {
     shopList = props.shopList,
     onChange = props.onChange,
     onSearch = props.onSearch,
-    _onBlur = props.onBlur;
+    _onBlur = props.onBlur,
+    _props$replaceValueCh = props.replaceValueCh,
+    replaceValueCh = _props$replaceValueCh === void 0 ? {} : _props$replaceValueCh;
   useEffect(function () {
     var platformList = ['TAOBAO', 'FXG'];
     var showBuyerId = (shopList || []).some(function (item) {
@@ -9306,7 +9637,11 @@ var Payment = function Payment(props) {
       onBlur: function onBlur(e) {
         return _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e.target.value, item.name);
       }
-    }));
+    }), (replaceValueCh === null || replaceValueCh === void 0 ? void 0 : replaceValueCh[item.name]) && /*#__PURE__*/React.createElement("p", {
+      style: {
+        color: '#e99d42'
+      }
+    }, replaceValueCh === null || replaceValueCh === void 0 ? void 0 : replaceValueCh[item.name]));
   }));
 };
 
@@ -10330,7 +10665,7 @@ var GoodsModal$2 = /*#__PURE__*/forwardRef(GoodsModal$1);
 //   skuId: string;
 //   styleId: string;
 // }
-var GoodItem = function GoodItem(props) {
+var GoodItem$1 = function GoodItem(props) {
   var _props$value = props.value,
     value = _props$value === void 0 ? [] : _props$value,
     onChange = props.onChange,
@@ -10705,7 +11040,7 @@ var BsGoods = function BsGoods(props) {
       bsGoods: list
     }));
   };
-  return /*#__PURE__*/React.createElement(GoodItem, _objectSpread2(_objectSpread2({
+  return /*#__PURE__*/React.createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     key: 'bsGoods'
   }, props), {}, {
     disabled: disabled,
@@ -10903,12 +11238,12 @@ var BsExchange = function BsExchange(props) {
     onChange: function onChange(val) {
       return changeTypeHandle(val);
     }
-  }), !(value === null || value === void 0 ? void 0 : (_value$bsExchangeType4 = value.bsExchangeType) === null || _value$bsExchangeType4 === void 0 ? void 0 : _value$bsExchangeType4.length) ? /*#__PURE__*/React.createElement(GoodItem, _objectSpread2(_objectSpread2({
+  }), !(value === null || value === void 0 ? void 0 : (_value$bsExchangeType4 = value.bsExchangeType) === null || _value$bsExchangeType4 === void 0 ? void 0 : _value$bsExchangeType4.length) ? /*#__PURE__*/React.createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     key: 'bsExchangeGoods'
   }, other), {}, {
     disabled: disabled,
     showChangeBtn: false
-  })) : null, ['1', '3'].includes(value === null || value === void 0 ? void 0 : (_value$bsExchangeType5 = value.bsExchangeType) === null || _value$bsExchangeType5 === void 0 ? void 0 : _value$bsExchangeType5[0]) ? /*#__PURE__*/React.createElement(GoodItem, _objectSpread2(_objectSpread2({
+  })) : null, ['1', '3'].includes(value === null || value === void 0 ? void 0 : (_value$bsExchangeType5 = value.bsExchangeType) === null || _value$bsExchangeType5 === void 0 ? void 0 : _value$bsExchangeType5[0]) ? /*#__PURE__*/React.createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     key: 'bsExchangeGoods'
   }, other), {}, {
     disabled: disabled,
@@ -10924,7 +11259,7 @@ var BsExchange = function BsExchange(props) {
         border: '1px dashed',
         marginBottom: '8px'
       }
-    }, /*#__PURE__*/React.createElement("div", null, "\u9000\u56DE\u5546\u54C1"), /*#__PURE__*/React.createElement(GoodItem, _objectSpread2(_objectSpread2({
+    }, /*#__PURE__*/React.createElement("div", null, "\u9000\u56DE\u5546\u54C1"), /*#__PURE__*/React.createElement(GoodItem$1, _objectSpread2(_objectSpread2({
       key: 'bsReturnGoods'
     }, other), {}, {
       disabled: disabled,
@@ -10934,7 +11269,7 @@ var BsExchange = function BsExchange(props) {
       onChange: function onChange(val) {
         return changeReturnHandle(val, index, 'bsExchangeReturnGoods');
       }
-    })), /*#__PURE__*/React.createElement("div", null, "\u6362\u51FA\u5546\u54C1"), /*#__PURE__*/React.createElement(GoodItem, _objectSpread2(_objectSpread2({
+    })), /*#__PURE__*/React.createElement("div", null, "\u6362\u51FA\u5546\u54C1"), /*#__PURE__*/React.createElement(GoodItem$1, _objectSpread2(_objectSpread2({
       key: 'bsOutGoods'
     }, other), {}, {
       disabled: disabled,
@@ -10946,7 +11281,7 @@ var BsExchange = function BsExchange(props) {
         return changeReturnHandle(val, index, 'bsExchangeSwapOutGoods');
       }
     })));
-  })), ['3', '4'].includes(value === null || value === void 0 ? void 0 : (_value$bsExchangeType6 = value.bsExchangeType) === null || _value$bsExchangeType6 === void 0 ? void 0 : _value$bsExchangeType6[0]) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "\u8D60\u54C1\u4FE1\u606F"), /*#__PURE__*/React.createElement(GoodItem, _objectSpread2(_objectSpread2({
+  })), ['3', '4'].includes(value === null || value === void 0 ? void 0 : (_value$bsExchangeType6 = value.bsExchangeType) === null || _value$bsExchangeType6 === void 0 ? void 0 : _value$bsExchangeType6[0]) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "\u8D60\u54C1\u4FE1\u606F"), /*#__PURE__*/React.createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     headerText: "\u8D60\u54C1",
     key: 'bsGiftGoods',
     disabled: disabled,
@@ -11057,7 +11392,7 @@ var BsReissue = function BsReissue(props) {
     onChange: function onChange(val) {
       return changeTypeHandle(val);
     }
-  }), /*#__PURE__*/React.createElement(GoodItem, _objectSpread2(_objectSpread2({
+  }), /*#__PURE__*/React.createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     key: 'reissueGoods'
   }, other), {}, {
     disabled: disabled,
@@ -11154,7 +11489,7 @@ var BsReturnGoods = function BsReturnGoods(props) {
     onChange: function onChange(val) {
       return changeTypeHandle(val);
     }
-  }), /*#__PURE__*/React.createElement(GoodItem, _objectSpread2(_objectSpread2({
+  }), /*#__PURE__*/React.createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     key: 'returnGoods'
   }, other), {}, {
     disabled: disabled,
@@ -11331,7 +11666,7 @@ var WlnGoods = function WlnGoods(props) {
       wlnGoods: list
     }));
   };
-  return /*#__PURE__*/React.createElement(GoodItem, _objectSpread2(_objectSpread2({
+  return /*#__PURE__*/React.createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     key: 'wlnGoods'
   }, props), {}, {
     disabled: disabled,

package/dist/index.js

@@ -8446,7 +8446,7 @@ var Sku = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var handleSure = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var type, SKU, _ref3, _ref4, _ref5, _ref6, _ref7, _yield$request, _yield$request$data, data;
+      var type, SKU, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _yield$request, _yield$request$data, data;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -8481,7 +8481,10 @@ var Sku = /*#__PURE__*/React.forwardRef(function (props, ref) {
               }) === null || _ref4 === void 0 ? void 0 : _ref4.picUrl,
               outerSkuId: (_ref5 = SKU || {
                 outerSkuId: ''
-              }) === null || _ref5 === void 0 ? void 0 : _ref5.outerSkuId
+              }) === null || _ref5 === void 0 ? void 0 : _ref5.outerSkuId,
+              skuId: ((_ref6 = SKU || {
+                skuId: ''
+              }) === null || _ref6 === void 0 ? void 0 : _ref6.skuId) || ''
             });
             _context.next = 16;
             break;
@@ -8502,12 +8505,15 @@ var Sku = /*#__PURE__*/React.forwardRef(function (props, ref) {
             props.handleOk({
               enableItemId: data.length > 0 ? data[0]['supplierItemOuterId'] : '',
               enableSupplierName: data.length > 0 ? data[0]['supplierName'] : '',
-              propertiesName: ((_ref6 = SKU || {
+              propertiesName: ((_ref7 = SKU || {
                 label: ''
-              }) === null || _ref6 === void 0 ? void 0 : _ref6.label) || '',
-              picUrl: (_ref7 = SKU || {
+              }) === null || _ref7 === void 0 ? void 0 : _ref7.label) || '',
+              picUrl: (_ref8 = SKU || {
                 picUrl: ''
-              }) === null || _ref7 === void 0 ? void 0 : _ref7.picUrl
+              }) === null || _ref8 === void 0 ? void 0 : _ref8.picUrl,
+              skuId: ((_ref9 = SKU || {
+                skuId: ''
+              }) === null || _ref9 === void 0 ? void 0 : _ref9.skuId) || ''
             });
           case 16:
             setVisible(false);
@@ -8885,8 +8891,331 @@ var ChooseBaby = function ChooseBaby(props) {
   }));
 };
 
+var GoodItem = function GoodItem(props) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? {
+      shopId: '',
+      imgList: []
+    } : _props$value,
+    _props$maxLength = props.maxLength,
+    maxLength = _props$maxLength === void 0 ? 20 : _props$maxLength,
+    onChange = props.onChange,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 2 : _props$type,
+    _props$shopList = props.shopList,
+    shopList = _props$shopList === void 0 ? [] : _props$shopList,
+    showHeader = props.showHeader,
+    _props$showChangeBtn = props.showChangeBtn,
+    showChangeBtn = _props$showChangeBtn === void 0 ? true : _props$showChangeBtn,
+    otherOperations = props.otherOperations,
+    canUpdateNumber = props.canUpdateNumber,
+    enableItemId = props.enableItemId,
+    enableSupplierName = props.enableSupplierName,
+    userNick = props.userNick,
+    disabled = props.disabled,
+    changeSku = props.changeSku,
+    width = props.width;
+  console.log('value', value);
+  var shopId = value.shopId,
+    imgList = value.imgList;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var skuRef = React.useRef();
+  //是否是淘宝店铺
+  var isTaobaoPlat = React.useMemo(function () {
+    console.log('shopId', shopId);
+    return shopList.some(function (item) {
+      return item.shopId === shopId && item.shopSourceStr === 'TAOBAO';
+    });
+  }, [shopId]);
+  // 查询SKU
+  var querySkus = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+      var shopId, numIids;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            shopId = _ref.shopId, numIids = _ref.numIids;
+            return _context.abrupt("return", extendRequest('/qy/gdfw/workOrder/queryItemSkus', {
+              method: 'post',
+              data: {
+                shopId: shopId,
+                numIids: numIids
+              }
+            }));
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function querySkus(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  //删除行
+  var handleDelete = function handleDelete(record, index) {
+    var newSelect = imgList.filter(function (_, i) {
+      return index !== i;
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      shopId: shopId,
+      imgList: _toConsumableArray(newSelect)
+    });
+  };
+  //选择sku
+  var handleSelectSku = function handleSelectSku(_ref3) {
+    var enableItemId = _ref3.enableItemId,
+      enableSupplierName = _ref3.enableSupplierName,
+      propertiesName = _ref3.propertiesName,
+      picUrl = _ref3.picUrl,
+      outerSkuId = _ref3.outerSkuId,
+      skuId = _ref3.skuId;
+    var newList = JSON.parse(JSON.stringify(imgList));
+    if (type === 4) {
+      newList[newList.length - 1].itemId = enableItemId;
+      newList[newList.length - 1].supplierName = enableSupplierName;
+    } else {
+      newList[newList.length - 1].propertiesName = propertiesName;
+    }
+    if (type === 1) {
+      if (outerSkuId) newList[newList.length - 1].outerSkuId = outerSkuId;
+      if (skuId) newList[newList.length - 1].skuId = skuId;
+    }
+    //替换成sku的图片
+    picUrl && (newList[newList.length - 1].picUrl = picUrl);
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      shopId: shopId,
+      imgList: newList
+    });
+  };
+  //选择回调
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(list) {
+      var newList, newImgList, _yield$querySkus, data, _skuRef$current, options;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            console.log('🚀 ~ file: table.tsx:160 ~ onSubmit ~ list:', list);
+            newList = list.map(function (item) {
+              //过滤属性 只保存需要的字段
+              var params = {
+                uuid: kmkfUtils.uuid(),
+                platform: item.platform,
+                price: item.price,
+                canDelete: true,
+                title: item.title,
+                outerId: item.outerId,
+                picUrl: item.picUrl,
+                numIid: item.numIid,
+                skuId: item.skuId,
+                outerSkuId: item.outerSkuId
+              };
+              // if (type === 1) {
+              //   params.outerId = item.outerId; //编码
+              // }
+              if (changeSku) {
+                params.propertiesName = '';
+              }
+              // if (type === 4) {
+              //   if (enableItemId) {
+              //     params.itemId = '';
+              //   }
+              //   if (enableSupplierName) {
+              //     params.supplierName = '';
+              //   }
+              // }
+              return params;
+            });
+            newImgList = changeSku || type === 4 ? [].concat(_toConsumableArray(imgList), _toConsumableArray(newList)) : _toConsumableArray(newList);
+            onChange === null || onChange === void 0 ? void 0 : onChange({
+              shopId: shopId,
+              imgList: newImgList
+            });
+            setVisible(false);
+            //供应上编码组件 ｜｜ 商品组件且可以选择sku
+            if (!(type === 4 && (enableItemId || enableSupplierName) || type !== 4 && changeSku && isTaobaoPlat && list.length > 0)) {
+              _context2.next = 11;
+              break;
+            }
+            _context2.next = 8;
+            return querySkus({
+              shopId: shopId,
+              numIids: list[0].numIid
+            });
+          case 8:
+            _yield$querySkus = _context2.sent;
+            data = _yield$querySkus.data;
+            if (data.length > 0 && data[0]['skus'] && data[0]['skus']['length'] > 0) {
+              options = data[0]['skus'].map(function (item) {
+                return {
+                  label: item.propertiesName.split(';').map(function (i) {
+                    return i.split(':').slice(2);
+                  }).join(';'),
+                  value: item.skuId,
+                  picUrl: item.picUrl,
+                  outerSkuId: item === null || item === void 0 ? void 0 : item.outerSkuId,
+                  skuId: item.skuId
+                };
+              });
+              (_skuRef$current = skuRef.current) === null || _skuRef$current === void 0 ? void 0 : _skuRef$current.open({
+                shopId: shopId,
+                numIids: list[0].numIid,
+                options: options
+              });
+            }
+          case 11:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function onSubmit(_x2) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  //商品信息
+  var GOODS_INFO_COLUMNS = function GOODS_INFO_COLUMNS() {
+    return [{
+      dataIndex: 'title',
+      title: "\u5546\u54C1\u540D\u79F0",
+      align: 'center',
+      ellipsis: true,
+      width: 250
+    }, {
+      dataIndex: 'outerId',
+      title: "\u5546\u54C1\u7F16\u7801",
+      align: 'center',
+      ellipsis: true,
+      width: 250
+    }, {
+      dataIndex: 'picUrl',
+      title: "\u56FE\u7247",
+      align: 'center',
+      ellipsis: true,
+      width: 100,
+      render: function render(val) {
+        return /*#__PURE__*/React__default['default'].createElement(antd.Image, {
+          width: 60,
+          src: val
+        });
+      }
+    }, {
+      dataIndex: 'numIid',
+      title: "\u5546\u54C1id",
+      align: 'center',
+      ellipsis: true,
+      width: 250
+    }, {
+      dataIndex: 'skuId',
+      title: "SKU ID",
+      align: 'center',
+      ellipsis: true,
+      width: 250
+    }, {
+      dataIndex: 'outerSkuId',
+      title: "SKU \u7F16\u7801",
+      align: 'center',
+      ellipsis: true,
+      width: 250
+    }, {
+      dataIndex: 'propertiesName',
+      title: "SKU \u4FE1\u606F",
+      align: 'center',
+      ellipsis: true,
+      width: 250
+    }];
+  };
+  var headerList = showHeader || {
+    1: ['title', 'outerId', 'picUrl', 'numIid', 'skuId', 'outerSkuId', 'propertiesName' // sku信息
+    ]
+  }[type] || [];
+  var newColumns = React.useMemo(function () {
+    var columnList = [{
+      dataIndex: '',
+      title: '序号',
+      align: 'center',
+      ellipsis: true,
+      width: 50,
+      render: function render(val, record, index) {
+        return /*#__PURE__*/React__default['default'].createElement("span", null, index + 1);
+      }
+    }].concat(_toConsumableArray(GOODS_INFO_COLUMNS().filter(function (t) {
+      return headerList.includes(t === null || t === void 0 ? void 0 : t.dataIndex);
+    })));
+    if (!disabled) {
+      columnList.push({
+        dataIndex: '',
+        title: "\u64CD\u4F5C",
+        align: 'center',
+        ellipsis: true,
+        width: 100,
+        render: function render(val, record, index) {
+          return record.canDelete ? /*#__PURE__*/React__default['default'].createElement(antd.Button, {
+            type: "link",
+            onClick: function onClick() {
+              return handleDelete(record, index);
+            }
+          }, "\u5220\u9664") : null;
+        }
+      });
+    }
+    return columnList;
+  }, [headerList, value, disabled]);
+  var handleChangeGoods = function handleChangeGoods() {
+    var _props$value2;
+    console.log('shopId', shopId, props.value);
+    if (!((_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.shopId)) {
+      antd.message.error('请选择店铺');
+      return;
+    }
+    setVisible(true);
+  };
+  window.handleChangeGoods = handleChangeGoods;
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, !disabled && showChangeBtn && /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      float: 'right'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(antd.Button, {
+    type: "link",
+    onClick: handleChangeGoods
+  }, "\u9009\u62E9\u5546\u54C1"), otherOperations), /*#__PURE__*/React__default['default'].createElement(antd.Table, {
+    columns: newColumns,
+    dataSource: value.imgList,
+    rowKey: 'uuid',
+    size: "small",
+    pagination: false,
+    scroll: {
+      x: '100%'
+    },
+    locale: {
+      emptyText: '暂无数据'
+    }
+  }), visible ? /*#__PURE__*/React__default['default'].createElement(GoodsModal, {
+    visible: visible,
+    onSubmit: onSubmit,
+    width: width,
+    type: type,
+    imgList: imgList,
+    shopList: shopList,
+    shopId: shopId,
+    maxLength: maxLength,
+    changeSku: changeSku,
+    onCancel: function onCancel() {
+      setVisible(false);
+    }
+  }) : null, /*#__PURE__*/React__default['default'].createElement(Sku, {
+    handleOk: handleSelectSku,
+    ref: skuRef,
+    userNick: userNick,
+    type: type
+  }));
+};
+
 var TBGoodSerial = function TBGoodSerial(props) {
-  return /*#__PURE__*/React__default['default'].createElement(Goods, _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React__default['default'].createElement(GoodItem, _objectSpread2(_objectSpread2({}, props), {}, {
     type: 1
   }));
 };
@@ -9240,7 +9569,9 @@ var Payment = function Payment(props) {
     shopList = props.shopList,
     onChange = props.onChange,
     onSearch = props.onSearch,
-    _onBlur = props.onBlur;
+    _onBlur = props.onBlur,
+    _props$replaceValueCh = props.replaceValueCh,
+    replaceValueCh = _props$replaceValueCh === void 0 ? {} : _props$replaceValueCh;
   React.useEffect(function () {
     var platformList = ['TAOBAO', 'FXG'];
     var showBuyerId = (shopList || []).some(function (item) {
@@ -9317,7 +9648,11 @@ var Payment = function Payment(props) {
       onBlur: function onBlur(e) {
         return _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e.target.value, item.name);
       }
-    }));
+    }), (replaceValueCh === null || replaceValueCh === void 0 ? void 0 : replaceValueCh[item.name]) && /*#__PURE__*/React__default['default'].createElement("p", {
+      style: {
+        color: '#e99d42'
+      }
+    }, replaceValueCh === null || replaceValueCh === void 0 ? void 0 : replaceValueCh[item.name]));
   }));
 };
 
@@ -10341,7 +10676,7 @@ var GoodsModal$2 = /*#__PURE__*/React.forwardRef(GoodsModal$1);
 //   skuId: string;
 //   styleId: string;
 // }
-var GoodItem = function GoodItem(props) {
+var GoodItem$1 = function GoodItem(props) {
   var _props$value = props.value,
     value = _props$value === void 0 ? [] : _props$value,
     onChange = props.onChange,
@@ -10716,7 +11051,7 @@ var BsGoods = function BsGoods(props) {
       bsGoods: list
     }));
   };
-  return /*#__PURE__*/React__default['default'].createElement(GoodItem, _objectSpread2(_objectSpread2({
+  return /*#__PURE__*/React__default['default'].createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     key: 'bsGoods'
   }, props), {}, {
     disabled: disabled,
@@ -10914,12 +11249,12 @@ var BsExchange = function BsExchange(props) {
     onChange: function onChange(val) {
       return changeTypeHandle(val);
     }
-  }), !(value === null || value === void 0 ? void 0 : (_value$bsExchangeType4 = value.bsExchangeType) === null || _value$bsExchangeType4 === void 0 ? void 0 : _value$bsExchangeType4.length) ? /*#__PURE__*/React__default['default'].createElement(GoodItem, _objectSpread2(_objectSpread2({
+  }), !(value === null || value === void 0 ? void 0 : (_value$bsExchangeType4 = value.bsExchangeType) === null || _value$bsExchangeType4 === void 0 ? void 0 : _value$bsExchangeType4.length) ? /*#__PURE__*/React__default['default'].createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     key: 'bsExchangeGoods'
   }, other), {}, {
     disabled: disabled,
     showChangeBtn: false
-  })) : null, ['1', '3'].includes(value === null || value === void 0 ? void 0 : (_value$bsExchangeType5 = value.bsExchangeType) === null || _value$bsExchangeType5 === void 0 ? void 0 : _value$bsExchangeType5[0]) ? /*#__PURE__*/React__default['default'].createElement(GoodItem, _objectSpread2(_objectSpread2({
+  })) : null, ['1', '3'].includes(value === null || value === void 0 ? void 0 : (_value$bsExchangeType5 = value.bsExchangeType) === null || _value$bsExchangeType5 === void 0 ? void 0 : _value$bsExchangeType5[0]) ? /*#__PURE__*/React__default['default'].createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     key: 'bsExchangeGoods'
   }, other), {}, {
     disabled: disabled,
@@ -10935,7 +11270,7 @@ var BsExchange = function BsExchange(props) {
         border: '1px dashed',
         marginBottom: '8px'
       }
-    }, /*#__PURE__*/React__default['default'].createElement("div", null, "\u9000\u56DE\u5546\u54C1"), /*#__PURE__*/React__default['default'].createElement(GoodItem, _objectSpread2(_objectSpread2({
+    }, /*#__PURE__*/React__default['default'].createElement("div", null, "\u9000\u56DE\u5546\u54C1"), /*#__PURE__*/React__default['default'].createElement(GoodItem$1, _objectSpread2(_objectSpread2({
       key: 'bsReturnGoods'
     }, other), {}, {
       disabled: disabled,
@@ -10945,7 +11280,7 @@ var BsExchange = function BsExchange(props) {
       onChange: function onChange(val) {
         return changeReturnHandle(val, index, 'bsExchangeReturnGoods');
       }
-    })), /*#__PURE__*/React__default['default'].createElement("div", null, "\u6362\u51FA\u5546\u54C1"), /*#__PURE__*/React__default['default'].createElement(GoodItem, _objectSpread2(_objectSpread2({
+    })), /*#__PURE__*/React__default['default'].createElement("div", null, "\u6362\u51FA\u5546\u54C1"), /*#__PURE__*/React__default['default'].createElement(GoodItem$1, _objectSpread2(_objectSpread2({
       key: 'bsOutGoods'
     }, other), {}, {
       disabled: disabled,
@@ -10957,7 +11292,7 @@ var BsExchange = function BsExchange(props) {
         return changeReturnHandle(val, index, 'bsExchangeSwapOutGoods');
       }
     })));
-  })), ['3', '4'].includes(value === null || value === void 0 ? void 0 : (_value$bsExchangeType6 = value.bsExchangeType) === null || _value$bsExchangeType6 === void 0 ? void 0 : _value$bsExchangeType6[0]) ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", null, "\u8D60\u54C1\u4FE1\u606F"), /*#__PURE__*/React__default['default'].createElement(GoodItem, _objectSpread2(_objectSpread2({
+  })), ['3', '4'].includes(value === null || value === void 0 ? void 0 : (_value$bsExchangeType6 = value.bsExchangeType) === null || _value$bsExchangeType6 === void 0 ? void 0 : _value$bsExchangeType6[0]) ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", null, "\u8D60\u54C1\u4FE1\u606F"), /*#__PURE__*/React__default['default'].createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     headerText: "\u8D60\u54C1",
     key: 'bsGiftGoods',
     disabled: disabled,
@@ -11068,7 +11403,7 @@ var BsReissue = function BsReissue(props) {
     onChange: function onChange(val) {
       return changeTypeHandle(val);
     }
-  }), /*#__PURE__*/React__default['default'].createElement(GoodItem, _objectSpread2(_objectSpread2({
+  }), /*#__PURE__*/React__default['default'].createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     key: 'reissueGoods'
   }, other), {}, {
     disabled: disabled,
@@ -11165,7 +11500,7 @@ var BsReturnGoods = function BsReturnGoods(props) {
     onChange: function onChange(val) {
       return changeTypeHandle(val);
     }
-  }), /*#__PURE__*/React__default['default'].createElement(GoodItem, _objectSpread2(_objectSpread2({
+  }), /*#__PURE__*/React__default['default'].createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     key: 'returnGoods'
   }, other), {}, {
     disabled: disabled,
@@ -11342,7 +11677,7 @@ var WlnGoods = function WlnGoods(props) {
       wlnGoods: list
     }));
   };
-  return /*#__PURE__*/React__default['default'].createElement(GoodItem, _objectSpread2(_objectSpread2({
+  return /*#__PURE__*/React__default['default'].createElement(GoodItem$1, _objectSpread2(_objectSpread2({
     key: 'wlnGoods'
   }, props), {}, {
     disabled: disabled,

package/dist/src/business/Payment/index.d.ts

@@ -10,6 +10,9 @@ export interface PaymentProps {
     onChange: (value: any) => void;
     onSearch: (value: any) => void;
     onBlur: (value: any, type: string) => void;
+    replaceValueCh?: {
+        [key: string]: string;
+    };
 }
 declare const Payment: (props: Partial<PaymentProps>) => React.JSX.Element;
 export default Payment;

package/dist/src/business/TBGoodSerial/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { GoodsProps } from '../../common/Goods';
-declare const TBGoodSerial: (props: Partial<GoodsProps>) => React.JSX.Element;
+import { GoodsTableProps } from '../../common/Goods/Table';
+declare const TBGoodSerial: (props: Partial<GoodsTableProps>) => React.JSX.Element;
 export default TBGoodSerial;

package/dist/src/common/Goods/Table.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface GoodsTableProps {
+    value?: {
+        shopId: string;
+        imgList: any[];
+    };
+    showChangeBtn?: boolean;
+    type?: number;
+    enableItemId?: boolean;
+    enableSupplierName?: boolean;
+    userNick?: string;
+    maxLength: number;
+    canUpdateNumber?: boolean;
+    onChange?: (value: any) => void;
+    shopList: any[];
+    otherOperations?: React.JSX.Element;
+    showHeader?: string[];
+    shopId?: string;
+    disabled?: boolean;
+    changeSku?: boolean;
+    width?: string | number;
+}
+declare const GoodItem: (props: Partial<GoodsTableProps>) => React.JSX.Element;
+export default GoodItem;

package/dist/src/common/Sku/index.d.ts

@@ -6,6 +6,7 @@ declare type SkuProps = {
         propertiesName: string;
         picUrl?: string;
         outerSkuId?: string;
+        skuId?: string;
     }) => void;
     userNick: string | undefined;
     type?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kmkf-fe-packages/basic-components",
-  "version": "0.21.4",
+  "version": "0.22.0-alpha.1",
   "description": "> TODO: description",
   "homepage": "",
   "license": "ISC",
@@ -20,7 +20,7 @@
     "watch": "nodemon --ignore dist/ --ignore node_modules/ --watch src/ -C -e ts,tsx,less --debug -x 'yarn async'"
   },
   "dependencies": {
-    "@kmkf-fe-packages/kmkf-utils": "^0.21.4",
+    "@kmkf-fe-packages/kmkf-utils": "^0.21.4-alpha.3",
     "lodash": "^4.17.21",
     "pubsub-js": "^1.9.4",
     "react-copy-to-clipboard": "^5.1.0",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "510c76d8426f214eb5653d9e75a59fa44e318939"
+  "gitHead": "7825b8695c7bb147a322a02b6c7fed629677612c"
 }