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:
dongwug
2022-10-25 14:57:56 +08:00
parent ea09652967
commit 7558631bb4
2 changed files with 156 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/drawers/AddCase.vue
View File

@@ -79,11 +79,11 @@
const columns1 = [
{
title: "案例标题",
width: "35%",
width: "40%",
dataIndex: "title",
key: "num",
align: "center",
ellipsis: true,
ellipsis: true,
},
{
title: "作者",
@@ -94,7 +94,7 @@
},
{
title: "导入时间",
width: "40%",
width: "35%",
dataIndex: "time",
key: "time",
align: "center",

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

@@ -247,7 +247,7 @@
</div>
<div class="btn btn2">
<div class="imgIcon"></div>
<div class="btnText">批量删除</div>
<div class="btnText" @click="showDeleteALLModal">批量删除</div>
</div>
</div>
</div>
@@ -374,7 +374,7 @@
<button class="addx" @click="showAddStu">添加学员</button>
<!-- 点击抽屉组件在LevelAdd，此处没添加showAddStu、showImpStu -->
<button class="addd" @click="showImpStu">导入学员</button>
<button class="addd">批量删除</button>
<button class="addd" @click="showDeleteALLModal">批量删除</button>
</div>
<div class="talk">
<img class="im" src="../../assets/images/leveladd/gan.png" />
@@ -459,6 +459,36 @@
<add-stu v-model:AddSvisible="AddSvisible" />
<!-- 导入学员抽屉 -->
<imp-stu v-model:AddImpStuvisible="AddImpStuvisible" />
<!-- 批量删除学员弹窗 -->
<a-modal
v-model:visible="deleteAll"
:footer="null"
:closable="closeDeleteAll"
wrapClassName="CopyModal"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon"></div>
<span>提示</span>
<div class="close_exit" @click="delete_exit"></div>
</div>
<div class="body">
<span>请确认是否批量删除学员</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="delete_exit">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="delete_exit">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
</template>
@@ -799,6 +829,8 @@ export default {
modal: false,
clos: false,
stm_hs: false,
deleteAll: false,
closeDeleteAll: false,
value1: "",
value2: "",
selectedRowKeys: [],
@@ -1060,6 +1092,12 @@ export default {
const gqxy_hShow = () => {
state.gqxy_hs = !state.gqxy_hs;
};
const showDeleteALLModal = () => {
state.deleteAll = true;
};
const delete_exit = () => {
state.deleteAll = false
}
return {
...toRefs(state),
tableDataFunc,
@@ -1075,6 +1113,8 @@ export default {
onSelectChange,
changebgc,
gqxy_hShow,
showDeleteALLModal,
delete_exit,
};
},
};
@@ -2088,4 +2128,115 @@ export default {
}
}
}
.CopyModal {
.ant-modal {
width: 424px !important;
height: 258px !important;
.ant-modal-content {
width: 424px !important;
height: 258px !important;
.ant-modal-body {
width: 424px !important;
height: 258px !important;
padding: 0 !important;
.delete {
z-index: 999;
width: 424px;
height: 258px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
// position: absolute;
// left: 50%;
// top: 10%;
// transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
// background-color: red;
position: relative;
.back {
position: absolute;
top: 30px;
font-size: 12px;
font-weight: 400;
color: #666666;
}
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
margin-right: 14px;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
}
}
</style>