choerodon-ui/pro/lib/table/query-bar/quick-filter/QuickFilterMenu.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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

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

var _mobx = require("mobx");

var _mobxReactLite = require("mobx-react-lite");

var _map = _interopRequireDefault(require("lodash/map"));

var _isObject = _interopRequireDefault(require("lodash/isObject"));

var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));

var _isArray = _interopRequireDefault(require("lodash/isArray"));

var _icon = _interopRequireDefault(require("../../../../../lib/icon"));

var _tag = _interopRequireDefault(require("../../../../../lib/tag"));

var _configure = require("../../../../../lib/configure");

var _isEmpty2 = _interopRequireDefault(require("../../../_util/isEmpty"));

var _localeContext = require("../../../locale-context");

var _button = _interopRequireDefault(require("../../../button"));

var _select = _interopRequireDefault(require("../../../select"));

var _modal = _interopRequireDefault(require("../../../modal"));

var _checkBox = _interopRequireDefault(require("../../../check-box"));

var _textField = _interopRequireDefault(require("../../../text-field"));

var _enum = require("../../../text-field/enum");

var _dropdown = _interopRequireDefault(require("../../../dropdown"));

var _menu = _interopRequireDefault(require("../../../menu"));

var _Record = _interopRequireDefault(require("../../../data-set/Record"));

var _enum2 = require("../../../data-set/enum");

var _singleton = require("../../../tooltip/singleton");

var _util = _interopRequireDefault(require("../../../overflow-tip/util"));

var _QuickFilterDataSet = _interopRequireDefault(require("./QuickFilterDataSet"));

var modalKey = _modal["default"].key();
/**
 * 判断查询值是否为空
 * @param value
 */


function isEmpty(value) {
  return (0, _isArray["default"])(value) ? !value.length : (0, _isEmpty2["default"])(value);
}
/**
 * 根据数据查找需要处理的字段对象
 * @param queryDataSet
 * @param data
 */


function findFieldObj(queryDataSet, data) {
  var keys = (0, _toConsumableArray2["default"])(queryDataSet.fields.keys());
  var name = data[0];
  var value = data[1];

  if (!keys.includes(data[0]) && (0, _isObject["default"])(data[1]) && !(0, _isEmpty["default"])(data[1]) && !(0, _isArray["default"])(data[1])) {
    name = "".concat(data[0], ".").concat(Object.keys(data[1])[0]);
    value = Object.values(data[1])[0];
  }

  if (queryDataSet.getField(name) && queryDataSet.getField(name).get('ignore') !== 'always') {
    return {
      name: name,
      value: value
    };
  }
}
/**
 * 当前数据是否有值并需要选中
 * @param data
 */


function isSelect(data) {
  if ((0, _isObject["default"])(data[1])) {
    return !(0, _isEmpty["default"])(data[1]);
  }

  return data[0] !== '__dirty' && !isEmpty(data[1]);
}
/**
 * 编辑/新建筛选弹窗
 * @param prefixCls
 * @param modal
 * @param menuDataSet
 * @param queryDataSet
 * @param onLocateData
 * @constructor
 */


var ModalContent = (0, _react.memo)(function ModalContent(_ref) {
  var prefixCls = _ref.prefixCls,
      modal = _ref.modal,
      menuDataSet = _ref.menuDataSet,
      queryDataSet = _ref.queryDataSet,
      onLoadData = _ref.onLoadData,
      type = _ref.type,
      selectFields = _ref.selectFields;
  modal.handleOk(
  /*#__PURE__*/
  (0, _asyncToGenerator2["default"])(
  /*#__PURE__*/
  _regenerator["default"].mark(function _callee() {
    var putData, statusKey, statusAdd, status, conditionData, hasValueFields, otherRecord, res;
    return _regenerator["default"].wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            putData = [];
            statusKey = (0, _configure.getConfig)('statusKey');
            statusAdd = (0, _configure.getConfig)('status').add;
            status = {};
            status[statusKey] = statusAdd;

            if (type !== 'edit') {
              conditionData = Object.entries(queryDataSet.current.toData());
              (0, _map["default"])(conditionData, function (data) {
                if (isSelect(data)) {
                  var fieldObj = findFieldObj(queryDataSet, data);

                  if (fieldObj === null || fieldObj === void 0 ? void 0 : fieldObj.name) {
                    putData.push((0, _objectSpread2["default"])({
                      comparator: 'EQUAL',
                      fieldName: fieldObj.name,
                      value: fieldObj.value
                    }, status));
                  }
                }
              }); // 加入空值勾选字段

              hasValueFields = putData.map(function (pt) {
                return pt.fieldName;
              });
              (0, _map["default"])(selectFields, function (fieldName) {
                if (!hasValueFields.includes(fieldName)) {
                  var value = queryDataSet.current.get(fieldName);
                  putData.push((0, _objectSpread2["default"])({
                    comparator: 'EQUAL',
                    fieldName: fieldName,
                    value: value
                  }, status));
                }
              });
            } // 另存为


            if (type === 'save') {
              otherRecord = menuDataSet.current.clone();
              otherRecord.set('conditionList', putData);
              menuDataSet.current.reset();
              menuDataSet.create((0, _objectSpread2["default"])({}, otherRecord.toData(), {
                searchId: undefined
              })); // 新建
            } else if (type === 'create') {
              menuDataSet.current.set('conditionList', putData);
            }

            _context.next = 9;
            return menuDataSet.submit();

          case 9:
            res = _context.sent;

            if (!(res && res.success)) {
              _context.next = 13;
              break;
            }

            onLoadData(res.content ? res.content[0].searchId : undefined);
            return _context.abrupt("return", true);

          case 13:
            return _context.abrupt("return", !(res && res.failed || !res));

          case 14:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })));
  modal.handleCancel(function () {
    menuDataSet.current.reset();
  });
  var proPrefixCls = (0, _configure.getConfig)('proPrefixCls');
  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("div", {
    className: "".concat(prefixCls, "-filter-modal-item")
  }, _react["default"].createElement("div", {
    className: "".concat(proPrefixCls, "-form ").concat(proPrefixCls, "-field-label ").concat(proPrefixCls, "-field-required")
  }, (0, _localeContext.$l)('Table', 'filter_name')), _react["default"].createElement(_textField["default"], {
    style: {
      width: '100%'
    },
    name: "searchName",
    placeholder: (0, _localeContext.$l)('Table', 'please_enter'),
    showLengthInfo: true,
    valueChangeAction: _enum.ValueChangeAction.input,
    dataSet: menuDataSet
  })), type !== 'edit' && _react["default"].createElement("div", {
    className: "".concat(prefixCls, "-filter-modal-item")
  }, _react["default"].createElement(_checkBox["default"], {
    name: "defaultFlag",
    dataSet: menuDataSet
  }), _react["default"].createElement("span", {
    className: "".concat(proPrefixCls, "-form ").concat(proPrefixCls, "-field-label")
  }, (0, _localeContext.$l)('Table', 'set_default'))));
});
/**
 * 快速筛选下拉
 */

var QuickFilterMenu = (0, _mobxReactLite.observer)(function QuickFilterMenu() {
  var _filterMenuDS$current3;

  var _useContext = (0, _react.useContext)(_QuickFilterDataSet["default"]),
      autoQuery = _useContext.autoQuery,
      dataSet = _useContext.dataSet,
      menuDataSet = _useContext.menuDataSet,
      prefixCls = _useContext.prefixCls,
      queryDataSet = _useContext.queryDataSet,
      filterMenuDS = _useContext.filterMenuDS,
      conditionDataSet = _useContext.conditionDataSet,
      onChange = _useContext.onChange,
      conditionStatus = _useContext.conditionStatus,
      onStatusChange = _useContext.onStatusChange,
      selectFields = _useContext.selectFields,
      onOriginalChange = _useContext.onOriginalChange;

  var optionDs = filterMenuDS.getField('filterName').get('options');
  /**
   * queryDS 筛选赋值并更新初始勾选项
   */

  var conditionAssign = function conditionAssign() {
    onOriginalChange();

    var _menuDataSet$current$ = menuDataSet.current.toData(),
        conditionList = _menuDataSet$current$.conditionList;

    var emptyRecord = new _Record["default"]({}, queryDataSet);
    (0, _mobx.runInAction)(function () {
      queryDataSet.records.push(emptyRecord);
      queryDataSet.current = emptyRecord;
    });

    if (conditionList && conditionList.length) {
      (0, _map["default"])(conditionList, function (condition) {
        if (condition.comparator === 'EQUAL') {
          var fieldName = condition.fieldName,
              value = condition.value;
          queryDataSet.current.set(fieldName, value);
          onChange(fieldName);
          onOriginalChange(fieldName);
        }
      });
      onStatusChange(_enum2.RecordStatus.sync, queryDataSet.current.toData());
    } else {
      onStatusChange(_enum2.RecordStatus.sync);

      if (autoQuery) {
        dataSet.query();
      }
    }
  };

  function handleQueryReset() {
    var _filterMenuDS$current;

    if ((_filterMenuDS$current = filterMenuDS.current) === null || _filterMenuDS$current === void 0 ? void 0 : _filterMenuDS$current.get('filterName')) {
      // 筛选项重置重新赋值
      conditionAssign();
    } else {
      /**
       * 未选择或清除筛选项
       * 重置初始勾选项及初始赋值
       */
      onOriginalChange();
      queryDataSet.removeAll();
      queryDataSet.create({});

      if (autoQuery) {
        dataSet.query();
      }
    }

    onStatusChange(_enum2.RecordStatus.sync);
  }
  /**
   * 定位数据源
   * @param searchId
   */


  var locateData = function locateData(searchId) {
    if (searchId) {
      menuDataSet.locate(menuDataSet.findIndex(function (menu) {
        return menu.get('searchId').toString() === searchId.toString();
      }));
      conditionDataSet.loadData(menuDataSet.current.get('conditionList'));
      if (filterMenuDS.current) filterMenuDS.current.set('filterName', searchId);
      conditionAssign();
    } else if (searchId === null) {
      handleQueryReset();
    } else {
      var defaultMenu = menuDataSet.findIndex(function (menu) {
        return menu.get('defaultFlag');
      });

      if (defaultMenu !== -1) {
        menuDataSet.locate(defaultMenu);
        conditionDataSet.loadData(menuDataSet.current.get('conditionList'));
        if (filterMenuDS.current) filterMenuDS.current.set('filterName', menuDataSet.current.get('searchId'));
        conditionAssign();
      } else {
        if (filterMenuDS.current) filterMenuDS.current.set('filterName', undefined);
        queryDataSet.reset();
        queryDataSet.create({});
      }
    }
  };
  /**
   * 加载筛选数据并赋值查询
   * @param searchId
   */


  var loadData =
  /*#__PURE__*/
  function () {
    var _ref3 = (0, _asyncToGenerator2["default"])(
    /*#__PURE__*/
    _regenerator["default"].mark(function _callee2(searchId) {
      var result;
      return _regenerator["default"].wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              _context2.next = 2;
              return menuDataSet.query();

            case 2:
              result = _context2.sent;
              optionDs.loadData(result);
              conditionDataSet.loadData(menuDataSet.current.get('conditionList'));

              if (result && result.length) {
                locateData(searchId);
              } else {
                if (filterMenuDS.current) filterMenuDS.current.set('filterName', undefined);
                locateData();

                if (dataSet.props.autoQuery) {
                  dataSet.query();
                }
              }

            case 6:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));

    return function loadData(_x) {
      return _ref3.apply(this, arguments);
    };
  }();

  function handleChange(value) {
    locateData(value);
  }
  /**
   * 删除该条筛选
   * @param record 下拉数据源
   */


  function handleDelete(_x2) {
    return _handleDelete.apply(this, arguments);
  }

  function _handleDelete() {
    _handleDelete = (0, _asyncToGenerator2["default"])(
    /*#__PURE__*/
    _regenerator["default"].mark(function _callee4(record) {
      var searchId, currentId, delRecord;
      return _regenerator["default"].wrap(function _callee4$(_context4) {
        while (1) {
          switch (_context4.prev = _context4.next) {
            case 0:
              searchId = record.get('searchId');

              if (menuDataSet.current) {
                currentId = menuDataSet.current.get('searchId').toString();
                searchId = record.get('searchId').toString() === currentId ? undefined : currentId;
              }

              delRecord = menuDataSet.find(function (menu) {
                return menu.get('searchId').toString() === record.get('searchId').toString();
              });
              _context4.next = 5;
              return menuDataSet["delete"](delRecord, "".concat((0, _localeContext.$l)('Table', 'whether_delete_filter'), "\uFF1A").concat(record.get('searchName'), "\uFF1F"));

            case 5:
              loadData(searchId);

            case 6:
            case "end":
              return _context4.stop();
          }
        }
      }, _callee4);
    }));
    return _handleDelete.apply(this, arguments);
  }

  function getTitle(type) {
    switch (type) {
      case 'create':
        return (0, _localeContext.$l)('Table', 'save_filter');

      case 'edit':
        return (0, _localeContext.$l)('Table', 'filter_rename');

      default:
        return (0, _localeContext.$l)('Table', 'save_filter_as');
    }
  }

  function openModal(type, searchId) {
    if (searchId) {
      menuDataSet.locate(menuDataSet.findIndex(function (menu) {
        return menu.get('searchId').toString() === searchId.toString();
      }));
      conditionDataSet.loadData(menuDataSet.current.get('conditionList'));
    }

    _modal["default"].open({
      key: modalKey,
      closable: true,
      title: getTitle(type),
      children: _react["default"].createElement(ModalContent, {
        prefixCls: prefixCls,
        type: type,
        menuDataSet: menuDataSet,
        conditionDataSet: conditionDataSet,
        onLoadData: loadData,
        queryDataSet: queryDataSet,
        selectFields: selectFields
      }),
      okFirst: false,
      destroyOnClose: true
    });
  }

  function handleSave() {
    return _handleSave.apply(this, arguments);
  }

  function _handleSave() {
    _handleSave = (0, _asyncToGenerator2["default"])(
    /*#__PURE__*/
    _regenerator["default"].mark(function _callee5() {
      var _filterMenuDS$current4;

      var conditionData, putData, res;
      return _regenerator["default"].wrap(function _callee5$(_context5) {
        while (1) {
          switch (_context5.prev = _context5.next) {
            case 0:
              if ((_filterMenuDS$current4 = filterMenuDS.current) === null || _filterMenuDS$current4 === void 0 ? void 0 : _filterMenuDS$current4.get('filterName')) {
                _context5.next = 5;
                break;
              }

              menuDataSet.create({});
              openModal('create');
              _context5.next = 15;
              break;

            case 5:
              conditionData = Object.entries(queryDataSet.current.toData());
              conditionDataSet.reset();
              (0, _map["default"])(conditionData, function (data) {
                var fieldObj = findFieldObj(queryDataSet, data);

                if (fieldObj === null || fieldObj === void 0 ? void 0 : fieldObj.name) {
                  var currentRecord = conditionDataSet.find(function (record) {
                    return record.get('fieldName') === fieldObj.name;
                  });

                  if (currentRecord) {
                    if (isEmpty(fieldObj.value) || (0, _isObject["default"])(fieldObj.value) && (0, _isEmpty["default"])(fieldObj.value)) {
                      conditionDataSet.remove(currentRecord);
                    } else {
                      currentRecord.set('value', fieldObj.value);
                    }
                  } else if (isSelect(data)) {
                    conditionDataSet.create({
                      fieldName: fieldObj.name,
                      value: fieldObj.value
                    });
                  }
                }
              });
              putData = [];
              (0, _map["default"])(selectFields, function (fieldName) {
                var value = queryDataSet.current.get(fieldName);
                var statusKey = (0, _configure.getConfig)('statusKey');
                var statusAdd = (0, _configure.getConfig)('status').add;
                var status = {};
                var toJSONFields = conditionDataSet.toJSONData().map(function (condition) {
                  return condition.fieldName;
                });
                status[statusKey] = statusAdd;

                if (!toJSONFields.includes(fieldName)) {
                  putData.push((0, _objectSpread2["default"])({
                    comparator: 'EQUAL',
                    fieldName: fieldName,
                    value: value
                  }, status));
                }
              });
              menuDataSet.current.set('conditionList', (0, _objectSpread2["default"])({}, conditionDataSet.toJSONData(), {}, putData));
              _context5.next = 13;
              return menuDataSet.submit();

            case 13:
              res = _context5.sent;

              if (res && res.success) {
                loadData(res.content ? res.content[0].searchId : undefined);
              }

            case 15:
            case "end":
              return _context5.stop();
          }
        }
      }, _callee5);
    }));
    return _handleSave.apply(this, arguments);
  }

  function handleEdit(record) {
    openModal('edit', record.get('searchId'));
  }

  function handleSaveOther() {
    menuDataSet.current.set('searchName', '');
    menuDataSet.current.getField('searchName').validator.reset();
    openModal('save');
  }

  (0, _react.useEffect)(function () {
    loadData();
  }, []);
  /**
   * 默认设置
   * @param defaultFlag
   * @param record
   */

  var setDefaultFlag =
  /*#__PURE__*/
  function () {
    var _ref4 = (0, _asyncToGenerator2["default"])(
    /*#__PURE__*/
    _regenerator["default"].mark(function _callee3(defaultFlag, record) {
      var currentRecord, res, result;
      return _regenerator["default"].wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              record.set('defaultFlag', defaultFlag);
              currentRecord = menuDataSet.find(function (menu) {
                return menu.get('searchId').toString() === record.get('searchId').toString();
              });
              currentRecord.set('defaultFlag', defaultFlag);
              _context3.next = 5;
              return menuDataSet.submit();

            case 5:
              res = _context3.sent;
              _context3.next = 8;
              return menuDataSet.query();

            case 8:
              result = _context3.sent;
              optionDs.loadData(result);

              if (res && res.failed || !res) {
                record.reset();
                currentRecord.reset();
              }

            case 11:
            case "end":
              return _context3.stop();
          }
        }
      }, _callee3);
    }));

    return function setDefaultFlag(_x3, _x4) {
      return _ref4.apply(this, arguments);
    };
  }();
  /**
   * 渲染下拉选项
   * @param record
   * @param text
   */


  var optionRenderer = function optionRenderer(_ref5) {
    var _filterMenuDS$current2, _record$get;

    var record = _ref5.record,
        text = _ref5.text;
    var isSelected = ((_filterMenuDS$current2 = filterMenuDS.current.get('filterName')) === null || _filterMenuDS$current2 === void 0 ? void 0 : _filterMenuDS$current2.toString()) === ((_record$get = record.get('searchId')) === null || _record$get === void 0 ? void 0 : _record$get.toString());
    var isDefault = record.get('defaultFlag') === 1;

    var menu = _react["default"].createElement(_menu["default"], {
      onClick: function onClick(_ref6) {
        var key = _ref6.key,
            domEvent = _ref6.domEvent;
        domEvent.preventDefault();
        domEvent.stopPropagation();

        if (key === 'filter_default') {
          setDefaultFlag((record === null || record === void 0 ? void 0 : record.get('defaultFlag')) ? 0 : 1, record);
        } else if (key === 'filter_rename') {
          handleEdit(record);
        } else {
          handleDelete(record);
        }
      }
    }, _react["default"].createElement(_menu["default"].Item, {
      key: 'filter_default'
    }, (record === null || record === void 0 ? void 0 : record.get('defaultFlag')) ? (0, _localeContext.$l)('Table', 'cancel_default') : (0, _localeContext.$l)('Table', 'set_default')), _react["default"].createElement(_menu["default"].Item, {
      key: 'filter_rename'
    }, (0, _localeContext.$l)('Table', 'rename')), _react["default"].createElement(_menu["default"].Item, {
      key: 'filter_delete'
    }, _react["default"].createElement("span", {
      style: {
        color: '#F13131'
      }
    }, (0, _localeContext.$l)('Table', 'delete_button'))));

    return _react["default"].createElement("div", {
      className: "".concat(prefixCls, "-filter-menu-option")
    }, _react["default"].createElement("span", {
      className: "".concat(prefixCls, "-filter-menu-option-content"),
      onMouseEnter: function onMouseEnter(e) {
        var currentTarget = e.currentTarget;

        if ((0, _util["default"])(currentTarget)) {
          (0, _singleton.show)(currentTarget, {
            title: text
          });
        }
      },
      // @ts-ignore
      onMouseLeave: _singleton.hide
    }, text, isDefault && _react["default"].createElement(_tag["default"], null, (0, _localeContext.$l)('Table', 'default_flag'))), isSelected && _react["default"].createElement("div", {
      className: "".concat(prefixCls, "-filter-menu-option-selected")
    }, _react["default"].createElement(_icon["default"], {
      type: "check"
    })), _react["default"].createElement("div", {
      className: "".concat(prefixCls, "-filter-menu-option-icons")
    }, _react["default"].createElement(_dropdown["default"], {
      overlay: menu
    }, _react["default"].createElement("span", {
      style: {
        userSelect: 'none'
      }
    }, _react["default"].createElement(_icon["default"], {
      type: "more_horiz"
    })))));
  };

  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_select["default"], {
    isFlat: true,
    placeholder: (0, _localeContext.$l)('Table', 'fast_filter'),
    className: "".concat(prefixCls, "-filterName-select"),
    dataSet: filterMenuDS,
    name: "filterName",
    dropdownMatchSelectWidth: false,
    dropdownMenuStyle: {
      width: '1.72rem'
    },
    optionRenderer: optionRenderer,
    onChange: handleChange,
    notFoundContent: (0, _localeContext.$l)('Table', 'no_save_filter')
  }), conditionStatus === _enum2.RecordStatus.update ? _react["default"].createElement(_tag["default"], {
    className: "".concat(prefixCls, "-filter-status")
  }, _react["default"].createElement("span", null, (0, _localeContext.$l)('Table', 'modified'))) : null, conditionStatus === _enum2.RecordStatus.update && _react["default"].createElement("div", {
    className: "".concat(prefixCls, "-filter-buttons")
  }, ((_filterMenuDS$current3 = filterMenuDS.current) === null || _filterMenuDS$current3 === void 0 ? void 0 : _filterMenuDS$current3.get('filterName')) && _react["default"].createElement(_button["default"], {
    onClick: handleSaveOther
  }, (0, _localeContext.$l)('Table', 'save_as')), _react["default"].createElement(_button["default"], {
    onClick: handleSave
  }, (0, _localeContext.$l)('Table', 'save_button')), _react["default"].createElement(_button["default"], {
    onClick: handleQueryReset
  }, (0, _localeContext.$l)('Table', 'reset_button'))));
});
QuickFilterMenu.displayName = 'QuickFilterMenu';
var _default = QuickFilterMenu;
exports["default"] = _default;
//# sourceMappingURL=QuickFilterMenu.js.map