page/src/js/yzQuestion.js

import $ from 'jquery'
import boxContent from './box/boxContent';

let yzQuestion = function (cfg) {
  // content里面是box组件
  this.content = cfg.content || null;
  this.border = parseInt(cfg.border) || 1;
  this.minHeight = cfg.minHeight;
  this.pNum = cfg.pNum;
  this.pageNo = cfg.pageNo;
  this.problemId = cfg.problemId;
  this.questionId = cfg.questionId;
  this.rectNo = cfg.rectNo;
  this.score = cfg.score;
  this.sort = cfg.sort;
  this.title = cfg.title || '';
  this.inDetail = cfg.inDetail;
  this.isSubject = cfg.isSubject;
  // 是否是跨栏添加的小问
  this.isSubQuestion = cfg.isSubQuestion || false;
  this.blockindex = parseInt(cfg.blockindex);
  this.blocknum = parseInt(cfg.blocknum);

  // 这个是组件的dom
  this.contentDom = [];

  this.order = parseInt(cfg.order);
  
  this.domId = ('lsiten_question_'+Math.random()).replace('.','_');
  // dom相关属性
  this.vdom = null;
};

yzQuestion.prototype._mapKey = [
  'A', 'B', 'C', 'D', 'E', 'F',
  'G', 'H', 'I', 'J', 'K', 'L',
  'M', 'N', 'O', 'P', 'Q', 'R',
  'S', 'T', 'U', 'V', 'W', 'X',
  'Y', 'Z'
];

/** 
 * function 生成客观题的dom
*/
yzQuestion.prototype._renderObjectiveDom = function () {
  let ul = $('<ul id="'+ this.domId +'_ul" class="question-selection-ul"></ul>');

  let optionnum = parseInt(this.inDetail.split('-')[2]);
  for (let i=0; i<optionnum; i++) {
    ul.append('<li id="'+ this.domId +'_li" class="question-selection-li">'+ this._mapKey[i] +'</li>');
  }
  this.vdom.append(ul);
}


/** 
 * function 生成主观题的dom
 * @TODO 生成content
*/
yzQuestion.prototype._renderCommonDom = function () {
  let content = $('<div id="'+ this.domId +'_content" class="question-selection-content"></div>');
  content.css({height: (this.minHeight - 20) + 'px'});
  let contentItem = this.content;
  if (contentItem) {
    contentItem.forEach( (item) => {
      this.contentDom.push(new boxContent(item));
    });
  }
  this.vdom.append(content);
  // 冒泡监听事件
  this.vdom.on('click', ()=>{
    // 将题目和domId冒泡到顶层
    this.vdom.trigger('getQuestion',[this.pNum,this.domId]);
  });
};

/** 
 * function 生成title的dom
 * @TODO title可编辑
*/
yzQuestion.prototype._renderTitleDom = function () {
  let title = $('<div id="'+ this.domId +'_title" class="question-selection-title"></div>');
  if (!this.isSubject) {
    title.html(this.pNum+this.title);
  } else
  {
    title.addClass('next-line');
    let sort = $('<div class="sort">' + this.pNum + '</div>');
    let subtitle = $('<div class="edit-title">' + this.title + '</div>');
    let score = $('<div class="score">(' + this.score + '分)</div>');
    title.append(sort);
    title.append(subtitle);
    title.append(score);
  }
  title.css({
    height: '20px',
    'line-height': '20px'
  });
  this.vdom.append(title);
};
/** 
 * function 将数据转换为dom的形式
*/
yzQuestion.prototype.renderToDom = function () {
  this.vdom = $('<div id="'+ this.domId +'" class="question-selection"></div>');
  this.vdom.css({
    minHeight: this.minHeight
  })
  !this.isSubQuestion && this._renderTitleDom();
  // 如果是客观题
  if (!this.isSubject) {
    let width = 100/this.allblock + '%';
    this.vdom.css({
      width: width
    });
    this._renderObjectiveDom();
  } else {
    this._renderCommonDom();
  }
};
export default yzQuestion;