choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,418 lines (1,234 loc) • 59.8 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import React, { cloneElement, Component, isValidElement } from 'react';
import { observer } from 'mobx-react';
import { action, isArrayLike, observable, runInAction, toJS } from 'mobx';
import uniq from 'lodash/uniq';
import pull from 'lodash/pull';
import noop from 'lodash/noop';
import map from 'lodash/map';
import isObject from 'lodash/isObject';
import isEnumEmpty from 'lodash/isEmpty';
import isEqual from 'lodash/isEqual';
import isArray from 'lodash/isArray';
import isFunction from 'lodash/isFunction';
import omit from 'lodash/omit';
import difference from 'lodash/difference';
import pullAllWith from 'lodash/pullAllWith';
import classNames from 'classnames';
import { getProPrefixCls as getProPrefixClsDefault } from '../../../../es/configure/utils';
import Icon from '../../../../es/icon';
import { Action } from '../../../../es/trigger/enum';
import ReactResizeObserver from '../../../../es/_util/resizeObserver';
import DataSet from '../../data-set/DataSet';
import { DataSetEvents, DataSetSelection, FieldIgnore, FieldType, RecordStatus } from '../../data-set/enum';
import Button from '../../button';
import Dropdown from '../../dropdown';
import Menu from '../../menu';
import TextField from '../../text-field';
import Tooltip from '../../tooltip';
import { ButtonColor } from '../../button/enum';
import { $l } from '../../locale-context';
import autobind from '../../_util/autobind';
import _isEmpty from '../../_util/isEmpty';
import ComboFieldList from './ComboFieldList';
import TableButtons from './TableButtons';
import QuickFilterMenu from './combo-quick-filter/QuickFilterMenu';
import QuickFilterButton from './combo-quick-filter/QuickFilterButton';
import QuickFilterMenuContext from './combo-quick-filter/QuickFilterMenuContext';
import { ConditionDataSet, QuickFilterDataSet } from './combo-quick-filter/QuickFilterDataSet';
import TableContext from '../TableContext';
import { isEqualDynamicProps, isSelect, parseValue } from './TableDynamicFilterBar';
import ColumnFilter from './ColumnFilter';
export var CONDITIONSTATUS = '__CONDITIONSTATUS__';
export var SELECTFIELDS = '__SELECTFIELDS__';
export var MENUDATASET = '__MENUDATASET__';
export var CONDITIONDATASET = '__CONDITIONDATASET__';
export var OPTIONDATASET = '__OPTIONDATASET__';
export var FILTERMENUDATASET = '__FILTERMENUDATASET__';
export var MENURESULT = '__MENURESULT__';
export var SEARCHTEXT = '__SEARCHTEXT__';
export var SELECTCHANGE = '__SELECTCHANGE__';
export var RESETQUERYFIELDS = '__RESETQUERYFIELDS__';
var TableComboBar = /*#__PURE__*/function (_Component) {
_inherits(TableComboBar, _Component);
var _super = _createSuper(TableComboBar);
function TableComboBar(props, context) {
var _this;
_classCallCheck(this, TableComboBar);
_this = _super.call(this, props, context);
_this.refDropdown = null;
_this.refEditors = new Map();
_this.originalConditionFields = [];
_this.handleClickOut = function (e) {
if (_this.refDropdown && !_this.refDropdown.contains(e.target)) {
_this.fieldSelectHidden = true;
}
};
_this.handleTableHeight = function () {
var tableStore = _this.context.tableStore;
if (tableStore) {
tableStore.node.handleHeightTypeChange(true);
}
};
_this.handleResize = function () {
var tableStore = _this.context.tableStore;
if (tableStore) {
tableStore.node.handleHeightTypeChange();
}
};
_this.setOriginalConditionFields = function (code) {
var _this$props = _this.props,
queryDataSet = _this$props.queryDataSet,
dataSet = _this$props.dataSet;
if (!code) {
if (queryDataSet) {
_this.initConditionFields({
dataSet: queryDataSet,
record: queryDataSet.get(0)
});
}
} else {
_this.originalConditionFields = Array.isArray(code) ? code : [code];
}
dataSet.setState(SELECTFIELDS, _toConsumableArray(_this.originalConditionFields));
};
/**
* 勾选
* @param code
* @param record
*/
_this.handleSelect = function (code, record) {
var dataSet = _this.props.dataSet;
var codes = Array.isArray(code) ? code : [code];
var selectFields = dataSet.getState(SELECTFIELDS) || [];
dataSet.setState(SELECTFIELDS, uniq([].concat(_toConsumableArray(selectFields), _toConsumableArray(codes))));
var shouldUpdate = dataSet.getState(SELECTFIELDS).length !== _this.originalConditionFields.length || !!difference(toJS(dataSet.getState(SELECTFIELDS)), toJS(_this.originalConditionFields)).length;
var isDirty = record ? record.dirty : false;
_this.setConditionStatus(shouldUpdate || isDirty ? RecordStatus.update : RecordStatus.sync);
dataSet.setState(SELECTCHANGE, shouldUpdate);
};
/**
* 取消勾选
* @param code
*/
_this.handleUnSelect = function (code) {
var _this$props2 = _this.props,
queryDataSet = _this$props2.queryDataSet,
dataSet = _this$props2.dataSet;
var codes = Array.isArray(code) ? code : [code];
if (queryDataSet) {
var current = queryDataSet.current;
if (current) {
codes.forEach(function (name) {
return current.set(name, undefined);
});
}
}
var selectFields = dataSet.getState(SELECTFIELDS) || [];
dataSet.setState(SELECTFIELDS, pull.apply(void 0, [_toConsumableArray(selectFields)].concat(_toConsumableArray(codes))));
var shouldUpdate = dataSet.getState(SELECTFIELDS).length !== _this.originalConditionFields.length || !!difference(toJS(dataSet.getState(SELECTFIELDS)), toJS(_this.originalConditionFields)).length;
_this.setConditionStatus(shouldUpdate ? RecordStatus.update : RecordStatus.sync);
dataSet.setState(SELECTCHANGE, shouldUpdate);
};
runInAction(function () {
_this.fieldSelectHidden = true;
});
return _this;
}
_createClass(TableComboBar, [{
key: "prefixCls",
get: function get() {
var prefixCls = this.props.prefixCls;
var _this$context$tableSt = this.context.tableStore.getProPrefixCls,
getProPrefixCls = _this$context$tableSt === void 0 ? getProPrefixClsDefault : _this$context$tableSt;
return getProPrefixCls('table', prefixCls);
}
}, {
key: "queryFields",
get: function get() {
var queryFields = this.props.queryFields;
return queryFields.filter(function (component) {
if (component.props.hidden) {
return !component.props.hidden;
}
return !component.props.hidden;
});
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
var _this$props3 = this.props,
queryDataSet = _this$props3.queryDataSet,
dataSet = _this$props3.dataSet;
this.processDataSetListener(true);
document.addEventListener('click', this.handleClickOut);
if (!dataSet.props.autoQuery) {
this.handleDataSetQuery({
dataSet: dataSet
});
}
if (this.originalValue === undefined && queryDataSet && queryDataSet.current) {
this.initConditionFields({
dataSet: queryDataSet,
record: queryDataSet.current
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
document.removeEventListener('click', this.handleClickOut);
this.processDataSetListener(false);
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
var _this2 = this;
var dataSet = nextProps.dataSet,
queryDataSet = nextProps.queryDataSet; // eslint-disable-next-line react/destructuring-assignment
if (dataSet !== this.props.dataSet) {
runInAction(function () {
_this2.fieldSelectHidden = true;
});
this.processDataSetListener(false);
this.processDataSetListener(true, nextProps);
if (this.originalValue === undefined && queryDataSet && queryDataSet.current) {
this.initConditionFields({
dataSet: queryDataSet,
record: queryDataSet.current
});
}
}
}
}, {
key: "processDataSetListener",
value: function processDataSetListener(flag, nextProps) {
var _ref = nextProps || this.props,
queryDataSet = _ref.queryDataSet,
dataSet = _ref.dataSet;
if (queryDataSet) {
var handler = flag ? queryDataSet.addEventListener : queryDataSet.removeEventListener;
var dsHandler = flag ? dataSet.addEventListener : dataSet.removeEventListener;
handler.call(queryDataSet, DataSetEvents.validate, this.handleDataSetValidate);
handler.call(queryDataSet, DataSetEvents.update, this.handleDataSetUpdate);
handler.call(queryDataSet, DataSetEvents.create, this.handleDataSetCreate);
dsHandler.call(dataSet, DataSetEvents.query, this.handleDataSetQuery);
}
}
}, {
key: "handleDataSetQuery",
value: function () {
var _handleDataSetQuery = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
var dataSet, initSearchId, res, _ref3, conditionList, initQueryData, queryDataSet;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
dataSet = _ref2.dataSet;
initSearchId = this.initSearchId;
if (!(!dataSet.getState(MENURESULT) && this.tableFilterAdapter)) {
_context.next = 16;
break;
}
_context.next = 5;
return this.initMenuDataSet();
case 5:
res = dataSet.getState(MENURESULT);
if (!(res && res.length)) {
_context.next = 16;
break;
}
_ref3 = initSearchId ? res.find(function (menu) {
return menu.searchId === initSearchId;
}) : res[0], conditionList = _ref3.conditionList;
initQueryData = {};
if (!(conditionList && conditionList.length)) {
_context.next = 16;
break;
}
map(conditionList, function (condition) {
var fieldName = condition.fieldName,
value = condition.value;
initQueryData[fieldName] = parseValue(value);
});
queryDataSet = this.props.queryDataSet;
if (!(queryDataSet && queryDataSet.current && dataSet.props.autoQuery)) {
_context.next = 16;
break;
}
if (!Object.keys(initQueryData).length) {
_context.next = 16;
break;
}
dataSet.query();
return _context.abrupt("return", false);
case 16:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
function handleDataSetQuery(_x) {
return _handleDataSetQuery.apply(this, arguments);
}
return handleDataSetQuery;
}()
/**
* queryDataSet 查询前校验事件 触发展开动态字段
* @param dataSet 查询DS
* @param result
*/
}, {
key: "handleDataSetValidate",
value: function () {
var _handleDataSetValidate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref4) {
var _this3 = this;
var dataSet, result;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
dataSet = _ref4.dataSet, result = _ref4.result;
_context2.next = 3;
return result;
case 3:
if (_context2.sent) {
_context2.next = 5;
break;
}
runInAction(function () {
var current = dataSet.current;
dataSet.fields.forEach(function (field, key) {
if (!field.isValid(current)) {
_this3.handleSelect(key);
}
});
});
case 5:
case "end":
return _context2.stop();
}
}
}, _callee2);
}));
function handleDataSetValidate(_x2) {
return _handleDataSetValidate.apply(this, arguments);
}
return handleDataSetValidate;
}()
}, {
key: "setConditionStatus",
value: function setConditionStatus(value, orglValue) {
var dataSet = this.props.dataSet;
dataSet.setState(CONDITIONSTATUS, value);
if (value === RecordStatus.sync && orglValue) {
this.originalValue = orglValue;
}
}
/**
* 筛选条件更新 触发表格查询
*/
}, {
key: "handleDataSetUpdate",
value: function () {
var _handleDataSetUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref5) {
var record, name, oldValue, value, _this$props4, dataSet, queryDataSet, _this$props4$onQuery, onQuery, autoQuery, field, shouldQuery, rangeValue, rangeOldValue, status, hasFocus, _iterator, _step, _step$value, key, _value;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
record = _ref5.record, name = _ref5.name, oldValue = _ref5.oldValue, value = _ref5.value;
_this$props4 = this.props, dataSet = _this$props4.dataSet, queryDataSet = _this$props4.queryDataSet, _this$props4$onQuery = _this$props4.onQuery, onQuery = _this$props4$onQuery === void 0 ? noop : _this$props4$onQuery, autoQuery = _this$props4.autoQuery;
field = queryDataSet && queryDataSet.getField(name);
shouldQuery = true;
if (field && field.get('range', record)) {
rangeValue = value ? isArray(value) ? value.join('') : Object.values(value).join('') : '';
rangeOldValue = oldValue ? isArray(oldValue) ? oldValue.join('') : Object.values(oldValue).join('') : '';
shouldQuery = rangeValue !== rangeOldValue;
}
status = RecordStatus.update;
if (record) {
status = isEqualDynamicProps(this.originalValue, omit(record.toData(), ['__dirty']), queryDataSet, record, name) ? RecordStatus.sync : RecordStatus.update;
}
this.setConditionStatus(status);
if (!(autoQuery && shouldQuery)) {
_context3.next = 28;
break;
}
_context3.next = 11;
return dataSet.modifiedCheck(undefined, dataSet, 'query');
case 11:
if (!_context3.sent) {
_context3.next = 27;
break;
}
_context3.t0 = queryDataSet && queryDataSet.current;
if (!_context3.t0) {
_context3.next = 17;
break;
}
_context3.next = 16;
return queryDataSet.current.validate();
case 16:
_context3.t0 = _context3.sent;
case 17:
if (!_context3.t0) {
_context3.next = 22;
break;
}
dataSet.query();
onQuery();
_context3.next = 25;
break;
case 22:
hasFocus = false;
_iterator = _createForOfIteratorHelper(this.refEditors.entries());
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
_step$value = _slicedToArray(_step.value, 2), key = _step$value[0], _value = _step$value[1];
if (_value && !_value.valid && !hasFocus) {
this.refEditors.get(key).focus();
hasFocus = true;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
case 25:
_context3.next = 28;
break;
case 27:
record.init(name, oldValue);
case 28:
case "end":
return _context3.stop();
}
}
}, _callee3, this);
}));
function handleDataSetUpdate(_x3) {
return _handleDataSetUpdate.apply(this, arguments);
}
return handleDataSetUpdate;
}()
/**
* queryDS 新建，初始勾选值
*/
}, {
key: "handleDataSetCreate",
value: function handleDataSetCreate() {
var queryDataSet = this.props.queryDataSet;
if (queryDataSet) {
this.initConditionFields({
dataSet: queryDataSet,
record: queryDataSet.current
});
}
this.handleTableHeight();
}
/**
* 初始化勾选值、条件字段
* @param props
*/
}, {
key: "initConditionFields",
value: function initConditionFields(props) {
var _this4 = this;
var dataSet = props.dataSet,
record = props.record;
var originalValue = record ? omit(record.toData(), ['__dirty']) : {};
var conditionData = Object.entries(originalValue);
this.originalValue = originalValue;
this.originalConditionFields = [];
var fields = dataSet.fields;
map(conditionData, function (data) {
var name = data[0];
if (!fields.has(data[0]) && isObject(data[1]) && !isEnumEmpty(data[1]) && !isArray(data[1])) {
name = "".concat(data[0], ".").concat(Object.keys(data[1])[0]);
}
if (isSelect(data) && !(dataSet.getState(SELECTFIELDS) || []).includes(name)) {
var field = dataSet.getField(name);
if (!field || !field.get('bind', record)) {
_this4.originalConditionFields.push(name);
_this4.handleSelect(name, record);
}
}
});
}
/**
* 初始筛选条数据源状态
*/
}, {
key: "initMenuDataSet",
value: function () {
var _initMenuDataSet = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
var _this5 = this;
var _this$props5, queryDataSet, dataSet, initSearchId, _this$context, tableStore, getConfig, menuDataSet, conditionDataSet, optionDataSet, filterMenuDataSet, status, result, menuRecord, conditionList, customizedColumn, current;
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
_this$props5 = this.props, queryDataSet = _this$props5.queryDataSet, dataSet = _this$props5.dataSet;
initSearchId = this.initSearchId;
_this$context = this.context, tableStore = _this$context.tableStore, getConfig = _this$context.tableStore.getConfig;
if (!this.tableFilterAdapter) {
_context4.next = 25;
break;
}
menuDataSet = new DataSet(QuickFilterDataSet({
queryDataSet: queryDataSet,
tableFilterAdapter: this.tableFilterAdapter
}), {
getConfig: getConfig
});
conditionDataSet = new DataSet(ConditionDataSet(), {
getConfig: getConfig
});
optionDataSet = new DataSet({
selection: DataSetSelection.single,
paging: false,
fields: [{
name: 'title',
type: FieldType.string,
transformResponse: function transformResponse() {
return $l('Table', 'filter_header_title');
},
group: true
}]
}, {
getConfig: getConfig
});
filterMenuDataSet = new DataSet({
autoCreate: true,
fields: [{
name: 'filterName',
type: FieldType.string,
textField: 'searchName',
valueField: 'searchId',
options: optionDataSet,
ignore: FieldIgnore.always
}]
}, {
getConfig: getConfig
});
status = RecordStatus.update;
if (queryDataSet && queryDataSet.current) {
status = isEqualDynamicProps(this.originalValue, omit(queryDataSet.current.toData(), ['__dirty']), queryDataSet, queryDataSet.current) ? RecordStatus.sync : RecordStatus.update;
} // 初始化状态
dataSet.setState(CONDITIONDATASET, conditionDataSet);
dataSet.setState(OPTIONDATASET, optionDataSet);
dataSet.setState(FILTERMENUDATASET, filterMenuDataSet);
dataSet.setState(CONDITIONSTATUS, status);
dataSet.setState(SEARCHTEXT, '');
_context4.next = 17;
return menuDataSet.query();
case 17:
result = _context4.sent;
if (optionDataSet) {
optionDataSet.loadData(result);
}
if (initSearchId) {
menuDataSet.locate(menuDataSet.findIndex(function (menu) {
return menu.get('searchId').toString() === initSearchId.toString();
}));
} else {
menuDataSet.locate(0);
}
dataSet.setState(MENURESULT, result);
dataSet.setState(MENUDATASET, menuDataSet);
menuRecord = menuDataSet.current;
if (menuRecord) {
conditionList = menuRecord.get('personalFilter') && parseValue(menuRecord.get('personalFilter'));
conditionDataSet.loadData(conditionList);
customizedColumn = menuRecord.get('personalColumn') && parseValue(menuRecord.get('personalColumn'));
if (tableStore) {
runInAction(function () {
var newCustomized = {
columns: _objectSpread({}, customizedColumn)
};
tableStore.tempCustomized = {
columns: {}
};
tableStore.saveCustomized(newCustomized);
tableStore.initColumns();
});
}
}
if (result && result.length) {
runInAction(function () {
_this5.shouldLocateData = true;
});
if (queryDataSet && queryDataSet.fields) {
this.tempFields = queryDataSet.snapshot().dataSet.fields;
}
} else {
current = filterMenuDataSet.current;
if (current) current.set('filterName', undefined);
runInAction(function () {
_this5.shouldLocateData = true;
});
}
case 25:
return _context4.abrupt("return", true);
case 26:
case "end":
return _context4.stop();
}
}
}, _callee4, this);
}));
function initMenuDataSet() {
return _initMenuDataSet.apply(this, arguments);
}
return initMenuDataSet;
}()
/**
* tableFilterSuffix 预留自定义区域
*/
}, {
key: "renderSuffix",
value: function renderSuffix() {
var _this$props6 = this.props,
_this$props6$buttons = _this$props6.buttons,
buttons = _this$props6$buttons === void 0 ? [] : _this$props6$buttons,
_this$props6$tableAct = _this$props6.tableActions,
tableActions = _this$props6$tableAct === void 0 ? [] : _this$props6$tableAct,
comboFilterBar = _this$props6.comboFilterBar,
queryDataSet = _this$props6.queryDataSet,
dataSet = _this$props6.dataSet;
var prefixCls = this.prefixCls;
var getConfig = this.context.tableStore.getConfig;
var tableButtons = buttons.length ? /*#__PURE__*/React.createElement(TableButtons, {
key: "toolbar",
prefixCls: "".concat(prefixCls, "-combo-filter"),
buttons: buttons
}) : null;
var suffixes = comboFilterBar && comboFilterBar.suffixes || getConfig('tableFilterSuffix');
var children = [];
var suffixesDom = null;
var actions = tableActions.length ? /*#__PURE__*/React.createElement(Menu, {
className: "".concat(prefixCls, "-combo-filter-action-menu")
}, tableActions.map(function (_ref6) {
var name = _ref6.name,
onClick = _ref6.onClick,
disabled = _ref6.disabled,
style = _ref6.style,
children = _ref6.children,
element = _ref6.element;
if (children && Array.isArray(children)) {
return /*#__PURE__*/React.createElement(Menu.SubMenu, {
title: name,
style: style
}, children.map(function (_ref7) {
var itemName = _ref7.name,
itemSubClick = _ref7.onClick,
itemDisabled = _ref7.disabled,
itemStyle = _ref7.style;
return /*#__PURE__*/React.createElement(Menu.Item, {
key: "".concat(itemName, "-action"),
onClick: itemSubClick,
disabled: itemDisabled,
style: itemStyle
}, itemName);
}));
}
if (element && /*#__PURE__*/React.isValidElement(element)) {
// 完全渲染自定义组件
return element;
}
return /*#__PURE__*/React.createElement(Menu.Item, {
key: "".concat(name, "-action"),
onClick: onClick,
disabled: disabled,
style: style
}, name);
})) : null;
var tableActionsDom = actions && /*#__PURE__*/React.createElement("div", {
key: "action_menu",
className: "".concat(prefixCls, "-combo-filter-action")
}, /*#__PURE__*/React.createElement(Dropdown, {
overlay: actions,
trigger: [Action.click]
}, /*#__PURE__*/React.createElement(Button, {
className: "".concat(prefixCls, "-combo-filter-action-button"),
icon: "more_horiz",
color: ButtonColor.secondary
})));
if (suffixes && suffixes.length) {
suffixes.forEach(function (suffix) {
if (suffix === 'filter') {
children.push( /*#__PURE__*/React.createElement(ColumnFilter, {
prefixCls: prefixCls,
key: 'suffix-column-filter'
}));
} else if ( /*#__PURE__*/isValidElement(suffix)) {
children.push(suffix);
} else if (isFunction(suffix)) {
children.push(suffix({
queryDataSet: queryDataSet,
dataSet: dataSet
}));
}
});
suffixesDom = /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-combo-filter-bar-suffix"),
key: 'suffix-dom'
}, children);
}
if (tableButtons || tableActionsDom || suffixesDom) {
return [tableButtons, tableActionsDom, suffixesDom];
}
return null;
}
}, {
key: "getPrefix",
value: function getPrefix() {
var _this$props7 = this.props,
title = _this$props7.title,
singleLineMode = _this$props7.singleLineMode;
var prefixCls = this.prefixCls;
if (title && !singleLineMode) {
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-combo-filter-title"),
key: 'prefix-filter-title'
}, title);
}
return null;
}
/**
* 注入 refEditors
* @param element
* @param name
* @param field
*/
}, {
key: "createFields",
value: function createFields(element, name, field) {
var _this6 = this;
var queryFieldsStyle = this.props.queryFieldsStyle;
var prefixCls = this.prefixCls;
var styleCss = queryFieldsStyle && queryFieldsStyle[name];
var fieldWidth;
if (styleCss) {
fieldWidth = styleCss.width;
}
var props = {
ref: function ref(node) {
return _this6.refEditors.set(name, node);
},
placeholder: field.get('label'),
maxTagCount: 2,
border: true,
clearButton: true,
isFlat: !fieldWidth,
maxTagTextLength: 3
};
if (fieldWidth) {
props = _objectSpread(_objectSpread({}, props), {}, {
className: "".concat(prefixCls, "-combo-filter-item-overlay"),
style: {
width: fieldWidth
}
});
}
return /*#__PURE__*/cloneElement(element, props);
}
/**
* 判断查询值是否为空
* @param value
*/
}, {
key: "isEmpty",
value: function isEmpty(value) {
return isArrayLike(value) ? !value.length : _isEmpty(value);
}
}, {
key: "tableFilterAdapter",
get: function get() {
var comboFilterBar = this.props.comboFilterBar;
return comboFilterBar && comboFilterBar.tableFilterAdapter;
}
}, {
key: "initSearchId",
get: function get() {
var comboFilterBar = this.props.comboFilterBar;
return comboFilterBar && comboFilterBar.searchId;
}
}, {
key: "filterCallback",
get: function get() {
var comboFilterBar = this.props.comboFilterBar;
return comboFilterBar && comboFilterBar.filterCallback;
}
}, {
key: "filterSave",
get: function get() {
var comboFilterBar = this.props.comboFilterBar;
return comboFilterBar && comboFilterBar.filterSave;
}
}, {
key: "filterSaveCallback",
get: function get() {
var comboFilterBar = this.props.comboFilterBar;
return comboFilterBar && comboFilterBar.filterSaveCallback;
}
}, {
key: "filterOptionRenderer",
get: function get() {
var comboFilterBar = this.props.comboFilterBar;
return comboFilterBar && comboFilterBar.filterOptionRenderer;
}
}, {
key: "dynamicLimit",
value: function dynamicLimit() {
var _this$props8 = this.props,
_this$props8$queryFie = _this$props8.queryFieldsLimit,
queryFieldsLimit = _this$props8$queryFie === void 0 ? 3 : _this$props8$queryFie,
dataSet = _this$props8.dataSet;
var conditionList = dataSet.getState(CONDITIONDATASET);
var menuResult = dataSet.getState(MENURESULT);
if (menuResult && menuResult.length > 0) {
if (conditionList) {
return conditionList.length;
}
}
return queryFieldsLimit;
}
}, {
key: "updateQueryFields",
value: function updateQueryFields() {
var dataSet = this.props.dataSet;
var conditionList = dataSet.getState(CONDITIONDATASET);
if (conditionList) {
var result = [];
var conditionData = conditionList.toData();
var fields = this.queryFields;
map(conditionData, function (data) {
var name = data.fieldName;
var findField = fields.find(function (component) {
return component.props.name === name;
});
if (findField) {
result.push(findField);
pullAllWith(fields, [findField], isEqual);
}
});
return result.concat(fields);
}
return this.queryFields;
}
}, {
key: "updateOriginOrderQueryFields",
value: function updateOriginOrderQueryFields() {
var dataSet = this.props.dataSet;
var conditionList = dataSet.getState(CONDITIONDATASET);
var result = [];
var cloneFields = this.originOrderQueryFields;
if (conditionList) {
var conditionData = conditionList.toData();
map(conditionData, function (data) {
var name = data.fieldName;
var findField = cloneFields.find(function (field) {
return field.name === name;
});
if (findField) {
result.push(findField);
pullAllWith(cloneFields, [findField], isEqual);
}
});
}
return result.concat(cloneFields);
}
/**
* 查询前修改提示及校验定位
*/
}, {
key: "modifiedCheckQuery",
value: function () {
var _modifiedCheckQuery = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
var getConfig, _this$props9, dataSet, queryDataSet, queryFields, comboFilterBar, searchText, hasQueryFields, hasFocus, _iterator2, _step2, _step2$value, key, value;
return _regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
getConfig = this.context.tableStore.getConfig;
_this$props9 = this.props, dataSet = _this$props9.dataSet, queryDataSet = _this$props9.queryDataSet, queryFields = _this$props9.queryFields, comboFilterBar = _this$props9.comboFilterBar;
searchText = comboFilterBar && comboFilterBar.searchText || getConfig('tableFilterSearchText') || 'params';
hasQueryFields = queryDataSet && queryFields.length > 0;
_context5.next = 6;
return dataSet.modifiedCheck(undefined, dataSet, 'query');
case 6:
_context5.t3 = _context5.sent;
if (!_context5.t3) {
_context5.next = 9;
break;
}
_context5.t3 = queryDataSet;
case 9:
_context5.t2 = _context5.t3;
if (!_context5.t2) {
_context5.next = 12;
break;
}
_context5.t2 = queryDataSet.current;
case 12:
_context5.t1 = _context5.t2;
if (!_context5.t1) {
_context5.next = 17;
break;
}
_context5.next = 16;
return queryDataSet.current.validate();
case 16:
_context5.t1 = _context5.sent;
case 17:
_context5.t0 = _context5.t1;
if (_context5.t0) {
_context5.next = 20;
break;
}
_context5.t0 = !hasQueryFields;
case 20:
if (!_context5.t0) {
_context5.next = 25;
break;
}
dataSet.setQueryParameter(searchText, dataSet.getState(SEARCHTEXT));
dataSet.query();
_context5.next = 28;
break;
case 25:
hasFocus = false;
_iterator2 = _createForOfIteratorHelper(this.refEditors.entries());
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
_step2$value = _slicedToArray(_step2.value, 2), key = _step2$value[0], value = _step2$value[1];
if (value && !value.valid && !hasFocus) {
this.refEditors.get(key).focus();
hasFocus = true;
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
case 28:
case "end":
return _context5.stop();
}
}
}, _callee5, this);
}));
function modifiedCheckQuery() {
return _modifiedCheckQuery.apply(this, arguments);
}
return modifiedCheckQuery;
}()
}, {
key: "renderRefreshBtn",
value: function renderRefreshBtn() {
var _this7 = this;
var prefixCls = this.prefixCls;
return /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-filter-menu-query"),
onClick: function () {
var _onClick = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(e) {
return _regeneratorRuntime.wrap(function _callee6$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
e.stopPropagation();
_context6.next = 3;
return _this7.modifiedCheckQuery();
case 3:
case "end":
return _context6.stop();
}
}
}, _callee6);
}));
function onClick(_x4) {
return _onClick.apply(this, arguments);
}
return onClick;
}()
}, /*#__PURE__*/React.createElement(Tooltip, {
title: $l('Table', 'refresh')
}, /*#__PURE__*/React.createElement(Icon, {
type: "refresh"
})));
}
/**
* 渲染模糊搜索
*/
}, {
key: "getFuzzyQuery",
value: function getFuzzyQuery() {
var _this8 = this;
var _this$props10 = this.props,
dataSet = _this$props10.dataSet,
fuzzyQuery = _this$props10.fuzzyQuery,
fuzzyQueryPlaceholder = _this$props10.fuzzyQueryPlaceholder,
comboFilterBar = _this$props10.comboFilterBar,
_this$props10$onReset = _this$props10.onReset,
onReset = _this$props10$onReset === void 0 ? noop : _this$props10$onReset,
queryDataSet = _this$props10.queryDataSet,
queryFields = _this$props10.queryFields;
var getConfig = this.context.tableStore.getConfig;
var prefixCls = this.prefixCls;
var searchText = comboFilterBar && comboFilterBar.searchText || getConfig('tableFilterSearchText') || 'params';
var placeholder = fuzzyQueryPlaceholder || $l('Table', 'enter_search_filter');
var hasQueryFields = queryDataSet && queryFields.length > 0;
if (!fuzzyQuery && !hasQueryFields) {
return null;
}
if (!fuzzyQuery) {
return /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-combo-filter-search-title")
}, $l('Table', 'search'), ": ");
}
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-combo-filter-search")
}, /*#__PURE__*/React.createElement(TextField, {
style: {
width: 182
},
clearButton: true,
placeholder: placeholder,
prefix: /*#__PURE__*/React.createElement(Icon, {
type: "search"
}),
value: dataSet.getState(SEARCHTEXT),
onChange: function onChange(value) {
runInAction(function () {
dataSet.setState(SEARCHTEXT, value || '');
});
dataSet.setQueryParameter(searchText, value);
_this8.handleQuery();
},
onClear: function onClear() {
runInAction(function () {
dataSet.setState(SEARCHTEXT, '');
});
onReset();
}
}));
}
/**
* 渲染重置按钮
*/
}, {
key: "getResetButton",
value: function getResetButton() {
var _this9 = this;
var _this$props11 = this.props,
queryDataSet = _this$props11.queryDataSet,
dataSet = _this$props11.dataSet,
autoQueryAfterReset = _this$props11.autoQueryAfterReset,
_this$props11$onReset = _this$props11.onReset,
onReset = _this$props11$onReset === void 0 ? noop : _this$props11$onReset;
var prefixCls = this.prefixCls;
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-filter-buttons")
}, dataSet.getState(CONDITIONSTATUS) === RecordStatus.update && /*#__PURE__*/React.createElement(Button, {
onClick: function onClick() {
var shouldQuery = false;
if (queryDataSet) {
var current = queryDataSet.current;
if (current) {
shouldQuery = !isEqualDynamicProps(_this9.originalValue, omit(current.toData(), ['__dirty']), queryDataSet, current);
current.reset();
dataSet.setState(SEARCHTEXT, '');
dataSet.setState(SELECTFIELDS, _toConsumableArray(_this9.originalConditionFields));
}
}
_this9.setConditionStatus(RecordStatus.sync);
onReset();
if (autoQueryAfterReset && shouldQuery) {
_this9.handleQuery();
}
},
color: ButtonColor.secondary
}, $l('Table', 'reset_button')));
}
/**
* 筛选头
* fuzzyQuery + quickFilterMenu + resetButton + buttons
*/
}, {
key: "getFilterMenu",
value: function getFilterMenu() {
var _this$props12 = this.props,
queryFields = _this$props12.queryFields,
queryDataSet = _this$props12.queryDataSet,
dataSet = _this$props12.dataSet,
autoQuery = _this$props12.autoQuery,
filerMenuAction = _this$props12.filerMenuAction,
_this$props12$onReset = _this$props12.onReset,
onReset = _this$props12$onReset === void 0 ? noop : _this$props12$onReset,
singleLineMode = _this$props12.singleLineMode;
var tableStore = this.context.tableStore;
var prefixCls = this.prefixCls,
initSearchId = this.initSearchId;
var prefix = this.getPrefix();
var suffix = this.renderSuffix();
if (queryDataSet && queryFields.length) {
var quickFilterMenu = this.tableFilterAdapter ? /*#__PURE__*/React.createElement(QuickFilterMenuContext.Provider, {
value: {
tempQueryFields: this.tempFields,
autoQuery: autoQuery,
prefixCls: prefixCls,
dataSet: dataSet,
queryDataSet: queryDataSet,
refEditors: this.refEditors,
onChange: this.handleSelect,
conditionStatus: dataSet.getState(CONDITIONSTATUS),
onStatusChange: this.setConditionStatus,
selectFields: dataSet.getState(SELECTFIELDS),
onOriginalChange: this.setOriginalConditionFields,
menuDataSet: dataSet.getState(MENUDATASET),
filterMenuDataSet: dataSet.getState(FILTERMENUDATASET),
conditionDataSet: dataSet.getState(CONDITIONDATASET),
optionDataSet: dataSet.getState(OPTIONDATASET),
shouldLocateData: this.shouldLocateData,
initSearchId: initSearchId,
filterCallback: this.filterCallback,
filterSave: this.filterSave,
filterSaveCallback: this.filterSaveCallback,
filterOptionRenderer: this.filterOptionRenderer,
onReset: onReset,
tableStore: tableStore
}
}, /*#__PURE__*/React.createElement(QuickFilterMenu, null)) : null;
return singleLineMode ? /*#__PURE__*/React.createElement(React.Fragment, null, (quickFilterMenu || filerMenuAction) && /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-combo-filter-menu")
}, quickFilterMenu, filerMenuAction && /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-combo-filter-menu-action")
}, filerMenuAction))) : /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-combo-filter-menu")
}, prefix, prefix && quickFilterMenu && /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-combo-filter-title-divide")
}, "/"), quickFilterMenu, filerMenuAction && /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-combo-filter-menu-action")
}, filerMenuAction), suffix);
}
}
}, {
key: "getFilterButton",
value: function getFilterButton() {
var _this$props13 = this.props,
queryFields = _this$props13.queryFields,
queryDataSet = _this$props13.queryDataSet,
dataSet = _this$props13.dataSet,
autoQuery = _this$props13.autoQuery,
_this$props13$onReset = _this$props13.onReset,
onReset = _this$props13$onReset === void 0 ? noop : _this$props13$onReset,
singleLineMode = _this$props13.singleLineMode;
var tableStore = this.context.tableStore;
var prefixCls = this.prefixCls,
initSearchId = this.initSearchId;
var suffix = this.renderSuffix();
var quickFilterButton = this.tableFilterAdapter && queryDataSet && queryFields.length ? /*#__PURE__*/React.createElement(QuickFilterMenuContext.Provider, {
value: {
tempQueryFields: this.tempFields,
autoQuery: autoQuery,
prefixCls: prefixCls,
dataSet: dataSet,
queryDataSet: queryDataSet,
refEditors: this.refEditors,
onChange: this.handleSelect,
conditionStatus: dataSet.getState(CONDITIONSTATUS),
onStatusChange: this.setConditionStatus,
selectFields: dataSet.getState(SELECTFIELDS),
onOriginalChange: this.setOriginalConditionFields,
menuDataSet: dataSet.getState(MENUDATASET),
filterMenuDataSet: dataSet.getState(FILTERMENUDATASET),
conditionDataSet: dataSet.getState(CONDITIONDATASET),
optionDataSet: dataSet.getState(OPTIONDATASET),
shouldLocateData: this.shouldLocateData,
initSearchId: initSearchId,
filterCallback: this.filterCallback,
filterSave: this.filterSave,
filterSaveCallback: this.filterSaveCallback,
filterOptionRenderer: this.filterOptionRenderer,
onReset: onReset,
tableStore: tableStore
}
}, /*#__PURE__*/React.createElement(QuickFilterButton, null)) : null;
var resetButton = this.tableFilterAdapter ? null : this.getResetButton();
return singleLineMode ? /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-combo-filter-menu-button")
}, quickFilterButton, resetButton, dataSet.getState(CONDITIONSTATUS) === RecordStatus.update && suffix && (quickFilterButton || resetButton) ? /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-combo-filter-menu-button-singleLine-divide")
}) : null, suffix) : /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-combo-filter-menu-button")
}, quickFilterButton, resetButton);
}
/**
* 查询字段初始顺序
* 排除动态属性影响
*/
}, {
key: "originOrderQueryFields",
get: function get() {
var queryDataSet = this.props.queryDataSet;
var result = [];
if (queryDataSet) {
var fields = queryDataSet.fields,
_queryDataSet$props$f = queryDataSet.props.fields,
propFields = _queryDataSet$props$f === void 0 ? [] : _queryDataSet$props$f;
var cloneFields = fields.toJS();
propFields.forEach(function (_ref8) {
var name = _ref8.name;
if (name) {
var field = cloneFields.get(name);
var hasBindProps = function hasBindProps(propsName) {
return field && field.get(propsName) && field.get(propsName).bind;
};
if (field && !field.get('bind') && !hasBindProps('computedProps') && !hasBindProps('dynamicProps') && !field.get('name').includes('__tls')) {
result.push(field);
}
}
});
}
return result;
}
/**
* 渲染查询条
*/
}, {
key: "getQueryBar",
value: function getQueryBar() {
var _this10 = this;
var _this$props14 = this.props,
_this$props14$queryFi = _this$props14.queryFieldsLimit,
queryFieldsLimit = _this$props14$queryFi === void 0 ? 3 : _this$props14$queryFi,
queryFields = _this$props14.queryFields,
queryDataSet = _this$props14.queryDataSet,
dataSet = _this$props14.dataSet,
simpleMode = _this$props14.simpleMode,
advancedFilter = _this$props14.advancedFilter,
singleLineMode = _this$props14.singleLineMode;
var fieldsLimit = queryFieldsLimit;
if (simpleMode) {
fieldsLimit = this.originOrderQueryFields.length;
}
if (this.tableFilterAdapter && !simpleMode) {
fieldsLimit = this.dynamicLimit();
}
var updateQue