feat:修改基础信息的任务大纲的操作

This commit is contained in:
李晓鸽
2022-10-21 16:52:07 +08:00
parent 3d43ef4203
commit ec011ff29b

View File

@@ -221,13 +221,145 @@
<span class="editext">编辑</span>
</router-link>
</div>
<div class="stage">
<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="course"
v-for="(item, key) in value.children"
:key="key"
>
<div class="first">
<div class="icon">
<img src="../../assets/images/leveladd/zai.png" />
</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>
</div>
<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 === '投票' ||
item.course === '活动'
? showTime
: item.course === '考试' || item.course === '测评'
? showTesk
: item.course === '面授'
? showFace
: item.course === '作业'
? showWork
: null
"
>
管理
</div>
</div>
</div>
</a-collapse-panel>
</a-collapse>
</div>
<!-- <div class="stage">
<span class="stageimg"
><img src="../../assets/images/projectadd/open.png"
/></span>
<span class="stagename">阶段1腾飞班阶级1</span>
</div>
<div class="course">
</div> -->
<!-- <div class="course">
<div class="first">
<div class="icon">
<img src="../../assets/images/leveladd/zai.png" />
@@ -448,7 +580,7 @@
><img src="../../assets/images/projectadd/close.png"
/></span>
<span class="stagename">阶段2 腾飞班阶级2</span>
</div>
</div> -->
<div style="display: flex; height: 20px"></div>
</a-tab-pane>
<a-tab-pane key="3" tab="学员">
@@ -1215,6 +1347,7 @@
</template>
<script>
import { reactive, toRefs } from "vue";
// import { CaretRightOutlined } from "@ant-design/icons-vue";
import TimeManage from "../../components/drawers/TimeManage";
import FaceManage from "../../components/drawers/FaceManage";
import SubsetManage from "../../components/drawers/SubsetManage";
@@ -1229,6 +1362,7 @@ import SeeStu from "../../components/drawers/SeeStu";
export default {
name: "taskPage",
components: {
// CaretRightOutlined,
TimeManage,
FaceManage,
SubsetManage,
@@ -1406,7 +1540,7 @@ export default {
TMvisible: false, //考试管理
Stuvisible: false, //添加学员
Importvisible: false, //导入学员
Seevisible: true, //查看学员
Seevisible: false, //查看学员
pubproject: false,
stugroup: false,
checked: false,
@@ -1414,7 +1548,7 @@ export default {
checked2: false,
checkedd: false, //设置按钮1
checkedd2: false, //设置按钮2
activeKey: "1",
activeKey: "2",
activeKey1: "8",
valueName: "", //排行榜输入姓名
valueDate: "", //排行榜输入日期
@@ -1742,6 +1876,129 @@ export default {
className: "h",
},
],
//任务大纲列表
taskSyllabus: [
{
text: "阶段1腾飞班阶段1",
children: [
{
course: "在线",
name: "时间管理",
classify: "选修",
beginTime: "2022-09-10 14:03",
total: 50, //总人数
complete: 20, //完成人数
percent: 40,
},
{
course: "直播",
name: "管理直播间",
classify: "必修",
beginTime: "2022-09-12 14:03",
total: 50, //总人数
complete: 10, //完成人数
percent: 20,
},
{
course: "面授",
name: "管理面授课",
classify: "必修",
beginTime: "2022-09-16 14:03",
total: 80, //总人数
complete: 0, //完成人数
percent: 0,
},
{
course: "活动",
name: "管理活动",
classify: "必修",
beginTime: "2022-09-16 14:03",
total: 50, //总人数
complete: 40, //完成人数
percent: 80,
},
{
course: "作业",
name: "管理者作业",
classify: "选修",
beginTime: "2022-09-16 14:03",
total: 50, //总人数
complete: 30, //完成人数
percent: 60,
},
{
course: "考试",
name: "管理者考试",
classify: "必修",
beginTime: "2022-09-16 14:03",
total: 50, //总人数
complete: 50, //完成人数
percent: 100,
},
{
course: "案例",
name: "管理直播间",
classify: "必修",
beginTime: "2022-09-16 14:03",
total: 50, //总人数
complete: 10, //完成人数
percent: 20,
},
{
course: "外链",
name: "管理直播间",
classify: "必修",
beginTime: "2022-09-16 14:03",
total: 50, //总人数
complete: 10, //完成人数
percent: 20,
},
],
},
{
text: "阶段2腾飞班阶段2",
children: [
{
course: "讨论",
name: "时间管理",
classify: "选修",
beginTime: "2022-09-16 14:03",
total: 50, //总人数
complete: 20, //完成人数
percent: 40,
},
{
course: "测评",
name: "管理直播间",
classify: "必修",
beginTime: "2022-09-16 14:03",
total: 50, //总人数
complete: 10, //完成人数
percent: 20,
},
{
course: "调研",
name: "管理直播间",
classify: "必修",
beginTime: "2022-09-16 14:03",
total: 50, //总人数
complete: 10, //完成人数
percent: 20,
},
{
course: "投票",
name: "管理直播间",
classify: "必修",
beginTime: "2022-09-16 14:03",
total: 50, //总人数
complete: 10, //完成人数
percent: 20,
},
],
},
],
taskSyllabusActive: 0,
});
const showModal = () => {
state.pubproject = true;
@@ -2232,8 +2489,15 @@ export default {
.content {
//display: flex;
//margin: 0 37px;
.ant-tabs-top > .ant-tabs-nav::before,
.ant-tabs-bottom > .ant-tabs-nav::before,
.ant-tabs-top > div > .ant-tabs-nav::before,
.ant-tabs-bottom > div > .ant-tabs-nav::before {
border-bottom: 0px;
}
.ant-tabs-nav-wrap {
margin-left: 30px;
margin-top: 10px;
}
.onerow {
//width: 100%;
@@ -2262,7 +2526,7 @@ export default {
}
.edit {
position: absolute;
right: 48px;
right: 38px;
top: 0;
color: #409eff;
width: 100px;
@@ -2456,6 +2720,38 @@ export default {
}
}
}
.taskSyllabus {
.ant-collapse {
border: 0px;
background-color: rgba(255, 255, 255, 0);
}
.ant-collapse-content > .ant-collapse-content-box {
padding-top: 0px;
padding-bottom: 0px;
}
.ant-collapse > .ant-collapse-item {
border: 0px;
}
.ant-collapse-header {
display: flex;
height: 49px;
background-color: #eff4fc;
align-items: center;
margin-top: 20px;
margin-left: 38px;
margin-right: 40px;
font-size: 16px;
font-weight: 400;
color: #409eff;
line-height: 36px;
.ant-collapse-arrow {
margin-left: 15px !important;
}
}
.ant-collapse-content {
border-top: 0px;
}
}
.stage {
display: flex;
height: 49px;
@@ -2479,11 +2775,12 @@ export default {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 10px;
margin-left: 38px;
margin-right: 38px;
padding: 25px 0px;
margin-left: 22px;
margin-right: 24px;
//margin: 0 12px;
border: 1px solid #f2f6fc;
border-top: 0px;
.first {
//position: relative;
display: flex;