fastlion-amis
Version:
一种MIS页面生成工具
241 lines (240 loc) • 11.7 kB
JavaScript
;
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MappingFieldRenderer = exports.MappingField = exports.Store = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var factory_1 = require("../factory");
var WithStore_1 = require("../components/WithStore");
var mobx_state_tree_1 = require("mobx-state-tree");
var helper_1 = require("../utils/helper");
var node_1 = require("../store/node");
var tpl_builtin_1 = require("../utils/tpl-builtin");
var api_1 = require("../utils/api");
var tpl_1 = require("../utils/tpl");
var sub_1 = require("../utils/sub");
var setting_1 = require("../utils/setting");
// 缓存一下结果 省的每次同一个请求反复走调用流程
var MappingCache = {};
// 多个请求并发的时候只有一个可用
var WaittingCache = {};
// 注册监听 更新页面的时候情况缓存
sub_1.EventSub.on(sub_1.EventEnum.ClearMappingAcahe, function (InstanceName) {
if (!InstanceName)
return;
delete MappingCache[InstanceName];
});
exports.Store = node_1.StoreNode.named('MappingStore')
.props({
fetching: false,
errorMsg: '',
map: mobx_state_tree_1.types.frozen({})
})
.actions(function (self) {
var load = (0, mobx_state_tree_1.flow)(function (env, api, data, crudName, crudColumn) {
var fetchUrl, ret, returnData, mapData, e_1;
var _a, _b;
return (0, tslib_1.__generator)(this, function (_c) {
switch (_c.label) {
case 0:
fetchUrl = (0, tpl_1.filter)(((_a = api) === null || _a === void 0 ? void 0 : _a.url) || '', data) // 实际的请求地址
;
_c.label = 1;
case 1:
_c.trys.push([1, 5, 6, 7]);
if (!!WaittingCache[fetchUrl]) return [3 /*break*/, 3];
// 如果已经没有有在等待的请求队列 正常请求 请求完触发所有请求队列
WaittingCache[fetchUrl] = [];
self.fetching = true;
return [4 /*yield*/, env.fetcher(api, data)];
case 2:
ret = _c.sent();
if (ret.ok) {
returnData = (0, api_1.normalizeApiResponseData)(ret.data);
mapData = returnData;
// 如果返回空值不修改结果，直接使用通配值
if ((returnData === null || returnData === void 0 ? void 0 : returnData.result) === null && Object.keys(returnData).length === 1) {
mapData = { '*': '通配值' };
}
// 防止出现空map的情况
MappingCache[crudName][fetchUrl] = (0, tslib_1.__assign)({}, mapData);
(_b = crudColumn === null || crudColumn === void 0 ? void 0 : crudColumn.setMapValue) === null || _b === void 0 ? void 0 : _b.call(crudColumn, returnData);
// 触发所有等待的请求
WaittingCache[fetchUrl].map(function (wattingFn) {
wattingFn === null || wattingFn === void 0 ? void 0 : wattingFn();
});
// 用完就可以删除掉了
delete WaittingCache[fetchUrl];
self.setMap(mapData);
}
else {
throw new Error(ret.msg || 'fetch error');
}
return [3 /*break*/, 4];
case 3:
// 如果已经有在等待的请求队列 推入等待列表
WaittingCache[fetchUrl].push(function () {
self.setMap(MappingCache[crudName][fetchUrl]);
});
_c.label = 4;
case 4: return [3 /*break*/, 7];
case 5:
e_1 = _c.sent();
self.errorMsg = e_1.message;
return [3 /*break*/, 7];
case 6:
self.fetching = false;
return [7 /*endfinally*/];
case 7: return [2 /*return*/];
}
});
});
return {
load: load,
setMap: function (options) {
if ((0, helper_1.isObject)(options)) {
self.map = (0, tslib_1.__assign)({}, options);
}
}
};
});
exports.MappingField = (0, WithStore_1.withStore)(function (props) {
return exports.Store.create({
id: (0, helper_1.guid)(),
storeType: exports.Store.name
}, props.env);
})((_a = /** @class */ (function (_super) {
(0, tslib_1.__extends)(class_1, _super);
function class_1(props) {
var _this = _super.call(this, props) || this;
_this.privateFormInitedStatus = false;
var crudName = _this.props.crudName;
// 没有对应的缓存 初始化缓存
if (!MappingCache[crudName]) {
MappingCache[crudName] = {};
}
props.store.syncProps(props, undefined, ['map']);
return _this;
}
class_1.prototype.componentDidMount = function () {
var _a = this.props, store = _a.store, source = _a.source, data = _a.data;
if (!this.props.formItem) {
this.reload();
}
};
class_1.prototype.componentDidUpdate = function (prevProps) {
var props = this.props;
var _a = this.props, store = _a.store, source = _a.source, data = _a.data;
store.syncProps(props, prevProps, ['map']);
if ((0, tpl_builtin_1.isPureVariable)(source)) {
var prev = (0, tpl_builtin_1.resolveVariableAndFilter)(prevProps.source, prevProps.data, '| raw');
var curr = (0, tpl_builtin_1.resolveVariableAndFilter)(source, data, '| raw');
if (prev !== curr) {
store.setMap(curr);
}
}
else if ((0, api_1.isApiOutdated)(prevProps.source, props.source, prevProps.data, props.data)) {
this.reload();
}
else if (prevProps.source !== props.source) {
this.reload();
}
else if (!this.privateFormInitedStatus && this.props.formInited) {
this.reload();
}
// 是有组件内部的状态来管理，防止出现pre的值域props的值相同产生无法更新的问题
this.privateFormInitedStatus = this.props.formInited;
};
class_1.prototype.reload = function () {
var _a, _b;
var _c = this.props, source = _c.source, data = _c.data, env = _c.env, crudName = _c.crudName, crudColumn = _c.crudColumn;
var store = this.props.store;
if ((0, tpl_builtin_1.isPureVariable)(source)) {
store.setMap((0, tpl_builtin_1.resolveVariableAndFilter)(source, data, '| raw'));
}
else if ((0, api_1.isEffectiveApi)(source, data)) {
// 没缓存走请求 有缓存直接设置
var cacheData = MappingCache[crudName][(0, tpl_1.filter)(source.url, data)];
if (!cacheData) {
var api = (0, api_1.normalizeApi)(source, 'get');
api.cache = (_a = api.cache) !== null && _a !== void 0 ? _a : 60 * 1000;
store.load(env, api, data, crudName, crudColumn);
}
else {
store.setMap(cacheData);
(_b = crudColumn === null || crudColumn === void 0 ? void 0 : crudColumn.setMapValue) === null || _b === void 0 ? void 0 : _b.call(crudColumn, cacheData);
}
}
};
class_1.prototype.renderSingleValue = function (key, reactKey) {
var _a;
var _b = this.props, className = _b.className, placeholder = _b.placeholder, render = _b.render, cx = _b.classnames, name = _b.name, data = _b.data, store = _b.store;
var viewValue = (react_1.default.createElement("span", { className: "text-muted" }, placeholder));
var map = store.map;
var value = undefined;
// trim 一下，干掉一些空白字符。
key = typeof key === 'string' ? key.trim() : key;
if (typeof key !== 'undefined' &&
map &&
(value =
(_a = map[key]) !== null && _a !== void 0 ? _a : (key === true && map['1']
? map['1']
: key === false && map['0']
? map['0']
: (key || map['*']))) !== undefined) {
viewValue = render('tpl', value);
}
return (react_1.default.createElement("span", { key: "map-" + reactKey, className: cx('MappingField', className) }, viewValue));
};
class_1.prototype.render = function () {
var _this = this;
var mapKey = (0, helper_1.getPropValue)(this.props);
var _a = this.props, _b = _a.delimiter, delimiter = _b === void 0 ? ',' : _b, cx = _a.classnames, store = _a.store;
var map = store.map;
if (delimiter && typeof mapKey == 'string' && mapKey.indexOf(delimiter) !== -1) {
mapKey = mapKey.split(delimiter);
}
if (typeof mapKey == 'string' && mapKey.indexOf(',') !== -1) {
mapKey = mapKey.split(',');
}
if (Array.isArray(mapKey)) {
var value = mapKey.map(function (item) { return map[item] && map[item]; }).filter(function (item) { return item; });
var mapValue = value.some(function (item) { return !item.indexOf('<span'); });
return (react_1.default.createElement("span", { className: cx('Mapping'), title: mapValue ? "" : value.length ? value.join(delimiter) : '' }, mapValue ?
mapKey.map(function (singleKey, index) {
return _this.renderSingleValue(singleKey, index);
})
:
value.length ? value.join(delimiter) : ''));
}
else {
return this.renderSingleValue(mapKey, 0);
}
};
return class_1;
}(react_1.default.Component)),
_a.defaultProps = {
placeholder: setting_1.UserSetting.tableEmptyValueSetting,
map: {
'*': '通配值'
}
},
_a));
var MappingFieldRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(MappingFieldRenderer, _super);
function MappingFieldRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
MappingFieldRenderer.prototype.render = function () {
return react_1.default.createElement(exports.MappingField, (0, tslib_1.__assign)({}, this.props));
};
MappingFieldRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
test: /(^|\/)(?:map|mapping)$/,
name: 'mapping'
})
], MappingFieldRenderer);
return MappingFieldRenderer;
}(react_1.default.Component));
exports.MappingFieldRenderer = MappingFieldRenderer;
//# sourceMappingURL=./renderers/Mapping.js.map