feat:增加项目管理页面

This commit is contained in:
lixg
2023-01-03 15:51:13 +08:00
parent bf09b793db
commit 80e3fc6477
4 changed files with 331 additions and 315 deletions

View File

@@ -1,317 +1,316 @@
<template> <template>
<a-drawer <a-drawer
:visible="eScorevisible" :visible="eScorevisible"
class="drawerStyle ExportScore" class="drawerStyle ExportScore"
placement="right" placement="right"
width="700px" width="700px"
@after-visible-change="afterVisibleChange" @after-visible-change="afterVisibleChange"
> >
<div class="drawerMain"> <div class="drawerMain">
<div class="header"> <div class="header">
<div class="headerTitle">导入成绩</div> <div class="headerTitle">导入成绩</div>
<img <img
style="width: 29px; height: 29px; cursor: pointer" style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png" src="../../assets/images/basicinfo/close.png"
@click="closeDrawer" @click="closeDrawer"
/> />
</div>
<div class="main">
<div class="minatitl">
<div class="up1">请下载</div>
<div class="up2">模板</div>
<div class="up1">按要求填写数据并导入</div>
</div> </div>
<div class="main"> <div class="upload">
<div class="minatitl"> <div class="text">上传</div>
<div class="up1">请下载</div> <div class="right">
<div class="up2">模板</div> <div class="load">
<div class="up1">按要求填写数据并导入</div> <div class="cloud"></div>
</div> <div class="tip">点击或将文件拖拽到此处上传</div>
<div class="upload"> <div class="tipz">支持扩展名.xls/.xlsx</div>
<div class="text">上传</div> </div>
<div class="right"> <div class="loadstate">
<div class="load"> <div class="loadborder">
<div class="cloud"></div> <div class="content">
<div class="tip">点击或将文件拖拽到此处上传</div> <div class="img"></div>
<div class="tipz">支持扩展名.xls/.xlsx</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>
<div class="loadstate"> <div class="loadborder">
<div class="loadborder"> <div class="content">
<div class="content"> <div class="img"></div>
<div class="img"></div> <div class="timebox">
<div class="timebox"> <div class="timetop">
<div class="timetop"> <div class="tit">京东方商业模型.xls</div>
<div class="tit">京东方商业模型.xls</div> <div class="statedefeat">上传失败</div>
<div class="stateloading">正在上传</div>
</div>
<div class="prog">
<div class="inprogloading"></div>
</div>
</div> </div>
<div class="curloading"> <div class="prog">
<div class="cur">55%</div> <div class="inprogdefeat"></div>
<div class="cancel" style="margin-left: 20px">暂停</div>
<div class="cancel" style="margin-left: 15px">取消</div>
</div> </div>
</div> </div>
</div> <div class="curloading">
<div class="loadborder"> <div class="cur">55%</div>
<div class="content"> <div class="cancel" style="margin-left: 20px">暂停</div>
<div class="img"></div> <div class="cancel" style="margin-left: 15px">取消</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>
</div> </div>
<div class="defeat">下载失败数据</div>
</div> </div>
<div class="loadborder"> </div>
<div class="content"> <div class="loadborder">
<div class="img"></div> <div class="content">
<div class="timebox"> <div class="img"></div>
<div class="timetop"> <div class="timebox">
<div class="tit">京东方商业模型.xls</div> <div class="timetop">
<div class="statesucce">上传成功</div> <div class="tit">京东方商业模型.xls</div>
</div> <div class="statesucce">上传成功</div>
<div class="prog">
<div class="inprogsucce"></div>
</div>
</div> </div>
<div class="curloading"> <div class="prog">
<div class="cur">100%</div> <div class="inprogsucce"></div>
<div class="cancel" style="margin-left: 20px">删除</div>
</div> </div>
</div> </div>
<div class="curloading">
<div class="cur">100%</div>
<div class="cancel" style="margin-left: 20px">删除</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="btnn">
<button class="btn1">取消</button>
<button class="btn2">确定</button>
</div>
</div> </div>
</a-drawer> <div class="btnn">
</template> <button class="btn1">取消</button>
<button class="btn2">确定</button>
<script> </div>
import { reactive, toRefs } from "vue"; </div>
export default { </a-drawer>
name: "EScore", </template>
props: { <script>
eScorevisible: { import { reactive, toRefs } from "vue";
type: Boolean, export default {
default: false, name: "EScore",
}, props: {
eScorevisible: {
type: Boolean,
default: false,
}, },
setup(props, ctx) { },
const state = reactive({}); setup(props, ctx) {
const closeDrawer = () => { const state = reactive({});
ctx.emit("update:eScorevisible", false); const closeDrawer = () => {
}; ctx.emit("update:eScorevisible", false);
};
const afterVisibleChange = (bool) => { const afterVisibleChange = (bool) => {
console.log("state", bool); console.log("state", bool);
}; };
return { return {
...toRefs(state), ...toRefs(state),
afterVisibleChange, afterVisibleChange,
closeDrawer, closeDrawer,
}; };
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.ExportScore { .ExportScore {
.drawerMain { .drawerMain {
min-width: 600px; min-width: 600px;
margin: 0px 32px 0px 32px; margin: 0px 32px 0px 32px;
overflow-x: auto; overflow-x: auto;
display: flex;
flex-direction: column;
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
.header { align-items: center;
height: 73px; // background-color: red;
border-bottom: 1px solid #e8e8e8; margin-bottom: 20px;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
// margin-left: 24px;
}
}
.main {
overflow-y: auto;
.minatitl {
display: flex; display: flex;
justify-content: space-between; .up1 {
align-items: center; font-size: 16px;
// background-color: red; font-weight: 400;
margin-bottom: 20px;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333; color: #333333;
line-height: 25px; }
// margin-left: 24px; .up2 {
font-size: 16px;
font-weight: 400;
color: #4ea6ff;
margin-left: 4px;
} }
} }
.main { .upload {
overflow-y: auto; margin-top: 32px;
.minatitl { display: flex;
display: flex; .text {
.up1 { font-size: 14px;
font-size: 16px; font-weight: 400;
font-weight: 400; color: #333333;
color: #333333;
}
.up2 {
font-size: 16px;
font-weight: 400;
color: #4ea6ff;
margin-left: 4px;
}
} }
.upload { .right {
margin-top: 32px; margin-left: 6px;
display: flex; .load {
.text { width: 500px;
font-size: 14px; height: 176px;
font-weight: 400; background: #f5f9fd;
color: #333333; border-radius: 4px;
} // opacity: 0.3;
.right { border: 1px dashed #caddfd;
margin-left: 6px; display: flex;
.load { flex-direction: column;
width: 500px; align-items: center;
height: 176px; margin-bottom: 20px;
background: #f5f9fd; .cloud {
border-radius: 4px; margin-top: 52px;
// opacity: 0.3; width: 28px;
border: 1px dashed #caddfd; height: 28px;
display: flex; background-image: url(../../assets/images/basicinfo/cloud.png);
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);
}
.tip {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
margin-top: 15px;
cursor: pointer;
}
.tipz {
font-size: 14px;
font-weight: 400;
color: #999999;
margin-top: 10px;
}
} }
.loadstate { .tip {
font-size: 14px;
font-weight: 400;
color: #4ea6ff;
margin-top: 15px;
cursor: pointer;
}
.tipz {
font-size: 14px;
font-weight: 400;
color: #999999;
margin-top: 10px;
}
}
.loadstate {
width: 500px;
margin-bottom: 100px;
.loadborder {
width: 500px; width: 500px;
margin-bottom: 100px; height: 173px;
border-radius: 4px;
.loadborder { border: 1px dashed #eaeaea;
width: 500px; margin-bottom: 30px;
height: 173px; display: flex;
border-radius: 4px; align-items: center;
border: 1px dashed #eaeaea; .content {
margin-bottom: 30px;
display: flex; display: flex;
align-items: center; margin-left: 20px;
.content { position: relative;
display: flex; .defeat {
margin-left: 20px; position: absolute;
position: relative; left: 46px;
.defeat { top: 38px;
position: absolute; font-size: 14px;
left: 46px; font-weight: 500;
top: 38px; color: #ff7474;
font-size: 14px; }
font-weight: 500; .img {
color: #ff7474; width: 30px;
} height: 34px;
.img { background-image: url(../../assets/images/basicinfo/exl.png);
width: 30px; }
height: 34px; .timebox {
background-image: url(../../assets/images/basicinfo/exl.png); margin-left: 15px;
} margin-top: -5px;
.timebox { .timetop {
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: #4ea6ff;
}
.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: #4ea6ff;
}
//下载失败条
.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; display: flex;
.cur { width: 262px;
justify-content: space-between;
margin-bottom: 8px;
.tit {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
} }
.cancel { .stateloading {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #387df7; color: #4ea6ff;
} }
.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: #4ea6ff;
}
//下载失败条
.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 {
font-size: 14px;
font-weight: 400;
color: #387df7;
} }
} }
} }
@@ -319,38 +318,39 @@
} }
} }
} }
.btnn { }
height: 72px; .btnn {
width: 100%; height: 72px;
position: absolute; width: 100%;
position: absolute;
background-color: #fff;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff; background-color: #fff;
bottom: 0; cursor: pointer;
left: 0; }
display: flex; .btn2 {
align-items: center; cursor: pointer;
justify-content: center; width: 100px;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16); height: 40px;
.btn1 { background: #4ea6ff;
width: 100px; border-radius: 8px;
height: 40px; border: 0;
border: 1px solid #4ea6ff; margin-left: 15px;
border-radius: 8px; color: #fff;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
} }
} }
} }
</style> }
</style>

View File

@@ -426,6 +426,7 @@ export default {
> >
签到 签到
</a-checkbox> </a-checkbox>
{/**
<a-checkbox <a-checkbox
checked={value.signOut} checked={value.signOut}
onChange={(e) => { onChange={(e) => {
@@ -434,6 +435,7 @@ export default {
> >
签退 签退
</a-checkbox> </a-checkbox>
*/}
<a-checkbox <a-checkbox
checked={value.leave} checked={value.leave}
onChange={(e) => { onChange={(e) => {

View File

@@ -64,6 +64,9 @@
<div class="img2"></div> <div class="img2"></div>
<div class="wz">导出数据</div> <div class="wz">导出数据</div>
</div> </div>
<div class="btn btn2" @click="showEScoreModal">
<div class="wz">导入成绩</div>
</div>
</div> </div>
<!-- <div class="line"> <!-- <div class="line">
<div class="inline"> <div class="inline">
@@ -111,17 +114,21 @@
<button class="btn2">确定</button> <button class="btn2">确定</button>
</div> </div>
</div> </div>
<!-- 导出成绩抽屉 -->
<EScore v-model:eScorevisible="eScorevisible" />
</a-drawer> </a-drawer>
</template> </template>
<script> <script>
import { toRefs, reactive } from "vue"; import { toRefs, reactive } from "vue";
import { message } from "ant-design-vue"; import { message } from "ant-design-vue";
import EScore from "../ExportScore.vue";
// import * as api from "../../../api/index"; // import * as api from "../../../api/index";
export default { export default {
name: "ProjectExamManage", name: "ProjectExamManage",
components: {
EScore,
},
props: { props: {
TMvisible: { TMvisible: {
type: Boolean, type: Boolean,
@@ -161,7 +168,7 @@ export default {
}, },
], ],
selectedRowKeys: [], selectedRowKeys: [],
eScorevisible: false, //导入成绩抽屉
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
currentPage: 1, currentPage: 1,
@@ -274,6 +281,10 @@ export default {
message.destroy(); message.destroy();
message.success("催促" + props.title + "成功"); message.success("催促" + props.title + "成功");
}; };
//导入成绩
const showEScoreModal = () => {
state.eScorevisible = true;
};
//表头清空 //表头清空
const clearLine = () => { const clearLine = () => {
state.selectedRowKeys = []; state.selectedRowKeys = [];
@@ -287,6 +298,7 @@ export default {
onSelectChange, onSelectChange,
godie, godie,
clearLine, clearLine,
showEScoreModal,
}; };
}, },
}; };

View File

@@ -64,7 +64,7 @@
<div class="wz">导出作业</div> <div class="wz">导出作业</div>
</div> </div>
<div class="btn btn2"> <div class="btn btn2">
<div class="wz" @click="showEntryScore">入成绩</div> <div class="wz" @click="showEntryScore">入成绩</div>
</div> </div>
</div> </div>
<!-- <div class="line"> <!-- <div class="line">
@@ -117,7 +117,7 @@
<!-- 批量标注完成 --> <!-- 批量标注完成 -->
<ASOver v-model:ASOvervisible="ASOvervisible" /> <ASOver v-model:ASOvervisible="ASOvervisible" />
<!-- 录入成绩抽屉 --> <!-- 录入成绩抽屉 -->
<entry-scores v-model:Evisible="Evisible" /> <EScore v-model:eScorevisible="Evisible" />
<!-- 查看作业抽屉 --> <!-- 查看作业抽屉 -->
<CKWork v-model:CWvisible="CWvisible" /> <CKWork v-model:CWvisible="CWvisible" />
<!-- 查看答卷抽屉 --> <!-- 查看答卷抽屉 -->
@@ -130,15 +130,17 @@ import { message } from "ant-design-vue";
import ASOver from "../AllStuOver.vue"; import ASOver from "../AllStuOver.vue";
import CKWork from "../CheckWork.vue"; import CKWork from "../CheckWork.vue";
import CQue from "../CheckQue.vue"; import CQue from "../CheckQue.vue";
import EntryScores from "../EntryScores.vue"; // import EntryScores from "../EntryScores.vue";
import EScore from "../ExportScore.vue";
// import * as api from "../../../api/index"; // import * as api from "../../../api/index";
export default { export default {
name: "ProjectHomeWorkManage", name: "ProjectHomeWorkManage",
components: { components: {
EntryScores, // EntryScores,
CKWork, CKWork,
CQue, CQue,
ASOver, ASOver,
EScore,
}, },
props: { props: {
Wvisible: { Wvisible: {