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

B 端物料组件库

import _Dialog from "@alifd/next/es/dialog";
import _Message from "@alifd/next/es/message";
import _extends from "@babel/runtime/helpers/extends";
import React, { useState, useEffect } from 'react';
import * as PropTypes from 'prop-types';
import request from '@aliretail/react-universal-request';
import RelateMainModeTable from "./components/RelateMainModeTable";
import TABLE_COLUMNS_COM_MAP from "./utils/type";

var SettlementConfigurationTable = function SettlementConfigurationTable(props) {
  var columns = props.columns,
      _props$requestMap = props.requestMap,
      requestMap = _props$requestMap === void 0 ? {} : _props$requestMap,
      url = props.url,
      handleSave = props.handleSave,
      handleDelete = props.handleDelete,
      handleChange = props.handleChange;
  var table = requestMap.table,
      relateSelect = requestMap.relateSelect,
      deleted = requestMap.deleted,
      save = requestMap.save,
      disabled = requestMap.disabled;
  var selectUrl = url.selectUrl,
      tableUrl = url.tableUrl,
      deleteUrl = url.deleteUrl,
      saveUrl = url.saveUrl,
      disabledUrl = url.disabledUrl;

  var _useState = useState([]),
      dataSource = _useState[0],
      setDataSource = _useState[1]; // table列表数据


  var _useState2 = useState([]),
      columnsList = _useState2[0],
      setColumnsList = _useState2[1]; // table列配置数据


  var _useState3 = useState([]),
      relateSelectList = _useState3[0],
      setRelateSelectList = _useState3[1]; // table列配置的下拉数据
  // 获取表格列表数据请求


  var getTableDataSourceListApi = function getTableDataSourceListApi() {
    // if (!table?.apiCode || !table?.appCode) {
    //   return;
    // }
    request({
      url: tableUrl,
      method: 'post',
      type: 'json',
      appCode: table === null || table === void 0 ? void 0 : table.appCode,
      apiCode: table === null || table === void 0 ? void 0 : table.apiCode,
      data: _extends({}, table === null || table === void 0 ? void 0 : table.params),
      autoShowErrorMessage: true
    }).then(function (result) {
      if (result !== null && result !== void 0 && result.success && result !== null && result !== void 0 && result.result) {
        // 回填的数据组件除了switch组件不会被禁用 其他都会被禁用 isComponentDisabled就是这个禁用标识
        var newResult = result === null || result === void 0 ? void 0 : result.result.map(function (item) {
          return _extends({}, item, {
            isComponentDisabled: true,
            isSave: true
          });
        });
        setDataSource(newResult);
      } else {
        _Message.error((result === null || result === void 0 ? void 0 : result.message) || '获取表格数据列表失败');
      }
    });
  }; // 获取关联主对象下拉列表数据


  var getSelectDataSourceListApi = function getSelectDataSourceListApi() {
    // if (!relateSelect?.apiCode || !relateSelect?.appCode) {
    //   return;
    // }
    request({
      url: selectUrl,
      method: 'post',
      type: 'json',
      apiCode: relateSelect === null || relateSelect === void 0 ? void 0 : relateSelect.apiCode,
      appCode: relateSelect === null || relateSelect === void 0 ? void 0 : relateSelect.appCode,
      data: _extends({}, relateSelect === null || relateSelect === void 0 ? void 0 : relateSelect.params, table === null || table === void 0 ? void 0 : table.params),
      autoShowErrorMessage: true
    }).then(function (result) {
      if (result !== null && result !== void 0 && result.success && result !== null && result !== void 0 && result.result) {
        setRelateSelectList(result.result);
        getTableDataSourceListApi();
      } else {
        _Message.error((result === null || result === void 0 ? void 0 : result.message) || '获取下拉数据列表失败');
      }
    });
  }; // 删除服务请求


  var deleteApi = function deleteApi(value, index, record) {
    // if (!deleted?.appCode || !deleted?.apiCode) {
    //   return;
    // }
    _Dialog.confirm({
      content: '确认删除这条数据吗？',
      onOk: function onOk() {
        request({
          url: deleteUrl,
          method: 'post',
          type: 'json',
          appCode: deleted === null || deleted === void 0 ? void 0 : deleted.appCode,
          apiCode: deleted === null || deleted === void 0 ? void 0 : deleted.apiCode,
          data: _extends({}, deleted === null || deleted === void 0 ? void 0 : deleted.params, table === null || table === void 0 ? void 0 : table.params, record),
          autoShowErrorMessage: true
        }).then(function (result) {
          if (result !== null && result !== void 0 && result.success && result !== null && result !== void 0 && result.result) {
            _Message.success('删除成功');

            getTableDataSourceListApi();
            handleDelete(value, index, record);
          } else {
            _Message.error((result === null || result === void 0 ? void 0 : result.message) || '删除失败');
          }
        });
      }
    });
  }; // 保存服务请求


  var saveApi = function saveApi(value, index, record) {
    // if (!save?.apiCode || !save?.appCode) {
    //   return;
    // }
    request({
      url: saveUrl,
      method: 'post',
      type: 'json',
      appCode: save === null || save === void 0 ? void 0 : save.appCode,
      apiCode: save === null || save === void 0 ? void 0 : save.apiCode,
      data: _extends({}, save === null || save === void 0 ? void 0 : save.params, table === null || table === void 0 ? void 0 : table.params, record),
      autoShowErrorMessage: true
    }).then(function (result) {
      if (result !== null && result !== void 0 && result.success && result !== null && result !== void 0 && result.result) {
        _Message.success('保存成功');

        getTableDataSourceListApi();
        handleSave(value, index, record);
      } else {
        _Message.error((result === null || result === void 0 ? void 0 : result.message) || '保存失败');
      }
    });
  }; // 启用/禁用服务请求


  var disableApi = function disableApi(value, index, record) {
    // if (!disabled?.apiCode || !disabled?.appCode) {
    //   return;
    // }
    var messageText = value ? '启用成功' : '禁用成功';
    request({
      url: disabledUrl,
      method: 'post',
      appCode: disabled === null || disabled === void 0 ? void 0 : disabled.appCode,
      apiCode: disabled === null || disabled === void 0 ? void 0 : disabled.apiCode,
      data: _extends({}, disabled === null || disabled === void 0 ? void 0 : disabled.params, table === null || table === void 0 ? void 0 : table.params, record),
      autoShowErrorMessage: true
    }).then(function (result) {
      if (result !== null && result !== void 0 && result.success && result !== null && result !== void 0 && result.result) {
        _Message.success(messageText); // getTableDataSourceListApi();

      } else {
        _Message.error((result === null || result === void 0 ? void 0 : result.message) || messageText);
      }
    });
  }; // 处理表格columns列配置列表数据 合并没有传cell回调的情况 如果有不进行合并


  var dealColumnsList = function dealColumnsList() {
    var newColumnsList = columns === null || columns === void 0 ? void 0 : columns.map(function (item) {
      var TypeCom = TABLE_COLUMNS_COM_MAP[item.type];
      var extraProps = {}; // 处理select组件以及switch组件情况 select需要传dataSource switch需要传其他配置

      if (item.type === 'select') {
        extraProps.dataSource = relateSelectList;
      } else if (item.type === 'switch') {
        extraProps.checkedChildren = '已启用';
        extraProps.unCheckedChildren = '已禁用';
        extraProps.disabled = false;
      } else if (item.type === 'text') {
        extraProps.isPreview = true;
      }

      return _extends({
        cell: function cell(value, index, record) {
          var type = item.type;
          return /*#__PURE__*/React.createElement(TypeCom, _extends({
            value: value,
            checked: value,
            disabled: record.isComponentDisabled
          }, extraProps, {
            onChange: function onChange(val) {
              _onChange(val, index, record, item.dataIndex, type);
            }
          }));
        }
      }, item);
    });
    setColumnsList(newColumnsList);
  };

  useEffect(function () {
    getSelectDataSourceListApi();
    dealColumnsList();
  }, []);
  useEffect(function () {
    dealColumnsList();
  }, [dataSource]); // 表格列组件onChange事件 (启用和禁用也需要调接口)

  var _onChange = function _onChange(value, index, record, dataIndex, type) {
    var newDataSource = Object.assign([], dataSource);
    newDataSource.forEach(function (item, idx) {
      if (idx === index) {
        item[dataIndex] = value;
      }
    });
    setDataSource(newDataSource); // switch组件进行onChange需要发请求 不会禁用

    if (type === 'switch' && record.isSave) {
      disableApi(value, index, record);
    }

    handleChange(value, index, record, dataIndex);
  }; // 操作列-保存操作


  var onSave = function onSave(value, index, record) {
    saveApi(value, index, record);
  }; // 操作列-删除操作


  var onDelete = function onDelete(value, index, record) {
    deleteApi(value, index, record);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "aliretail-settlement-configurate-table"
  }, /*#__PURE__*/React.createElement(RelateMainModeTable, {
    columns: columnsList,
    dataSource: dataSource,
    relateSelectList: relateSelectList,
    setDataSource: setDataSource,
    onSave: onSave,
    onDelete: onDelete
  }));
};

SettlementConfigurationTable.propTypes = {
  columns: PropTypes.arrayOf(PropTypes.any),
  requestMap: PropTypes.objectOf(PropTypes.any),
  url: PropTypes.objectOf(PropTypes.any)
};
SettlementConfigurationTable.defaultProps = {
  columns: [],
  requestMap: {},
  url: {}
};
export default SettlementConfigurationTable;