feat：新增关卡路径下 考试和作业的 删除、修改、添加， 增加loading效果

src/components/drawers/AddHomework.vue

@@ -3,7 +3,7 @@
     @after-visible-change="afterVisibleChange">
     <div class="drawerMain">
       <div class="header">
-        <div class="headerTitle">{{ EditWorkId ? '编辑' : '添加' }}作业</div>
+        <div class="headerTitle">{{ edit ? '编辑' : '添加' }}作业</div>
         <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
           @click="closeDrawer" />
       </div>
@@ -62,16 +62,20 @@
           <a-button class="btn2" html-type="submit">确定</a-button>
         </div>
       </a-form>
+      
 
     </div>
+    <!--  加载动画 -->
+    <div class="aeLoading" :style="{display:addLoading?'flex':'none'}">
+        <a-spin :spinning="addLoading" tip="添加中..." />
+      </div>
   </a-drawer>
 </template>
 <script>
-import { reactive, ref } from "vue";
+import { reactive, ref, toRefs } from "vue";
 import { message } from "ant-design-vue";
 import { createWorkTask, queryWorkDetailById, updateWorkTaskUsing } from "@/api/indexWork";
 import { ProjectEditTask, RouterEditTask } from "@/api/indexTask";
-import { storage } from "../../api/storage";
 import dayjs from 'dayjs';
 
 const rowSelection = ref({
@@ -127,6 +131,14 @@ export default {
       type: Number,
       default: null,
     },
+    routerId: {
+      type: Number,
+      default: null,
+    },
+    isactive: {
+      type: Number,
+      default: null,
+    }
   },
   setup(props, ctx) {
     const formState = reactive({
@@ -134,10 +146,10 @@ export default {
       workRequirement: '',
       choosedTime: '',
     });
-    const formRef = ref();
     const state = reactive({
-      routerId: storage.get("routerId") ? JSON.parse(storage.get("routerId")) : null,
+      addLoading: false,
     })
+    const formRef = ref();
 
     let checkWorkName = async (_rule, value) => {
       if (!value) {
@@ -227,18 +239,14 @@ export default {
     };
 
     const updateWork = () => {
-
+      state.addLoading = true;
-      // 如果是关卡页面进入 ---------------------------------
-      if (props.isLevel) {
-        myRouterEditTask()
-      } else { // 任务页面进入------------------------------
         if (props.edit) { // 编辑任务
           myUpdateWorkTaskUsing()
         } else {  // 创建任务
           console.log('创建任务***************');
           myCreateWorkTask()
         }
-      }
+      
     };
 
         // 新增任务
@@ -258,7 +266,13 @@ export default {
             "workTag": ""
           }
           createWorkTask(obj).then((res) => {
-            myProjectEditTask(res.data.data.workId);
+            if(props.isLevel) {
+            // 如果是关卡页面进入 ---------------------------------
+              myRouterEditTask(res.data.data.workId);
+            }else {
+              myProjectEditTask(res.data.data.workId);
+            }
+            
           }).catch((err) => {
             message.error(`添加失败${err}`)
           })
@@ -281,19 +295,26 @@ export default {
           }
           updateWorkTaskUsing(editObj).then((res) => {
           console.log(res);
-          myProjectEditTask(res.data.data.workId)
+          if(props.isLevel) {
+            // 如果是关卡页面进入 ---------------------------------
+              myRouterEditTask(res.data.data.workId);
+            }else {
+              myProjectEditTask(res.data.data.workId);
+            }
         }).catch((err) => {
           message.error(`编辑失败${err}`)
         })
         }
         // 查询任务
         const queryWork = () => {
+          state.addLoading = true;
           queryWorkDetailById({workId:props.EditWorkId}).then((res) => {
             console.log(dayjs(res.data.data.submitStartTime).format("YYYY-MM-DD"));
             formState.workName = res.data.data.workName;
             formState.workRequirement = res.data.data.workRequirement;
             formState.choosedTime = [dayjs(res.data.data.submitStartTime, "YYYY-MM-DD"), dayjs(res.data.data.submitEndTime, "YYYY-MM-DD")]
             console.log(res);
+            state.addLoading = false;
           }).catch(() => {
             message.error(`查询失败`)
           })
@@ -306,7 +327,7 @@ export default {
           "flag": true,
           "name": formState.workName,
           "projectId": props.projectId,
-          "projectTaskId":  props.projectTaskId || null,
+          "projectTaskId":  props.projectTaskId || 0,
           "stageId": props.chooseStageId,
           "type": 4
         }
@@ -314,6 +335,7 @@ export default {
           console.log(` 编辑项目成功的打印 ${res}`);
           message.success(`${props.edit ? '编辑' : '新增'}阶段任务成功`)
           ctx.emit("changeData", false);
+          state.addLoading = false;
           closeDrawer();
         }).catch(err => {
           message.error(`${props.edit ? '编辑' : '新增'}阶段任务失败`)
@@ -322,24 +344,26 @@ export default {
 
         }
         // 新增编辑或新增关卡任务
-        const myRouterEditTask = () => {
+        const myRouterEditTask = (testId) => {
           let editObj1 = {
-            "chapterId": 70,
+            "chapterId": props.isactive,
-            "courseId": 0,
+            "courseId": testId,
-            "duration": 0,
+            "duration": 30,
             "flag": true,
             "name": formState.workName,
-            "routerId": Number(storage.get('routerId')),
+            "routerId": props.routerId,
-            "routerTaskId": 0,
+            "routerTaskId":  props.routerTaskId || 0,
             "type": 4
           }
 
           RouterEditTask(editObj1).then(res => {
             console.log(` 编辑关卡成功的打印 ${res}`);
-            message.success(`${props.workId ? '编辑' : '新增'}关卡任务成功`)
+            message.success(`${props.edit ? '编辑' : '新增'}关卡任务成功`)
+            ctx.emit("changeData", false);
+            state.addLoading = false;
             closeDrawer();
           }).catch(err => {
-            message.error(`${props.workId ? '编辑' : '新增'}关卡任务失败`)
+            message.error(`${props.edit ? '编辑' : '新增'}关卡任务失败`)
             console.log(` 编辑关卡失败的打印 ${err}`);
           })
         }
@@ -359,7 +383,7 @@ export default {
       // layout,
       rules,
       updateWork,
-      state,
+      ...toRefs(state)
     };
   },
 };

src/components/drawers/AddTest.vue

@@ -8,7 +8,7 @@
   >
     <div class="drawerMain">
       <div class="header">
-        <div class="headerTitle">{{EditTestId ? "编辑" : "添加" }}考试</div>
+        <div class="headerTitle">{{edit ? "编辑" : "添加" }}考试</div>
         <img
           style="width: 29px; height: 29px; cursor: pointer"
           src="../../assets/images/basicinfo/close.png"
@@ -194,13 +194,17 @@
       </div>
     </a-form>
     </div>
+    <!--  加载动画 -->
+    <div class="aeLoading" :style="{display:addLoading?'flex':'none'}">
+        <a-spin :spinning="addLoading" tip="添加中..." />
+      </div>
   </a-drawer>
 </template>
   <script>
-import { reactive, ref } from "vue";
+import { reactive, ref, toRefs } from "vue";
 import {message} from"ant-design-vue";
 import {createExamination,queryExaminationDetailById,updateExamination} from "@/api/indexExam"
-import { ProjectEditTask } from "@/api/indexTask"
+import { ProjectEditTask, RouterEditTask } from "@/api/indexTask"
 
 import  dayjs from 'dayjs';
 const rowSelection = ref({
@@ -232,18 +236,26 @@ export default {
       type: Number,
       default: -1,
     },
+    isactive: {
+      type: Number,
+      default: null,
+    },
+    routerId: {
+      type: Number,
+      default: null,
+    },
     projectId: {
       type: Number,
       default: null,
     },
+    routerTaskId: {
+      type: Number,
+      default: null,
+    },
     chooseStageId: {
       type: Number,
       default: null,
     },
-    routerTaskId: {
-      type: Number,
-      default: 0,
-    },
     isLevel: { // 是否是关卡页面触发
       type: Boolean,
       default: null,
@@ -271,6 +283,9 @@ export default {
       showAnswers:2,
       choosedTime:'',
     });
+    const state = reactive({
+      addLoading: false,
+    })
     const formRef = ref();
     let checkExaminationName = async (_rule, value) => {
       if (!value) {
@@ -421,20 +436,22 @@ export default {
       console.log("formState", bool);
     };
     const queryTest = () => {
+      state.addLoading = true;
       console.log(props.EditTestId);
       queryExaminationDetailById({examinationId:props.EditTestId}).then((res) => {
         formState.examinationName = res.data.data.examinationName;
         formState.workRequirement = res.data.data.workRequirement;
         formState.examinationDuration = res.data.data.examinationDuration;
-        formState.examinationLimit = res.data.data.examinationLimit || -1;
+        formState.examinationLimit = Number(res.data.data.examinationLimit) || -1;
         formState.passLine = res.data.data.passLine;
         formState.examinationExplain = res.data.data.examinationExplain;
-        formState.questionArrangement = res.data.data.questionArrangement || 1;
+        formState.questionArrangement = Number(res.data.data.questionArrangement) || 1;
-        formState.scoringModel = res.data.data.scoringModel || 1;
+        formState.scoringModel = Number(res.data.data.scoringModel) || 1;
-        formState.showAnalysis = res.data.data.showAnalysis || 1;
+        formState.showAnalysis = Number(res.data.data.showAnalysis) || 1;
-        formState.showAnswers = res.data.data.showAnswers || 1;
+        formState.showAnswers = Number(res.data.data.showAnswers )|| 1;
         if(res.data.data.examinationEndTime && res.data.data.examinationStartTime){
           formState.choosedTime= [dayjs(res.data.data.examinationStartTime,"YYYY-MM-DD"),dayjs(res.data.data.examinationEndTime,"YYYY-MM-DD")]
+          state.addLoading = false;
         } else { formState.choosedTime=[] }
         console.log(res);
       }).catch(() => {
@@ -442,19 +459,12 @@ export default {
       })
     }
     const updateTest = () => {
-
+      state.addLoading = true;
-      // 如果是关卡页面进入 ---------------------------------
-      if (props.isLevel) {
-        //. 
-      } else {  // 从任务界面进入
         if(props.edit) { // 编辑任务
           myUpdateExamination()
         }else { // 创建任务
           myCreateExamination()
         }
-      }
-
-
     }
     
     const myUpdateExamination = () => {
@@ -482,7 +492,12 @@ export default {
       }
       updateExamination(obj).then((res)=>{
         console.log(res);
-        myProjectEditTask(res.data.data.examinationId)
+        // 如果是关卡页面进入 ---------------------------------
+        if(props.isLevel) {
+          myRouterEditTask(res.data.data.examinationId)
+        }else { 
+          myProjectEditTask(res.data.data.examinationId)
+        }
       }).catch(()=>{
         message.error(`编辑失败`)
       })
@@ -512,7 +527,11 @@ export default {
             "updateUser": 0
       }
       createExamination(obj).then((res)=>{
-        myProjectEditTask(res.data.data.examinationId)
+        if(props.isLevel) {
+          myRouterEditTask(res.data.data.examinationId)
+        }else { 
+          myProjectEditTask(res.data.data.examinationId)
+        }
       }).catch((err)=>{
         message.error(`添加失败${err}`)
       })
@@ -533,6 +552,7 @@ export default {
         console.log(` 编辑项目成功的打印 ${res}`);
         message.success(`${props.EditTestId? '编辑' : '新增'}阶段任务成功`)
         ctx.emit("changeData", false);
+        state.addLoading = false;
         closeDrawer();
       }).catch(err => {
         message.error(`${props.EditTestId? '编辑' : '新增'}阶段任务失败`)
@@ -540,6 +560,30 @@ export default {
       })
     }
 
+    const myRouterEditTask = (testId) => {
+      let editObj1 = {
+            "chapterId": props.isactive,
+            "courseId": testId,
+            "duration": 30,
+            "flag": true,
+            "name": formState.examinationName,
+            "routerId": props.routerId,
+            "routerTaskId":  props.routerTaskId || 0,
+            "type": 5
+          }
+
+          RouterEditTask(editObj1).then(res => {
+            console.log(` 编辑关卡成功的打印 ${res}`);
+            message.success(`${props.edit ? '编辑' : '新增'}关卡任务成功`)
+            ctx.emit("changeData", false);
+            state.addLoading = false;
+            closeDrawer();
+          }).catch(err => {
+            message.error(`${props.edit ? '编辑' : '新增'}关卡任务失败`)
+            console.log(` 编辑关卡失败的打印 ${err}`);
+          })
+    }
+
     const cloradio1 = (value) => {
       if (value != "") {
         formState.showAnswers = "";
@@ -579,6 +623,7 @@ export default {
       rules,
       updateTest,
       queryTest,
+      ...toRefs(state)
     };
   },
 };

src/views/learningpath/LevelAddDetail.vue

@@ -208,9 +208,15 @@
           <!-- 添加作业侧弹窗 -->
           <div>
             <add-homework
-              flag="0"
+            v-model:addhomeworkVisible="addhomeworkvisible"
-              :workId="editID"
+            :isLevel=true
-              v-model:addhomeworkVisible="addhomeworkvisible"
+            @changeData="updateTableData"
+            v-model:isactive="isactive"
+            v-model:edit="edit"
+            v-model:routerId="routerId"
+            v-model:chooseStageId="chooseStageId"
+            v-model:EditWorkId="EditWorkId"
+            v-model:routerTaskId="routerTaskId"
             />
           </div>
           <div class="lin"></div>
@@ -225,10 +231,15 @@
           <!-- 添加考试侧弹窗 -->
           <div>
             <add-test
-              :workId="editID"
-              @clearEditData="clearEditData"
               v-model:addtestVisible="addtestvisible"
-            />
+              :isLevel=true
+              @changeData="updateTableData"
+              v-model:isactive="isactive"
+              v-model:edit="edit"
+              v-model:routerId="routerId"
+              v-model:chooseStageId="chooseStageId"
+              v-model:EditTestId="EditTestId"
+              v-model:routerTaskId="routerTaskId"            />
           </div>
           <div class="lin"></div>
         </div>
@@ -501,7 +512,7 @@
                             margin-right: 25px;
                             cursor: pointer;
                           "
-                          @click="decideType(element.lei, element.courseId)"
+                          @click="decideType(element.lei, element.courseId,element.id)"
                         >
                           编辑
                         </span>
@@ -1058,6 +1069,10 @@ export default {
       deleteModal: false, // 删除弹窗
       deleteID: "", // 要删除的任务的id
       editID: "", // 要编辑的任务id
+      EditWorkId:"", // 要编辑的 workid 
+      EditTestId: "",
+      routerTaskId:"",
+      stageId:"",
       isStudy: 1,
       cC: false,
       value1: "",
@@ -1138,13 +1153,15 @@ export default {
       state.visible = true;
     };
     // 作业和考试的抽屉
-    const showDrawerAddHomework = () => {
+    const showDrawerAddHomework = (id, eleId) => {
       state.addhomeworkvisible = true;
-      state.ListChoosedId = 0;
+      state.EditWorkId = id;
+      state.routerTaskId = eleId;
     };
-    const showDrawerAddTest = () => {
+    const showDrawerAddTest = (id,eleId) => {
       state.addtestvisible = true;
-      state.ListChoosedId = 0;
+      state.EditTestId = id;
+      state.routerTaskId = eleId;
     };
     //测试评估投票抽屉
     const showDrawerAddEval = () => {
@@ -1183,12 +1200,16 @@ export default {
         }
       }
     };
-    const getDetail = (index) => {
+    //数据变化
+    const updateTableData = (data) => {
+      console.log("添加数据", data);
+      getDetail();
+    };
+    const getDetail = () => {
       GetRouterDetail(state.routerId)
         .then((res) => {
           state.level = res.data.data.chapterList;
-          console.log(state.level);
+         if (state.level.length > 0) {
-          if (index == 0 && state.level.length > 0) {
             dataAssignment(state.level[0].chapterId);
             state.isactive = state.level[0].chapterId;
           }
@@ -1535,7 +1556,7 @@ export default {
       document.getElementsByTagName("main")[0].style.background =
         "rgb(245, 247, 250,1)";
       document.getElementsByTagName("main")[0].style.boxShadow = "none";
-      getDetail(0);
+      getDetail();
     });
     onUnmounted(() => {
       document.getElementsByTagName("main")[0].style.background = "#ffffff";
@@ -1569,17 +1590,15 @@ export default {
       state.editID = "";
     };
     const deleteLevelTask = () => {
-      deleteStudyTask({ routerTaskIds: state.deleteID }).then((res) =>
+      deleteStudyTask({ routerTaskIds: state.deleteID }).then((res) =>{
-        console.log("删除成功", res)
+      state.deleteModal = false
-      );
+      message.success('删除成功')
-      // RouterDeleteTask(state.listChoosedId)
+      getDetail();
-      //   .then((res) => {
+      console.log("删除成功", res)
-      //     console.log(`删除成功${res}`);
+      }).catch((err) =>{
-      //     message.success("删除成功");
+        message.error('删除失败');
-      //   })
+        console.log(err);
-      //   .catch((err) => {
+      })
-      //     console.log(`删除失败${err}`);
-      //   });
     };
 
     const showDrawerAddLive = () => {
@@ -1596,7 +1615,7 @@ export default {
     // 子组件触发的清空 editid 事件
     const clearEditData = () => {
       state.editID = "";
-      getDetail(0);
+      getDetail();
     };
 
     //选择单个任务
@@ -1665,6 +1684,7 @@ export default {
             console.log(res);
             message.destroy();
             message.success("批量删除成功");
+            getDetail();
           })
           .catch((err) => {
             console.log(err);
@@ -1701,12 +1721,17 @@ export default {
       state.EditLiveId = id;
     };
     //编辑的按钮
-    const decideType = (type, id) => {
+    const decideType = (type, id, eleId) => {
+      state.edit = true;
       console.log(type, id);
       if (type == "外链") {
         showEditRefDrawer(id);
       } else if (type == "直播") {
         showEditLiveDrawer(id);
+      }else if (type == "作业") {
+        showDrawerAddHomework(id,eleId);
+      }else if (type == "考试") {
+        showDrawerAddTest(id,eleId);
       }
     };
     return {
@@ -1750,6 +1775,7 @@ export default {
       showEditRefDrawer,
       showEditLiveDrawer,
       decideType,
+      updateTableData,
     };
   },
 };