sunmao-sdk/lib/component/CustomHeaderModal/index.js

榫卯-开箱即用赋能-sdk

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/es/modal/style");

var _modal = _interopRequireDefault(require("antd/es/modal"));

require("antd/es/alert/style");

var _alert = _interopRequireDefault(require("antd/es/alert"));

require("antd/es/button/style");

var _button = _interopRequireDefault(require("antd/es/button"));

var _MenuOutlined2 = _interopRequireDefault(require("@ant-design/icons/lib/icons/MenuOutlined"));

require("antd/es/checkbox/style");

var _checkbox = _interopRequireDefault(require("antd/es/checkbox"));

require("antd/es/message/style");

var _message2 = _interopRequireDefault(require("antd/es/message"));

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

var _reactSortableHoc = require("react-sortable-hoc");

var _QuestionCircle = _interopRequireDefault(require("../QuestionCircle"));

require("./index.less");

var _formUtils = require("../../utils/formUtils");

var _commonUtils = require("../../utils/commonUtils");

var _localStorageUtils = require("../../utils/localStorageUtils");

var _ = require("../..");

var _lodash = require("lodash");

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; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

// interface headerItem {
//   title?: string; // 字段名称（中文）
//   label?: string; // 字段名称（中文）
//   dataIndex?: string; // 字段名称（英文）
//   key?: string; // 字段名称（英文）
//   isSelected: boolean; // 是否被勾选
//   selectedIndex: number; // 用户选择顺序
//   remark?: string; // 字段提示语
//   isRequired: string; // 是否必选
// }
// 拖拽后对数组重新排序
var reorder = function reorder(list, startIndex, endIndex) {
  var result = Array.from(list);

  var _result$splice = result.splice(startIndex, 1),
      _result$splice2 = _slicedToArray(_result$splice, 1),
      removed = _result$splice2[0];

  result.splice(endIndex, 0, removed);
  return result.map(function (i, index) {
    i.selectedIndex = index;
    return i;
  });
};

var CustomHeaderModal = function CustomHeaderModal(props) {
  var title = props.title,
      show = props.show,
      handleCancel = props.handleCancel,
      onChange = props.onChange,
      cacheList = props.cacheList,
      defaultList = props.defaultList,
      fieldNames = props.fieldNames;
  var customKey = fieldNames.customKey,
      key = fieldNames.key,
      label = fieldNames.label,
      behaviorName = fieldNames.behaviorName;

  var _useState = (0, _react.useState)([]),
      _useState2 = _slicedToArray(_useState, 2),
      headerLists = _useState2[0],
      setHeaderLists = _useState2[1];

  (0, _react.useEffect)(function () {
    if (show) {
      if (!(0, _lodash.isEmpty)(cacheList)) {
        // 判断缓存
        setHeaderLists(cacheList);
      } else {
        // 无缓存则初始化处理
        setDefaultTableColumns();
      }
    }
  }, [show]); // 初始化默认表头

  var setDefaultTableColumns = function setDefaultTableColumns() {
    //  转换处理
    setHeaderLists(defaultList.map(function (item, index) {
      item.isSelected = (0, _formUtils.getDicTrue)(item.selectTrue || "5fb8b91ae2559fcd82cad4d2");
      item.selectedIndex = index;
      return item;
    }));
  }; // 表头拖拽


  var onDragEnd = function onDragEnd(_ref) {
    var oldIndex = _ref.oldIndex,
        newIndex = _ref.newIndex;

    if (oldIndex === newIndex) {
      return;
    }

    var quotes = reorder(headerLists, oldIndex, // 原位置
    newIndex // 目标位置
    );
    setHeaderLists(quotes);
  }; // 选择表头


  var checkChange = function checkChange(e, field) {
    var curSelect = e.target.checked;
    var index = headerLists.findIndex(function (item) {
      return item[key] === field[key];
    });

    if (index > -1) {
      setHeaderLists(function (lists) {
        lists[index] = _objectSpread(_objectSpread({}, lists[index]), {}, {
          isSelected: curSelect
        });
        return _toConsumableArray(lists);
      });
    }
  }; // 保存表头


  var submit = function submit() {
    if (!headerLists.some(function (item) {
      return item.isSelected;
    })) {
      _message2.default.warning("请至少选择一个表头");

      return;
    } // 保存表头，存入缓存


    _.CP.customConfigMap[customKey] = headerLists;
    (0, _localStorageUtils.setObject)("sunmao_customConfigMap", _.CP.customConfigMap); // 刷新页面表头

    onChange === null || onChange === void 0 ? void 0 : onChange();
    setTimeout(function () {
      (0, _commonUtils.behaviorLog)(behaviorName);
    }, 1);
  }; // 全选


  var allSelectChange = function allSelectChange(e) {
    setHeaderLists(function (list) {
      return list.map(function (item) {
        // 必选表头不可取消
        if ((0, _formUtils.getDicTrue)(item.isRequired)) {
          item.isSelected = true;
        } else {
          item.isSelected = e.target.checked;
        }

        return item;
      });
    });
  };

  var SortableItem = (0, _reactSortableHoc.SortableElement)(function (_ref2) {
    var value = _ref2.value;
    var name = value[label];
    return (0, _formUtils.getDicTrue)(value.isRequired) ?
    /*#__PURE__*/
    // 不可选表头 需置灰
    _react.default.createElement("div", {
      className: "header-item"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "disable-item"
    }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
      checked: true,
      disabled: true
    }), /*#__PURE__*/_react.default.createElement("span", {
      className: "label disable-label"
    }, name), value.remark && /*#__PURE__*/_react.default.createElement(_QuestionCircle.default, {
      title: value.remark,
      style: {
        marginLeft: "4px"
      }
    })), /*#__PURE__*/_react.default.createElement(_MenuOutlined2.default, {
      className: "menu-icon"
    })) : /*#__PURE__*/_react.default.createElement("div", {
      className: "header-item"
    }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
      onChange: function onChange(e) {
        return checkChange(e, value);
      },
      checked: value.isSelected
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: "label"
    }, name), value.remark && /*#__PURE__*/_react.default.createElement(_QuestionCircle.default, {
      title: value.remark,
      style: {
        marginLeft: "4px"
      }
    })), /*#__PURE__*/_react.default.createElement(_MenuOutlined2.default, {
      className: "menu-icon"
    }));
  });
  var SortableList = (0, _reactSortableHoc.SortableContainer)(function () {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "header-lists"
    }, headerLists.sort(function (a, b) {
      return a["selectedIndex"] - b["selectedIndex"];
    }).map(function (quote, index) {
      return /*#__PURE__*/_react.default.createElement(SortableItem, {
        key: quote[key],
        index: index,
        value: quote
      });
    }));
  });
  return /*#__PURE__*/_react.default.createElement(_modal.default, {
    visible: show,
    width: 720,
    title: title || "自定义展示设置",
    onCancel: handleCancel,
    destroyOnClose: true,
    centered: true,
    maskClosable: false,
    footer: /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-header-footer"
    }, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
      key: "selectAll",
      checked: headerLists.every(function (i) {
        return i.isSelected;
      }),
      onChange: allSelectChange
    }, "\u5168\u9009"), /*#__PURE__*/_react.default.createElement("div", {
      className: "button-group"
    }, /*#__PURE__*/_react.default.createElement(_button.default, {
      key: "default",
      type: "link",
      onClick: setDefaultTableColumns
    }, "\u6062\u590D\u9ED8\u8BA4"), /*#__PURE__*/_react.default.createElement(_button.default, {
      key: "cancel",
      type: "ghost",
      onClick: handleCancel
    }, "\u53D6\u6D88"), /*#__PURE__*/_react.default.createElement(_button.default, {
      key: "commit",
      type: "primary",
      onClick: submit
    }, "\u786E\u5B9A"))),
    className: "custom-header-modal"
  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_alert.default, {
    message: "\u987A\u5E8F\u8BBE\u7F6E\uFF1A\u53EF\u70B9\u51FB\u6309\u4F4F\u5B57\u6BB5\u53F3\u4FA7\u56FE\u6807\uFF0C\u76F4\u63A5\u62D6\u62FD\u5230\u5408\u9002\u4F4D\u7F6E\uFF0C\u6309\u4ECE\u5DE6\u5230\u53F3\u3001\u4ECE\u4E0A\u5230\u4E0B\u7684\u987A\u5E8F\u6392\u5E8F\u3002",
    type: "info",
    showIcon: true,
    closable: true
  }), /*#__PURE__*/_react.default.createElement("h3", null), /*#__PURE__*/_react.default.createElement(SortableList, {
    distance: 5,
    onSortEnd: onDragEnd,
    axis: "xy",
    helperClass: "custom-header-drag-header-item"
  })));
};

var _default = CustomHeaderModal;
exports.default = _default;