feat:增加学习路径图-学员管理-列表操作-查看、调整、导出

src/api/index1.js

@@ -78,8 +78,9 @@ export const delStudent = (obj) =>
     http.post("/admin/router/deleteStudent", obj);
 
 // 获取学员路径图进度明细
-export const stuProgress = (obj) =>
+export const stuProgress = (params) => http.get('/admin/router/studentProcess', {params});
-    http.post("/admin/router/studentProcess", obj);
+// export const stuProgress = (obj) =>http.post("/admin/router/studentProcess", obj);
+
 //编辑学习路径基本信息
 export const editLearnInfo = (obj) => http.post('/admin/router/editInfo', obj)
 

src/components/drawers/CheckStu.vue

@@ -15,14 +15,15 @@
           @click="closeDrawer"
         />
       </div>
-      <div class="main">
+      <a-spin v-if="loading" :spinning="loading"/>
+      <div v-if="!loading" class="main">
         <div class="stuinfor">
           <div class="portrait">
             <img src="../../assets/images/studentimg/character.png" />
           </div>
           <div class="stumation">
             <div class="stuname">{{pro.userInfoBo.userName}}</div>
-            <div class="stugangw">{{pro.userInfoBo.deptName+'-'+pro.userInfoBo.jobName}}</div>
+            <div class="stugangw">{{pro.userInfoBo.deptName?pro.userInfoBo.deptName:"" + '-' + pro.userInfoBo.jobName?pro.userInfoBo.jobName:""}}</div>
           </div>
           <div class="sortbox">
             <div class="sortname">进度排名</div>
@@ -46,7 +47,7 @@
               <span class="total">/{{pro.totalReqCnt}}</span>
             </div>
           </div>
-          <a-divider
+          <!-- <a-divider
             type="vertical"
             style="
               height: 49px;
@@ -59,16 +60,16 @@
             <div class="sortnub">
               <span class="nub1">{{pro.certCnt}}</span>
             </div>
-          </div>
+          </div> -->
         </div>
         <div class="secondrow">
-          <div class="rowleft">产品经理管理 - 腾飞班1</div>
+          <div class="rowleft">{{ pro.name }}</div>
-          <div class="rowbox" @click="showProMess">
+          <!-- <div class="rowbox" @click="showProMess">
             <div class="shuom">说明</div>
             <div><img src="../../assets/images/studentimg/chak.png" /></div>
-          </div>
+          </div> -->
         </div>
-        <div v-for="(item,index) in pro.chapterProcessList" class="mainbox"
+        <!-- <div v-for="(item) in pro.chapterProcessList" class="mainbox"
         style="margin-top: 15px; height: 56px"
         :key="item.chapterId">
         <div class="rowtitle" @click="changeDown">
@@ -81,7 +82,7 @@
                 "
               />
             </div>
-            <div class="titletext">关卡{{index}} {{item.chapterName}}</div>
+            <div class="titletext">{{item.chapterName}}</div>
           </div>
 
           <div :style="{ display: showDown ? 'block' : 'none' }">
@@ -99,11 +100,105 @@
               </div>
             </div>
           </div>
+        </div> -->
+
+        <div class="mainbox">
+          <a-collapse v-model:activeKey="stageListActive">
+            <template #expandIcon="{ isActive }">
+              <img
+                style="margin-right: 20px"
+                :src="
+                  isActive
+                    ? require('../../assets/images/studentimg/open.png')
+                    : require('../../assets/images/studentimg/close.png')
+                "
+              />
+              <div></div>
+            </template>
+            <a-collapse-panel
+              v-for="value in pro.chapterProcessList"
+              :key="value.chapterId"
+              :header="value.chapterName"
+             
+            > 
+            <template #extra >
+            <div @click.stop="">
+              <div class="rowbox">
+                <a-popover title="关卡说明">
+                <template #content>
+                  <p>{{value.remark}}</p>
+                </template>
+              <div class="shuom">说明</div>
+              </a-popover>
+              <div><img src="../../assets/images/studentimg/chak.png" /></div>
+            </div>
+           </div> 
+            </template>
+         
+              <div 
+                class="rowclass"
+                v-for="(item, key) in value.taskProcessList"
+                :key="key"
+              >
+            
+                <div class="leftclass">
+                  <div>
+                    <img
+                      :src="
+                        item.type === 1
+                          ? require('../../assets/images/leveladd/zai.png')
+                          : item.type === 2
+                          ? require('../../assets/images/leveladd/mian.png')
+                          : item.type === 3
+                          ? require('../../assets/images/leveladd/an.png')
+                          : item.type === 4
+                          ? require('../../assets/images/leveladd/zuo.png')
+                          : item.type === 5
+                          ? require('../../assets/images/leveladd/kao.png')
+                          : item.type === 6
+                          ? require('../../assets/images/leveladd/zhi.png')
+                          : item.type === 7
+                          ? require('../../assets/images/leveladd/wai.png')
+                          : item.type === 8
+                          ? require('../../assets/images/leveladd/tao.png')
+                          : item.type === 9
+                          ? require('../../assets/images/leveladd/huo.png')
+                          : item.type === 10
+                          ? require('../../assets/images/leveladd/ce.png')
+                          : item.type === 11
+                          ? require('../../assets/images/leveladd/diao.png')
+                          : item.type === 12
+                          ? require('../../assets/images/leveladd/tou.png')
+                          : item.type === 13
+                          ? require('../../assets/images/leveladd/diao.png')
+                          : null
+                      "
+                    />
+                  </div>
+                  <div class="text1">{{ checkType(item.type) }}</div>
+                  <div class="text2">{{ item.name }}</div>
+                </div>
+                <div class="alreadyclass">
+                  <div class="alimg">
+                    <img
+                      :src="
+                        item.status === 1
+                          ? require('../../assets/images/studentimg/complete.png')
+                          : require('../../assets/images/studentimg/notice.png')
+                      "
+                    />
+                  </div>
+                  <div class="altext">{{ item.status ==0?"进行中":item.status ==1?"已完成":"未开始" }}</div>
+                </div>
+               
+              </div>
+            </a-collapse-panel>
+          </a-collapse>
         </div>
 
       </div>
       <div class="btnn">
-        <button class="btn2">关闭</button>
+        <button class="btn2" @click="closeDrawer">关闭</button>
       </div>
     </div>
   </a-drawer>
@@ -114,7 +209,7 @@
 import { reactive, toRefs } from "vue";
 import CheckStuMess from "./CheckStuMess.vue";
 import {stuProgress} from "@/api/index1";
-import {message} from "ant-design-vue";
+// import {message} from "ant-design-vue";
 export default {
   name: "CheckStu",
   components: { CheckStuMess },
@@ -126,13 +221,19 @@ export default {
     studentId: {
       type: Number,
       default: null,
-    }
+    },
+    routerId: {
+      type: Number,
+      default: null,
+    },
   },
   setup(props, ctx) {
     const state = reactive({
       StuMessvisible: false,
       showDown: false,
       pro:null,
+      loading:true,
+      stageListActive: 0,
     });
     const closeDrawer = () => {
       ctx.emit("update:CheckStuvisible", false);
@@ -151,21 +252,24 @@ export default {
       state.showDown = !state.showDown;
     };
     const getStuProgress = () => {
+      state.loading = true
       let obj = {
-        routerId:100,
+        routerId:props.routerId,
         studentId:props.studentId
       }
       stuProgress(obj).then(res => {
-        message.success("操作成功")
+        console.log("查询当前学员进度信息success",res)
         state.pro = res.data.data
+        state.loading = false
         console.log(res)
       }).catch(err => {
-        message.error("操作失败"+err)
+        console.log("查询当前学员进度信息err",err)
+        state.loading = false
         console.log(err)
       })
     }
 
-    const checkType = (type) => {
+  const checkType = (type) => {
     let typeRules = [
         "",
         "在线",
@@ -317,28 +421,115 @@ export default {
           }
         }
       }
+      // .mainbox {
+      //   // height: 463px;
+      //   margin-right: 37px;
+      //   margin-top: 32px;
+      //   border: 1px solid rgba(221, 238, 255, 1);
+      //   border-radius: 6px;
+      //   .rowtitle {
+      //     height: 56px;
+      //     background: rgba(240, 246, 252, 1);
+      //     display: flex;
+      //     align-items: center;
+      //     .titleimg {
+      //       width: 20px;
+      //       height: 20px;
+      //       margin-left: 23px;
+      //     }
+      //     .titletext {
+      //       color: rgba(51, 51, 51, 1);
+      //       font-size: 16px;
+      //       font-weight: 500;
+      //       margin-left: 16px;
+      //     }
+      //   }
+      //   .rowclass {
+      //     height: 81px;
+      //     border-bottom: 1px solid rgba(221, 238, 255, 1);
+      //     display: flex;
+      //     justify-content: space-between;
+      //     align-items: center;
+      //     .leftclass {
+      //       display: flex;
+      //       margin-left: 25px;
+      //       align-items: center;
+      //       .text1 {
+      //         color: #000000;
+      //         font-size: 14px;
+      //         font-weight: 500;
+      //         margin-left: 25px;
+      //       }
+      //       .text2 {
+      //         color: rgba(51, 51, 51, 0.8);
+      //         font-size: 14px;
+      //         margin-left: 65px;
+      //       }
+      //     }
+      //     .alreadyclass {
+      //       display: flex;
+      //       margin-right: 57px;
+      //       .alimg {
+      //         height: 16px;
+      //         width: 16px;
+      //       }
+      //       .altext {
+      //         color: rgba(56, 125, 247, 1);
+      //         font-size: 14px;
+      //         margin-left: 16px;
+      //       }
+      //     }
+      //   }
+      // }
       .mainbox {
         // height: 463px;
         margin-right: 37px;
         margin-top: 32px;
-        border: 1px solid rgba(221, 238, 255, 1);
+        //border: 1px solid rgba(221, 238, 255, 1);
-        border-radius: 6px;
+        //border-radius: 6px;
-        .rowtitle {
+        .rowbox {
-          height: 56px;
+          width: 64px;
-          background: rgba(240, 246, 252, 1);
+          height: 24px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin-left: 24px;
+          border: 1px solid rgba(64, 158, 255, 1);
+          background: rgba(64, 158, 255, 0.1);
+          margin-right: 480px;
+          cursor: pointer;
+          .shuom {
+            color: rgba(64, 158, 255, 1);
+            font-size: 14px;
+            line-height: 20px;
+            margin-right: 5px;
+          }
+        }
+        .ant-collapse {
+          background-color: #ffffff;
+          border: 0;
+        }
+        .ant-collapse-content > .ant-collapse-content-box {
+          padding: 0;
+          border: 0;
+        }
+        .ant-collapse > .ant-collapse-item {
+          border: 1px solid rgba(221, 238, 255, 1);
+          border-radius: 6px;
+          margin-bottom: 15px;
+          border-bottom: 0px;
+        }
+        .ant-collapse-content {
+          border-top: 0;
+        }
+        .ant-collapse-header {
           display: flex;
           align-items: center;
-          .titleimg {
+          height: 56px;
-            width: 20px;
+          background-color: rgba(240, 246, 252, 1);
-            height: 20px;
+          font-size: 16px;
-            margin-left: 23px;
+          color: rgba(51, 51, 51, 1);
-          }
+          font-weight: 500;
-          .titletext {
-            color: rgba(51, 51, 51, 1);
-            font-size: 16px;
-            font-weight: 500;
-            margin-left: 16px;
-          }
         }
         .rowclass {
           height: 81px;

src/views/learningpath/LevelAdd.vue

@@ -525,12 +525,13 @@
         </a-tab-pane>
         <a-tab-pane key="3" tab="学员管理" force-render>
           <TableStudent
+            v-if="isreload"
             :type="2"
             :id="routerId"
             :stage="stage"
             :columns="tableDataFunc()"
           >
-          <!-- <template #extension="{ data: { record } }">
+          <template #extension="{ data: { record } }">
             <div style="display: flex">
               <div
                 @click="showStudent(record)"
@@ -557,7 +558,43 @@
                 调整
               </div>
             </div>
-          </template> -->
+          </template>
+        </TableStudent>
+        <TableStudent
+            v-else
+            :type="2"
+            :id="routerId"
+            :stage="stage"
+            :columns="tableDataFunc()"
+          >
+          <template #extension="{ data: { record } }">
+            <div style="display: flex">
+              <div
+                @click="showStudent(record)"
+                style="
+                  color: #4ea6ff;
+                  font-size: 14px;
+                  text-align: center;
+                  margin-left: 20px;
+                  cursor: pointer;
+                "
+              >
+                查看
+              </div>
+              <div 
+                @click="setLevels(record)"
+                style="
+                  color: #4ea6ff;
+                  font-size: 14px;
+                  text-align: center;
+                  margin-left: 20px;
+                  cursor: pointer;
+                "
+              >
+                调整
+              </div>
+            </div>
+          </template>
         </TableStudent>
         </a-tab-pane>
         <!-- 1211注释 待开放 -->
@@ -861,21 +898,21 @@
           </div>
           <div class="mid">
             <div class="inher">
-              <div class="cur">当前关卡：关卡2</div>
+              <div class="cur">当前关卡：{{ curLevelName }}</div>
               <div class="select">
                 <a-select
                   v-model:value="curLevel"
                   style="width: 100%"
                   placeholder="请选择关卡"
-                  :options="projectNameList4"
+                  :options="statess"
                   @change="selectProjectName4"
                   allowClear
                   showSearch
                 ></a-select>
               </div>
               <div class="btn">
-                <button class="sameb btn1">取消</button>
+                <button class="sameb btn1" style="cursor:pointer;"  @click="closeChangeModal">取消</button>
-                <button class="sameb btn2">确定</button>
+                <button class="sameb btn2" style="cursor:pointer;" @click="changeLevel">确定</button>
               </div>
             </div>
           </div>
@@ -1019,6 +1056,7 @@
       <!-- 学员管理查看抽屉 -->
       <check-stu
         v-model:CheckStuvisible="CheckStuvisible"
+        v-model:routerId="routerId"
         v-model:studentId="studentId"
       />
       <!-- 面授学员抽屉 -->
@@ -1269,7 +1307,7 @@
   </div>
 </template>
 <script>
-import { ref, reactive, toRefs, onMounted, createVNode, watch } from "vue";
+import { ref, reactive, toRefs, onMounted, createVNode, watch, defineEmits } from "vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import { message, Modal } from "ant-design-vue";
 // import PathAddStu from "../../components/drawers/pathStuAdd";
@@ -1295,13 +1333,14 @@ import { codeUrl } from "../../api/method";
 import TwoDimensionalCode from "../../components/TwoDimensionalCode.vue";
 import TableStudent from "@/components/student/TableStudent";
 // import * as student from "@/api/student";
-import { getStuPage } from "@/api/index1";
+import { getStuPage, moveStudent } from "@/api/index1";
 
 import RouterFaceTeachManage from "../../components/drawers/router/RouterFaceTeachManage";
 import RouterExaminationManage from "../../components/drawers/router/RouterExaminationManage";
 import RouterEvaluationManage from "../../components/drawers/router/RouterEvaluationManage";
 import RouterHomeworkManage from "../../components/drawers/router/RouterHomeworkManage";
 import RouterCommonManage from "../../components/drawers/router/RouterCommonManage";
+import { func } from "vue-types";
 
 export default {
   name: "LevelAdd",
@@ -1331,6 +1370,7 @@ export default {
     // const store = useStore();
     const state = reactive({
       stage: [],
+      statess: [],
       routerId: storage.get("routerId")
         ? JSON.parse(storage.get("routerId"))
         : null, //学习路径页面传的学习路径id
@@ -1434,7 +1474,9 @@ export default {
       sh: false,
       nodata: true,
       closeDeleteAll: false,
-      curLevel: "",
+      curLevel: undefined,
+      curLevelName: "",
+      curStuID:"",
       taskSyllabusActive: 0,
       //在线管理等页面传递参数
       showTimeText: "",
@@ -1516,6 +1558,7 @@ export default {
         location.href.indexOf("http://") !== -1
           ? "http://111.231.196.214:12016/"
           : location.href.slice(0, location.href.indexOf("/m")) + "/upload/",
+      isreload: true
     });
 
     const levelList = reactive({
@@ -1691,6 +1734,9 @@ export default {
       state.visible = true;
     };
     const closeChangeModal = () => {
+      state.curLevel = undefined;
+      state.curStuID = "";
+      state.curLevelName = "";
       state.visiblene = false;
     };
     const showAddStu = () => {
@@ -2146,6 +2192,10 @@ export default {
             id: e.chapterId,
             name: e.name,
           }));
+          state.statess = res.data.data.chapterList.map((e) => ({
+            value: e.chapterId,
+            label: e.name,
+          }));
           state.taskSyllabus = data;
           // for(let i in data) {
           //   state.taskSyllabus[i].name = data[i].name
@@ -2483,16 +2533,52 @@ export default {
     // 点击学员管理-查看学员操作
     function showStudent(record) {
       console.log(record)
-      state.Seevisible = true;
+      state.CheckStuvisible = true;
-      state.checkStuId = record.studentId;
+      state.studentId = record.studentId;
     }
 
     // 调整关卡
     function setLevels(record) {
       console.log(record)
+      state.curLevelName = record.currentStageName;
+      state.curStuID = record.id;
       state.visiblene = true;
     } 
 
+    // 选择要调整的关卡
+    function selectProjectName4(e){
+      console.log(e)
+      state.curLevel = e;
+    }
+
+    // 点击确定 调整关卡
+    function changeLevel() {
+      state.isreload = false;
+      if(!state.curLevel){
+        message.error("请选择关卡")
+        return
+      }
+      moveStudent({targetId: state.curLevel, ids: [state.curStuID]}).then(res => {
+        console.log(res)
+        state.visiblene = false;
+        message.destroy();
+        state.isreload = true;
+        message.success("调整关卡成功")
+        state.curLevel = undefined;
+        state.curStuID = "";
+        state.curLevelName = "";
+        getStudent();
+      }).catch(err=>{
+        console.log(err)
+        state.visiblene = false;
+        message.error("调整关卡失败");
+        state.isreload = true;
+        state.curLevel = undefined;
+        state.curStuID = "";
+        state.curLevelName = "";
+      })
+    }
+
     return {
       ...toRefs(state),
       ...toRefs(levelList),
@@ -2561,6 +2647,8 @@ export default {
       downloadFile,
       showStudent,
       setLevels,
+      selectProjectName4,
+      changeLevel
     };
   },
 };