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

合并

Browse Source
This commit is contained in:
songwc
2022-10-18 18:11:29 +08:00
parent 9f22658060 6dba42d3c5
commit 064cb3d1da
15 changed files with 3510 additions and 982 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,13 +56,7 @@
<div class="second">
<div
class="taskbox"
style="
background: linear-gradient(
180deg,
rgba(254, 243, 221, 1) 100%,
rgba(255, 250, 240, 1) 100%
);
"
style="background: linear-gradient(180deg, #fef3dd, #fffaf0)"
>
<div class="leftt">
<img src="../../assets/images/taskpage/left1.png" />
@@ -83,8 +77,8 @@
style="
background: linear-gradient(
180deg,
rgba(221, 234, 255, 1) 100%,
rgba(240, 248, 254, 1) 100%
rgba(221, 234, 255, 1),
rgba(240, 248, 254, 1)
);
"
>
@@ -108,8 +102,8 @@
style="
background: linear-gradient(
180deg,
rgba(229, 246, 236, 1) 100%,
rgba(238, 249, 243, 1) 100%
rgba(229, 246, 236, 1),
rgba(238, 249, 243, 1)
);
"
>
@@ -471,7 +465,131 @@
<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">
@@ -483,7 +601,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">
@@ -493,12 +611,12 @@
</div>
</div>
<div class="second2">
<div class="btn1">
<img src="../../assets/images/courseManage/search0.png" />
<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/reset1.png" />
<img src="../../assets/images/courseManage/reset2.png" />
<span class="btn2text">随机分组</span>
</div>
</div>
@@ -507,11 +625,190 @@
<div style="width: 90%">
<div class="grouptitle">
<div class="goodgruop">好好学习小组</div>
<div>...</div>
<div class="more">
<span
style="color: rgba(0, 0, 0, 0.45); 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.45); 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.45); 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.45); 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>
</div>
</a-tab-pane>
</a-tabs>
@@ -612,7 +909,85 @@
</div>
</a-modal>
</div>
<!-- 项目发布弹窗 -->
<!-- 概览（无数据）-项目发布弹窗 -->
<!-- 学员-创建小组弹窗 -->
<div>
<a-modal
v-model:visible="stugroup"
:title="null"
@ok="closeModal2"
:footer="null"
:closable="false"
wrapClassName="doublepro"
width="624px"
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.2) 100%
);
"
>
<div class="headerLeft" style="margin-left: 32px">
<span class="headerLeftText" style="font-size: 16px">创建小组</span>
</div>
<div style="cursor: pointer; margin-right: 32px" @click="closeModal2">
<img
style="width: 22px; height: 22px"
src="../../assets/images/basicinfo/close22.png"
/>
</div>
</div>
<div class="modalMain">
<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-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="in">
<a-input
v-model:value="value"
placeholder="请输入小组长"
style="border-radius: 8px; height: 40px"
/>
</div>
</div>
<div class="pubtn">
<a-button class="pubtn1" @click="closeModal2">取消</a-button>
<a-button class="pubtn2" @click="closeModal2">确定</a-button>
</div>
</div>
</a-modal>
</div>
<!-- 学员-创建小组弹窗 -->
</div>
</template>
<script>
@@ -627,17 +1002,155 @@ export default {
components: { TimeManage, FaceManage, FaceStu, ActiveAttendance, WorkManage },
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, //面授管理
FSvisible: false, //面授学员
AAvisible: false, //活动考勤
Wvisible: false, //作业管理
pubproject: false,
stugroup: false,
checked: false,
checked1: true,
checked2: false,
activeKey: "3",
activeKey1: "9",
activeKey1: "8",
});
const showModal = () => {
state.pubproject = true;
@@ -645,6 +1158,12 @@ export default {
const closeModal = () => {
state.pubproject = false;
};
const showModal2 = () => {
state.stugroup = true;
};
const closeModal2 = () => {
state.stugroup = false;
};
//新增
const showTime = () => {
console.log("点击管理");
@@ -672,6 +1191,8 @@ export default {
...toRefs(state),
showModal,
closeModal,
showModal2,
closeModal2,
showTime,
showFace,
showFS,
@@ -812,6 +1333,87 @@ export default {
}
}
}
.doublepro {
.ant-modal {
.ant-modal-body {
padding: 0;
.modalMain {
display: flex;
flex-direction: column;
align-items: center;
.name {
width: 78%;
// background-color: lightcoral;
display: flex;
justify-content: right;
margin-top: 32px;
align-items: center;
height: 40px;
// border: 1px solid black;
.inname {
color: #000000;
font-size: 14px;
margin-left: 7px;
}
.in {
margin-left: 14px;
width: 81%;
.ant-input {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 30px;
}
.ant-select {
border-radius: 5px;
// height: 120%;
width: 100%;
height: 40px;
.ant-select-selector {
border-radius: 8px;
// height: 120%;
width: 100%;
height: 40px;
}
}
}
}
.pubtn {
display: flex;
justify-content: center;
margin-top: 25px;
//margin-bottom: 29px;
.pubtn1 {
width: 100px;
height: 40px;
margin-right: 16px;
margin-bottom: 29px;
border: 1px solid #409eff;
border-radius: 4px;
color: rgba(78, 166, 255, 1);
font-size: 14px;
//line-height: 36px;
align-items: center;
background: rgba(255, 255, 255, 1);
}
.pubtn2 {
width: 100px;
height: 40px;
margin-bottom: 29px;
border: 1px solid #409eff;
border-radius: 4px;
color: #ffffff;
font-size: 14px;
align-items: center;
//line-height: 36px;
background: #409eff;
}
}
}
}
}
}
.taskpage {
width: 100%;
display: flex;
@@ -1244,9 +1846,9 @@ export default {
//height: 71px;
margin-left: 12px;
margin-right: 50px;
.icon {
//position: absolute;
}
// .icon {
// //position: absolute;
// }
.iconame {
//position: absolute;
color: #4f5156;
@@ -1328,15 +1930,26 @@ export default {
justify-content: space-between;
.groupleft {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: 32px;
.groupname {
height: 22px;
width: 70px;
color: #000000;
font-size: 14px;
}
.ant-input {
border-radius: 8px;
width: 264px;
height: 40px;
}
.ant-select-selector {
border-radius: 8px;
width: 264px;
height: 40px;
padding-top: 5px;
}
}
.groupright {
display: flex;
@@ -1402,7 +2015,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;
@@ -1414,8 +2027,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.85);
}
.ant-table-tbody > tr > td {
border-bottom: 1px solid #f0f6fc;
color: rgba(0, 0, 0, 0.65);
}
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;
@@ -1428,9 +2116,120 @@ export default {
margin-right: 20px;
.grouptitle {
display: flex;
justify-content: space-betwwen;
justify-content: space-between;
margin-top: 5px;
border-bottom: 1px solid rgba(232, 232, 232, 1);
.goodgruop {
color: rgba(0, 0, 0, 0.85);
font-size: 16px;
line-height: 36px;
font-weight: 600;
}
.more {
position: relative;
//margin-right: 30px;
height: 30px;
display: flex;
align-items: center;
.moreItems {
width: 76px;
height: 80px;
display: none;
background: #ffffff;
box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
// border-radius: 3px;
border: 0px solid #dcdcdc;
position: absolute;
left: -48px;
top: 30px;
z-index: 100;
cursor: pointer;
.sammo {
text-align: center;
margin-top: 12px;
cursor: pointer;
}
.sammo:hover {
color: #4ea6ff;
}
}
.moreItems:hover {
display: block;
}
}
@media screen and (max-width: 1240px) {
.line {
margin-right: 10px;
}
.img1 {
margin-right: 15px;
}
.img2 {
margin-right: 10px;
}
.return {
margin-right: 10px;
}
.pub {
margin-right: 10px;
}
.more {
margin-right: 10px;
}
}
.more:hover .moreArrow {
background-image: url("../../assets/images/navtop/up.png");
}
.more:hover .moreItems {
display: block;
}
}
.leader {
color: rgba(0, 0, 0, 1);
font-size: 14px;
margin-top: 16px;
//margin-left: 24px;
}
.grocenter {
display: flex;
margin-top: 14px;
.leader1 {
color: rgba(0, 0, 0, 1);
font-size: 14px;
width: 51px;
}
.ant-progress-outer {
width: 170px;
}
}
.grofooter {
display: flex;
justify-content: space-between;
cursor: pointer;
margin-top: 30px;
.ftext {
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;
}
}
}
}