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

feat:增加查看作业

Browse Source
This commit is contained in:
lixg
2023-01-29 14:27:05 +08:00
parent 9e979c2a06 1badfb721e
commit c2657cd812
9 changed files with 434 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
src/components/drawers/CheckWork.vue
View File

@@ -1,154 +1,188 @@
<template>
<a-drawer
<a-drawer
:visible="CWvisible"
class="drawerStyle CheckWork"
placement="right"
width="40%"
@after-visible-change="afterVisibleChange"
>
<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>
<div class="main">
<div class="basetext"><span>基础信息</span></div>
<div class="HW Name"><span>作业名称：</span ><span style="color:#999ba3">{{"管理者进阶作业"}}</span></div>
<div class="HW Need"><span>作业要求：</span ><span style="color:#999ba3">{{"写一篇观后感，字数600字"}}</span></div>
<div class="HWText">
<span>作业信息：</span>
<div class="hwText">
<img src="@/assets/images/projectadd/keep.png"/>
<div class="hwName">{{"京东方商业模型.jpeg"}}</div>
<div class="op"> <span>查看</span> </div>
<div class="op"> <span>下载</span> </div>
</div>
</div>
</div>
<div class="btnn">
<button class="btn1">取消</button>
<button class="btn2">确定</button>
</div>
>
<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>
<div class="main">
<div class="basetext"><span>基础信息</span></div>
<div class="HW Name">
<span>作业名称：</span
><span style="color: #999ba3">{{ workName }}</span>
</div>
</a-drawer>
<div class="HW Need">
<span>作业要求：</span
><span style="color: #999ba3">{{ workRequirement }}</span>
</div>
<div class="HWText">
<span>作业信息：</span>
<div class="hwText">
<img src="@/assets/images/projectadd/keep.png" />
<div class="hwName">{{ "京东方商业模型.jpeg" }}</div>
<div class="op"><span>查看</span></div>
<div class="op"><span>下载</span></div>
</div>
</div>
</div>
<div class="btnn">
<button class="btn1">取消</button>
<button class="btn2">确定</button>
</div>
</div>
</a-drawer>
</template>
<script>
import { toRefs,reactive } from '@vue/reactivity';
import { toRefs, reactive } from "@vue/reactivity";
import { queryWorkDetailById } from "@/api/indexWork";
export default {
name:"CheckWork",
props:{
CWvisible:{
type:Boolean,
default:false,
},
name: "CheckWork",
props: {
CWvisible: {
type: Boolean,
default: false,
},
setup(props,ctx){
const state = reactive({
workId: {
type: Number,
default: null,
},
},
setup(props, ctx) {
const state = reactive({
workName: null,
workRequirement: null,
});
const closeDrawer = () => {
ctx.emit("update:CWvisible", false);
state.workName = null;
state.workRequirement = null;
getWorkDetail();
};
const afterVisibleChange = (bool) => {
console.log(bool);
if (bool) {
getWorkDetail();
}
};
//获取作业详情
const getWorkDetail = () => {
queryWorkDetailById({ workId: props.workId })
.then((res) => {
console.log("获取作业详情", res);
if (res.data.code === 200) {
state.workName = res.data.data.workName;
state.workRequirement = res.data.data.workRequirement;
}
})
const closeDrawer = ()=> {
ctx.emit("update:CWvisible",false)
}
const afterVisibleChange = (bool) => {
console.log(bool);
}
return{
...toRefs(state),
closeDrawer,
afterVisibleChange,
}
}
.catch((err) => {
console.log("获取作业详情失败", err);
});
};
return {
...toRefs(state),
closeDrawer,
afterVisibleChange,
getWorkDetail,
};
},
};
</script>
<style lang="scss">
.CheckWork {
.drawerMain {
min-width: 400px;
margin: 0px 32px 0px 32px;
display: flex;
flex-direction: column;
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
}
}
.main {
width: 100%;
overflow-y: auto;
margin-bottom: 70px;
.basetext{
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-bottom: 27px ;
}
.HW{
margin-bottom: 20px;
}
.hwText{
display: flex;
align-items: center;
margin: 15px auto;
img{
background-size: 100% 100%;
}
.hwName{
margin:auto 10px;
}
.op{
color:#4ea6ff;
margin: auto 20px;
cursor: pointer;
}
}
}
.btnn {
height: 72px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: #fff;
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;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
.drawerMain {
min-width: 400px;
margin: 0px 32px 0px 32px;
display: flex;
flex-direction: column;
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
}
}
.main {
width: 100%;
overflow-y: auto;
margin-bottom: 70px;
.basetext {
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-bottom: 27px;
}
.HW {
margin-bottom: 20px;
}
.hwText {
display: flex;
align-items: center;
margin: 15px auto;
img {
background-size: 100% 100%;
}
.hwName {
margin: auto 10px;
}
.op {
color: #4ea6ff;
margin: auto 20px;
cursor: pointer;
}
}
}
.btnn {
height: 72px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: #fff;
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;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
</style>