qdhezheng-license-web/public/v1/report/views/pages/gridstylewindow/gridstylewindow.js

/**
 * grid样式保存窗口
 * @description 将用户自己设置的grid样式保存到后台，下次打开界面时就是用户保存的界面状态
 */
define(function(require, exports, module) {

	require('./gridstylewindow.css')
	var Window = require('../window/window'),
		tpl = require('./gridstylewindow.tpl'),
		ToolbarAdapter = require('../../../adapter/toolbarAdapter'),
    	GridAdapter = require('../../../adapter/datagridAdapter'),
    	editIndex = undefined,
		self = null;

	function GridStyleWindow(args) {
		this.options = {
            title: '报表样式设置',
            content: tpl,
            width: 800,
            top: window.scrollY + 100,
            height: 600,
            modal: true,
            closed: true,
            closable: true,
            draggable: true,
            data: null
        }

        self = this;
        this.args = args;
        this.id = createGuid();

		Window.call(this, this.options);
	}

	inherits(GridStyleWindow, Window);

	GridStyleWindow.prototype.init = function() {
		
	};

	GridStyleWindow.prototype.open = function() {
		Window.prototype.open.call(this);
	};

	GridStyleWindow.prototype.customerize = function() {
		this.toolContainer = this.getElement('.fdpr-gridstyle-toolbar');
        this.gridContainer = this.getElement('.fdpr-gridstyle-main');
        this.initToolbar();
        this.initGrid();
        this.setVkEvent();
	};

    GridStyleWindow.prototype.setVkEvent = function() {
        var panel = self.$grid.datagrid('getPanel');
        self.$container.on('focus', 'input.datagrid-editable-input', function(e) {
            window.openVK(e.target, '1');
        });
        panel.on('blur', 'input.datagrid-editable-input', function(e) {
            window.closeVK(e);
        });
    };

	GridStyleWindow.prototype.opRouter = function(opcode) {
        var self = this;
		switch (opcode) {
			case 'stylesave':
				saveStyleData();
				break;
            case 'quit':
                self.close();
                break;
			default:
				break;
		}
	};

	GridStyleWindow.prototype.initToolbar = function() {
		self.tooladp = new ToolbarAdapter({
            pageId: self.id,
            container: self.toolContainer,
            buttons: [
            	{
			        "fieldname": "stylesave",
			        "dispname": "保存",
			        "icon": "icon-save",
			        "class": "",
			        "hint": "保存",
			        "opcode": "stylesave"
			    },
                {
                    "fieldname": "quit",
                    "dispname": "退出",
                    "icon": "icon-save",
                    "class": "",
                    "hint": "退出",
                    "opcode": "quit"
                }
            ],
            menuButtons: [],
            actions: {
                click: function(opcode) {
                    self.opRouter(opcode);
                }
            }
        });
        self.tooladp.init();
	};

	GridStyleWindow.prototype.initGrid = function() {
        var columns = makeGridColumns(),
        	data = makeGridData();
        // var columns = JSON.parse(printColumns);
        // self.makeColumnEditor(columns);
        self.gridadp = new GridAdapter({
            id: self.id,
            selfColumn: true,
            name: '',
            opts: {},
            data: {
                columns: columns
            },
            actions: {
                // onDblClickCell: onClickCell,
                // onBeforeEdit: onBeforeEdit,
                // onEndEdit: onEndEdit,
                onLoadSuccess: function(){
                	enabelDnd();
				},
				onStopDrag: function(row) {
					resetRowIndex(row);
				},
                onSortColumn: function() {
                    enabelDnd();
                },
                onAfterCellEdit: function(e, dg, blurObj) {
                    window.closeVK(e);
                    if (blurObj.ov == blurObj.nv || blurObj.field != 'dispindex') return;
                    resetTableSort(dg, blurObj);
                }
            }
        });
        self.gridadp.makeGridProperties({
            height: 430,
            showFooter: false,
            rownumbers: true,
            ctrlSelect: false,
            singleSelect: true,
            dblclickToEdit: true
        });
        self.gridadp.init(self.gridContainer);
        // self.gridadp.fitColumns();
        self.gridadp.loadData(data);
        self.$grid = self.gridadp.grid.$grid;
    };

    function resetTableSort(dg, obj) {
        var ov = parseInt(obj.ov);
        var nv = parseInt(obj.nv);
        var index = obj.index;
        var rows = dg.datagrid('getRows');
        for (var i = 0; i < rows.length; i++) {
            var value = parseInt(rows[i].dispindex) || 0;
            if (nv > ov)  {
                if (value >= ov && value <= nv && i != index) {
                    rows[i].dispindex = parseInt(rows[i].dispindex) - 1;
                }
            } else {
                if (value >= nv && value <= ov && i != index) {
                    rows[i].dispindex = parseInt(rows[i].dispindex) + 1;
                }
            }
            // dg.datagrid('refreshRow', i);
        }
        setTimeout(function() {
            dg.datagrid('sort', {
                sortName: 'dispindex'
            });
        }, 100)
    }

    function enabelDnd() {
    	self.gridadp.grid.$grid
    		// .datagrid('enableDnd')
    		.datagrid('enableCellEditing');
    }

    function onEndEdit(index, row){
        var keys = Object.keys(row);
        var width = self.$grid.datagrid('getEditor', {
            index: 2,
            field: keys[index]
        });
        var viewable = self.$grid.datagrid('getEditor', {
            index: 3,
            field: keys[index]
        });
        if (width) {
            row[keys[2]] = width.target.val();
        }
        if (viewable) {
            row[keys[3]] = viewable.target.val();
        }
    }

    /**
     * 重新设置行的显示顺序值
     */
    function resetRowIndex(row) {
    	var grid = self.gridadp.grid.$grid,
    		// index = grid.datagrid('getRowIndex', row),
    		rows = grid.datagrid('getRows');
    		
    	for (var i = 0; i < rows.length; i++) {
    		var _row = rows[i];
    		_row.dispindex = i;
    		grid.datagrid('updateRow', {
    			index: i,
    			row: _row
    		});
    	}
    }

    /**
     * 制作grid column
     */
    function makeGridColumns() {
    	return [[
    		{
	            "sortable": "true",
	            "field": "title",
	            "align": "",
	            "width": "23%",
	            "rowspan": 1,
	            "colspan": 1,
	            "title": "列名",
	            "deltaWidth": 9,
	            "boxWidth": 71
	        },
	        {
	            "sortable": "true",
	            "field": "dispindex",
	            "align": "center",
	            "width": "23%",
	            "rowspan": 1,
	            "colspan": 1,
	            "title": "显示顺序",
	            "deltaWidth": 9,
	            "boxWidth": 111,
                "editor": "text"
	        },
            {
                "sortable": "true",
                "field": "dispwidth",
                "align": "center",
                "width": "23%",
                "rowspan": 1,
                "colspan": 1,
                "title": "显示宽度",
                "deltaWidth": 9,
                "boxWidth": 71,
                "editor": "text"
            },
	        {
	            "sortable": "true",
	            "field": "viewable",
	            "align": "center",
	            "width": "23%",
	            "rowspan": 1,
	            "colspan": 1,
	            "title": "是否可见",
	            "deltaWidth": 9,
	            "boxWidth": 71,
	            "editor": {
                    type: 'checkbox',
                    options:{on:'是',off:'否'}
                }
	        }
    	]];
    }

    function saveStyleData() {
        if (self.$grid.datagrid('getChanges').length == 0) {
            return;
        }
    	var rows = self.$grid.datagrid('getRows');
        var _rows = JSON.stringify(rows);
        _rows = _rows.replace(/"viewable":"是"/g, '"viewable":"1"');
        _rows = _rows.replace(/"viewable":"否"/g, '"viewable":"0"');
        rows = JSON.parse(_rows);
        var params = {
            rptId: self.args.dataManager.rptId,
            rptFormatId: self.args.dataManager.rptFormatId,
            styleList: rows
        };
    	ER.services.privatefmt(params, function (isok, data) {
            if (isok) {
                ER.messager.tip('保存成功,点击确定后将刷新页面!', function() {
                    window.location.reload(); 
                });
            }
        });
    }

    function makeGridData() {
    	var columns = self.args.cols,
    		col = null,
    		data = [];
    	for (var i = 0 ; i < columns.length; i++) {
    		col = columns[i];
    		data.push({
                fieldname: col.fieldName,
    			title: col.dispName,
    			dispindex: col.dispIndex,
                dispwidth: col.headerWidth,
                viewable: col.dispPosition == '3' ? '否' : '是' 
    		});
    	}
        data = _.sortBy(data, 'dispindex');
    	return data;
    }

    function onClickCell(index, field){
        // if (!self.editStatus) return;
        // if (editIndex != index){
            if (endEditing()){
                self.$grid.datagrid('selectRow', index);
                self.$grid.datagrid('beginEdit', index);
                var ed = self.$grid.datagrid('getEditor', {index:index,field:field});
                if (ed){
                    ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                }
                editIndex = index;
            } else {
                setTimeout(function(){
                    self.$grid.datagrid('selectRow', editIndex);
                },0);
            }
        // }
    }

    function accept(){
        if (endEditing()){
            self.$grid.datagrid('acceptChanges');
        }
    }

    function endEditing(){
        if (editIndex == undefined){return true}
        // if (self.$grid.datagrid('validateRow', editIndex)){
        	self.$grid.datagrid('acceptChanges');
            self.$grid.datagrid('endEdit', editIndex);
            editIndex = undefined;
            console.log('success');
            return true;
        // } else {
        //     console.log('failed');
        //     return false;
        // }
    }


	return GridStyleWindow;


});