feat:修改学习路径-项目弹窗选中

This commit is contained in:
李晓鸽
2022-10-25 16:58:56 +08:00
parent b99af0dcba
commit 17665c090b
5 changed files with 439 additions and 379 deletions

View File

@@ -1053,7 +1053,7 @@
<!-- 无数据样式 -->
<div
class="notable"
:style="{ display: stm_hs ? 'block' :'none' }"
:style="{ display: stm_hs ? 'block' : 'none' }"
>
<div class="notablebox">
<div class="boxbody">
@@ -1690,12 +1690,27 @@
style="margin-top: 400px"
@cancel="delete_exit"
>
<div class="delete" :style="{ display: delete_hs || copy_hs || nouse_hs ? 'block' : 'none' }">
<div
class="delete"
:style="{
display: delete_hs || copy_hs || nouse_hs ? 'block' : 'none',
}"
>
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="del-icon" :style="{ display: del_hs ? 'block' : 'none' }"><img src="@/assets/images/coursewareManage/notice.png" alt=""></div>
<div class="del-icon" :style="{ display: copy_hs || nouse_hs ? 'block' : 'none' }"><img src="@/assets/images/coursewareManage/QR.png" alt=""></div>
<div
class="del-icon"
:style="{ display: del_hs ? 'block' : 'none' }"
>
<img src="@/assets/images/coursewareManage/notice.png" alt="" />
</div>
<div
class="del-icon"
:style="{ display: copy_hs || nouse_hs ? 'block' : 'none' }"
>
<img src="@/assets/images/coursewareManage/QR.png" alt="" />
</div>
<span>提示</span>
<div class="close_exit" @click="delete_exit"></div>
</div>
@@ -2405,7 +2420,7 @@ export default defineComponent({
agreestudy_hs: false,
rejectstudy_hs: false,
delete_hs: false,
del_hs:false,
del_hs: false,
copy_hs: false,
nouse_hs: false,
// 二维码标题状态
@@ -2918,7 +2933,7 @@ export default defineComponent({
<div
onClick={() => {
state.delete_hs = true;
state.del_hs = true;
state.del_hs = true;
}}
>
删除
@@ -2996,11 +3011,15 @@ export default defineComponent({
{value.status === "已拒绝" ? (
<div class="nselect">
<div class="ops2">
<div class="jc"
onClick={() => {
<div
class="jc"
onClick={() => {
state.delete_hs = true;
state.del_hs = true;
}}>删除</div>
}}
>
删除
</div>
</div>
</div>
) : (
@@ -3412,7 +3431,7 @@ export default defineComponent({
}
}
.tableSelect {
margin-right: 10px;
// margin-right: 10px;
margin-left: -5px;
display: flex;
align-items: center;
@@ -4757,7 +4776,7 @@ export default defineComponent({
display: flex;
justify-content: center;
text-align: center;
margin:77px auto 109px auto;
margin: 77px auto 109px auto;
cursor: pointer;
position: relative;
.smallleft {
@@ -4833,7 +4852,7 @@ export default defineComponent({
}
}
.tableSelect {
margin-right: 10px;
// margin-right: 10px;
margin-left: -5px;
display: flex;
align-items: center;
@@ -5189,16 +5208,16 @@ export default defineComponent({
padding-left: 26px;
font-size: 16px;
.del-icon {
width: 16px;
height: 16px;
position: relative;
margin-right: 10px;
img{
width: 16px;
height: 16px;
position: relative;
margin-right: 10px;
img {
width: 100%;
height: 100%;
position: absolute;
top:0px;
left:0px;
top: 0px;
left: 0px;
background-size: 100% 100%;
}
}

View File

@@ -1,5 +1,5 @@
<template>
<div class="allCon">
<div class="leveladddetail">
<div class="left clearfix">
<div class="leftmain">
<div class="tit" style="margin-left: 18px">关卡</div>
@@ -319,7 +319,7 @@
</div>
<div class="drawerbox">
<a-table
:columns="drawercolumns"
:columns="drawertableColumns()"
:data-source="drawertableData"
:loading="tableDataTotal === -1 ? true : false"
:scroll="{ x: 700 }"
@@ -368,80 +368,79 @@
</div>
<div class="boom">
<div class="boomcen">
<div class="xwid">
<div class="xin">
<div class="xheadb">
<button class="addx">添加学员</button>
<!-- 点击抽屉组件在LevelAdd此处没添加showAddStushowImpStu -->
<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 class="xwid">
<div class="xin">
<div class="xheadb">
<button class="addx">添加学员</button>
<!-- 点击抽屉组件在LevelAdd此处没添加showAddStushowImpStu -->
<button class="addd">导入学员</button>
<button class="addd">批量删除</button>
</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 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: 20px">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tableDataFunc2()"
: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 class="pad"></div>
</div>
</div>
</div>
<div class="footbtn">
@@ -460,44 +459,7 @@
<script>
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
const drawercolumns = [
{
title: "项目名称",
dataIndex: "projectName",
key: "projectName",
width: 200,
// align: "center",
ellipsis: true,
// scopedSlots: { customRender: "action" }, //引入的插槽
// customRender: (text, record) => {
// console.log(text, record);
// return <span>{text.text}</span>;
// },
},
{
title: "项目经理",
dataIndex: "manager",
key: "manager",
width: 100,
align: "center",
},
{
title: "创建人",
dataIndex: "creater",
// width: "30%",
key: "creater",
width: 100,
align: "center",
},
{
title: "创建时间",
dataIndex: "time",
key: "time",
width: 180,
align: "center",
},
];
export default {
name: "LevelAddDetail",
setup() {
@@ -697,7 +659,6 @@ export default {
key: "1-1",
projectName: "管理者进阶-腾飞班",
manager: "黄华 刘俊",
creater: "毛继禹",
time: "2022-07-20 14:00:03",
children: [
@@ -792,6 +753,8 @@ export default {
selectedRowKeys: [],
isActive: false,
gqxy_hs: true,
projectChecked: null, //项目单选框
});
const showDrawer = () => {
state.visible = true;
@@ -1017,6 +980,82 @@ export default {
state.selectedRowKeys = selectedRowKeys;
};
const drawertableColumns = () => {
// let arr = state.drawertableData;
// function traverse(arr) {
// for (var a in arr) {
// // console.log(arr[a]);
// if (arr[a].children) {
// traverse(arr[a].children); //递归遍历
// } else {
// console.log(arr[a].children); //如果是值就显示
// }
// }
// }
// traverse(arr);
const drawercolumns = [
{
title: "项目名称",
dataIndex: "projectName",
key: "projectName",
width: 200,
// align: "center",
ellipsis: true,
// scopedSlots: { customRender: "action" }, //引入的插槽
customRender: (text) => {
// console.log(text.record.key);
if (!text.record.children) {
return (
<div style={{ display: "flex" }}>
<a-checkbox
checked={
state.projectChecked === text.record.key ? true : false
}
value={text.record.key}
onChange={() => {
// console.log("改变了", text.record.key);
if (state.projectChecked === text.record.key) {
state.projectChecked = null;
} else {
state.projectChecked = text.record.key;
}
}}
></a-checkbox>
<span style="margin-left: 5px">{text.text}</span>
</div>
);
} else {
return <span>{text.text}</span>;
}
},
},
{
title: "项目经理",
dataIndex: "manager",
key: "manager",
width: 100,
align: "center",
},
{
title: "创建人",
dataIndex: "creater",
// width: "30%",
key: "creater",
width: 100,
align: "center",
},
{
title: "创建时间",
dataIndex: "time",
key: "time",
width: 180,
align: "center",
},
];
return drawercolumns;
};
// const getClientHeight = () => {
// state.rightheight =
// document.getElementsByClassName("addhead")[0].offsetHeight +
@@ -1051,10 +1090,11 @@ export default {
showModal,
closeModal,
afterVisibleChange,
drawercolumns,
// drawercolumns,
onSelectChange,
changebgc,
gqxy_hShow,
drawertableColumns,
};
},
};
@@ -1280,7 +1320,7 @@ export default {
}
}
}
.allCon {
.leveladddetail {
width: 100%;
display: flex;
min-width: 933px;
@@ -1619,7 +1659,7 @@ export default {
}
.tableBox {
margin-top: 21px;
margin-bottom: 80px;
margin-bottom: 20px;
.classify {
margin-left: 10px !important;
padding-left: 9px !important;
@@ -1646,275 +1686,275 @@ export default {
}
}
.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;
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;
.talk {
margin-top: 24px;
margin-bottom: 11px;
width: 100%;
// height: 20px;
// background-color: red;
height: 50px;
background: #f5faff;
border: 1px solid #4ea6ff;
// opacity: 0.22;
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;
align-items: center;
.im {
width: 14px;
height: 15px;
margin-left: 27px;
margin-top: -3px;
}
.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%;
.xu {
height: 100%;
line-height: 50px;
margin-left: 13px;
.yi {
color: #4f5156;
font-size: 14px;
padding: 0;
color: #409eff;
text-align: center;
}
.zon {
color: #999ba3;
font-size: 14px;
margin-left: 34px;
}
.th {
color: #4ea6ff;
}
}
}
}
.twomain {
margin-left: 20px;
margin-top: 20px;
.ant-switch-checked {
background-color: #5dc988;
.tableBox {
margin-bottom: 20px;
.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;
}
}
.info {
margin-left: 10px;
}
}
.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;
// 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;
.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;
}
}
}
}
.choo {
display: none;
}
.btm {
margin-left: 38px;
.twomain {
margin-left: 20px;
margin-top: 20px;
.bmo {
.ant-switch-checked {
background-color: #5dc988;
}
.info {
margin-left: 10px;
color: #6f6f6f;
font-size: 14px;
// margin-top: 10px;
}
.bmt {
.infor {
margin-left: 38px;
margin-top: 10px;
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;
.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%;

View File

@@ -253,7 +253,7 @@
</div>
</div>
<!-- 无数据样式 -->
<div class="notable" style="display:none;">
<div class="notable" style="display: none">
<div class="notablebox">
<div class="boxbody">
<div class="boximg"></div>
@@ -269,7 +269,7 @@
</div>
</div>
<div class="rwbox">
<div class="talk">
<!-- <div class="talk">
<img class="im" src="../../assets/images/leveladd/gan.png" />
<div class="xu">
<span class="yi">已选择</span>
@@ -281,7 +281,7 @@
<span class="yi">5</span>
<span class="yi"></span>
</div>
</div>
</div> -->
<div class="tableBox">
<a-table
style="border: 1px solid #f2f6fe"
@@ -298,7 +298,7 @@
}"
/>
<div class="pa">
<!-- <div class="pa">
<a-pagination
showSizeChanger="true"
showQuickJumper="true"
@@ -308,7 +308,7 @@
:total="tableDataTotal"
class="pagination"
/>
</div>
</div> -->
</div>
</div>
@@ -1860,7 +1860,8 @@ export default {
}
}
.tableBox {
padding-bottom: 80px;
padding-bottom: 20px;
margin-top: 20px;
.classify {
margin-left: 10px !important;
padding-left: 9px !important;

View File

@@ -3769,7 +3769,7 @@ export default {
}
}
.tableSelect {
margin-right: 10px;
// margin-right: 10px;
margin-left: -5px;
display: flex;
align-items: center;

View File

@@ -144,7 +144,7 @@
@change="minChange"
/>
</div>
<div class="namebox" style="margin-left: -180px">
<div class="namebox">
<div class="inname">最高分</div>
</div>
<div class="in numberInp">