|
@@ -2,9 +2,10 @@
|
|
<div class="co_box">
|
|
<div class="co_box">
|
|
<div v-for="(item1, index1) in this.checkJson" :key="index1" class="mc_ti_1" :draggable="isdrag == `${index1}`"
|
|
<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}` }" @click.stop="checkTitle(`${index1}`, 1, item1)">
|
|
- <div class="title" :style="{fontSize: etype == 'order' && '16px'}">
|
|
|
|
|
|
+ <div class="title" :style="{ fontSize: etype == 'order' && '16px' }">
|
|
<div class="drag" @mousedown="setDrag(`${index1}`)" @mouseup="isdrag = ''"></div>
|
|
<div class="drag" @mousedown="setDrag(`${index1}`)" @mouseup="isdrag = ''"></div>
|
|
- <span>{{ selectType(item1, index1) }}</span>
|
|
|
|
|
|
+ <span class="content" v-html="selectType(item1, index1)"></span>
|
|
|
|
+ <!-- {{ selectType(item1, index1) }} -->
|
|
<div class="btnBox">
|
|
<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="edit" @click.stop="editCheck(`${index1}`,item1)" v-if="item1.ttype == 1 && canEdit.indexOf(item1.type) !== -1 && etype == 'edit'"></div> -->
|
|
<div class="delete" @click.stop="deleteCheck(`${index1}`)"></div>
|
|
<div class="delete" @click.stop="deleteCheck(`${index1}`)"></div>
|
|
@@ -16,9 +17,9 @@
|
|
<div v-for="(item2, index2) in item1.array" :key="`${index1}-${index2}`" class="mc_ti_2"
|
|
<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}` }"
|
|
:draggable="isdrag == `${index1}-${index2}`" :class="{ active: checkC === `x${index1}-${index2}` }"
|
|
@click.stop="checkTitle(`${index1}-${index2}`, 2, item2)">
|
|
@click.stop="checkTitle(`${index1}-${index2}`, 2, item2)">
|
|
- <div class="title" :style="{fontSize: etype == 'order' && '16px'}">
|
|
|
|
|
|
+ <div class="title" :style="{ fontSize: etype == 'order' && '16px' }">
|
|
<div class="drag" @mousedown="setDrag(`${index1}-${index2}`)" @mouseup="isdrag = ''"></div>
|
|
<div class="drag" @mousedown="setDrag(`${index1}-${index2}`)" @mouseup="isdrag = ''"></div>
|
|
- <span>{{ selectType(item2, index2) }}</span>
|
|
|
|
|
|
+ <span class="content" v-html="selectType(item2, index2)"></span>
|
|
<div class="btnBox">
|
|
<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="edit" @click.stop="editCheck(`${index1}-${index2}`,item2)" v-if="item2.ttype == 1 && canEdit.indexOf(item2.type) !== -1 && etype == 'edit'"></div> -->
|
|
<div class="delete" @click.stop="deleteCheck(`${index1}-${index2}`)"></div>
|
|
<div class="delete" @click.stop="deleteCheck(`${index1}-${index2}`)"></div>
|
|
@@ -31,10 +32,10 @@
|
|
:draggable="isdrag == `${index1}-${index2}-${index3}`"
|
|
:draggable="isdrag == `${index1}-${index2}-${index3}`"
|
|
:class="{ active: checkC === `x${index1}-${index2}-${index3}` }"
|
|
:class="{ active: checkC === `x${index1}-${index2}-${index3}` }"
|
|
@click.stop="checkTitle(`${index1}-${index2}-${index3}`, 3, item3)">
|
|
@click.stop="checkTitle(`${index1}-${index2}-${index3}`, 3, item3)">
|
|
- <div class="title" :style="{fontSize: etype == 'order' && '16px'}">
|
|
|
|
|
|
+ <div class="title" :style="{ fontSize: etype == 'order' && '16px' }">
|
|
<div class="drag" @mousedown="setDrag(`${index1}-${index2}-${index3}`)"
|
|
<div class="drag" @mousedown="setDrag(`${index1}-${index2}-${index3}`)"
|
|
@mouseup="isdrag = ''"></div>
|
|
@mouseup="isdrag = ''"></div>
|
|
- <span>{{ selectType(item3, index3) }}</span>
|
|
|
|
|
|
+ <span class="content" v-html="selectType(item3, index3)"></span>
|
|
<div class="btnBox">
|
|
<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="edit" @click.stop="editCheck(`${index1}-${index2}-${index3}`,item3)" v-if="item3.ttype == 1 && canEdit.indexOf(item3.type) !== -1 && etype == 'edit'"></div> -->
|
|
<div class="delete" @click.stop="deleteCheck(`${index1}-${index2}-${index3}`)"></div>
|
|
<div class="delete" @click.stop="deleteCheck(`${index1}-${index2}-${index3}`)"></div>
|
|
@@ -133,6 +134,9 @@ export default {
|
|
etype: {
|
|
etype: {
|
|
type: String,
|
|
type: String,
|
|
default: ""
|
|
default: ""
|
|
|
|
+ },
|
|
|
|
+ cJson:{
|
|
|
|
+ type:Object,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
@@ -141,14 +145,22 @@ export default {
|
|
isdrag: "",
|
|
isdrag: "",
|
|
canEdit: [1, 3, 5],
|
|
canEdit: [1, 3, 5],
|
|
ctype: "",
|
|
ctype: "",
|
|
- cJson: {}
|
|
|
|
|
|
+ // cJson: {}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
selectType() {
|
|
selectType() {
|
|
return function (item, index) {
|
|
return function (item, index) {
|
|
if (item.ttype == 1) {
|
|
if (item.ttype == 1) {
|
|
- return index + 1 + "、" + this.options2[item.type] + (item.json && this.etype != 'edit' ? `:${item.json.title}` : "");
|
|
|
|
|
|
+ let className = "test_icon"
|
|
|
|
+ if(item.type == 1){
|
|
|
|
+ className += " test_icon_check"
|
|
|
|
+ }else if(item.type == 3){
|
|
|
|
+ className += " test_icon_gap"
|
|
|
|
+ }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}` : "");
|
|
} else if (item.ttype == 2) {
|
|
} else if (item.ttype == 2) {
|
|
return `第${index + 1}组 (共${item.array.length}题)`;
|
|
return `第${index + 1}组 (共${item.array.length}题)`;
|
|
} else if (item.ttype == 3) {
|
|
} else if (item.ttype == 3) {
|
|
@@ -181,25 +193,32 @@ export default {
|
|
this.$emit("changeJson", this.manualJson);
|
|
this.$emit("changeJson", this.manualJson);
|
|
},
|
|
},
|
|
checkTitle(index, type, item) {
|
|
checkTitle(index, type, item) {
|
|
|
|
+ let _index = index.split("-");
|
|
|
|
+ let cJson = {}
|
|
|
|
+ if (type == 1 && item.ttype == 1) {
|
|
|
|
+ cJson = this.manualJson[_index[0]].json ? JSON.parse(JSON.stringify(this.manualJson[_index[0]].json)) : '';
|
|
|
|
+ } else if (type == 2 && item.ttype == 1) {
|
|
|
|
+ cJson = this.manualJson[_index[0]].array[_index[1]].json ? JSON.parse(JSON.stringify(this.manualJson[_index[0]].array[_index[1]].json)) : '';
|
|
|
|
+ } else if (type == 3 && item.ttype == 1) {
|
|
|
|
+ cJson = this.manualJson[_index[0]].array[_index[1]].array[_index[2]].json ? JSON.parse(JSON.stringify(this.manualJson[_index[0]].array[_index[1]].array[_index[2]].json)) : '';
|
|
|
|
+ }
|
|
|
|
+ // this.cJson = {type: type, index: _index, item: item}
|
|
|
|
+ // this.cJson = item.json;
|
|
|
|
+ this.$forceUpdate();
|
|
|
|
+ this.ctype = type
|
|
if (this.checkC === "x" + index) {
|
|
if (this.checkC === "x" + index) {
|
|
this.$emit("update:checkC", "")
|
|
this.$emit("update:checkC", "")
|
|
} else {
|
|
} else {
|
|
this.$emit("update:checkC", 'x' + index)
|
|
this.$emit("update:checkC", 'x' + index)
|
|
}
|
|
}
|
|
- let _index = index.split("-");
|
|
|
|
-
|
|
|
|
- this.ctype = type
|
|
|
|
- if (this.ctype == 1 && item.ttype == 1) {
|
|
|
|
- this.cJson = this.manualJson[_index[0]].json
|
|
|
|
- } else if (this.ctype == 2 && item.ttype == 1) {
|
|
|
|
- this.cJson = this.manualJson[_index[0]].array[_index[1]].json
|
|
|
|
- } else if (this.ctype == 3 && item.ttype == 1) {
|
|
|
|
- this.cJson = this.manualJson[_index[0]].array[_index[1]].array[_index[2]].json
|
|
|
|
- }
|
|
|
|
|
|
+ this.$forceUpdate();
|
|
|
|
+ // console.log(this.cJson);
|
|
|
|
+ this.$emit("update:cJson", cJson)
|
|
},
|
|
},
|
|
setJson(json) {
|
|
setJson(json) {
|
|
let _index = this.checkC.replace("x", "").split("-");
|
|
let _index = this.checkC.replace("x", "").split("-");
|
|
- this.cJson = json
|
|
|
|
|
|
+ // this.cJson = json
|
|
|
|
+ this.$emit("update:cJson", json)
|
|
if (this.ctype == 1) {
|
|
if (this.ctype == 1) {
|
|
this.manualJson[_index[0]].json = json
|
|
this.manualJson[_index[0]].json = json
|
|
} else if (this.ctype == 2) {
|
|
} else if (this.ctype == 2) {
|
|
@@ -407,12 +426,21 @@ export default {
|
|
|
|
|
|
.mc_ti_1.active>.title>.drag,
|
|
.mc_ti_1.active>.title>.drag,
|
|
.mc_ti_2.active>.title>.drag,
|
|
.mc_ti_2.active>.title>.drag,
|
|
-.mc_ti_3.active>.title>.drag{
|
|
|
|
|
|
+.mc_ti_3.active>.title>.drag {
|
|
background-image: url('../../../../../assets/icon/test/drag_icon_active.png');
|
|
background-image: url('../../../../../assets/icon/test/drag_icon_active.png');
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.mc_ti_1>.title>.content,
|
|
|
|
+.mc_ti_2>.title>.content,
|
|
|
|
+.mc_ti_3>.title>.content {
|
|
|
|
+ word-break: break-all;
|
|
|
|
+}
|
|
|
|
+
|
|
.edit_box {
|
|
.edit_box {
|
|
width: 100%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
padding: 10px 0 0;
|
|
padding: 10px 0 0;
|
|
-}</style>
|
|
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+</style>
|