feat: 新增关卡编辑和删除

src/views/learningpath/LevelAddDetail.vue

@@ -60,7 +60,7 @@
       <div class="main">
         <div class="inma">
           <div class="name">
-            <div class="d" style="margin-top: 2px; margin-right: 2px">
+            <div class="d" style="margin-top: 2px;margin-right:2px">
               <img
                 style="width: 10px; height: 10px"
                 src="../../assets/images/basicinfo/asterisk.png"
@@ -78,15 +78,8 @@
             <div class="co">{{ value1.length }}/20</div>
           </div>
           <div class="name">
-            <div
+          <div class="d" style="width: 10px;height: 10px;margin-top: 2px;margin-right:2px">
-              class="d"
+            </div>
-              style="
-                width: 10px;
-                height: 10px;
-                margin-top: 2px;
-                margin-right: 2px;
-              "
-            ></div>
             <div class="fir">关卡说明：</div>
             <div class="input">
               <a-textarea
@@ -174,10 +167,8 @@
           <!-- 添加作业侧弹窗 -->
           <div>
             <add-homework 
-              flag="0"
+            flag=0  :workId=editID
-              routerTaskId="ListChoosedId"
+            v-model:addhomeworkVisible="addhomeworkvisible" />
-              v-model:addhomeworkVisible="addhomeworkvisible"
-            />
           </div>
           <div class="lin"></div>
         </div>
@@ -190,7 +181,9 @@
           </div>
           <!-- 添加考试侧弹窗 -->
           <div>
-            <add-test v-model:addtestVisible="addtestvisible" />
+            <add-test :workId="editID"
+            @clearEditData="clearEditData"
+            v-model:addtestVisible="addtestvisible" />
           </div>
           <div class="lin"></div>
         </div>
@@ -230,48 +223,30 @@
           </div>
           <div class="lin"></div>
         </div>
-        <div class="item" @click="showDrawerAddEval">
+        <div class="item">
           <div class="itcon">
             <div class="img">
               <img src="../../assets/images/leveladd/ce.png" />
             </div>
             <div class="text">测评</div>
-            <!-- 添加测评侧弹窗 -->
-            <div>
-              <add-eval
-                v-model:addevalVisible="addevalvisible"
-                v-model:edit="edit"
-              />
-            </div>
-            <!-- 添加测评侧弹窗 -->
           </div>
           <div class="lin"></div>
         </div>
-        <div class="item" @click="showDrawerAddInvist">
+        <div class="item">
           <div class="itcon">
             <div class="img">
               <img src="../../assets/images/leveladd/diao.png" />
             </div>
             <div class="text">评估</div>
-            <!-- 添加评估侧弹窗 -->
-            <div>
-              <add-invist v-model:addinvistVisible="addinvistvisible" />
-            </div>
-            <!-- 添加评估侧弹窗 -->
           </div>
           <div class="lin"></div>
         </div>
-        <div class="item" @click="showDrawerAddVote">
+        <div class="item">
           <div class="itcon">
             <div class="img">
               <img src="../../assets/images/leveladd/tou.png" />
             </div>
             <div class="text">投票</div>
-            <!-- 添加投票侧弹窗 -->
-            <div>
-              <add-vote v-model:addvoteVisible="addvotevisible" />
-            </div>
-            <!-- 添加投票侧弹窗 -->
           </div>
           <div class="lin"></div>
         </div>
@@ -311,6 +286,7 @@
               :loading="tableDataTotal === -1 ? true : false"
               expandRowByClick="true"
               @expand="expandTable"
+              :customRow="handleClickRow"
               :pagination="false"
               :row-selection="{
                 columnWidth: 30,
@@ -542,6 +518,37 @@
         </div>
       </div>
     </a-modal>
+    <!-- 是否确认删除任务弹窗 -->
+    <!-- 确认删除阶段弹窗 -->
+    <a-modal
+      v-model:visible="deleteModal"
+      :footer="null"
+      :closable="cC"
+      wrapClassName="ConfirmModal"
+      centered="true"
+    >
+      <div class="delete">
+        <div class="del_header"></div>
+        <div class="del_main">
+          <div class="header">
+            <div class="icon"></div>
+            <span>提示</span>
+            <div class="close_exit" @click="closeConfirm"></div>
+          </div>
+          <div class="body">
+            <span>您确定要删除此任务吗</span>
+          </div>
+          <div class="del_btnbox">
+            <div class="del_btn btn1">
+              <div class="btnText" @click="closeConfirm">取消</div>
+            </div>
+            <div class="del_btn btn2">
+              <div class="btnText" @click="deleteLevelTask">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
   </div>
 </template>
 
@@ -551,9 +558,6 @@ import AddStu from "../../components/drawers/AddLevelAddStu";
 import ImpStu from "../../components/drawers/AddLevelImportStu";
 import AddHomework from "../../components/drawers/AddHomework.vue";
 import AddTest from "../../components/drawers/AddTest.vue";
-import AddEval from "../../components/drawers/AddEval.vue";
-import AddInvist from "../../components/drawers/AddInvist.vue";
-import AddVote from "../../components/drawers/AddVote.vue";
 import * as api from "../../api/indexLevel";
 import { GetRouterDetail, RouterDeleteTask } from "../../api/indexTask";
 import { message } from "ant-design-vue";
@@ -563,25 +567,22 @@ export default {
     AddStu,
     ImpStu,
     AddHomework,
-    AddTest,
+    AddTest
-    AddEval,
-    AddInvist,
-    AddVote,
   },
   setup() {
     const state = reactive({
-      routerId: localStorage.getItem("routerId"),
       level: [
         {
           chapterId: "1",
           remark: "关卡说明",
           name: "默认关卡",
-        },
+        }
       ],
       tableData: [
         {
           key: 1,
           lei: "在线",
+          routerTaskId:0,
           // state: "已发布",
           creater: "管理者课程",
           // pubtime: "2022-07-20 14:00:03",
@@ -770,26 +771,26 @@ export default {
       stm_hs: false,
       deleteAll: false,
       closeDeleteAll: false,
+      deleteModal:false, // 删除弹窗
+      deleteID:'', // 要删除的任务的id
+      editID:'', // 要编辑的任务id
+      cC: false,
       value1: "",
       value2: "",
       selectedRowKeys: [],
-      edit: false, //是否点击编辑
       gqxy_hs: true,
       isactive: 0,
       projectChecked: null, //项目单选框
       addhomeworkvisible: false,
-      addtestvisible: false,
+      addtestvisible:false,
-      addevalvisible: false,
-      addinvistvisible: false,
-      addvotevisible: false,
       updateChapterID: null, //修改关卡id
       // 表示当前触发列表的id,用来发送编辑和删除
-      ListChoosedId: 0,
+      ListChoosedId:0
     });
 
     //新建关卡
     const editChapter = () => {
-      if (!state.value1) return message.warning("请输入关卡名称");
+       if(!state.value1) return message.warning("请输入关卡名称");
       let obj = {
         name: state.value1,
         remark: state.value2,
@@ -812,7 +813,7 @@ export default {
         .catch((err) => {
           console.log("创建失败", err);
         });
-    };
+    }
 
     //编辑关卡
     // const updateChapter = () => {
@@ -838,57 +839,39 @@ export default {
     // 作业和考试的抽屉
     const showDrawerAddHomework = () => {
       state.addhomeworkvisible = true;
-      state.ListChoosedId = 0;
+      state.ListChoosedId = 0
     };
     const showDrawerAddTest = () => {
       state.addtestvisible = true;
-      state.ListChoosedId = 0;
+      state.ListChoosedId = 0
-    };
-    //测试评估投票抽屉
-    const showDrawerAddEval = () => {
-      state.addevalvisible = true;
-    };
-    const showDrawerAddInvist = () => {
-      state.addinvistvisible = true;
-    };
-    const showDrawerAddVote = () => {
-      state.addvotevisible = true;
     };
 
     // tableData数据赋值方法
     const dataAssignment = () => {
-      console.log(state.level);
+      console.log((state.level));
-      state.level[0].taskList.forEach((element, index) => {
+      state.level[0].taskList.forEach((element,index) => {
         state.tableData[index] = {
-          key: element.routerTaskId,
+          key:element.routerTaskId,
-          lei: checkType(element.type),
+          lei:checkType(element.type),
-          creater: element.name,
+          creater:element.name,
-          cretime: element.duration,
+          cretime:element.duration,
-          checked1: element.flag,
+          checked1:element.flag,
-        };
+          routerTaskId:element.routerTaskId
-      });
-    };
-
-    const getDetail = (index) => {
-      GetRouterDetail(92)
-        .then((res) => {
-          state.level = res.data.data.chapterList;
-          console.log(state.level);
-          if (index == 0) {
-            //   state.tableData[1] = {
-            //   key: 2,
-            //   lei: "在线",
-            //   creater: "管理者课程",
-            //   cretime: "60",
-            //   checked1: true,
-            // }
-            dataAssignment(0);
         }
-        })
-        .catch((err) => {
-          message.error(err);
       });
-    };
+    }
+    const getDetail = (index) => {
+      GetRouterDetail(92).then((res) => {
+        state.level = res.data.data.chapterList
+        console.log(state.level);
+        if(index == 0) {
+        dataAssignment(0)
+        }
+        state.deleteModal = false;
+      }).catch((err) => {
+        message.error(err)
+      })
+    }
     const closeDrawer = () => {
       state.visible = false;
     };
@@ -1007,27 +990,21 @@ export default {
           // width: 100,
           align: "center",
           scopedSlots: { customRender: "action" }, //引入的插槽
-          customRender: () => {
+          customRender: (e) => {
             return (
               <div class="opa">
                 <div class="opacation">
-                  <span
+                  <span style="color:#4EA6FF;margin-right:25px;cursor:pointer"
-                    style="color:#4EA6FF;margin-right:25px;cursor:pointer"
+                  onClick={()=>{
-                    onClick={() => {
+                    state.editID = e.record.routerTaskId
-                      state.edit = true;
+                    state.addhomeworkvisible = true;
-                      state.addevalvisible = true;
                      }}
                   >
                     编辑
                   </span>
-                  <span
+                  <span style="color:#4EA6FF;cursor:pointer" onClick={() => {
-                    style="color:#4EA6FF;cursor:pointer"
+                    showDeleteModal(e.record.routerTaskId)
-                    onClick={() => {
+                  }}>删除</span>
-                      deleteLevelTask();
-                    }}
-                  >
-                    删除
-                  </span>
                 </div>
               </div>
             );
@@ -1037,22 +1014,9 @@ export default {
       return columns;
     };
     const checkType = (index) => {
-      let typeRules = [
+      let typeRules = ["","在线","面授","案例","作业","考试","直播","外链","讨论","测评","评估","投票"];
-        "",
-        "在线",
-        "面授",
-        "案例",
-        "作业",
-        "考试",
-        "直播",
-        "外链",
-        "讨论",
-        "测评",
-        "评估",
-        "投票",
-      ];
       return typeRules[index];
-    };
+    }
     const tableDataFunc2 = () => {
       const columns = [
         {
@@ -1237,7 +1201,7 @@ export default {
       document.getElementsByTagName("main")[0].style.background =
         "rgb(245, 247, 250,1)";
       document.getElementsByTagName("main")[0].style.boxShadow = "none";
-      getDetail(0);
+      getDetail(0)
     });
     onUnmounted(() => {
       document.getElementsByTagName("main")[0].style.background = "#ffffff";
@@ -1257,16 +1221,33 @@ export default {
     const delete_exit = () => {
       state.deleteAll = false;
     };
+    const showDeleteModal = (id) => {
+      state.deleteID = id;
+      state.deleteModal = true;
+    }
+    const closeConfirm = () => {
+      state.deleteModal = false;
+      state.deleteID = '';
+      state.editID = '';
+    }
     const deleteLevelTask = () => {
-      RouterDeleteTask(state.listChoosedId)
+      RouterDeleteTask(state.deleteID).then((res) => {
-        .then((res) => {
         console.log(`删除成功${res}`);
-          message.success("删除成功");
+        getDetail(0)
-        })
+        message.success('删除成功');
-        .catch((err) => {
+      }).catch((err) => {
         console.log(`删除失败${err}`);
-        });
+      })
-    };
+    }
+    const closeDeleteModel = () => {
+      state.deleteModal = false;
+      state.deleteID = '';
+    }
+    // 子组件触发的清空 editid 事件
+    const clearEditData = () => {
+      state.editID = '';
+      getDetail(0);
+    }
     
     return {
       ...toRefs(state),
@@ -1285,21 +1266,132 @@ export default {
       gqxy_hShow,
       showDeleteALLModal,
       delete_exit,
+      closeConfirm,
       drawertableColumns,
       editChapter,
       // updateChapter,
       showDrawerAddHomework,
       showDrawerAddTest,
-      showDrawerAddEval,
-      showDrawerAddInvist,
-      showDrawerAddVote,
       deleteLevelTask,
+      closeDeleteModel,
+      clearEditData,
     };
   },
 };
 </script>
 
 <style lang="scss">
+.ConfirmModal {
+  .ant-modal {
+    width: 424px !important;
+    height: 258px !important;
+    .ant-modal-content {
+      width: 424px !important;
+      height: 258px !important;
+      .ant-modal-body {
+        width: 424px !important;
+        height: 258px !important;
+        padding: 0 !important;
+        .delete {
+          z-index: 999;
+          width: 424px;
+          height: 258px;
+          background: #ffffff;
+          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+          border-radius: 4px;
+          // position: absolute;
+          // left: 50%;
+          // top: 10%;
+          // transform: translate(-50%, -50%);
+          .del_header {
+            position: absolute;
+            width: calc(100%);
+            height: 40px;
+            background: linear-gradient(
+              rgba(78, 166, 255, 0.2) 0%,
+              rgba(78, 166, 255, 0) 100%
+            );
+          }
+          .del_main {
+            width: 100%;
+            position: relative;
+            .header {
+              display: flex;
+              align-items: center;
+              padding-top: 20px;
+              padding-left: 26px;
+              font-size: 16px;
+              .icon {
+                width: 16px;
+                height: 16px;
+                margin-right: 10px;
+                background-image: url(@/assets/images/coursewareManage/QR.png);
+                background-size: 100% 100%;
+              }
+              .close_exit {
+                position: absolute;
+                right: 42px;
+                cursor: pointer;
+                width: 20px;
+                height: 20px;
+                background-image: url(@/assets/images/coursewareManage/close.png);
+                background-size: 100% 100%;
+              }
+            }
+            .body {
+              width: 100%;
+              margin: 34px auto 56px auto;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              flex-direction: column;
+              // background-color: red;
+              position: relative;
+              .back {
+                position: absolute;
+                top: 30px;
+                font-size: 12px;
+                font-weight: 400;
+                color: #666666;
+              }
+            }
+            .del_btnbox {
+              display: flex;
+              margin: 30px auto;
+              justify-content: center;
+              .del_btn {
+                width: 100px;
+                height: 40px;
+                background: rgba(64, 158, 255, 0);
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                flex-shrink: 0;
+                cursor: pointer;
+                .btnText {
+                  font-size: 14px;
+                  font-weight: 400;
+                  line-height: 40px;
+                }
+              }
+              .btn1 {
+                border: 1px solid rgba(64, 158, 255, 1);
+                color: #4ea6ff;
+                margin-right: 14px;
+              }
+              .btn2 {
+                background-color: #4ea6ff;
+                color: #ffffff;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 .clearfix:after,
 .clearfix:before {
   content: " ";
@@ -1419,9 +1511,9 @@ export default {
                 width: 100px;
                 height: 40px;
                 border-radius: 4px;
-                border: 1px solid #409eff;
+                border: 1px solid #409EFF;
                 font-size: 14px;
-                color: #409eff;
+                color: #409EFF;
                 cursor: pointer;
                 background: #ffffff;
                 margin-right: 20px;
@@ -1434,7 +1526,7 @@ export default {
                 color: #fff;
                 cursor: pointer;
                 border: 0;
-                background: #409eff;
+                background: #409EFF;
               }
             }
           }