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

feat:学员管理

Browse Source
This commit is contained in:
岳佳鑫
2022-10-18 16:14:04 +08:00
parent 00ebdd7b72
commit de96a19a9b
6 changed files with 430 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,11 +57,7 @@
<div
class="taskbox"
style="
background: linear-gradient(
180deg,
rgba(254, 243, 221, 1) 100%,
rgba(255, 250, 240, 1) 100%
);
background: linear-gradient(180deg,#FEF3DD,#FFFAF0);
"
>
<div class="leftt">
@@ -81,11 +77,7 @@
<div
class="taskbox"
style="
background: linear-gradient(
180deg,
rgba(221, 234, 255, 1) 100%,
rgba(240, 248, 254, 1) 100%
);
background: linear-gradient(180deg,rgba(221, 234, 255, 1),rgba(240, 248, 254, 1));
"
>
<div class="leftt">
@@ -106,11 +98,7 @@
class="taskbox"
@click="showModal"
style="
background: linear-gradient(
180deg,
rgba(229, 246, 236, 1) 100%,
rgba(238, 249, 243, 1) 100%
);
background: linear-gradient(180deg,rgba(229, 246, 236, 1) ,rgba(238, 249, 243, 1));
"
>
<div class="leftt">
@@ -465,7 +453,94 @@
<div class="split"></div>
<div class="content3">
<a-tabs v-model:activeKey="activeKey1">
<a-tab-pane key="8" tab="学员管理">学员管理</a-tab-pane>
<a-tab-pane key="8" tab="学员管理">
<div class="group">
<div class="groupleft">
<div style="display: flex;align-items: center;margin-right: 10px;margin-bottom: 10px">
<div class="groupname" style="width: 42px">姓名：</div>
<a-input v-model:value="value" placeholder="请输入姓名" />
</div>
<div style="display: flex;align-items: center;margin-right: 10px;margin-bottom: 10px">
<div class="groupname">小组名称：</div>
<a-input v-model:value="value" placeholder="请输入小组名称" />
</div>
<div style="display: flex;align-items: center;margin-right: 10px;margin-bottom: 10px">
<div class="groupname" style="width: 42px">部门：</div>
<a-select v-model:value="value" placeholder="请选择部门" />
</div>
<div style="display: flex;align-items: center;margin-bottom: 10px">
<div class="groupname" style="width: 42px">学员：</div>
<a-select v-model:value="value" placeholder="是否为优秀学员" :options="goodstuList"/>
</div>
</div>
<div class="groupright">
<div class="btn1">
<img src="../../assets/images/courseManage/search0.png"/>
<span class="btn1text">搜索</span>
</div>
<div class="btn2">
<img src="../../assets/images/courseManage/reset1.png"/>
<span class="btn2text">重置</span>
</div>
</div>
</div>
<div class="second2" style="margin-top: 20px">
<div class="btn1" @click="showModal2">
<img src="../../assets/images/courseManage/add0.png"/>
<span class="btn1text">添加学员</span>
</div>
<div class="btn2">
<img src="../../assets/images/courseManage/reset2.png"/>
<span class="btn2text">导入学员</span>
</div>
<div class="btn2">
<img src="../../assets/images/projectadd/delete.png"/>
<span class="btn2text">批量删除</span>
</div>
</div>
<div class="talk">
<img class="im" src="../../assets/images/leveladd/gan.png" />
<div class="xu">
<span class="yi">已选择</span>
<div style="width: 5px; display: inline-block"></div>
<span class="th">2</span>
<div style="width: 5px; display: inline-block"></div>
<span class="yi">项</span>
<span class="zon">列表选项总计：</span>
<span class="yi">4</span>
<span class="yi">条</span>
</div>
<div class="clear">清空</div>
</div>
<div class="tab" style="margin: 20px 32px 0 32px">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tablecolumns"
:data-source="tabledata"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 1400, y: 350 }"
@expand="expandTable"
:pagination="false"
:row-selection="{
columnWidth: 30,
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
/>
<div class="pa">
<a-pagination
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
/>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="9" tab="小组管理" force-render>
<div class="group">
<div class="groupleft">
@@ -474,7 +549,7 @@
</div>
<div class="groupright">
<div class="btn1">
<img src="../../assets/images/courseManage/add0.png"/>
<img src="../../assets/images/courseManage/search0.png"/>
<span class="btn1text">搜索</span>
</div>
<div class="btn2">
@@ -485,11 +560,11 @@
</div>
<div class="second2">
<div class="btn1" @click="showModal2">
<img src="../../assets/images/courseManage/search0.png"/>
<img src="../../assets/images/courseManage/add0.png"/>
<span class="btn1text">创建小组</span>
</div>
<div class="btn2">
<img src="../../assets/images/courseManage/reset1.png"/>
<img src="../../assets/images/courseManage/reset2.png"/>
<span class="btn2text">随机分组</span>
</div>
</div>
@@ -513,12 +588,98 @@
</div>
<div class="grofooter">
<div class="ftext">组员名单 ></div>
<div></div>
<div class="peoples">
<div class="people1"><img src="../../assets/images/taskpage/people1.png"/></div>
<div class="people2"><img src="../../assets/images/taskpage/people2.png"/></div>
<div class="people3"><img src="../../assets/images/taskpage/people3.png"/></div>
<div class="people4"><img src="../../assets/images/taskpage/people4.png"/></div>
</div>
</div>
</div>
</div>
<div class="groupbox">
<div style="width: 90%">
<div class="grouptitle">
<div class="goodgruop">全能小组</div>
<div class="more">
<span style="color: rgba(0, 0, 0, 0.4500); cursor: pointer">. . .</span>
<div class="moreItems">
<div class="sammo">编辑</div>
<div class="sammo">删除</div>
</div>
</div>
</div>
<div class="leader">组长：小李</div>
<div class="grocenter">
<div class="leader1">进度</div>
<a-progress :percent="55" />
</div>
<div class="grofooter">
<div class="ftext">组员名单 ></div>
<div class="peoples">
<div class="people1"><img src="../../assets/images/taskpage/people1.png"/></div>
<div class="people2"><img src="../../assets/images/taskpage/people2.png"/></div>
<div class="people3"><img src="../../assets/images/taskpage/people3.png"/></div>
<div class="people4"><img src="../../assets/images/taskpage/people4.png"/></div>
</div>
</div>
</div>
</div>
<div class="groupbox">
<div style="width: 90%">
<div class="grouptitle">
<div class="goodgruop">宇宙第一最强小组</div>
<div class="more">
<span style="color: rgba(0, 0, 0, 0.4500); cursor: pointer">. . .</span>
<div class="moreItems">
<div class="sammo">编辑</div>
<div class="sammo">删除</div>
</div>
</div>
</div>
<div class="leader">组长：小李</div>
<div class="grocenter">
<div class="leader1">进度</div>
<a-progress :percent="55" />
</div>
<div class="grofooter">
<div class="ftext">组员名单 ></div>
<div class="peoples">
<div class="people1"><img src="../../assets/images/taskpage/people1.png"/></div>
<div class="people2"><img src="../../assets/images/taskpage/people2.png"/></div>
<div class="people3"><img src="../../assets/images/taskpage/people3.png"/></div>
<div class="people4"><img src="../../assets/images/taskpage/people4.png"/></div>
</div>
</div>
</div>
</div>
<div class="groupbox">
<div style="width: 90%">
<div class="grouptitle">
<div class="goodgruop">天天向上小组</div>
<div class="more">
<span style="color: rgba(0, 0, 0, 0.4500); cursor: pointer">. . .</span>
<div class="moreItems">
<div class="sammo">编辑</div>
<div class="sammo">删除</div>
</div>
</div>
</div>
<div class="leader">组长：小李</div>
<div class="grocenter">
<div class="leader1">进度</div>
<a-progress :percent="55" />
</div>
<div class="grofooter">
<div class="ftext">组员名单 ></div>
<div class="peoples">
<div class="people1"><img src="../../assets/images/taskpage/people1.png"/></div>
<div class="people2"><img src="../../assets/images/taskpage/people2.png"/></div>
<div class="people3"><img src="../../assets/images/taskpage/people3.png"/></div>
<div class="people4"><img src="../../assets/images/taskpage/people4.png"/></div>
</div>
</div>
</div>
</div>
</div>
</a-tab-pane>
@@ -555,11 +716,7 @@
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(
0deg,
rgba(78, 166, 255, 0) 0%,
rgba(78, 166, 255, 0.2) 100%
);
background: linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2) 100%);
"
>
<div class="headerLeft" style="margin-left: 32px">
@@ -625,13 +782,13 @@
:closable="false"
wrapClassName="doublepro"
width="624px"
height="476px"
height="332px"
>
<div class="modalHeader"
style="width: 100%;height: 68px;display: flex;align-items: center;justify-content: space-between;background:linear-gradient(0deg,rgba(78, 166, 255, 0) 0%,rgba(78, 166, 255, 0.2000) 100%)"
>
<div class="headerLeft" style="margin-left: 32px">
<span class="headerLeftText" style="font-size: 16px">创建多层项目</span>
<span class="headerLeftText" style="font-size: 16px">创建小组</span>
</div>
<div style="cursor: pointer;margin-right:32px" @click="closeModal2">
<img
@@ -648,28 +805,11 @@
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">项目名称:</div>
<div class="inname">小组名称:</div>
<div class="in">
<a-input
v-model:value="value"
show-count :maxlength="30"
placeholder="请输入项目名称"
style="border-radius: 8px"
/>
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">分类:</div>
<div class="in">
<a-select
v-model:value="value"
placeholder="四个养成"
placeholder="请输入小组名称"
style="border-radius: 8px;height: 40px"
/>
</div>
@@ -681,26 +821,11 @@
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">项目经理:</div>
<div class="in">
<a-input
v-model:value="value"
placeholder="请选择项目经理"
style="border-radius: 8px;height: 40px"
/>
</div>
</div>
<div class="name">
<div class="star" style="margin-top: -4px">
<img
style="width: 10px; height: 10px"
src="../../assets/images/basicinfo/asterisk.png"
/>
</div>
<div class="inname">资源归属:</div>
<div class="inname">小组长:</div>
<div class="in">
<a-input
v-model:value="value"
placeholder="请输入小组长"
style="border-radius: 8px;height: 40px"
/>
</div>
@@ -724,6 +849,143 @@ export default {
components: { TimeManage, FaceManage },
setup(){
const state = reactive({
goodstuList: [
{
id: 1,
value: "全部",
label: "全部",
},
{
id: 2,
value: "普通学员",
label: "普通学员",
},
{
id: 3,
value: "优秀学员",
label: "优秀学员",
},
],
tabledata: [
{
key: 1,
name: "小李",
bum: "产研部",
gangw: "产品经理",
group: "好好学习",
progress: "5/20",
diploma: "0",
stutime: "2022-10-31 23:12:00",
putin: "手动加入",
},
{
key: 2,
name: "小刘",
bum: "产研部",
gangw: "产品经理",
group: "天天向上",
progress: "5/20",
diploma: "0",
stutime: "2022-10-31 23:12:00",
putin: "手动加入",
},
{
key: 3,
name: "小王",
bum: "产研部",
gangw: "后端",
group: "好好学习",
progress: "5/20",
diploma: "0",
stutime: "2022-10-31 23:12:00",
putin: "手动加入",
},
{
key: 4,
name: "小赵",
bum: "产研部",
gangw: "前端",
group: "天天向上",
progress: "5/20",
diploma: "0",
stutime: "2022-10-31 23:12:00",
putin: "手动加入",
},
],
tablecolumns: [
{
title: "姓名",
dataIndex: "name",
key: "name",
width: 30,
align: "left",
className: "h",
},
{
title: "部门",
dataIndex: "bum",
key: "bum",
width: 40,
align: "center",
className: "h",
},
{
title: "岗位",
dataIndex: "gangw",
key: "gangw",
width: 40,
align: "center",
className: "h",
},
{
title: "所属小组",
dataIndex: "group",
key: "group",
width: 40,
align: "center",
className: "h",
},
{
title: "进度",
dataIndex: "progress",
key: "progress",
width: 40,
align: "center",
className: "h",
},
{
title: "证书",
dataIndex: "diploma",
key: "diploma",
width: 40,
align: "center",
className: "h",
},
{
title: "最近学习时间",
dataIndex: "stutime",
key: "stutime",
width: 50,
align: "center",
className: "h",
},
{
title: "加入方式",
dataIndex: "putin",
key: "putin",
width: 40,
align: "center",
className: "h",
},
{
title: "操作",
dataIndex: "operations",
key: "operations",
width: 60,
align: "center",
className: "h",
},
],
visible: false, //时间管理
FaceVisivle: false, //面授管理
pubproject: false,
@@ -732,7 +994,7 @@ export default {
checked1: true,
checked2: false,
activeKey: '3',
activeKey1: '9',
activeKey1: '8',
});
const showModal = () => {
state.pubproject = true;
@@ -1498,6 +1760,7 @@ export default {
justify-content: space-between;
.groupleft {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: 32px;
.groupname {
@@ -1511,6 +1774,12 @@ export default {
width: 264px;
height: 40px;
}
.ant-select-selector {
border-radius: 8px;
width: 264px;
height: 40px;
padding-top: 5px;
}
}
.groupright {
display: flex;
@@ -1576,7 +1845,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
margin-right: 32px;
margin-right: 16px;
border: 1px solid #409eff;
border-radius: 8px;
cursor: pointer;
@@ -1588,8 +1857,83 @@ export default {
}
}
}
.talk {
margin-top: 24px;
margin-left: 32px;
margin-right: 32px;
margin-bottom: 11px;
position: relative;
//width: 90%;
height: 40px;
background: #f5faff;
border: 1px solid #4ea6ff;
// opacity: 0.22;
display: flex;
align-items: center;
.im {
width: 14px;
height: 15px;
margin-left: 17px;
}
.xu {
height: 100%;
line-height: 40px;
margin-left: 13px;
.yi {
color: #4f5156;
font-size: 14px;
}
.zon {
color: #999ba3;
font-size: 14px;
margin-left: 34px;
}
.th {
color: #4ea6ff;
}
}
.clear {
cursor: pointer;
font-size: 14px;
color: #387DF7;
line-height: 24px;
position: absolute;
right: 20px;
}
}
.tab {
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1);
color: rgba(0, 0, 0, 0.8500);
}
.ant-table-tbody > tr > td {
border-bottom: 1px solid #F0F6FC;
color: rgba(0, 0, 0, 0.6500);
}
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: rgba(250, 250, 250, 1);
}
.pa {
// left: 0;
margin-top: 15px;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: right;
// position: absolute;
// bottom: 20px;
}
}
.groupmain {
display: flex;
flex-wrap: wrap;
margin-left: 32px;
.groupbox {
width: 264px;
@@ -1697,6 +2041,26 @@ export default {
color: rgba(56, 139, 225, 1);
font-size: 14px;
}
.peoples {
display: flex;
position: relative;
.people1 {
position: absolute;
right: 22px;
}
.people2 {
position: absolute;
right: 31px;
}
.people3 {
position: absolute;
right: 40px;
}
.people4 {
position: absolute;
right: 49px;
}
}
}
}
}