/** * 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: [], numRows: [], locked: { rows: [], 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); sheet.getRange(-1, i, -1, 1).hAlign(GC.Spread.Sheets.HorizontalAlign[headers[i]['hAlign']]); sheet.getRange(-1, i, -1, 1).vAlign(GC.Spread.Sheets.VerticalAlign[headers[i]['vAlign']]); } }; 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.EnterCell, this.onEnterCell); 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); sheet.setFormatter(-1, 1, '@'); //兼容旧数据,旧数据可能没有设置cellType let compatNumKeys = ['grossArea'], compatDateKeys = ['constructionDate', 'establishDate']; for(let row = 0;row < datas.length ; row ++){ if(datas[row].cellType == 'number' || compatNumKeys.includes(datas[row].key)){ me.setting.numRows.push(row); } else if (datas[row].cellType === 'date' || compatDateKeys.includes(datas[row].key)) { me.setting.dateRows.push(row); } else if(datas[row].cellType === 'comboBox'){ let options = datas[row].options ? datas[row].options.split("@") : []; projFeatureView.setCombo(sheet, row, options); } let readOnly = typeof datas[row].readOnly === 'string' ? JSON.parse(datas[row].readOnly) : datas[row].readOnly; if (readOnly || datas[row].items) { me.setting.locked.rows.push(row); } for(let col = 0;col < cols.length;col++){ sheet.setValue(row, col, datas[row][cols[col]['dataCode']]); } } me.setDatePicker(sheet, me.setting.dateRows); }; this.renderSheetFuc(sheet, fuc); }, onEditStarting: function (sender, args) { let me = basicInfoView; if(args.col === 0){ args.cancel = true; } if(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){ let required = typeof me.datas[args.row].required === 'string' ? JSON.parse(me.datas[args.row].required) : me.datas[args.row].required; //date if (required && !v) { v = me.datas[args.row].value; args.sheet.setValue(args.row, args.col, v); } else 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; } }, onEnterCell: function (sender, args) { args.sheet.repaint(); }, 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; let comboItems = projFeatureView.getComboItemsByRow.call(me, row); let required = typeof me.datas[row].required === 'string' ? JSON.parse(me.datas[row].required) : me.datas[row].required; if(me.setting.locked.rows.indexOf(row) !== -1){ recRows.push(row); } else if(comboItems && !comboItems.includes(items[i].value)){//粘贴下拉框数据过滤 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 if (required && !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 = _.cloneDeep(datas); }, //数据库读到的数据转换为展示的结构 toViewDatas: function (datas) { // 将数据打平(原数据一些子项数据会嵌套在items数组中) let curID = 1; return extractDataFromItems(datas); // 为了与sheet_common.js -> getTreeNodeCellType共用树结构功能 // 需要设置数据的ID、ParentID function extractDataFromItems(items, parentID) { const rst = []; items.forEach(item => { // 为了与sheet_common.js -> getTreeNodeCellType共用树结构功能 // 需要设置数据的ID、ParentID item.ID = curID++; item.ParentID = parentID || null; rst.push(item); if (item.items && item.items.length) { rst.push(...extractDataFromItems(item.items, item.ID)); } }); return rst; } }, //展示的结构转换为入库的结构 toSaveDatas: function (datas) { const saveData = datas.filter(item => item.ParentID === null); clearJunkAttrs(saveData); function clearJunkAttrs(items) { items.forEach(item => { delete item.ID && delete item.ParentID && delete item.collapsed; if (item.items && item.items.length) { clearJunkAttrs(item.items); } }) } return saveData; }, 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)); const parentType = _.groupBy(datas, 'ParentID'); const paint = (ctx, value, x, y, w, h, style, rectInfo, data) => { const required = typeof data.required === 'string' ? JSON.parse(data.required) : data.required; const readOnly = typeof data.readOnly === 'string' ? JSON.parse(data.readOnly) : data.readOnly; if (required && !readOnly) { const { rectW, margin } = rectInfo; ctx.save(); ctx.fillStyle = 'red'; const paddingLeft = 8; const paintX = x + margin + paddingLeft; // 第一层盒子处[+] / [-] const paintY = y + Math.round(h / 2) + paddingLeft; ctx.font = "14px Calibri" ctx.fillText('*', paintX, paintY); ctx.restore(); } }; 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.getCell(i, 0).cellType(sheetCommonObj.getTreeNodeCellType(datas, i, parentType, paint)) } }, 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]; let offset = -1, indent = 20, halfBoxLength = 5; let centerX = hitinfo.cellRect.x + offset + indent / 2; let centerY = (hitinfo.cellRect.y + offset + (hitinfo.cellRect.y + offset + hitinfo.cellRect.height)) / 2 if(recode&&recode.hasOwnProperty('items')){ //方框外1像素内都有效 const boxLengh = 10; if (hitinfo.x >= centerX - halfBoxLength - 1 && hitinfo.x <= centerX + halfBoxLength + 1 && hitinfo.y >= centerY - halfBoxLength - 1 && hitinfo.y <= centerY + halfBoxLength + 1) { 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 () { sheetCommonObj.refreshWorkbookDelDefer(basicInfoView.workBook, 100); }); $('#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)); } });*/ });