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

feat:学习路径图添加学员的添加学员和导入学员功能 导入学员的弹窗样式

Browse Source
This commit is contained in:
dongwug
2022-10-25 12:11:44 +08:00
parent 0801690d2b
commit 4e09370508
3 changed files with 331 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/drawers/AddLevelImportStu.vue
View File

@@ -143,6 +143,7 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-shrink: 0;
// background-color: red; // background-color: red;
margin-bottom: 20px; margin-bottom: 20px;
.headerTitle { .headerTitle {

1
src/components/drawers/ImportStu.vue
View File

@@ -145,6 +145,7 @@ export default {
align-items: center; align-items: center;
// background-color: red; // background-color: red;
margin-bottom: 20px; margin-bottom: 20px;
flex-shrink: 0;
.headerTitle { .headerTitle {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;

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

@@ -368,80 +368,80 @@
</div> </div>
<div class="boom"> <div class="boom">
<div class="boomcen"> <div class="boomcen">
<div class="xwid"> <div class="xwid">
<div class="xin"> <div class="xin">
<div class="xheadb"> <div class="xheadb">
<button class="addx">添加学员</button> <button class="addx" @click="showAddStu">添加学员</button>
<!-- 点击抽屉组件在LevelAdd，此处没添加showAddStu、showImpStu --> <!-- 点击抽屉组件在LevelAdd，此处没添加showAddStu、showImpStu -->
<button class="addd">导入学员</button> <button class="addd" @click="showImpStu">导入学员</button>
<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> <div class="talk">
<div class="tableBox" style="margin-top: 30px"> <img class="im" src="../../assets/images/leveladd/gan.png" />
<a-table <div class="xu">
style="border: 1px solid #f2f6fe" <span class="yi">已选择</span>
:columns="tableDataFunc2()" <div style="width: 5px; display: inline-block"></div>
:scroll="{ y: 235 }" <span class="th">3</span>
:data-source="tableData2" <div style="width: 5px; display: inline-block"></div>
:loading="tableDataTotal === -1 ? true : false" <span class="yi">项</span>
expandRowByClick="true" <span class="zon">列表选项总数：</span>
@expand="expandTable" <span class="yi">5</span>
:pagination="false" <span class="yi">条</span>
: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="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>
<div class="pad"></div>
</div> </div>
<div class="pad"></div>
</div>
</div> </div>
</div> </div>
<div class="footbtn"> <div class="footbtn">
@@ -455,11 +455,17 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 添加学员抽屉 -->
<add-stu v-model:AddSvisible="AddSvisible" />
<!-- 导入学员抽屉 -->
<imp-stu v-model:AddImpStuvisible="AddImpStuvisible" />
</div> </div>
</template> </template>
<script> <script>
import { reactive, toRefs, onMounted, onUnmounted } from "vue"; import { reactive, toRefs, onMounted, onUnmounted } from "vue";
import AddStu from "../../components/drawers/AddLevelAddStu";
import ImpStu from "../../components/drawers/AddLevelImportStu";
const drawercolumns = [ const drawercolumns = [
{ {
title: "项目名称", title: "项目名称",
@@ -500,6 +506,10 @@ const drawercolumns = [
]; ];
export default { export default {
name: "LevelAddDetail", name: "LevelAddDetail",
components: {
AddStu,
ImpStu,
},
setup() { setup() {
const state = reactive({ const state = reactive({
level: [ level: [
@@ -784,6 +794,8 @@ export default {
tableDataTotal: 100, tableDataTotal: 100,
pageSize: 10, pageSize: 10,
visible: false, visible: false,
AddSvisible: false, //添加学员抽屉
AddImpStuvisible: false, //导入学员抽屉
modal: false, modal: false,
clos: false, clos: false,
stm_hs: false, stm_hs: false,
@@ -808,6 +820,12 @@ export default {
const afterVisibleChange = (bool) => { const afterVisibleChange = (bool) => {
console.log("visible", bool); console.log("visible", bool);
}; };
const showAddStu = () => {
state.AddSvisible = true;
};
const showImpStu = () => {
state.AddImpStuvisible = true;
};
const tableDataFunc = () => { const tableDataFunc = () => {
const columns = [ const columns = [
{ {
@@ -1051,6 +1069,8 @@ export default {
showModal, showModal,
closeModal, closeModal,
afterVisibleChange, afterVisibleChange,
showAddStu,
showImpStu,
drawercolumns, drawercolumns,
onSelectChange, onSelectChange,
changebgc, changebgc,
@@ -1648,275 +1668,275 @@ export default {
} }
} }
.xwid { .xwid {
position: relative; position: relative;
margin-top: 30px; margin-top: 30px;
display: flex; display: flex;
margin-bottom: 20px; margin-bottom: 20px;
.xin { .xin {
width: 100%; width: 100%;
.xheadb { .xheadb {
display: flex; display: flex;
.addx { .addx {
width: 130px; width: 130px;
height: 40px; height: 40px;
background: #4ea6ff; background: #4ea6ff;
border-radius: 8px; border-radius: 8px;
color: #fff; color: #fff;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
margin-right: 20px; margin-right: 20px;
} }
.addd { .addd {
width: 130px; width: 130px;
height: 40px; height: 40px;
background: #fff; background: #fff;
border-radius: 8px; border-radius: 8px;
border: 1px solid #4ea6ff; border: 1px solid #4ea6ff;
color: #4ea6ff; color: #4ea6ff;
cursor: pointer; cursor: pointer;
margin-right: 20px; margin-right: 20px;
} }
.select { .select {
.ant-select { .ant-select {
// //
// border: 0 !important; // border: 0 !important;
border-radius: 11px; border-radius: 11px;
.ant-select-selector { .ant-select-selector {
border: 1px solid #4ea6ff !important; border: 1px solid #4ea6ff !important;
.ant-select-selection-placeholder { .ant-select-selection-placeholder {
padding-left: 15px; padding-left: 15px;
color: #4ea6ff; color: #4ea6ff;
}
} }
} }
} }
} }
} .talk {
.talk { margin-top: 24px;
margin-top: 24px; margin-bottom: 11px;
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%; width: 100%;
// height: 20px; height: 50px;
// background-color: red; background: #f5faff;
border: 1px solid #4ea6ff;
// opacity: 0.22;
display: flex; display: flex;
justify-content: center; align-items: center;
position: absolute; .im {
bottom: 0px; width: 14px;
} height: 15px;
} margin-left: 27px;
} margin-top: -3px;
}
.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 { .xu {
width: 42px; height: 100%;
height: 24px; line-height: 50px;
border: 1px solid rgba(64, 158, 255, 1); margin-left: 13px;
border-radius: 4px; .yi {
color: #ffffff; color: #4f5156;
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; font-size: 14px;
padding: 0; }
color: #409eff; .zon {
text-align: center; color: #999ba3;
font-size: 14px;
margin-left: 34px;
}
.th {
color: #4ea6ff;
} }
} }
} }
} .tableBox {
.twomain { margin-bottom: 80px;
margin-left: 20px;
margin-top: 20px; .classify {
.ant-switch-checked { margin-left: 11px !important;
background-color: #5dc988; 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; color: #6f6f6f;
font-size: 14px; font-size: 14px;
// margin-top: 10px; .checkcon {
} position: relative;
.infor { .in {
margin-left: 38px; position: absolute;
margin-top: 10px; // margin-top: 10px;
color: #c7cbd2; left: 0;
font-size: 14px; top: 3px;
} }
.chooseshow { .yulan {
// background-color: red; // color: yellow;
margin-left: 38px; margin-left: 22px;
margin-top: 12px; // display: inline-block;
.fane { }
color: #6f6f6f; .yulan2 {
font-size: 14px; 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 { .twomain {
display: none; margin-left: 20px;
}
.btm {
margin-left: 38px;
margin-top: 20px; margin-top: 20px;
.bmo { .ant-switch-checked {
background-color: #5dc988;
}
.info {
margin-left: 10px;
color: #6f6f6f; color: #6f6f6f;
font-size: 14px; font-size: 14px;
// margin-top: 10px;
} }
.bmt { .infor {
margin-left: 38px;
margin-top: 10px;
color: #c7cbd2; color: #c7cbd2;
font-size: 14px; font-size: 14px;
margin-top: 3px;
} }
.chosecon { .chooseshow {
display: flex; // background-color: red;
margin-top: 6px; margin-left: 38px;
margin-bottom: 20px; margin-top: 12px;
.chose { .fane {
position: relative; color: #6f6f6f;
.inl { font-size: 14px;
position: absolute; }
top: 2px; }
} .choo {
.sh { display: none;
margin-left: 23px; }
color: #6f6f6f; .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 { .notable {
width: 100%; width: 100%;
height: 100%; height: 100%;