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

View File

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

File diff suppressed because it is too large Load Diff