fineui/demo/js/core/abstract/combination/demo.combo.js

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