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

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

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _regeneratorRuntime from "@babel/runtime/regenerator";
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 noop from 'lodash/noop';
import omit from 'lodash/omit';
import ConfigContext from '../../../../../es/config-provider/ConfigContext';
import Icon from '../../../../../es/icon';
import Tag from '../../../../../es/tag';
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 { isEqualDynamicProps, omitData, parseValue, stringifyValue, SELECTFIELDS } from '../TableDynamicFilterBar';
import Store from './QuickFilterMenuContext';
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 name = data[0];
  var value = data[1];

  if (!queryDataSet.fields.has(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];
  }

  var field = queryDataSet.getField(name);

  if (field && field.get('lovCode')) {
    var _value;

    var textField = field.get('textField');
    var valueField = field.get('valueField');
    return {
      name: name,
      value: (_value = {}, _defineProperty(_value, valueField, value[valueField]), _defineProperty(_value, textField, value[textField]), _value)
    };
  }

  if (field && field.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 = 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;

  var _useContext = useContext(ConfigContext),
      getConfig = _useContext.getConfig;

  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(omit(queryDataSet.current.toData(), ['__dirty']));
              map(conditionData, function (data) {
                if (isSelect(data)) {
                  var fieldObj = findFieldObj(queryDataSet, data);

                  if (fieldObj && fieldObj.name) {
                    putData.push(_objectSpread({
                      comparator: 'EQUAL',
                      fieldName: fieldObj.name,
                      value: stringifyValue(fieldObj.value)
                    }, status));
                  }
                }
              });
              hasValueFields = putData.map(function (pt) {
                return pt.fieldName;
              });
              map(selectFields, function (fieldName) {
                var value = queryDataSet.current.get(fieldName); // 加入空值勾选字段

                if (!hasValueFields.includes(fieldName)) {
                  putData.push(_objectSpread({
                    comparator: 'EQUAL',
                    fieldName: fieldName,
                    value: stringifyValue(value)
                  }, status));
                }
              });
            } // 另存为


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

ModalContent.displayName = 'ModalContent';
var MemoModalContent = /*#__PURE__*/memo(ModalContent);
/**
 * 快速筛选下拉
 */

var QuickFilterMenu = function QuickFilterMenu() {
  var _useContext2 = useContext(ConfigContext),
      getConfig = _useContext2.getConfig;

  var _useContext3 = useContext(Store),
      autoQuery = _useContext3.autoQuery,
      dataSet = _useContext3.dataSet,
      menuDataSet = _useContext3.menuDataSet,
      prefixCls = _useContext3.prefixCls,
      queryDataSet = _useContext3.queryDataSet,
      filterMenuDataSet = _useContext3.filterMenuDataSet,
      conditionDataSet = _useContext3.conditionDataSet,
      _useContext3$onChange = _useContext3.onChange,
      onChange = _useContext3$onChange === void 0 ? noop : _useContext3$onChange,
      conditionStatus = _useContext3.conditionStatus,
      _useContext3$onStatus = _useContext3.onStatusChange,
      onStatusChange = _useContext3$onStatus === void 0 ? noop : _useContext3$onStatus,
      selectFields = _useContext3.selectFields,
      _useContext3$onOrigin = _useContext3.onOriginalChange,
      onOriginalChange = _useContext3$onOrigin === void 0 ? noop : _useContext3$onOrigin,
      optionDataSet = _useContext3.optionDataSet,
      shouldLocateData = _useContext3.shouldLocateData;
  /**
   * queryDS 筛选赋值并更新初始勾选项
   * @param init
   */


  var conditionAssign = function conditionAssign(init) {
    onOriginalChange();
    var current = menuDataSet.current;
    var shouldQuery = false;

    if (current) {
      var conditionList = current.get('conditionList');
      var initData = {};
      var currentQueryRecord = queryDataSet.current;

      if (conditionList && conditionList.length) {
        map(conditionList, function (condition) {
          if (condition.comparator === 'EQUAL') {
            var fieldName = condition.fieldName,
                value = condition.value;
            initData[fieldName] = parseValue(value);
            onChange(fieldName);
          }
        });
        onOriginalChange(Object.keys(initData));
        var emptyRecord = new Record(_objectSpread({}, initData), queryDataSet);
        dataSet.setState(SELECTFIELDS, Object.keys(initData));
        shouldQuery = !isEqualDynamicProps(initData, currentQueryRecord ? omit(currentQueryRecord.toData(true), ['__dirty']) : {}, queryDataSet, currentQueryRecord);
        runInAction(function () {
          queryDataSet.records.push(emptyRecord);
          queryDataSet.current = emptyRecord;
        });
        onStatusChange(RecordStatus.sync, emptyRecord.toData());
      } else {
        shouldQuery = !isEqualDynamicProps(initData, currentQueryRecord ? omit(currentQueryRecord.toData(true), ['__dirty']) : {}, queryDataSet, currentQueryRecord);

        var _emptyRecord = new Record({}, queryDataSet);

        dataSet.setState(SELECTFIELDS, []);
        runInAction(function () {
          queryDataSet.records.push(_emptyRecord);
          queryDataSet.current = _emptyRecord;
        });
        onStatusChange(RecordStatus.sync);
      }

      if (!init && shouldQuery && autoQuery) {
        dataSet.query();
      }
    }
  };

  var handleQueryReset = function handleQueryReset() {
    if (filterMenuDataSet && filterMenuDataSet.current && filterMenuDataSet.current.get('filterName')) {
      // 筛选项重置重新赋值
      conditionAssign();
    } else {
      /**
       * 未选择或清除筛选项
       * 重置初始勾选项及初始赋值
       */
      queryDataSet.locate(0);
      var first = queryDataSet.get(0);

      if (first) {
        first.reset();
      }

      onOriginalChange();

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

    onStatusChange(RecordStatus.sync);
  };
  /**
   * 定位数据源
   * @param searchId
   * @param init 初始化
   */


  var locateData = function locateData(searchId, init) {
    var current = filterMenuDataSet.current;

    if (searchId) {
      menuDataSet.locate(menuDataSet.findIndex(function (menu) {
        return menu.get('searchId').toString() === searchId.toString();
      }));
      var menuRecord = menuDataSet.current;

      if (menuRecord) {
        conditionDataSet.loadData(menuRecord.get('conditionList'));
      }

      if (current) {
        current.set('filterName', searchId);
      }

      conditionAssign(init);
    } else if (searchId === null) {
      handleQueryReset();
    } else {
      var defaultMenu = menuDataSet.findIndex(function (menu) {
        return menu.get('defaultFlag');
      });

      if (defaultMenu !== -1) {
        menuDataSet.locate(defaultMenu);
        var _menuRecord = menuDataSet.current;

        if (_menuRecord) {
          conditionDataSet.loadData(_menuRecord.get('conditionList'));

          if (current) {
            current.set('filterName', _menuRecord.get('searchId'));
          }
        }

        conditionAssign(init);
      } else if (current) {
        current.set('filterName', undefined);
      }
    }
  };
  /**
   * 加载筛选数据并赋值查询
   * @param searchId
   */


  var loadData = /*#__PURE__*/function () {
    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(searchId) {
      var result, menuRecord, current;
      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;

              if (optionDataSet) {
                optionDataSet.loadData(result);
              }

              menuRecord = menuDataSet.current;

              if (menuRecord) {
                conditionDataSet.loadData(menuRecord.get('conditionList'));
              }

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

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

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

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

  var handleChange = function handleChange(value) {
    var current = queryDataSet.current;

    if (current) {
      current.reset();
    }

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


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

  function _handleDelete() {
    _handleDelete = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(record) {
      var searchId, menuRecord, currentId, delRecord;
      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
        while (1) {
          switch (_context5.prev = _context5.next) {
            case 0:
              searchId = record.get('searchId');
              menuRecord = menuDataSet.current;

              if (menuRecord) {
                currentId = menuRecord.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();
              });
              _context5.next = 6;
              return menuDataSet["delete"](delRecord, "".concat($l('Table', 'whether_delete_filter'), "\uFF1A").concat(record.get('searchName'), "\uFF1F"));

            case 6:
              loadData(searchId);

            case 7:
            case "end":
              return _context5.stop();
          }
        }
      }, _callee5);
    }));
    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();
      }));
      var menuRecord = menuDataSet.current;

      if (menuRecord) {
        conditionDataSet.loadData(menuRecord.get('conditionList'));
      }
    }

    Modal.open({
      key: modalKey,
      closable: true,
      title: getTitle(type),
      children: /*#__PURE__*/React.createElement(MemoModalContent, {
        prefixCls: prefixCls,
        type: type,
        menuDataSet: menuDataSet,
        conditionDataSet: conditionDataSet,
        onLoadData: loadData,
        queryDataSet: queryDataSet,
        selectFields: selectFields
      }),
      okFirst: false,
      destroyOnClose: true
    });
  }

  var handleSave = /*#__PURE__*/function () {
    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
      var filterMenuRecord, current, conditionData, putData, menuRecord, res;
      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              filterMenuRecord = filterMenuDataSet ? filterMenuDataSet.current : undefined;

              if (!((!filterMenuRecord || !filterMenuRecord.get('filterName')) && menuDataSet)) {
                _context3.next = 6;
                break;
              }

              menuDataSet.create({});
              openModal('create');
              _context3.next = 23;
              break;

            case 6:
              current = queryDataSet.current;

              if (!(current && conditionDataSet)) {
                _context3.next = 22;
                break;
              }

              conditionData = Object.entries(omit(current.toData(), ['__dirty']));
              conditionDataSet.reset();
              conditionDataSet.map(function (record) {
                if (!selectFields || !selectFields.includes(record.get('fieldName'))) {
                  conditionDataSet.remove(record);
                }

                return null;
              });
              map(conditionData, function (data) {
                var fieldObj = findFieldObj(queryDataSet, data);

                if (fieldObj) {
                  var name = fieldObj.name;

                  if (name) {
                    var currentRecord = conditionDataSet.find(function (record) {
                      return record.get('fieldName') === name;
                    });

                    if (currentRecord) {
                      currentRecord.set('value', fieldObj.value);
                    } else if (isSelect(data)) {
                      conditionDataSet.create({
                        fieldName: name,
                        value: fieldObj.value
                      });
                    }
                  }
                }
              });
              putData = [];
              map(selectFields, function (fieldName) {
                var value = 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));
                }
              });
              menuRecord = menuDataSet.current;

              if (menuRecord) {
                menuRecord.set('conditionList', [].concat(_toConsumableArray(conditionDataSet.toJSONData()), putData));
              }

              _context3.next = 18;
              return menuDataSet.submit();

            case 18:
              res = _context3.sent;

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

              _context3.next = 23;
              break;

            case 22:
              dataSet.query();

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

    return function handleSave() {
      return _ref4.apply(this, arguments);
    };
  }();
  /**
   * 重命名，定位到重命名记录
   * @param record
   */


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

  var handleSaveOther = function handleSaveOther() {
    var current = menuDataSet.current;

    if (current) {
      var searchName = current.get('searchName');
      current.set('searchName', "".concat(searchName, "_copy"));
    }

    openModal('save');
  };

  useEffect(function () {
    if (shouldLocateData) {
      locateData(undefined, true);
    }
  }, [shouldLocateData]);
  /**
   * 默认设置
   * @param defaultFlag
   * @param record
   */

  var setDefaultFlag = /*#__PURE__*/function () {
    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(defaultFlag, record) {
      var currentRecord, res, result;
      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
        while (1) {
          switch (_context4.prev = _context4.next) {
            case 0:
              record.set('defaultFlag', defaultFlag);
              currentRecord = menuDataSet.find(function (menu) {
                return menu.get('searchId').toString() === record.get('searchId').toString();
              });

              if (currentRecord) {
                currentRecord.set('defaultFlag', defaultFlag);
              }

              _context4.next = 5;
              return menuDataSet.submit();

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

            case 8:
              result = _context4.sent;

              if (optionDataSet) {
                optionDataSet.loadData(result);
              }

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

                if (currentRecord) {
                  currentRecord.reset();
                }
              }

            case 11:
            case "end":
              return _context4.stop();
          }
        }
      }, _callee4);
    }));

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


  var optionRenderer = function optionRenderer(_ref6) {
    var record = _ref6.record,
        text = _ref6.text;
    var filterMenuRecord = filterMenuDataSet.current;
    var isSelected = String(filterMenuRecord && filterMenuRecord.get('filterName')) === String(record.get('searchId'));
    var isDefault = record.get('defaultFlag') === 1;
    var menu = /*#__PURE__*/React.createElement(Menu, {
      onClick: function onClick(_ref7) {
        var key = _ref7.key,
            domEvent = _ref7.domEvent;
        domEvent.preventDefault();
        domEvent.stopPropagation();

        if (key === 'filter_default') {
          setDefaultFlag(record.get('defaultFlag') ? 0 : 1, record);
        } else if (key === 'filter_rename') {
          handleEdit(record);
        } else {
          handleDelete(record);
        }
      }
    }, /*#__PURE__*/React.createElement(Menu.Item, {
      key: 'filter_default'
    }, record.get('defaultFlag') ? $l('Table', 'cancel_default') : $l('Table', 'set_default')), /*#__PURE__*/React.createElement(Menu.Item, {
      key: 'filter_rename'
    }, $l('Table', 'rename')), /*#__PURE__*/React.createElement(Menu.Item, {
      key: 'filter_delete'
    }, $l('Table', 'delete_button')));
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-filter-menu-option")
    }, /*#__PURE__*/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
          });
        }
      },
      onMouseLeave: function onMouseLeave() {
        return hide();
      }
    }, text), isDefault && /*#__PURE__*/React.createElement(Tag, null, $l('Table', 'default_flag')), isSelected && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-filter-menu-option-selected")
    }, /*#__PURE__*/React.createElement(Icon, {
      type: "check"
    })), /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-filter-menu-option-icons")
    }, /*#__PURE__*/React.createElement(Dropdown, {
      overlay: menu
    }, /*#__PURE__*/React.createElement("span", {
      style: {
        userSelect: 'none'
      }
    }, /*#__PURE__*/React.createElement(Icon, {
      type: "more_horiz"
    })))));
  };

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

QuickFilterMenu.displayName = 'QuickFilterMenu';
export default observer(QuickFilterMenu);
//# sourceMappingURL=QuickFilterMenu.js.map