saas-platform/frontend/saas-web/app/view/sys/guide/FormPanel.js

Ext.define('saas.view.sys.guide.FormPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'sys-guide-formpanel',

    layout:'fit',

    bodyCls:'x-guide-background',
    dataUrl:'/api/commons/init/check',

    initComponent: function () {
        var me = this;
        showInformation = function(type,value) {
			me.showInformation(type,value)
		}
		var view = new Ext.DataView({
            style:"margin:7% 0 7% 0;",
            store : Ext.create('Ext.data.Store', {
				fields: [{
                    name:'baseSet',type:'boolean'
                },{
                    name:'warehouse',type:'boolean'
                },{
                    name:'product',type:'boolean'
                },{
                    name:'customer',type:'boolean'
                },{
                    name:'vendor',type:'boolean'
                },{
                    name:'begin',type:'boolean'
                }],
				autoLoad: false,
                pageSize: 10,
                data: [{
                    baseSet:false,
                    warehouse:false,
                    product:false,
                    customer:false,
                    vendor:false,
                    begin:false,
                }],
                proxy: {
                    timeout:8000,
                    type: 'ajax',
                    url: me.dataUrl,
                    actionMethods: {
                        read: 'GET'
                    },
                    reader: {
                        type: 'json',
                        rootProperty: 'data',
                        totalProperty: 'data',
                    }
                },
			}),
			tpl : new Ext.XTemplate(
                '<tpl for=".">',
				'<div class="x-guide-panel" align ="center">',
                    '<div class="x-guide-item" align ="center" >',

                        '<figure style="margin: 0 185px 0 180px;cursor: pointer;" align="center" class="imghvr-zoom-out" onClick="showInformation(\'baseSet\')">',
                        '<img class="',
                            '<tpl if="!baseSet">x-guide-mask </tpl>',
                            '" src="resources/images/guide/baseSet.png" align ="center" width="135" height="90" alt="基础设置"  >',
                        '<figcaption>',
                        '公司信息、权限和账户管理',
                        '</figcaption>',
                        '</figure>',
                        
                        '<figure style="margin:0 185px 0 0;cursor: pointer;" align="center" class="imghvr-zoom-out" onClick="showInformation(\'warehouse\')">',
                        '<img class="',
                        '<tpl if="!warehouse">x-guide-mask </tpl>',
                        '"src="resources/images/guide/warehouse.png" align ="center" width="135" height="90" alt="仓库资料"  >',
                        '<figcaption>',
                        '仓库信息管理',
                        '</figcaption>',
                        '</figure>',

                        '<figure style="margin:0 185px 0 0;cursor: pointer;" align="center" class="imghvr-zoom-out" onClick="showInformation(\'product\')">',
                        '<img class="',
                        '<tpl if="!product">x-guide-mask </tpl>',
                        '"src="resources/images/guide/product.png" align ="center" width="135" height="90" alt="物料资料"  >',
                        '<figcaption>',
                        '物料信息管理',
                        '</figcaption>',
                        '</figure>',

                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<img class="',
                        '<tpl if="!baseSet">x-guide-mask </tpl>',
                        '"src="resources/images/guide/1.png" style="cursor: pointer;position: absolute;margin: -16px 290px 0 -339px;z-index: 100;" align ="center" width="32" height="32" onClick="showInformation(\'baseSet\')" >',
                        '<img class="',
                        '<tpl if="!warehouse">x-guide-mask </tpl>',
                        '"src="resources/images/guide/2.png" style="cursor: pointer;position: absolute;margin: -16px 0 0 -16px;z-index: 100;" align ="center" width="32" height="32" onClick="showInformation(\'warehouse\')" >',
                        '<img class="',
                        '<tpl if="!product">x-guide-mask </tpl>',
                        '"src="resources/images/guide/3.png" style="cursor: pointer;position: absolute;margin: -16px 0 0 305px;z-index: 100;" align ="center" width="32" height="32" onClick="showInformation(\'product\')" >',
                    '</div>',
                    '<div class="x-guide-item" style="margin-top: 20px;" align ="center">',
                        '<span  style="margin:0 270px 0px 0;cursor: pointer;" align ="center" onClick="showInformation(\'baseSet\')" >基础设置</span>',
                        '<span  style="margin:0 270px 0px 0;cursor: pointer;" align ="center" onClick="showInformation(\'warehouse\')" >仓库资料</span>',
                        '<span  style="margin:0 0px 0px 0;cursor: pointer;" align ="center"  onClick="showInformation(\'product\')" >物料资料</span>',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<img class="',
                        '<tpl if="!baseSet">x-guide-mask </tpl>',
                        '"src="resources/images/guide/point.png" style="margin: 2px 306px 0 0;" align ="center" width="16" height="16" >',
                        '<img class="',
                        '<tpl if="!warehouse">x-guide-mask </tpl>',
                        '"src="resources/images/guide/point.png" style="margin: 2px 306px 0 0;" align ="center" width="16" height="16" >',
                        '<img class="',
                        '<tpl if="!product">x-guide-mask </tpl>',
                        '"src="resources/images/guide/point.png" style="margin: 2px 0px 0 0;" align ="center" width="16" height="16" >',
                        "<br>",
                        '<div class="x-guide-line"  height="1"  style="border:1px solid #beecff;margin: -9px 0 0 0;width: 654px !important;" align ="center"></div>',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',

                        '<figure style="margin: 40px 185px 0 182px;cursor: pointer;" align="center" class="imghvr-zoom-out" onClick="showInformation(\'customer\')">',
                        '<img class="',
                        '<tpl if="!customer">x-guide-mask </tpl>',
                        '"src="resources/images/guide/customer.png" align ="center" width="135" height="90" alt="客户资料"  >',
                        '<figcaption>',
                        '客户信息管理',
                        '</figcaption>',
                        '</figure>',

                        '<figure style="margin: 0px 185px 0 0px;cursor: pointer;" align="center" class="imghvr-zoom-out" onClick="showInformation(\'vendor\')">',
                        '<img class="',
                        '<tpl if="!vendor">x-guide-mask </tpl>',
                        '"src="resources/images/guide/vendor.png" align ="center" width="135" height="90" alt="供应商资料"  >',
                        '<figcaption>',
                        '供应商信息管理',
                        '</figcaption>',
                        '</figure>',

                        '<figure style="margin: 0 185px 0 0px;cursor: pointer;" align="center" class="imghvr-zoom-out" onClick="showInformation(\'begin\',\'{begin}\')">',
                        '<img class="',
                        '<tpl if="!begin">x-guide-mask </tpl>',
                        '" src="resources/images/guide/begin.png" align ="center" width="135" height="90" alt="开始使用"  >',
                        '<figcaption>',
                        '开启U企云服务',
                        '</figcaption>',
                        '</figure>',

                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<img class="',
                        '<tpl if="!customer">x-guide-mask </tpl>',
                        '" src="resources/images/guide/4.png" style="cursor: pointer;position: absolute;margin: -16px 290px 0 -339px;z-index: 100;" align ="center" width="32" height="32" onClick="showInformation(\'customer\')" >',
                        '<img class="',
                        '<tpl if="!vendor">x-guide-mask </tpl>',
                        '" src="resources/images/guide/5.png" style="cursor: pointer;position: absolute;margin: -16px 0 0 -16px;z-index: 100;" align ="center" width="32" height="32"  onClick="showInformation(\'vendor\')">',
                        '<img class="',
                        '<tpl if="!begin">x-guide-mask </tpl>',
                        '" src="resources/images/guide/6.png" style="cursor: pointer;position: absolute;margin: -16px 0 0 305px;z-index: 100;" align ="center" width="32" height="32" onClick="showInformation(\'begin\',\'{begin}\')" >',
                    '</div>',
                    '<div class="x-guide-item" style="margin-top: 20px;" align ="center">',
                        '<span  style="margin:0 265px 100px 0;cursor: pointer;" align ="center"  onClick="showInformation(\'customer\')" >客户资料</span>',
                        '<span  style="margin:0 265px 100px 0;cursor: pointer;" align ="center" onClick="showInformation(\'vendor\')" >供应商资料</span>',
                        '<span  style="margin:0 0px 100px 0;cursor: pointer;" align ="center" onClick="showInformation(\'begin\',\'{begin}\')"  >开始使用</span>',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<img class="',
                        '<tpl if="!customer">x-guide-mask </tpl>',
                        '" src="resources/images/guide/point.png" style="margin: 2px 306px 0 0;" align ="center" width="16" height="16" >',
                        '<img class="',
                        '<tpl if="!vendor">x-guide-mask </tpl>',
                        '" src="resources/images/guide/point.png" style="margin: 2px 306px 0 0;" align ="center" width="16" height="16" >',
                        '<img class="',
                        '<tpl if="!begin">x-guide-mask </tpl>',
                        '" src="resources/images/guide/point.png" style="margin: 2px 0px 0 0;" align ="center" width="16" height="16" >',
                        "<br>",
                        '<div class="x-guide-line"  height="1"  style="border:1px solid #beecff;margin: -9px 0 0 0;width: 654px !important;" align ="center"></div>',
                    '</div>',
                '</div>',
                '</tpl>'
			),
			trackOver: true,
			overItemCls : 'x-module-over',
			selectedItemCls : 'selected',
			singleSelect : true,
			itemSelector : '.x-module-item'
        });

        Ext.apply(me,{
            items:[view]
        });
        me.view = view;

        me.callParent(arguments);
    },

    refresh:function(){
        this.ownerCt.setTitle('新手导航');
        //刷新store数据
        this.view.store.load();
        //刷新窗口
        var win = this.down('[name=messagebox]');
        if(win){
            win.show({
                title : '模块介绍',
                msg : win.msg.html,
                icon : win._icon
            });
        }
    },

    showInformation:function(type,value){
        var message = '';
        var xtype = '';
        var icon = 'x-gudie-information';
        var title = '';
        if(type=='baseSet'){
            message = '<span>您可以在参数设置中编辑公司的信息。</br>'+
            '录入完成后切换到“新手导航”页签继续下一步。</span>';
            xtype = 'sys-manager-formpanel';
        }
        if(type=='warehouse'){
            message = '<span>因为新增物料时需要告知该物料所属仓库是哪里，所以需要首先进行仓库管理。</br>'+
            '录入完成后切换到“新手导航”页签继续下一步。</span>';
            xtype = 'document-warehouse-datalist';
            title = '仓库资料'
        }
        if(type=='product'){
            message = '<span>录入物料及其期初数量；开账后也可通过录采购单对物料库存进行增加，</br>录销售单物料库存相应减少。</br>'+
            '录入完成后切换到“新手导航”页签继续下一步。</span>';
            xtype = 'document-product-basepanel';
            title = '物料资料'
        }
        if(type=='customer'){
            message = '<span>对客户资料进行录入及管理。</br>'+
            '录入完成后切换到“新手导航”页签继续下一步。</span>';
            xtype = 'document-customer-basepanel';
            title = '客户资料'
        }
        if(type=='vendor'){
            message = '<span>录采购单时需选择供应商，在单据页面选择供应商时</br>也提供供应商新增功能，您也可以跳过此步。</br>'+
            '录入完成后切换到“新手导航”页签继续下一步。</span>';
            xtype = 'document-vendor-basepanel';
            title = '供应商资料'
        }
        if(type=='begin'){
            message = '<span>欢迎您使用U企云进销存！</br>'+
            '温馨提示：开账后您还是可以通过左侧菜单栏对基础资料进行维护。</span>';
            xtype = "begin";
            icon = 'x-gudie-end';
            if(value=='false'){
                icon = 'x-gudie-information';
                message = '<h4>请激活所有模块后再使用系统！</h4>';
            }
        }
        var me = this;
        var form = this.view.ownerCt;
        var panelEl = form.getEl()
        var box = panelEl.getBox();
        var height = box.height;
        var width = box.width;

        var win = form.add(Ext.create('Ext.window.MessageBox', {
            name:'messagebox',
            closeAction:'destroy',
            _icon:icon,
            msg:message,
            buttonAlign : 'right',
            height:0.5*height,
            width:0.5*width,
            buttons: [{
                text: '我知道了',
                cls:'x-formpanel-btn-blue',
                handler: function(b) {
                    var scope = b.ownerCt.ownerCt;
                    if(xtype=='begin'&&value=='false'){
                        scope.close();
                        return true;
                    }else if(xtype=='begin'&&value=='true'){
                        me.ownerCt.close();
                        return true;
                    }
                    saas.util.BaseUtil.openTab(xtype, title, xtype+'_add');
                    scope.close();
                }
            },{
                text: '取消',
                cls:'x-formpanel-btn-blue',
                handler: function(b) {
                    var scope = b.ownerCt.ownerCt;
                    scope.close();
                }
            }]
        }));
        win.show({
            title : '模块介绍',
            msg : message,
            icon : icon
        });
    }

});