saas-platform/frontend/saas-web/app/view/home/InfoCard.js

Ext.define('saas.view.home.InfoCard', {
    extend: 'Ext.panel.Panel',
    xtype: 'infocard',

    id: 'infocard',

    requires: [
        'Ext.layout.container.Card'
    ],

    BaseUtil: Ext.create('saas.util.BaseUtil'),

    layout: 'card',
    height: 150,

    cardTpl: [
        '<div class="x-row">',
        '<tpl for=".">',
        '<div class="x-col">',
        '<div>',
        '<div class="x-box ',
        '<tpl if="color"> x-bg-{color}</tpl>',
        '<tpl else"> x-bg-default</tpl>',
        '">',
        '<h3>{title}</h3>',
        '<p>{content}</p>',
        '</div>',
        '</div>',
        '</div>',
        '</tpl>',
        '</div>'
    ],

    initComponent: function () {
        var me = this;

        var companyId = saas.util.BaseUtil.getCurrentUser().companyId;

        Ext.apply(me, {
            cards: {
                unship: {
                    title: '未出货销售订单',
                    color: 'yellow',
                    viewType: 'sale-sale-querypanel',
                    condition: 'sale.companyid=' + companyId + ' and sa_statuscode=\'AUDITED\' and exists (select 1 from saledetail detail where sd_id=saledetail.sd_id and  IFNULL(sd_sendqty,0)<ifnull(sd_qty,0) and TO_DAYS(sd_delivery)-TO_DAYS(now())<= 7)'
                },
                unstorage: {
                    title: '未入库采购订单',
                    color: 'purple',
                    viewType: 'purchase-purchase-querypanel',
                    condition: 'purchase.companyId=' + companyId + ' and pu_statuscode=\'AUDITED\' and exists (select 1 from purchasedetail detail where pd_id=purchasedetail.pd_id and IFNULL(pd_acceptqty,0) < ifnull(pd_qty,0) and TO_DAYS(PD_DELIVERY)-TO_DAYS(now()) <= 7)'
                },
                unpay: {
                    title: '未收款出货',
                    color: 'red',
                    viewType: 'purchase-purchasein-querypanel',
                    condition: 'pi_class in(\'采购验收单\',\'采购验退单\') and prodinout.companyId=' + companyId + ' and TO_DAYS(pi_date+ifnull(ve_promisedays,0))-TO_DAYS(now()) <= 7 and exists (select 1 from subledger where sl_code=pi_inoutno and sl_kind=pi_class and subledger.companyId=' + companyId + ' and ifnull(sl_namount,0)<>0)'
                },
                unreceive: {
                    title: '未审核出货单',
                    color: 'pink',
                    viewType: 'sale-saleout-querypanel',
                    condition: 'pi_class in(\'出货单\',\'销售退货单\') and prodinout.companyId=' + companyId + ' and TO_DAYS(pi_date+ifnull(cu_promisedays,0))-TO_DAYS(now()) <= 7 and exists (select 1 from subledger where sl_code=pi_inoutno and sl_kind=pi_class and subledger.companyId=' + companyId + ' and ifnull(sl_namount,0)<>0)'
                },
                unauditcheck: {
                    title: '未审核验收单',
                    color: 'blue',
                    viewType: 'purchase-purchasein-querypanel',
                    condition: 'pi_statuscode<>\'AUDITED\' and pi_class=\'采购验收单\' and prodinout.companyId=' + companyId
                },
                unauditship: {
                    title: '未审核出货',
                    color: 'default',
                    viewType: 'purchase-purchasein-querypanel',
                    condition: 'pi_statuscode<>\'AUDITED\' and pi_class=\'出货单\' and prodinout.companyId=' + companyId
                }
            },
            userCls: 'x-info-card ' + me.userCls,
            lbar: [{
                itemId: 'card-prev',
                hidden: true,
                cls: 'x-scroller-button x-scroller-button-left',
                handler: function() {
                    me. showPrevious();
                },
                disabled: true
            }],
            rbar: [{
                itemId: 'card-next',
                hidden: true,
                cls: 'x-scroller-button x-scroller-button-right',
                handler: function() {
                    me.showNext();
                }
            }],
            items: [],
        });

        me.callParent(arguments);
    },

    listeners: {
        boxready: function(m) {
            m.initCardItems();
        }
    },

    initCardItems: function() {
        this.addCardItems({});
    },

    addCardItems: function(infoData) {
        infoData = infoData || {};
        var me = this,
        p = me.up('home'),
        cards = me.cards,
        datas = [],
        items = [];
        size = Math.ceil(me.body.el.getBox().width / 235);

        me.removeAll();

        var cl = Ext.Object.getAllKeys(cards);

        for(var x = 0; x < cl.length;) {
            var d = [];
            for(var y = 0; y < size && x < cl.length; y++) {
                var key = cl[x];
                d.push(Ext.merge(cards[key], {
                    content: infoData[key] || 0
                }));
                x++;
            }
            datas.push(d);
        }

        Ext.Array.each(datas, function(d, i) {

            var store = Ext.create('Ext.data.Store', {
                fields: ['title', 'content', 'color'],
                data: d,
            });

            var view = Ext.create('Ext.view.View', {
                store: store,
                tpl: new Ext.XTemplate(me.cardTpl),
                itemSelector: 'div.x-box',
                listeners: {
                    itemclick: function(th, record, item, index, e, eOpts) {
                        saas.util.BaseUtil.openTab(record.get('viewType'), record.get('title'), record.get('id'), {
                            simpleMode: true,
                            defaultCondition: record.get('condition')
                        });
                    }
                }
            });

            var item = {
                xtype: 'panel',
                id: 'card-' + i,
                items: view
            };
            me.add(item);
        });

        if(datas.length > 1) {
            me.showPageTrigger();
        }

        me.updateLayout(true);
    },

    showPageTrigger: function() {
        var me = this;
        me.down('#card-prev').show();
        me.down('#card-next').show();
    },

    showNext: function () {
        this.doCardNavigation(1);
    },

    showPrevious: function (btn) {
        this.doCardNavigation(-1);
    },

    doCardNavigation: function (incr) {
        var me = this;
        var l = me.getLayout();
        var i = l.activeItem.id.split('card-')[1];
        var c = me.items.items.length;
        var next = parseInt(i, 10) + incr;
        l.setActiveItem(next);

        me.down('#card-prev').setDisabled(next === 0);
        me.down('#card-next').setDisabled(next === (c-1));
    }
});