update

src/components/pages/test/add/addTest.vue

@@ -23,9 +23,11 @@
                     </div>
                     <div class="r_pub_button_retrun" @click="retrunCourse">返回</div>
                 </div>
-                <div class="step_box" :style="{width: steps == 2 && '100%'}">
-                    <setInfo v-if="steps == 1" :oid="oid" :org="org" :steps.sync="steps" :title.sync="title" :testType.sync="testType" :see.sync="see" :cJson.sync="cJson"></setInfo>
-                    <editInfo v-if="steps == 2" :oid="oid" :org="org" :steps.sync="steps" :title.sync="title" :cJson.sync="cJson"></editInfo>
+                <div class="step_box" :style="{ width: steps == 2 && '100%' }">
+                    <setInfo v-if="steps == 1" :oid="oid" :org="org" :steps.sync="steps" :title.sync="title"
+                        :testType.sync="testType" :see.sync="see" :cJson.sync="cJson"></setInfo>
+                    <editInfo v-if="steps == 2" :oid="oid" :org="org" :steps.sync="steps" :title.sync="title"
+                        :cJson.sync="cJson" @save="save" @publish="publish"></editInfo>
                 </div>
             </div>
         </div>
@@ -37,7 +39,7 @@ import setInfo from './setInfo/index.vue'
 import editInfo from './edit/index.vue'
 export default {
     components: {
-        setInfo,editInfo
+        setInfo, editInfo
     },
     data() {
         return {
@@ -103,6 +105,22 @@ export default {
         goTo(path) {
             this.$router.push(path);
         },
+        save() {
+            this.$message.success("保存成功")
+        },
+        publish() {
+            this.$message.success("发布成功")
+            this.goTo(
+                "/test?userid=" +
+                this.userid +
+                "&oid=" +
+                this.oid +
+                "&org=" +
+                this.org +
+                "&role=" +
+                this.role
+            );
+        },
     },
 }
 </script>

src/components/pages/test/add/components/checkOrder.vue

@@ -0,0 +1,277 @@
+<template>
+    <div class="co_box">
+        <div v-for="(item1, index1) in this.checkJson" :key="index1" class="mc_ti_1" :draggable="isdrag == `${index1}`"
+            :class="{ active: checkC === `x${index1}` }">
+            <div class="title" @click.stop="checkTitle(`${index1}`)">
+                <div class="drag" @mousedown="setDrag(`${index1}`)" @mouseup="isdrag = ''"></div>
+                <span>{{ selectType(item1, index1) }}</span>
+                <div class="btnBox">
+                    <div class="delete" @click.stop="deleteCheck(`${index1}`)"></div>
+                    <div class="open" v-if="item1.array && item1.array.length" :class="{ isopen: item1.isopen }"
+                        @click.stop="openPan(index1)"></div>
+                </div>
+            </div>
+            <div v-if="item1.array && item1.array.length && item1.isopen" class="mc_ti_1_xia">
+                <div v-for="(item2, index2) in item1.array" :key="`${index1}-${index2}`" class="mc_ti_2"
+                    :draggable="isdrag == `${index1}-${index2}`" :class="{ active: checkC === `x${index1}-${index2}` }">
+                    <div class="title" @click.stop="checkTitle(`${index1}-${index2}`)">
+                        <div class="drag" @mousedown="setDrag(`${index1}-${index2}`)" @mouseup="isdrag = ''"></div>
+                        <span>{{ selectType(item2, index2) }}</span>
+                        <div class="btnBox">
+                            <div class="delete" @click.stop="deleteCheck(`${index1}-${index2}`)"></div>
+                            <div class="open" v-if="item2.array && item2.array.length" :class="{ isopen: item2.isopen }"
+                                @click.stop="openPan(index1, index2)"></div>
+                        </div>
+                    </div>
+                    <div v-if="item2.array && item2.array.length && item2.isopen" class="mc_ti_2_xia">
+                        <div v-for="(item3, index3) in item2.array" :key="`${index1}-${index2}-${index3}`" class="mc_ti_3"
+                            :draggable="isdrag == `${index1}-${index2}-${index3}`"
+                            :class="{ active: checkC === `x${index1}-${index2}-${index3}` }">
+                            <div class="title" @click.stop="checkTitle(`${index1}-${index2}-${index3}`)">
+                                <div class="drag" @mousedown="setDrag(`${index1}-${index2}-${index3}`)"
+                                    @mouseup="isdrag = ''"></div>
+                                <span>{{ selectType(item3, index3) }}</span>
+                                <div class="btnBox">
+                                    <div class="delete" @click.stop="deleteCheck(`${index1}-${index2}-${index3}`)"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import minxinVue from '../minxins/minxin';
+
+export default {
+    mixins:[minxinVue],
+    props: {
+        checkJson: {
+            type: Array,
+        },
+        checkC: {
+            type: String
+        }
+    },
+    data() {
+        return {
+            manualJson:[],
+            isdrag: ""
+        }
+    },
+    computed: {
+        selectType() {
+            return function (item, index) {
+                if (item.ttype == 1) {
+                    return index + 1 + "、" + this.options2[item.type];
+                } else if (item.ttype == 2) {
+                    return `第${index + 1}组 （共${item.array.length}题）`;
+                } else if (item.ttype == 3) {
+                    return `分页${index + 1}`;
+                }
+            };
+        }
+    },
+    watch: {
+        checkJson: {
+            handler(newVal){
+                this.manualJson = this.depthCopy(newVal)
+            },
+            deep: true
+        }
+    },
+    methods: {
+        setDrag(index) {
+            console.log(index);
+            this.isdrag = index
+        },
+        openPan(index1, index2) {
+            console.log(this.manualJson);
+            if (index2 === 0 || index2) {
+                this.manualJson[index1].array[index2].isopen = !this.manualJson[index1].array[index2].isopen
+            } else {
+                this.manualJson[index1].isopen = !this.manualJson[index1].isopen
+            }
+            this.$forceUpdate();
+            this.$emit("changeJson", this.manualJson);
+        },
+        checkTitle(index) {
+            if (this.checkC === "x" + index) {
+                this.$emit("update:checkC", "") 
+            } else {
+                this.$emit("update:checkC", 'x' + index) 
+            }
+        },
+        deleteCheck(index) {
+            let _check = index.split("-")
+            let string = ""
+            if (_check.length == 1) {
+                if (this.manualJson[_check[0]].ttype == 1) {
+                    string = "确定删除该题目吗?"
+                } else if (this.manualJson[_check[0]].ttype == 2) {
+                    string = "删除该分组将会同步删除该分组下所有内容，是否继续操作?"
+                } else if (this.manualJson[_check[0]].ttype == 3) {
+                    string = "删除该分页将会同步删除该分页下所有内容，是否继续操作?"
+                }
+            } else if (_check.length == 2) {
+                if (this.manualJson[_check[0]].array[_check[1]].ttype == 1) {
+                    string = "确定删除该题目吗?"
+                } else if (this.manualJson[_check[0]].array[_check[1]].ttype == 2) {
+                    string = "删除该分组将会同步删除该分组下所有内容，是否继续操作?"
+                }
+            } else if (_check.length == 3) {
+                string = "确定删除该题目吗?"
+            }
+            this.$confirm(string, "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    if (_check.length == 1) {
+                        this.manualJson.splice(_check[0], 1)
+                    } else if (_check.length == 2) {
+                        this.manualJson[_check[0]].array.splice(_check[1], 1)
+                    } else if (_check.length == 3) {
+                        this.manualJson[_check[0]].array[_check[1]].array.splice(_check[2], 1)
+                    }
+                    this.$emit("update:checkC", "") 
+                    this.$forceUpdate()
+                    this.$emit("changeJson", this.manualJson);
+                })
+                .catch(() => { });
+        },
+        
+    },
+    mounted () {
+        this.manualJson = this.depthCopy(this.checkJson);
+    },
+}
+</script>
+
+<style scoped>
+.co_box {
+    width: 100%;
+}
+
+.mc_ti_1 {
+    width: 100%;
+    min-height: 40px;
+    border: 1px solid #bcbcbc;
+    padding: 10px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+}
+
+
+
+.mc_ti_1+.mc_ti_1 {
+    margin-top: 10px;
+}
+
+.mc_ti_1>.title {
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.mc_ti_1_xia,
+.mc_ti_2_xia {
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.mc_ti_2 {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    border: 1px solid #bcbcbc;
+}
+
+.mc_ti_2+.mc_ti_2 {
+    margin-top: 10px;
+}
+
+.mc_ti_2>.title {
+    cursor: pointer;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+}
+
+
+.mc_ti_3 {
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid #bcbcbc;
+}
+
+.mc_ti_3+.mc_ti_3 {
+    margin-top: 10px;
+}
+
+.mc_ti_3>.title {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.mc_ti_1>.title>.drag,
+.mc_ti_2>.title>.drag,
+.mc_ti_3>.title>.drag {
+    display: block;
+    background-image: url('../../../../../assets/icon/new/icon_course_drag.png');
+    background-size: 100% 100%;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.mc_ti_1>.title>.btnBox,
+.mc_ti_2>.title>.btnBox,
+.mc_ti_3>.title>.btnBox {
+    margin-left: auto;
+    display: flex;
+}
+
+.mc_ti_1>.title>.btnBox .open,
+.mc_ti_2>.title>.btnBox .open {
+    display: block;
+    background-image: url('../../../../../assets/icon/new/u_arrow.png');
+    background-size: 100% 100%;
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    transition: all .5s;
+    transform: rotate(-90deg);
+}
+
+.mc_ti_1>.title>.btnBox .delete,
+.mc_ti_2>.title>.btnBox .delete,
+.mc_ti_3>.title>.btnBox .delete {
+    display: block;
+    background-image: url('../../../../../assets/icon/new/delete_u.png');
+    background-size: 100% 100%;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    margin-right: 10px;
+}
+
+.mc_ti_1>.title>.btnBox .isopen,
+.mc_ti_2>.title>.btnBox .isopen {
+    transform: rotate(0deg);
+}
+
+.mc_ti_1.active,
+.mc_ti_2.active,
+.mc_ti_3.active {
+    border: 1px solid #0062ff;
+}
+</style>

src/components/pages/test/add/edit/edit/index.vue

@@ -1,25 +1,302 @@
 <template>
-  <div class="edit_box">
-    <div>题目添加</div>
-    <div></div>
-    <div>题目排序</div>
-  </div>
+    <div class="edit_box">
+        <div class="e_add">
+            <div class="title">题目添加</div>
+            <div class="e_add_box">
+                <div class="title">添加题型</div>
+                <div class="e_add_ci">
+                    <div class="title">基础题型</div>
+                    <div class="box">
+                        <div class="btn" v-for="item in options" :key="item.label" @click="addCheck(item.value)"><el-button type="primary"
+                                size="mini">{{ item.label }}</el-button></div>
+                    </div>
+                </div>
+            </div>
+            <div class="e_add_box">
+                <div class="title">添加组件</div>
+                <div class="e_add_ci">
+                    <div class="box">
+                        <div class="btn" v-for="item in buttonOptions" :key="item.name" @click="addQtype(item.type)"><el-button type="primary"
+                                size="mini">{{ item.name }}</el-button></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="e_content">
+            <div class="e_order_box">
+                <checkOrder :checkC.sync="checkC" :checkJson="manualJson" @changeJson="changeJson"></checkOrder>
+            </div>
+        </div>
+        <div class="e_order">
+            <div class="title">题目排序</div>
+            <div class="e_order_box" style="margin-top: 20px;">
+                <checkOrder :checkC.sync="checkC" :checkJson="manualJson" @changeJson="changeJson"></checkOrder>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+import checkOrder from '../../components/checkOrder.vue';
+import minxinVue from '../../minxins/minxin';
 export default {
+    components: {
+        checkOrder,
+    },
+    mixins: [minxinVue],
+    props: {
+        checkJson: {
+            type: Array,
+        },
+    },
     data() {
         return {
+            manualJson: [],
+            checkC: "",
         }
     },
+    watch: {
+        checkJson:{
+            handler(newVal){
+                this.manualJson = this.depthCopy(newVal);
+            },
+            deep: true
+        }
+    },
+    methods: {
+        changeJson(json) {
+            this.manualJson = json;
+            this.$emit("changeJson", json);
+        },
+        addCheck(topicType) {
+            let type = 1;
+            if (this.manualJson.length > 0) {
+                for (var i = 0; i < this.manualJson.length; i++) {
+                    if (this.manualJson[i].ttype == 2) {
+                        type = 2;
+                    } else if (this.manualJson[i].ttype == 3) {
+                        type = 3;
+                    }
+                }
+            }
+            if (this.checkC) {
+                let _check = this.checkC.replace('x', '').split("-")
+                let _json = this.manualJson[_check[0]]
+                let json = {
+                    ttype: 1,
+                    type: topicType
+                }
+                if (_json.array) {
+                    if (type == 3 && _check.length == 2) {
+                        if (this.manualJson[_check[0]].array[_check[1]].array) {
+                                this.manualJson[_check[0]].array[_check[1]].array.push(json)
+                        } else {
+                                this.manualJson[_check[0]].array.splice((_check[1]) + 1, 0, json)
+                        }
+
+                    } else if (type == 3 && _check.length == 3) {
+                            this.manualJson[_check[0]].array[_check[1]].array.splice((_check[2]) + 1, 0, json)
+                    } else if (type == 2 && _check.length == 2) {
+                            this.manualJson[_check[0]].array.splice((_check[1]) + 1, 0, json)
+                    } else if (type == 2 && _check.length == 1) {
+                            this.manualJson[_check[0]].array.push(json)
+                    } else if (type == 3 && _check.length == 1) {
+                        if(this.manualJson[_check[0]].array[0] && this.manualJson[_check[0]].array[0].array){
+                                this.manualJson[_check[0]].array[0].array.push(json)
+                        }else{
+                                this.manualJson[_check[0]].array.push(json)
+                        }
+                    }
+                } else {
+                        this.manualJson.splice(parseInt(_check[0]) + 1, 0, json);
+                }
+            } else {
+                if (type == 1) {
+                        this.manualJson.push({
+                            ttype: 1,
+                            type: topicType
+                        });
+                } else if (type == 3 || type == 2) {
+                    this.$message.error("请选中分页或者分组添加题目");
+                    return;
+                }
+            }
+            topicType = "";
+            this.$emit("changeJson", this.manualJson);
+        },
+        addQtype(type) {
+            if (type == 1) {
+
+                let type = 1;
+                if (this.manualJson.length > 0) {
+                    for (var i = 0; i < this.manualJson.length; i++) {
+                        if (this.manualJson[i].ttype == 1) {
+                            type = 2;
+                        } else if (this.manualJson[i].ttype == 3) {
+                            type = 3;
+                        }
+                    }
+                }
+                let json = {
+                    ttype: 2,
+                    array: [],
+                    isopen: true
+                }
+                if (type == 1) {
+                    if (this.checkC) {
+                        let _check = this.checkC.replace('x', '').split("-")
+                        this.manualJson.splice(parseInt(_check[0]) + 1, 0, json);
+                    } else {
+                        this.manualJson.push(json);
+                    }
+                } else if (type == 2) {
+                    this.manualJson = [
+                        {
+                            ttype: 2,
+                            array: this.depthCopy(this.manualJson),
+                            isopen: true
+                        }
+                    ];
+                } else if (type == 3) {
+                    if (this.checkC) {
+                        let _check = this.checkC.replace('x', '').split("-")
+
+                        if (_check.length > 1 && this.manualJson[_check[0]].array[0] && this.manualJson[_check[0]].array[0].array) {
+                            this.manualJson[_check[0]].array.splice(parseInt(_check[1]) + 1, 0, json);
+                        } else if (this.manualJson[_check[0]].array[0] && !this.manualJson[_check[0]].array[0].array) {
+                            this.manualJson[_check[0]].array = [
+                                {
+                                    ttype: 2,
+                                    array: this.depthCopy(this.manualJson[_check[0]].array),
+                                    isopen: true
+                                }
+                            ]
+                        } else {
+                            this.manualJson[_check[0]].array.push(json);
+                        }
+                    } else {
+                        this.$message.error("请选中分页添加分组");
+                        return;
+                    }
+                }
+
+            } else if (type == 2) {
+
+                let type = 1;
+                if (this.manualJson.length > 0) {
+                    for (var i = 0; i < this.manualJson.length; i++) {
+                        if (this.manualJson[i].ttype == 1 || this.manualJson[i].ttype == 2) {
+                            type = 2;
+                        }
+                    }
+                }
+                if (type == 1) {
+                    let json = {
+                        ttype: 3,
+                        array: [],
+                        isopen: true
+                    }
+                    if (this.checkC) {
+                        let _check = this.checkC.replace('x', '').split("-")
+
+                        this.manualJson.splice(parseInt(_check[0]) + 1, 0, json);
+                    } else {
+                        this.manualJson.push(json);
+                    }
+                } else {
+                    this.manualJson = [
+                        {
+                            ttype: 3,
+                            array: this.depthCopy(this.manualJson),
+                            isopen: true
+                        }
+                    ];
+                }
+
+            }
+            this.$emit("changeJson", this.manualJson);
+        },
+    },
+    mounted() {
+        this.manualJson = this.depthCopy(this.checkJson);
+    },
 }
 </script>
 
 <style scoped>
-.edit_box{
+.edit_box {
     width: 100%;
     height: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 0 0;
+    box-sizing: border-box;
+}
+
+.e_add {
+    height: 100%;
+    width: 300px;
+    background: #fff;
     overflow: auto;
+    padding: 20px 10px;
+    box-sizing: border-box;
+}
+
+.e_content {
+    height: 100%;
+    width: calc(100% - 620px);
+    background: #fff;
+    overflow: auto;
+    padding: 20px 10px;
+    box-sizing: border-box;
+}
+
+.e_order {
+    height: 100%;
+    width: 300px;
+    background: #fff;
+    overflow: auto;
+    padding: 20px 10px;
+    box-sizing: border-box;
+}
+
+.e_add>.title,
+.e_order>.title {
+    text-align: center;
+    font-size: 20px;
+}
+
+.e_add_box {
+    width: 100%;
+    border: 1px solid #dcdcdc;
+    margin-top: 20px;
+    border-radius: 3px;
+    background: #f4f4f4;
+    box-sizing: border-box;
+    padding: 10px 20px;
+}
+
+.e_add_box>.title {
+    text-align: center;
+    font-weight: bold;
+}
+
+.e_add_box>.e_add_ci {
+    margin-top: 10px;
+}
+
+.e_add_box>.e_add_ci>.title {
+    font-size: 14px;
+    margin-bottom: 10px;
+}
+
+.e_add_box>.e_add_ci>.box {
     display: flex;
+    flex-wrap: wrap;
 }
-</style>
+
+.e_add_box>.e_add_ci>.box>.btn {
+    margin-bottom: 10px;
+    width: 50%;
+}</style>

src/components/pages/test/add/edit/index.vue

@@ -9,13 +9,13 @@
       </div>
       <div class="op_btn">
         <el-button type="primary" size="small" @click="lastSteps">上一步</el-button>
-        <el-button type="primary" size="small" >保存</el-button>
-        <el-button type="primary" size="small" >发布</el-button>
-        
+        <el-button type="primary" size="small" @click="save">保存</el-button>
+        <el-button type="primary" size="small" @click="publish">发布</el-button>
+
       </div>
     </div>
     <div class="e_box">
-      <editBox v-if="type"></editBox>
+      <editBox v-if="type == 1" :checkJson="checkJson"  @changeJson="changeJson"></editBox>
     </div>
   </div>
 </template>
@@ -45,14 +45,38 @@ export default {
   },
   data() {
     return {
-      type:1
+      type: 1,
+      checkJson: [],
     }
   },
+  watch: {
+    cJson: {
+      handler: function (newVal, oldVal) { 
+        this.checkJson = this.depthCopy(newVal);
+      },
+      deep: true,
+    },
+  },
   methods: {
     lastSteps() {
       this.$emit('update:steps', this.steps - 1)
+    },
+    save() {
+      this.$emit("save")
+    },
+    publish() {
+      this.$emit("publish")
+    },
+    depthCopy(s) {
+      return JSON.parse(JSON.stringify(s))
+    },
+    changeJson(json) {
+      this.$emit("update:cJson", json);
     }
   },
+  mounted() {
+    this.checkJson = this.depthCopy(this.cJson);
+  },
 }
 </script>
 
@@ -61,12 +85,13 @@ export default {
   width: calc(100%);
   background: #F0F2F5;
   overflow: auto;
-  height: calc(100% - 20px);
+  height: calc(100%);
   margin: 0 auto;
   position: relative;
   box-sizing: border-box;
 }
-.edit_top{
+
+.edit_top {
   height: 50px;
   background: #fff;
   display: flex;
@@ -74,33 +99,36 @@ export default {
   justify-content: center;
   position: relative;
 }
-.edit_top > .edit_btn{
+
+.edit_top>.edit_btn {
   display: flex;
   height: 100%;
   align-items: center;
 }
-.edit_top > .edit_btn > span{
+
+.edit_top>.edit_btn>span {
   cursor: pointer;
   padding-bottom: 5px;
   display: block;
 }
-.edit_top > .edit_btn >.active {
-    color: #3e88f4;
-    border-bottom: 2px solid #2f80f3;
+
+.edit_top>.edit_btn>.active {
+  color: #3e88f4;
+  border-bottom: 2px solid #2f80f3;
 }
 
-.edit_top > .edit_btn > span + span{
+.edit_top>.edit_btn>span+span {
   margin-left: 35px;
 }
-.edit_top > .op_btn{
+
+.edit_top>.op_btn {
   position: absolute;
   right: 30px;
 }
 
-.e_box{
+.e_box {
   height: calc(100% - 50px);
   width: 100%;
   overflow: hidden;
   background: rgb(196, 226, 241);
-}
-</style>
+}</style>

src/components/pages/test/add/minxins/minxin.js

@@ -0,0 +1,44 @@
+const minxin = {
+  data() {
+    return {
+      options: [
+        {
+          value: 1,
+          label: "选择题"
+        },
+        {
+          value: 2,
+          label: "问答题"
+        },
+        {
+          value: 3,
+          label: "填空题"
+        },
+        {
+          value: 4,
+          label: "添加文档"
+        }
+      ],
+      options2: {
+        1: "选择题",
+        2: "问答题",
+        3: "填空题",
+        4: "添加文档"
+      },
+      buttonOptions: [
+        { name: "分组", type: 1 },
+        { name: "分页", type: 2 }
+      ]
+    };
+  },
+  computed: {},
+  mounted() {},
+  activated() {},
+  methods: {
+    depthCopy(s) {
+      return JSON.parse(JSON.stringify(s));
+    }
+  }
+};
+
+export default minxin;

src/components/pages/test/add/setInfo/index.vue

@@ -177,6 +177,8 @@ export default {
                 this.$emit("update:cJson", this.manualJson)
             }
             this.$emit('update:steps',this.steps+1)
+            console.log(this.cJson);
+            console.log(this.manualJson);
         }
     },
     created() {
@@ -195,7 +197,7 @@ export default {
     width: calc(100%);
     background: #F0F2F5;
     overflow: auto;
-    height: calc(100% - 20px);
+    height: calc(100%);
     margin: 0 auto;
     position: relative;
     box-sizing: border-box;

src/components/pages/test/add/setInfo/manualCreated.vue

@@ -22,46 +22,7 @@
             </div>
         </div>
         <div class="mc_checkBox">
-            <div v-for="(item1, index1) in this.checkJson" :key="index1" class="mc_ti_1" :draggable="isdrag == `${index1}`"
-                :class="{ active: checkC === `x${index1}` }">
-                <div class="title" @click.stop="checkTitle(`${index1}`)">
-                    <div class="drag" @mousedown="setDrag(`${index1}`)" @mouseup="isdrag = ''"></div>
-                    <span>{{ selectType(item1, index1) }}</span>
-                    <div class="btnBox">
-                        <div class="delete" @click.stop="deleteCheck(`${index1}`)"></div>
-                        <div class="open" v-if="item1.array && item1.array.length" :class="{ isopen: item1.isopen }"
-                            @click.stop="openPan(index1)"></div>
-                    </div>
-                </div>
-                <div v-if="item1.array && item1.array.length && item1.isopen" class="mc_ti_1_xia">
-                    <div v-for="(item2, index2) in item1.array" :key="`${index1}-${index2}`" class="mc_ti_2"
-                        :draggable="isdrag == `${index1}-${index2}`" :class="{ active: checkC === `x${index1}-${index2}` }">
-                        <div class="title" @click.stop="checkTitle(`${index1}-${index2}`)">
-                            <div class="drag" @mousedown="setDrag(`${index1}-${index2}`)" @mouseup="isdrag = ''"></div>
-                            <span>{{ selectType(item2, index2) }}</span>
-                            <div class="btnBox">
-                                <div class="delete" @click.stop="deleteCheck(`${index1}-${index2}`)"></div>
-                                <div class="open" v-if="item2.array && item2.array.length" :class="{ isopen: item2.isopen }"
-                                    @click.stop="openPan(index1, index2)"></div>
-                            </div>
-                        </div>
-                        <div v-if="item2.array && item2.array.length && item2.isopen" class="mc_ti_2_xia">
-                            <div v-for="(item3, index3) in item2.array" :key="`${index1}-${index2}-${index3}`"
-                                class="mc_ti_3" :draggable="isdrag == `${index1}-${index2}-${index3}`"
-                                :class="{ active: checkC === `x${index1}-${index2}-${index3}` }">
-                                <div class="title" @click.stop="checkTitle(`${index1}-${index2}-${index3}`)">
-                                    <div class="drag" @mousedown="setDrag(`${index1}-${index2}-${index3}`)"
-                                        @mouseup="isdrag = ''"></div>
-                                    <span>{{ selectType(item3, index3) }}</span>
-                                    <div class="btnBox">
-                                        <div class="delete" @click.stop="deleteCheck(`${index1}-${index2}-${index3}`)"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <checkOrder :checkC.sync="checkC" :checkJson="checkJson" @changeJson="changeJson"></checkOrder>
             <div class="e_btn">
                 <el-button type="primary" size="mini" @click="nextSteps()">下一步</el-button>
             </div>
@@ -70,7 +31,14 @@
 </template>
 
 <script>
+import checkOrder from '../components/checkOrder.vue';
+import minxinVue from '../minxins/minxin';
+
 export default {
+    mixins:[minxinVue],
+    components: {
+        checkOrder,
+    },
     props: {
         manualJson: {
             type: Array
@@ -80,34 +48,6 @@ export default {
         return {
             topicType: "",
             number: "",
-            options: [
-                {
-                    value: 1,
-                    label: "选择题"
-                },
-                {
-                    value: 2,
-                    label: "问答题"
-                },
-                {
-                    value: 3,
-                    label: "填空题"
-                },
-                {
-                    value: 4,
-                    label: "添加文档"
-                }
-            ],
-            options2: {
-                1: "选择题",
-                2: "问答题",
-                3: "填空题",
-                4: "添加文档"
-            },
-            buttonOptions: [
-                { name: "分组", type: 1 },
-                { name: "分页", type: 2 }
-            ],
             checkJson: [
                 // {
                 //     ttype: 1, //题目分类 1普通题目 2分组 3分页
@@ -116,21 +56,15 @@ export default {
                 // }
             ],
             checkC: "",
-            isdrag: ""
         };
     },
-    computed: {
-        selectType() {
-            return function (item, index) {
-                if (item.ttype == 1) {
-                    return index + 1 + "、" + this.options2[item.type];
-                } else if (item.ttype == 2) {
-                    return `第${index + 1}组 （共${item.array.length}题）`;
-                } else if (item.ttype == 3) {
-                    return `分页${index + 1}`;
-                }
-            };
-        }
+    watch: {
+        // checkJson :{
+        //     handler: function (newVal, oldVal) { 
+        //         this.$emit("update:manualJson", newVal)
+        //     },
+        //     deep: true,
+        // }
     },
     methods: {
         numberPan() {
@@ -139,6 +73,10 @@ export default {
                 this.number = "";
             }
         },
+        changeJson(json) {
+            this.checkJson = json;
+            this.$emit("update:cJson", json);
+        },
         addCheck() {
             if (!this.topicType) {
                 this.$message.error("请选择题目类型");
@@ -185,10 +123,20 @@ export default {
                         for (var i = 0; i < this.number; i++) {
                             this.checkJson[_check[0]].array.splice((_check[1]) + 1, 0, json)
                         }
-                    } else if ((type == 2 || type == 3) && _check.length == 1) {
+                    } else if (type == 2 && _check.length == 1) {
                         for (var i = 0; i < this.number; i++) {
                             this.checkJson[_check[0]].array.push(json)
                         }
+                    } else if (type == 3 && _check.length == 1) {
+                        if(this.checkJson[_check[0]].array[0] && this.checkJson[_check[0]].array[0].array){
+                            for (var i = 0; i < this.number; i++) {
+                                this.checkJson[_check[0]].array[0].array.push(json)
+                            }
+                        }else{
+                            for (var i = 0; i < this.number; i++) {
+                                this.checkJson[_check[0]].array.push(json)
+                            }
+                        }
                     }
                 } else {
                     for (var i = 0; i < this.number; i++) {
@@ -249,9 +197,9 @@ export default {
                     if (this.checkC) {
                         let _check = this.checkC.replace('x', '').split("-")
 
-                        if (_check.length > 1 && this.checkJson[_check[0]].array) {
+                        if (_check.length > 1 && this.checkJson[_check[0]].array[0] && this.checkJson[_check[0]].array[0].array) {
                             this.checkJson[_check[0]].array.splice(parseInt(_check[1]) + 1, 0, json);
-                        } else if (!this.checkJson[_check[0]].array[0].array) {
+                        } else if (this.checkJson[_check[0]].array[0] && !this.checkJson[_check[0]].array[0].array) {
                             this.checkJson[_check[0]].array = [
                                 {
                                     ttype: 2,
@@ -307,65 +255,7 @@ export default {
         depthCopy(s) {
             return JSON.parse(JSON.stringify(s));
         },
-        setDrag(index) {
-            console.log(index);
-            this.isdrag = index
-        },
-        openPan(index1, index2) {
-            if (index2 === 0 || index2) {
-                this.checkJson[index1].array[index2].isopen = !this.checkJson[index1].array[index2].isopen
-            } else {
-                this.checkJson[index1].isopen = !this.checkJson[index1].isopen
-            }
-            this.$forceUpdate();
-            this.$emit("update:manualJson", this.checkJson);
-        },
-        checkTitle(index) {
-            if (this.checkC === "x" + index) {
-                this.checkC = ""
-            } else {
-                this.checkC = 'x' + index
-            }
-        },
-        deleteCheck(index) {
-            let _check = index.split("-")
-            let string = ""
-            if (_check.length == 1) {
-                if (this.checkJson[_check[0]].ttype == 1) {
-                    string = "确定删除该题目吗?"
-                } else if (this.checkJson[_check[0]].ttype == 2) {
-                    string = "删除该分组将会同步删除该分组下所有内容，是否继续操作?"
-                } else if (this.checkJson[_check[0]].ttype == 3) {
-                    string = "删除该分页将会同步删除该分页下所有内容，是否继续操作?"
-                }
-            } else if (_check.length == 2) {
-                if (this.checkJson[_check[0]].array[_check[1]].ttype == 1) {
-                    string = "确定删除该题目吗?"
-                } else if (this.checkJson[_check[0]].array[_check[1]].ttype == 2) {
-                    string = "删除该分组将会同步删除该分组下所有内容，是否继续操作?"
-                }
-            } else if (_check.length == 3) {
-                string = "确定删除该题目吗?"
-            }
-            this.$confirm(string, "提示", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    if (_check.length == 1) {
-                        this.checkJson.splice(_check[0], 1)
-                    } else if (_check.length == 2) {
-                        this.checkJson[_check[0]].array.splice(_check[1], 1)
-                    } else if (_check.length == 3) {
-                        this.checkJson[_check[0]].array[_check[1]].array.splice(_check[2], 1)
-                    }
-                    this.checkC = ""
-                    this.$forceUpdate()
-                    this.$emit("update:manualJson", this.checkJson);
-                })
-                .catch(() => { });
-        },
+        
         nextSteps(){
             this.$emit("nextSteps")
         }
@@ -434,123 +324,6 @@ export default {
     flex-direction: column;
 }
 
-.mc_ti_1 {
-    width: 100%;
-    min-height: 40px;
-    border: 1px solid #bcbcbc;
-    padding: 10px;
-    box-sizing: border-box;
-    margin-bottom: 10px;
-}
-
-
-
-.mc_ti_1+.mc_ti_1 {
-    margin-top: 10px;
-}
-
-.mc_ti_1>.title {
-    font-size: 20px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-}
-
-.mc_ti_1_xia,
-.mc_ti_2_xia {
-    padding: 10px;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.mc_ti_2 {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10px;
-    border: 1px solid #bcbcbc;
-}
-
-.mc_ti_2+.mc_ti_2 {
-    margin-top: 10px;
-}
-
-.mc_ti_2>.title {
-    cursor: pointer;
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-}
-
-
-.mc_ti_3 {
-    padding: 10px;
-    width: 100%;
-    box-sizing: border-box;
-    border: 1px solid #bcbcbc;
-}
-
-.mc_ti_3+.mc_ti_3 {
-    margin-top: 10px;
-}
-
-.mc_ti_3>.title {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-}
-
-.mc_ti_1>.title>.drag,
-.mc_ti_2>.title>.drag,
-.mc_ti_3>.title>.drag {
-    display: block;
-    background-image: url('../../../../../assets/icon/new/icon_course_drag.png');
-    background-size: 100% 100%;
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-}
-
-.mc_ti_1>.title>.btnBox,
-.mc_ti_2>.title>.btnBox,
-.mc_ti_3>.title>.btnBox {
-    margin-left: auto;
-    display: flex;
-}
-
-.mc_ti_1>.title>.btnBox .open,
-.mc_ti_2>.title>.btnBox .open {
-    display: block;
-    background-image: url('../../../../../assets/icon/new/u_arrow.png');
-    background-size: 100% 100%;
-    width: 15px;
-    height: 15px;
-    cursor: pointer;
-    transition: all .5s;
-    transform: rotate(-90deg);
-}
-
-.mc_ti_1>.title>.btnBox .delete,
-.mc_ti_2>.title>.btnBox .delete,
-.mc_ti_3>.title>.btnBox .delete {
-    display: block;
-    background-image: url('../../../../../assets/icon/new/delete_u.png');
-    background-size: 100% 100%;
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
-    margin-right: 10px;
-}
-
-.mc_ti_1>.title>.btnBox .isopen,
-.mc_ti_2>.title>.btnBox .isopen {
-    transform: rotate(0deg);
-}
-
-.mc_ti_1.active,
-.mc_ti_2.active,
-.mc_ti_3.active {
-    border: 1px solid #0062ff;
-}
 
 .e_btn{
     width: 100%;

src/components/pages/testStudent/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>学生评测</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>