fineui是帆软报表和BI产品线所使用的前端框架。
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

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(),
}
],
};
}
}