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

榫卯-开箱即用赋能-sdk

import "antd/es/modal/style";
import _Modal from "antd/es/modal";
import "antd/es/alert/style";
import _Alert from "antd/es/alert";
import "antd/es/button/style";
import _Button from "antd/es/button";
import _MenuOutlined from "@ant-design/icons/es/icons/MenuOutlined";
import "antd/es/checkbox/style";
import _Checkbox from "antd/es/checkbox";
import "antd/es/message/style";
import _message from "antd/es/message";

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

import React, { useEffect, useState } from "react";
import { SortableContainer, SortableElement } from "react-sortable-hoc";
import QuestionCircle from "../QuestionCircle";
import "./index.less";
import { getDicTrue } from "../../utils/formUtils";
import { behaviorLog } from "../../utils/commonUtils";
import { setObject } from "../../utils/localStorageUtils";
import { CP } from "../..";
import { isEmpty } from "lodash"; // 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 = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
      headerLists = _useState2[0],
      setHeaderLists = _useState2[1];

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

  var setDefaultTableColumns = function setDefaultTableColumns() {
    //  转换处理
    setHeaderLists(defaultList.map(function (item, index) {
      item.isSelected = 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;
    })) {
      _message.warning("请至少选择一个表头");

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


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

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


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

        return item;
      });
    });
  };

  var SortableItem = SortableElement(function (_ref2) {
    var value = _ref2.value;
    var name = value[label];
    return getDicTrue(value.isRequired) ?
    /*#__PURE__*/
    // 不可选表头 需置灰
    React.createElement("div", {
      className: "header-item"
    }, /*#__PURE__*/React.createElement("div", {
      className: "disable-item"
    }, /*#__PURE__*/React.createElement(_Checkbox, {
      checked: true,
      disabled: true
    }), /*#__PURE__*/React.createElement("span", {
      className: "label disable-label"
    }, name), value.remark && /*#__PURE__*/React.createElement(QuestionCircle, {
      title: value.remark,
      style: {
        marginLeft: "4px"
      }
    })), /*#__PURE__*/React.createElement(_MenuOutlined, {
      className: "menu-icon"
    })) : /*#__PURE__*/React.createElement("div", {
      className: "header-item"
    }, /*#__PURE__*/React.createElement(_Checkbox, {
      onChange: function onChange(e) {
        return checkChange(e, value);
      },
      checked: value.isSelected
    }, /*#__PURE__*/React.createElement("span", {
      className: "label"
    }, name), value.remark && /*#__PURE__*/React.createElement(QuestionCircle, {
      title: value.remark,
      style: {
        marginLeft: "4px"
      }
    })), /*#__PURE__*/React.createElement(_MenuOutlined, {
      className: "menu-icon"
    }));
  });
  var SortableList = SortableContainer(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "header-lists"
    }, headerLists.sort(function (a, b) {
      return a["selectedIndex"] - b["selectedIndex"];
    }).map(function (quote, index) {
      return /*#__PURE__*/React.createElement(SortableItem, {
        key: quote[key],
        index: index,
        value: quote
      });
    }));
  });
  return /*#__PURE__*/React.createElement(_Modal, {
    visible: show,
    width: 720,
    title: title || "自定义展示设置",
    onCancel: handleCancel,
    destroyOnClose: true,
    centered: true,
    maskClosable: false,
    footer: /*#__PURE__*/React.createElement("div", {
      className: "custom-header-footer"
    }, /*#__PURE__*/React.createElement(_Checkbox, {
      key: "selectAll",
      checked: headerLists.every(function (i) {
        return i.isSelected;
      }),
      onChange: allSelectChange
    }, "\u5168\u9009"), /*#__PURE__*/React.createElement("div", {
      className: "button-group"
    }, /*#__PURE__*/React.createElement(_Button, {
      key: "default",
      type: "link",
      onClick: setDefaultTableColumns
    }, "\u6062\u590D\u9ED8\u8BA4"), /*#__PURE__*/React.createElement(_Button, {
      key: "cancel",
      type: "ghost",
      onClick: handleCancel
    }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(_Button, {
      key: "commit",
      type: "primary",
      onClick: submit
    }, "\u786E\u5B9A"))),
    className: "custom-header-modal"
  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Alert, {
    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.createElement("h3", null), /*#__PURE__*/React.createElement(SortableList, {
    distance: 5,
    onSortEnd: onDragEnd,
    axis: "xy",
    helperClass: "custom-header-drag-header-item"
  })));
};

export default CustomHeaderModal;