fastlion-amis
Version:
一种MIS页面生成工具
432 lines (431 loc) • 22.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabsRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var factory_1 = require("../factory");
var find_1 = (0, tslib_1.__importDefault)(require("lodash/find"));
var helper_1 = require("../utils/helper");
var findIndex_1 = (0, tslib_1.__importDefault)(require("lodash/findIndex"));
var Tabs_1 = require("../components/Tabs");
var tpl_1 = require("../utils/tpl");
var tpl_builtin_1 = require("../utils/tpl-builtin");
var api_1 = require("../utils/api");
var Scoped_1 = require("../Scoped");
var tools_1 = require("../utils/shell/tools");
var lodash_1 = require("lodash");
var antd_1 = require("antd");
var Tabs = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Tabs, _super);
function Tabs(props) {
var _this = _super.call(this, props) || this;
_this.autoJumpToNeighbour = function (key) {
var _a = _this.props, tabs = _a.tabs, data = _a.data;
if (!Array.isArray(tabs)) {
return;
}
// 当前 tab 可能不可见，所以需要自动切到一个可见的 tab, 向前找，找一圈
var tabIndex = (0, findIndex_1.default)(tabs, function (tab, index) {
return tab.hash ? tab.hash === key : index === key;
});
var ctx = (0, helper_1.createObject)(data, _this.state.dataField);
// Jay 增加form init请求初始化后数据更新后才判断isVisible的条件
if (tabs[tabIndex] && !(0, helper_1.isVisible)(tabs[tabIndex], ctx) && (_this.props.formStore ? _this.props.formStore.inited : true)) {
var targetIndex = tabs.findIndex(function (tab) { return (0, helper_1.isVisible)(tab, ctx); });
if (targetIndex !== -1) {
_this.setState({
activeKey: (_this.activeKey = targetIndex)
});
}
}
};
_this.handleSelect = function (key) {
var _a;
var _b = _this.props, env = _b.env, onSelect = _b.onSelect, id = _b.id;
(_a = env.tracker) === null || _a === void 0 ? void 0 : _a.call(env, {
eventType: 'tabChange',
eventData: {
id: id,
key: key
}
});
// 是 hash，需要更新到地址栏
if (typeof key === 'string' && env) {
env.updateLocation("#" + key);
}
else if (typeof _this.state.activeKey === 'string' && env) {
env.updateLocation("#");
}
_this.setState({
activeKey: (_this.activeKey = key),
prevKey: _this.state.activeKey
});
if (typeof onSelect === 'string') {
var selectFunc = (0, api_1.str2AsyncFunction)(onSelect, 'key', 'props');
selectFunc && selectFunc(key, _this.props);
}
else if (typeof onSelect === 'function') {
onSelect(key, _this.props);
}
};
_this.switchTo = function (index) {
var tabs = _this.props.tabs;
Array.isArray(tabs) &&
tabs[index] &&
_this.setState({
activeKey: (_this.activeKey = tabs[index].hash || index)
});
};
_this.currentIndex = function () {
var tabs = _this.props.tabs;
return Array.isArray(tabs)
? (0, findIndex_1.default)(tabs, function (tab, index) {
return tab.hash
? tab.hash === _this.state.activeKey
: index === _this.state.activeKey;
})
: -1;
};
_this.reload = function (subPath, query, ctx) {
if (ctx) {
_this.setState({ dataField: ctx });
}
};
var location = props.location || window.location;
var tabs = props.tabs;
var activeKey = 0;
var collectedActiveTab = sessionStorage.getItem('collectedActiveTab');
if (!(0, lodash_1.isNil)(collectedActiveTab)) {
var collectedContent_1 = JSON.parse(collectedActiveTab);
var keyList = collectedContent_1.keyList;
if (keyList.length) {
var targetKey_1 = keyList.pop();
//如果查询到了，说明是使用tabName收藏
var targetIndex = tabs.findIndex(function (item) { return item.tabName === targetKey_1; });
if (targetIndex === -1) {
//这里判断tabName没有定位到的情况，要么是被删除，要么是使用下标进行收藏
if (typeof targetKey_1 == 'number' && tabs[targetKey_1]) {
//说明定位成功
if (tabs[targetKey_1].tabName === collectedContent_1.tabName) {
activeKey = targetKey_1;
}
else {
//顺序改变，导致定位失败，则查找打开相同tabName的tab
var getIndex = tabs.findIndex(function (item) { return item.tabName === collectedContent_1.tabName; });
if (getIndex !== -1)
activeKey = getIndex;
}
}
else {
antd_1.message.info('该节点不存在，请检查是否已被删除');
keyList = [];
}
}
else {
activeKey = targetIndex;
}
if (keyList.length > 0) {
sessionStorage.setItem('collectedActiveTab', JSON.stringify((0, tslib_1.__assign)((0, tslib_1.__assign)({}, collectedContent_1), { keyList: keyList })));
}
else {
sessionStorage.removeItem('collectedActiveTab');
}
}
}
if (typeof props.activeKey !== 'undefined') {
activeKey = props.activeKey;
}
else if (location && Array.isArray(tabs)) {
var hash_1 = location.hash.substring(1);
var tab = (0, find_1.default)(tabs, function (tab) { return tab.hash === hash_1; });
if (tab) {
activeKey = tab.hash;
}
else if (props.defaultActiveKey) {
activeKey = (0, tpl_builtin_1.tokenize)(props.defaultActiveKey, props.data);
}
else {
var show = (0, helper_1.isVisible)(tabs[activeKey], props.data);
if (show === false) {
var showIndex = tabs.findIndex(function (tab) { return (0, helper_1.isVisible)(tab, props.data); });
showIndex !== -1 && (activeKey = showIndex);
}
}
activeKey = activeKey || (tabs[0] && tabs[0].hash) || 0;
}
_this.state = {
prevKey: undefined,
activeKey: (_this.activeKey = activeKey),
dataField: {}
};
return _this;
}
Tabs.prototype.componentDidMount = function () {
this.autoJumpToNeighbour(this.activeKey);
// let { name, value, onChange, source, tabs, data } = this.props;
// // 如果没有配置 name ，说明不需要同步表单值
// if (
// !name ||
// typeof onChange !== 'function' ||
// // 如果关联某个变量数据，则不启用
// source
// ) {
// return;
// }
// value = value ?? getVariable(data, name);
// 如果有值，切到对应的 tab
// if (value && Array.isArray(tabs)) {
// const key = this.resolveKeyByValue(value);
// key !== undefined && this.handleSelect(key);
// } else {
// const tab = this.resolveTabByKey(this.activeKey);
// if (tab && value !== ((tab as any).value ?? tab.title)) {
// onChange((tab as any).value ?? tab.title, name);
// }
// }
};
Tabs.prototype.componentDidUpdate = function (preProps, prevState) {
var props = this.props;
if (props.location && props.location.hash !== preProps.location.hash) {
var hash_2 = props.location.hash.substring(1);
if (!hash_2) {
return;
}
var tab = (0, find_1.default)(props.tabs, function (tab) { return tab.hash === hash_2; });
if (tab && tab.hash && tab.hash !== this.state.activeKey) {
this.setState({
activeKey: (this.activeKey = tab.hash),
prevKey: this.state.activeKey
});
}
}
else if (Array.isArray(props.tabs) &&
Array.isArray(preProps.tabs) &&
JSON.stringify(props.tabs.map(function (item) { return item.hash; })) !==
JSON.stringify(preProps.tabs.map(function (item) { return item.hash; }))) {
var activeKey_1 = this.state.activeKey;
var location = props.location;
var tab = null;
if (location && Array.isArray(props.tabs)) {
var hash_3 = location.hash.substring(1);
tab = (0, find_1.default)(props.tabs, function (tab) { return tab.hash === hash_3; });
}
if (tab) {
activeKey_1 = tab.hash;
}
else if (!props.tabs ||
!props.tabs.some(function (item, index) {
return item.hash ? item.hash === activeKey_1 : index === activeKey_1;
})) {
activeKey_1 = (props.tabs && props.tabs[0] && props.tabs[0].hash) || 0;
}
this.setState({
prevKey: undefined,
activeKey: (this.activeKey = activeKey_1)
});
}
this.autoJumpToNeighbour(this.activeKey);
// let { name, value, onChange, source, data } = this.props;
// 如果没有配置 name ，说明不需要同步表单值
// if (
// !name ||
// typeof onChange !== 'function' ||
// // 如果关联某个变量数据，则不启用
// source
// ) {
// return;
// }
// let key: any;
// value = value ?? getVariable(data, name);
// const prevValue =
// preProps.value ?? getVariable(preProps.data, preProps.name);
// if (
// value !== prevValue &&
// (key = this.resolveKeyByValue(value)) !== undefined &&
// key !== this.activeKey
// ) {
// this.handleSelect(key);
// } else if (this.activeKey !== prevState.activeKey) {
// const tab = this.resolveTabByKey(this.activeKey);
// if (tab && value !== ((tab as any).value ?? tab.title)) {
// onChange((tab as any).value ?? tab.title, name);
// }
// }
};
Tabs.prototype.resolveTabByKey = function (key) {
var tabs = this.props.tabs;
if (!Array.isArray(tabs)) {
return;
}
return (0, find_1.default)(tabs, function (tab, index) {
return tab.hash ? tab.hash === key : index === key;
});
};
Tabs.prototype.resolveKeyByValue = function (value) {
var tabs = this.props.tabs;
if (!Array.isArray(tabs)) {
return;
}
var tab = (0, find_1.default)(tabs, function (tab) { var _a; return ((_a = tab.value) !== null && _a !== void 0 ? _a : tab.title) === value; });
return tab && tab.hash ? tab.hash : tabs.indexOf(tab);
};
Tabs.prototype.renderToolbar = function () {
var _a = this.props, toolbar = _a.toolbar, render = _a.render, cx = _a.classnames, toolbarClassName = _a.toolbarClassName;
return toolbar ? (react_1.default.createElement("div", { className: cx("Tabs-toolbar", toolbarClassName) }, render('toolbar', toolbar))) : null;
};
Tabs.prototype.handleReload = function (children) { };
Tabs.prototype.getTabsActiveKeys = function () { };
Tabs.prototype.renderTabs = function () {
var _this = this;
var _a, _b;
var _c = this.props, cx = _c.classnames, ns = _c.classPrefix, contentClassName = _c.contentClassName, linksClassName = _c.linksClassName, tabRender = _c.tabRender, className = _c.className, render = _c.render, data = _c.data, dMode = _c.mode, tabsMode = _c.tabsMode, unmountOnExit = _c.unmountOnExit, source = _c.source, formStore = _c.formStore, formMode = _c.formMode, formHorizontal = _c.formHorizontal, subFormMode = _c.subFormMode, subFormHorizontal = _c.subFormHorizontal, scrollable = _c.scrollable, notPrintFieldList = _c.notPrintFieldList;
var mode = tabsMode || dMode;
var values = (0, helper_1.createObject)(data, this.state.dataField);
var arr = (0, tpl_builtin_1.resolveVariableAndFilter)(source, values, '| raw');
// let mountOnEnter = this.props.mountOnEnter;
var tabs = this.props.tabs;
if (!tabs) {
return null;
}
tabs = Array.isArray(tabs) ? tabs : [tabs];
var children = [];
if (Array.isArray(arr)) {
arr.forEach(function (value, index) {
var ctx = (0, helper_1.createObject)(values, (0, helper_1.isObject)(value) ? (0, tslib_1.__assign)({ index: index }, value) : { item: value, index: index });
children.push.apply(children, tabs.map(function (tab, tabIndex) {
return (0, helper_1.isVisible)(tab, ctx) ? (react_1.default.createElement(Tabs_1.Tab, (0, tslib_1.__assign)({}, tab, { title: (0, tpl_1.filter)(tab.title, ctx), disabled: (0, helper_1.isDisabled)(tab, ctx), key: "" + (index * 1000 + tabIndex), eventKey: index * 1000 + tabIndex, isTotalMode: tab === null || tab === void 0 ? void 0 : tab.isTotalMode, unmountOnExit: typeof tab.reload === 'boolean'
? tab.reload
: typeof tab.unmountOnExit === 'boolean'
? tab.unmountOnExit
: unmountOnExit }), function (setTotalNum, totalTab) {
var _a;
return render("item/" + index + "/" + tabIndex, ((_a = tab) === null || _a === void 0 ? void 0 : _a.type) ? tab : tab.tab || tab.body, {
data: ctx,
setTotalNum: setTotalNum,
totalTab: totalTab,
formMode: tab.mode || subFormMode || formMode,
formHorizontal: tab.horizontal || subFormHorizontal || formHorizontal,
mountOnEnter: tab.mountOnEnter
});
})) : null;
}));
});
}
else {
children = tabs.map(function (tab, index) {
var _a;
return (0, helper_1.isVisible)(tab, values) ? (react_1.default.createElement(Tabs_1.Tab, (0, tslib_1.__assign)({}, tab, { title: (0, tpl_1.filter)(tab.title, values), disabled: (0, helper_1.isDisabled)(tab, values), key: index, isTotalMode: tab.isTotalMode, eventKey: tab.hash || index, unmountOnExit: typeof tab.reload === 'boolean'
? tab.reload
: typeof tab.unmountOnExit === 'boolean'
? tab.unmountOnExit
: unmountOnExit }), (tab === null || tab === void 0 ? void 0 : tab.isTotalMode) ? function (setTotalNum, totalTab) {
var _a;
return render("tab/" + index, ((_a = tab) === null || _a === void 0 ? void 0 : _a.type) ? tab : tab.tab || tab.body, {
setTotalNum: setTotalNum,
totalTab: totalTab,
formMode: tab.mode || subFormMode || formMode,
formHorizontal: tab.horizontal || subFormHorizontal || formHorizontal,
// Jay
// 表单下多个tab页的service组件一起发起请求时loading的控制，当activeKey的tab请求才设置loading
markFetching: _this.state.activeKey === tab.hash || _this.state.activeKey === index,
defer: _this.state.activeKey !== tab.hash && _this.state.activeKey !== index,
tabTitle: tab.title,
mountOnEnter: tab.mountOnEnter
});
} : _this.renderTab
? _this.renderTab(tab, _this.props, index)
: tabRender
? tabRender(tab, _this.props, index)
: render("tab/" + index, ((_a = tab) === null || _a === void 0 ? void 0 : _a.type) ? tab : tab.tab || tab.body, {
formMode: tab.mode || subFormMode || formMode,
formHorizontal: tab.horizontal || subFormHorizontal || formHorizontal,
// Jay
// 表单下多个tab页的service组件一起发起请求时loading的控制，当activeKey的tab请求才设置loading
markFetching: _this.state.activeKey === tab.hash || _this.state.activeKey === index,
tabsdefer: tab.mountOnEnter ? 0 : _this.state.activeKey !== tab.hash && _this.state.activeKey !== index,
tabTitle: tab.title,
mountOnEnter: tab.mountOnEnter
}))) : null;
});
}
return (react_1.default.createElement(Tabs_1.Tabs, { classPrefix: ns, classnames: cx, mode: mode, data: this.props.data, className: className, contentClassName: contentClassName, linksClassName: linksClassName, onSelect: this.handleSelect, activeKey: this.state.activeKey, toolbar: this.renderToolbar(), scrollable: scrollable, env: (_a = this.props) === null || _a === void 0 ? void 0 : _a.env, useMobileUI: (_b = this.props) === null || _b === void 0 ? void 0 : _b.useMobileUI, handleReload: this.handleReload, getTabsActiveKeys: this.getTabsActiveKeys, notPrintFieldList: notPrintFieldList }, children));
};
Tabs.prototype.render = function () {
return this.renderTabs();
};
Tabs.defaultProps = {
className: '',
mode: '',
mountOnEnter: true,
unmountOnExit: false,
scrollable: true,
tabsMode: 'line'
};
return Tabs;
}(react_1.default.Component));
exports.default = Tabs;
var TabsRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(TabsRenderer, _super);
function TabsRenderer(props, context) {
var _this = _super.call(this, props) || this;
_this.getTabsActiveKeys = function () {
var keyList = [_this.props.tabs[_this.state.activeKey].tabName];
var scoped = _this.context;
function fabScoped(currentScoped) {
var _a;
var tabItem = currentScoped.getComponents().find(function (item) { return item.props.type === 'tabs'; });
if (tabItem && !(0, lodash_1.isNil)((_a = tabItem) === null || _a === void 0 ? void 0 : _a.activeKey)) {
keyList.push(tabItem.props.tabs[tabItem.activeKey].tabName);
}
for (var i = 0; i < 100; i++) {
if (currentScoped.parent) {
fabScoped(currentScoped.parent);
}
else {
break;
}
}
}
scoped.parent && fabScoped(scoped.parent);
return keyList;
};
_this.handleReload = function (children) {
var scoped = _this.context;
if (tools_1.tools.isArray(children)) {
children.forEach(function (child) {
var serviceSchema = child.props.body;
if (tools_1.tools.isArray(serviceSchema)) {
serviceSchema.forEach(function (item) {
if (item.type === 'service') {
var component = item.name && scoped.getComponentByName(item.name);
component === null || component === void 0 ? void 0 : component.reload();
}
});
}
else if (serviceSchema.type === 'service') {
var component = serviceSchema.name && scoped.getComponentByName(serviceSchema.name);
component === null || component === void 0 ? void 0 : component.reload();
}
});
}
};
var scoped = context;
scoped.registerComponent(_this);
return _this;
}
TabsRenderer.prototype.componentWillUnmount = function () {
var scoped = this.context;
scoped.unRegisterComponent(this);
};
var _a;
TabsRenderer.contextType = Scoped_1.ScopedContext;
TabsRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'tabs'
}),
(0, tslib_1.__metadata)("design:paramtypes", [Object, typeof (_a = typeof Scoped_1.IScopedContext !== "undefined" && Scoped_1.IScopedContext) === "function" ? _a : Object])
], TabsRenderer);
return TabsRenderer;
}(Tabs));
exports.TabsRenderer = TabsRenderer;
//# sourceMappingURL=./renderers/Tabs.js.map