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

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

import _regeneratorRuntime from "@babel/runtime/regenerator";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import React, { memo, useContext, useEffect } from 'react';
import { runInAction } from 'mobx';
import { observer } from 'mobx-react-lite';
import map from 'lodash/map';
import isObject from 'lodash/isObject';
import isEnumEmpty from 'lodash/isEmpty';
import isArray from 'lodash/isArray';
import Icon from '../../../../../es/icon';
import Tag from '../../../../../es/tag';
import { getConfig } from '../../../../../es/configure';
import isSampleEmpty from '../../../_util/isEmpty';
import { $l } from '../../../locale-context';
import Button from '../../../button';
import Select from '../../../select';
import Modal from '../../../modal';
import CheckBox from '../../../check-box';
import TextField from '../../../text-field';
import { ValueChangeAction } from '../../../text-field/enum';
import Dropdown from '../../../dropdown';
import Menu from '../../../menu';
import Record from '../../../data-set/Record';
import { RecordStatus } from '../../../data-set/enum';
import { hide, show } from '../../../tooltip/singleton';
import isOverflow from '../../../overflow-tip/util';
import Store from './QuickFilterDataSet';
var modalKey = Modal.key();
/**
 * 判断查询值是否为空
 * @param value
 */

function isEmpty(value) {
  return isArray(value) ? !value.length : isSampleEmpty(value);
}
/**
 * 根据数据查找需要处理的字段对象
 * @param queryDataSet
 * @param data
 */


function findFieldObj(queryDataSet, data) {
  var keys = _toConsumableArray(queryDataSet.fields.keys());

  var name = data[0];
  var value = data[1];

  if (!keys.includes(data[0]) && isObject(data[1]) && !isEnumEmpty(data[1]) && !isArray(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 (isObject(data[1])) {
    return !isEnumEmpty(data[1]);
  }

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


var ModalContent = 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__*/
  _asyncToGenerator(
  /*#__PURE__*/
  _regeneratorRuntime.mark(function _callee() {
    var putData, statusKey, statusAdd, status, conditionData, hasValueFields, otherRecord, res;
    return _regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            putData = [];
            statusKey = getConfig('statusKey');
            statusAdd = getConfig('status').add;
            status = {};
            status[statusKey] = statusAdd;

            if (type !== 'edit') {
              conditionData = Object.entries(queryDataSet.current.toData());
              map(conditionData, function (data) {
                if (isSelect(data)) {
                  var fieldObj = findFieldObj(queryDataSet, data);

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

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


            if (type === 'save') {
              otherRecord = menuDataSet.current.clone();
              otherRecord.set('conditionList', putData);
              menuDataSet.current.reset();
              menuDataSet.create(_objectSpread({}, 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 = getConfig('proPrefixCls');
  return React.createElement(React.Fragment, null, React.createElement("div", {
    className: "".concat(prefixCls, "-filter-modal-item")
  }, React.createElement("div", {
    className: "".concat(proPrefixCls, "-form ").concat(proPrefixCls, "-field-label ").concat(proPrefixCls, "-field-required")
  }, $l('Table', 'filter_name')), React.createElement(TextField, {
    style: {
      width: '100%'
    },
    name: "searchName",
    placeholder: $l('Table', 'please_enter'),
    showLengthInfo: true,
    valueChangeAction: ValueChangeAction.input,
    dataSet: menuDataSet
  })), type !== 'edit' && React.createElement("div", {
    className: "".concat(prefixCls, "-filter-modal-item")
  }, React.createElement(CheckBox, {
    name: "defaultFlag",
    dataSet: menuDataSet
  }), React.createElement("span", {
    className: "".concat(proPrefixCls, "-form ").concat(proPrefixCls, "-field-label")
  }, $l('Table', 'set_default'))));
});
/**
 * 快速筛选下拉
 */

var QuickFilterMenu = observer(function QuickFilterMenu() {
  var _filterMenuDS$current3;

  var _useContext = useContext(Store),
      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({}, queryDataSet);
    runInAction(function () {
      queryDataSet.records.push(emptyRecord);
      queryDataSet.current = emptyRecord;
    });

    if (conditionList && conditionList.length) {
      map(conditionList, function (condition) {
        if (condition.comparator === 'EQUAL') {
          var fieldName = condition.fieldName,
              value = condition.value;
          queryDataSet.current.set(fieldName, value);
          onChange(fieldName);
          onOriginalChange(fieldName);
        }
      });
      onStatusChange(RecordStatus.sync, queryDataSet.current.toData());
    } else {
      onStatusChange(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(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 = _asyncToGenerator(
    /*#__PURE__*/
    _regeneratorRuntime.mark(function _callee2(searchId) {
      var result;
      return _regeneratorRuntime.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 = _asyncToGenerator(
    /*#__PURE__*/
    _regeneratorRuntime.mark(function _callee4(record) {
      var searchId, currentId, delRecord;
      return _regeneratorRuntime.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($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 $l('Table', 'save_filter');

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

      default:
        return $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.open({
      key: modalKey,
      closable: true,
      title: getTitle(type),
      children: React.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 = _asyncToGenerator(
    /*#__PURE__*/
    _regeneratorRuntime.mark(function _callee5() {
      var _filterMenuDS$current4;

      var conditionData, putData, res;
      return _regeneratorRuntime.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();
              map(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) || isObject(fieldObj.value) && isEnumEmpty(fieldObj.value)) {
                      conditionDataSet.remove(currentRecord);
                    } else {
                      currentRecord.set('value', fieldObj.value);
                    }
                  } else if (isSelect(data)) {
                    conditionDataSet.create({
                      fieldName: fieldObj.name,
                      value: fieldObj.value
                    });
                  }
                }
              });
              putData = [];
              map(selectFields, function (fieldName) {
                var value = queryDataSet.current.get(fieldName);
                var statusKey = getConfig('statusKey');
                var statusAdd = getConfig('status').add;
                var status = {};
                var toJSONFields = conditionDataSet.toJSONData().map(function (condition) {
                  return condition.fieldName;
                });
                status[statusKey] = statusAdd;

                if (!toJSONFields.includes(fieldName)) {
                  putData.push(_objectSpread({
                    comparator: 'EQUAL',
                    fieldName: fieldName,
                    value: value
                  }, status));
                }
              });
              menuDataSet.current.set('conditionList', _objectSpread({}, 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');
  }

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

  var setDefaultFlag =
  /*#__PURE__*/
  function () {
    var _ref4 = _asyncToGenerator(
    /*#__PURE__*/
    _regeneratorRuntime.mark(function _callee3(defaultFlag, record) {
      var currentRecord, res, result;
      return _regeneratorRuntime.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.createElement(Menu, {
      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.createElement(Menu.Item, {
      key: 'filter_default'
    }, (record === null || record === void 0 ? void 0 : record.get('defaultFlag')) ? $l('Table', 'cancel_default') : $l('Table', 'set_default')), React.createElement(Menu.Item, {
      key: 'filter_rename'
    }, $l('Table', 'rename')), React.createElement(Menu.Item, {
      key: 'filter_delete'
    }, React.createElement("span", {
      style: {
        color: '#F13131'
      }
    }, $l('Table', 'delete_button'))));
    return React.createElement("div", {
      className: "".concat(prefixCls, "-filter-menu-option")
    }, React.createElement("span", {
      className: "".concat(prefixCls, "-filter-menu-option-content"),
      onMouseEnter: function onMouseEnter(e) {
        var currentTarget = e.currentTarget;

        if (isOverflow(currentTarget)) {
          show(currentTarget, {
            title: text
          });
        }
      },
      // @ts-ignore
      onMouseLeave: hide
    }, text, isDefault && React.createElement(Tag, null, $l('Table', 'default_flag'))), isSelected && React.createElement("div", {
      className: "".concat(prefixCls, "-filter-menu-option-selected")
    }, React.createElement(Icon, {
      type: "check"
    })), React.createElement("div", {
      className: "".concat(prefixCls, "-filter-menu-option-icons")
    }, React.createElement(Dropdown, {
      overlay: menu
    }, React.createElement("span", {
      style: {
        userSelect: 'none'
      }
    }, React.createElement(Icon, {
      type: "more_horiz"
    })))));
  };

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