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

专业力必修提交

Browse Source
This commit is contained in:
Pengxiansen
2025-01-21 11:17:43 +08:00
parent d026a86ee5
commit 2b2d8aa377
39 changed files with 10077 additions and 6408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

532
src/components/growthpath/StudentSeeStu.vue Normal file
View File

@@ -0,0 +1,532 @@
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
<a-drawer
:visible="Seevisible"
class="drawerStyle seestu"
placement="right"
width="70%"
:zIndex="1005"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">查看</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<a-spin v-if="loading" :spinning="loading" />
<div v-if="!loading" class="main">
<div class="stuinfor">
<div style="display: flex; align-items: center">
<div class="portrait">
<img
style="width: 80px; height: 80px; border-radius: 50%"
v-if="info?.studentAvatar"
:src="
info?.studentAvatar.includes('upload')
? info?.studentAvatar
: '/upload' + info?.studentAvatar
"
alt=""
/>
<img v-else src="../../assets/images/studentimg/character.png" />
</div>
<div class="stumation">
<div class="stuname">{{ info.studentName }}</div>
<div class="stugangw">
{{ info.studentJobName }} —— {{ info.studentBandCode }}
</div>
</div>
</div>
<div style="display: flex; align-items: center; margin-right: 207px">
<!-- <div class="sortbox">
<div class="sortname">进度排名</div>
<div class="sortnub">
<span class="nub1">{{ info.processRankingOrder || 0 }}</span>
<span class="total">/{{ info.processRankingBase || 0 }}</span>
</div>
</div> -->
<!-- <a-divider type="vertical" style="
height: 49px;
margin-left: 34px;
background-color: rgba(170, 166, 166, 0.3);
"/> -->
<div class="sortbox" style="margin-left: 34px">
<div class="sortname">完成必修</div>
<div class="sortnub">
<span class="nub1">{{ info.finishReqTaskNum || 0 }}</span>
<span class="total">/{{ info.reqTaskNum || 0 }}</span>
</div>
</div>
</div>
</div>
<!-- <div class="secondrow">
<div class="rowleft">{{ info?.projectInfo?.name }}</div>
</div> -->
<div class="mainbox">
<div class="main_title">{{ info?.growName }}</div>
<a-collapse
style="border: 1px solid #ddeeff; border-radius: 6px"
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>
<div
class="rowclass"
v-for="(item, key) in info?.growStudentDetailTaskBoList"
:key="key"
>
<div class="leftclass">
<div>
<img
:src="
item.taskType === 1
? require('../../assets/images/leveladd/zai.png')
: item.taskType === 2
? require('../../assets/images/leveladd/mian.png')
: item.taskType === 3
? require('../../assets/images/leveladd/an.png')
: item.taskType === 4
? require('../../assets/images/leveladd/zuo.png')
: item.taskType === 5
? require('../../assets/images/leveladd/kao.png')
: item.taskType === 6
? require('../../assets/images/leveladd/zhi.png')
: item.taskType === 7
? require('../../assets/images/leveladd/wai.png')
: item.taskType === 8
? require('../../assets/images/leveladd/tao.png')
: item.taskType === 9
? require('../../assets/images/leveladd/huo.png')
: item.taskType === 10
? require('../../assets/images/leveladd/ce.png')
: item.taskType === 11
? require('../../assets/images/leveladd/diao.png')
: item.taskType === 12
? require('../../assets/images/leveladd/tou.png')
: item.taskType === 13
? require('../../assets/images/leveladd/xiangmu.png')
: null
"
/>
</div>
<div class="text1">{{ item.taskTypeName }}</div>
<div class="text2" :title="item.taskName">
{{ item.taskName }}
</div>
</div>
<div class="begin_time">
<div class="text1">开始时间</div>
<div class="text1">
{{ item?.taskBeginTime?.split(".")[0] || "-" }}
</div>
</div>
<div class="begin_time">
<div class="text1">完成时间</div>
<div class="text1">
{{ item?.taskFinishTime?.split(".")[0] || "-" }}
</div>
</div>
<div style="display: flex; align-items: center">
<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.taskFinishStatus === 2
? "进行中"
: item.taskFinishStatus === 1
? "已完成"
: "未开始"
}}
</div>
</div>
<!-- <div v-if="true" class="biit">
<div class="altext">标记已完成</div>
<div style="text-align: center;">
<a-switch size="small" v-model:checked="checked"/>
</div>
</div>
<div v-else style="width: 70px;"></div> -->
</div>
</div>
</a-collapse>
</div>
</div>
<div class="btnn">
<button class="btn2" @click="closeDrawer">关闭</button>
</div>
</div>
<pro-mess v-model:Provisible="Provisible" />
</a-drawer>
</template>
<script>
import { reactive, toRefs, watch } from "vue";
// import ProMess from "./ProMess.vue";
import { getGrowStudentDetail } from "@/api/growthpath";
import { message } from "ant-design-vue";
export default {
name: "SeeStu",
components: {},
props: {
Seevisible: {
type: Boolean,
default: false,
},
studentId: {
type: Number,
default: null,
},
growId: {
type: Number,
default: null,
},
certificateNum: {
type: Number,
default: null,
},
},
setup(props, ctx) {
const state = reactive({
checked: false,
loading: false,
info: {},
Provisible: false,
stageListActive: 0,
rank: {
total: 0,
current: 0,
finishCompulsoryNum: 0,
totalCompulsoryNum: 0,
certNum: 0,
},
});
watch([() => props.studentId, () => props.growId], () => {
check();
});
const closeDrawer = () => {
ctx.emit("update:Seevisible", false);
};
const showProMess = () => {
state.Provisible = true;
};
const check = () => {
state.loading = true;
props.growId &&
props.studentId &&
getGrowStudentDetail({ growId: props.growId, sid: props.studentId })
.then((res) => {
state.loading = false;
state.info = res.data.data;
})
.catch((err) => {
state.loading = false;
message.error(err.data.msg);
});
};
return {
...toRefs(state),
closeDrawer,
showProMess,
};
},
};
</script>
<style lang="scss" scoped>
.ant-switch-checked {
background-color: #5dc988;
}
.seestu {
.ant-drawer-content-wrapper {
// max-width: 1000px;
.ant-drawer-header {
display: none !important;
}
.ant-drawer-body {
padding: 0;
}
}
.drawerMain {
min-width: 600px;
margin: 0px 32px 0px 32px;
overflow-x: auto;
display: flex;
flex-direction: column;
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
// background-color: red;
margin-bottom: 20px;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
// margin-left: 24px;
}
}
.main {
display: flex;
flex-direction: column;
overflow-y: auto;
padding-bottom: 80px;
.stuinfor {
display: flex;
align-items: center;
justify-content: space-between;
height: 133px;
margin-top: 20px;
margin-right: 37px;
background-image: url("../../assets/images/studentimg/bgimg.png");
background-repeat: no-repeat;
background-position: right;
.stumation {
margin-left: 24px;
.stuname {
color: #333333;
font-size: 18px;
}
.stugangw {
color: #999999;
font-size: 16px;
margin-top: 7px;
}
}
.sortbox {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 114px;
.sortname {
color: #666660;
font-size: 14px;
}
.sortnub {
display: flex;
justify-content: center;
margin-top: 7px;
.nub1 {
color: #0060ff;
font-size: 22px;
}
.total {
color: #999999;
font-size: 22px;
}
}
}
}
.secondrow {
margin-top: 32px;
display: flex;
.rowleft {
color: rgba(51, 51, 51, 1);
font-size: 16px;
}
}
.mainbox {
// height: 463px;
margin-right: 37px;
margin-top: 32px;
//border: 1px solid rgba(221, 238, 255, 1);
//border-radius: 6px;
.main_title {
font-weight: 500;
font-size: 16px;
color: #333333;
margin-bottom: 17px;
}
.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;
height: 56px;
background-color: rgba(240, 246, 252, 1);
font-size: 16px;
color: rgba(51, 51, 51, 1);
font-weight: 500;
}
.rowclass {
height: 81px;
border-bottom: 1px solid rgba(221, 238, 255, 1);
display: flex;
justify-content: space-between;
align-items: center;
.begin_time {
min-width: 126px;
.text1 {
height: 22px;
font-weight: 400;
font-size: 14px;
color: #666666;
line-height: 22px;
}
}
.leftclass {
display: flex;
margin-left: 25px;
align-items: center;
.text1 {
color: #000000;
font-size: 14px;
font-weight: 500;
margin-left: 25px;
word-break: keep-all;
white-space: nowrap;
}
.text2 {
width: 170px;
max-width: 170px;
color: rgba(51, 51, 51, 0.8);
font-size: 14px;
margin-left: 65px;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.biit {
width: 70px;
margin-right: 27px;
.altext {
height: 22px;
font-weight: 400;
font-size: 14px;
color: #666666;
line-height: 22px;
}
}
.alreadyclass {
display: flex;
margin-right: 30px;
.alimg {
height: 16px;
width: 16px;
}
.altext {
color: rgba(56, 125, 247, 1);
font-size: 14px;
margin-left: 16px;
word-break: keep-all;
white-space: nowrap;
}
}
}
}
}
.btnn {
height: 72px;
width: 100%;
position: absolute;
bottom: 0;
background-color: #fff;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
</style>