自我评价

src/components/Adult/Preview.vue

@@ -110,6 +110,12 @@
                 <template v-if="itemss.type == 'sentence_listen_read_chs'">
                   <SentenceListenRead :curQue="itemss.data" />
                 </template>
+                <template v-if="itemss.type == 'sort_chs'">
+                  <SentenceSort :curQue="itemss.data" />
+                </template>
+                <template v-if="itemss.type == 'checkbox_self_assessment_chs'">
+                  <Checkbox :curQue="itemss.data" />
+                </template>
               </template>
             </div>
           </div>
@@ -140,6 +146,8 @@ import TextProblem from './preview/TextProblem.vue' // 课文上方的问题
 import NewWordShow from './preview/NewWordShow.vue' // 生字展示
 import SelectYinjie from './preview/SelectYinjie.vue' // 选择音节
 import SentenceListenRead from './preview/SentenceListenRead.vue' // 听并朗读
+import SentenceSort from './preview/SentenceSort.vue' // 句子拖拽排序
+import Checkbox from './preview/CheckBoxModule.vue' // 问卷调查-多选题
 export default {
   name: "preview",
   components: {
@@ -163,6 +171,8 @@ export default {
     NewWordShow,
     SelectYinjie,
     SentenceListenRead,
+    SentenceSort,
+    Checkbox,
   },
   props: ["context", "fatherName"],
   data() {

src/components/Adult/preview/CheckBoxModule.vue

@@ -0,0 +1,72 @@
+<!--  -->
+<template>
+    <div class="Big-Book-prev-Textdes CheckboxModule" v-if="curQue">
+        <h2>{{curQue.title}}</h2>
+        <el-checkbox v-model="userList[index]" v-for="(item,index) in curQue.option" :key="index">{{item.con}}</el-checkbox>
+    </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: ["curQue"],
+  data() {
+    return {
+        userList: []
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+      handleData(){
+          let _this = this
+          _this.curQue.option.forEach(item => {
+              _this.userList.push(false)
+          });
+      }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.CheckboxModule{
+    width: 100%;
+    margin: 0;
+    h2{
+        margin: 8px 0;
+        font-size: 16px;
+        line-height: 150%;
+        color: #000000;
+    }
+    .el-checkbox{
+        width: 100%;
+        margin: 4px 0;
+    }
+}
+</style>
+<style lang="scss">
+.CheckboxModule{
+    .el-checkbox__label,.el-checkbox__input.is-checked+.el-checkbox__label{
+        color: #000000;
+        font-size: 16px;
+        line-height: 1.5;
+        font-weight: normal;
+    }
+    .el-checkbox__inner{
+        border-color: #4D91F6;
+    }
+}
+
+</style>

src/components/Adult/preview/SentenceSort.vue

@@ -0,0 +1,104 @@
+<!--  -->
+<template>
+    <div class="Big-Book-prev-Textdes sentenceSort" v-if="curQue">
+        <h2>{{curQue.title}}</h2>
+        <div class="item-box" v-for="(item,index) in curQue.option" :key="index">
+            <b>{{index+1}}</b>
+            <div class="item-right">
+                <draggable v-model="item.detail" group="site"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
+                    <transition-group>
+                        <div class="item" v-for="(itemNode,indexNode) in item.detail.wordsList" :key="indexNode">
+                            {{itemNode.value}}
+                        </div>
+                    </transition-group>
+                </draggable>
+                <draggable v-model="userList[index]" group="site"  animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
+                    <transition-group>
+                        <div class="item" v-for="(itemNode,indexNode) in userList[index]" :key="indexNode">
+                            {{itemNode.value}}
+                        </div>
+                    </transition-group>
+                </draggable>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+export default {
+  components: {draggable},
+  props: ["curQue"],
+  data() {
+    return {
+        userList: [],
+        drag:false,
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+      handleData(){
+          let _this = this
+          _this.userList = []
+          _this.curQue.option.forEach(item => {
+              _this.userList.push([])
+              
+          });
+      },
+      onStart(){
+        this.drag=true;
+      },
+      //拖拽结束事件
+       onEnd() {
+         this.drag=false;
+      },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.sentenceSort {
+    width: 100%;
+    background: #F7F7F7;
+    padding: 24px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    border-radius: 8px;
+    h2{
+        color: #000000;
+        font-size: 16px;
+        line-height: 19px;
+        margin: 0;
+        font-weight: normal;
+    }
+    .item-box{
+        display: flex;
+        margin: 8px 0;
+        b{
+            background: #DE4444;
+            text-align: center;
+            width: 16px;
+            height: 16px;
+            color: #FFFFFF;
+            border-radius: 50%;
+            font-size: 12px;
+            font-family: 'robot';
+            line-height: 16px;
+            margin-right: 4px;
+        }
+    }
+}
+</style>