|
|
@@ -481,8 +481,8 @@
|
|
|
<div class="rb_c_box_left" v-if="steps == 3 && unitJson[unitIndex].easy != 1">
|
|
|
<div class="stepsBottom">
|
|
|
<!-- <div class="navTop">辅助导航</div> -->
|
|
|
- <div class="navBottom">
|
|
|
- <div class="navTask noImage" v-if="unitJson[unitIndex].dyName">
|
|
|
+ <div class="navBottom" v-if="courseState == 2">
|
|
|
+ <!-- <div class="navTask noImage" v-if="unitJson[unitIndex].dyName">
|
|
|
<div class="nt_taskBox" style="width: 100%;">
|
|
|
<div class="nt_taskTitle"
|
|
|
style="font-size: 16px;min-width: fit-content;margin-right: 10px;font-weight: 700;">阶段 {{
|
|
|
@@ -493,7 +493,7 @@
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div v-for="(t, tIndex) in unitJson[unitIndex].chapterInfo[0]
|
|
|
.taskJson" :key="tIndex" :class="{
|
|
|
dragOverTop: newIndex === tIndex && typeIndex == 'task-'+tIndex && oldIndex > tIndex,
|
|
|
@@ -537,6 +537,57 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="navBottom" v-if="courseState == 1">
|
|
|
+ <div v-for="(stage, stageIndex) in unitJson" :key="stageIndex" class="stageBox" >
|
|
|
+ <div @click="unitSet2(stageIndex)" class="navStage" :class="{
|
|
|
+ isNavStage: stageIndex == unitIndex,
|
|
|
+ isNavStageOpen: stage.toolOpen
|
|
|
+ }">
|
|
|
+ <div class="nt_taskBox">
|
|
|
+ <div class="nt_taskTitle">第{{ stageIndex + 1 }}阶段：</div>
|
|
|
+ <div class="nt_taskName">
|
|
|
+ <el-tooltip effect="light" :content="stage.dyName ? stage.dyName : '未命名阶段'" placement="top">
|
|
|
+ <span>{{ stage.dyName ? stage.dyName : '未命名阶段' }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-for="(t, tIndex) in unitJson[stageIndex].chapterInfo[0]
|
|
|
+ .taskJson" :key="`${stageIndex}-${tIndex}`" :class="{
|
|
|
+ dragOverTop: newIndex === tIndex && typeIndex == 'task-'+tIndex && oldIndex > tIndex && stageIndex == unitIndex,
|
|
|
+ dragOverBottom: newIndex === tIndex && typeIndex == 'task-'+tIndex && oldIndex < tIndex && stageIndex == unitIndex,
|
|
|
+ }" :style="{display:stage.toolOpen ? 'block' : 'none'}">
|
|
|
+ <div @dragstart="dragTaskStart(t, tIndex)" @dragover.prevent="dragTaskOver(tIndex)"
|
|
|
+ @dragend="dragTaskEnd()" draggable @click="goToTask2(tIndex, stageIndex)" class="navTask" :class="{
|
|
|
+ isNavTask:
|
|
|
+ isClickColor > 0 && isClickColor == tIndex + 1 && stageIndex == unitIndex,
|
|
|
+ isNavOpen: t.toolOpen
|
|
|
+ }">
|
|
|
+ <div
|
|
|
+ style="left: 8px;"
|
|
|
+ class="chapter_upload_drag"
|
|
|
+ ></div>
|
|
|
+ <div class="nt_taskBox">
|
|
|
+ <div class="nt_taskTitle">任务{{ tIndex + 1 }}：</div>
|
|
|
+ <div class="nt_taskName">
|
|
|
+ <el-tooltip effect="light" :content="t.task ? t.task : '未命名任务'" placement="top">
|
|
|
+ <span>{{ t.task ? t.task : '未命名任务' }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="gjBox" v-if="t.toolChoose.length && t.toolOpen">
|
|
|
+ <div v-for="(tool, toolIndex2) in t.toolChoose" :key="toolIndex2"
|
|
|
+ @click="jumpGj2(tIndex, toolIndex2, stageIndex)">
|
|
|
+ <div class="gjCss" :class="{ isGjCss: toolIndexType == `gj${tIndex}${toolIndex2}${stageIndex}` }">
|
|
|
+ <div>工具{{ toolIndex2 + 1 }}：</div>
|
|
|
+ <div>{{ toolsData[tool.tool[0]] && toolsData[tool.tool[0]].name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="rb_c_box_right">
|
|
|
@@ -4823,9 +4874,81 @@ export default {
|
|
|
this.$refs.stepBox.scrollTop = 0;
|
|
|
},
|
|
|
unitSet(i) {
|
|
|
+ if(this.unitIndex == i){
|
|
|
+ return;
|
|
|
+ }
|
|
|
this.unitIndex = i;
|
|
|
this.isClickColor = 1
|
|
|
|
|
|
+ // this.$refs.rightboxR.scrollTop = 0;
|
|
|
+ this.$refs.unitBox.scrollTop = 0
|
|
|
+ },
|
|
|
+ panUnitJson(){
|
|
|
+ let _unitIndex = this.unitIndex;
|
|
|
+ let cPan = 1;
|
|
|
+ for (
|
|
|
+ var j = 0;
|
|
|
+ j < this.unitJson[_unitIndex].chapterInfo[0].taskJson.length;
|
|
|
+ j++
|
|
|
+ ) {
|
|
|
+ this.unitJson[_unitIndex].chapterInfo[0].taskJson[
|
|
|
+ j
|
|
|
+ ].proVisible = false;
|
|
|
+ this.unitJson[_unitIndex].chapterInfo[0].taskJson[
|
|
|
+ j
|
|
|
+ ].proVisible2 = false;
|
|
|
+ if (
|
|
|
+ this.unitJson[_unitIndex].chapterInfo[0].taskJson[j].toolChoose
|
|
|
+ .length > 1
|
|
|
+ ) {
|
|
|
+ for (
|
|
|
+ var z = 0;
|
|
|
+ z <
|
|
|
+ this.unitJson[_unitIndex].chapterInfo[0].taskJson[j].toolChoose
|
|
|
+ .length;
|
|
|
+ z++
|
|
|
+ ) {
|
|
|
+ if (
|
|
|
+ !this.unitJson[_unitIndex].chapterInfo[0].taskJson[j]
|
|
|
+ .toolChoose[z].tool.length
|
|
|
+ ) {
|
|
|
+ this.$message.error("请把工具添加完整");
|
|
|
+ cPan = 2;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.unitJson[_unitIndex].chapterInfo[0].taskJson[j].eList) {
|
|
|
+ this.unitJson[_unitIndex].chapterInfo[0].taskJson[j].eList =
|
|
|
+ this.unitJson[_unitIndex].chapterInfo[0].taskJson[j].eList.filter(
|
|
|
+ (ele) => {
|
|
|
+ return ele.value != "";
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return cPan;
|
|
|
+ },
|
|
|
+ unitSet2(i) {
|
|
|
+ if(this.panUnitJson() == 2){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.unitJson[i].toolOpen){
|
|
|
+ this.unitJson[i].toolOpen = false
|
|
|
+ this.updateWork()
|
|
|
+ this.$forceUpdate()
|
|
|
+ return
|
|
|
+ }else {
|
|
|
+ this.unitJson[i].toolOpen = true
|
|
|
+ }
|
|
|
+ this.$forceUpdate()
|
|
|
+ if(this.unitIndex == i){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.unitIndex = i;
|
|
|
+ this.isClickColor = 1
|
|
|
+
|
|
|
+
|
|
|
// this.$refs.rightboxR.scrollTop = 0;
|
|
|
this.$refs.unitBox.scrollTop = 0
|
|
|
},
|
|
|
@@ -9187,6 +9310,33 @@ export default {
|
|
|
}
|
|
|
this.$forceUpdate();
|
|
|
},
|
|
|
+ goToTask2(i, stage) {
|
|
|
+ this.toolIndexType = ''
|
|
|
+ if (this.isClickColor == (i + 1) && this.unitIndex == stage) {
|
|
|
+ if (this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].toolOpen) {
|
|
|
+ this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].toolOpen = false
|
|
|
+ } else {
|
|
|
+ this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].toolOpen = true
|
|
|
+ }
|
|
|
+ this.$forceUpdate();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.unitIndex != stage){
|
|
|
+ if(this.panUnitJson() == 2){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.unitSet(stage)
|
|
|
+ }
|
|
|
+ if (this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].toolOpen) {
|
|
|
+ this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].toolOpen = false
|
|
|
+ } else {
|
|
|
+ document.querySelectorAll(".basic_box")[0].scrollTop =
|
|
|
+ document.querySelectorAll(".taskBorder")[i].offsetTop - 100;
|
|
|
+ this.isClickColor = i + 1;
|
|
|
+ this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].toolOpen = true
|
|
|
+ }
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
taskMove(type, index) {
|
|
|
this.$confirm(
|
|
|
"切换任务顺序将删除所有工具的提交成果，是否继续此操作?",
|
|
|
@@ -9575,13 +9725,39 @@ export default {
|
|
|
this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].isFold = 0;
|
|
|
setTimeout(() => {
|
|
|
target.scrollIntoView(true);
|
|
|
- this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].toolChoose[j].isFold3 = true
|
|
|
+ this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].toolChoose[j].isFold3 = false
|
|
|
setTimeout(() => {
|
|
|
this.$refs.unitBox.scrollTop = this.$refs.unitBox.scrollTop - 100;
|
|
|
}, 0);
|
|
|
}, 0);
|
|
|
}
|
|
|
},
|
|
|
+ jumpGj2(i, j, k) {
|
|
|
+ if(this.unitIndex != k){
|
|
|
+ if(this.panUnitJson() == 2){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.unitSet(k)
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ if ((i + 1) != this.isClickColor) {
|
|
|
+ this.isClickColor = (i + 1)
|
|
|
+ }
|
|
|
+ var a = document.scrollingElement;
|
|
|
+ this.toolIndexType = `gj${i}${j}${k}`
|
|
|
+ let target = document.querySelector(`#gj${i}${j}`);
|
|
|
+ if (target) {
|
|
|
+ this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].isFold = 0;
|
|
|
+ setTimeout(() => {
|
|
|
+ target.scrollIntoView(true);
|
|
|
+ this.unitJson[this.unitIndex].chapterInfo[0].taskJson[i].toolChoose[j].isFold3 = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.unitBox.scrollTop = this.$refs.unitBox.scrollTop - 100;
|
|
|
+ }, 0);
|
|
|
+ }, 0);
|
|
|
+ }
|
|
|
+ }, 0);
|
|
|
+ },
|
|
|
dragStart(val, i, j) {
|
|
|
console.log(this.taskCount);
|
|
|
|
|
|
@@ -12956,6 +13132,98 @@ ol {
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
+.navStage {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 10px 10px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #ffffff;
|
|
|
+ width: 95%;
|
|
|
+ margin: 10px auto 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 5px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.navStage::before {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background-image: url(../../assets/icon/new/icon_stage.png);
|
|
|
+ background-size: 100%;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.navStage::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background-image: url(../../assets/icon/new/down.png);
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ background-size: 100%;
|
|
|
+ margin-left: 10px;
|
|
|
+ transition: all .5s;
|
|
|
+}
|
|
|
+
|
|
|
+.isNavStageOpen::after {
|
|
|
+ transform: rotate(0deg);
|
|
|
+}
|
|
|
+
|
|
|
+.isNavStage {
|
|
|
+ background: #0061FF;
|
|
|
+}
|
|
|
+
|
|
|
+.isNavStage::before{
|
|
|
+ background-image: url(../../assets/icon/new/icon_stage_a.png);
|
|
|
+}
|
|
|
+
|
|
|
+.isNavStage::after{
|
|
|
+ background-image: url(../../assets/icon/new/downC.png);
|
|
|
+}
|
|
|
+
|
|
|
+.isNavStage .nt_taskName {
|
|
|
+ font-weight: bold !important;
|
|
|
+ color: #FFFFFF !important;
|
|
|
+}
|
|
|
+
|
|
|
+.isNavStage .nt_taskTitle {
|
|
|
+ font-weight: bold !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.navStage .nt_taskBox {
|
|
|
+ width: calc(100% - 53px);
|
|
|
+ padding: 0 0 0 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: baseline;
|
|
|
+}
|
|
|
+
|
|
|
+.navStage .nt_taskTitle {
|
|
|
+ color: #060E17;
|
|
|
+ line-height: 25px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.navStage .nt_taskName {
|
|
|
+ max-width: calc(100% - 75px);
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #060E17;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
.navTask {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
