fastlion-amis
Version:
一种MIS页面生成工具
341 lines (340 loc) • 20.3 kB
JavaScript
"use strict";
/**
* @file filter
* @author fex
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.MatrixRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var Item_1 = require("./Item");
var api_1 = require("../../utils/api");
var components_1 = require("../../components");
var helper_1 = require("../../utils/helper");
var tpl_1 = require("../../utils/tpl");
var findLastIndex_1 = (0, tslib_1.__importDefault)(require("lodash/findLastIndex"));
var MatrixCheckbox = /** @class */ (function (_super) {
(0, tslib_1.__extends)(MatrixCheckbox, _super);
function MatrixCheckbox(props) {
var _this = _super.call(this, props) || this;
_this.mounted = false;
_this.state = {
columns: props.columns || [],
rows: props.rows || [],
loading: false
};
_this.toggleItem = _this.toggleItem.bind(_this);
_this.reload = _this.reload.bind(_this);
_this.initOptions = _this.initOptions.bind(_this);
_this.mounted = true;
return _this;
}
MatrixCheckbox.prototype.componentDidMount = function () {
var _a = this.props, formInited = _a.formInited, addHook = _a.addHook;
formInited || !addHook ? this.reload() : addHook(this.initOptions, 'init');
};
MatrixCheckbox.prototype.componentDidUpdate = function (prevProps) {
var props = this.props;
if (prevProps.columns !== props.columns || prevProps.rows !== props.rows) {
this.setState({
columns: props.columns || [],
rows: props.rows || []
});
}
else if (props.formInited &&
(props.source !== prevProps.source || prevProps.data !== props.data)) {
var prevApi = (0, api_1.buildApi)(prevProps.source, prevProps.data, {
ignoreData: true
});
var nextApi = (0, api_1.buildApi)(props.source, props.data, {
ignoreData: true
});
if (prevApi.url !== nextApi.url && (0, api_1.isValidApi)(nextApi.url)) {
this.reload();
}
}
};
MatrixCheckbox.prototype.componentWillUnmount = function () {
this.mounted = false;
var removeHook = this.props.removeHook;
removeHook === null || removeHook === void 0 ? void 0 : removeHook(this.initOptions, 'init');
};
MatrixCheckbox.prototype.initOptions = function (data) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var _a, formItem, name;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, this.reload()];
case 1:
_b.sent();
_a = this.props, formItem = _a.formItem, name = _a.name;
if (!formItem) {
return [2 /*return*/];
}
if (formItem.value) {
(0, helper_1.setVariable)(data, name, formItem.value);
}
return [2 /*return*/];
}
});
});
};
MatrixCheckbox.prototype.reload = function () {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var _a, source, data, env, onChange, __;
var _this = this;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
_a = this.props, source = _a.source, data = _a.data, env = _a.env, onChange = _a.onChange, __ = _a.translate;
if (!(0, api_1.isEffectiveApi)(source, data) || this.state.loading) {
return [2 /*return*/];
}
if (!env || !env.fetcher) {
throw new Error('fetcher is required');
}
return [4 /*yield*/, new Promise(function (resolve, reject) {
if (!_this.mounted) {
return resolve();
}
_this.setState({
loading: true
}, function () {
if (!_this.mounted) {
return resolve();
}
env
.fetcher(source, data)
.then(function (ret) {
if (!ret.ok) {
throw new Error(ret.msg || __('fetchFailed'));
}
if (!_this.mounted) {
return resolve();
}
_this.setState({
loading: false,
rows: ret.data.rows || [],
columns: ret.data.columns || []
}, function () {
// let replace = source && (source as ApiObject).replaceData;
var value = ret.data.value;
if (value) {
value = source.replaceData
? value
: mergeValue(value, _this.state.columns, _this.state.rows);
onChange(value);
}
resolve();
});
})
.catch(function (reason) {
return _this.setState({
error: reason,
loading: false
}, function () { return resolve(); });
});
});
})];
case 1:
// todo 优化这块
return [2 /*return*/, _b.sent()];
}
});
});
};
MatrixCheckbox.prototype.toggleItem = function (checked, x, y) {
var _a;
var _b = this.state, columns = _b.columns, rows = _b.rows;
var _c = this.props, multiple = _c.multiple, singleSelectMode = _c.singleSelectMode, multipleSelectMode = _c.multipleSelectMode, prinstine = _c.prinstine, checkedExpr = _c.checkedExpr, onChange = _c.onChange;
var value = ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.concat()) || buildDefaultValue(columns, rows);
var result = [];
var getColumnChangedValue = function (start, end) {
return value.map(function (columns, X) {
if (x == X) {
return columns.map(function (item, Y) {
var _a, _b;
var disabled = checkedExpr ? (0, tpl_1.evalExpression)(checkedExpr, value[x][Y]) : false;
if (Y >= start && Y <= end && !disabled) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { checked: checked, changed: ((_b = (_a = prinstine === null || prinstine === void 0 ? void 0 : prinstine[x]) === null || _a === void 0 ? void 0 : _a[Y].checked) !== null && _b !== void 0 ? _b : false) != checked });
}
return item;
});
}
return columns;
});
};
if (multiple) {
if (multipleSelectMode === 'columnJoin') {
var firstCheckedIdx = value[x].findIndex(function (item) { return item.checked && item.changed && !(checkedExpr ? (0, tpl_1.evalExpression)(checkedExpr, item) : false); });
if (checked) {
if (firstCheckedIdx > -1) {
var startIdx = Math.min(firstCheckedIdx, y);
var endIdx = Math.max(firstCheckedIdx, y);
var target = value[x].slice(startIdx, endIdx);
var condition = target.some(function (item) { return (item.checked && !!!item.changed) || (checkedExpr ? (0, tpl_1.evalExpression)(checkedExpr, item) : false); });
if (condition)
return;
result = getColumnChangedValue(startIdx, endIdx);
}
else {
result = getColumnChangedValue(y, y);
}
}
else {
var lastCheckedIdx = (0, findLastIndex_1.default)(value[x], function (item) { return item.checked && item.changed && !(checkedExpr ? (0, tpl_1.evalExpression)(checkedExpr, item) : false); });
if (firstCheckedIdx != -1 && lastCheckedIdx != -1 && y != firstCheckedIdx && y != lastCheckedIdx) {
result = getColumnChangedValue(y, lastCheckedIdx);
}
else {
result = getColumnChangedValue(y, y);
}
}
}
else {
result = getColumnChangedValue(y, y);
}
onChange(result);
}
else if (singleSelectMode === 'row') {
for (var x2 = 0, len = columns.length; x2 < len; x2++) {
value[x2][y] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, value[x2][y]), { checked: x === x2 ? checked : !checked });
}
onChange(value.concat());
}
else if (singleSelectMode === 'column') {
for (var y2 = 0, len = rows.length; y2 < len; y2++) {
value[x][y2] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, value[x][y2]), { checked: y === y2 ? checked : !checked });
}
onChange(value.concat());
}
else {
// 只剩下 cell 了
for (var y2 = 0, len = rows.length; y2 < len; y2++) {
for (var x2 = 0, len2 = columns.length; x2 < len2; x2++) {
value[x2][y2] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, value[x2][y2]), { checked: x === x2 && y === y2 ? checked : !checked });
}
}
onChange(value.concat());
}
};
MatrixCheckbox.prototype.toggleRowItem = function (checked, y) {
var _a;
var _b = this.state, columns = _b.columns, rows = _b.rows;
var _c = this.props, prinstine = _c.prinstine, checkedExpr = _c.checkedExpr, onChange = _c.onChange;
var value = ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.concat()) || buildDefaultValue(columns, rows);
var result = value.map(function (columns, X) {
return columns.map(function (item, Y) {
var _a, _b;
if (y == Y) {
var disabled = checkedExpr ? (0, tpl_1.evalExpression)(checkedExpr, value[X][Y]) : false;
if (!disabled) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { checked: checked, changed: ((_b = (_a = prinstine === null || prinstine === void 0 ? void 0 : prinstine[X]) === null || _a === void 0 ? void 0 : _a[Y].checked) !== null && _b !== void 0 ? _b : false) != checked });
}
}
return item;
});
});
onChange(result);
};
MatrixCheckbox.prototype.toggleColumnItem = function (checked, x) {
var _a;
var _b = this.state, columns = _b.columns, rows = _b.rows;
var _c = this.props, prinstine = _c.prinstine, checkedExpr = _c.checkedExpr, onChange = _c.onChange;
var value = ((_a = this.props.value) === null || _a === void 0 ? void 0 : _a.concat()) || buildDefaultValue(columns, rows);
var result = value.map(function (columns, X) {
if (x == X) {
return columns.map(function (item, Y) {
var _a, _b;
var disabled = checkedExpr ? (0, tpl_1.evalExpression)(checkedExpr, value[x][Y]) : false;
if (!disabled) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { checked: checked, changed: ((_b = (_a = prinstine === null || prinstine === void 0 ? void 0 : prinstine[x]) === null || _a === void 0 ? void 0 : _a[Y].checked) !== null && _b !== void 0 ? _b : false) != checked });
}
return item;
});
}
return columns;
});
onChange(result);
};
MatrixCheckbox.prototype.renderHeader = function () {
var _a = this.props, isProperty = _a.isProperty, label = _a.label, labelName = _a.labelName;
if (!isProperty) {
return null;
}
var fieldTitle = (label || labelName || '');
return (react_1.default.createElement("div", { style: { fontSize: 13, padding: 4, background: '#f7f9fc', display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'sticky', top: 0, zIndex: 2 } }, fieldTitle.includes('</font>') ?
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { style: { color: 'red', fontSize: '14px' } }, "*"),
fieldTitle.replace("<font color='red'>*</font>", '')) : fieldTitle));
};
MatrixCheckbox.prototype.renderInput = function () {
var _this = this;
var _a = this.state, columns = _a.columns, rows = _a.rows;
var _b = this.props, rowLabel = _b.rowLabel, disabled = _b.disabled, cx = _b.classnames, multiple = _b.multiple, singleSelectMode = _b.singleSelectMode, xCheckAll = _b.xCheckAll, yCheckAll = _b.yCheckAll, checkedExpr = _b.checkedExpr, cellShowField = _b.cellShowField;
var value = this.props.value || buildDefaultValue(columns, rows);
return (react_1.default.createElement("div", { className: cx('Table m-b-none'), style: { padding: 0, overflow: 'unset' } },
react_1.default.createElement("div", { className: cx('Table-content') },
react_1.default.createElement("table", { className: cx('Table-table'), style: { borderBottom: 'none' } },
react_1.default.createElement("thead", { style: { position: 'sticky', top: 29, zIndex: 2 } },
react_1.default.createElement("tr", null,
react_1.default.createElement("th", { style: { position: 'sticky', left: 0, zIndex: 1, background: '#fafafa', borderBottom: 'none', borderLeft: 'none' } },
react_1.default.createElement("div", { className: cx('Table-head-container') }, rowLabel)),
columns.map(function (column, x) { return (react_1.default.createElement("th", { key: x, className: "text-left", style: { borderBottom: 'none', borderRight: 'none' } }, (multiple && yCheckAll && !!singleSelectMode) ? (react_1.default.createElement(components_1.Checkbox, { type: 'checkbox', disabled: disabled, checked: value[x].some(function (item) { return item.checked; }), partial: value[x].some(function (item) { return item.checked; }) && !(value[x].every(function (item) { return item.checked; })), onChange: function (checked) { return _this.toggleColumnItem(checked, x); } }, column.label)) : column.label)); }))),
react_1.default.createElement("tbody", null, rows.map(function (row, y) { return (react_1.default.createElement("tr", { key: y },
react_1.default.createElement("td", { className: 'td-border', style: { position: 'sticky', left: 0, zIndex: 1, background: 'white', padding: 4, borderLeft: 'none' } },
(multiple && xCheckAll && !!singleSelectMode) ? (react_1.default.createElement(components_1.Checkbox, { type: 'checkbox', disabled: disabled, checked: value.some(function (item) { return item[y].checked; }), partial: value.some(function (item) { return item[y].checked; }) && !(value.every(function (item) { return item[y].checked; })), onChange: function (checked) { return _this.toggleRowItem(checked, y); } }, row.label)) : row.label,
row.description || row.desc ? (react_1.default.createElement("span", { className: "m-l-xs text-muted text-xs" }, row.description || row.desc)) : null),
columns.map(function (_column, x) { return (react_1.default.createElement("td", { key: x, className: "text-left td-border" },
react_1.default.createElement(components_1.Checkbox, { type: multiple ? 'checkbox' : 'radio', disabled: disabled || (checkedExpr ? (0, tpl_1.evalExpression)(checkedExpr, value[x][y]) : false), checked: !!(value[x] && value[x][y] && value[x][y].checked), onChange: function (checked) { return _this.toggleItem(checked, x, y); } }, cellShowField && value[x][y][cellShowField]))); }))); }))))));
};
MatrixCheckbox.prototype.render = function () {
var _a = this.props, className = _a.className, cx = _a.classnames;
var _b = this.state, error = _b.error, loading = _b.loading;
return (react_1.default.createElement("div", { key: "input", className: cx('MatrixControl', className || '') },
error ? (react_1.default.createElement("div", { className: cx('MatrixControl-error Alert Alert--danger') }, String(error))) : (react_1.default.createElement(react_1.default.Fragment, null,
this.renderHeader(),
this.renderInput())),
react_1.default.createElement(components_1.Spinner, { size: "lg", overlay: true, key: "info", show: loading })));
};
MatrixCheckbox.defaultProps = {
columns: [],
rows: [],
multiple: true,
singleSelectMode: 'column' // multiple 为 false 时有效。
};
return MatrixCheckbox;
}(react_1.default.Component));
exports.default = MatrixCheckbox;
function buildDefaultValue(columns, rows) {
if (!Array.isArray(columns)) {
columns = [];
}
if (!Array.isArray(rows)) {
rows = [];
}
return columns.map(function (column) {
return rows.map(function (row) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, row), column), { checked: false })); });
});
}
function mergeValue(value, columns, rows) {
return value.map(function (column, x) {
return column.map(function (item, y) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, columns[x]), rows[y]), item)); });
});
}
var MatrixRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(MatrixRenderer, _super);
function MatrixRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
MatrixRenderer = (0, tslib_1.__decorate)([
(0, Item_1.FormItem)({
type: 'matrix-checkboxes',
strictMode: false,
sizeMutable: false
})
], MatrixRenderer);
return MatrixRenderer;
}(MatrixCheckbox));
exports.MatrixRenderer = MatrixRenderer;
//# sourceMappingURL=./renderers/Form/MatrixCheckboxes.js.map