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.
450 lines
15 KiB
450 lines
15 KiB
import { shortcut, Widget, createWidget, createItems, deepClone, map, delay, random, makeArray } from "@/core"; |
|
import { Msg } from "@/base"; |
|
|
|
@shortcut() |
|
export class Func extends Widget { |
|
static xtype = "demo.combo"; |
|
|
|
props = { baseCls: "demo-func" }; |
|
years = [ |
|
{ text: "2010年", value: 2010, iconCls: "close-ha-font" }, |
|
{ text: "2011年", value: 2011 }, |
|
{ text: "2012年", value: 2012, iconCls: "close-ha-font" }, |
|
{ text: "2013年", value: 2013 }, |
|
{ text: "2014年", value: 2014, iconCls: "close-ha-font" }, |
|
{ text: "2015年", value: 2015, iconCls: "close-ha-font" }, |
|
{ text: "2016年", value: 2016, iconCls: "close-ha-font" }, |
|
{ text: "2017年", value: 2017, iconCls: "close-ha-font" } |
|
]; |
|
child = [ |
|
{ |
|
type: "bi.combo_group", |
|
el: { |
|
type: "bi.icon_text_icon_item", |
|
text: "2010年", |
|
value: 2010, |
|
height: 25, |
|
iconCls1: "close-ha-font", |
|
iconCls2: "close-ha-font", |
|
}, |
|
items: [ |
|
{ type: "bi.single_select_item", height: 25, text: "一月", value: 11 }, |
|
{ |
|
type: "bi.icon_text_icon_item", |
|
height: 25, |
|
text: "二月", |
|
value: 12, |
|
iconCls1: "close-ha-font", |
|
iconCls2: "close-ha-font", |
|
children: [{ type: "bi.single_select_item", text: "一号", value: 101, height: 25 }], |
|
} |
|
], |
|
}, |
|
{ text: "2011年", value: 2011 }, |
|
{ text: "2012年", value: 2012, iconCls: "close-ha-font" }, |
|
{ text: "2013年", value: 2013 }, |
|
{ text: "2014年", value: 2014, iconCls: "close-ha-font" }, |
|
{ text: "2015年", value: 2015, iconCls: "close-ha-font" } |
|
]; |
|
months = [ |
|
[{ el: { text: "一月", value: 1 } }, { el: { text: "二月", value: 2 } }], |
|
[{ el: { text: "三月", value: 3 } }, { el: { text: "四月", value: 4 } }], |
|
[{ el: { text: "五月", value: 5 } }, { el: { text: "六月", value: 6 } }], |
|
[{ el: { text: "七月", value: 7 } }, { el: { text: "八月", value: 8 } }], |
|
[{ el: { text: "九月", value: 9 } }, { el: { text: "十月", value: 10 } }], |
|
[{ el: { text: "十一月", value: 11 } }, { el: { text: "十二月", value: 12 } }] |
|
]; |
|
dynamic = [ |
|
{ text: "2010年", value: 1 }, |
|
{ text: "20112222年", value: 2 }, |
|
{ text: "201233333年", value: 3 }, |
|
{ text: "2013年", value: 4 }, |
|
{ text: "2012324年", value: 5 }, |
|
{ text: "2015年", value: 6 }, |
|
{ text: "2016年", value: 7 }, |
|
{ text: "201744444444444444444444444444444444444年", value: 8 } |
|
]; |
|
week = [ |
|
{ text: "周一", value: 100, iconClsLeft: "close-ha-font", iconClsRight: "close-font" }, |
|
{ text: "周二", value: 101, iconClsLeft: "close-ha-font" }, |
|
{ text: "周三", value: 102 }, |
|
{ text: "周四", value: 103, iconClsRight: "close-ha-font" }, |
|
{ text: "周五", value: 104, iconClsLeft: "close-ha-font", iconClsRight: "close-font" }, |
|
{ text: "周六", value: 105, iconClsLeft: "close-font", iconClsRight: "close-ha-font" }, |
|
{ text: "周日", value: 106, iconClsLeft: "close-font" } |
|
]; |
|
|
|
_createTop() { |
|
const self = this; |
|
|
|
const yearCombo = createWidget({ |
|
type: "bi.combo", |
|
el: { |
|
type: "bi.button", |
|
text: "简单下拉框", |
|
height: 30, |
|
}, |
|
popup: { |
|
el: { |
|
type: "bi.button_group", |
|
items: createItems(deepClone(this.years), { |
|
type: "bi.single_select_radio_item", |
|
height: 25, |
|
handler(v) {}, |
|
}), |
|
layouts: [ |
|
{ |
|
type: "bi.vertical", |
|
} |
|
], |
|
}, |
|
}, |
|
width: 200, |
|
}); |
|
|
|
var multiCombo = createWidget({ |
|
type: "bi.combo", |
|
el: { |
|
type: "bi.button", |
|
text: "多选下拉框", |
|
height: 30, |
|
}, |
|
popup: { |
|
el: { |
|
items: createItems(deepClone(this.years), { |
|
type: "bi.multi_select_item", |
|
height: 25, |
|
handler(v) {}, |
|
}), |
|
chooseType: 1, |
|
layouts: [ |
|
{ |
|
type: "bi.vertical", |
|
} |
|
], |
|
}, |
|
tool: { |
|
type: "bi.label", |
|
text: "这是一个下拉框", |
|
height: 35, |
|
}, |
|
tabs: [ |
|
{ |
|
type: "bi.multi_select_bar", |
|
height: 25, |
|
text: "全选", |
|
onCheck(v) { |
|
if (v) { |
|
multiCombo.setValue(map(deepClone(self.years), "value")); |
|
} else { |
|
multiCombo.setValue([]); |
|
} |
|
}, |
|
isAllCheckedBySelectedValue(selectedValue) { |
|
return selectedValue.length == self.years.length; |
|
// return true; |
|
}, |
|
} |
|
], |
|
buttons: [ |
|
{ |
|
type: "bi.text_button", |
|
text: "清空", |
|
handler() { |
|
multiCombo.setValue([]); |
|
}, |
|
}, |
|
{ |
|
type: "bi.text_button", |
|
text: "确定", |
|
handler() { |
|
Msg.alert("", multiCombo.getValue()); |
|
}, |
|
} |
|
], |
|
}, |
|
width: 200, |
|
}); |
|
|
|
const dynamicPopupCombo = createWidget({ |
|
type: "bi.combo", |
|
isNeedAdjustWidth: false, |
|
offsetStyle: "center", |
|
el: { |
|
type: "bi.button", |
|
text: "动态调整宽度", |
|
height: 30, |
|
}, |
|
popup: { |
|
el: { |
|
items: createItems(deepClone(this.dynamic), { |
|
type: "bi.single_select_item", |
|
height: 25, |
|
}), |
|
layouts: [ |
|
{ |
|
type: "bi.vertical", |
|
} |
|
], |
|
}, |
|
}, |
|
width: 200, |
|
}); |
|
|
|
var dynamicCombo = createWidget({ |
|
type: "bi.combo", |
|
el: { |
|
type: "bi.button", |
|
text: "搜索", |
|
height: 30, |
|
}, |
|
popup: { |
|
el: { |
|
type: "bi.loader", |
|
logic: { |
|
dynamic: true, |
|
scrolly: true, |
|
}, |
|
el: { |
|
behaviors: { |
|
redmark() { |
|
return true; |
|
}, |
|
}, |
|
layouts: [ |
|
{ |
|
type: "bi.vertical", |
|
} |
|
], |
|
}, |
|
itemsCreator(options, popuplate) { |
|
const times = options.times; |
|
delay(() => { |
|
if (times == 3) { |
|
popuplate([ |
|
{ |
|
type: "bi.single_select_item", |
|
text: "这是最后一个", |
|
value: "这是最后一个", |
|
py: "zszhyg", |
|
height: 25, |
|
} |
|
]); |
|
|
|
return; |
|
} |
|
|
|
const map = map(makeArray(3, null), (i, v) => { |
|
const val = `${i}_${random(1, 100)}`; |
|
|
|
return { |
|
type: "bi.single_select_item", |
|
text: val, |
|
value: val, |
|
height: 25, |
|
}; |
|
}); |
|
popuplate(map); |
|
}, 1000); |
|
}, |
|
hasNext(options) { |
|
return options.times < 3; |
|
}, |
|
}, |
|
buttons: [ |
|
{ |
|
type: "bi.text_button", |
|
text: "清空", |
|
handler() { |
|
dynamicCombo.setValue([]); |
|
}, |
|
}, |
|
{ |
|
type: "bi.text_button", |
|
text: "确定", |
|
handler() { |
|
Msg.alert("", dynamicCombo.getValue()); |
|
}, |
|
} |
|
], |
|
}, |
|
width: 200, |
|
}); |
|
|
|
return createWidget({ |
|
type: "bi.left", |
|
items: [yearCombo, multiCombo, dynamicPopupCombo, dynamicCombo], |
|
hgap: 20, |
|
vgap: 20, |
|
}); |
|
} |
|
|
|
_createBottom() { |
|
const combo = createWidget({ |
|
type: "bi.combo", |
|
el: { |
|
type: "bi.text_button", |
|
cls: "button-combo", |
|
height: 30, |
|
}, |
|
popup: { |
|
el: { |
|
type: "bi.button_group", |
|
items: createItems(deepClone(this.years), { |
|
type: "bi.single_select_item", |
|
iconWidth: 25, |
|
height: 25, |
|
handler(v) {}, |
|
}), |
|
chooseType: 1, |
|
layouts: [ |
|
{ |
|
type: "bi.vertical", |
|
} |
|
], |
|
}, |
|
}, |
|
width: 200, |
|
}); |
|
combo.setValue(deepClone(this.years)[0].value); |
|
|
|
const childCombo = createWidget({ |
|
type: "bi.combo", |
|
el: { |
|
type: "bi.text_button", |
|
cls: "button-combo", |
|
height: 30, |
|
}, |
|
popup: { |
|
el: { |
|
type: "bi.button_tree", |
|
items: createItems(deepClone(this.child), { |
|
type: "bi.single_select_item", |
|
height: 25, |
|
handler(v) {}, |
|
}), |
|
layouts: [ |
|
{ |
|
type: "bi.vertical", |
|
} |
|
], |
|
}, |
|
}, |
|
width: 200, |
|
}); |
|
childCombo.setValue(deepClone(this.child)[0].items[0].value); |
|
|
|
const monthCombo = createWidget({ |
|
type: "bi.combo", |
|
el: { |
|
type: "bi.button", |
|
text: "多层样式下拉框", |
|
height: 30, |
|
}, |
|
popup: { |
|
el: { |
|
items: createItems(deepClone(this.months), { |
|
type: "bi.single_select_item", |
|
cls: "button-combo", |
|
handler(v) {}, |
|
}), |
|
layouts: [ |
|
{ |
|
type: "bi.adaptive", |
|
items: [ |
|
{ |
|
el: { |
|
type: "bi.table", |
|
columns: 2, |
|
rows: 6, |
|
columnSize: [0.5, "fill"], |
|
rowSize: 30, |
|
}, |
|
left: 4, |
|
right: 4, |
|
top: 2, |
|
bottom: 2, |
|
} |
|
], |
|
}, |
|
{ |
|
type: "bi.absolute", |
|
el: { left: 4, top: 2, right: 4, bottom: 2 }, |
|
} |
|
], |
|
}, |
|
}, |
|
width: 200, |
|
}); |
|
|
|
const yearCombo = createWidget({ |
|
type: "bi.combo", |
|
el: { |
|
type: "bi.button", |
|
text: "自定义控件", |
|
height: 30, |
|
}, |
|
popup: { |
|
el: { |
|
type: "bi.navigation", |
|
direction: "bottom", |
|
logic: { |
|
dynamic: true, |
|
}, |
|
tab: { |
|
height: 30, |
|
items: [ |
|
{ |
|
once: false, |
|
text: "后退", |
|
value: -1, |
|
cls: "mvc-button layout-bg3", |
|
}, |
|
{ |
|
once: false, |
|
text: "前进", |
|
value: 1, |
|
cls: "mvc-button layout-bg4", |
|
} |
|
], |
|
}, |
|
cardCreator(v) { |
|
return createWidget({ |
|
type: "bi.text_button", |
|
whiteSpace: "normal", |
|
text: new Date().getFullYear() + v, |
|
}); |
|
}, |
|
}, |
|
}, |
|
width: 200, |
|
}); |
|
|
|
return createWidget({ |
|
type: "bi.left", |
|
items: [combo, childCombo, monthCombo, yearCombo], |
|
hgap: 20, |
|
vgap: 20, |
|
}); |
|
} |
|
|
|
render() { |
|
return { |
|
type: "bi.grid", |
|
columns: 1, |
|
rows: 2, |
|
items: [ |
|
{ |
|
column: 0, |
|
row: 0, |
|
el: this._createTop(), |
|
}, |
|
{ |
|
column: 0, |
|
row: 1, |
|
el: this._createBottom(), |
|
} |
|
], |
|
}; |
|
} |
|
}
|
|
|