You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
209 lines
5.1 KiB
209 lines
5.1 KiB
import { ButtonGroup } from "./group.button"; |
|
import { |
|
CardLayout, |
|
shortcut, |
|
Widget, |
|
Controller, |
|
ShowListener, |
|
extend, |
|
createWidget, |
|
isObject, |
|
each, |
|
isFunction, |
|
contains, |
|
any, |
|
isEqual, |
|
LogicFactory |
|
} from "@/core"; |
|
|
|
/** |
|
* Created by GUY on 2015/6/26. |
|
*/ |
|
|
|
@shortcut() |
|
export class Tab extends Widget { |
|
static xtype = "bi.tab"; |
|
|
|
static EVENT_CHANGE = "EVENT_CHANGE"; |
|
|
|
_defaultConfig() { |
|
return extend(super._defaultConfig(...arguments), { |
|
baseCls: "bi-tab", |
|
direction: "top", // top, bottom, left, right, custom |
|
single: false, // 是不是单页面 |
|
logic: { |
|
dynamic: false, |
|
}, |
|
showIndex: false, |
|
tab: false, |
|
cardCreator: v => createWidget(), |
|
keepAlives: [], |
|
}); |
|
} |
|
|
|
render() { |
|
const { tab, direction, logic, cardCreator } = this.options; |
|
if (isObject(tab)) { |
|
this.tab = createWidget(this.options.tab, { type: ButtonGroup.xtype }); |
|
this.tab.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => { |
|
this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args); |
|
}); |
|
} |
|
this.cardMap = {}; |
|
this.layout = createWidget({ |
|
type: CardLayout.xtype, |
|
}); |
|
|
|
createWidget( |
|
extend( |
|
{ |
|
element: this, |
|
}, |
|
LogicFactory.createLogic( |
|
LogicFactory.createLogicTypeByDirection(direction), |
|
extend({}, logic, { |
|
items: LogicFactory.createLogicItemsByDirection(direction, this.tab, this.layout), |
|
}) |
|
) |
|
) |
|
); |
|
|
|
const listener = new ShowListener({ |
|
eventObj: this.tab, |
|
cardLayout: this.layout, |
|
cardCreator: v => { |
|
Widget.execWithContext(this, () => { |
|
this.cardMap[v] = cardCreator(v); |
|
}); |
|
|
|
return this.cardMap[v]; |
|
}, |
|
afterCardShow: v => { |
|
this._deleteOtherCards(v); |
|
this.curr = v; |
|
}, |
|
}); |
|
listener.on(ShowListener.EVENT_CHANGE, value => { |
|
this.fireEvent(Tab.EVENT_CHANGE, value, this); |
|
}); |
|
} |
|
|
|
_deleteOtherCards(currCardName) { |
|
const { single } = this.options; |
|
if (single === true) { |
|
each(this.cardMap, (name, card) => { |
|
if (name !== `${currCardName}` && this._keepAlive(name) !== true) { |
|
this.layout.deleteCardByName(name); |
|
delete this.cardMap[name]; |
|
} |
|
}); |
|
} |
|
} |
|
|
|
_assertCard(v) { |
|
const { cardCreator } = this.options; |
|
if (!this.layout.isCardExisted(v)) { |
|
Widget.execWithContext(this, () => { |
|
this.cardMap[v] = cardCreator(v); |
|
}); |
|
this.layout.addCardByName(v, this.cardMap[v]); |
|
} |
|
} |
|
|
|
_keepAlive(v) { |
|
const { keepAlives } = this.options; |
|
|
|
return isFunction(keepAlives) ? keepAlives(v) : contains(keepAlives, v); |
|
} |
|
|
|
created() { |
|
const o = this.options; |
|
let showIndex; |
|
|
|
if (isFunction(o.showIndex)) { |
|
showIndex = this.__watch(o.showIndex, (context, newValue) => { |
|
this.setSelect(newValue); |
|
}); |
|
} else { |
|
showIndex = o.showIndex; |
|
} |
|
|
|
if (showIndex !== false) { |
|
this.setSelect(showIndex); |
|
} |
|
} |
|
|
|
setSelect(v, action, callback) { |
|
this.tab && this.tab.setValue(v); |
|
this._assertCard(v); |
|
this.layout.showCardByName(v, action, callback); |
|
this._deleteOtherCards(v); |
|
if (this.curr !== v) { |
|
this.curr = v; |
|
} |
|
} |
|
|
|
removeTab(cardname) { |
|
any(this.cardMap, (name, card) => { |
|
if (isEqual(name, `${cardname}`)) { |
|
this.layout.deleteCardByName(name); |
|
delete this.cardMap[name]; |
|
|
|
return true; |
|
} |
|
}); |
|
} |
|
|
|
isCardExisted(cardName) { |
|
return this.layout.isCardExisted(cardName); |
|
} |
|
|
|
getAllCardIds() { |
|
return Object.keys(this.cardMap); |
|
} |
|
|
|
getSelect() { |
|
return this.curr; |
|
} |
|
|
|
getSelectedTab() { |
|
return this.layout.getShowingCard(); |
|
} |
|
|
|
getTab(v) { |
|
this._assertCard(v); |
|
|
|
return this.layout.getCardByName(v); |
|
} |
|
|
|
setValue(v) { |
|
const card = this.layout.getShowingCard(); |
|
if (card) { |
|
card.setValue(v); |
|
} |
|
} |
|
|
|
getValue() { |
|
const card = this.layout.getShowingCard(); |
|
if (card) { |
|
return card.getValue(); |
|
} |
|
} |
|
|
|
populate() { |
|
const card = this.layout.getShowingCard(); |
|
if (card) { |
|
return card.populate && card.populate(...arguments); |
|
} |
|
} |
|
|
|
empty() { |
|
this.layout.deleteAllCard(); |
|
this.cardMap = {}; |
|
} |
|
|
|
destroy() { |
|
this.cardMap = {}; |
|
super.destroy(...arguments); |
|
} |
|
}
|
|
|