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',
    //工具类
    FormUtil: Ext.create('saas.util.FormUtil'),
    BaseUtil: Ext.create('saas.util.BaseUtil'),
    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" >',
                        '<img class="',
                        '<tpl if="!baseSet">x-guide-mask </tpl>',
                        '" src="resources/images/guide/baseSet.png" style="margin:0 185px 0 0;" align ="center" width="135" height="90" alt="基础设置" onClick="showInformation(\'baseSet\')" >',
                        '<img class="',
                        '<tpl if="!warehouse">x-guide-mask </tpl>',
                        '"src="resources/images/guide/warehouse.png" style="margin:0 185px 0 0;" align ="center" width="135" height="90" alt="仓库资料" onClick="showInformation(\'warehouse\')" >',
                        '<img class="',
                        '<tpl if="!product">x-guide-mask </tpl>',
                        '"src="resources/images/guide/product.png" align ="center" width="135" height="90" alt="物料资料" onClick="showInformation(\'product\')" >',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<img class="',
                        '<tpl if="!baseSet">x-guide-mask </tpl>',
                        '"src="resources/images/guide/1.png" style="margin: -20px 290px 0 0;" 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="margin: -20px 290px 0 0;" 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="margin: -20px 0px 0 0;" align ="center" width="32" height="32" onClick="showInformation(\'product\')" >',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<span  style="margin:0 270px 0px 0;" align ="center" onClick="showInformation(\'baseSet\')" >基础设置</span>',
                        '<span  style="margin:0 270px 0px 0;" align ="center" onClick="showInformation(\'warehouse\')" >仓库资料</span>',
                        '<span  style="margin:0 0px 0px 0;" 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 #E4F7FF;margin: -9px 0 0 0;width: 654px !important;" align ="center"></div>',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<img class="',
                        '<tpl if="!customer">x-guide-mask </tpl>',
                        '"src="resources/images/guide/customer.png" style="margin:50px 185px 0 0;" align ="center" width="135" height="90" alt="客户资料" onClick="showInformation(\'customer\')" >',
                        '<img class="',
                        '<tpl if="!vendor">x-guide-mask </tpl>',
                        '"src="resources/images/guide/vendor.png" style="margin:50px 185px 0 0;" align ="center" width="135" height="90" alt="供应商资料" onClick="showInformation(\'vendor\')" >',
                        '<img class="',
                        '<tpl if="!begin">x-guide-mask </tpl>',
                        '" src="resources/images/guide/begin.png" style="margin:50px 0 0 0;" align ="center" width="135" height="90" alt="开始使用" onClick="showInformation(\'begin\',\'{begin}\')" >',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<img class="',
                        '<tpl if="!customer">x-guide-mask </tpl>',
                        '" src="resources/images/guide/4.png" style="margin: -20px 290px 0 0;" 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="margin: -20px 290px 0 0;" 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="margin: -20px 0px 0 0;" align ="center" width="32" height="32" onClick="showInformation(\'begin\',\'{begin}\')" >',
                    '</div>',
                    '<div class="x-guide-item" align ="center">',
                        '<span  style="margin:0 265px 100px 0;" align ="center"  onClick="showInformation(\'customer\')" >客户资料</span>',
                        '<span  style="margin:0 265px 100px 0;" align ="center" onClick="showInformation(\'vendor\')" >供应商资料</span>',
                        '<span  style="margin:0 0px 100px 0;" 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 #E4F7FF;margin: -9px 0 0 0;width: 654px !important;" align ="center"></div>',
                    '</div>',
                '</div>',
                '</tpl>'
			),
			trackOver: true,
			overItemCls : 'x-module-over',
			selectedClass : 'selected',
			singleSelect : true,
			itemSelector : '.x-module-item'
        });

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

        me.callParent(arguments);
    },

    refresh:function(){
        this.ownerCt.setTitle('新手指引');
        this.view.store.load();
        //刷新store数据
    },

    showInformation:function(type,value){
        var message = '';
        var xtype = '';
        var icon = 'x-gudie-information';
        var title = '';
        if(type=='baseSet'){
            message = '<h4>您可以在参数设置中编辑公司的信息。</br>'+
            '录入完成后切换到“新手导航”页签继续下一步。</h4>';
            xtype = 'sys-config-formpanel';
        }
        if(type=='warehouse'){
            message = '<h4>因为新增物料时需要告知该物料所属仓库是哪里，所以需要首先进行仓库管理。</br>'+
            '录入完成后切换到“新手导航”页签继续下一步。</h4>';
            xtype = 'other-warehouse';
            title = '仓库资料'
        }
        if(type=='product'){
            message = '<h4>录入物料及其期初数量；开账后也可通过录采购单对物料库存进行增加，</br>录销售单物料库存相应减少。</br>'+
            '录入完成后切换到“新手导航”页签继续下一步。</h4>';
            xtype = 'document-product-basepanel';
            title = '物料资料'
        }
        if(type=='customer'){
            message = '<h4>对客户资料进行录入及管理。</br>'+
            '录入完成后切换到“新手导航”页签继续下一步。</h4>';
            xtype = 'document-customer-basepanel';
            title = '客户资料'
        }
        if(type=='vendor'){
            message = '<h4>录采购单时需选择供应商，在单据页面选择供应商时</br>也提供供应商新增功能，您也可以跳过此步。</br>'+
            '录入完成后切换到“新手导航”页签继续下一步。</h4>';
            xtype = 'document-vendor-basepanel';
            title = '供应商资料'
        }
        if(type=='begin'){
            message = '<h4>欢迎您使用优企云进销存！</br>'+
            '温馨提示：开账后您还是可以通过左侧菜单栏对基础资料进行维护。</h4>';
            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', {
            msg:message,
            buttonAlign : 'right',
            height:0.5*height,
            width:0.5*width,
            buttons: [{
                text: '我知道了',
                cls:'x-formpanel-btn-orange',
                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;
                    }
                    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
        });
    }

});