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

feat:新增学员管理列表操作渲染 操作删除弹窗 操作查看抽屉 项目积分获取规则

Browse Source
This commit is contained in:
dongwug
2022-10-22 14:10:02 +08:00
parent 5cc956e608
commit 02f57f4b62
2 changed files with 497 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
src/components/windows/DelWins.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<!--删除弹窗 -->
<a-modal
v-model:visible="delete_hs"
:footer="null"
:closable="closableQR"
wrapClassName="DelModal"
style="margin-top: 400px"
>
<div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="del-icon"></div>
<span>提示</span>
<div class="close_exit" @click="delete_exit"></div>
</div>
<div class="body">
<span>您确定要删除此课程吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="delete_exit">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="delete_exit">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!--删除弹窗 -->
</template>
<script>
import { toRefs, reactive, defineComponent } from "vue";
export default defineComponent({
name: "DelWins",
props: {
delete_hs: {
type: Boolean,
default: false,
},
},
setup() {
const state = reactive({
delete_hs: false,
closableQR: false,
})
const delete_exit = () => {
state.delete_hs = false;
}
return {
...toRefs(state),
delete_exit,
};
},
})
</script>
<style lang="scss" scope>
.DelModal {
.ant-modal {
.ant-modal-content {
width: 424px !important;
.ant-modal-body {
.delete {
z-index: 999;
width: 424px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.del-icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/notice.png);
background-size: 100% 100%;
}
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
}
}
</style>

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

@@ -820,7 +820,57 @@
</div> </div>
</div> </div>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="5" tab="项目积分"> Content of Tab Pane 3 </a-tab-pane> <a-tab-pane key="5" tab="项目积分">
<div class="split"></div>
<div class="content3">
<a-tabs v-model:activeKey="activeKey2">
<a-tab-pane key="1" tab="学员获取">
</a-tab-pane>
<a-tab-pane key="2" tab="榜单">
</a-tab-pane>
<a-tab-pane key="3" tab="获取规则">
<div class="projectscore">
<div class="pjc_body">
<div class="pjcb_header">
<span>规则</span>
<div class="edit_btn">
<div class="edit"></div>
<div class="btnText">编辑</div>
</div>
</div>
<div class="pjcb_content">
<div class="content content1">
<span>当前设计下，学员可以获得
<a-input
v-model:value="inputValue"
:maxlength="3"
style="width: 50px"
/>
积分</span>
</div>
<div class="content content2">
<span>完成【必修/选修】获得
<a-input
v-model:value="inputValue2"
:maxlength="3"
style="width: 50px"
/>
积分</span></div>
<div class="content content3">
<span>优秀学员可获得
<a-input
v-model:value="inputValue3"
:maxlength="3"
style="width: 50px"
/>
积分</span></div>
</div>
</div>
</div>
</a-tab-pane>
</a-tabs>
</div>
</a-tab-pane>
<a-tab-pane key="6" tab="排行榜"> <a-tab-pane key="6" tab="排行榜">
<div class="content6"> <div class="content6">
<div class="title">排行榜</div> <div class="title">排行榜</div>
@@ -1464,6 +1514,39 @@
</a-modal> </a-modal>
</div> </div>
<!-- 编辑弹窗 --> <!-- 编辑弹窗 -->
<!-- 删除弹窗 -->
<div>
<a-modal
v-model:visible="delete_hs"
:footer="null"
:closable="closableQR"
wrapClassName="DelModal"
style="margin-top: 400px"
>
<div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="del-icon"></div>
<span>提示</span>
<div class="close_exit" @click="delete_exit"></div>
</div>
<div class="body">
<span>您确定要删除此课程吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="delete_exit">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="delete_exit">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
<!-- 删除弹窗 -->
</div> </div>
</template> </template>
<script> <script>
@@ -1668,6 +1751,7 @@ export default {
Seevisible: false, //查看学员 Seevisible: false, //查看学员
Changevisible: false, //学员换组 Changevisible: false, //学员换组
edit_hs: false, //编辑弹窗 edit_hs: false, //编辑弹窗
delete_hs:false, //删除弹窗
pubproject: false, pubproject: false,
stugroup: false, stugroup: false,
canclestu: false, canclestu: false,
@@ -1680,6 +1764,10 @@ export default {
radioV2: "", radioV2: "",
activeKey: "2", activeKey: "2",
activeKey1: "8", activeKey1: "8",
activeKey2: "3",
inputValue:5,
inputValue2:5,
inputValue3:5,
valueName: "", //排行榜输入姓名 valueName: "", //排行榜输入姓名
valueDate: "", //排行榜输入日期 valueDate: "", //排行榜输入日期
noticeChecked: true, noticeChecked: true,
@@ -2135,6 +2223,75 @@ export default {
//考试、测评页面传递参数 //考试、测评页面传递参数
showTestText: "", showTestText: "",
}); });
//学员学员管理渲染
const getTableDate = () => {
let datas = state.tabledata;
datas.map((value) => {
{
//单层项目
value.operations = (
<div class="operation">
<div class="nSelect">
<div class="nselect">
<div
class="jc"
onClick={() => {
// state.QR_hs = true;
// state.ftsQR_hs = true;
}}
>
优秀学员
</div>
<div class="jc"
onClick={() => {
state.Seevisible = true;
}}>查看</div>
<div class="tableSelect">
<a-select
style="width: 50px;margin-top:2px;margin-left:25px"
value="更多"
// options={state.projectNameList}
dropdownClassName="tabledropdown"
>
<a-select-option
value="换组"
label="换组"
style="padding-left:35px"
>
<div
onClick={() => {
// state.copy_hs = true;
}}
>
复制
</div>
</a-select-option>
<a-select-option
value="删除"
label="删除"
style="padding-left:35px"
>
<div
onClick={() => {
state.delete_hs = true;
}}
>
删除
</div>
</a-select-option>
</a-select>
</div>
</div>
</div>
</div>
);
}
});
state.tableData = datas;
};
getTableDate()
const showModal = () => { const showModal = () => {
state.pubproject = true; state.pubproject = true;
}; };
@@ -2231,6 +2388,9 @@ export default {
state.radioV2 = ""; state.radioV2 = "";
} }
}; };
const delete_exit = () => {
state.delete_hs = false;
};
return { return {
...toRefs(state), ...toRefs(state),
showModal, showModal,
@@ -2258,6 +2418,7 @@ export default {
edit_exit, edit_exit,
cloradio1, cloradio1,
cloradio2, cloradio2,
delete_exit,
}; };
}, },
}; };
@@ -3497,7 +3658,32 @@ export default {
justify-content: right; justify-content: right;
// position: absolute; // position: absolute;
// bottom: 20px; // bottom: 20px;
} }
.operation {
display: flex;
justify-content: center;
align-items: center;
color: #4ea6ff;
.nselect {
justify-content: center;
align-items: center;
display: flex;
.jc {
margin-left: 20px;
cursor: pointer;
white-space: nowrap;
}
}
.tableSelect {
margin-right: 10px;
margin-left: -5px;
display: flex;
align-items: center;
justify-content: right;
white-space: nowrap;
}
}
} }
.groupmain { .groupmain {
display: flex; display: flex;
@@ -3632,6 +3818,55 @@ export default {
} }
} }
} }
.projectscore{
.pjc_body{
margin-left:34px;
margin-right:34px;
.pjcb_header{
display: flex;
justify-content: space-between;
align-items: center;
margin:24px auto;
.edit_btn{
width: 100px;
// padding: 0px 26px 0px 26px;
height: 38px;
background: rgb(64, 158, 255);
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.edit {
width: 15px;
height: 15px;
background-image: url(@/assets/images/coursewareManage/export1.png);
background-size: 100% 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: rgb(255, 255, 255);
line-height: 36px;
margin-left: 5px;
}
}
}
.pjcb_content{
border: 1px solid #388BE1;
padding: 32px;
.pjcb_content :last-child{
margin-bottom:0px;
}
.content{
margin-bottom:24px;
}
}
}
}
} }
.content6 { .content6 {
width: 100%; width: 100%;
@@ -4019,4 +4254,104 @@ export default {
} }
} }
} }
.DelModal {
.ant-modal {
.ant-modal-content {
width: 424px !important;
.ant-modal-body {
.delete {
z-index: 999;
width: 424px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
position: absolute;
left: 50%;
top: 10%;
transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.del-icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/notice.png);
background-size: 100% 100%;
}
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
}
}
</style> </style>