feat: 关卡下学员获取，删除，进度图详情

src/api/index1.js

@@ -72,7 +72,8 @@ export const getRouterDetail = (routerId) => http.get('/admin/router/detail', {
 export const addStudent = (obj) => http.post('/admin/router/addStudent', obj);
 //删除学员
 export const delStudent = (obj) => http.post('/admin/router/deleteStudent', obj);
-
+// 获取学员路径图进度明细
+export const stuProgress = (obj) => http.post('/admin/router/studentProcess', obj);
 
 
 //项目基础信息-----------------------------------

src/components/drawers/CheckStu.vue

@@ -21,14 +21,14 @@
             <img src="../../assets/images/studentimg/character.png" />
           </div>
           <div class="stumation">
-            <div class="stuname">王明</div>
-            <div class="stugangw">产研部门 - 产品经理</div>
+            <div class="stuname">{{pro.userInfoBo.userName}}</div>
+            <div class="stugangw">{{pro.userInfoBo.deptName+'-'+pro.userInfoBo.jobName}}</div>
           </div>
           <div class="sortbox">
             <div class="sortname">进度排名</div>
             <div class="sortnub">
-              <span class="nub1">2</span>
-              <span class="total">/10</span>
+              <span class="nub1">{{pro.currentChapterCnt}}</span>
+              <span class="total">/{{pro.totalChapterCnt}}</span>
             </div>
           </div>
           <a-divider
@@ -42,8 +42,8 @@
           <div class="sortbox" style="margin-left: 34px">
             <div class="sortname">完成必修</div>
             <div class="sortnub">
-              <span class="nub1">3</span>
-              <span class="total">/10</span>
+              <span class="nub1">{{pro.currentReqCnt}}</span>
+              <span class="total">/{{pro.totalReqCnt}}</span>
             </div>
           </div>
           <a-divider
@@ -57,7 +57,7 @@
           <div class="sortbox" style="margin-left: 34px">
             <div class="sortname">已修证书</div>
             <div class="sortnub">
-              <span class="nub1">1</span>
+              <span class="nub1">{{pro.certCnt}}</span>
             </div>
           </div>
         </div>
@@ -68,7 +68,9 @@
             <div><img src="../../assets/images/studentimg/chak.png" /></div>
           </div>
         </div>
-        <div class="mainbox">
+        <div v-for="(item,index) in pro.chapterProcessList" class="mainbox"
+        style="margin-top: 15px; height: 56px"
+        :key="item.chapterId">
         <div class="rowtitle" @click="changeDown">
             <div class="titleimg">
               <img
@@ -79,84 +81,26 @@
                 "
               />
             </div>
-            <div class="titletext">阶段1 腾飞班阶段1</div>
+            <div class="titletext">关卡{{index}} {{item.chapterName}}</div>
           </div>
+
           <div :style="{ display: showDown ? 'block' : 'none' }">
-            <div class="rowclass">
+            <div  v-for="_item in item.taskProcessList" :key="_item.routerTaskId" class="rowclass">
               <div class="leftclass">
                 <div><img src="../../assets/images/leveladd/zai.png" /></div>
-                <div class="text1">在线</div>
-                <div class="text2">如何成为一个产品经理</div>
+                <div class="text1">{{checkType(_item.type)}}</div>
+                <div class="text2">{{_item.name}}</div>
               </div>
               <div class="alreadyclass">
                 <div class="alimg">
                   <img src="../../assets/images/studentimg/complete.png" />
                 </div>
-                <div class="altext">已完成</div>
-              </div>
-            </div>
-            <div class="rowclass">
-              <div class="leftclass">
-                <div><img src="../../assets/images/leveladd/zhi.png" /></div>
-                <div class="text1">直播</div>
-                <div class="text2">管理者播课</div>
-              </div>
-              <div class="alreadyclass">
-                <div class="alimg">
-                  <img src="../../assets/images/studentimg/complete.png" />
-                </div>
-                <div class="altext">已完成</div>
-              </div>
-            </div>
-            <div class="rowclass">
-              <div class="leftclass">
-                <div><img src="../../assets/images/leveladd/mian.png" /></div>
-                <div class="text1">面授</div>
-                <div class="text2">管理面授课</div>
-              </div>
-              <div class="alreadyclass">
-                <div class="alimg">
-                  <img src="../../assets/images/studentimg/notice.png" />
-                </div>
-                <div class="altext">未完成</div>
-              </div>
-            </div>
-            <div class="rowclass">
-              <div class="leftclass">
-                <div><img src="../../assets/images/leveladd/huo.png" /></div>
-                <div class="text1">活动</div>
-                <div class="text2">管理者活动</div>
-              </div>
-              <div class="alreadyclass">
-                <div class="alimg">
-                  <img src="../../assets/images/studentimg/notice.png" />
-                </div>
-                <div class="altext">未完成</div>
-              </div>
-            </div>
-            <div class="rowclass">
-              <div class="leftclass">
-                <div><img src="../../assets/images/leveladd/zuo.png" /></div>
-                <div class="text1">作业</div>
-                <div class="text2">管理者作业</div>
-              </div>
-              <div class="alreadyclass">
-                <div class="alimg">
-                  <img src="../../assets/images/studentimg/notice.png" />
-                </div>
-                <div class="altext">未完成</div>
+                <div class="altext">{{checkStatus(_item.status)}}</div>
               </div>
             </div>
           </div>
         </div>
-        <div class="mainbox" style="margin-top: 15px; height: 56px">
-          <div class="rowtitle">
-            <div class="titleimg">
-              <img src="../../assets/images/studentimg/close.png" />
-            </div>
-            <div class="titletext">阶段2 腾飞班阶段2</div>
-          </div>
-        </div>
+
       </div>
       <div class="btnn">
         <button class="btn2">关闭</button>
@@ -169,6 +113,8 @@
 <script>
 import { reactive, toRefs } from "vue";
 import CheckStuMess from "./CheckStuMess.vue";
+import {stuProgress} from "@/api/index1";
+import {message} from "ant-design-vue";
 export default {
   name: "CheckStu",
   components: { CheckStuMess },
@@ -177,11 +123,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    studentId: {
+      type: Number,
+      default: null,
+    }
   },
   setup(props, ctx) {
     const state = reactive({
       StuMessvisible: false,
       showDown: false,
+      pro:null,
     });
     const closeDrawer = () => {
       ctx.emit("update:CheckStuvisible", false);
@@ -191,11 +142,56 @@ export default {
       state.StuMessvisible = true;
     };
     const afterVisibleChange = (bool) => {
+      if(props.CheckStuvisible) {
+        getStuProgress()
+      }
       console.log("state", bool);
     };
     const changeDown = () => {
       state.showDown = !state.showDown;
     };
+    const getStuProgress = () => {
+      let obj = {
+        routerId:100,
+        studentId:props.studentId
+      }
+      stuProgress(obj).then(res => {
+        message.success("操作成功")
+        state.pro = res.data.data
+        console.log(res)
+      }).catch(err => {
+        message.error("操作失败"+err)
+        console.log(err)
+      })
+    }
+
+    const checkType = (type) => {
+    let typeRules = [
+        "",
+        "在线",
+        "面授",
+        "案例",
+        "作业",
+        "考试",
+        "直播",
+        "外链",
+        "讨论",
+        "活动",
+        "测评",
+        "评估",
+        "投票",
+      ];
+      return typeRules[type];
+  }
+
+  const checkStatus = (status) => {
+    if(status < 0) return "未开始"
+    let statusRules = [
+      "进行中","已完成"
+    ]
+    return statusRules[status]
+  }
+
 
     return {
       ...toRefs(state),
@@ -203,7 +199,10 @@ export default {
       closeDrawer,
       showProMess,
       changeDown,
+      checkType,
+      checkStatus,
       // change,
+
     };
   },
 };

src/views/learningpath/LevelAdd.vue

@@ -69,7 +69,7 @@
                 <div class="centerbox" style="color: rgba(255, 182, 78, 1)">
                   添加任务
                 </div>
-                <div class="centermain">快速添加任务/阶段</div>
+                <div class="centermain">快速添加任务/关卡</div>
               </div>
               <div
                 class="taskbox"
@@ -113,7 +113,7 @@
           <!-- 概览（无数据） -->
           <!-- 概览（有数据） -->
           <div :style="{ display: nodata ? 'none' : 'block' }">
-            <div class="onerow"><div class="taskmain">项目概览</div></div>
+            <div class="onerow"><div class="taskmain">关卡概览</div></div>
             <div class="second" style="margin-top: 0">
               <div class="nubbox">
                 <span class="nub1">{{routerInfoOverview.totalStudentCnt}}</span>
@@ -149,7 +149,7 @@
                 <div class="nub2">总完成率</div>
               </div>
             </div>
-            <div class="onerow"><div class="taskmain">阶段信息</div></div>
+            <div class="onerow"><div class="taskmain">关卡信息</div></div>
             <div class="stagemess">
               <div v-for="item in stageList" 
               :class= "{ 'stage1': item.stageId == choosedStageId, 'stage2': item.stageId != choosedStageId }"
@@ -160,8 +160,8 @@
               <div class="stage2">阶段2</div> -->
             </div>
             <div class="stagesecond">
-              <div class="staname">阶段名称：</div>
-              <div class="stamess">管理者进阶-腾飞班1第一阶段</div>
+              <div class="staname">关卡名称：</div>
+              <div class="stamess">管理者进阶-腾飞班1第一关卡</div>
             </div>
             <div class="stagelast">
               <div class="stagepro">
@@ -546,6 +546,7 @@
                     :current="currentPage"
                     :total="tableDataTotal"
                     class="pagination"
+                    style="display:none"
                   />
                 </div>
               </div>
@@ -847,7 +848,10 @@
       <!-- 导入学员抽屉 -->
       <imp-stu v-model:AddImpStuvisible="AddImpStuvisible" />
       <!-- 学员管理查看抽屉 -->
-      <check-stu v-model:CheckStuvisible="CheckStuvisible" />
+      <check-stu 
+      v-model:CheckStuvisible="CheckStuvisible"
+      v-model:studentId="studentId"
+       />
       <!-- 面授学员抽屉 -->
       <face-stu v-model:FSvisible="FSvisible" />
       <!-- 活动考勤抽屉 -->
@@ -871,8 +875,9 @@
   </div>
 </template>
 <script>
-import { ref, reactive, toRefs,onMounted } from "vue";
-import { message } from "ant-design-vue";
+import { ref, reactive, toRefs,onMounted, createVNode } from "vue";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { message, Modal } from "ant-design-vue";
 import PathAddStu from "../../components/drawers/pathStuAdd";
 import ImpStu from "../../components/drawers/AddLevelImportStu";
 import CheckStu from "../../components/drawers/CheckStu";
@@ -921,6 +926,7 @@ export default {
       twobtnn: false,
       inputbox: false,
       Wvisible: false, //作业管理
+      studentId:null,
       // 共享文档列表
       docList:[
         {
@@ -1012,80 +1018,7 @@ export default {
         //   test: 1,
         // },
       ],
-      tableData: [
-        {
-          key: 1,
-          name: "张三",
-          com: "产研部",
-          gang: "产品经理",
-          cur: "关卡2",
-          jin: "2/10",
-          time: "2022-07-15 14:00",
-        },
-        {
-          key: 2,
-          name: "张三",
-          com: "产研部",
-          gang: "产品经理",
-          cur: "关卡2",
-          jin: "2/10",
-          time: "2022-07-15 14:00",
-        },
-        {
-          key: 3,
-          name: "张三",
-          com: "产研部",
-          gang: "产品经理",
-          cur: "关卡2",
-          jin: "2/10",
-          time: "2022-07-15 14:00",
-        },
-        {
-          key: 4,
-          name: "张三",
-          com: "产研部",
-          gang: "产品经理",
-          cur: "关卡1",
-          jin: "2/10",
-          time: "2022-07-15 14:00",
-        },
-        {
-          key: 5,
-          name: "张三",
-          com: "产研部",
-          gang: "产品经理",
-          cur: "关卡1",
-          jin: "2/10",
-          time: "2022-07-15 14:00",
-        },
-        {
-          key: 6,
-          name: "张三",
-          com: "产研部",
-          gang: "产品经理",
-          cur: "关卡2",
-          jin: "2/10",
-          time: "2022-07-15 14:00",
-        },
-        {
-          key: 7,
-          name: "张三",
-          com: "产研部",
-          gang: "产品经理",
-          cur: "关卡2",
-          jin: "2/10",
-          time: "2022-07-15 14:00",
-        },
-        {
-          key: 8,
-          name: "张三",
-          com: "产研部",
-          gang: "产品经理",
-          cur: "关卡2",
-          jin: "2/10",
-          time: "2022-07-15 14:00",
-        },
-      ],
+      tableData: [],
     });
 
     const levelList = reactive({
@@ -1108,11 +1041,11 @@ export default {
       stageList: [ // 阶段列表
         {
           stageId:1,
-          stage:"阶段一"
+          stage:"关卡一"
         },
         {
           stageId:2,
-          stage:"阶段二"
+          stage:"关卡二"
         }
       ]
     })
@@ -1200,7 +1133,7 @@ export default {
                 <div class="opacation">
                   <span
                     onClick={() => {
-                      showCheckStu();
+                      showCheckStu(text.record.studentId);
                     }}
                     style="color:#4EA6FF;margin-right:25px;cursor:pointer"
                   >
@@ -1216,7 +1149,7 @@ export default {
                     调整
                   </span>
                   <span style="color:#4EA6FF;cursor:pointer"
-                  onClick={() => {myDelStudent}}
+                  onClick={() => {delConfirm(text.record.studentId)}}
                   >删除</span>
                 </div>
               </div>
@@ -1248,8 +1181,9 @@ export default {
     const showImpStu = () => {
       state.AddImpStuvisible = true;
     };
-    const showCheckStu = () => {
+    const showCheckStu = (id) => {
       state.CheckStuvisible = true;
+      state.studentId = id;
     };
     const showbtn = () => {
       state.twobtn = false;
@@ -1329,32 +1263,44 @@ export default {
     const getStudent = () => {
       let obj = {
         name: "",
-        pageNo: 0,
-        pageSize: 0,
-        routerId: state.routerId,
+        pageNo: 1,
+        pageSize: 10,
+        routerId: 100,
       };
       api
         .getStudent(obj)
         .then((res) => {
           console.log("获取学员列表", res);
+          let data = res.data.data.rows || null;
+          state.tableData = []
+          if(data.length){
+            for(let i in data) {
+              let _time = new Date(data[i].beginStudyTime*1000);
+              state.tableData.push({
+                key:i+1,
+                com:data[i].userInfoBo.deptName,
+                name:data[i].userInfoBo.userName,
+                gang:data[i].userInfoBo.jobName,
+                cur:data[i].currentChapterName || '0',
+                jin:data[i].completeChapterCnt+'/'+ data[i].totalChapterCnt,
+                time:_time.toLocaleDateString(),
+                studentId:data[i].studentId,
+              })
+              
+              // state.tableData[i].key = i+1;
+              // state.tableData[i].com = data[i].userInfoBo.deptName;
+              // state.tableData[i].name = data[i].userInfoBo.userName
+              // state.tableData[i].gang = data[i].userInfoBo.jobName
+              // state.tableData[i].cur = data[i].currentChapterName || '0'
+              // state.tableData[i].jin = data[i].completeChapterCnt+'/'+ data[i].totalChapterCnt
+              // state.tableData[i].time = _time.toLocaleDateString()
+            }
+          }
         })
         .catch((err) => {
           console.log("获取学员列表失败", err);
         });
     };
-    const myDelStudent = () => {
-      let obj = {
-        "routerId": 0,
-        "studentIds": []
-      };
-      api.methods(obj).then(res => {
-        message.success("删除成功")
-        console.log(res)
-      }).catch(err => {
-        message.error("删除失败"+err)
-        console.log(err)
-      })
-    }
   const checkType = (type) => {
     let typeRules = [
         "",
@@ -1436,6 +1382,25 @@ export default {
       }
     };
 
+    const delConfirm = (id) => {
+        Modal.confirm({
+        title: '是否确认删除',
+        icon: createVNode(ExclamationCircleOutlined),
+        content: '',
+        okText: '确认',
+        cancelText: '取消',
+        onOk(){
+          api.delStudent({routerId:100,studentIds:[id]}).then(res => {
+          message.success("删除成功")
+          console.log(res)
+        }).catch(err => {
+          message.error("删除失败"+err)
+          console.log(err)
+        })
+        }
+      });
+    }
+
     return {
       ...toRefs(state),
       ...toRefs(levelList),
@@ -1465,7 +1430,7 @@ export default {
       changeTabs,
       checkType,
       handleChange,
-      myDelStudent,
+      delConfirm,
     };
   },
 };