ConstructionCost/web/building_saas/main/js/views/project_property_basicInfo.js

/**
 * Created by Zhong on 2017/11/23.
 */
let basicInfoView = {
    orgDatas: [],//for compare
    datas: [],//just for view
    workBook: null,
    setting:{
        header: [
            {name: '属性', dataCode: 'dispName', width: 200, vAlign: 'center', hAlign: 'left'},
            {name: '值', dataCode: 'value', width: 300, vAlign: 'center', hAlign: 'left'}
        ],
        options: {
            allowContextMenu: false,
            tabStripVisible:  false,
            allowCopyPasteExcelStyle : false,
            allowExtendPasteRange: false,
            allowUserDragDrop : false,
            allowUserDragFill: false,
            scrollbarMaxAlign : true
        },
        dateRows: [5, 18],
        numRows: [7],
        locked: {
            rows: [0, 19, 23, 27],
            cols: [0]
        }
    },

    renderSheetFuc: function (sheet, fuc) {
        sheet.suspendPaint();
        sheet.suspendEvent();
        fuc();
        sheet.resumePaint();
        sheet.resumeEvent();
    },

    setOptions: function (workbook, opts) {
        for(let opt in opts){
            workbook.options[opt] = opts[opt];
        }
    },

    getRowByField: function (field) {
        let me = basicInfoView;
        for(let i = 0; i < me.orgDatas.length; i++){
            let data = me.orgDatas[i];
            if(data.key === field){
                return i;
            }
        }
        return null;
    },

    setDatePicker: function (sheet, dateRows) {
        let me = this;
        this.renderSheetFuc(sheet, function () {
            for(let i = 0, len = dateRows.length; i < len; i++){
                sheet.getCell(dateRows[i], 1).cellType(me.getDatePickerCellType()).width(100).formatter('yyyy-mm-dd');
            }
        });
    },

    buildHeader: function (sheet, headers) {
        let me = basicInfoView;
        let fuc = function () {
            sheet.options.clipBoardOptions = GC.Spread.Sheets.ClipboardPasteOptions.values;
            sheet.setColumnCount(headers.length);
            sheet.setRowHeight(0, 40, GC.Spread.Sheets.SheetArea.colHeader);
            for(let i = 0, len = headers.length; i < len; i++){
                sheet.setValue(0, i, headers[i].name, GC.Spread.Sheets.SheetArea.colHeader);
                sheet.setColumnWidth(i, headers[i].width, GC.Spread.Sheets.SheetArea.colHeader);
            }
        };
        me.renderSheetFuc(sheet, fuc);
    },

    buildSheet: function () {
        if(!this.workBook){
            this.workBook = new GC.Spread.Sheets.Workbook($('#basicInfoSpread')[0], {sheetCount: 1});
            sheetCommonObj.spreadDefaultStyle(this.workBook);
            sheetCommonObj.bindEscKey(this.workBook, [{sheet: this.workBook.getSheet(0), editStarting: this.onEditStarting, editEnded: this.onEditEnded}]);
            this.setOptions(this.workBook, this.setting.options);
            this.buildHeader(this.workBook.getActiveSheet(), this.setting.header);
            this.bindEvent(this.workBook);
        }
    },

    bindEvent: function (workBook) {
        const _events = GC.Spread.Sheets.Events;
        let sheet = workBook.getActiveSheet();
        sheet.bind(_events.EditStarting, this.onEditStarting);
        sheet.bind(_events.EditEnded, this.onEditEnded);
        sheet.bind(_events.ClipboardPasting, this.onClipboardPasting);
        sheet.bind(_events.ClipboardPasted, this.onClipboardPasted);
    },

    showData(datas){
        let me = basicInfoView;
        let sheet = this.workBook.getActiveSheet();
        let cols = this.setting.header;
        let fuc = function () {
            sheet.setRowCount(datas.length);
            me.initTree(sheet, true, datas);
            me.setDatePicker(sheet, me.setting.dateRows);
            sheet.setFormatter(-1, 1, '@');
            for(let col = 0, cLen = cols.length; col < cLen; col++){
                sheet.getRange(-1, col, -1, 1).hAlign(GC.Spread.Sheets.HorizontalAlign[cols[col]['hAlign']]);
                sheet.getRange(-1, col, -1, 1).vAlign(GC.Spread.Sheets.VerticalAlign[cols[col]['vAlign']]);
                for(let row = 0, rLen = datas.length; row < rLen; row++){
                    sheet.setValue(row, col, datas[row][cols[col]['dataCode']]);
                }
            }
        };
        this.renderSheetFuc(sheet, fuc);
    },

    onEditStarting: function (sender, args) {
        let me = basicInfoView;
        if(args.col === 0){
            args.cancel = true;
        }
        //工程专业
        if(args.col === 1 && me.setting.locked.rows.indexOf(args.row) !== -1){
            args.cancel = true;
        }
    },

    onEditEnded: function (sender, args) {
        let me = basicInfoView;
        let v =  args.editingText ? args.editingText.toString().trim() : '';
        if(args.row < me.datas.length){
            //date
            if(me.setting.dateRows.indexOf(args.row) !== -1){
                if(v.length > 0){
                    v = formatDate(new Date(v), 'yyyy-MM-dd');
                    v = me.filtDate(v);
                    if(!v){
                        alert('请输入正确的日期格式yyyy-mm-dd');
                        args.sheet.setValue(args.row, args.col, me.datas[args.row].value ? me.datas[args.row].value : '');
                        return;
                    }
                }
            }
            else if(me.setting.numRows.indexOf(args.row) !== -1){//控制数值
                if(!me.isNum(v)){
                    alert('只能输入数值');
                    v = me.datas[args.row].value && me.isNum(me.datas[args.row].value) ? me.datas[args.row].value : '';
                    args.sheet.setValue(args.row, args.col, v);
                }
            }
            me.datas[args.row].value = v;
        }
    },

    onClipboardPasting: function (sender, args) {
        let me = basicInfoView;
        if(args.cellRange.col === 0){
            args.cancel = true;
        }
    },

    onClipboardPasted: function (sender, args) {
        let me = basicInfoView;
        let items = sheetCommonObj.analyzePasteData(me.setting, args);
        let recRows = [];
        for(let i = 0, len = items.length; i < len; i++){
            let row = i + args.cellRange.row;
            if(me.setting.locked.rows.indexOf(row) !== -1){
                recRows.push(row);
            }
            else if(me.setting.dateRows.indexOf(row) !== -1){
                items[i].value = me.filtDate(items[i].value);
                if(!me.isDef(items[i].value)){
                    recRows.push(row);
                }
                else {
                    me.datas[row].value = items[i].value;
                }
            }
            else if(me.setting.numRows.indexOf(row) !== -1 && !me.isNum(items[i].value)){
                recRows.push(row);
            }
            else {
                me.datas[row].value = items[i].value;
            }
        }
        if(recRows.length > 0){
            me.renderSheetFuc(args.sheet, function () {
                for(let i = 0, len = recRows.length; i < len; i++){
                    let staticV = me.datas[recRows[i]].value || '';
                    args.sheet.setValue(recRows[i], args.cellRange.col, staticV);
                }
            })
        }
    },

    isDef: function (v) {
        return v !== undefined && v !== null;
    },

    isNum: function(v){
        return this.isDef(v) && !isNaN(v);
    },

    filtDate: function (v) {
        let re = /([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))/
        let reDate = re.exec(v);
        let rst = reDate ? reDate[0] : null;
        return rst;
    },

    copyObj: function(obj){
        let newObj = {};
        for(let attr in obj){
            newObj[attr] = obj[attr];
        }
        return newObj;
    },

    initDatas: function (datas) {
        this.datas = [];
        for(let i = 0, len = datas.length; i < len; i++){
            this.datas.push(this.copyObj(datas[i]));
        }
    },

    //数据库读到的数据转换为展示的结构
    toViewDatas: function (datas) {
        let rst = [];
        for(let i = 0, len = datas.length; i < len; i++){
            let items = datas[i].items || null;
            if(items){
                rst.push(datas[i]);
                for(let j = 0, jLen = items.length; j < jLen; j++){
                    rst.push(items[j]);
                }
            }
        }
        return rst;
    },

    //展示的结构转换为入库的结构
    toSaveDatas: function (datas) {
        let rst = [];
        let index = -1;
        for(let i = 0, len = datas.length; i < len; i++){
            let items = datas[i].items || null;
            if(items){
                delete datas[i].collapsed;
                datas[i].items = [];
                rst.push(datas[i]);
                index++;
            }
            else {
                rst[index]['items'].push(datas[i]);
            }
        }
        return rst;
    },

    toUpdate: function (orgDatas, newDatas) {
        if(orgDatas.length !== newDatas.length){
            return true;
        }
        for(let i = 0, len = orgDatas.length; i < len; i++){
            let orgObj = orgDatas[i], newObj = newDatas[i];
            if(orgObj.value !== newObj.value){
                return true;
            }
        }
        return false;
    },

    a_updateInfo: function (datas) {
        let me = this;
        let url = '/pm/api/updateProjects',
            updateData = {
                updateType: 'update',
                updateData: {ID: parseInt(scUrlUtil.GetQueryString('project')), 'property.basicInformation': datas}
            },
            postData = {
                user_id: userID,
                updateData: [updateData]
            };
        CommonAjax.post(url, postData, function (rstData) {
            me.orgDatas = me.toViewDatas(datas);
        });
    },

    initTree:function (sheet, init, datas) {
        sheet.getRange(-1, 0, -1, 1).cellType(this.getTreeNodeCellType(datas));
        for(let i =0, len = datas.length; i < len; i++){
            if(datas[i].hasOwnProperty('items')){
                let collapsed = false;
                if(init){
                    datas[i].collapsed=false;
                    collapsed = true;
                }else {
                    collapsed = datas[i].collapsed == undefined ? true : datas[i].collapsed;
                }
                //sheet.getRange(i+1, -1, datas[i].items.length, -1).visible(!collapsed);
            }
        }
    },

    getTreeNodeCellType:function (data) {
        var ns = GC.Spread.Sheets;
        var rectW = 10;
        var rectH = 10;
        var margin = 3;
        function TreeNodeCellType() {
        }

        function drowRect(ctx,x,y,w,h) {///
            ctx.save();
            ctx.strokeStyle = "gray";
            ctx.translate(0.5,0.5);
            ctx.beginPath();
            var rectX = x+margin;
            var rectY =  y+ Math.round(h/2)-rectH/2;
            ctx.moveTo(rectX, rectY);
            ctx.lineTo(rectX, rectY+rectH);
            ctx.lineTo(rectX+rectW, rectY+rectH);
            ctx.lineTo(rectX+rectW, rectY);
            ctx.lineTo(rectX, rectY);
            ctx.moveTo(rectX+rectW, y+Math.round(h/2));
            ctx.lineTo(rectX+rectW+5, y+Math.round(h/2));
            ctx.stroke();
            ctx.restore();
        }

        function drowSymbol(ctx,x,y,w,h,collapsed) {
            ctx.save();
            ctx.strokeStyle = "#000000";
            ctx.translate(0.5, 0.5);
            ctx.beginPath();
            ctx.moveTo(x+margin+2, y+Math.round(h/2));
            ctx.lineTo(x+margin+8, y+Math.round(h/2));
            var rectY =  y+ Math.round(h/2)-rectH/2;
            if(collapsed){
                ctx.moveTo(x+margin+rectW/2,rectY+2);
                ctx.lineTo(x+margin+rectW/2,rectY+2+6);
            }
            ctx.stroke();
            ctx.restore();
        }

        function drowSubItem(ctx,x,y,w,h,offset,nextItem) {
            offset+=6;
            ctx.save();
            ctx.strokeStyle = "gray";
            ctx.translate(0.5, 0.5);
            ctx.beginPath();
            ctx.moveTo(x+offset, y);
            ctx.lineTo(x+offset, y+Math.round(h/2));
            offset+=9;
            ctx.lineTo(x+offset, y+Math.round(h/2));
            if(nextItem&&!nextItem.hasOwnProperty('items')){
                ctx.moveTo(x+offset-9, y+Math.round(h/2));
                ctx.lineTo(x+offset-9, y+h);
            }
            ctx.stroke();
            ctx.restore();
            return offset;
        }

        TreeNodeCellType.prototype = new ns.CellTypes.Text();
        TreeNodeCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
            if(value!=null){
                var offset = margin+rectW+6;
                var recode = data[options.row];
                if(recode&&recode.hasOwnProperty('items')){
                    drowRect(ctx,x,y,w,h);
                    var collapsed = recode.collapsed==undefined?true:recode.collapsed;//options.sheet.getTag(options.row,options.col);
                    drowSymbol(ctx,x,y,w,h,collapsed);
                }else if(recode&&!recode.hasOwnProperty('items')){
                    offset= drowSubItem(ctx,x,y,w,h,offset,data[options.row+1]);
                    offset+=1;
                }
                arguments[2] = x + offset;
                arguments[4] = w - offset;
                GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, arguments);

            }
        };
        // override getHitInfo to allow cell type get mouse messages
        TreeNodeCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
            return {
                x: x,
                y: y,
                row: context.row,
                col: context.col,
                cellStyle: cellStyle,
                cellRect: cellRect,
                sheetArea: context.sheetArea
            };
        }
        TreeNodeCellType.prototype.processMouseDown = function (hitinfo) {
            var recode = data[hitinfo.row];
            if(recode&&recode.hasOwnProperty('items')){
                var hoffset= hitinfo.cellRect.x+3;
                if (hitinfo.x > hoffset && hitinfo.x < hoffset + 10){
                    var collapsed = recode.collapsed==undefined?true:recode.collapsed;
                    collapsed = !collapsed
                    recode.collapsed=collapsed;
                    //hitinfo.sheet.setTag(hitinfo.row,hitinfo.col,collapsed);
                    hitinfo.sheet.getRange(hitinfo.row+1, -1, recode.items.length, -1).visible(!collapsed);
                    hitinfo.sheet.invalidateLayout();
                    hitinfo.sheet.repaint();
                }
            }
        };
        return new TreeNodeCellType()
    },

    getDatePickerCellType: function () {
        let ns = GC.Spread.Sheets;

        function DatePickerCellType() {
        }
        DatePickerCellType.prototype = new GC.Spread.Sheets.CellTypes.Base();

        DatePickerCellType.prototype.createEditorElement = function (context) {
            //Create input presenter.
            return document.createElement("input");
        };
        DatePickerCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
            //Initialize input editor.
            if (editorContext) {
                $editor = $(editorContext);
                //DatePickerCellType.prototype.activateEditor.apply(this, arguments);
                $editor.datepicker({dateFormat: 'yy-mm-dd'});
                $editor.css("position", "absolute");
                $editor.attr("gcUIElement", "gcEditingInput");
                $(".ui-datepicker").attr("gcUIElement", "gcEditingInput");
            }
        }
        DatePickerCellType.prototype.deactivateEditor = function (editorContext, context) {
            //Remove input editor when end editor status.
            if (editorContext) {
                var element = editorContext;
                $(element).datepicker("hide");
                $(element).datepicker("destroy");
            }
           // DatePickerCellType.prototype.deactivateEditor.apply(this, arguments)
        };
        DatePickerCellType.prototype.setEditorValue = function (editor, value, context) {
            //Sync value from Cell value to editor value.
            $(editor).datepicker("setDate", value);
        };
        DatePickerCellType.prototype.getEditorValue = function (editor, context) {
            //Sync value from editor value to cell value.
            return $(editor).datepicker("getDate");
        };
        DatePickerCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect, context) {
            if (editorContext) {
                $editor = $(editorContext);
                $editor.css("width", cellRect.width - 1);
                $editor.css("height", cellRect.height - 3);
            }
        };
        return new DatePickerCellType();
    }

};

$(document).ready(function () {
    $('#poj-set').on('shown.bs.modal', function (e) {
        //init Spread
        basicInfoView.initDatas(basicInfoView.orgDatas);
        basicInfoView.buildSheet();
        basicInfoView.showData(basicInfoView.datas);
        if(projectReadOnly){
            disableSpread(basicInfoView.workBook);
        }
    });

    $('#poj-set').on('hidden.bs.modal', function (e) {
        //destroy Spread
        if(basicInfoView.workBook){
            basicInfoView.workBook.destroy();
            basicInfoView.workBook = null;
        }
        basicInfoView.datas = [];
    });

    $('#tab_poj-settings-basicInfo').on('shown.bs.tab', function () {
        basicInfoView.workBook.refresh();
    });
    $('#openProjSet').click(function () {
        $('[data-toggle="tooltip"]').tooltip('hide');
        $('#poj-set').modal('show');
    })
   /* $('#property_ok').bind('click', function () {
        if(basicInfoView.toUpdate(basicInfoView.orgDatas, basicInfoView.datas)){
            basicInfoView.a_updateInfo(basicInfoView.toSaveDatas(basicInfoView.datas));
        }
    });*/
});