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

feat:学员路径图添加学员 学员无数据 创建关卡点击样式

Browse Source
This commit is contained in:
dongwug
2022-10-25 10:55:28 +08:00
parent c84a615a88
commit fab982d8f3
2 changed files with 595 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/learningpath/LevelAdd.vue
View File

@@ -540,8 +540,8 @@
</div>
</div>
</div>
<div class="pad"></div></div
></a-tab-pane>
<div class="pad"></div></div>
</a-tab-pane>
<a-tab-pane key="4" tab="设置">
<div class="split"></div>
<div class="sametab">

623
src/views/learningpath/LevelAddDetail.vue
View File

@@ -8,10 +8,18 @@
<div class="btnText" @click="showModal">添加关卡</div>
</div>
<div class="maincon" style="background-color: #fff">
<div class="item" v-for="item in level" :key="item.id">
<div
class="item"
:class="{ active: isActive == true }"
@click="changebgc"
v-for="item in level"
:key="item.id"
>
<div class="items1">
<div class="box_left">
<div class="script"><span style="font-size: 12px; color: #ffffff;">说明</span></div>
<div class="script">
<span style="font-size: 12px; color: #ffffff">说明</span>
</div>
<div class="imgIcon"></div>
</div>
<div class="box_right">
@@ -76,7 +84,7 @@
</div>
</div>
</a-modal>
<div class="right">
<div class="right" :style="{ display: gqxy_hs ? 'block' : 'none' }">
<div class="addhead">
<div class="filt">
<div class="le">
@@ -286,7 +294,7 @@
<div class="btn btn2">
<div class="btnText">确定</div>
</div>
<div class="btn btn1">
<div class="btn btn1" @click="gqxy_hShow">
<div class="btnText">下一步</div>
</div>
</div>
@@ -328,6 +336,125 @@
</a-drawer>
</div>
</div>
<div class="right" :style="{ display: gqxy_hs ? 'none' : 'block' }">
<div class="addhead">
<div class="filt">
<div class="le">
<div class="leftimg">
<img class="img" src="../../assets/px.jpg" />
</div>
<div class="imgfor">
<div class="forz">产品经理进阶路径</div>
<div class="fort">创建时间：2022-07-21 00:00</div>
</div>
</div>
<div class="rightt">
<div class="select">
<span>学习模式：</span>
<div class="inputbox">
<input type="text" placeholder="按学习时间解锁" />
<div class="bottonbox"><div class="btnText">切换模式</div></div>
</div>
</div>
<div class="line"></div>
<router-link to="/leveladd">
<div style="display: flex">
<img class="img2" src="../../assets/images/leveladd/back.png" />
<div class="return">返回</div>
</div>
</router-link>
</div>
</div>
</div>
<div class="boom">
<div class="boomcen">
<div class="xwid">
<div class="xin">
<div class="xheadb">
<button class="addx">添加学员</button>
<!-- 点击抽屉组件在LevelAdd，此处没添加showAddStu、showImpStu -->
<button class="addd">导入学员</button>
<button class="addd">批量删除</button>
</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">3</span>
<div style="width: 5px; display: inline-block"></div>
<span class="yi">项</span>
<span class="zon">列表选项总数：</span>
<span class="yi">5</span>
<span class="yi">条</span>
</div>
</div>
<div class="tableBox" style="margin-top: 30px">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tableDataFunc2()"
:scroll="{ y: 235 }"
:data-source="tableData2"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
@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
class="notable"
:style="{ display: stm_hs ? 'block' : '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>
</div>
<div class="pad"></div>
</div>
</div>
</div>
<div class="footbtn">
<div class="btnbox">
<div class="btn btn1" @click="gqxy_hShow">
<div class="btnText">上一步</div>
</div>
<div class="btn btn2">
<div class="btnText">保存</div>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -484,6 +611,80 @@ export default {
checkedd: false,
},
],
tableData2: [
{
key: 1,
name: "张三",
com: "产研部",
gang: "产品经理",
cur: "关卡2",
jin: "2/10",
time: "2022-07-15 14:00",
},
{
key: 2,
name: "张三",
com: "产研部",
gang: "产品经理",
cur: "关卡2",
jin: "2/10",
time: "2022-07-15 14:00",
},
{
key: 3,
name: "张三",
com: "产研部",
gang: "产品经理",
cur: "关卡2",
jin: "2/10",
time: "2022-07-15 14:00",
},
{
key: 4,
name: "张三",
com: "产研部",
gang: "产品经理",
cur: "关卡1",
jin: "2/10",
time: "2022-07-15 14:00",
},
{
key: 5,
name: "张三",
com: "产研部",
gang: "产品经理",
cur: "关卡1",
jin: "2/10",
time: "2022-07-15 14:00",
},
{
key: 6,
name: "张三",
com: "产研部",
gang: "产品经理",
cur: "关卡2",
jin: "2/10",
time: "2022-07-15 14:00",
},
{
key: 7,
name: "张三",
com: "产研部",
gang: "产品经理",
cur: "关卡2",
jin: "2/10",
time: "2022-07-15 14:00",
},
{
key: 8,
name: "张三",
com: "产研部",
gang: "产品经理",
cur: "关卡2",
jin: "2/10",
time: "2022-07-15 14:00",
},
],
drawertableData: [
{
key: 1,
@@ -589,6 +790,8 @@ export default {
value1: "",
value2: "",
selectedRowKeys: [],
isActive: false,
gqxy_hs: true,
});
const showDrawer = () => {
state.visible = true;
@@ -719,6 +922,95 @@ export default {
];
return columns;
};
const tableDataFunc2 = () => {
const columns = [
{
title: "姓名",
dataIndex: "name",
// width: "30%",
key: "name",
width: 60,
align: "left",
className: "classify",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (text) => {
return (
<div class="racona">
<span> {text.record.name}</span>
{/**
<div class="img"></div>
<a-checkbox class="ch" checked={text.record.checkedd}>
{text.record.lei}
</a-checkbox>
*/}
</div>
);
},
},
{
title: "部门",
dataIndex: "com",
// width: "30%",
key: "com",
width: 110,
align: "center",
className: "h",
},
{
title: "岗位",
dataIndex: "gang",
key: "gang",
width: 110,
align: "center",
className: "h",
},
{
title: "当前关卡",
dataIndex: "cur",
key: "cur",
width: 110,
align: "center",
className: "h",
},
{
title: "进度",
dataIndex: "jin",
key: "jin",
width: 110,
align: "center",
className: "h",
},
{
title: "开始时间",
dataIndex: "time",
key: "time",
width: 120,
align: "center",
className: "h",
},
{
title: "操作",
className: "h",
dataIndex: "opacation",
key: "opacation",
width: 140,
align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: () => {
return (
<div class="opa">
<div class="opacation">
<span style="color:#4EA6FF;cursor:pointer">删除</span>
</div>
</div>
);
},
},
];
return columns;
};
const onSelectChange = (selectedRowKeys) => {
console.log("selectedRowKeys changed: ", selectedRowKeys);
@@ -744,9 +1036,16 @@ export default {
document.getElementsByTagName("main")[0].style.boxShadow =
"0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
});
const changebgc = () => {
state.isActive = !state.isActive;
};
const gqxy_hShow = () => {
state.gqxy_hs = !state.gqxy_hs;
};
return {
...toRefs(state),
tableDataFunc,
tableDataFunc2,
showDrawer,
closeDrawer,
showModal,
@@ -754,6 +1053,8 @@ export default {
afterVisibleChange,
drawercolumns,
onSelectChange,
changebgc,
gqxy_hShow,
};
},
};
@@ -983,17 +1284,10 @@ export default {
width: 100%;
display: flex;
min-width: 933px;
// min-width: 1200px;
// overflow-x: hidden;
// min-width: 1400px;
// overflow: scroll;
background-color: rgba(245, 247, 250, 1);
.left {
margin-right: 20px;
width: 208px;
// height: 100%;
// flex: 1;
// height: 100%;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
display: flex;
@@ -1005,18 +1299,14 @@ export default {
font-size: 18px;
color: #363636;
}
// flex-wrap: wrap;
.btn {
margin-top: 20px;
// padding: 0px 26px 0px 26px;
height: 38px;
background: #fff6e8;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
// margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
@@ -1026,7 +1316,6 @@ export default {
font-size: 14px;
font-weight: 400;
color: #ffb64e;
// line-height: 38px;
margin-top: 4px;
margin-left: 5px;
}
@@ -1047,46 +1336,47 @@ export default {
width: 208px;
display: flex;
flex-direction: column;
align-items: center; // background-color: #bfa;
align-items: center;
.item {
width: 171px;
height: 83px;
background: rgba(255, 182, 78,.1);
background: rgba(255, 182, 78, 0.1);
border: 1px solid #ffb64e;
opacity: 0.45;
border-radius: 8px;
margin-bottom: 16px;
align-items: center;
padding: 16px;
opacity: .5;
.items1{
opacity: 0.5;
cursor: pointer;
.items1 {
margin-bottom: 12px;
display: flex;
align-items: center;
.box_left{
width:140px;
.box_left {
width: 140px;
display: flex;
align-items: center;
.script{
.script {
display: flex;
justify-content: center;
align-items: center;
width: 56px;
height: 24px;
background: #FFB64E;
background: #ffb64e;
border-radius: 6px;
margin-right: 12px;
white-space: nowrap;
}
.imgIcon{
.imgIcon {
width: 14px;
height: 14px;
background-image: url(@/assets/images/leveladd/edit.png);
background-size: 100% 100%;
}
}
.box_right{
.imgIcon{
.box_right {
.imgIcon {
width: 14px;
height: 14px;
background-image: url(@/assets/images/leveladd/z1.png);
@@ -1094,8 +1384,8 @@ export default {
}
}
}
.items2{
.name{
.items2 {
.name {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
@@ -1104,6 +1394,9 @@ export default {
}
}
}
.active {
opacity: 1;
}
}
}
}
@@ -1219,7 +1512,6 @@ export default {
width: 100%;
// height: 130px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
display: flex;
@@ -1261,6 +1553,7 @@ export default {
}
.boom {
width: 100%;
margin-top: 20px;
flex: 1;
background-color: #fff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
@@ -1352,6 +1645,276 @@ export default {
background: #f6f9fd;
}
}
.xwid {
position: relative;
margin-top: 30px;
display: flex;
margin-bottom: 20px;
.xin {
width: 100%;
.xheadb {
display: flex;
.addx {
width: 130px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
color: #fff;
border: 0;
cursor: pointer;
margin-right: 20px;
}
.addd {
width: 130px;
height: 40px;
background: #fff;
border-radius: 8px;
border: 1px solid #4ea6ff;
color: #4ea6ff;
cursor: pointer;
margin-right: 20px;
}
.select {
.ant-select {
//
// border: 0 !important;
border-radius: 11px;
.ant-select-selector {
border: 1px solid #4ea6ff !important;
.ant-select-selection-placeholder {
padding-left: 15px;
color: #4ea6ff;
}
}
}
}
}
.talk {
margin-top: 24px;
margin-bottom: 11px;
width: 100%;
height: 50px;
background: #f5faff;
border: 1px solid #4ea6ff;
// opacity: 0.22;
display: flex;
align-items: center;
.im {
width: 14px;
height: 15px;
margin-left: 27px;
margin-top: -3px;
}
.xu {
height: 100%;
line-height: 50px;
margin-left: 13px;
.yi {
color: #4f5156;
font-size: 14px;
}
.zon {
color: #999ba3;
font-size: 14px;
margin-left: 34px;
}
.th {
color: #4ea6ff;
}
}
}
.tableBox {
margin-bottom: 80px;
.classify {
margin-left: 11px !important;
padding-left: 9px !important;
}
.ant-checkbox-wrapper {
align-items: center;
margin-top: -2px;
}
.ant-table-selection-column {
padding: 0px !important;
padding-left: 38px !important;
}
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1);
}
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.pa {
left: 0;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
position: absolute;
bottom: 0px;
}
}
}
}
.Gcon {
display: flex;
.pad {
height: 100%;
width: 40px;
}
.Gin {
// background-color: #bfa;
margin-top: 30px;
.headone {
// background-color: red;
display: flex;
text-align: center;
.box {
width: 4px;
height: 20px;
background-color: #4ea6ff;
border-radius: 2px;
}
.onetitle {
margin-left: 15px;
color: #333333;
font-size: 14px;
}
.oneedi {
margin-left: 15px;
color: #4ea6ff;
cursor: pointer;
}
.twobtn {
display: flex;
.btnone {
width: 42px;
height: 24px;
border: 1px solid rgba(64, 158, 255, 1);
border-radius: 4px;
color: rgba(64, 158, 255, 1);
margin-left: 20px;
cursor: pointer;
}
.btntwo {
width: 42px;
height: 24px;
border: 1px solid rgba(64, 158, 255, 1);
border-radius: 4px;
color: #ffffff;
margin-left: 20px;
background: #409eff;
cursor: pointer;
}
}
}
.onemain {
margin-top: 20px;
margin-left: 55px;
color: #6f6f6f;
font-size: 14px;
.checkcon {
position: relative;
.in {
position: absolute;
// margin-top: 10px;
left: 0;
top: 3px;
}
.yulan {
// color: yellow;
margin-left: 22px;
// display: inline-block;
}
.yulan2 {
margin-left: 22px;
}
.ant-input-number {
height: 24px;
width: 24px;
margin: 10px;
border-radius: 4px;
border: 1px solid #6d7584;
.ant-input-number-input {
width: 100%;
height: 100%;
font-size: 14px;
padding: 0;
color: #409eff;
text-align: center;
}
}
}
}
.twomain {
margin-left: 20px;
margin-top: 20px;
.ant-switch-checked {
background-color: #5dc988;
}
.info {
margin-left: 10px;
color: #6f6f6f;
font-size: 14px;
// margin-top: 10px;
}
.infor {
margin-left: 38px;
margin-top: 10px;
color: #c7cbd2;
font-size: 14px;
}
.chooseshow {
// background-color: red;
margin-left: 38px;
margin-top: 12px;
.fane {
color: #6f6f6f;
font-size: 14px;
}
}
.choo {
display: none;
}
.btm {
margin-left: 38px;
margin-top: 20px;
.bmo {
color: #6f6f6f;
font-size: 14px;
}
.bmt {
color: #c7cbd2;
font-size: 14px;
margin-top: 3px;
}
.chosecon {
display: flex;
margin-top: 6px;
margin-bottom: 20px;
.chose {
position: relative;
.inl {
position: absolute;
top: 2px;
}
.sh {
margin-left: 23px;
color: #6f6f6f;
}
}
}
}
}
}
}
.notable {
width: 100%;
height: 100%;