hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-09 10:56:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wyx
2023-01-15 14:53:22 +08:00
parent e31b92188e
commit 042f55c1c1
3 changed files with 325 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/index1.js
View File

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

255
src/components/drawers/CheckStu.vue
View File

@@ -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="rowbox" @click="showProMess">
<div class="rowleft">{{ pro.name }}</div>
<!-- <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-radius: 6px;
.rowtitle {
height: 56px;
background: rgba(240, 246, 252, 1);
//border: 1px solid rgba(221, 238, 255, 1);
//border-radius: 6px;
.rowbox {
width: 64px;
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 {
width: 20px;
height: 20px;
margin-left: 23px;
}
.titletext {
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-weight: 500;
margin-left: 16px;
}
height: 56px;
background-color: rgba(240, 246, 252, 1);
font-size: 16px;
color: rgba(51, 51, 51, 1);
font-weight: 500;
}
.rowclass {
height: 81px;

110
src/views/learningpath/LevelAdd.vue
View File

@@ -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 btn2">确定</button>
<button class="sameb btn1" style="cursor:pointer;" @click="closeChangeModal">取消</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.checkStuId = record.studentId;
state.CheckStuvisible = true;
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
};
},
};