feat:增加调整关卡弹窗

src/components/student/ChangeLevelModal.vue

@@ -2,7 +2,7 @@
  * @Author: lixg lixg@dongwu-inc.com
  * @Date: 2022-12-20 17:00:37
  * @LastEditors: lixg lixg@dongwu-inc.com
- * @LastEditTime: 2022-12-20 17:59:40
+ * @LastEditTime: 2022-12-21 17:54:18
  * @FilePath: /fe-manage/src/components/student/ChangeLevelModal.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -28,11 +28,11 @@
           <!-- <div class="cur">当前关卡：关卡2</div> -->
           <div class="select">
             <a-select
-              v-model:value="curLevel"
+              v-model:value="chapterSelect"
               style="width: 100%"
               placeholder="请选择关卡"
-              :options="projectNameList4"
-              @change="selectProjectName4"
+              :options="chapterList"
+              @change="changeChapter"
               allowClear
               showSearch
             ></a-select>
@@ -59,6 +59,9 @@
   </a-modal>
 </template>
 <script>
+import { reactive, toRefs, onMounted } from "vue";
+import { message } from "ant-design-vue";
+import { GetRouterDetail } from "../../api/indexTask";
 export default {
   name: "ChangeLevelModal",
   props: {
@@ -66,19 +69,51 @@ export default {
       type: Boolean,
       default: false,
     },
+    id: String,
   },
   setup(props, ctx) {
+    const state = reactive({
+      chapterList: [],
+      chapterSelect: null, //选择的关卡
+      chapterSelectId: null, //选择关卡的id
+    });
     const closeChangeModal = () => {
       ctx.emit("update:visiblene", false);
+      state.chapterSelect = null; //选择的关卡
+      state.chapterSelectId = null; //选择关卡的id
     };
     const changelevel = () => {
       console.log("点击调整关卡");
     };
     //获取关卡列表
-
+    const getDetail = () => {
+      console.log("props.id", props.id);
+      GetRouterDetail(props.id)
+        .then((res) => {
+          //给level赋初始值
+          state.chapterList = res.data.data.chapterList;
+          //增加两个字段
+          state.chapterList.forEach((item) => {
+            item["value"] = item.chapterId;
+            item["label"] = item.name;
+          });
+          console.log("路径图详情", res);
+        })
+        .catch((err) => {
+          message.error(err);
+        });
+    };
+    const changeChapter = (e, v) => {
+      console.log("eeeeeeeeeee", e, v);
+    };
+    onMounted(() => {
+      getDetail();
+    });
     return {
+      ...toRefs(state),
       closeChangeModal,
       changelevel,
+      changeChapter,
     };
   },
 };

src/components/student/TableStudent.vue

@@ -63,12 +63,12 @@
           批量删除
         </a-button>
       </a-col>
-      <!-- <a-col :span="1.5" v-if="type == 2">
+      <a-col :span="1.5" v-if="type == 2">
         <a-button class="cus-btn white" @click="showChangeModal">
           <template #icon></template>
           批量调整关卡
         </a-button>
-      </a-col> -->
+      </a-col>
     </a-row>
     <div style="margin-top: 20px">
       <a-table
@@ -80,11 +80,43 @@
         :row-selection="stuRowSelection"
       >
         <template #action="{ record }">
-          <div
-            @click="del(record.id)"
-            style="color: #4ea6ff; font-size: 14px; text-align: center"
-          >
-            删除
+          <div style="display: flex; justify-content: center">
+            <div
+              @click="del(record.id)"
+              style="
+                color: #4ea6ff;
+                font-size: 14px;
+                text-align: center;
+                margin-left: 20px;
+                cursor: pointer;
+              "
+            >
+              查看
+            </div>
+            <div
+              @click="showChangeModal"
+              style="
+                color: #4ea6ff;
+                font-size: 14px;
+                text-align: center;
+                margin-left: 20px;
+                cursor: pointer;
+              "
+            >
+              调整
+            </div>
+            <div
+              @click="del(record.id)"
+              style="
+                color: #4ea6ff;
+                font-size: 14px;
+                text-align: center;
+                margin-left: 20px;
+                cursor: pointer;
+              "
+            >
+              删除
+            </div>
           </div>
           <!-- <a-row gutter="12">
             <a-col>
@@ -109,7 +141,7 @@
     </div>
   </div>
   <!-- 批量调整关卡弹窗 -->
-  <ChangeLevelModal v-model:visiblene="visiblene" />
+  <ChangeLevelModal v-model:visiblene="visiblene" :id="id" />
   <!-- 批量调整关卡弹窗 -->
 </template>
 <script setup>
@@ -258,11 +290,11 @@ function submitCall(flag) {
   flag && getStuList();
 }
 
-//调整关卡
-// const visiblene = ref(false);
-// const showChangeModal = () => {
-//   visiblene.value = true;
-// };
+// 调整关卡;
+const visiblene = ref(false);
+const showChangeModal = () => {
+  visiblene.value = true;
+};
 </script>
 <style>
 .studentopea1 {