@aliretail/react-materials-components/es/SplitOrderMode/index.js

B 端物料组件库

import _Table from "@alifd/next/es/table";
import _Button from "@alifd/next/es/button";
import _Radio from "@alifd/next/es/radio";
import _extends from "@babel/runtime/helpers/extends";
import * as React from 'react';
import SelectSKUDialog from "./SelectSKUDialog";
var ModeMap = {
  '1': '每个货品各拆成一单',
  '2': '指定货品拆成一单，剩余货品自成一单',
  // 一共两单
  '3': '指定货品各拆成一单，剩余货品自成一单' // 一个n + 1单

};
var SplitMode = /*#__PURE__*/React.forwardRef(function (props, ref) {
  // eslint-disable-next-line react/prop-types
  var value = props.value,
      onChange = props.onChange,
      primaryKey = props.primaryKey,
      onFetchGoodList = props.onFetchGoodList;

  var _ref = value || {},
      type = _ref.type,
      goodIds = _ref.goodIds;

  var _React$useState = React.useState(false),
      visible = _React$useState[0],
      setVisible = _React$useState[1];

  var _React$useState2 = React.useState(false),
      loading = _React$useState2[0],
      setLoading = _React$useState2[1];

  var _React$useState3 = React.useState([]),
      goodList = _React$useState3[0],
      setGoodList = _React$useState3[1];
  /** radio 改变回调 */


  var handleRadioChange = function handleRadioChange(v) {
    onChange === null || onChange === void 0 ? void 0 : onChange({
      goodIds: [],
      type: v
    });
  };
  /** 货品id 改变回调 */


  var handleSKUChange = function handleSKUChange(ids) {
    onChange === null || onChange === void 0 ? void 0 : onChange(_extends({}, value, {
      goodIds: ids
    }));
  };

  var handleOpenSelectSku = function handleOpenSelectSku() {
    setVisible(true);
    setLoading(true);
    onFetchGoodList().then(function (list) {
      setGoodList(list);
    })["finally"](function () {
      setLoading(false);
    });
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Radio.Group, {
    value: type,
    ref: ref,
    onChange: handleRadioChange
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Radio, {
    value: "1"
  }, ModeMap[1])), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Radio, {
    value: "2"
  }, ModeMap[2], ' ', type === '2' && /*#__PURE__*/React.createElement(_Button, {
    type: "primary",
    text: true,
    size: "small",
    onClick: handleOpenSelectSku
  }, goodIds !== null && goodIds !== void 0 && goodIds.length ? '修改' : '选择', "\u8D27\u54C1"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Radio, {
    value: "3"
  }, ModeMap[3], ' ', type === '3' && /*#__PURE__*/React.createElement(_Button, {
    type: "primary",
    text: true,
    size: "small",
    onClick: handleOpenSelectSku
  }, goodIds !== null && goodIds !== void 0 && goodIds.length ? '修改' : '选择', "\u8D27\u54C1")))), /*#__PURE__*/React.createElement(SelectSKUDialog, {
    primaryKey: primaryKey,
    loading: loading,
    goodList: goodList,
    type: ModeMap[type],
    visible: visible,
    onVisibleChange: setVisible,
    goodIds: goodIds || [],
    onGoodIdsChange: handleSKUChange
  }), function () {
    if (!(goodIds !== null && goodIds !== void 0 && goodIds.length)) {
      return null;
    }

    var frontList = []; // 选中的

    var backList = []; // 剩余的

    goodList.forEach(function (g) {
      if (goodIds.includes(g[primaryKey])) {
        frontList.push(g);
      } else {
        backList.push(g);
      }
    });
    return /*#__PURE__*/React.createElement(_Table, {
      style: {
        marginTop: 8
      },
      dataSource: frontList.concat(backList),
      cellProps: function cellProps(rowIndex, colIndex) {
        // 指定货品拆成一单，剩余货品自成一单，一共两单
        if (type === '2') {
          if (rowIndex === 0 && colIndex === 0) {
            return {
              rowSpan: frontList.length
            };
          }

          if (rowIndex === frontList.length && colIndex === 0) {
            return {
              rowSpan: backList.length
            };
          }
        } // 指定货品各拆成一单，剩余货品自成一单，一共n + 1单


        if (type === '3') {
          if (rowIndex === frontList.length && colIndex === 0) {
            return {
              rowSpan: backList.length
            };
          }
        }

        return {};
      }
    }, /*#__PURE__*/React.createElement(_Table.Column, {
      title: "\u5E8F\u53F7",
      cell: function cell(v, i) {
        if (type === '2') {
          if (i >= frontList.length) {
            return i + 1 - (frontList.length - 1);
          }

          return i + 1;
        }

        return i + 1;
      }
    }), /*#__PURE__*/React.createElement(_Table.Column, {
      title: "\u8D27\u54C1",
      cell: function cell(v, i, record) {
        var _record$good;

        return record === null || record === void 0 ? void 0 : (_record$good = record.good) === null || _record$good === void 0 ? void 0 : _record$good.title;
      }
    }), /*#__PURE__*/React.createElement(_Table.Column, {
      title: "\u8D27\u54C1\u7F16\u7801",
      cell: function cell(v, i, record) {
        var _record$good2, _record$good2$descrip;

        return record === null || record === void 0 ? void 0 : (_record$good2 = record.good) === null || _record$good2 === void 0 ? void 0 : (_record$good2$descrip = _record$good2.description) === null || _record$good2$descrip === void 0 ? void 0 : _record$good2$descrip.slice(5);
      }
    }));
  }());
});
export default SplitMode;