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

feat：合并

Browse Source
This commit is contained in:
dongwug
2022-10-22 11:46:55 +08:00
parent 876a2dfcd9 4de0713adb
commit b0f3b9d070
5 changed files with 743 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

507
src/views/projectcenter/TaskPage.vue
View File

@@ -209,154 +209,220 @@
<!-- 概览（有数据） -->
</a-tab-pane>
<a-tab-pane key="2" tab="任务" force-render>
<div class="split"></div>
<div class="onerow">
<div class="taskmain">任务大纲</div>
<button class="btn">批量面授报名</button>
<router-link to="/taskadd" class="edit">
<img
class="editimg"
src="../../assets/images/projectadd/edit.png"
/>
<span class="editext">编辑</span>
</router-link>
</div>
<div class="taskSyllabus">
<div style="flex: 1">
<div class="split"></div>
<!-- 无数据样式 -->
<div class="notable" style="display: none">
<div class="notablebox">
<div class="boxbody">
<div class="boximg"></div>
<div class="boxtitle">
<span style="color: #ffb64e; font-size: 20px">无课程</span>
</div>
<div class="boxtitle2">
<span style="color: #878b92">请点击新建开课，创建课程</span>
</div>
</div>
<div class="smallleft"></div>
<div class="smallright"></div>
</div>
</div>
<div class="onerow">
<div class="taskmain">任务大纲</div>
<button class="btn" @click="showFaceIn">批量面授报名</button>
<router-link to="/taskadd" class="edit">
<img
class="editimg"
src="../../assets/images/projectadd/edit.png"
/>
<span class="editext">编辑</span>
</router-link>
</div>
<!-- <div class="taskSyllabus">
<a-collapse v-model:activeKey="taskSyllabusActive" accordion>
<template #expandIcon="{ isActive }">
<img
:style="{
width: isActive ? 9.1 : 8.1,
height: isActive ? 8.1 : 9.1,
'margin-right': isActive ? '12px' : '13px',
}"
:src="
isActive
? require('../../assets/images/projectadd/open.png')
: require('../../assets/images/projectadd/close.png')
"
class="editimg"
src="../../assets/images/projectadd/edit.png"
/>
<div></div>
</template>
<a-collapse-panel
v-for="(value, index) in taskSyllabus"
:key="index"
:header="value.text"
>
<div
class="course"
v-for="(item, key) in value.children"
:key="key"
<span class="editext">编辑</span>
</router-link>
</div> -->
<div class="taskSyllabus">
<a-collapse v-model:activeKey="taskSyllabusActive" accordion>
<template #expandIcon="{ isActive }">
<img
:style="{
width: isActive ? 9.1 : 8.1,
height: isActive ? 8.1 : 9.1,
'margin-right': isActive ? '12px' : '13px',
}"
:src="
isActive
? require('../../assets/images/projectadd/open.png')
: require('../../assets/images/projectadd/close.png')
"
/>
<div></div>
</template>
<a-collapse-panel
v-for="(value, index) in taskSyllabus"
:key="index"
:header="value.text"
>
<div class="first">
<div class="icon">
<img src="../../assets/images/leveladd/zai.png" />
<div
class="course"
v-for="(item, key) in value.children"
:key="key"
>
<!-- :style="{width:item.course==='在线'?'28px':
height:item.course==='在线'?'27px':}" -->
<div class="first">
<div class="icon">
<div
style="
width: 31px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
"
>
<img
:src="
item.course === '在线'
? require('../../assets/images/leveladd/zai.png')
: item.course === '面授'
? require('../../assets/images/leveladd/mian.png')
: item.course === '案例'
? require('../../assets/images/leveladd/an.png')
: item.course === '作业'
? require('../../assets/images/leveladd/zuo.png')
: item.course === '考试'
? require('../../assets/images/leveladd/kao.png')
: item.course === '直播'
? require('../../assets/images/leveladd/zhi.png')
: item.course === '外链'
? require('../../assets/images/leveladd/wai.png')
: item.course === '讨论'
? require('../../assets/images/leveladd/tao.png')
: item.course === '活动'
? require('../../assets/images/leveladd/huo.png')
: item.course === '测评'
? require('../../assets/images/leveladd/ce.png')
: item.course === '调研'
? require('../../assets/images/leveladd/diao.png')
: item.course === '投票'
? require('../../assets/images/leveladd/tou.png')
: null
"
/>
</div>
</div>
<div>
<div class="iconame">「{{ item.course }}」</div>
<div class="icontext">{{ item.name }}</div>
</div>
</div>
<div>
<div class="iconame">「{{ item.course }}」</div>
<div class="icontext">{{ item.name }}</div>
</div>
</div>
<div class="type">
<div
:class="
item.classify == '必修' ? 'typename1' : 'typename'
"
>
{{ item.classify }}
</div>
</div>
<div class="time">
<div class="timetext">开始时间</div>
<div class="timetext">{{ item.beginTime }}</div>
</div>
<div class="progress">
<div class="progresstext">
{{ item.complete }}/{{ item.total }}人
</div>
<div style="display: flex">
<a-progress
:showInfo="false"
:percent="item.percent"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px"
>{{ item.percent }}%</span
<div class="type">
<div
:class="
item.classify == '必修' ? 'typename1' : 'typename'
"
>
{{ item.classify }}
</div>
</div>
</div>
<div class="operations">
<div
class="operation"
style="cursor: pointer"
:style="{
display: item.course === '面授' ? 'flex' : 'none',
}"
@click="showFS"
>
学员
<div class="time">
<div class="timetext">开始时间</div>
<div class="timetext">{{ item.beginTime }}</div>
</div>
<div
class="operation"
style="cursor: pointer"
@click="showAA"
:style="{
display:
item.course === '直播' || item.course === '活动'
? 'flex'
: 'none',
}"
>
考勤
<div class="progress">
<div class="progresstext">
{{ item.complete }}/{{ item.total }}人
</div>
<div style="display: flex">
<a-progress
:showInfo="false"
:percent="item.percent"
strokeColor="#FFC067"
trailColor="rgba(253, 209, 98, 0.2)"
/>
<span class="progresstext" style="margin-left: 10px"
>{{ item.percent }}%</span
>
</div>
</div>
<div
class="operation"
style="cursor: pointer"
:style="{
display:
<div class="operations">
<div
class="operation"
style="cursor: pointer"
:style="{
display: item.course === '面授' ? 'flex' : 'none',
}"
@click="showFS"
>
学员
</div>
<div
class="operation"
style="cursor: pointer"
@click="showAA"
:style="{
display:
item.course === '直播' || item.course === '活动'
? 'flex'
: 'none',
}"
>
考勤
</div>
<div
class="operation"
style="cursor: pointer"
:style="{
display:
item.course === '直播' ||
item.course === '活动' ||
item.course === '面授'
? 'flex'
: 'none',
}"
>
二维码
</div>
<div
class="operation"
style="cursor: pointer; margin-right: 35px"
@click="
item.course === '在线' ||
item.course === '案例' ||
item.course === '外链' ||
item.course === '讨论' ||
item.course === '直播' ||
item.course === '活动' ||
item.course === '面授'
? 'flex'
: 'none',
}"
>
二维码
</div>
<div
class="operation"
style="cursor: pointer; margin-right: 35px"
@click="
item.course === '在线' ||
item.course === '案例' ||
item.course === '外链' ||
item.course === '讨论' ||
item.course === '直播' ||
item.course === '调研' ||
item.course === '投票' ||
item.course === '活动'
? showTime(item.course, item.name)
: item.course === '考试' || item.course === '测评'
? showTest(item.course, item.name)
: item.course === '面授'
? showFace(item.course)
: item.course === '作业'
? showWork(item.course)
: null
"
>
管理
item.course === '调研' ||
item.course === '投票' ||
item.course === '活动'
? showTime(item.course, item.name)
: item.course === '考试' || item.course === '测评'
? showTest(item.course, item.name)
: item.course === '面授'
? showFace(item.course)
: item.course === '作业'
? showWork(item.course)
: null
"
>
管理
</div>
</div>
</div>
</div>
</a-collapse-panel>
</a-collapse>
<!-- 无数据创建任务 -->
<div
</a-collapse-panel>
</a-collapse>
<!-- 无数据创建任务 -->
<div
class="taskbox"
style="background: linear-gradient(180deg, #ddeaff, #f0f8fe);
display: none;"
style="background: linear-gradient(180deg, #ddeaff, #f0f8fe)"
>
<div class="leftt">
<img src="../../assets/images/taskpage/left2.png" />
@@ -372,9 +438,10 @@
</div>
<div class="centermain">点击创建项目任务</div>
</div>
<!-- 无数据创建任务 -->
<!-- 无数据创建任务 -->
</div>
<div style="display: flex; height: 20px"></div>
</div>
<div style="display: flex; height: 20px"></div>
</a-tab-pane>
<a-tab-pane key="3" tab="学员">
<div class="split"></div>
@@ -750,9 +817,7 @@
</div>
</div>
</a-tab-pane>
<a-tab-pane key="5" tab="项目积分">
Content of Tab Pane 3
</a-tab-pane>
<a-tab-pane key="5" tab="项目积分"> Content of Tab Pane 3 </a-tab-pane>
<a-tab-pane key="6" tab="排行榜">
<div class="content6">
<div class="title">排行榜</div>
@@ -987,6 +1052,8 @@
<work-manage v-model:Wvisible="Wvisible" />
<!-- 考试管理抽屉 -->
<test-manage v-model:TMvisible="TMvisible" :title="showTestText" />
<!-- 批量面授报名 -->
<task-imp-stu v-model:TaskFaceImpStuvisible="TaskFaceImpStuvisible" />
<!-- 概览（无数据）-项目发布弹窗 -->
<div>
@@ -1235,8 +1302,8 @@
</div>
<div class="lodalimg">
<div class="lodalcenter">
<span style="color:#448EF7;margin-right: 10px;">+</span>
<span style="color:#448EF7;">添加图片</span>
<span style="color: #448ef7; margin-right: 10px">+</span>
<span style="color: #448ef7">添加图片</span>
</div>
</div>
</div>
@@ -1411,6 +1478,7 @@ import StuAdd from "../../components/drawers/StuAdd";
import ImportStu from "../../components/drawers/ImportStu";
import SeeStu from "../../components/drawers/SeeStu";
import ChangeGroup from "../../components/drawers/ChangeGroup";
import TaskImpStu from "../../components/drawers/TaskFaceIn";
export default {
name: "taskPage",
components: {
@@ -1427,6 +1495,7 @@ export default {
ImportStu,
SeeStu,
ChangeGroup,
TaskImpStu,
},
setup() {
const state = reactive({
@@ -1612,6 +1681,7 @@ export default {
valueDate: "", //排行榜输入日期
noticeChecked: true,
noticeContent: "请输入要发布的公告",
TaskFaceImpStuvisible: false, //批量面授报名
//进度排行表
jindutabledata: [
@@ -2080,6 +2150,9 @@ export default {
const closeModal2 = () => {
state.stugroup = false;
};
const showFaceIn = () => {
state.TaskFaceImpStuvisible = true;
};
//新增
const showTime = (course, name) => {
console.log("点击管理");
@@ -2177,6 +2250,7 @@ export default {
showImportStu,
showSeeStu,
showChangeGroup,
showFaceIn,
edit_hShow,
edit_exit,
cloradio1,
@@ -2734,7 +2808,6 @@ export default {
background-color: #edf0f5;
}
.content {
//display: flex;
//margin: 0 37px;
.ant-tabs-top > .ant-tabs-nav::before,
.ant-tabs-bottom > .ant-tabs-nav::before,
@@ -2746,6 +2819,55 @@ export default {
margin-left: 30px;
margin-top: 10px;
}
.notable {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
.notablebox {
width: 412px;
height: 212px;
background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
border-radius: 10px;
display: flex;
justify-content: center;
text-align: center;
margin-top: 77px;
margin-bottom: 109px;
cursor: pointer;
position: relative;
.smallleft {
position: absolute;
top: 18px;
left: 0px;
width: 8px;
height: 21px;
border-radius: 0px 4px 4px 0px;
background-color: #ffb64e;
}
.smallright {
position: absolute;
bottom: 18px;
right: 0px;
width: 8px;
height: 21px;
border-radius: 4px 0px 0px 4px;
background-color: #ffb64e;
}
.boxbody {
.boximg {
width: 72px;
height: 72px;
margin: 32px auto 20px auto;
background-image: url(@/assets/images/coursewareManage/nostate.png);
background-size: 100% 100%;
}
.boxtitle {
margin-bottom: 4px;
}
}
}
}
.onerow {
//width: 100%;
display: flex;
@@ -2968,10 +3090,15 @@ export default {
}
}
.taskSyllabus {
// flex: 1;
overflow-x: scroll;
.ant-collapse {
border: 0px;
background-color: rgba(255, 255, 255, 0);
min-width: 1040px;
}
.ant-collapse-content > .ant-collapse-content-box {
padding-top: 0px;
padding-bottom: 0px;
@@ -3000,45 +3127,45 @@ export default {
}
}
.taskbox {
width: 412px;
height: 160px;
border-radius: 10px;
position: relative;
margin-left: 68px;
margin-bottom: 40px;
margin-top: 32px;
cursor: pointer;
.leftt {
position: absolute;
top: 18px;
left: 0;
}
.photo {
position: absolute;
top: 42px;
left: 37px;
}
.rightt {
position: absolute;
top: 69px;
right: 26px;
}
.centerbox {
position: absolute;
top: 52px;
left: 145px;
font-size: 20px;
font-weight: 700;
//line-height: 36px;
}
.centermain {
color: rgba(135, 139, 146, 1);
font-size: 14px;
position: absolute;
left: 144px;
bottom: 49px;
}
width: 412px;
height: 160px;
border-radius: 10px;
position: relative;
margin-left: 68px;
margin-bottom: 40px;
margin-top: 32px;
cursor: pointer;
.leftt {
position: absolute;
top: 18px;
left: 0;
}
.photo {
position: absolute;
top: 42px;
left: 37px;
}
.rightt {
position: absolute;
top: 69px;
right: 26px;
}
.centerbox {
position: absolute;
top: 52px;
left: 145px;
font-size: 20px;
font-weight: 700;
//line-height: 36px;
}
.centermain {
color: rgba(135, 139, 146, 1);
font-size: 14px;
position: absolute;
left: 144px;
bottom: 49px;
}
}
.stage {
display: flex;
height: 49px;
@@ -3059,12 +3186,15 @@ export default {
}
.course {
//width: 100%;
flex-shrink: 0;
margin-right: 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 25px 0px;
margin-left: 22px;
margin-right: 24px;
//margin: 0 12px;
border: 1px solid #f2f6fc;
border-top: 0px;
@@ -3081,12 +3211,13 @@ export default {
//position: absolute;
color: #4f5156;
font-size: 16px;
margin-left: 4px;
}
.icontext {
//positipn: absolute;
color: #999ba3;
font-size: 14px;
margin-left: 8px;
margin-left: 12px;
width: 83px;
}
}
@@ -3708,7 +3839,7 @@ export default {
.set_edit {
.ant-modal {
width: 866px !important;
height: 870px !important;
height: 870px !important;
.ant-modal-body {
.modalHeader {
background: linear-gradient(
@@ -3782,15 +3913,15 @@ export default {
margin-right: 5px;
}
}
.lodalimg{
width:120px;
height:120px;
border:1px dashed #387DF7;
.lodalimg {
width: 120px;
height: 120px;
border: 1px dashed #387df7;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.lodalimg{
.lodalimg {
display: flex;
white-space: nowrap;
}