@aliretail/react-materials-components/lib/SupplyRelationshipRatio/components/StoreTable/index.js

B 端物料组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));

var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));

var _message = _interopRequireDefault(require("@alifd/next/lib/message"));

var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _select = _interopRequireDefault(require("@alifd/next/lib/select"));

var _table = _interopRequireDefault(require("@alifd/next/lib/table"));

var _react = _interopRequireWildcard(require("react"));

var _dataAdaptor = require("../../config/data-adaptor");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * @author wu.zhengnan
 * @desc 店铺列表组件（可编辑）
 * @createDate 2021.03.19
 */
var TableColumns = _table["default"].Column;
var Option = _select["default"].Option;

function StoreTable(props) {
  var dataSource = props.dataSource,
      columns = props.columns,
      _props$otherTableProp = props.otherTableProps,
      otherTableProps = _props$otherTableProp === void 0 ? {} : _props$otherTableProp,
      _props$onChange = props.onChange,
      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
      _props$onChangeChanne = props.onChangeChannel,
      onChangeChannel = _props$onChangeChanne === void 0 ? function () {} : _props$onChangeChanne,
      channelList = props.channelList,
      storeList = props.storeList,
      channelId = props.channelId,
      _props$totalProportio = props.totalProportion,
      totalProportion = _props$totalProportio === void 0 ? 0 : _props$totalProportio,
      dataKey = props.dataKey,
      maxRatio = props.maxRatio,
      ratioKey = props.ratioKey,
      fieldInit = props.fieldInit,
      fieldGetError = props.fieldGetError,
      addArrayValue = props.addArrayValue,
      deleteArrayValue = props.deleteArrayValue,
      hasDelete = props.hasDelete,
      _props$onDeleteTable = props.onDeleteTable,
      onDeleteTable = _props$onDeleteTable === void 0 ? function () {} : _props$onDeleteTable;

  var _useState = (0, _react.useState)({
    isChannelSearch: false,
    channelSearchRes: []
  }),
      channelInfo = _useState[0],
      setChannelInfo = _useState[1];

  var _useState2 = (0, _react.useState)({
    isStoreSearch: false,
    storeSearchRes: []
  }),
      storeInfo = _useState2[0],
      setStoreInfo = _useState2[1]; // 一条空白数据


  var blankDataRef = (0, _react.useRef)({});
  var hasColumns = (0, _react.useMemo)(function () {
    blankDataRef.current = columns.reduce(function (a, b) {
      var _extends2;

      return (0, _extends3["default"])({}, a, (_extends2 = {}, _extends2[b.dataIndex] = undefined, _extends2));
    }, {});
    return Array.isArray(columns) && columns.length > 0;
  }, [columns]); // 添加店铺

  var onAddStore = (0, _react.useCallback)(function () {
    if (!channelId) {
      _message["default"].warning('未选择渠道，无法新增店铺');

      return;
    }

    var index = (dataSource || []).length; // field表单新增

    addArrayValue(_dataAdaptor.fieldKey + "." + dataKey, index, blankDataRef.current); // 数据变化

    var newData = [].concat(dataSource || [], [blankDataRef.current]);
    onChange(dataKey, newData, totalProportion);
  }, [dataSource, onChange, dataKey, channelId, totalProportion]); // 删除

  var onDelete = (0, _react.useCallback)(function (key) {
    _dialog["default"].confirm({
      content: '确认删除该店铺吗？',
      onOk: function onOk() {
        var total = totalProportion || 0;
        var newData = dataSource.filter(function (item, index) {
          if (index === key) {
            var currentRatio = item && item[ratioKey] || 0;
            total -= currentRatio;
            return false;
          }

          return true;
        }); // field表单删除

        deleteArrayValue(_dataAdaptor.fieldKey + "." + dataKey, key);
        onChange(dataKey, newData, total);
      }
    });
  }, [dataSource, onChange, dataKey, ratioKey]); // 渠道搜索查询

  var onChannelSearch = (0, _react.useCallback)(function (val) {
    var data = (0, _dataAdaptor.getValueByName)(channelList, val);
    setChannelInfo({
      isChannelSearch: true,
      channelSearchRes: data
    });
  }, [channelList]); // 店铺搜索查询

  var onStoreSearch = (0, _react.useCallback)(function (val) {
    var data = (0, _dataAdaptor.getValueByName)(storeList, val);
    setStoreInfo({
      isStoreSearch: true,
      storeSearchRes: data
    });
  }, [storeList]);
  var channelData = (0, _react.useMemo)(function () {
    var isChannelSearch = channelInfo.isChannelSearch,
        channelSearchRes = channelInfo.channelSearchRes;
    var data = isChannelSearch ? channelSearchRes : channelList;
    return data || [];
  }, [channelInfo, channelList]);
  var storeData = (0, _react.useMemo)(function () {
    var isStoreSearch = storeInfo.isStoreSearch,
        storeSearchRes = storeInfo.storeSearchRes;
    var data = isStoreSearch ? storeSearchRes : storeList;
    return data || [];
  }, [storeInfo, storeList]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "supply-relationship-ratio-table"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ratio-table-head"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "ratio-table-head-label"
  }, "\u5BF9\u5E94\u6E20\u9053"), /*#__PURE__*/_react["default"].createElement(_select["default"], {
    className: "ratio-table-channel-select",
    value: channelId,
    onChange: function onChange(val) {
      return onChangeChannel(val, dataKey);
    },
    dataSource: channelData,
    filterLocal: false,
    showSearch: true,
    onSearch: onChannelSearch
  }), /*#__PURE__*/_react["default"].createElement("span", {
    className: "ratio-table-total"
  }, "\u540C\u6B65\u6BD4\u4F8B\u603B\u548C\uFF1A", /*#__PURE__*/_react["default"].createElement("span", {
    className: maxRatio >= totalProportion ? '' : 'ratio-table-total-over'
  }, totalProportion, "%")), hasDelete && /*#__PURE__*/_react["default"].createElement("span", {
    className: "ratio-table-delete",
    onClick: function onClick() {
      onDeleteTable(dataKey);
    }
  }, "\u5220\u9664")), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ratio-table"
  }, /*#__PURE__*/_react["default"].createElement(_table["default"], (0, _extends3["default"])({
    dataSource: dataSource,
    key: "store-table",
    hasBorder: false
  }, otherTableProps), hasColumns ? columns.map(function (item) {
    var type = item.type,
        cell = item.cell,
        dataIndex = item.dataIndex,
        rules = item.rules;
    var columnKey = _dataAdaptor.fieldKey + "." + dataKey;

    var newCell = function newCell(value, index, record) {
      columnKey = _dataAdaptor.fieldKey + "." + dataKey + "." + index + "." + dataIndex;
      return /*#__PURE__*/_react["default"].createElement("span", fieldInit(columnKey, {
        rules: rules
      }), value);
    };

    if (cell) {
      newCell = function newCell(value, index, record) {
        columnKey = _dataAdaptor.fieldKey + "." + dataKey + "." + index + "." + dataIndex;
        return /*#__PURE__*/_react["default"].createElement("span", fieldInit(columnKey, {
          rules: rules
        }), cell(value, index, record));
      };
    } else if (type === 'select') {
      newCell = function newCell(value, index) {
        columnKey = _dataAdaptor.fieldKey + "." + dataKey + "." + index + "." + dataIndex;
        var err = fieldGetError(columnKey);
        var errMessage = Array.isArray(err) ? err.join('，') : err;
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "ratio-table-vaditor" + (err ? ' ratio-table-vaditor-error' : '')
        }, /*#__PURE__*/_react["default"].createElement(_select["default"], (0, _extends3["default"])({
          className: "ratio-table-number-select"
        }, fieldInit(columnKey, {
          rules: rules
        }), {
          value: value,
          dataSource: storeData,
          filterLocal: false,
          showSearch: true,
          onSearch: onStoreSearch
        })), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("span", {
          className: "error-info"
        }, errMessage));
      };
    } else if (type === 'numberPicker') {
      newCell = function newCell(value, index) {
        columnKey = _dataAdaptor.fieldKey + "." + dataKey + "." + index + "." + dataIndex;
        var err = fieldGetError(columnKey);
        var errMessage = Array.isArray(err) ? err.join('，') : err;
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "ratio-table-vaditor" + (err ? ' ratio-table-vaditor-error' : '')
        }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], (0, _extends3["default"])({}, fieldInit(columnKey, {
          rules: rules
        }), {
          value: value,
          max: 100,
          min: 1,
          defaultValue: 1,
          className: "ratio-table-number-picker"
        })), /*#__PURE__*/_react["default"].createElement("span", {
          className: "err-color"
        }, "\xA0%"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("span", {
          className: "error-info"
        }, errMessage));
      };
    }

    return /*#__PURE__*/_react["default"].createElement(TableColumns, (0, _extends3["default"])({}, item, {
      cell: newCell,
      key: item.dataIndex,
      type: undefined
    }));
  }) : null, hasColumns ? /*#__PURE__*/_react["default"].createElement(TableColumns, {
    title: "\u64CD\u4F5C",
    key: "delete",
    cell: function cell(value, index, record) {
      return /*#__PURE__*/_react["default"].createElement("span", {
        onClick: function onClick() {
          return onDelete(index);
        },
        className: "supply-relationship-ratio-table-delete"
      }, "\u5220\u9664");
    }
  }) : null), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ratio-data-add",
    onClick: onAddStore
  }, "+ \u65B0\u589E\u5E97\u94FA")));
}

var _default = /*#__PURE__*/(0, _react.memo)(StoreTable);

exports["default"] = _default;