kanban-parent/kanban-console/src/main/webapp/resources/app/view/desktop/BoardParamWindow.js

Ext.define('erp.view.desktop.BoardParamWindow',{
    extend:'Ext.window.Window',
    alias:'widget.boardparamwin',
    width:800,
    height:450,
    modal:true,
    layout:'border',
    id:'template',
    resData:null,
    border: 0,
    initComponent:function(){
        var me = this;
        me.items = [{
            xtype:'form',
            id:'paramForm',
            region: 'center',
            layout:'column',
            autoScroll: true,
            defaults:{
                columnWidth:1,
                margin:'5 5 5 5'
            },
            items:[{
                xtype:'fieldset',
                title:'参数设置',
                hidden: true
            },{
                xtype:'fieldset',
                title:'运行设置',
                layout:'column',
                defaults:{
                },
                items:[{
                    xtype:'numberfield',
                    id:'refreshFrequency',
                    name:'refreshFrequency',
                    fieldLabel:'刷新/切换频率(秒/次)',
                    value:'5',
                    minValue:1,
                    allowBlank:false
                },/*{
                    xtype:'numberfield',
                    id:'switchFrequency',
                    name:'switchFrequency',
                    fieldLabel:'切换频率(秒/次)',
                    minValue:3,
                    value:'30',
                    minValue:1
                }*/]
            }],
            /**
             * 添加面板参数下拉组件
             */
            addParamCombo: function() {
                var form = this;
                var items = me.resData.parameters;
                var paramFieldSet = form.items.items[0];
                paramFieldSet.removeAll();
                var comboxs = [];
                Ext.Array.each(items, function(item, index) {
                    var data = item.optionalValues ? item.optionalValues.map(function (v) {
                        return {
                            value: v,
                            name: v
                        }
                    }) : []
                    var combox = new Ext.form.field.ComboBox({
                        fieldLabel: item.name,
                        name: item.code,
                        store: Ext.create('Ext.data.Store', {
                            fields: ['value', 'name'],
                            data: data
                        }),
                        queryMode: 'local',
                        displayField: 'name',
                        valueField: 'value',
                        value: item.value || '',
                        allowBlank: false,
                    });
                    comboxs.push(combox);
                });
                paramFieldSet.add(comboxs);
                if(comboxs.length != 0) {
                    paramFieldSet.show();
                }
                form.doLayout();
            }
        },{
            xtype: 'grid',
            id:'modelGrid',
            selectedIndex: 1,
            region: 'east',
            width: 300,
            store : Ext.create('Ext.data.Store', {
                fields : ['code', 'content', 'enabled', 'description', 'name','title','panelCode'],
                data: []
            }),
            selModel: Ext.create('Ext.selection.CheckboxModel'),
            columnLines:true,
            columns: [
                { text: 'ID', dataIndex: 'code', flex: 1, hidden: true },
                {
                    text: '看板名称', dataIndex: 'name', flex: 1, editor: 'textfield', renderer: function (v, metadata, record, rowIndex, columnIndex, store) {
                    metadata.tdAttr = 'data-qtip="' + (v || '') + '"';
                    return v;
                }
                }
            ],
            listeners: {
                afterLayout: function(grid) {
                    grid.getSelectionModel().deselectAll();
                    grid.selectModel();
                },
            },
            loadGridData: function() {
                var grid = this;
                res = me.resData.relatedKanbans || [];
                grid.getStore().loadData(res);
                grid.getStore().sort('enabled', 'DESC');
            },
            selectModel: function() {
                var grid = this;
                if(!me.resData) {
                    return;
                }
                var selectedModels = me.resData.relatedKanbans || [];
                var modelStore = grid.getStore();
                var records = [];
                selectedModels.map(function(model) {
                    var record = modelStore.findRecord('code',model['code']);
                    if(record && model.enabled) {
                        records.push(record);
                    }
                });
                grid.getSelectionModel().select(records || []);
            },
            getSelectedModels: function() {
                var grid = this;
                var selectedModels = grid.getSelectionModel().getSelection();
                return selectedModels || [];
            },
        }];
        me.callParent(arguments);
    },
    buttonAlign: 'center',
    buttons:[{
        text:'确定',
        formBind:true,
        handler:function(){
            var me = Ext.getCmp('template');
            var formpanel = Ext.getCmp('paramForm');
            if(formpanel.isValid()) {
				var modelGrid = Ext.getCmp('modelGrid');
				if(modelGrid.getSelectedModels().length == 0) {
					showErrorMsg('警告','请至少选中一个看板!');
					return;
				}
				if(!me.checkFrequency()) {
					return;
				}
				me.setFullScreen();
                me.savePanelInstance();
            }else {
                showErrorMsg('警告', '有必填项未填!');
            }
        }
    },{
        text:'取消',
        handler:function(btn){
            btn.ownerCt.ownerCt.close()
        }
    }],
    listeners: {
        afterLayout: function(me) {
            me.init();
        }
    },
    load: function() {
        var me = this;
        // 添加参数下拉框
        var paramForm = Ext.getCmp('paramForm');
        paramForm.addParamCombo();
        // 读取看板grid数据
        var modelGrid = Ext.getCmp('modelGrid');
        modelGrid.loadGridData();
    },
    init: function() {
        var me = this;
        var record = me.record;
        var code = record.get('code');
        var view = Ext.getCmp('desktopDataView');

        view.getEl().mask('loading...');
        if(me.record){
            Ext.Ajax.request({
                url:'panelInstance/get/byPanel/'+code,
                method:'POST',
                callback:function(options, success, response){
                    view.getEl().unmask();
                    if(response.responseText){
                        var res = Ext.decode(response.responseText);
                        if(success) {
                            var form = Ext.getCmp('paramForm');
                            var formData = {
                                data: {
                                    refreshFrequency: res.refreshFrequency,
                                    switchFrequency: res.refreshFrequency,
                                },
                                getData: function() {
                                    return this.data
                                }
                            }
                            form.loadRecord(formData);
                            res.parameters = Ext.decode(res.parameters) || [];
                            me.resData = res;
                            me.load();
                        }else {
                            showErrorMsg('失败', res.message, Ext.getCmp('template'));
                        }
                    }
                }
            });
        }
    },

    /**
     * 生成面板实例后打开展示界面
     */
    savePanelInstance: function() {
        var me = this;
        
        var params = me.getBoardConfig();
        Ext.Ajax.request({
            url:'panelInstance/updatePart/',
            method:'POST',
            params:{
                json:Ext.encode(params)
            },
            callback:function(options,success,response){
                var res = JSON.parse(response.responseText);
                if(success) {
                    me.viewBoard();
                }else {
                    showErrorMsg('失败', res.message);
                }
            }
        });
    },
    getBoardConfig: function() {
        var me = this;
        var modelGrid = Ext.getCmp('modelGrid');
        var selectedModelCodes = modelGrid.getSelectedModels().map(function(model) {
            return model.get('code');
        });
        var relatedKanbans = me.resData.relatedKanbans.map(function(kanban) {
            kanban.enabled = selectedModelCodes.indexOf(kanban.code) != -1;
            return kanban;
        });
        var paramForm = Ext.getCmp('paramForm');
        var config = paramForm.getForm().getValues();

        var parameters = me.resData.parameters.map(function(p) {
            p.value = config[p.code];
            return p
        })
        return {
            code: me.resData.code,
            parameters: Ext.encode(parameters),
            refreshFrequency: config.refreshFrequency,
            switchFrequency: config.refreshFrequency,
            relatedKanbans: relatedKanbans
        }
    },
    checkFrequency:function(){
        var me = this;
        var refreshFreq = Ext.getCmp('refreshFrequency').value;
        var switchFreq = Ext.getCmp('refreshFrequency').value;
        if(switchFreq){
            if(refreshFreq>switchFreq){
                showErrorMsg('警告','刷新频率必须小于切换频率!');
                return false;
            }
        }else {
            var modelGrid = Ext.getCmp('modelGrid');
            // 看板数量为2个以上时切换频率不可为空
            if(modelGrid.getSelectedModels().length >= 2) {
                showErrorMsg('警告','切换频率不可为空');
                return false;
            }
        }
        return true;
    },
    viewBoard:function(){
        var me = this;
        // Ext.getCmp('template').close();
        Ext.create('erp.view.desktop.BoardWindow',{
            instanceCode:me.resData.code,
            html:'<iframe src="boardshow?code=' + me.resData.code + '" width="100%" height="100%" style="border:none"></iframe>'
        }).show();
    },
    setFullScreen: function () {
        var element = document.documentElement;
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }
});