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([
'',
'',
'
',
'',
''
]),
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);
}
});
},
});