mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-13 04:46:46 +08:00
feat:修改[活动]考勤抽屉
This commit is contained in:
李晓鸽
@@ -9,25 +9,25 @@
|
||||
</div>
|
||||
<div class="maincon" style="background-color: #fff">
|
||||
<div
|
||||
class="item"
|
||||
class="items"
|
||||
:class="{ active: isActive == true }"
|
||||
@click="changebgc"
|
||||
v-for="item in level"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="items1">
|
||||
<div class="box_left">
|
||||
<div class="boxs_left">
|
||||
<div class="script">
|
||||
<span style="font-size: 12px; color: #ffffff">说明</span>
|
||||
</div>
|
||||
<div class="imgIcon"></div>
|
||||
</div>
|
||||
<div class="box_right">
|
||||
<div class="boxs_right">
|
||||
<div class="imgIcon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items2">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="nname">{{ item.name }}</div>
|
||||
</div>
|
||||
<!-- <div class="itemle">
|
||||
<div class="tit">{{ item.tit }}</div>
|
||||
@@ -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>
|
||||
@@ -371,10 +371,12 @@
|
||||
<div class="xwid">
|
||||
<div class="xin">
|
||||
<div class="xheadb">
|
||||
<button class="addx">添加学员</button>
|
||||
<button class="addx" @click="showAddStu">添加学员</button>
|
||||
<!-- 点击抽屉组件在LevelAdd，此处没添加showAddStu、showImpStu -->
|
||||
<button class="addd">导入学员</button>
|
||||
<button class="addd">批量删除</button>
|
||||
<button class="addd" @click="showImpStu">导入学员</button>
|
||||
<button class="addd" @click="showDeleteALLModal">
|
||||
批量删除
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div class="talk">
|
||||
<img class="im" src="../../assets/images/leveladd/gan.png" />
|
||||
@@ -454,14 +456,53 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 添加学员抽屉 -->
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
|
||||
|
||||
import AddStu from "../../components/drawers/AddLevelAddStu";
|
||||
import ImpStu from "../../components/drawers/AddLevelImportStu";
|
||||
export default {
|
||||
name: "LevelAddDetail",
|
||||
components: {
|
||||
AddStu,
|
||||
ImpStu,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
level: [
|
||||
@@ -745,9 +786,13 @@ export default {
|
||||
tableDataTotal: 100,
|
||||
pageSize: 10,
|
||||
visible: false,
|
||||
AddSvisible: false, //添加学员抽屉
|
||||
AddImpStuvisible: false, //导入学员抽屉
|
||||
modal: false,
|
||||
clos: false,
|
||||
stm_hs: false,
|
||||
deleteAll: false,
|
||||
closeDeleteAll: false,
|
||||
value1: "",
|
||||
value2: "",
|
||||
selectedRowKeys: [],
|
||||
@@ -771,6 +816,12 @@ export default {
|
||||
const afterVisibleChange = (bool) => {
|
||||
console.log("visible", bool);
|
||||
};
|
||||
const showAddStu = () => {
|
||||
state.AddSvisible = true;
|
||||
};
|
||||
const showImpStu = () => {
|
||||
state.AddImpStuvisible = true;
|
||||
};
|
||||
const tableDataFunc = () => {
|
||||
const columns = [
|
||||
{
|
||||
@@ -1081,6 +1132,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,
|
||||
@@ -1090,10 +1147,14 @@ export default {
|
||||
showModal,
|
||||
closeModal,
|
||||
afterVisibleChange,
|
||||
showAddStu,
|
||||
showImpStu,
|
||||
// drawercolumns,
|
||||
onSelectChange,
|
||||
changebgc,
|
||||
gqxy_hShow,
|
||||
showDeleteALLModal,
|
||||
delete_exit,
|
||||
drawertableColumns,
|
||||
};
|
||||
},
|
||||
@@ -1268,6 +1329,7 @@ export default {
|
||||
align-items: center;
|
||||
// background-color: red;
|
||||
margin-bottom: 20px;
|
||||
flex-shrink: 0;
|
||||
.headerTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
@@ -1298,6 +1360,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
||||
background-color: #ffffff;
|
||||
.btn1 {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
@@ -1377,9 +1440,9 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.item {
|
||||
.items {
|
||||
width: 171px;
|
||||
height: 83px;
|
||||
// height: 83px;
|
||||
background: rgba(255, 182, 78, 0.1);
|
||||
border: 1px solid #ffb64e;
|
||||
opacity: 0.45;
|
||||
@@ -1392,9 +1455,9 @@ export default {
|
||||
.items1 {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.box_left {
|
||||
width: 140px;
|
||||
.boxs_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.script {
|
||||
@@ -1415,7 +1478,7 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.box_right {
|
||||
.boxs_right {
|
||||
.imgIcon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
@@ -1425,7 +1488,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.items2 {
|
||||
.name {
|
||||
.nname {
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -1764,8 +1827,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.tableBox {
|
||||
margin-bottom: 20px;
|
||||
|
||||
margin-block-end: 20px;
|
||||
.classify {
|
||||
margin-left: 11px !important;
|
||||
padding-left: 9px !important;
|
||||
@@ -2106,4 +2168,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>
|
||||
|
||||
Reference in New Issue
Block a user