'add'

.gitignore

@@ -0,0 +1,4 @@
+.babelrc
+.idea/*
+dist/*
+node_modules/*

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "answer-sheet",
+  "version": "1.0.0",
+  "description": "answer sheet",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack-dev-server --mode development --open",
+    "build": "webpack --mode production"
+  },
+  "keywords": [
+    "answersheet"
+  ],
+  "author": "lsc",
+  "license": "ISC",
+  "devDependencies": {
+    "autoprefixer": "^8.2.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-es2015-loose": "^8.0.0",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.11",
+    "es3ify-loader": "^0.2.0",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.1.0",
+    "jquery": "^2.1.0",
+    "jquery-ui": "^1.12.1",
+    "postcss-loader": "^2.1.3",
+    "purify-css": "^1.2.5",
+    "purifycss-webpack": "^0.7.0",
+    "style-loader": "^0.20.3",
+    "uglifyjs-webpack-plugin": "^1.2.4",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.4.1",
+    "webpack-cli": "^2.0.13",
+    "webpack-dev-server": "^3.1.1"
+  },
+  "dependencies": {
+    "html-withimg-loader": "^0.1.16",
+    "ueditor": "^1.2.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer')
+    ]
+}

src/css/main.css

@@ -0,0 +1,84 @@
+/* page的样式开始 */
+.page-selection {
+  border: 1px solid #b4b1b1;
+  margin-bottom: 10px;
+}
+
+.page-selection .page-selection-header {
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.page-selection .page-selection-header .header-main {
+  border: 1px dashed #a3b1a4;
+  height: 100%;
+}
+
+
+.page-selection .page-selection-body {
+  overflow-y: auto;
+  height: 100%;
+}
+.page-selection .page-selection-body .border-selection {
+  box-sizing: border-box;
+  margin: 0 10px;
+  overflow: hidden;
+}
+.page-selection .page-selection-body .border-selection .border-main {
+  height: 100%;
+}
+.page-selection .page-selection-body .border-selection .border-main .question-selection {
+  line-height: 100%;
+  width: 100%;
+  float: left;
+}
+
+.page-selection .page-selection-body .border-selection .border-main .question-selection .question-selection-title {
+  display: inline-block;
+  margin: 5px;
+  font-size: 14px; 
+}
+.page-selection .page-selection-body .border-selection .border-main .question-selection .next-line {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.page-selection .page-selection-body .border-selection .border-main .question-selection .question-selection-content {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+}
+.page-selection .page-selection-body .border-selection .border-main .question-selection .question-selection-title .sort, .page-selection .page-selection-body .border-selection .border-main .question-selection .question-selection-title .edit-title, .page-selection .page-selection-body .border-selection .border-main .question-selection .question-selection-title .score {
+  display: inline-block;
+}
+
+.page-selection .page-selection-body .border-selection .border-main .border-middile-box-row{
+  width: 100%;
+  box-sizing: border-box;
+}
+.page-selection .page-selection-body .border-selection .border-main .border-middile-box-col{
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.page-selection .page-selection-body .border-selection .border-main .question-selection ul {
+  display: inline-block;
+  margin: 0;
+  margin-top: 10px;
+  padding: 0;
+}
+
+
+.page-selection .page-selection-body .border-selection .border-main .question-selection li {
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 0 5px;
+  width: 40px;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  border: 1px solid #e0e0e0;
+  margin-left: 5px;
+}
+/* page的样式结束 */

src/data.json

@@ -0,0 +1,289 @@
+{
+  "layoutType": "2", 
+  "paperSize": "A3", 
+  "schoolId": "76", 
+  "id": "14", 
+  "noBoth": "1", 
+  "noCount": "10", 
+  "noMode": "1", 
+  "subjectId": "5", 
+  "title": "科目考试-语文", 
+  "scanPpStructQueModelList": [
+      {
+          "sort": "1", 
+          "rectNo": "1", 
+          "border": "1", 
+          "pNum": "1",
+          "title": null,
+          "questionId": "1397", 
+          "problemId": "848", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "0", 
+          "inDetail": "1-5-5"
+      }, 
+      {
+          "sort": "2", 
+          "rectNo": "1", 
+          "border": "1", 
+          "pNum": "2", 
+          "title": null, 
+          "questionId": "1392", 
+          "problemId": "843", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "0", 
+          "inDetail": "1-5-3"
+      }, 
+      {
+          "sort": "3", 
+          "rectNo": "1", 
+          "border": "1", 
+          "pNum": "3", 
+          "title": null, 
+          "questionId": "1399", 
+          "problemId": "850", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "0", 
+          "inDetail": "1-5-6"
+      }, 
+      {
+          "sort": "4", 
+          "rectNo": "1", 
+          "border": "1", 
+          "pNum": "4", 
+          "title": null, 
+          "questionId": "1398", 
+          "problemId": "849", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "0", 
+          "inDetail": "1-5-2"
+      }, 
+      {
+          "sort": "5", 
+          "rectNo": "1", 
+          "border": "1", 
+          "pNum": "5", 
+          "title": null, 
+          "questionId": "1394", 
+          "problemId": "845", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "0", 
+          "inDetail": "1-5-4"
+      }, 
+      {
+          "sort": "6", 
+          "rectNo": "1", 
+          "border": "1", 
+          "pNum": "6", 
+          "title": null, 
+          "questionId": "1393", 
+          "problemId": "844", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "0", 
+          "inDetail": "2-2-4"
+      }, 
+      {
+          "sort": "7", 
+          "rectNo": "1", 
+          "border": "1", 
+          "pNum": "7", 
+          "title": null, 
+          "questionId": "1396", 
+          "problemId": "847", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "0", 
+          "inDetail": "2-2-4"
+      }, 
+      {
+          "sort": "8", 
+          "rectNo": "2", 
+          "border": "1", 
+          "pNum": "8|(1)", 
+          "title": null, 
+          "questionId": "1400", 
+          "problemId": "851", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "0", 
+          "inDetail": "1-2-4"
+      }, 
+      {
+          "sort": "9", 
+          "rectNo": "2", 
+          "border": "1", 
+          "pNum": "8|(2)", 
+          "title": null, 
+          "questionId": "1401", 
+          "problemId": "851", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "0", 
+          "inDetail": "1-2-4"
+      }, 
+      {
+          "sort": "10", 
+          "rectNo": "3", 
+          "border": "1", 
+          "pNum": "9|(1)", 
+          "title": null, 
+          "questionId": "1406", 
+          "problemId": "854", 
+          "needMark": "1", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "80", 
+          "inDetail": null
+      }, 
+      {
+          "sort": "11", 
+          "rectNo": "3", 
+          "border": "1", 
+          "pNum": "9|(2)", 
+          "title": null, 
+          "questionId": "1407", 
+          "problemId": "854", 
+          "needMark": "1", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "80", 
+          "inDetail": null
+      }, 
+      {
+          "sort": "12", 
+          "rectNo": "4", 
+          "border": "1", 
+          "pNum": "10", 
+          "title": null, 
+          "questionId": "1408", 
+          "problemId": "855", 
+          "needMark": "1", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "80", 
+          "inDetail": null
+      }, 
+      {
+          "sort": "13", 
+          "rectNo": "5", 
+          "border": "1", 
+          "pNum": "11", 
+          "title": null, 
+          "questionId": "1439", 
+          "problemId": "869", 
+          "needMark": "1", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "80", 
+          "inDetail": null
+      }, 
+      {
+          "sort": "14", 
+          "rectNo": "6", 
+          "border": "1", 
+          "pNum": "12", 
+          "title": null, 
+          "questionId": "1440", 
+          "problemId": "870", 
+          "needMark": "1", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "80", 
+          "inDetail": null
+      }, 
+      {
+          "sort": "15", 
+          "rectNo": "7", 
+          "border": "1", 
+          "pNum": "13|(1)", 
+          "title": null, 
+          "questionId": "1432", 
+          "problemId": "865", 
+          "needMark": "1", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "80", 
+          "inDetail": "1-1-4"
+      }, 
+      {
+          "sort": "16", 
+          "rectNo": "7", 
+          "border": "1", 
+          "pNum": "13|(2)", 
+          "title": null, 
+          "questionId": "1433", 
+          "problemId": "865", 
+          "needMark": "1", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "80", 
+          "inDetail": null
+      }, 
+      {
+          "sort": "17", 
+          "rectNo": "7", 
+          "border": "1", 
+          "pNum": "13|(3)", 
+          "title": null, 
+          "questionId": "1434", 
+          "problemId": "865", 
+          "needMark": "1", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "80", 
+          "inDetail": null
+      }, 
+      {
+          "sort": "18", 
+          "rectNo": "7", 
+          "border": "1", 
+          "pNum": "13|(4)", 
+          "title": null, 
+          "questionId": "1435", 
+          "problemId": "865", 
+          "needMark": "1", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "80", 
+          "inDetail": null
+      }, 
+      {
+          "sort": "19", 
+          "rectNo": "8", 
+          "border": "1", 
+          "pNum": "14", 
+          "title": null, 
+          "questionId": "1415", 
+          "problemId": "859", 
+          "needMark": "1", 
+          "score": "0", 
+          "pageNo": "0", 
+          "content": null, 
+          "minHeight": "80", 
+          "inDetail": null
+      }
+  ]
+}

src/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
+  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">
+  <title>答题卡</title>
+</head>
+<body>
+  <div id='pages-box'>
+
+  </div>
+</body>
+</html>

src/index.js

@@ -0,0 +1,8 @@
+import './css/style.css';
+import './css/main.css';
+import pageManager from './js/main2';
+import data from './data.json'
+
+var page = new pageManager(data);
+page.transformData();
+page.renderToDom();

src/js/box/boxContent.js

@@ -0,0 +1,10 @@
+/**
+ * Create by sxd
+ * date 2018-04-11
+ * Description:
+ */
+const boxContent = function() {
+
+};
+
+boxContent.prototype.boxTpl = '<div class="line-n line resizable"><div class="circle"></div></div><div class="line-e line resizable"><div class="circle"></div></div><div class="line-s line resizable"><div class="circle"></div></div><div class="line-w line resizable"><div class="circle"></div></div><div class="circle-nw circle resizable"></div><div class="circle-ne circle resizable"></div><div class="circle-se circle resizable"></div><div class="circle-sw circle resizable"></div>';

src/js/jquery-vendor.js

@@ -0,0 +1,4 @@
+import $ from 'jquery'
+window.$ = $
+window.jQuery = $
+export default $

src/js/main2.js

@@ -0,0 +1,360 @@
+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
+  };
+  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 > this.minHeight) {
+        let holdHeight = gap;
+        // item中减去已经放进页面的高度，继续递归
+        // 循环item的questions，看看能容纳几个question，出去已经容纳的question
+        let cHoldQuestions = [];
+        let tempCanHolderItem = {};
+        let questionsTemp = [];
+        item.questions.filter(domItem => {
+          
+          gap -= domItem.minHeight;
+          if (gap >= 0) {
+            cHoldQuestions.push(domItem);
+            return false;
+          } else {
+            gap = Math.abs(gap);
+            tempCanHolderItem = JSON.parse(JSON.stringify(domItem))
+            domItem.minHeight = gap;
+            tempCanHolderItem.minHeight -= gap;
+            // 如果该页剩余小于最小高度，则跳到下一页
+            if (tempCanHolderItem.minHeight >= this.minHeight) {
+              cHoldQuestions.push(tempCanHolderItem);
+            }
+            // 如果该小问在下一页高度小于最小高度，则舍去
+            if (domItem.minHeight >= this.minHeight) {
+              questionsTemp.push(domItem);
+              return true;
+            } else {  
+              return false;
+            }
+          }
+        })
+        item.questions = questionsTemp;
+        item.height -= holdHeight;
+        
+        domOption.height = holdHeight;
+        domOption.questions = cHoldQuestions;
+        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.addDom(domOption);
+        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);
+  }
+  $("#pages-box").replaceWith(this.domBody);
+  this.domBody.append(this.toolBar.toolbarContent());
+  $('body').on('refreshPage', () => {
+    this._refreshPage();
+  });
+};
+
+/**
+ * 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
+      };
+      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();
+};
+export default pageManager

src/js/yzDom.js

@@ -0,0 +1,133 @@
+import yzQuestion from './yzQuestion';
+import $ from './jquery-vendor';
+import './jquery-ui.js';
+
+var yzDom = function(cfg) {
+  this.rectNo = cfg.rectNo;
+  this.questions = cfg.questions;
+  this.height = cfg.height;
+  this.minHeight = cfg.minHeight >= 0 ? cfg.minHeight: cfg.height;
+  this.border = parseInt(cfg.border);
+  this.cdelete = cfg.cdelete;
+  this.isDrag = cfg.isDrag;
+  this.rowDetail = cfg.rowDetail;
+  this.isSubject = cfg.isSubject;
+  this.questionsDom = [];
+  
+  this.vDom = null;
+  this.colDoms = {};
+  // dom相关属性
+  this.domId = ('lsiten_border_'+Math.random()).replace('.','_');
+  this._initQustionsDoms();
+}
+
+yzDom.prototype._initQustionsDoms = function () {
+  let questions = this.questions;
+  for (let index in questions) {
+    this.questionsDom.push(new yzQuestion(questions[index]));
+  }
+}
+
+/** 
+ * function 渲染客观题的dom
+*/
+yzDom.prototype._renderObjectiveDom = function () {
+  let main = $('<div class="border-main"></div>');
+  let rows = this.rowDetail;
+  let cols = rows > 1 ? 3 : rows[0].index;
+  let width = (100/cols) + '%';
+
+  let index = 1;
+  for (let i in rows) {
+    let row = $('<div id="border-middile-box-row-'+i+'" class="border-middile-box-row"></div>');
+    let height = rows[i].minHeight * parseInt(rows[i].maxnum);
+    
+    for (let j=0; j < cols; j++) {
+      let col = $('<div class="border-middile-box-col"></div>');
+      let cssOptions = {
+        height: height,
+        width: width
+      };
+      ((j % 3) < 2) && (cssOptions.borderRight = '1px solid #bfbfbf');
+      col.css(cssOptions);
+      this.colDoms[index++] =col;
+      row.append(col);
+    }
+    main.append(row);
+  }
+
+  let questions = this.questionsDom;
+  // question 渲染
+  for (let index in questions) {
+    questions[index].renderToDom();
+    this.colDoms[questions[index].blockindex].append(questions[index].vdom);
+  }
+  this.vDom.append(main);
+}
+
+/**
+ * function 渲染普通的题的dom
+ */
+yzDom.prototype._renderCommonDom = function () {
+  let main = $('<div class="border-main"></div>');
+  let questions = this.questionsDom;
+  // question 渲染
+  for (let index in questions) {
+    questions[index].renderToDom();
+    main.append(questions[index].vdom);
+  }
+  // main.css(cssOption);
+  this.vDom.append(main);
+}
+
+
+
+
+/** 
+ * function 将数据转换为vdom的形式
+*/
+yzDom.prototype.renderToDom = function () {
+  this.vDom = $('<div id="' +this.domId+ '" class="border-selection"></div>');
+ 
+
+  !this.isSubject ? this._renderObjectiveDom() : this._renderCommonDom();
+
+  let cssOption = {height: this.height};
+  this.border === 1 && (cssOption.border = '1px solid #bfbfbf');
+  this.vDom.css(cssOption)
+
+
+  //监听事件
+  this._addLsiteners();
+}
+
+
+/** 
+ * function 监听resizing事件
+*/
+yzDom.prototype._addLsiteners = function () {
+  let _this = this;
+  if (this.isSubject && this.isDrag) {
+    $(this.vDom).resizable({
+      minWidth: '100%',
+      maxWidth: '100%',
+      minHeight: 0,
+      disabled: false,
+      grid:10,
+      helper: "ui-resizable-helper",
+      resize: function(event, ui) {
+      },
+      stop: function(event, ui) {
+        var nowH = event.target.clientHeight;
+        if (_this.cdelete) {
+          _this.height =nowH < _this.minHeight ? 0 : nowH;
+        } else {
+          _this.height =nowH < _this.minHeight ? _this.minHeight : nowH;
+        }
+        $(_this.vDom).trigger('refreshPage');
+      }
+    });
+  }
+  console.log(_this.vDom);
+};
+export default yzDom;

src/js/yzPage.js

@@ -0,0 +1,60 @@
+import yzDom from './yzDom';
+import $ from 'jquery';
+
+let yzPage = function (cfg) {
+  this.hasHeader = cfg.hasHeader || false;
+  this.header = cfg.header || {};
+  this.gap = cfg.maxHeight || 700;
+  this.index = 0;
+  this.doms = [];
+  // 如果有头部信息去除头部高度
+  this.hasHeader && (this.gap -= this.header.height);
+
+  this.vDom = null;
+  // dom相关属性
+  this.domId = ('lsiten_page_'+Math.random()).replace('.','_');
+  this.domHeight = cfg.maxHeight || 700;
+};
+
+yzPage.prototype.addDom = function (item) {
+  this.index++;
+  this.doms.push(new yzDom(item));
+  this.gap -= item.height;
+  
+};
+
+/** 
+ * @TODO 补充成组件
+*/
+yzPage.prototype._renderHeaderDom = function () {
+  let header = $('<div id="' +this.domId+ '_header" class="page-selection-header"></div>');
+  let main = $('<div class="header-main"></div>');
+  header.css({
+    height: this.header.height + 'px'    
+  });
+  header.append(main);
+  return header;
+};
+
+yzPage.prototype._renderBodyDom = function () {
+  let body = $('<div id="' +this.domId+ '_body" class="page-selection-body"></div>');
+  let doms = this.doms;
+  for (let index in doms) {
+    doms[index].renderToDom();
+    body.append(doms[index].vDom)
+  }
+  return body;
+};
+/** 
+ * function 将数据转换为vdom的形式
+*/
+yzPage.prototype.renderToDom = function () {
+  this.vDom = $('<div id="' +this.domId+ '" class="page-selection"></div>');
+  this.hasHeader && this.vDom.append(this._renderHeaderDom());
+  this.vDom.append(this._renderBodyDom());
+  this.vDom.css({
+    height: this.domHeight + 'px'
+  });
+
+};
+export default yzPage;

src/js/yzQuestion.js

@@ -0,0 +1,107 @@
+import $ from 'jquery'
+let yzQuestion = function (cfg) {
+  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.blockindex = parseInt(cfg.blockindex);
+  this.blocknum = parseInt(cfg.blocknum);
+
+  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'});
+
+  if (this.content) {
+    //content.append(this.content.vdom);
+  } else {
+    //this.content = new component();
+    //content.append(cm.vdom);
+  }
+  this.vdom.append(content);
+}
+
+/** 
+ * 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({
+    height: this.minHeight
+  });
+  this._renderTitleDom();
+  // 如果是客观题
+  if (!this.isSubject) {
+    let width = 100/this.allblock + '%';
+    this.vdom.css({
+      width: width
+    });
+    this._renderObjectiveDom();
+  } else {
+    this._renderCommonDom();
+  }
+}
+export default yzQuestion;

src/js/yzToolbar.js

@@ -0,0 +1,46 @@
+/**
+ * Create by sxd
+ * date 2018-04-11
+ * Description:
+ */
+import $ from 'jquery';
+var yzToolbar = function(){
+  this.menu = [{
+    name: 'table',
+    title: '表格',
+    icon: 'fa-table'
+  },{
+    name: 'underline',
+    title: '下划线',
+    icon: 'fa-minus'
+  },{
+    name: 'picture',
+    title: '图片',
+    icon: 'fa-file-image-o',
+  },{
+    name: 'component',
+    title: '组件框',
+    icon: 'fa-square'
+  }];
+};
+
+yzToolbar.prototype.toolbarContent = function () {
+  // 形成toolbar 样式
+  let toolDom = document.createElement('div');
+  let ulDom = document.createElement('ul');
+  this.menu.forEach( (item) => {
+    let liDom = document.createElement('li');
+    let spanDom = document.createElement('span');
+    let liText = document.createTextNode(item.title);
+    spanDom.className = `icon fa ${item.icon}`;
+    liDom.setAttribute('title',item.title);
+    liDom.appendChild(spanDom);
+    liDom.appendChild(liText);
+    ulDom.appendChild(liDom);
+  });
+  toolDom.className = 'toolbar';
+  toolDom.appendChild(ulDom);
+  return toolDom;
+};
+
+export default yzToolbar;

webpack.config.js

@@ -0,0 +1,86 @@
+const path = require('path');
+const htmlPlugin= require('html-webpack-plugin');
+const PurifyCSSPlugin = require("purifycss-webpack");
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const glob = require('glob');
+var website ={
+    publicPath:"http://localhost:1717/"
+}
+module.exports={
+    //入口文件的配置项
+    entry:{
+      entry:'./src/index.js'
+    },
+    //出口文件的配置项
+    output:{
+      //打包的路径文职
+      path:path.resolve(__dirname,'dist'),
+      //打包的文件名称
+      filename:'[name]-bundle.js',
+      publicPath:website.publicPath
+    },
+    //模块：例如解读CSS,图片如何转换，压缩
+    module:{
+      rules: [
+        {
+          test: /\.css/,
+          exclude:/node_modules/,
+          use: ["style-loader","css-loader", "postcss-loader"],
+        },{
+          test:/\.(png|jpg|gif)/ ,
+          use:[{
+              loader:'url-loader',
+              options:{
+                  limit:5000,
+                  outputPath:'images/',
+              }
+          }]
+       },{
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000
+        }
+      },{
+          test: /\.(htm|html)$/i,
+          use:[ 'html-withimg-loader'] 
+        },{
+          test:/\.(jsx|js)$/,
+          use:{
+              loader:'babel-loader'
+          },
+          exclude:/node_modules/
+        }
+      ]
+    },
+    //插件，用于生产模版和各项功能
+    plugins:[
+      new htmlPlugin({
+        minify:{
+            removeAttributeQuotes:true
+        },
+        hash:true,
+        template:'./src/index.html'
+      }),
+      new UglifyJsPlugin({
+          uglifyOptions: {
+            ie8: true
+          }
+      }),
+      new PurifyCSSPlugin({
+        // Give paths to parse for rules. These should be absolute!
+        paths: glob.sync(path.join(__dirname, 'src/*.html')),
+      })
+    ],
+    //配置webpack开发服务功能
+    devServer:{
+      //设置基本目录结构
+      contentBase:path.resolve(__dirname,'dist'),
+      //服务器的IP地址，可以使用IP也可以使用localhost
+      host:'localhost',
+      //服务端压缩是否开启
+      compress:true,
+      //配置服务端口号
+      port:1717
+    }
+}