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

Ext.define('erp.view.desktop.BoardManageMainPanel', {
    extend: 'Ext.panel.Panel',
    alias:'widget.managemain',
    id:'managemain',
    border: 0,
    hideBorders: true,
    layout: 'border',
    style: {
        'border-left': '1px solid silver'
    },
    initRecord: null,
    initComponent:function(){
        var me = this;
        me.initRecord = null;
        var dataTypeStore = Ext.create('Ext.data.Store', {
            fields: ['type', 'name'],
            data: [
                { "type": "String", "name": "下拉框" },
                { "type": "SQL", "name": "SQL取数" }
            ]
        });
        var dataTypeCombo = new Ext.form.ComboBox({
            store: dataTypeStore,
            valueField: 'type',
            displayField: 'name',
            mode: 'local',
            forceSelection: true,
            editable: false,
            triggerAction: 'all',
            selectOnFocus: true,
            listeners: {
                change: function() {
                    var selected = Ext.getCmp('boardParamsGrid').getSelectionModel().getSelection()[0];
                    selected.set('optionalValues', '');
                }
            }
        });
        me.items = [{
            xtype: 'form',
            id:'boardSetForm',
            region: 'north',
            height: '30%',
            bodyStyle: {
                border: 'none'
            },
            style: {
                border: '1px solid silver'
            },
            bodyPadding: 10,
            defaults: {
                width: 300,
                labelWidth: 80
            },
            items: [{
                xtype: 'hidden',
                name: 'code',
                id:'code'
            },{
                xtype: 'textfield',
                name: 'name',
                allowBlank: false,
                fieldLabel: '名称'
            },{
                xtype:'triggerfield',
                name:'iconCls',
                fieldLabel: '图标',
                triggerCls: "icon-selecter",
                overCls: '',
                hideTrigger : false,
                editable: false,
                allowBlank: false,
                onTriggerClick : function(){
                    me.showIcons(me);
                }
            },{
                xtype: 'radiogroup',
                fieldLabel: '展示方式',
                columns: 2,
                allowBlank: false,
                items: [
                    { boxLabel: '自动切换', name: 'display', inputValue: 'AutoSwitch'},
                    // { boxLabel: '分屏展示', name: 'display', inputValue: 'SplitScreen' }
                ]
            }, {
                xtype:'combo',
                columnWidth:0.75,
                fieldLabel:'数据源',
                name:'dataSourceCode',
                id:'dataSourceCode',
                //value:'UAS',
                editable:false,
                allowBlank: false,
                store:Ext.create('Ext.data.Store',{
                    fields:['username','code','name'],
                    proxy:{
                        type:'ajax',
                        url:'datasource/get',
                        reader: {
                            type: 'json',
                            root: 'content'
                        }
                    },
                    autoLoad: true
                }),
                queryMode: 'local',
                displayField: 'name',
                valueField: 'code'
            }],
            bbar: ['->', {
                xtype: 'button',
                text: '保存',
                width: 100,
                handler: function() {
                    var formpanel = Ext.getCmp('boardSetForm');
                    if(formpanel.isValid()) {
                        formpanel.savePanel(formpanel)
                    }else {
                        Ext.Msg.alert('警告', '有必填项未填!');
                    }
                }
            }, '->'],
            savePanel: function(formpanel) {
                var me = this;
                var managePanel = Ext.getCmp('manage');
                var el = me.getEl();
                if(!managePanel.selectedPanelRecord) {
                    Ext.Msg.confirm('提示', '请先选择左侧面板')
                    return;
                }
                var newRecord = {
                    data: formpanel.getForm().getValues(),
                    getData: function() {
                        return this.data;
                    }
                };

                var values = formpanel.getForm().getValues();

                var type;
                if(values.code){
                    type = 'update';
                }else{
                    type = 'save';
                }
                el.mask('保存中...');
                Ext.Ajax.request({
                    url:'panel/'+type,
                    method:'POST',
                    params:{
                        json:Ext.encode(values)
                    },
                    callback:function(options,success,response){
                        el.unmask();
                        var res = Ext.decode(response.responseText);
                        if(typeof(res.success)!=='undefined'&&res.success==false){
                            Ext.Msg.alert('保存失败',res.message);
                        }else{
                            Ext.Msg.alert('提示','保存成功!');
                            var desktop = Ext.getCmp('desktop');
                            desktop.shortcutsView.store.reload();
                            if(type=='save'){
                                newRecord.data.code = res.code;
                            }
                            var r = {
                                data: newRecord.data,
                                get: function(key) {return this[key]},
                                set: function(key, value) {this[key] = value},
                                getData: function() {return this.data}
                            }
                            // 更新左侧item
                            var leftpanel = Ext.getCmp('manageleft');
                            leftpanel.updateItem(r);

                            me.setPanelDisabled();
                        }
                    }
                });
            }
        }, {
            xtype: 'grid',
            region: 'center',
            height: '70%',
            id:'boardParamsGrid',
            store: Ext.create('Ext.data.JsonStore',{
                fields: ['code', 'name', 'type', 'optionalValues'],
                data: []
            }),
            autoScroll: true,
            forceFit: true,
            columnLines: true,
            columns: [
                { text: 'ID', dataIndex: 'code', hidden: true },
                { text: '参数名称', dataIndex: 'name', flex: 1, editor: 'textfield' },
                { text: '数据类型', dataIndex: 'type', flex: 1, editor: dataTypeCombo, renderer: function (value, cellmeta, record) {
                    var index = dataTypeStore.find(dataTypeCombo.valueField, value);
                    var ehrRecord = dataTypeStore.getAt(index);
                    var returnvalue = "";
                    if (ehrRecord) {
                        returnvalue = ehrRecord.get('name');
                    }
                    return returnvalue;
                }
                },
                { text: '值', dataIndex: 'optionalValues', flex: 4 },
                { xtype:'actioncolumn', align: 'center', width: 50, items:[{
                    iconCls: 'save',
                    tooltip: '保存',
                    handler: function(th, rowIndex, colIndex) {
                        var grid =this.up('grid');
                        var rec = grid.getStore().getAt(rowIndex);
                        var data = Object.assign({}, rec.data);
                        if(data.type == 'String') {
                            data.optionalValues = data.optionalValues instanceof Array ? data.optionalValues : data.optionalValues.split(',')
                        }else if(data.type == 'SQL') {
                            data.optionalValues = data.optionalValues instanceof Array ? data.optionalValues : [data.optionalValues]
                        }
                        grid.saveParam(data);
                    }
                }] }
            ],
            tbar: [{
                xtype: 'button',
                text: '添加参数',
                disabled: true,
                handler: function() {
                    if(!me.initRecord.get('code')) {
                        Ext.Msg.alert('提示', '请先保存面板再执行添加参数操作!');
                        return;
                    }
                    var grid = this.up('grid');
                    var record = {
                        name: '新参数',
                        type: 'String',
                        inputMode: 'Radio',
                        optionalValues: []
                    };
                    grid.addParam(record);
                }
            }, {
                xtype: 'button',
                text: '删除参数',
                disabled: true,
                handler: function() {
                    var grid =this.up('grid');
                    var record = grid.getSelectionModel().getSelection()[0];
                    if(record) {
                        Ext.Msg.confirm('确认', '确定要删除参数  ' + record.get('name') + '?', function(btn) {
                            if(btn == 'yes') {
                                grid.deleteParam(record, grid.getStore().indexOf(record));
                            }
                        });
                    }
                }
            }],
            plugins: [
                Ext.create('Ext.grid.plugin.CellEditing', {
                    clicksToEdit: 2
                })
            ],
            listeners: {
                celldblclick: function (gridview, colEl, colIndex, record, rowEl, rowIndex, e, eOpts) {
                    var types = ['String', 'SQL'];
                    var titles = ['下拉项', 'SQL定义'];
                    var i = types.indexOf(record.get('type'));
                    if(colIndex == 2 && i != -1) { // 值列
                        Ext.create('erp.view.desktop.ParamValueEditor',{
                            title: titles[i],
                            paramRecord: record
                        }).show();
                    }
                },
            },
            loadGridData: function() {
                var grid = this;
                grid.getEl().mask('loading...');
                Ext.Ajax.request({
                    url:'parameter/get/byPanel/' + me.initRecord.get('code'),
                    method:'POST',
                    callback:function(options,success,response){
                        grid.getEl().unmask();
                        if(response.responseText == '') return;
                        var res = JSON.parse(response.responseText);
                        if(success) {
                            res = res instanceof Array ? res : [res];
                            grid.getStore().loadData(res);
                        }else {
                            Ext.Msg.alert('失败', res.message);
                        }
                    }
                });
            },
            addParam: function(record) {
                var grid = this;
                var rowIndex = grid.getStore().add(record);
                grid.getPlugin().startEditByPosition({ row: grid.getStore().getCount() - 1, column: 0 });
            },
            saveParam: function(record) {
                var grid = this;
                var type;
                if(record['code']) {
                    type = 'updatePart';
                }else {
                    type = 'save';
                }
                record.inputMode = 'DropDownBox';
                record.panelCode = me.initRecord.get('code');
                grid.getEl().mask('保存中...');
                Ext.Ajax.request({
                    url:'parameter/' + type,
                    method:'POST',
                    params:{
                        json:Ext.encode(record)
                    },
                    callback:function(options,success,response){
                        grid.getEl().unmask();
                        var res = JSON.parse(response.responseText);
                        if(success) {
                            if(grid) {
                                grid.loadGridData();
                                Ext.Msg.alert('成功', '已更新');
                            }
                        }else {
                            Ext.Msg.alert('失败', res.message);
                        }
                    }
                });
            },
            deleteParam: function(record) {
                var grid = this;
                if(record.get('code')) {
                    grid.getEl().mask('删除中...');
                    Ext.Ajax.request({
                        url:'parameter/delete/' + record.get('code'),
                        method:'POST',
                        callback:function(options,success,response){
                            grid.getEl().unmask();
                            var res = JSON.parse(response.responseText);
                            if(success) {
                                grid.loadGridData();
                            }else {
                                Ext.Msg.alert('失败', res.message);
                            }
                        }
                    });
                }else {
                    grid.getStore().remove(record);
                }
            }
        }];
        this.callParent(arguments);
    },
    load: function(record, item) {
        var me = this;
        me.initRecord = record;
        var formpanel = me.down('form');
        var form = formpanel.getForm();
        me.reset();
        // from添加数据
        form.loadRecord(record);

        // 参数grid添加数据
        var paramGrid = Ext.getCmp('boardParamsGrid');
        paramGrid.loadGridData();
        // 看板grid添加数据
        var boardGrid = Ext.getCmp('tplGrid');
        boardGrid.loadGridData();

        // 设置各个按钮状态
        me.setPanelDisabled();
    },
    setPanelDisabled: function() {
        var me = this;
        var rightpanel = Ext.getCmp('manageright');
        var isDisabled =Ext.getCmp('manage').selectedPanelRecord ? false : true;

        me.setButtonDisabled(isDisabled);
        rightpanel.setButtonDisabled(isDisabled);
    },
    reset: function() {
        var me = this;
        var formpanel = me.down('form');
        var form = formpanel.getForm();
        form.reset();
        var paramgrid = Ext.getCmp('boardParamsGrid');
        paramgrid.getStore().removeAll();
        var boardgrid = Ext.getCmp('tplGrid');
        boardgrid.getStore().removeAll();
    },
    showIcons: function(me) {
        var iconbox = Ext.create('Ext.window.Window', {
            title: '选择图标',
            height: 200,
            width: 400,
            layout: 'fit',
            modal:true,
            items: [{
                xtype: 'dataview',
                overItemCls: 'icon-over',
                selectedItemCls: 'icon-selected',
                trackOver: true,
                itemSelector: 'div.select-icon-item',
                store: Ext.create('Ext.data.Store', {
                    fields: ['name', 'iconCls', 'code'],
                    data: [
                        { iconCls: 'grid-shortcut'},
                        { iconCls: 'accordion-shortcut'},
                        { iconCls: 'cpu-shortcut'},
                        { iconCls: 'notepad-shortcut'}
                    ]
                }),
                tpl: new Ext.XTemplate([
                    '<tpl for=".">',
                    '<div icon="{iconCls}" class="select-icon-item {iconCls}">',
                    '</div>',
                    '</tpl>',
                    '<div class="x-clear"></div>'
                ]),
                renderTo: Ext.getBody(),
                listeners: {
                    afterrender: function() {
                        this.on('itemclick', function(th){
                            var icon = th.getSelectedNodes()[0].getAttribute('icon')
                            me.changeIcon(icon, th.up());
                        }, me);
                    }
                }
            }]
        });
        iconbox.show();
    },
    changeIcon: function(icon, iconbox) {
        var form = this.items.items[0].getForm();
        form.findField('iconCls').setValue(icon);
        iconbox.close();
    },
    setButtonDisabled: function(isDisabled) {
        var grid = this.down('grid');
        var buttons = grid.dockedItems.items[1].items.items;
        Ext.Array.each(buttons,function(btn){
            if(btn.xtype=='button'&&btn.disabled!=isDisabled){
                btn.setDisabled(isDisabled);
            }
        });
    },
});