fastlion-amis
Version:
一种MIS页面生成工具
247 lines (246 loc) • 20.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataDisplayRenderer = exports.DataDisplay = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var progress_1 = (0, tslib_1.__importDefault)(require("antd/lib/progress"));
var spin_1 = (0, tslib_1.__importDefault)(require("antd/lib/spin"));
var empty_1 = (0, tslib_1.__importDefault)(require("antd/lib/empty"));
var factory_1 = require("../../../factory");
var icons_1 = require("../../../components/icons");
var utils_1 = require("../../../utils/utils");
var isEqual_1 = (0, tslib_1.__importDefault)(require("lodash/isEqual"));
var Scoped_1 = require("../../../Scoped");
var tpl_builtin_1 = require("../../../utils/tpl-builtin");
var colorObj = {
'Display-default': '#ccc',
'Display-error': '#f5222f',
'Display-warning': '#faad14',
'Display-info': '#3574ee',
'Display-success': '#52c41a'
};
var isEmpty = function (value) {
if (typeof value == 'number') {
return false;
}
return !!!value;
};
var DataDisplay = /** @class */ (function (_super) {
(0, tslib_1.__extends)(DataDisplay, _super);
function DataDisplay(props) {
var _this = _super.call(this, props) || this;
_this.getProgressWidth = function () {
var rowElement = _this.rowRef.current;
if ((rowElement === null || rowElement === void 0 ? void 0 : rowElement.children) && rowElement.children.length > 0) {
var colElement = rowElement.children.item(0);
if (colElement) {
_this.setState({ progressWidth: colElement.clientHeight * 0.75 }, _this.getColHeight);
}
}
};
_this.getColHeight = function () {
var rowElement = _this.rowRef.current;
if ((rowElement === null || rowElement === void 0 ? void 0 : rowElement.children) && rowElement.children.length > 1) {
if (rowElement.clientHeight > 0) {
_this.setState({ mostHigh: 0 }, function () {
var maxHeight = 0;
for (var i = 0; i < rowElement.children.length; i++) {
var colElement = rowElement.children.item(i);
if (colElement) {
maxHeight = Math.max(maxHeight, colElement.clientHeight);
}
}
_this.setState({ mostHigh: maxHeight });
});
}
}
};
_this.state = {
progressWidth: 45,
mostHigh: 0,
loading: true,
data: [],
};
_this.rowRef = react_1.default.createRef();
return _this;
}
DataDisplay.prototype.componentDidMount = function () {
this.getData();
window.addEventListener('resize', this.getColHeight);
};
DataDisplay.prototype.componentWillUnmount = function () {
window.removeEventListener('resize', this.getColHeight);
};
DataDisplay.prototype.getData = function (params) {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var _a, env, api, _b, query, items, groupField, groupDescField, groupDescColorField, groupBgColorField, iconField, iconColorField, groupBorderColorField, groupBorderSizeField, groupPaddingField, labelNameField, labelNameColorField, labelValueField, valueFormulaField, labelDescField, labelFontSizeField, labelFontColorField, progressTypeField, progressPositionField, progressColorField, progressField, linkUrlField, linkPageField, linkTitleField, payload, data;
var _this = this;
return (0, tslib_1.__generator)(this, function (_c) {
switch (_c.label) {
case 0:
_a = this.props, env = _a.env, api = _a.api, _b = _a.query, query = _b === void 0 ? {} : _b, items = _a.items, groupField = _a.groupField, groupDescField = _a.groupDescField, groupDescColorField = _a.groupDescColorField, groupBgColorField = _a.groupBgColorField, iconField = _a.iconField, iconColorField = _a.iconColorField, groupBorderColorField = _a.groupBorderColorField, groupBorderSizeField = _a.groupBorderSizeField, groupPaddingField = _a.groupPaddingField, labelNameField = _a.labelNameField, labelNameColorField = _a.labelNameColorField, labelValueField = _a.labelValueField, valueFormulaField = _a.valueFormulaField, labelDescField = _a.labelDescField, labelFontSizeField = _a.labelFontSizeField, labelFontColorField = _a.labelFontColorField, progressTypeField = _a.progressTypeField, progressPositionField = _a.progressPositionField, progressColorField = _a.progressColorField, progressField = _a.progressField, linkUrlField = _a.linkUrlField, linkPageField = _a.linkPageField, linkTitleField = _a.linkTitleField;
this.setState({ loading: true });
return [4 /*yield*/, env.fetcher(api, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, query), params)).finally(function () { return _this.setState({ loading: false }); })];
case 1:
payload = _c.sent();
if (payload.ok && Array.isArray(payload.data)) {
data = payload.data.reduce(function (pre, current, curentIndex) {
var _a, _b, _c;
var index = pre.findIndex(function (item) { return item.groupId == current[groupField]; });
if (index == -1) {
pre.push({
groupId: current[groupField] || curentIndex,
groupName: current[groupField],
groupDesc: groupDescField ? current[groupDescField] : undefined,
groupDescColor: groupDescColorField ? current[groupDescColorField] : undefined,
groupBg: groupBgColorField ? current[groupBgColorField] : undefined,
groupPadding: groupPaddingField ? current[groupPaddingField] : undefined,
groupBorderColor: groupBorderColorField ? (_a = current[groupBorderColorField]) !== null && _a !== void 0 ? _a : undefined : undefined,
groupBorderSize: groupBorderSizeField ? (_b = current[groupBorderSizeField]) !== null && _b !== void 0 ? _b : undefined : undefined,
progressType: progressTypeField ? current[progressTypeField] : undefined,
progressPosition: progressPositionField ? current[progressPositionField] : undefined,
progressColor: progressColorField ? current[progressColorField] : undefined,
progressValue: progressField ? (_c = current[progressField]) !== null && _c !== void 0 ? _c : undefined : undefined,
labels: [{
labelName: current[labelNameField],
labelValue: (valueFormulaField && current[valueFormulaField]) ? (0, utils_1.deepCalcFn)(current[valueFormulaField], items !== null && items !== void 0 ? items : []) : current[labelValueField],
labelNameColor: labelNameColorField ? current[labelNameColorField] : undefined,
labelIcon: iconField ? current[iconField] : undefined,
labelIconColor: iconColorField ? current[iconColorField] : undefined,
labelDesc: labelDescField ? current[labelDescField] : undefined,
labelFontSize: labelFontSizeField ? current[labelFontSizeField] : undefined,
labelFontColor: labelFontColorField ? current[labelFontColorField] : undefined,
linkUrl: linkUrlField ? current[linkUrlField] : undefined,
linkId: linkPageField ? current[linkPageField] : undefined,
linkTitle: linkTitleField ? current[linkTitleField] : undefined,
linkData: current
}]
});
}
else {
pre[index].labels.push({
labelName: current[labelNameField],
labelValue: (valueFormulaField && current[valueFormulaField]) ? (0, utils_1.deepCalcFn)(current[valueFormulaField], items !== null && items !== void 0 ? items : []) : current[labelValueField],
labelNameColor: labelNameColorField ? current[labelNameColorField] : undefined,
labelIcon: iconField ? current[iconField] : undefined,
labelIconColor: iconColorField ? current[iconColorField] : undefined,
labelDesc: labelDescField ? current[labelDescField] : undefined,
labelFontSize: labelFontSizeField ? current[labelFontSizeField] : undefined,
labelFontColor: labelFontColorField ? current[labelFontColorField] : undefined,
linkUrl: linkUrlField ? current[linkUrlField] : undefined,
linkId: linkPageField ? current[linkPageField] : undefined,
linkTitle: linkTitleField ? current[linkTitleField] : undefined,
linkData: current
});
}
return pre;
}, []);
// console.log(data)
this.setState({ data: data }, this.getProgressWidth);
}
return [2 /*return*/];
}
});
});
};
DataDisplay.prototype.handleLink = function (label) {
var _a, _b, _c, _d, _e;
if (label.linkUrl) {
var id = 'Matrix' + ((_a = label.linkId) !== null && _a !== void 0 ? _a : Date.now().toString());
var url = (0, tpl_builtin_1.tokenize)(label.linkUrl, (_b = label.linkData) !== null && _b !== void 0 ? _b : {});
(_d = (_c = this.props.env).onPageLink) === null || _d === void 0 ? void 0 : _d.call(_c, id, id, (_e = label.linkTitle) !== null && _e !== void 0 ? _e : label.labelName, url, undefined);
}
};
DataDisplay.prototype.componentDidUpdate = function (preProps) {
var _a, _b;
if (!(0, isEqual_1.default)((_a = preProps.items) !== null && _a !== void 0 ? _a : [], (_b = this.props.items) !== null && _b !== void 0 ? _b : [])) {
this.getData();
}
};
DataDisplay.prototype.render = function () {
var _this = this;
var _a = this.props, groupRowNum = _a.groupRowNum, groupWidth = _a.groupWidth, columnNum = _a.columnNum, columnWidth = _a.columnWidth, labelDirection = _a.labelDirection, cx = _a.classnames;
var _b = this.state, data = _b.data, loading = _b.loading, mostHigh = _b.mostHigh, progressWidth = _b.progressWidth;
var isTile = data.every(function (item) { return item.groupName == null; });
return (react_1.default.createElement("div", { className: "data-display" },
react_1.default.createElement(spin_1.default, { className: 'data-display-spin', spinning: loading }),
react_1.default.createElement(empty_1.default, { style: { margin: '16px 0', visibility: loading ? 'hidden' : undefined, display: data.length > 0 ? 'none' : undefined }, description: "\u6682\u65E0\u6570\u636E" }),
react_1.default.createElement("div", { ref: this.rowRef, style: { gap: 8, display: 'grid', gridTemplateColumns: groupWidth > 0 ? "repeat(auto-fill, minmax(" + groupWidth + "px, 1fr))" : "repeat(" + groupRowNum + ", 1fr)" } }, data.map(function (item) {
var _a, _b;
var groupId = item.groupId, groupName = item.groupName, groupDesc = item.groupDesc, groupDescColor = item.groupDescColor, groupBg = item.groupBg, groupPadding = item.groupPadding, groupBorderColor = item.groupBorderColor, groupBorderSize = item.groupBorderSize, labels = item.labels, progressType = item.progressType, progressPosition = item.progressPosition, progressColor = item.progressColor, progressValue = item.progressValue;
var hasProgress = progressType != undefined && progressPosition != undefined;
var progressOnLeftOrRight = progressPosition == 0 || progressPosition == 1;
return (react_1.default.createElement("div", { key: groupId, className: "data-display-item " + cx(groupBg, groupBorderColor), style: { minHeight: mostHigh, borderWidth: groupBorderSize || 0, padding: groupPadding } },
((groupName === null || groupName === void 0 ? void 0 : groupName.trim()) || (groupDesc === null || groupDesc === void 0 ? void 0 : groupDesc.trim())) && (react_1.default.createElement("div", { className: 'data-display-item-group' },
react_1.default.createElement("span", { className: 'group-title' }, groupName),
react_1.default.createElement("span", { className: "group-desc " + cx(groupDescColor) }, groupDesc))),
react_1.default.createElement("div", { style: {
display: hasProgress ? 'flex' : undefined,
alignItems: hasProgress && progressOnLeftOrRight ? 'center' : undefined,
flexDirection: hasProgress ? progressOnLeftOrRight ? 'row' : 'column' : undefined
} },
(hasProgress && (progressPosition == 0 || progressPosition == 2)) &&
react_1.default.createElement(progress_1.default, { size: 'small', width: progressWidth, type: progressType == 0 ? 'circle' : 'line', status: 'normal', percent: progressValue, strokeWidth: 10, strokeColor: (_a = colorObj[progressColor !== null && progressColor !== void 0 ? progressColor : '']) !== null && _a !== void 0 ? _a : progressColor, strokeLinecap: 'butt', style: { marginRight: progressPosition == 0 ? 16 : undefined, marginBottom: progressPosition == 2 ? 8 : undefined }, format: function () { return labelDirection == 0 ?
(progressValue != undefined ? progressValue : 0) + '%' :
react_1.default.createElement("div", { style: { fontSize: progressType == 0 ? 14 : 12 } },
(progressValue != undefined ? progressValue : 0),
"%"); } }),
react_1.default.createElement("div", { className: "data-display-item-labels item-" + item.groupId, style: {
display: 'grid',
gap: 12,
gridTemplateColumns: columnWidth > 0 && !isTile ? "repeat(auto-fill, minmax(" + columnWidth + "px, 1fr))" : "repeat(" + (isTile ? 1 : columnNum) + ", 1fr)"
} }, labels.map(function (label, index) {
var hidden = isEmpty(label.labelIcon) && isEmpty(label.labelName) && isEmpty(label.labelValue) && isEmpty(label.labelDesc);
var labelContent = (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "sub-title " + cx(label.labelNameColor), style: { display: isEmpty(label.labelName) ? 'none' : undefined } }, label.labelName),
react_1.default.createElement("div", { className: "title " + cx(label.labelFontColor) + " " + (label.linkUrl ? 'link' : ''), style: { fontSize: label.labelFontSize }, onClick: function () { return _this.handleLink(label); } }, label.labelValue)));
return (react_1.default.createElement("div", { key: index, className: labelDirection == 0 ? 'data-display-item-labels-item' : 'data-display-item-vertical-labels-item', style: { display: hidden ? 'none' : 'block' } },
react_1.default.createElement("div", { className: 'wrap' },
react_1.default.createElement("div", { className: (labelDirection == 0 && label.labelDesc) ? 'left' : undefined }, label.labelIcon && react_1.default.createElement(icons_1.Icon, { className: cx(label.labelIconColor), icon: label.labelIcon, style: { fontSize: 38 }, symbol: true })),
react_1.default.createElement("div", { className: 'right' },
labelDirection == 0 ? react_1.default.createElement("div", { className: 'data-display-item-labels-item-header' }, labelContent) : labelContent,
label.labelDesc && react_1.default.createElement("div", { className: 'desc' }, label.labelDesc.split('<br/>').map(function (str, index) { return react_1.default.createElement("p", { key: index }, str); }))))));
})),
(hasProgress && (progressPosition == 1 || progressPosition == 3)) &&
react_1.default.createElement(progress_1.default, { size: 'small', width: progressWidth, type: progressType == 0 ? 'circle' : 'line', status: 'normal', percent: progressValue, strokeWidth: 10, strokeColor: (_b = colorObj[progressColor !== null && progressColor !== void 0 ? progressColor : '']) !== null && _b !== void 0 ? _b : progressColor, strokeLinecap: 'butt', style: { marginLeft: progressPosition == 1 ? 16 : undefined, marginTop: progressPosition == 3 ? 8 : undefined }, format: function () { return labelDirection == 0 ?
(progressValue != undefined ? progressValue : 0) + '%' :
react_1.default.createElement("div", { style: { fontSize: progressType == 0 ? 14 : 12 } },
(progressValue != undefined ? progressValue : 0),
"%"); } }))));
}))));
};
DataDisplay.defaultProps = {
columnNum: 1,
groupRowNum: 1,
columnWidth: 0,
groupWidth: 0,
labelDirection: 1
};
return DataDisplay;
}(react_1.default.Component));
exports.DataDisplay = DataDisplay;
var DataDisplayRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(DataDisplayRenderer, _super);
function DataDisplayRenderer(props, context) {
var _this = _super.call(this, props) || this;
var scoped = context;
scoped.registerComponent(_this);
return _this;
}
DataDisplayRenderer.prototype.componentWillUnmount = function () {
var scoped = this.context;
scoped.unRegisterComponent(this);
};
DataDisplayRenderer.prototype.receive = function (values) {
return _super.prototype.getData.call(this, values);
};
var _a;
DataDisplayRenderer.contextType = Scoped_1.ScopedContext;
DataDisplayRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({ type: 'data-display' }),
(0, tslib_1.__metadata)("design:paramtypes", [Object, typeof (_a = typeof Scoped_1.IScopedContext !== "undefined" && Scoped_1.IScopedContext) === "function" ? _a : Object])
], DataDisplayRenderer);
return DataDisplayRenderer;
}(DataDisplay));
exports.DataDisplayRenderer = DataDisplayRenderer;
//# sourceMappingURL=./renderers/Lion/DataDisplay/index.js.map