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

feat:修改导入学员,添加学员,取消优秀

Browse Source
This commit is contained in:
岳佳鑫
2022-10-26 11:58:44 +08:00
parent 341180e57b
commit 1f4bb0fd2a
4 changed files with 459 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

473
src/components/drawers/ImportStu.vue
View File

@@ -3,7 +3,7 @@
:visible="Importvisible"
class="drawerStyle importstu"
placement="right"
width="70%"
width="800px"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
@@ -16,70 +16,90 @@
/>
</div>
<div class="main">
<div class="download">
<span class="placedown">请下载</span>
<span class="template">模板</span>
<span class="placedown">，按要求填写数据并导入</span>
</div>
<div class="upload">
<span class="uptext">上传:</span>
<div>
<!-- 导入学员上传 -->
<div class="upbox" style="display: none">
<div class="uploadimg"><img src="../../assets/images/taskpage/upload.png"/></div>
<div class="draghere">点击或将文件拖拽到此处上传</div>
<div class="support">支持扩展名：.xls/.xlsx</div>
</div>
<!-- 导入学员上传 -->
<!-- 导入学员上传（有状态）-正在上传 -->
<div class="alreadybox">
<div class="alimg"><img src="../../assets/images/studentimg/xls.png"/></div>
<div class="upproject">京东方商业模型.xls</div>
<div class="uping">正在上传</div>
<div class="progress">
<a-progress :percent="55" strokeColor="rgba(56, 139, 225, 1)"/>
</div>
<div class="state">
<span class="stop">暂停</span>
<span class="stop">取消</span>
</div>
</div>
<!-- 导入学员上传（有状态）-正在上传 -->
<div class="uploadstate">上传失败</div>
<!-- 导入学员上传（有状态）-上传失败 -->
<div class="alreadybox">
<div class="alimg"><img src="../../assets/images/studentimg/xls.png"/></div>
<div class="upproject">京东方商业模型.xls</div>
<div class="uping" style="color: #FF7474">上传失败</div>
<div class="progress">
<a-progress :percent="55" strokeColor="rgba(255, 116, 116, 1)" />
</div>
<div class="fail">下载失败数据</div>
<div class="state">
<span class="stop">重传</span>
<span class="stop">取消</span>
</div>
</div>
<!-- 导入学员上传（有状态）-上传失败 -->
<div class="uploadstate" style="margin-top: 74px">上传成功</div>
<!-- 导入学员上传（有状态）-上传成功 -->
<div class="alreadybox">
<div class="alimg"><img src="../../assets/images/studentimg/xls.png"/></div>
<div class="upproject">京东方商业模型.xls</div>
<div class="uping" style="color: #35AE69">上传成功</div>
<div class="progress">
<a-progress :percent="100" :show-info="false" strokeColor="rgba(87, 200, 135, 1)"/>
<span style="margin-left: 2px">100%</span>
</div>
<div class="state">
<span class="stop">删除</span>
</div>
</div>
<!-- 导入学员上传（有状态）-上传成功 -->
<div class="minatitl">
<div class="up1">请下载</div>
<div class="up2">模板</div>
<div class="up1">，按要求填写数据并导入</div>
</div>
<div class="upload">
<div class="text">上传：</div>
<div class="right">
<div class="load">
<div class="cloud"></div>
<div class="tip">点击或将文件拖拽到此处上传</div>
<div class="tipz">支持扩展名：.xls/.xlsx</div>
</div>
</div>
<div class="loadstate">
<div class="loadborder">
<div class="content">
<div class="img"></div>
<div class="timebox">
<div class="timetop">
<div class="tit">京东方商业模型.xls</div>
<div class="stateloading">正在上传</div>
</div>
<div class="prog">
<div class="inprogloading"></div>
</div>
</div>
<div class="curloading">
<div class="cur">55%</div>
<div class="cancel" style="margin-left: 20px">暂停</div>
<div class="cancel" style="margin-left: 15px">取消</div>
</div>
</div>
</div>
<div class="loadborder">
<div class="content">
<div class="img"></div>
<div class="timebox">
<div class="timetop">
<div class="tit">京东方商业模型.xls</div>
<div class="statedefeat">上传失败</div>
</div>
<div class="prog">
<div class="inprogdefeat"></div>
</div>
</div>
<div class="curloading">
<div class="cur">55%</div>
<div class="cancel" style="margin-left: 20px">重传</div>
<div class="cancel" style="margin-left: 15px">取消</div>
</div>
<div class="defeat">
<div class="detext">下载失败数据</div>
</div>
</div>
</div>
<div class="defeatbox">
<div class="lefimg"></div>
<div class="tacl">20条数据导入成功，5条数据导入失败</div>
</div>
<div class="loadborder">
<div class="content">
<div class="img"></div>
<div class="timebox">
<div class="timetop">
<div class="tit">京东方商业模型.xls</div>
<div class="statesucce">上传成功</div>
</div>
<div class="prog">
<div class="inprogsucce"></div>
</div>
</div>
<div class="curloading">
<div class="cur">100%</div>
<div class="cancel" style="margin-left: 20px">删除</div>
</div>
</div>
</div>
<div class="succebox">
<div class="lefimg"></div>
<div class="tacl">20条数据导入成功，5条数据导入失败</div>
</div>
</div>
</div>
</div>
</div>
<div class="btnn">
<button class="btn1">取消</button>
@@ -122,19 +142,9 @@ export default {
<style scoped lang="scss" >
.importstu {
.ant-drawer-content-wrapper {
// max-width: 1000px;
.ant-drawer-header {
display: none !important;
}
.ant-drawer-body {
padding: 0;
}
}
.drawerMain {
min-width: 600px;
min-width: 450px;
margin: 0px 32px 0px 32px;
overflow-x: scroll;
display: flex;
flex-direction: column;
.header {
@@ -143,9 +153,9 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
// background-color: red;
margin-bottom: 20px;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
@@ -155,126 +165,235 @@ export default {
}
}
.main {
.download {
display: flex;
.placedown {
color: rgba(51, 51, 51, 1);
font-size: 16px;
}
.template {
color: rgba(56, 139, 225, 1);
font-size: 16px;
cursor: pointer;
padding: 0 5px;
}
}
.upload {
overflow: scroll;
.minatitl {
display: flex;
margin-top: 27px;
.uptext {
color: rgba(51, 51, 51, 1);
font-size: 14px;
.up1 {
font-size: 16px;
font-weight: 400;
color: #333333;
}
.upbox {
position: relative;
.up2 {
font-size: 16px;
font-weight: 400;
color: #388be1;
margin-left: 4px;
}
}
.upload {
margin-top: 32px;
display: flex;
.text {
font-size: 14px;
font-weight: 400;
color: #333333;
white-space: nowrap;
}
.right {
margin-left: 6px;
.load {
cursor: pointer;
width: 500px;
height: 176px;
margin-left: 10px;
background: rgba(56, 139, 225, 0.1);
border: 1px dotted rgba(56, 139, 225, 0.2) ;
background: #f5f9fd;
border-radius: 4px;
cursor: pointer;
.uploadimg {
position: absolute;
width: 28px;
height: 28px;
top: 52px;
left: 236px;
// opacity: 0.3;
border: 1px dashed #caddfd;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
.cloud {
margin-top: 52px;
width: 28px;
height: 28px;
background-image: url(../../assets/images/basicinfo/cloud.png);
}
.draghere {
position: absolute;
top: 100px;
left: 159px;
color: rgba(56, 139, 225, 1);
font-size: 14px;
.tip {
font-size: 14px;
font-weight: 400;
color: #388be1;
margin-top: 15px;
cursor: pointer;
}
.support {
position: absolute;
left: 180px;
bottom: 24px;
color: rgba(153, 153, 153, 1);
font-size: 14px;
.tipz {
font-size: 14px;
font-weight: 400;
color: #999999;
margin-top: 10px;
}
}
.alreadybox {
}
.loadstate {
width: 500px;
height: 173px;
position: relative;
margin-left: 10px;
border: 1px dotted rgba(153, 153, 153, 1);
border-radius: 4px;
.fail {
position: absolute;
top: 113px;
left: 68px;
color: #FF7474;
font-size: 14px;
cursor: pointer;
}
.alimg {
width: 32px;
height: 34px;
position: absolute;
top: 66px;
left: 24px;
//background: green;
}
.upproject {
position: absolute;
top: 60px;
left: 68px;
color: rgba(51, 51, 51, 1);
font-size: 14px;
}
.uping {
position: absolute;
top: 60px;
left: 274px;
color: rgba(56, 139, 225, 1);
font-size: 14px;
}
.progress {
position: absolute;
margin-bottom: 100px;
.loadborder {
width: 500px;
height: 173px;
border-radius: 4px;
border: 1px dashed #eaeaea;
margin-bottom: 10px;
margin-top: 10px;
display: flex;
align-items: center;
.content {
display: flex;
width: 293px;
top: 82px;
left: 68px;
}
.state {
position: absolute;
top: 83px;
left: 399px;
.stop {
color: rgba(56, 125, 247, 1);
margin-left: 20px;
position: relative;
.defeat {
position: absolute;
left: 46px;
top: 42px;
font-size: 14px;
font-weight: 500;
width: 120px;
height: 32px;
border-radius: 2px;
border: 1px solid #387df7;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.detext {
font-size: 14px;
margin-right: 8px;
cursor: pointer;
font-weight: 400;
color: #387df7;
}
}
.img {
width: 30px;
height: 34px;
background-image: url(../../assets/images/basicinfo/exl.png);
}
.timebox {
margin-left: 15px;
margin-top: -5px;
.timetop {
display: flex;
width: 262px;
justify-content: space-between;
margin-bottom: 8px;
.tit {
font-size: 14px;
font-weight: 400;
color: #333333;
}
.stateloading {
font-size: 14px;
font-weight: 400;
color: #388be1;
}
.statedefeat {
font-size: 14px;
font-weight: 400;
color: #ff7474;
}
.statesucce {
font-size: 14px;
font-weight: 400;
color: #35ae69;
}
}
.prog {
width: 262px;
height: 5px;
background: #eaf1fe;
border-radius: 4px;
.inprogloading {
width: 55%;
height: 5px;
border-radius: 4px;
background: #388be1;
}
//下载失败条
.inprogdefeat {
width: 55%;
height: 5px;
border-radius: 4px;
background: #ff7474;
}
//下载成功条
.inprogsucce {
width: 100%;
height: 5px;
border-radius: 4px;
background: #57c887;
}
}
}
.curloading {
margin-left: 15px;
margin-top: 15px;
display: flex;
.cur {
font-size: 14px;
font-weight: 400;
color: #333333;
}
.cancel {
cursor: pointer;
font-size: 14px;
font-weight: 400;
color: #387df7;
}
}
}
}
.defeatbox {
width: 500px;
height: 40px;
background: rgba(255, 116, 116, 0.1);
border: 1px solid #ff7474;
display: flex;
align-items: center;
.lefimg {
width: 14px;
height: 14px;
margin-left: 17px;
margin-right: 8px;
background-image: url(../../assets/images/leveladd/nodone.png);
background-size: 100%;
}
.tacl {
font-size: 14px;
font-weight: 400;
color: #ff7474;
}
}
.succebox {
width: 500px;
height: 40px;
background: rgba(53, 174, 105, 0.1);
border: 1px solid #35ae69;
display: flex;
align-items: center;
.lefimg {
width: 14px;
height: 14px;
margin-left: 17px;
margin-right: 8px;
background-image: url(../../assets/images/leveladd/done.png);
background-size: 100%;
}
.tacl {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
}
}
}
}
.uploadstate {
margin-top: 28px;
margin-left: 75px;
color: rgba(51, 51, 51, 1);
font-size: 14px;
}
}
}
}
.btnn {
height: 72px;
width: 100%;
position: absolute;
background-color: #fff;
bottom: 0;
left: 0;
display: flex;