ibiz-tool-bar.component.js 12.7 KB
Newer Older
MoneyQ's avatar
MoneyQ committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
"use strict";
Vue.component('ibiz-tool-bar', {
    template: "\n    <div>\n        <template v-for=\"item in toolbar.items\">\n            <template v-if=\"item.type == 'SEPERATOR'\">\n                <span class=\"toolbar-seperator\">|</span>\n            </template>\n            <template v-else>\n                <!--  \u5E26\u5206\u7EC4\u6309\u94AE\uFF1ABEGIN  -->\n                <template v-if=\"item.items && item.items.length > 0\">\n                    <template v-if=\"item._dataaccaction\">\n                        <dropdown trigger=\"click\" transfer=\"true\" @on-click=\"menuOnClick\">\n                            <i-button :title=\"!item.showCaption ? item.caption : ''\" :disabled=\"item.disabled\"\n                                :class=\"item.class\">\n                                <i v-if=\"item.showIcon\" :class=\"item.iconClass\"></i>\n                                <span v-if=\"item.showCaption\">{{item.caption}}</span>\n                                <icon type=\"ios-arrow-down\"></icon>\n                            </i-button>\n\n                            <dropdown-menu slot=\"list\">\n                                <template v-for=\"submenu1 in item.items\">\n                                    <!--  \u5E26\u5206\u7EC4\u6309\u94AE\uFF1ABEGIN  -->\n                                    <template v-if=\"submenu1.items && submenu1.items.length > 0\">\n                                        <template v-if=\"submenu1._dataaccaction\">\n                                            <dropdown transfer=\"true\">\n\n                                                <dropdown-item :title=\"!submenu1.showCaption ? submenu1.caption : ''\"\n                                                    :disabled=\"submenu1.disabled\" :class=\"submenu1.class\">\n                                                    <i v-if=\"submenu1.showIcon\" :class=\"submenu1.iconClass\"></i>\n                                                    <span v-if=\"submenu1.showCaption\">{{submenu1.caption}}</span>\n                                                    <icon type=\"ios-arrow-forward\"></icon>\n                                                </dropdown-item>\n\n                                                <dropdown-menu slot=\"list\">\n                                                    <template v-for=\"submenu2 in submenu1.items\">\n                                                        <template v-if=\"submenu2._dataaccaction\">\n                                                            <dropdown-item\n                                                                :title=\"!submenu2.showCaption ? submenu2.caption : ''\"\n                                                                :disabled=\"submenu2.disabled\" :class=\"submenu2.class\"\n                                                                :name=\"submenu2.name\">\n                                                                <i v-if=\"submenu2.showIcon\" :class=\"submenu2.iconClass\"></i>\n                                                                <span\n                                                                    v-if=\"submenu2.showCaption\">{{submenu2.caption}}</span>\n                                                            </dropdown-item>\n                                                        </template>\n                                                    </template>\n                                                </dropdown-menu>\n                                            </dropdown>\n                                        </template>\n                                    </template>\n                                    <!--  \u5E26\u5206\u7EC4\u6309\u94AE\uFF1AEND  -->\n                                    <!--  \u4E0D\u5E26\u5206\u7EC4\u6309\u94AE\uFF1ABEGIN  -->\n                                    <template v-else>\n                                        <template v-if=\"submenu1._dataaccaction\">\n\n                                            <template v-if=\"submenu1.uiaction.tag == 'ExportExcel'\">\n                                                <dropdown trigger=\"custom\" transfer=\"true\"\n                                                    :visible=\"toolbar.exportMenuState\" @on-clickoutside=\"onClickoutside\"\n                                                    placement=\"bottom-start\" transfer=\"true\"\n                                                    transfer-class-name=\"second-transter-exportexcel-content\">\n                                                    <dropdown-item>\n                                                        <span @click=\"toolbar.exportMenuState = !toolbar.exportMenuState\">\n                                                            <i v-if=\"submenu1.showIcon\" :class=\"submenu1.iconClass\"></i>\n                                                            <span v-if=\"submenu1.showCaption\">{{submenu1.caption}}</span>\n                                                        </span>\n                                                    </dropdown-item>\n\n                                                    <dropdown-menu slot=\"list\">\n                                                        <dropdown-item>\n                                                            <p @click=\"toolbar.itemExportExcel('ExportExcel', 'all')\">\n                                                                {{submenu1.caption}}\u5168\u90E8(\u6700\u5927\u5BFC\u51FA{{submenu1.MaxRowCount}}\u884C)</p>\n                                                        </dropdown-item>\n                                                        <dropdown-item>\n                                                            <p @click=\"toolbar.itemExportExcel('ExportExcel')\">\n                                                                {{submenu1.caption}}\u5F53\u524D\u9875</p>\n                                                        </dropdown-item>\n                                                        <dropdown-item>\n                                                            {{submenu1.caption}}\u7B2C\n                                                            <i-input class=\"exportStartPage\"\n                                                                v-model=\"toolbar.exportStartPage\" style=\"width: 30px;\">\n                                                            </i-input>\n                                                            <i-input class=\"exportEndPage\" v-model=\"toolbar.exportEndPage\"\n                                                                style=\"width: 30px;\"></i-input>\n                                                            <i-button\n                                                                @click=\"toolbar.itemExportExcel('ExportExcel', 'custom')\">\n                                                                Go!</i-button>\n                                                        </dropdown-item>\n                                                    </dropdown-menu>\n                                                </dropdown>\n\n                                            </template>\n\n                                            <template v-else>\n\n                                                <dropdown-item :title=\"!submenu1.showCaption ? submenu1.caption : ''\"\n                                                    :disabled=\"submenu1.disabled\" :class=\"submenu1.class\"\n                                                    :name=\"submenu1.name\">\n                                                    <i v-if=\"submenu1.showIcon\" :class=\"submenu1.iconClass\"></i>\n                                                    <span v-if=\"submenu1.showCaption\">{{submenu1.caption}}</span>\n                                                </dropdown-item>\n                                            </template>\n\n                                        </template>\n                                    </template>\n                                    <!--  \u4E0D\u5E26\u5206\u7EC4\u6309\u94AE\uFF1AEND  -->\n                                </template>\n                            </dropdown-menu>\n                        </dropdown>\n                    </template>\n                </template>\n                <!--  \u5E26\u5206\u7EC4\u6309\u94AE\uFF1AEND  -->\n                <!--  \u4E0D\u5E26\u5206\u7EC4\u6309\u94AE\uFF1ABEGIN  -->\n                <template v-else>\n                    <template v-if=\"item._dataaccaction\">\n\n                        <template v-if=\"item.uiaction.tag == 'ExportExcel'\">\n\n                            <dropdown trigger=\"custom\" transfer=\"true\" :visible=\"toolbar.exportMenuState\"\n                                @on-clickoutside=\"onClickoutside\">\n                                <i-button :title=\"!item.showCaption ? item.caption : ''\" :disabled=\"item.disabled\"\n                                    :class=\"item.class\" @click=\"toolbar.exportMenuState = !toolbar.exportMenuState\">\n                                    <i v-if=\"item.showIcon\" :class=\"item.iconClass\"></i>\n                                    <span v-if=\"item.showCaption\">{{item.caption}}</span>\n                                    <icon type=\"ios-arrow-down\"></icon>\n                                </i-button>\n\n                                <dropdown-menu slot=\"list\">\n                                    <dropdown-item>\n                                        <p @click=\"toolbar.itemExportExcel('ExportExcel', 'all')\">\n                                            {{item.caption}}\u5168\u90E8(\u6700\u5927\u5BFC\u51FA{{item.MaxRowCount}}\u884C)</p>\n                                    </dropdown-item>\n                                    <dropdown-item>\n                                        <p @click=\"toolbar.itemExportExcel('ExportExcel')\">{{item.caption}}\u5F53\u524D\u9875</p>\n                                    </dropdown-item>\n                                    <dropdown-item>\n                                        {{item.caption}}\u7B2C\n                                        <i-input class=\"exportStartPage\" v-model=\"toolbar.exportStartPage\"\n                                            style=\"width: 30px;\"></i-input>\n                                        <i-input class=\"exportEndPage\" v-model=\"toolbar.exportEndPage\" style=\"width: 30px;\">\n                                        </i-input>\n                                        <i-button @click=\"toolbar.itemExportExcel('ExportExcel', 'custom')\">Go!</i-button>\n                                    </dropdown-item>\n                                </dropdown-menu>\n                            </dropdown>\n\n                        </template>\n\n                        <template v-else>\n                            <i-button :title=\"!item.showCaption ? item.caption : ''\" :disabled=\"item.disabled\"\n                                :class=\"item.class\" @click=\"toolbar.itemclick(item)\">\n                                <i v-if=\"item.showIcon\" :class=\"item.iconClass\"></i>\n                                <span v-if=\"item.showCaption\">{{item.caption}}</span>\n                            </i-button>\n                        </template>\n                    </template>\n                </template>\n                <!--  \u4E0D\u5E26\u5206\u7EC4\u6309\u94AE\uFF1AEND  -->\n            </template>\n        </template>\n    </div>\n    ",
    props: ['toolbar', 'viewController'],
    data: function () {
        var data = {};
        return data;
    },
    methods: {
        getItem: function (items, name) {
            var item = {};
            var _this = this;
            items.some(function (_item) {
                if (Object.is(_item.name, name)) {
                    Object.assign(item, _item);
                    return true;
                }
                if (_item.items && _item.items.length > 0) {
                    var subItem = _this.getItem(_item.items, name);
                    if (Object.keys(subItem).length > 0) {
                        Object.assign(item, subItem);
                        return true;
                    }
                }
            });
            return item;
        },
        menuOnClick: function (name) {
            if (!this.toolbar) {
                return;
            }
            var item = this.getItem(this.toolbar.getItems(), name);
            if (Object.keys(item).length === 0) {
                return;
            }
            this.toolbar.itemclick(item);
        },
        onClickoutside: function ($event) {
            if ($event && $event.target && $event.target.className.indexOf('ivu-input') !== -1) {
                this.toolbar.exportMenuState = true;
            }
            else {
                this.toolbar.exportMenuState = false;
            }
        }
    }
});