页面跟题目挂钩

src/model/Page.js

@@ -3,7 +3,8 @@
  */
 export default class Page {
   constructor(page = {}) {
-    this.elements = page.elements || [];
-    this.position = 0;
+    this.elements = page.elements || []; // 页面元素
+    this.questions = page.questions || []; // 页面关联问题
+    this.position = page.position || 0;
   }
 }

src/views/h5editor/index.vue

@@ -7,7 +7,8 @@
     <!-- 内容区域 -->
     <section class="section">
       <!-- 左侧图层 -->
-      <Overview ref='overview' class="overview" :testcaseId="testcaseId" :resultCount="resultPageCount" />
+      <Overview ref='overview' class="overview" :testcaseId="testcaseId" :resultCount="resultPageCount"
+        :questions="questions" />
       <!-- 编辑区域 -->
       <div class="container" id="h5editor">
         <elab-canvas v-show="animatedNameGlobal!=''" :width="750" :height="1334"
@@ -304,6 +305,7 @@ export default {
     return {
       itemId: null,
       testcaseId: null,
+      questions: [],
       panelState: 0,
       canvasWidth: 750,
       canvasHeight: 504,
@@ -423,6 +425,23 @@ export default {
         this.$store.state.editor.editorTheme.animatedNameBackgroundGlobal || "";
       this.title = this.$store.state.editor.editorTheme.title;
       this.gridTempField = this.$store.state.editor.gridTempField;
+
+      var pages = this.$store.state.editor.editorTheme.pages || [];
+      console.log("每页数据", pages);
+      this.questions = [];
+      for (var i = 1; i < pages.length; i++) {
+        if (pages[i].questions) {
+          console.log("每页数据", pages[i].questions);
+          var result = pages[i].questions.map(function(a) {
+            return a.questionId;
+          });
+          this.questions.push(result);
+        } else {
+          this.questions.push([]);
+        }
+      }
+      console.log("拼接数据", this.questions);
+
       return this.$store.state.editor.editorPage;
     },
     element() {
@@ -808,7 +827,6 @@ export default {
       if (!this.pages) {
         this.$store.dispatch("getPageByThemeId", this.itemId);
       }
-
       // this.getPicList(this.itemId);
     } else {
       this.$store.dispatch("createTheme");

src/views/h5editor/overview.vue

@@ -82,9 +82,12 @@
       </div>
       <el-collapse-transition>
         <div v-show="showTopic">
-          <el-checkbox-group v-model="checkList" class="topic-group">
-            <el-checkbox v-for="item in questionList" :label="item.name" :key="item.name"></el-checkbox>
-          </el-checkbox-group>
+          <div class="topic-group">
+            <el-checkbox v-for="(item, index) in questionList" :label="item.name" :key="index"
+              @change="checked=>selectCheckbox(checked,item,index)" :checked="isChecked(index)"
+              :disabled="isDisabled(index)">
+            </el-checkbox>
+          </div>
         </div>
       </el-collapse-transition>
     </div>
@@ -98,7 +101,8 @@ import editorApi from "../../api/editor";
 export default {
   props: {
     testcaseId: "",
-    resultCount: 0
+    resultCount: 0,
+    questions: []
   },
   data() {
     return {
@@ -111,11 +115,12 @@ export default {
       questionPages: [],
       resultPageCount: this.resultCount,
       resultPages: [],
-      checkList: ["4.选中且禁用"],
       showTopic: true,
       topicIcon: "../../static/img/up-arrow.png",
       questionList: [],
-      isShowQuestion: false
+      isShowQuestion: false,
+      currentPage: 0,
+      selectQuestions: this.questions
     };
   },
   mounted() {
@@ -161,6 +166,57 @@ export default {
     }
   },
   methods: {
+    isChecked(index) {
+      var question = this.questionList[index].questionId;
+      var arrTemp = [];
+      this.selectQuestions.forEach(function(value, key, arr) {
+        arrTemp.push(...value);
+      });
+      return arrTemp.indexOf(question) != -1;
+    },
+    isDisabled(index) {
+      var question = this.questionList[index].questionId;
+      var arrTemp = [];
+      this.selectQuestions.forEach(function(value, key, arr) {
+        arrTemp.push(...value);
+      });
+      let questions = this.selectQuestions[this.currentPage - 1] || [];
+      if (questions.indexOf(question) == -1) {
+        if (questions.length == 2) {
+          return true;
+        } else {
+          return arrTemp.indexOf(question) != -1;
+        }
+      } else {
+        return false;
+      }
+    },
+    selectCheckbox(checked, item, index) {
+      console.log("选中", checked, item, index);
+      let questions = this.selectQuestions[this.currentPage - 1] || [];
+      if (checked) {
+        questions.push(item.questionId);
+        console.log("AAAAAAAAA", questions);
+      } else {
+        questions.splice(
+          questions.findIndex(itemTemp => itemTemp === item.questionId),
+          1
+        );
+        console.log("DDDDDDDDDD", questions);
+      }
+
+      var selecteQuestionList = [];
+      for (var i = 0; i < questions.length; i++) {
+        var selectQID = questions[i];
+        for (var n = 0; n < this.questionList.length; n++) {
+          if (this.questionList[n].questionId == selectQID) {
+            selecteQuestionList.push(this.questionList[n]);
+          }
+        }
+      }
+      console.log("RRRRRRRRRR", selecteQuestionList);
+      this.$store.dispatch("addQuestion", selecteQuestionList);
+    },
     isShow: function(index) {
       var result = false;
       if (index > 0) {
@@ -255,6 +311,8 @@ export default {
       var position = this.pages.length - this.resultPageCount;
       this.$store.dispatch("addPagePosition", position);
       this.isShowQuestion = true;
+      this.selectQuestions.push([]);
+      this.currentPage += 1;
     },
     addResultPage() {
       this.bodyBackgroundColor =
@@ -265,6 +323,7 @@ export default {
       this.isShowQuestion = false;
     },
     setEditingPage(page, index) {
+      this.currentPage = index;
       if (index == 0 || this.isShowResult(index)) {
         this.isShowQuestion = false;
       } else {
@@ -293,6 +352,14 @@ export default {
     },
     resultCount(val) {
       this.resultPageCount = val;
+    },
+    questions(val) {
+      console.log("当前页数:", val);
+      this.selectQuestions = val;
+    },
+    currentPage(val) {
+      console.log("当前页数:", val);
+      this.questionList = this.questionList;
     }
   }
 };

src/vuex/editor/actions.js

@@ -87,6 +87,15 @@ export const addElement = ({ commit, state }, data) => {
   commit(types.SET_CUR_EDITOR_ELEMENT, state.editorPage.elements[lastIndex])
 }
 
+/**
+ * 添加页面问题
+ */
+export const addQuestion = ({ commit }, data) => {
+  commit(types.ADD_PAGE_QUESTION, data)
+  commit(types.SET_CUR_EDITOR_ELEMENT, null)
+}
+
+
 /**
  * 添加背景图片
  */

src/vuex/editor/index.js

@@ -5,7 +5,8 @@ import * as getters from './getters'
 const state = {
   editorElement: {}, // 正在编辑的元素
   editorPage: {
-    elements: []
+    elements: [],
+    questions: []
   }, // 正在编辑的页面
   themeList: [], // 用户所有主题列表
   editorTheme: {
@@ -20,12 +21,12 @@ const state = {
 
   }, // 正在编辑的主题
   picList: [], // 图片列表
-  gridTempField:false,//网格参考线
-  complexEditorElement:[], //ctrl点击多个的情况
-  ctrlKeyDownFlag:false,//是否按住了ctrl键
+  gridTempField: false,//网格参考线
+  complexEditorElement: [], //ctrl点击多个的情况
+  ctrlKeyDownFlag: false,//是否按住了ctrl键
 }
 
-export default{
+export default {
   state,
   getters,
   actions,

src/vuex/editor/mutation-type.js

@@ -24,3 +24,4 @@ export const PUSH_PIC_LIST = 'PUSH_PIC_LIST' // 图片列表
 export const CLEAN_PIC_LIST = 'CLEAN_PIC_LIST' // 清除图片列表
 export const DELETE_THEME = 'DELETE_THEME' // 删除主题
 export const SORTELEMENTS_BY_ZINDEX = 'SORTELEMENTS_BY_ZINDEX' // 元素重新排序
+export const ADD_PAGE_QUESTION = 'ADD_PAGE_QUESTION' // 添加问题

src/vuex/editor/mutations.js

@@ -9,6 +9,9 @@ const mutations = {
   [types.ADD_PIC_ELEMENT](state, data) {
     state.editorPage.elements.push(new Element(data))
   },
+  [types.ADD_PAGE_QUESTION](state, data) {
+    state.editorPage.questions = data
+  },
   [types.SET_BG_ELEMENT](state, data) {
     let haveBG = false
     state.editorPage.elements.findIndex((value, index, arr) => {

static/json.json

@@ -1,6 +1,7 @@
 {
   "pages": [
     {
+      "questions": [],
       "elements": [
         {
           "name": "dv_13psd_layer_0",
@@ -3460,4 +3461,4 @@
   "createDate": "2018-08-30T10:50:56.121Z",
   "canvasHeight": 6500,
   "canvasWidth": 750
-}
+}