--fix 路径图整体修改

src/views/learningpath/LevelAddDetail.vue

@@ -60,8 +60,7 @@
           </div>
         </div>
       </div>
-      <a-modal v-model:visible="modal" :centered="true" :footer="null" :closable="clos" wrapClassName="AddLevell"
-               @cancel="closeModal">
+      <a-modal v-model:visible="modal" :centered="true" :footer="null" wrapClassName="AddLevell" @cancel="closeModal">
         <div class="header">
           <div class="headmain">
             <div class="add">编辑/添加关卡</div>
@@ -76,10 +75,10 @@
               </div>
               <div class="fir">关卡名称：</div>
               <div class="input">
-                <a-input style="width: 100%" v-model:value="routerInfo.chapterList[activeIndex].name" :maxlength="20"
+                <a-input style="width: 100%" v-model:value="formValue.name" :maxlength="20"
                          placeholder="请输入关卡名称"/>
               </div>
-              <div class="co">{{ routerInfo.chapterList[activeIndex].name || 0 }}/20</div>
+              <div class="co">{{ formValue.name?.length || 0 }}/20</div>
             </div>
             <div class="name">
               <div
@@ -90,11 +89,11 @@
                   margin-right: 2px;"></div>
               <div class="fir">关卡说明：</div>
               <div class="input">
-                <a-textarea style="width: 100%" v-model:value="routerInfo.chapterList[activeIndex].remark"
+                <a-textarea style="width: 100%" v-model:value="formValue.remark"
                             :maxlength="100" placeholder="请输入关卡说明"
                             :rows="5"/>
               </div>
-              <div class="co1">{{ routerInfo.chapterList[activeIndex].remark || 0 }}/100</div>
+              <div class="co1">{{ formValue.remark?.length || 0 }}/100</div>
             </div>
             <div class="btn">
               <button class="btn1" @click="closeModal">取消</button>
@@ -102,9 +101,6 @@
             </div>
           </div>
         </div>
-        <div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
-          <a-spin :spinning="addLoading" :tip="updateChapterID ? '修改中...' : ''"/>
-        </div>
       </a-modal>
       <div class="right">
         <div class="addhead">
@@ -121,18 +117,16 @@
             <div class="rightt">
               <div class="select" style="margin-right:90px;">
                 <span>学习模式：</span>
-                <a-select v-model:value="routerInfo.unlockMode" ref="select" size="small"
+                <a-select v-model:value="routerInfo.routerInfo.unlockMode" ref="select" size="small"
                           style="width: 150px" disabled>
-                  <a-select-option :value="0">自由学习模式</a-select-option>
                   <a-select-option :value="1">自由学习模式</a-select-option>
                   <a-select-option :value="2">闯关模式</a-select-option>
                   <a-select-option :value="3">闯关模式</a-select-option>
                 </a-select>
-                <a-button type="primary" size="large" style="border-radius: 8px;margin-left: 24px;"
-                          @click="showModeVisible">切换模式
-                </a-button>
-                <unlock-mode ref="unlockModeModal" v-model:unlockModeVisible="unlockModeVisible"
-                             :objData="routerInfo" @saveUnlock="saveUnlock" @closeUnlockModal="closeUnlockModal"/>
+                <unlock-mode :routerInfo="routerInfo.routerInfo">
+                  <a-button type="primary" size="large" style="border-radius: 8px;margin-left: 24px;">切换模式
+                  </a-button>
+                </unlock-mode>
               </div>
               <div class="line"></div>
               <router-link :to="{ path: '/leveladd', query:{ routerId: routerId } }">
@@ -171,13 +165,13 @@
                 <div class="btn btn1" @click="showChangeModal">
                   <div class="btnText">移动任务到关卡</div>
                 </div>
-                <div class="btn btn2" @click="showDeleteALLModal(1)">
+                <div class="btn btn2" @click="showDeleteALLModal">
                   <div class="imgIcon"></div>
                   <div class="btnText">批量删除</div>
                 </div>
               </div>
             </div>
-            <div class="tableBox">
+            <div v-if="routerInfo?.chapterList[activeIndex]?.draftTaskList?.length" class="tableBox">
               <div style="
                   height: 50px;
                   display: flex;
@@ -208,11 +202,6 @@
                           ? require('../../assets/images/selectAll.png')
                           : require('../../assets/images/select.png')
                     " @click="selectRowAll"/>
-                  <!-- <a-checkbox
-                    v-model:checked="selectAll"
-                    @change="selectRowAll"
-                  >
-                  </a-checkbox> -->
                   <div style="margin-top: 2px; margin-left: 8px">类型</div>
                 </div>
                 <div style="width: 120px; text-align: center">任务名称</div>
@@ -249,8 +238,7 @@
                             margin-right: 9px;
                             position: absolute;
                             left: -25px;"></div>
-                        <a-checkbox :id="element.routerTaskId" v-model:checked="element.checked" @change="changeRow">
-                        </a-checkbox>
+                        <a-checkbox :id="element.id" v-model:checked="element.checked"></a-checkbox>
                         <div style="margin-top: 2px; margin-left: 8px">
                           {{ TASK_TYPE[element.type]?.name || '' }}
                         </div>
@@ -312,7 +300,7 @@
               </Draggable>
             </div>
             <!-- 无数据样式 -->
-            <div class="notable" :style="{ display: stm_hs ? 'block' : 'none' }">
+            <div v-else class="notable">
               <div class="notablebox">
                 <div class="boxbody">
                   <div class="boximg"></div>
@@ -340,15 +328,9 @@
         <a-button class="btn btn1" @click="cancelStorage" :loading="cancleLoading">取消</a-button>
       </div>
     </div>
-    <!-- 添加学员抽屉 -->
-    <add-stu v-model:AddSvisible="AddSvisible"/>
-    <!-- 导入学员抽屉 -->
-    <imp-stu v-model:AddImpStuvisible="AddImpStuvisible"/>
-    <!-- 添加讨论侧弹窗 -->
-    <!-- 添加活动侧弹窗 -->
     <!-- 批量删除学员弹窗 -->
-    <a-modal v-model:visible="deleteAll" :footer="null" :closable="closeDeleteAll" wrapClassName="CopyModal"
-             centered="true">
+    <a-modal v-model:visible="deleteAll" :footer="null" :closable="closedeleteAll" wrapClassName="CopyModal"
+             :centered="true">
       <div class="delete">
         <div class="del_header"></div>
         <div class="del_main">
@@ -373,7 +355,7 @@
     </a-modal>
     <!-- 是否确认删除任务弹窗 -->
     <!-- 确认删除阶段弹窗 -->
-    <a-modal v-model:visible="deleteModal" :footer="null" :closable="cC" wrapClassName="ConfirmModal" centered="true">
+    <a-modal v-model:visible="deleteModal" :footer="null" wrapClassName="ConfirmModal" :centered="true">
       <div class="delete">
         <div class="del_header"></div>
         <div class="del_main">
@@ -397,7 +379,7 @@
       </div>
     </a-modal>
     <!-- 移动任务到阶段 -->
-    <a-modal style="padding: 0" :closable="sh" v-model:visible="visiblene" :footer="null" centered="true"
+    <a-modal style="padding: 0" v-model:visible="visiblene" :footer="null" :centered="true"
              wrapClassName="moveModal">
       <div class="con">
         <div class="header">
@@ -408,10 +390,13 @@
         </div>
         <div class="mid">
           <div class="inher">
-            <div class="cur">已选中{{ selectRow.length }}个任务</div>
+            <div class="cur">
+              已选中{{ routerInfo?.chapterList[activeIndex]?.draftTaskList?.filter(t => t.checked)?.length || 0 }}个任务
+            </div>
             <div class="select">
-              <a-select v-model:value="curLevel" style="width: 100%" placeholder="请选择阶段" :options="level"
-                        @change="handleChangeStage" allowClear></a-select>
+              <a-select v-model:value="moveChapterIndex" style="width: 100%" placeholder="请选择阶段" allowClear
+                        :options="routerInfo.chapterList.map(({name:label},value)=>({label,value,disabled:value===activeIndex}))"
+              ></a-select>
             </div>
             <div class="btn">
               <button style="cursor: pointer" class="sameb btn1" @click="closeChangeModal">
@@ -454,15 +439,12 @@
   </div>
 </template>
 <script setup>
-import {onMounted, onUnmounted, ref} from "vue";
-import AddStu from "../../components/drawers/AddLevelAddStu";
-import ImpStu from "../../components/drawers/AddLevelImportStu";
+import {computed, onMounted, onUnmounted, ref} from "vue";
 import {GetRouterDraftDetail, releaseRouter} from "@/api/indexTask";
 import {message} from "ant-design-vue";
 import {editTask} from "@/api/indexTaskadd";
-import {editRoutered} from '@/api/indexLearningPath'
 import {useRoute} from "vue-router";
-import UnlockMode from "../../components/drawers/UnlockMode.vue";
+import UnlockMode from "@/components/drawers/UnlockMode.vue";
 import {TASK_TYPE} from "@/utils/const";
 import Draggable from "vuedraggable";
 import {ROUTER_DETAIL_MODIFY} from "@/api/apis";
@@ -470,15 +452,32 @@ import {request} from "@/api/request";
 
 const {query: {routerId}} = useRoute();
 const modal = ref(false)
-const unlockModeModal = ref(false)
+const visiblene = ref(false)
+const deleteAll = ref(false)
+const deleteModal = ref(false)
 const deleteChapterModal = ref(false)
-const unlockModeVisible = ref(false)
 const cancleLoading = ref(false)
 const templateLoading = ref(false)
 const confirmLoading = ref(false)
+const moveChapterIndex = ref('')
 const activeIndex = ref(0)
+const deleteIndex = ref(0)
+
 const courseRef = ref({})
-const routerInfo = ref({chapterList: [{name: '关卡一', taskList: []}], routerInfo: {}})
+const formValue = ref({draftTaskList: []})
+const routerInfo = ref({chapterList: [{name: '关卡一', draftTaskList: []}], routerInfo: {}})
+
+
+const selectAll = computed(() => {
+  const selectedNum = routerInfo.value.chapterList[activeIndex.value].draftTaskList.filter(t => t.checked).length
+  if (!selectedNum) {
+    return 0
+  }
+  if (selectedNum === routerInfo.value.chapterList[activeIndex.value].draftTaskList.length) {
+    return 1
+  }
+  return 2
+})
 const showModal = () => {
   modal.value = true;
 };
@@ -486,20 +485,14 @@ const closeModal = () => {
   modal.value = false;
 };
 
-// 关闭模式弹框
-const closeUnlockModal = () => {
-  unlockModeModal.value = false;
-}
-
-const saveUnlock = (num) => {
-  routerInfo.value.unlockMode = num
-  editRoutered(routerInfo.value)
-  closeUnlockModal()
-}
-
 //新建关卡
 const editChapter = () => {
-  // if (!state.value1) return message.warning("请输入关卡名称");
+  if (!formValue.value.name) {
+    return message.warning("请输入关卡名称");
+  }
+  routerInfo.value.chapterList.push({...formValue.value})
+  formValue.value = {draftTaskList: []}
+  closeModal()
 };
 //打开删除关卡弹窗
 const showDeleteChapter = () => {
@@ -532,115 +525,49 @@ onUnmounted(() => {
 const changebgc = (index) => {
   activeIndex.value = index
 };
-const showDeleteALLModal = (type) => {
-  console.log(type)
-  // if (state.selectRow.length === 0) {
-  //    message.warning("请选择要删除的任务");
-  // }
-  // deleteAll = true;
-  // deleteType = type;
+const showDeleteALLModal = () => {
+  if (!routerInfo.value?.chapterList[activeIndex.value]?.draftTaskList?.filter(t => t.checked)?.length) {
+    message.warning("请选择要删除的任务！");
+    return
+  }
+  deleteAll.value = true
 };
 const closedeleteAll = () => {
-  // state.deleteAll = false;
-  // state.deleteType = null;
+  deleteAll.value = false
 };
 const subdeleteAll = () => {
-  // state.deleteType = null;
+  routerInfo.value.chapterList[activeIndex.value].draftTaskList = routerInfo.value.chapterList[activeIndex.value].draftTaskList.filter(t => !t.checked);
+  closedeleteAll()
 };
-const showDeleteModal = (id) => {
-  console.log(id)
-  // state.deleteID = id;
-  // state.deleteModal = true;
+const showDeleteModal = (_, index) => {
+  deleteModal.value = true;
+  deleteIndex.value = index;
 };
 const closeConfirm = () => {
-  // state.deleteModal = false;
-  // state.deleteID = "";
-  // state.editID = "";
+  deleteModal.value = false;
 };
 
-//选择单个任务
-const changeRow = (e) => {
-  console.log(e)
-  //selectRow:已经选择的任务的id数组
-  // let arr = state.selectRow;
-  // if (e.target.checked) {
-  //   arr.push(e.target.id);
-  // } else {
-  //   arr.map((value, index) => {
-  //     if (value == e.target.id) {
-  //       arr.splice(index, 1);
-  //     }
-  //   });
-  // }
-  // state.selectRow = arr;
-  // //判断是否是全部选择或者是全部未选择来修改selectAll框的样式
-  // if (arr.length !== 0) {
-  //   if (arr.length === state.tableData.length) {
-  //     state.selectAll = 1;
-  //   } else {
-  //     state.selectAll = 2;
-  //   }
-  // } else {
-  //   state.selectAll = 0;
-  // }
-  // console.log("state.selectRow", state.selectRow, state.selectAll);
-};
+function deleteLevelTask() {
+  routerInfo.value.chapterList[activeIndex.value].draftTaskList.splice(deleteIndex.value, 1)
+  closeConfirm()
+}
+
 //全选任务或全不选任务
 const selectRowAll = () => {
-  // let arr = state.tableData;
-  // let array = [];
-  // if (state.selectAll === 0 || state.selectAll === 2) {
-  //   arr.map((value) => {
-  //     // console.log("value", value, index);
-  //     value.checked = true;
-  //     array.push(value.id);
-  //     // if (value == e.target.id) {
-  //     //   arr.splice(index, 1);
-  //     // }
-  //     state.selectAll = 1;
-  //   });
-  // } else {
-  //   array = [];
-  //   arr.map((value) => {
-  //     // console.log("value", value, index);
-  //     value.checked = false;
-  //     state.selectAll = 0;
-  //   });
-  // }
-  // state.tableData = arr;
-  // state.selectRow = array;
+  if (selectAll.value === 1) {
+    routerInfo.value.chapterList[activeIndex.value].draftTaskList.forEach(t => t.checked = false)
+    return
+  }
+  routerInfo.value.chapterList[activeIndex.value].draftTaskList.forEach(t => t.checked = true)
 };
 //移动任务到关卡
 const moveTask = () => {
-  // if (state.isactive == state.removeStageId) {
-  //   message.destroy();
-  //   message.warning("选择的任务已在当前关卡");
-  // } else if (state.removeStageId == null) {
-  //   message.destroy();
-  //   message.warning("请选择关卡");
-  // } else {
-  //   let obj = {
-  //     chapterId: state.removeStageId,
-  //     routerTaskIdList: state.selectRow,
-  //   };
-  //   console.log("移动关卡obj", obj);
-  //   api
-  //       .moveTask(obj)
-  //       .then((res) => {
-  //         console.log("移动成功", res);
-  //         message.destroy();
-  //         message.success("移动成功");
-  //         localStorage.setItem("chapterId", state.chooseChapterId);
-  //         state.selectRow = []; //选择行
-  //         state.selectAll = 0; //0：未选择，1：全选，2：部分选择
-  //         getDetail();
-  //       })
-  //       .catch((err) => {
-  //         console.log("移动失败", err);
-  //       });
-  //   state.visiblene = false;
-  //   state.curLevel = null;
-  // }
+  routerInfo.value.chapterList[moveChapterIndex.value].draftTaskList.push(...routerInfo.value.chapterList[activeIndex.value].draftTaskList.filter(t => t.checked).map((t) => ({
+    ...t,
+    checked: false
+  })));
+  routerInfo.value.chapterList[activeIndex.value].draftTaskList = routerInfo.value.chapterList[activeIndex.value].draftTaskList.filter(t => !t.checked);
+  visiblene.value = false;
 };
 //编辑的按钮
 const editTaskForType = (ele, index) => {
@@ -653,25 +580,18 @@ const changeCourseType = (ele) => {
   message.success("修改成功");
 };
 const showChangeModal = () => {
-  // if (state.selectRow.length == 0) {
-  //   return message.warning("请选择要移动的任务");
-  // } else {
-  //   state.visiblene = true;
-  // }
+  if (routerInfo.value?.chapterList?.length <= 1) {
+    message.warning("请添加关卡！");
+    return
+  }
+  if (!routerInfo.value?.chapterList[activeIndex.value]?.draftTaskList?.filter(t => t.checked)?.length) {
+    message.warning("请选择要移动的任务！");
+    return
+  }
+  visiblene.value = true
 };
 const closeChangeModal = () => {
-  // state.visiblene = false;
-  // state.curLevel = null;
-};
-const handleChangeStage = () => {
-  // console.log("阶段改变", value, option);
-  // state.removeStageId = option.chapterId;
-  // state.curLevel = option.name;
-};
-
-//显示切换模式抽屉
-const showModeVisible = () => {
-  unlockModeVisible.value = true;
+  visiblene.value = false
 };
 
 //暂存