page/src/js/main2.js

import yzPage from './yzPage';
import yzToolbar from './yzToolbar'
import $ from 'jquery';
let pageManager = function (data, cfg) {
  // 所有页面的集合
  this.pages = [];
  // 当前页面对象
  this.currentPage = null;
  // 头部信息
  this.header = {
    layoutType: data.layoutType,
    noBoth: data.noBoth,
    noCount: data.noCount,
    noMode: data.noMode,
    paperSize: data.paperSize,
    title: data.title,
    height: 120
  };
  // 页面唯一id，自增
  this.pageIndex = 0;
  
  // 最小高度为0，也就是客观题的高度
  this.minHeight = (cfg && cfg.minHeight) || 40;
  this.subjectInfo = {};
  // 初始化的试卷框的信息
  this.initData = this._initBorderData(data.scanPpStructQueModelList);


 // 所有dom的容器
 this.domId = ('lsiten_manager_'+Math.random()).replace('.','_');
 this.domBody = null;

 // 顶部工具栏
  this.toolBar = new yzToolbar();

};

// 初始化框数据，循环所有吧小题，判断是否在客观题的框里
pageManager.prototype._initBorderData = function (data) {
  // 存储客观题区块index最大的index和该index下的小问个数
  let subjectBlock = {};
  let blockindex = 0;
  for(let index in data) {
    // 如果有inDetail,则是客观题
    let item = data[index];
    if (item.inDetail) {
      item.isSubject = false;

      let subjectData = item.inDetail.split('-');
      item.blockindex = subjectData[0];
      item.blocknum = subjectData[1];

      if(subjectBlock[item.rectNo]) {
        let block =  subjectBlock[item.rectNo][blockindex]; 
        if (block.index !== item.blockindex) {
          if (item.blockindex % 3 === 1) {
            blockindex++;
            subjectBlock[item.rectNo][blockindex] = {
              index: item.blockindex,
              maxnum: item.blocknum,
              minHeight: this.minHeight
            }
          } else {
            block.index = item.blockindex;
            block.maxnum = block.maxnum > item.blocknum ? block.maxnum: item.blocknum;
          }
        } 

      } else {
        // 初始化block信息
        blockindex = 0;
        subjectBlock[item.rectNo] = {};
        subjectBlock[item.rectNo][blockindex] = {
          index: item.blockindex,
          maxnum: item.blocknum,
          minHeight: this.minHeight
        }
      }
     
    } else {
      item.isSubject = true;
    }
  }
  let subjectBlockInfo = this.subjectInfo;

  for (let key in subjectBlock) {
    if (!subjectBlockInfo[key]) {
      subjectBlockInfo[key] = {
        height: 0,
        rowDetail: JSON.parse(JSON.stringify(subjectBlock[key]))
      };
      for (let bkey in subjectBlock[key]) {
        subjectBlockInfo[key].height += (subjectBlock[key][bkey].maxnum * this.minHeight);
        subjectBlockInfo[key].index = subjectBlock[key][bkey].index;
      }
    }
  }
  return data;
}

pageManager.prototype._addPage = function () {
  this.pageIndex++;
  let pageOptions = {
    hasHeader: false,
    maxHeight: 700
  };

  // 判读该页面是否有头部框,如果noBoth为1
  if (this.header.layoutType) {
    pageOptions.hasHeader = parseInt(this.header.noBoth) === 1 ? this.pageIndex % parseInt(this.header.layoutType) === 1 : this.pageIndex === 1;
  } else {
    throw 'this Manager does not initiailize the data';
  }
  pageOptions.hasHeader && (pageOptions.header = this.header);
  let newPage = new yzPage(pageOptions);
  this.pages.push(newPage);
  this.currentPage = newPage;
}
/** 
 * function 数据转换
 * author： lsiten
 * date: 2018-4-8
*/
pageManager.prototype.transformData = function () {
  // 第一步，以小题为唯一框合并数据
  let mergeData = this._mergeData();
  // 第二步，以page高为临界条件拆分框
  this._splitToPage(mergeData);
}

/**
 * funtion 合并数据
 * 注意，数据跨栏不能间隔
 */

pageManager.prototype._mergeData = function () {
  let data = this.initData;
  let length = data.length;
  let i = 1; // 计数
  let _height = -1;
  let _lastId = -1;
  let item = null;
  let mergeArr = [];
  let itemTemp = {
    height: -1,
    rectNo: -1,
    isSubject: true,
    cdelete: 0,
    minHeight: -1,
    content: null
  };
  for (let index in data) {
    item = data[index];
    item.minHeight = parseInt(item.minHeight) > 0 ? parseInt(item.minHeight): this.minHeight;
    if(-1 == itemTemp.rectNo) { //初始化						
      itemTemp.rectNo = item.rectNo;
      if(!item.isSubject) {
        // 客观题泽重置为最小高度
        item.minHeight = this.minHeight;
        this.subjectInfo[item.rectNo] && (itemTemp.height = this.subjectInfo[item.rectNo].height, itemTemp.rowDetail = this.subjectInfo[item.rectNo].rowDetail);
      } else {
        itemTemp.height = item.minHeight;
      }
      itemTemp.border = item.border;
      itemTemp.isSubject = item.isSubject;
      itemTemp.questions = [item];
    } else {
      if(itemTemp.rectNo === item.rectNo) {

        if (item.isSubject) {
          itemTemp.height += item.minHeight;
          // 如果有一个小题不是客观题，则该框就不是客观题框
          itemTemp.isSubject = true;
          delete itemTemp.rowDetail;
          itemTemp.questions.push(item);
        } else {
          // 客观题泽重置为最小高度
          item.minHeight = this.minHeight;
          itemTemp.questions.push(item);
        }
      } else {
        mergeArr.push(JSON.parse(JSON.stringify(itemTemp)));
  
        if(!item.isSubject) {
          // 客观题泽重置为最小高度
          item.minHeight = this.minHeight;
          this.subjectInfo[item.rectNo] && (itemTemp.height = this.subjectInfo[item.rectNo].height, itemTemp.rowDetail = this.subjectInfo[item.rectNo].rowDetail)
        } else {
          itemTemp.height = item.minHeight;
        }
        itemTemp.rectNo = item.rectNo;
        itemTemp.border = item.border;
        itemTemp.isSubject = item.isSubject;
        itemTemp.questions = [item];
      }

      if(i === (length-1)) { //保存最后一个					
        mergeArr.push(JSON.parse(JSON.stringify(itemTemp)));
      }
      // 计数器
      i++;
    }
   


  }
  return mergeArr;
}

/**
 * function 根据page的临界条件去
 * @param mData [array] 合并后的数据
 */
pageManager.prototype._splitToPage = function (mData) {
  for (let i =0; i < mData.length; i++) {
    this._itemToPage(mData[i], 0);
  }
}

/**
 * function 根据page的临界条件去
 * @param item [object] 合并后的数据
 */
pageManager.prototype._itemToPage = function (item) {
  !this.currentPage && this._addPage();
  let domOption = JSON.parse(JSON.stringify(item));
  if ( item.height >  this.currentPage.gap) {
    let gap = this.currentPage.gap;
    if (gap > 0) {
        let holdHeight = gap;
        //1、 cHoldQuestions 当前页可以容纳的小题数组
        //2、 questionsTemp 当前页容纳不了的小题数组
        let cHoldQuestions = [];
        let questionsTemp = [];

        // 下一页的高度
        let nextBoxHeight = 0;
        item.questions.filter(domItem => {
          gap -= domItem.minHeight;
          if (gap >= 0) {
            cHoldQuestions.push(domItem);
          } else {
            // 如果该页容纳不了该小问，则该小问在下一页显示
            nextBoxHeight += domItem.minHeight;
            questionsTemp.push(domItem);
          }
        })
        item.questions = questionsTemp;
        domOption.height = holdHeight;
        domOption.questions = cHoldQuestions;
        if (domOption.questions.length > 0) {
          item.height -= domOption.height;
          item.height < nextBoxHeight && (item.height = nextBoxHeight);
          this.currentPage.addDom(domOption);
        }

        if (item.height > this.minHeight) {
          domOption.isDrag = false;
        } else {
          domOption.isDrag = true;
        }
        // 如果有最小高度，则说明是刷新状态
        if(item.minHeight) {
          item.minHeight -= domOption.height;
          item.minHeight = item.minHeight <= 0 ? 0 : item.minHeight;
        }
        this.currentPage.gap = 0;
        this.currentPage = null;
        if (item.height > this.minHeight) {
          // 如果有最小高度，则说明是刷新状态
          if(item.minHeight) {
            item.minHeight <= 0 && (item.cdelete = 1);
          }

          this._itemToPage(item);
        }
    } else {
      this.currentPage.gap = 0;
      this.currentPage = null;
      this._itemToPage(item);
    }
    
  } else {
    // 如果有最小高度，则说明是刷新状态
    if(item.minHeight) {
      item.minHeight -= item.height;
      item.minHeight = item.minHeight <= 0 ? 0 : item.minHeight;
    }

    domOption.isDrag = true;
    this.currentPage.addDom(domOption);
    item.height = 0;
    this.currentPage.gap === 0 && (this.currentPage = null);
  }
};

/** 
 * function 将数据转换为vdom的形式
*/
pageManager.prototype.renderToDom = function () {
  let pages = this.pages;
  this.domBody = $('<div id="' +this.domId+ '" class="manager-selection"></div>');
  for (let index in pages) {
    pages[index].renderToDom();
    this.domBody.append(pages[index].vDom);
  }
  console.log(this.pages);
  $("#pages-box").replaceWith(this.domBody);
  $('body').on('refreshPage', () => {
    this._refreshPage();
  });
  this.refreshToolBar();
  $('body').on('getQuestion', (e,pageNum,domId) => {
    this.refreshToolBar(...[pageNum,domId]);
  });
};

/**
 * function 刷新页面
 */
pageManager.prototype._refreshPage = function () {
  let data = [];
  let pages = this.pages;
  let nowRectNo = -1;
  let length = 0;
  for (let i in pages) {
    let doms = pages[i].doms;
    for (let j in doms) {
      let item = {
        border: doms[j].border,
        height: doms[j].height,
        isSubject: doms[j].isSubject,
        questions: doms[j].questions,
        rectNo: doms[j].rectNo,
        minHeight: doms[j].minHeight,
        content: doms[j].content

      };
      if(parseInt(item.rectNo) === nowRectNo) {
        data[(length-1)].questions.push.apply(data[(length-1)].questions, item.questions);
        data[(length-1)].height += item.height;
      } else {
        nowRectNo = parseInt(item.rectNo);
        length++;
        !doms[j].isSubject && (item.rowDetail = doms[j].rowDetail);
        data.push(item);
      }
    }
  }

  this.pageIndex = 0;
  this.pages = [];
  this.currentPage = null;
  this._splitToPage(data);
  $(".manager-selection").replaceWith('<div id="pages-box"></div>');
  $('body').off('refreshPage');
  this.renderToDom();
};

/*
* function 刷新顶部菜单栏
*/
pageManager.prototype.refreshToolBar = function(pNum = null,id) {
  // 如果有参数说明要编辑题目
  if(pNum){
    this.toolBar.setSubjectTitle(pNum);
    $('#toolbar').remove();
  }
  this.domBody.append(this.toolBar.toolbarContent());
};
export default pageManager