This commit is contained in:
zhangyc
2022-10-24 11:59:45 +08:00
3 changed files with 1298 additions and 428 deletions

View File

@@ -3,7 +3,7 @@
:visible="AddSvisible"
class="drawerStyle AddLevelAddStu"
placement="right"
width="60%"
width="70%"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
@@ -20,35 +20,39 @@
<div class="tabs">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="快速选人">
<div class="tab1">
<div class="nameinp">
<div class="namee">姓名</div>
<a-input
v-model:value="name"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入姓名"
/>
</div>
<div class="btns">
<div class="btn1">
<div class="img1">
<img
src="../../assets/images/courseManage/search0.png"
/>
</div>
<div class="wz">搜索</div>
<div
:style="{ height: screenHeight - 235 + 'px' }"
style="overflow-y: auto"
>
<div class="tab1">
<div class="nameinp">
<div class="namee">姓名</div>
<a-input
v-model:value="name"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入姓名"
/>
</div>
<div class="btn2">
<div class="img2">
<img
src="../../assets/images/courseManage/reset1.png"
/>
<div class="btns">
<div class="btn1">
<div class="img1">
<img
src="../../assets/images/courseManage/search0.png"
/>
</div>
<div class="wz">搜索</div>
</div>
<div class="btn2">
<div class="img2">
<img
src="../../assets/images/courseManage/reset1.png"
/>
</div>
<div class="wz">重置</div>
</div>
<div class="wz">重置</div>
</div>
</div>
</div>
<!-- <div class="line">
<!-- <div class="line">
<div class="inline">
<div class="left1">
<div class="img"></div>
@@ -61,90 +65,11 @@
<div class="right1">清空</div>
</div>
</div> -->
<div class="tabb" style="margin-top: 16px">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tablecolumns"
:data-source="tabledata"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 500, y: 560 }"
@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>
</a-tab-pane>
<a-tab-pane key="2" tab="添加组织" force-render>
<div class="tab2">
<div class="t1">
<div class="organize">选择组织</div>
<div class="select">
<a-tree-select
v-model:value="valueSelect"
style="width: 200px"
dropdownClassName="changetreedropdown"
:dropdown-style="{
maxHeight: '400px',
overflow: 'auto',
}"
placeholder="请输入组织名称"
allow-clear
tree-default-expand-all
:tree-data="treeData"
>
</a-tree-select>
</div>
</div>
<div class="t1">
<div class="organize">姓名</div>
<a-input
v-model:value="nameadd"
style="width: 200px; height: 40px; border-radius: 8px"
placeholder="请输入姓名"
/>
</div>
</div>
<!-- 选完后出现下面 -->
<div class="searchdown">
<div class="btns">
<div class="btn1">
<div class="img1">
<img
src="../../assets/images/courseManage/search0.png"
/>
</div>
<div class="wz">搜索</div>
</div>
<div class="btn2">
<div class="img2">
<img
src="../../assets/images/courseManage/reset1.png"
/>
</div>
<div class="wz">重置</div>
</div>
</div>
<div class="tabb" style="margin-top: 16px">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tablecolumns1"
:data-source="tabledata1"
:columns="tablecolumns"
:data-source="tabledata"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 500, y: 560 }"
@@ -152,8 +77,8 @@
:pagination="false"
:row-selection="{
columnWidth: 30,
selectedRowKeys: selectedRowKeys1,
onChange: onSelectChange1,
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
/>
<div class="pa">
@@ -161,54 +86,147 @@
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize1"
:current="currentPage1"
:total="tableDataTotal1"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
/>
</div>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="3" tab="受众关联">
<div class="tab1">
<div class="t1">
<div class="nameinp">
<div class="namee">选择受众</div>
<a-tab-pane key="2" tab="添加组织" force-render>
<div
:style="{ height: screenHeight - 235 + 'px' }"
style="overflow-y: auto"
>
<div class="tab2">
<div class="t1">
<div class="organize">选择组织</div>
<div class="select">
<a-select
v-model:value="choosevalue"
style="width: 200px; border-radius: 8px"
<a-tree-select
v-model:value="valueSelect"
style="width: 200px"
dropdownClassName="changetreedropdown"
:dropdown-style="{
maxHeight: '400px',
overflow: 'auto',
}"
placeholder="请输入组织名称"
:options="organizeList1"
allow-clear
tree-default-expand-all
:tree-data="treeData"
>
</a-tree-select>
</div>
</div>
<div class="t1">
<div class="organize">姓名</div>
<a-input
v-model:value="nameadd"
style="width: 200px; height: 40px; border-radius: 8px"
placeholder="请输入姓名"
/>
</div>
</div>
<!-- 选完后出现下面 -->
<div class="searchdown">
<div class="btns">
<div class="btn1">
<div class="img1">
<img
src="../../assets/images/courseManage/search0.png"
/>
</div>
<div class="wz">搜索</div>
</div>
<div class="btn2">
<div class="img2">
<img
src="../../assets/images/courseManage/reset1.png"
/>
</div>
<div class="wz">重置</div>
</div>
</div>
<div class="tabb" style="margin-top: 16px">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tablecolumns1"
:data-source="tabledata1"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 500, y: 560 }"
@expand="expandTable"
:pagination="false"
:row-selection="{
columnWidth: 30,
selectedRowKeys: selectedRowKeys1,
onChange: onSelectChange1,
}"
/>
<div class="pa">
<a-pagination
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize1"
:current="currentPage1"
:total="tableDataTotal1"
class="pagination"
/>
</div>
</div>
</div>
<div class="t1" style="margin-top: 10px">
<div class="organize">姓名</div>
<a-input
v-model:value="nameaddd"
style="width: 200px; height: 40px; border-radius: 8px"
placeholder="请输入姓名"
/>
</div>
</div>
<div class="btns">
<div class="btn1">
<div class="img1">
<img src="../../assets/images/courseManage/search0.png" />
</a-tab-pane>
<a-tab-pane key="3" tab="受众关联">
<div
:style="{ height: screenHeight - 235 + 'px' }"
style="overflow-y: auto"
>
<div class="tab1">
<div class="t1">
<div class="nameinp">
<div class="namee">选择受众</div>
<div class="select">
<a-select
v-model:value="choosevalue"
style="width: 200px; border-radius: 8px"
placeholder="请选择受众群体"
:options="organizeList1"
/>
</div>
</div>
</div>
<div class="wz">搜索</div>
</div>
<div class="btn2">
<div class="img2">
<img src="../../assets/images/courseManage/reset1.png" />
<div class="t1" style="margin-top: 10px">
<div class="organize">姓名</div>
<a-input
v-model:value="nameaddd"
style="width: 200px; height: 40px; border-radius: 8px"
placeholder="请输入姓名"
/>
</div>
<div class="wz">重置</div>
</div>
</div>
<!-- <div class="line">
<div class="btns">
<div class="btn1">
<div class="img1">
<img
src="../../assets/images/courseManage/search0.png"
/>
</div>
<div class="wz">搜索</div>
</div>
<div class="btn2">
<div class="img2">
<img
src="../../assets/images/courseManage/reset1.png"
/>
</div>
<div class="wz">重置</div>
</div>
</div>
<!-- <div class="line">
<div class="inline">
<div class="left1">
<div class="img"></div>
@@ -221,32 +239,33 @@
<div class="right1">清空</div>
</div>
</div> -->
<div class="tabb" style="margin-top: 16px">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tablecolumns2"
:data-source="tabledata2"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 500, y: 560 }"
@expand="expandTable"
:pagination="false"
:row-selection="{
columnWidth: 30,
selectedRowKeys: selectedRowKeys2,
onChange: onSelectChange2,
}"
/>
<div class="pa">
<a-pagination
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize2"
:current="currentPage2"
:total="tableDataTotal2"
class="pagination"
<div class="tabb" style="margin-top: 16px">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tablecolumns2"
:data-source="tabledata2"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 500, y: 560 }"
@expand="expandTable"
:pagination="false"
:row-selection="{
columnWidth: 30,
selectedRowKeys: selectedRowKeys2,
onChange: onSelectChange2,
}"
/>
<div class="pa">
<a-pagination
showSizeChanger="true"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize2"
:current="currentPage2"
:total="tableDataTotal2"
class="pagination"
/>
</div>
</div>
</div>
</a-tab-pane>
@@ -265,7 +284,179 @@
<span class="allclear">全部清除</span>
</div>
</div>
<div class="selecteds">
<div
class="selecteds"
:style="{ 'max-height': screenHeight - 235 + 'px' }"
style="overflow-y: auto"
>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
</div>
<div class="chose">
李大明
<div class="ch"></div>
</div>
<div class="chose">
李二明
<div class="ch"></div>
</div>
<div class="chose">
李明
<div class="ch"></div>
@@ -302,7 +493,8 @@
</template>
<script>
import { reactive, toRefs } from "vue";
import { reactive, toRefs, onMounted, onUnmounted } from "vue";
export default {
name: "AddStu",
props: {
@@ -313,6 +505,7 @@ export default {
},
setup(props, ctx) {
const state = reactive({
screenHeight: document.body.clientHeight, // 屏幕高度
pageSize: 10,
currentPage: 1,
tableDataTotal: 50,
@@ -394,6 +587,73 @@ export default {
{
title: "十二级标题",
value: "十二级标题",
children: [
{
title:
"十三级标题十三级标题十三级标题十三级标题",
value: "十三级标题",
children: [
{
title:
"十四级标题",
value:
"十四级标题",
children: [
{
title:
"十五级标题",
value:
"十五级标题",
children: [
{
title:
"十六级标题",
value:
"十六级标题",
children:
[
{
title:
"十七级标题",
value:
"十七级标题",
children:
[
{
title:
"十八级标题",
value:
"十八级标题",
children:
[
{
title:
"十九级标题",
value:
"十九级标题",
children:
[
{
title:
"二十级标题二十级标题",
value:
"二十级标题二十级标题",
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
@@ -761,6 +1021,18 @@ export default {
state.selectedRowKeys = selectedRowKeys;
};
const getMousePosition = () => {
state.screenHeight = document.body.clientHeight;
};
onMounted(() => {
// console.log("11111", 1);
window.addEventListener("resize", getMousePosition, false);
// judgeUrl();
});
onUnmounted(() => {
window.removeEventListener("resize", getMousePosition, false);
});
return {
...toRefs(state),
afterVisibleChange,
@@ -779,7 +1051,7 @@ export default {
.drawerMain {
min-width: 600px;
margin: 0px 32px 0px 32px;
overflow-y: scroll;
// overflow-y: scroll;
display: flex;
flex-direction: column;
@@ -804,13 +1076,15 @@ export default {
display: flex;
// height: 80%;
margin-bottom: 72px;
.left {
overflow-y: auto;
// overflow-y: auto;
width: 65%;
// height: 100%;
border-right: 1px solid rgba(233, 233, 233, 1);
.tabs {
margin-right: 33px;
.tab1 {
display: flex;
flex-wrap: wrap;
@@ -1205,13 +1479,15 @@ export default {
}
}
.changetreedropdown {
width: 550px !important;
}
.ant-select-tree-list-scrollbar {
width: 5px !important;
.ant-select-tree-list-scrollbar-thumb {
background-color: #4ea6ff !important;
width: 500px !important;
.ant-select-tree-list-scrollbar {
width: 5px !important;
.ant-select-tree-list-scrollbar-thumb {
background-color: #4ea6ff !important;
}
}
.ant-select-tree-indent-unit {
width: 7px !important;
}
}
</style>

View File

@@ -83,7 +83,7 @@ export default {
};
</script>
<style scoped lang="scss" >
<style lang="scss" >
.changegroup {
.drawerMain {

File diff suppressed because it is too large Load Diff