@aliretail/react-materials-components/es/SettlementConfigurationTable/components/RelateMainModeTable.js

B 端物料组件库

import _Button from "@alifd/next/es/button";
import _extends from "@babel/runtime/helpers/extends";
import _Message from "@alifd/next/es/message";
import React from 'react';
import { AliretailTableContainer, AliretailTable, AliretailTableActionBar } from "../../Tablex";

var RelateMainModeTable = function RelateMainModeTable(props) {
  var _props$dataSource = props.dataSource,
      dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
      setDataSource = props.setDataSource,
      _props$columns = props.columns,
      columns = _props$columns === void 0 ? [] : _props$columns,
      onSave = props.onSave,
      onDelete = props.onDelete; // 添加一条数据

  var addRelateObj = function addRelateObj() {
    var newDataSource = Object.assign([], dataSource);

    if (newDataSource.filter(function (item) {
      return !item.isComponentDisabled;
    }).length) {
      _Message.warning('请先保存再添加');

      return;
    } // 添加一条数据 根据动态列的dataIndex生成 一条以dataIndex为key的空对象


    var columnsKeyObj = columns.map(function (item) {
      var _ref;

      return _ref = {}, _ref[item.dataIndex] = '', _ref;
    }).reduce(function (keysObj, item) {
      return Object.assign(keysObj, item);
    }, {});
    newDataSource.push(_extends({}, columnsKeyObj, {
      isComponentDisabled: false,
      isSave: false
    }));
    setDataSource(newDataSource);
  }; // 表格操作列


  var operateCell = function operateCell(value, index, record) {
    return !(record !== null && record !== void 0 && record.isComponentDisabled) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
      className: "relate-operate-button",
      onClick: function onClick() {
        return onSave(value, index, record);
      }
    }, "\u4FDD\u5B58"), "\xA0\xA0\xA0", /*#__PURE__*/React.createElement("span", {
      className: "relate-operate-button",
      onClick: function onClick() {
        var newDataSource = Object.assign([], dataSource);
        newDataSource.splice(index, 1);
        setDataSource(newDataSource);
      }
    }, "\u53D6\u6D88")) : /*#__PURE__*/React.createElement("span", {
      className: "relate-operate-button",
      onClick: function onClick() {
        return onDelete(value, index, record);
      }
    }, "\u5220\u9664");
  };

  return /*#__PURE__*/React.createElement(AliretailTableContainer, {
    dataSource: dataSource,
    columns: [].concat(columns, [{
      title: '操作',
      dataIndex: 'operate',
      width: '15%',
      cell: function cell(val, index, record) {
        return operateCell(val, index, record);
      }
    }])
  }, /*#__PURE__*/React.createElement(AliretailTableActionBar, null, /*#__PURE__*/React.createElement(_Button, {
    onClick: addRelateObj
  }, "\u6DFB\u52A0")), /*#__PURE__*/React.createElement(AliretailTable, null));
};

export default RelateMainModeTable;