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

添加受众成员样式及逻辑

Browse Source
This commit is contained in:
weixiaobo@boe.com.cn
2023-07-31 15:46:08 +08:00
parent f65c10e51c
commit afc9bd3b86
1 changed files with 445 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

530
src/views/audience/audienceManage.vue
View File

@@ -377,103 +377,122 @@
</div>
</div>
</a-modal>
<a-modal
<!-- <a-modal
v-model:visible="visibleAudienceMember"
width="1100px"
title="添加学员"
@ok="handleAddAudienceMember"
okText="确认">
<div style="display: flex; overflow-x: auto; overflow-y: auto; padding:20px">
<div style="min-width: 800px">
<div>
<div class="tab1">
<a-form-item label="姓名">
<a-input v-model:value="searchDataUser.keyword" style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入姓名"/>
<a-button type="primary" @click="onSearchUser" style="margin-left: 20px; border-radius: 4px">
<template #icon>
<SearchOutlined/>
</template>
搜索
</a-button>
<a-button type="primary" @click="onResetUser" style="margin-left: 20px; border-radius: 4px">重置
</a-button>
</a-form-item>
</div>
<div class="chooseLeft" style="display: grid; grid-template-columns: 250px auto">
<div :style="{
height: screenHeight - 180 + 'px',
overflowY: 'auto',
}" style="border: 1px solid #f0f0f0; overflow-y: 'auto'">
<div class="tree" style="margin: 10px 4px 20px 10px">
<a-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
:tree-data="treeData"
:load-data="onLoadData"
@select="onOrgSelectChange"
:fieldNames="{
children: 'directChildList',
key: 'id',
title: 'name',
value: 'name',
}"
>
</a-tree>
okText="确认"> -->
<a-drawer
:visible="visibleAudienceMember"
class="drawerStyle ProjCheckship CommonStudent"
placement="right"
width="80%">
<div class="drawerMain" id="ProjCheckship" style="">
<div class="header">
<div class="headerTitle">
{{"添加学员"}}
</div>
<img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"/>
</div>
<div style="display: flex; overflow-x: auto; overflow-y: auto; padding:20px">
<div style="min-width: 800px">
<div>
<div class="tab1">
<a-form-item label="姓名">
<a-input v-model:value="searchDataUser.keyword" style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入姓名"/>
<a-button type="primary" @click="onSearchUser" style="margin-left: 20px; border-radius: 4px">
<template #icon>
<SearchOutlined/>
</template>
搜索
</a-button>
<a-button type="primary" @click="onResetUser" style="margin-left: 20px; border-radius: 4px">重置
</a-button>
</a-form-item>
</div>
<div class="chooseLeft" style="display: grid; grid-template-columns: 250px auto">
<div :style="{
height: screenHeight - 280 + 'px',
overflowY: 'auto',
}" style="border: 1px solid #f0f0f0; overflow-y: 'auto'">
<div class="tree" style="margin: 10px 4px 20px 10px;">
<a-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
:tree-data="treeData"
:load-data="onLoadData"
@select="onOrgSelectChange"
:fieldNames="{
children: 'directChildList',
key: 'id',
title: 'name',
value: 'name',
}"
>
</a-tree>
</div>
</div>
<div>
<div class="tableBox tabb" style="
margin: 0px 4px 20px 10px;
border: 1px solid #f0f0f0;
">
<a-table
ref="userTableRef"
style="border: 1px solid #f2f6fe"
:columns="columnUser"
:data-source="tableDataUser"
:loading="loading"
:scroll="{ x: 400,y:screenHeight-350 }"
:pagination="false"
:row-selection="{ selectedRowKeys: selectedRowKeysUser, onChange: onSelectChangeUser }"
>
</a-table>
</div>
<div class="pa" style="margin: 0px 10px 20px 10px;">
<a-pagination
:showSizeChanger="false"
:showQuickJumper="true"
:hideOnSinglePage="true"
:pageSize="searchDataUser.pageSize"
:current="searchDataUser.pageNo"
:total="tableTotalUser"
class="pagination"
@change="handelChangePageUser"
/>
</div>
</div>
</div>
<div>
<div class="tableBox tabb" style="
margin: 0px 4px 20px 10px;
border: 1px solid #f0f0f0;
">
<a-table
ref="userTableRef"
style="border: 1px solid #f2f6fe"
:columns="columnUser"
:data-source="tableDataUser"
:loading="loading"
:scroll="{ x: 400,y:300 }"
:pagination="false"
:row-selection="{ selectedRowKeys: selectedRowKeysUser, onChange: onSelectChangeUser }"
>
</a-table>
</div>
<div class="pa" style="margin: 0px 10px 20px 10px;">
<a-pagination
:showSizeChanger="false"
:showQuickJumper="true"
:hideOnSinglePage="true"
:pageSize="searchDataUser.pageSize"
:current="searchDataUser.pageNo"
:total="tableTotalUser"
class="pagination"
@change="handelChangePageUser"
/>
</div>
</div>
<div style="min-width: 200px;border-left: 1px solid #f2f6fe;margin-left:10px">
<div class="onerow">
<div class="onleft">
<div class="already">已选</div>
</div>
</div>
<div :style="{ 'max-height': screenHeight - 235 + 'px' }" style="overflow-y: auto">
<div class="selecteds">
<div v-for="(item, i) in selectedRowUser" :key="i">
<div class="chose">
{{ item.realName }}
<div class="ch" @click="removeUserClick(i)"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="min-width: 200px;border-left: 1px solid #f2f6fe;margin-left:10px">
<div class="onerow">
<div class="onleft">
<div class="already">已选</div>
</div>
</div>
<div :style="{ 'max-height': screenHeight - 235 + 'px' }" style="overflow-y: auto">
<div class="selecteds">
<div v-for="(item, i) in selectedRowUser" :key="i">
<div class="chose">
{{ item.realName }}
<div class="ch" @click="removeUserClick(i)"></div>
</div>
</div>
</div>
</div>
<div class="btnn">
<button class="btn2" @click="closeDrawer">取消</button>
<button class="btn2" @click="handleAddAudienceMember">确定</button>
</div>
</div>
</a-modal>
</a-drawer>
<!-- </a-modal> -->
</div>
</template>
<script setup>
@@ -782,6 +801,7 @@ const temSelectedRowUser = ref([]);
const selectedRowKeysUserTotal = ref([]);
const selectedRowUserTotal = ref([]);
const userTableRef = ref();
const screenHeight = ref(document.body.clientHeight);
const treeData = ref([
{
@@ -1280,7 +1300,9 @@ const handleAddAudienceMemberClick = async () => {
// visibleAddAudience.value = true;
getAudienceUserListFun();
getAudienceOrgListFun();
visibleAudienceMember.value = true;
setTimeout(()=>{
visibleAudienceMember.value = true;
},500)
}
const getAudienceOrgListFun = async () => {
@@ -1374,9 +1396,15 @@ const handleAddAudienceMember = async () => {
console.log("addAudienceMember res:",res);
if(res&&res.data.status==200){
getAudienceMemberPageList();
message.success("添加成功！");
visibleAudienceMember.value = false;
}else{
message.error(res.data.message);
}
}
const closeDrawer = () => {
visibleAudienceMember.value = false;
}
</script>
@@ -2063,4 +2091,336 @@ const handleAddAudienceMember = async () => {
}
}
}
.CommonStudent > .ant-drawer-content-wrapper {
min-width: 1200px !important;
width: 1200px !important;
}
.CommonStudent {
.ant-btn-primary {
background-color: #4ea6ff !important;
}
.cus-select {
height: 40px;
border-radius: 8px;
}
.tableBox .ant-table-row .ant-table-cell {
height: 48px;
font-size: 14px;
font-weight: 400;
color: #4f5156;
line-height: 29px;
padding: 0px;
}
.tableBox .ant-table-thead tr th {
font-size: 14px;
}
.ant-tabs-tabpane {
height: 100%;
}
.ant-tabs {
overflow: visible;
}
.right1 {
border-left: 1px solid #f2f6fe;
margin-left: 20px;
.onerow {
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 40px;
flex-wrap: wrap;
width: 100%;
.onleft {
display: flex;
text-align: center;
.already {
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-weight: 500;
margin-left: 32px;
white-space: nowrap;
// margin-bottom: 20px;
}
.count {
color: #4ea6ff;
font-size: 16px;
margin: 0 6px;
}
.peo {
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-weight: 500;
}
}
.clbox {
margin-right: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 104px;
height: 32px;
border-radius: 4px;
background: #4ea6ff;
.colose {
width: 16px;
height: 16px;
// border-radius: 8px;
// background: #ffffff;
// position: relative;
background-image: url(../../assets/images/basicinfo/ch.png);
background-size: 100%;
margin-right: 4px;
}
.allclear {
color: rgba(255, 255, 255, 1);
font-size: 14px;
}
}
}
.selecteds {
display: flex;
flex-wrap: wrap;
margin-left: 32px;
.person {
width: 100%;
margin-top: 20px;
border-top: 1px solid #f2f6fe;
}
.chose {
width: 64px;
height: 24px;
margin-top: 25px;
margin-right: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
border: 1px solid rgba(56, 139, 225, 1);
color: rgba(56, 139, 225, 1);
font-size: 12px;
position: relative;
.ch {
position: absolute;
width: 18px;
height: 18px;
background-image: url(../../assets/images/basicinfo/ch.png);
right: -8px;
top: -8px;
}
}
.ifsw {
display: flex;
align-items: end;
justify-content: center;
color: #4ea6ff;
}
.sw {
display: flex;
align-items: center;
justify-content: center;
text-align: justify;
color: #4ea6ff;
margin-top: 23px;
margin-left: 10px;
}
.dept {
width: 100%;
margin-top: 30px;
border-top: 1px solid #f2f6fe;
}
.chose1 {
//width: 90px;
height: 24px;
margin-top: 25px;
margin-right: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
border: 1px solid rgba(56, 139, 225, 1);
color: rgba(56, 139, 225, 1);
font-size: 12px;
position: relative;
.span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ch1 {
position: absolute;
width: 18px;
height: 18px;
background-image: url(../../assets/images/basicinfo/ch.png);
right: -8px;
top: -8px;
}
}
.group {
width: 100%;
margin-top: 30px;
border-top: 1px solid #f2f6fe;
}
.chose2 {
//width: 120px;
height: 24px;
margin-top: 25px;
margin-right: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
border: 1px solid rgba(56, 139, 225, 1);
color: rgba(56, 139, 225, 1);
font-size: 12px;
position: relative;
.span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ch2 {
position: absolute;
width: 18px;
height: 18px;
background-image: url(../../assets/images/basicinfo/ch.png);
right: -8px;
top: -8px;
}
}
}
}
}
.drawerStyle {
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.contentMain {
.vote {
display: flex;
align-items: center;
margin-top: 32px;
margin-left: 20px;
.votebox {
width: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
// background-color: pink;
.voteimg {
width: 10px;
height: 10px;
margin-right: 5px;
}
.votename {
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 20px;
}
}
.votebtn {
width: 130px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 20px;
}
.voteclassify {
font-size: 14px;
font-weight: 400;
color: #999999;
line-height: 20px;
margin-top: 16px;
}
.ant-picker {
width: 424px;
}
}
}
.btnn {
height: 72px;
width: 100%;
position: absolute;
background-color: #fff;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
</style>