|
|
@@ -1,54 +1,74 @@
|
|
|
<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}` }" @click.stop="checkTitle(`${index1}`, 1, item1)">
|
|
|
+ :class="{
|
|
|
+ active: checkC === `x${index1}`,
|
|
|
+ dragOverTop: newIndex === index1 && typeIndex == 'drag-' + index1 && (oldIndex > index1 && (!(newIndex2 || newIndex2 === 0) || !(newIndex3 || newIndex3 === 0))),
|
|
|
+ dragOverBottom: newIndex === index1 && typeIndex == 'drag-' + index1 && (oldIndex < index1 || !(!(newIndex2 || newIndex2 === 0) || !(newIndex3 || newIndex3 === 0))),
|
|
|
+ }" @click.stop="checkTitle(`${index1}`, 1, item1)" @dragstart="dragStart(item1, index1, `${index1}`)"
|
|
|
+ @dragover.prevent="dragOver(index1)" @dragend="dragEnd()">
|
|
|
<div class="title" :style="{ fontSize: etype == 'order' && '16px' }">
|
|
|
<div class="drag" @mousedown="setDrag(`${index1}`)" @mouseup="isdrag = ''"></div>
|
|
|
<span class="content" v-html="selectType(item1, index1)" v-if="etype == 'edit' || item1.ttype != 1"></span>
|
|
|
<el-tooltip :content="selectType2(item1, index1)" placement="top" effect="dark" v-else>
|
|
|
- <span class="content" v-html="selectType(item1, index1)" ></span>
|
|
|
+ <span class="content" v-html="selectType(item1, index1)"></span>
|
|
|
</el-tooltip>
|
|
|
-
|
|
|
+
|
|
|
<!-- {{ selectType(item1, index1) }} -->
|
|
|
<div class="btnBox">
|
|
|
<!-- <div class="edit" @click.stop="editCheck(`${index1}`,item1)" v-if="item1.ttype == 1 && canEdit.indexOf(item1.type) !== -1 && etype == 'edit'"></div> -->
|
|
|
- <div :class="{deleteX:etype != 'edit',delete: etype == 'edit'}" @click.stop="deleteCheck(`${index1}`)"></div>
|
|
|
+ <div :class="{ deleteX: etype != 'edit', delete: etype == 'edit' }"
|
|
|
+ @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}` }"
|
|
|
- @click.stop="checkTitle(`${index1}-${index2}`, 2, item2)">
|
|
|
+ :draggable="isdrag == `${index1}-${index2}`" :class="{
|
|
|
+ active: checkC === `x${index1}-${index2}`,
|
|
|
+ dragOverTop: newIndex === index1 && newIndex2 === index2 && typeIndex == 'drag2-' + index1 + '-' + index2 && (oldIndex2 > index2 && ( !(newIndex3 || newIndex3 === 0))),
|
|
|
+ dragOverBottom: newIndex === index1 && newIndex2 === index2 && typeIndex == 'drag2-' + index1 + '-' + index2 && (oldIndex2 < index2 || !( !(newIndex3 || newIndex3 === 0))),
|
|
|
+ }" @click.stop="checkTitle(`${index1}-${index2}`, 2, item2)"
|
|
|
+ @dragstart="dragStart2(item2, index1, index2, `${index1}-${index2}`)"
|
|
|
+ @dragover.prevent="dragOver2(index1, index2)" @dragend="dragEnd2()">
|
|
|
<div class="title" :style="{ fontSize: etype == 'order' && '16px' }">
|
|
|
<div class="drag" @mousedown="setDrag(`${index1}-${index2}`)" @mouseup="isdrag = ''"></div>
|
|
|
- <span class="content" v-html="selectType(item2, index2)" v-if="etype == 'edit' || item2.ttype != 1"></span>
|
|
|
+ <span class="content" v-html="selectType(item2, index2)"
|
|
|
+ v-if="etype == 'edit' || item2.ttype != 1"></span>
|
|
|
<el-tooltip :content="selectType2(item2, index2)" placement="top" effect="dark" v-else>
|
|
|
- <span class="content" v-html="selectType(item2, index2)" ></span>
|
|
|
+ <span class="content" v-html="selectType(item2, index2)"></span>
|
|
|
</el-tooltip>
|
|
|
<div class="btnBox">
|
|
|
<!-- <div class="edit" @click.stop="editCheck(`${index1}-${index2}`,item2)" v-if="item2.ttype == 1 && canEdit.indexOf(item2.type) !== -1 && etype == 'edit'"></div> -->
|
|
|
- <div :class="{deleteX:etype != 'edit',delete: etype == 'edit'}" @click.stop="deleteCheck(`${index1}-${index2}`)"></div>
|
|
|
+ <div :class="{ deleteX: etype != 'edit', delete: etype == 'edit' }"
|
|
|
+ @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}` }"
|
|
|
- @click.stop="checkTitle(`${index1}-${index2}-${index3}`, 3, item3)">
|
|
|
+ :draggable="isdrag == `${index1}-${index2}-${index3}`" :class="{
|
|
|
+ active: checkC === `x${index1}-${index2}-${index3}`,
|
|
|
+ dragOverTop: newIndex === index1 && newIndex2 === index2 && newIndex3 === index3 && typeIndex == 'drag3-' + index1 + '-' + index2 + '-' + index3 && oldIndex3 > index3,
|
|
|
+ dragOverBottom: newIndex === index1 && newIndex2 === index2 && newIndex3 === index3 && typeIndex == 'drag3-' + index1 + '-' + index2 + '-' + index3 && oldIndex3 < index3,
|
|
|
+ }" @click.stop="checkTitle(`${index1}-${index2}-${index3}`, 3, item3)"
|
|
|
+ @dragstart="dragStart3(item3, index1, index2, index3, `${index1}-${index2}-${index3}`)"
|
|
|
+ @dragover.prevent="dragOver3(index1, index2, index3)" @dragend="dragEnd3()">
|
|
|
<div class="title" :style="{ fontSize: etype == 'order' && '16px' }">
|
|
|
<div class="drag" @mousedown="setDrag(`${index1}-${index2}-${index3}`)"
|
|
|
@mouseup="isdrag = ''"></div>
|
|
|
- <span class="content" v-html="selectType(item3, index3)" v-if="etype == 'edit' || item3.ttype != 1"></span>
|
|
|
- <el-tooltip :content="selectType2(item3, index3)" placement="top" effect="dark" v-else>
|
|
|
- <span class="content" v-html="selectType(item3, index3)" ></span>
|
|
|
- </el-tooltip>
|
|
|
+ <span class="content" v-html="selectType(item3, index3)"
|
|
|
+ v-if="etype == 'edit' || item3.ttype != 1"></span>
|
|
|
+ <el-tooltip :content="selectType2(item3, index3)" placement="top" effect="dark" v-else>
|
|
|
+ <span class="content" v-html="selectType(item3, index3)"></span>
|
|
|
+ </el-tooltip>
|
|
|
<div class="btnBox">
|
|
|
<!-- <div class="edit" @click.stop="editCheck(`${index1}-${index2}-${index3}`,item3)" v-if="item3.ttype == 1 && canEdit.indexOf(item3.type) !== -1 && etype == 'edit'"></div> -->
|
|
|
- <div :class="{deleteX:etype != 'edit',delete: etype == 'edit'}" @click.stop="deleteCheck(`${index1}-${index2}-${index3}`)"></div>
|
|
|
+ <div :class="{ deleteX: etype != 'edit', delete: etype == 'edit' }"
|
|
|
+ @click.stop="deleteCheck(`${index1}-${index2}-${index3}`)"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="item3.ttype == 1 && canEdit.indexOf(item3.type) !== -1 && etype == 'edit'"
|
|
|
@@ -145,8 +165,8 @@ export default {
|
|
|
type: String,
|
|
|
default: ""
|
|
|
},
|
|
|
- cJson:{
|
|
|
- type:Object,
|
|
|
+ cJson: {
|
|
|
+ type: Object,
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
@@ -155,6 +175,14 @@ export default {
|
|
|
isdrag: "",
|
|
|
canEdit: [1, 3, 5],
|
|
|
ctype: "",
|
|
|
+ dragType: "",
|
|
|
+ oldIndex: "",
|
|
|
+ newIndex: "",
|
|
|
+ oldIndex2: "",
|
|
|
+ newIndex2: "",
|
|
|
+ oldIndex3: "",
|
|
|
+ newIndex3: "",
|
|
|
+ oldData: "",
|
|
|
// cJson: {}
|
|
|
}
|
|
|
},
|
|
|
@@ -163,14 +191,14 @@ export default {
|
|
|
return function (item, index) {
|
|
|
if (item.ttype == 1) {
|
|
|
let className = "test_icon"
|
|
|
- if(item.type == 1){
|
|
|
+ if (item.type == 1) {
|
|
|
className += " test_icon_check"
|
|
|
- }else if(item.type == 3){
|
|
|
+ } else if (item.type == 3) {
|
|
|
className += " test_icon_gap"
|
|
|
- }else if(item.type == 5){
|
|
|
+ } else if (item.type == 5) {
|
|
|
className += " test_icon_file"
|
|
|
}
|
|
|
- return index + 1 + "、" + (item.json && this.etype != 'edit' ? `<span class='${className}'></span>` : `<span class='${className}'></span>`+this.options2[item.type]) + (item.json && this.etype != 'edit' ? `${item.json.title}` : "");
|
|
|
+ return index + 1 + "、" + (item.json && this.etype != 'edit' ? `<span class='${className}'></span>` : `<span class='${className}'></span>` + this.options2[item.type]) + (item.json && this.etype != 'edit' ? `${item.json.title}` : "");
|
|
|
} else if (item.ttype == 2) {
|
|
|
return `第${index + 1}组 （共${item.array.length}题）`;
|
|
|
} else if (item.ttype == 3) {
|
|
|
@@ -181,7 +209,7 @@ export default {
|
|
|
selectType2() {
|
|
|
return function (item, index) {
|
|
|
if (item.ttype == 1) {
|
|
|
- return (item.json && this.etype != 'edit' ? '' : this.options2[item.type]) + (item.json && this.etype != 'edit' ? `${item.json.title}` : "");
|
|
|
+ return (item.json && this.etype != 'edit' ? '' : this.options2[item.type]) + (item.json && this.etype != 'edit' ? `${item.json.title}` : "");
|
|
|
} else if (item.ttype == 2) {
|
|
|
return `第${index + 1}组 （共${item.array.length}题）`;
|
|
|
} else if (item.ttype == 3) {
|
|
|
@@ -291,7 +319,172 @@ export default {
|
|
|
},
|
|
|
editCheck(index, item) {
|
|
|
|
|
|
- }
|
|
|
+ },
|
|
|
+ dragStart(val, i, index) {
|
|
|
+ if (this.isdrag != index) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.dragType = 'drag'
|
|
|
+ this.oldIndex = i;
|
|
|
+ this.oldData = val;
|
|
|
+ },
|
|
|
+ dragOver(i) {
|
|
|
+ // if(this.dragType != 'drag'){
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ this.typeIndex = "drag-" + i
|
|
|
+ this.newIndex = i;
|
|
|
+ },
|
|
|
+ dragEnd() {
|
|
|
+ if (this.dragType != 'drag') {
|
|
|
+ this.typeIndex = "";
|
|
|
+ this.newIndex = "";
|
|
|
+ this.dragType = "";
|
|
|
+ this.isdrag = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.oldIndex == this.newIndex) {
|
|
|
+ this.typeIndex = "";
|
|
|
+ this.newIndex = "";
|
|
|
+ this.dragType = "";
|
|
|
+ this.isdrag = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let newItems = [...this.manualJson];
|
|
|
+ // 删除老的节点
|
|
|
+ newItems.splice(this.oldIndex, 1);
|
|
|
+ // 在列表中目标位置增加新的节点
|
|
|
+ newItems.splice(this.newIndex, 0, this.oldData);
|
|
|
+ this.$emit("changeJson", [...newItems]);
|
|
|
+ this.typeIndex = "";
|
|
|
+ this.newIndex = "";
|
|
|
+ this.dragType = "";
|
|
|
+ this.isdrag = "";
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ dragStart2(val, i, j, index) {
|
|
|
+ if (this.isdrag != index) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.dragType = 'drag2'
|
|
|
+ this.oldIndex = i;
|
|
|
+ this.oldIndex2 = j;
|
|
|
+ this.oldData = val;
|
|
|
+ },
|
|
|
+ dragOver2(i, j) {
|
|
|
+ // if(this.dragType != 'drag2'){
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ this.typeIndex = "drag2-" + i + '-' + j
|
|
|
+ this.newIndex = i;
|
|
|
+ this.newIndex2 = j;
|
|
|
+ // console.log(i, j);
|
|
|
+ },
|
|
|
+ dragEnd2() {
|
|
|
+ if (this.dragType != 'drag2') {
|
|
|
+ this.typeIndex = "";
|
|
|
+ this.newIndex = "";
|
|
|
+ this.newIndex2 = "";
|
|
|
+ this.dragType = "";
|
|
|
+ this.isdrag = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.oldIndex == this.newIndex && this.oldIndex2 == this.newIndex2) {
|
|
|
+ this.typeIndex = "";
|
|
|
+ this.newIndex = "";
|
|
|
+ this.newIndex2 = "";
|
|
|
+ this.dragType = "";
|
|
|
+ this.isdrag = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let newItems = [...this.manualJson];
|
|
|
+ // 删除老的节点
|
|
|
+ newItems[this.oldIndex].array.splice(this.oldIndex2, 1);
|
|
|
+ // 在列表中目标位置增加新的节点
|
|
|
+ if ((this.newIndex3 || this.newIndex3 === 0) && newItems[this.newIndex].array[this.newIndex2] && newItems[this.newIndex].array[this.newIndex2].array && this.oldData.ttype == 1) {
|
|
|
+ newItems[this.newIndex].array[this.newIndex2].array.splice(this.newIndex3, 0, this.oldData);
|
|
|
+ } else if (newItems[this.newIndex].array[this.newIndex2] && newItems[this.newIndex].array[this.newIndex2].array && this.oldData.ttype == 1) {
|
|
|
+ newItems[this.newIndex].array[this.newIndex2].array.push(this.oldData)
|
|
|
+ } else if (newItems[this.newIndex].array && newItems[this.newIndex].array.length && newItems[this.newIndex].array[0].ttype == 1 && this.oldData.ttype == 2) {
|
|
|
+ this.oldData.array = [...this.oldData.array, ...newItems[this.newIndex].array]
|
|
|
+ newItems[this.newIndex].array[0] = this.oldData
|
|
|
+ } else {
|
|
|
+ newItems[this.newIndex].array.splice(this.newIndex2, 0, this.oldData);
|
|
|
+ }
|
|
|
+ this.$emit("changeJson", [...newItems]);
|
|
|
+ this.typeIndex = "";
|
|
|
+ this.newIndex = "";
|
|
|
+ this.newIndex2 = "";
|
|
|
+ this.dragType = "";
|
|
|
+ this.isdrag = "";
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ dragStart3(val, i, j, k, index) {
|
|
|
+ if (this.isdrag != index) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.dragType = 'drag3'
|
|
|
+ this.oldIndex = i;
|
|
|
+ this.oldIndex2 = j;
|
|
|
+ this.oldIndex3 = k;
|
|
|
+ this.oldData = val;
|
|
|
+ },
|
|
|
+ dragOver3(i, j, k) {
|
|
|
+ // if(this.dragType != 'drag3'){
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ this.typeIndex = "drag3-" + i + '-' + j + '-' + k
|
|
|
+ this.newIndex = i;
|
|
|
+ this.newIndex2 = j;
|
|
|
+ this.newIndex3 = k;
|
|
|
+ console.log(i, j, k);
|
|
|
+ },
|
|
|
+ dragEnd3() {
|
|
|
+ if (this.dragType != 'drag3') {
|
|
|
+ this.typeIndex = "";
|
|
|
+ this.newIndex = "";
|
|
|
+ this.newIndex2 = "";
|
|
|
+ this.newIndex3 = "";
|
|
|
+ this.dragType = "";
|
|
|
+ this.isdrag = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.oldIndex == this.newIndex && this.oldIndex2 == this.newIndex2 && this.oldIndex3 == this.newIndex3) {
|
|
|
+ this.typeIndex = "";
|
|
|
+ this.newIndex = "";
|
|
|
+ this.newIndex2 = "";
|
|
|
+ this.newIndex3 = "";
|
|
|
+ this.dragType = "";
|
|
|
+ this.isdrag = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ let newItems = [...this.manualJson];
|
|
|
+ // 删除老的节点
|
|
|
+ newItems[this.oldIndex].array[this.oldIndex2].array.splice(this.oldIndex3, 1);
|
|
|
+ if (newItems[this.newIndex].array[this.newIndex2] && newItems[this.newIndex].array[this.newIndex2].array) {
|
|
|
+ // 在列表中目标位置增加新的节点
|
|
|
+ newItems[this.newIndex].array[this.newIndex2].array.splice(this.newIndex3, 0, this.oldData);
|
|
|
+ } else if (newItems[this.newIndex].array[0] && newItems[this.newIndex].array[0].ttype == 2 && this.oldData.ttype == 1) {
|
|
|
+ // 在列表中目标位置增加新的节点
|
|
|
+ newItems[this.newIndex].array[0].array.push(this.oldData)
|
|
|
+ } else {
|
|
|
+ newItems[this.newIndex].array.splice(this.newIndex2, 0, this.oldData);
|
|
|
+ }
|
|
|
+ this.$emit("changeJson", [...newItems]);
|
|
|
+ this.typeIndex = "";
|
|
|
+ this.newIndex = "";
|
|
|
+ this.newIndex2 = "";
|
|
|
+ this.newIndex3 = "";
|
|
|
+ this.dragType = "";
|
|
|
+ this.isdrag = "";
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
this.manualJson = this.depthCopy(this.checkJson);
|
|
|
@@ -482,5 +675,15 @@ export default {
|
|
|
padding: 10px 0 0;
|
|
|
}
|
|
|
|
|
|
+.dragOverTop {
|
|
|
+ border-top: 2px solid #0061FF !important;
|
|
|
+ border-radius: 0 !important;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
|
|
|
+.dragOverBottom {
|
|
|
+ border-bottom: 2px solid #0061FF !important;
|
|
|
+ border-radius: 0 !important;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
</style>
|
