feat:学员管理小组管理增删查

This commit is contained in:
songwc
2022-11-10 15:55:07 +08:00
parent 6331698dc5
commit 9fe983b9b9
5 changed files with 1178 additions and 996 deletions

View File

@@ -65,32 +65,50 @@
<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 }"
@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 class="chooseLeft">
<div class="boeTree">
<a-tree-select
v-model:value="valueSelectboe"
style="width: 240px; border-radius: 4px"
dropdownClassName="changetreedropdownboe"
:dropdown-style="{
maxHeight: '600px',
overflow: 'auto',
}"
placeholder="BOE组织树"
allow-clear
tree-default-expand-all
:tree-data="treeData"
>
<template #suffixIcon></template>
</a-tree-select>
</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"
@expand="expandTable"
:pagination="false"
:row-selection="{
columnWidth: 20,
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>
</div>
</div>
@@ -101,36 +119,14 @@
style="overflow-y: auto"
>
<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>
<div class="nameinp">
<div class="namee">组织</div>
<a-input
v-model:value="nameadd"
style="width: 200px; height: 40px; border-radius: 8px"
placeholder="请输入姓名"
v-model:value="com"
style="width: 230px; height: 40px; border-radius: 8px"
placeholder="请输入组织"
/>
</div>
</div>
<!-- 选完后出现下面 -->
<div class="searchdown">
<div class="btns">
<div class="btn1">
<div class="img1">
@@ -149,6 +145,34 @@
<div class="wz">重置</div>
</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="boeTree">
<a-tree-select
v-model:value="valueSelectboe2"
style="width: 240px; border-radius: 4px"
dropdownClassName="changetreedropdownboe"
:dropdown-style="{
maxHeight: '600px',
overflow: 'auto',
}"
placeholder="BOE组织树"
allow-clear
tree-default-expand-all
:tree-data="treeData2"
>
<template #suffixIcon></template>
</a-tree-select>
</div>
<!-- 选完后出现下面 -->
<!-- <div class="searchdown">
<div class="tabb" style="margin-top: 16px">
<a-table
style="border: 1px solid #f2f6fe"
@@ -177,7 +201,7 @@
/>
</div>
</div>
</div>
</div> -->
</div>
</a-tab-pane>
<a-tab-pane key="3" tab="受众关联">
@@ -284,204 +308,19 @@
<span class="allclear">全部清除</span>
</div>
</div>
<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>
</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="line"></div>
<div class="tit">快速选人</div>
<div class="selecteds">
<!-- 遍历生成 -->
<div class="chose" v-for="item in choosepeople" :key="item.id">
{{ item.name }}
<div class="ch"></div>
</div>
</div>
<div class="line"></div>
<div class="tit">添加组织</div>
<div class="line"></div>
<div class="tit">受众关联</div>
</div>
</div>
<div class="btnn">
@@ -521,9 +360,12 @@ export default {
value: [], //级联选择框
choosevalue: null, //受众选择
valueSelect: null, //树形选择
valueSelectboe: null, //boe树形选择
valueSelectboe2: null, //boe树形选择
name: "",
nameadd: "",
nameaddd: "",
com: "",
treeData: [
{
title: "京东方",
@@ -691,69 +533,236 @@ export default {
],
},
],
treeData2: [
{
title: "京东方",
value: "京东方",
children: [
{
title: "产研部",
value: "产研部",
children: [
{
title: "产品部",
value: "产品部",
},
{
title: "研究部",
value: "研究部",
},
],
},
{
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: "十级标题",
children: [
{
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:
"十九级标题",
children:
[
{
title:
"二十级标题二十级标题",
value:
"二十级标题二十级标题",
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
],
},
{
title: "人力资源部",
value: "人力资源部",
children: [
{
title: "人事部",
value: "人事部",
},
{
title: "行政部",
value: "行政部",
},
],
},
],
},
],
tabledata: [
{
key: 1,
name: "小李",
bum: "产研部",
numb: "000000",
guishu: "",
guishu: "产品部",
},
{
key: 2,
name: "小刘",
bum: "产研部",
numb: "000000",
guishu: "",
guishu: "产品部",
},
{
key: 3,
name: "小李",
bum: "产研部",
numb: "000000",
guishu: "",
guishu: "产品部",
},
{
key: 4,
name: "小李",
bum: "产研部",
numb: "000000",
guishu: "",
guishu: "产品部",
},
{
key: 5,
name: "小李",
bum: "产研部",
numb: "000000",
guishu: "",
guishu: "产品部",
},
{
key: 6,
name: "小李",
bum: "产研部",
numb: "000000",
guishu: "",
guishu: "产品部",
},
{
key: 7,
name: "小李",
bum: "产研部",
numb: "000000",
guishu: "",
guishu: "产品部",
},
{
key: 8,
name: "小李",
bum: "产研部",
numb: "000000",
guishu: "",
guishu: "产品部",
},
{
key: 9,
name: "小李",
bum: "产研部",
numb: "000000",
guishu: "",
guishu: "产品部",
},
],
tablecolumns: [
@@ -761,7 +770,7 @@ export default {
title: "姓名",
dataIndex: "name",
key: "name",
width: 30,
// width: 30,
align: "left",
className: "h",
},
@@ -769,7 +778,7 @@ export default {
title: "工号",
dataIndex: "numb",
key: "numb",
width: 35,
// width: 30,
align: "center",
className: "h",
},
@@ -777,7 +786,7 @@ export default {
title: "归属组织",
dataIndex: "guishu",
key: "guishu",
width: 30,
// width: 30,
align: "center",
className: "h",
},
@@ -785,7 +794,7 @@ export default {
title: "部门",
dataIndex: "bum",
key: "bum",
width: 40,
// width: 30,
align: "center",
className: "h",
},
@@ -998,6 +1007,52 @@ export default {
label: "人力资源hrbp",
},
],
choosepeople: [
{
id: 1,
name: "李明",
},
{
id: 1,
name: "李明",
},
{
id: 1,
name: "李明",
},
{
id: 1,
name: "李明",
},
{
id: 1,
name: "李明",
},
{
id: 1,
name: "李明",
},
{
id: 1,
name: "李明",
},
{
id: 1,
name: "李明",
},
{
id: 1,
name: "李明",
},
{
id: 1,
name: "李明",
},
{
id: 1,
name: "李明",
},
],
});
const closeDrawer = () => {
state.activeKey = "1";
@@ -1234,49 +1289,70 @@ export default {
}
}
}
.tabb {
.ant-table-thead > tr > th {
background-color: rgba(240, 246, 252, 1);
color: rgba(0, 0, 0, 0.85);
}
.ant-table-tbody > tr > td {
border-bottom: 1px solid #f0f6fc;
color: rgba(0, 0, 0, 0.65);
}
th.h {
background-color: #eff4fc !important;
.chooseLeft {
display: flex;
justify-content: space-between;
.boeTree {
margin-top: 20px;
width: 300px;
height: 40px;
margin-right: 10px;
.ant-select {
.ant-select-selector {
border-radius: 8px;
height: 40px;
.ant-select-selection-placeholder {
color: #409eff;
margin-left: 72px !important;
margin-top: 4px !important;
}
}
}
}
.tabb {
.ant-table-thead > tr > th {
background-color: rgba(240, 246, 252, 1);
color: rgba(0, 0, 0, 0.85);
}
.ant-table-tbody > tr > td {
border-bottom: 1px solid #f0f6fc;
color: rgba(0, 0, 0, 0.65);
}
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: rgba(250, 250, 250, 1);
}
.ant-table-selection-column {
padding: 0 !important;
}
// table tr td.ant-table-selection-column {
// text-align: right;
// }
// .ant-checkbox-wrapper {
// align-items: center;
// margin-top: -2px;
// }
.pa {
// left: 0;
margin-top: 15px;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
// position: absolute;
// bottom: 20px;
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next,
.ant-pagination-options {
margin-bottom: 10px;
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: rgba(250, 250, 250, 1);
}
.ant-table-selection-column {
padding: 0 !important;
}
// table tr td.ant-table-selection-column {
// text-align: right;
// }
// .ant-checkbox-wrapper {
// align-items: center;
// margin-top: -2px;
// }
.pa {
// left: 0;
margin-top: 15px;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
// position: absolute;
// bottom: 20px;
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next,
.ant-pagination-options {
margin-bottom: 10px;
}
}
}
}
@@ -1284,45 +1360,27 @@ export default {
.tab2 {
display: flex;
align-items: center;
margin-top: 10px;
// margin-top: 10px;
flex-wrap: wrap;
justify-content: space-between;
.nameinp {
display: flex;
align-items: center;
margin-top: 10px;
.namee {
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
}
}
.t1 {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.organize {
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
white-space: nowrap;
}
.ant-select-dropdown {
min-width: 800px !important;
}
.ant-select {
border-radius: 8px !important;
// background-color: red;
}
.ant-cascader {
width: 264px;
height: 40px;
border-radius: 8px !important;
.ant-select-selector {
height: 100%;
}
.ant-select-selection-search-input {
height: 40px;
}
}
}
.searchdown {
.btns {
display: flex;
margin-top: 10px;
// margin-top: -10px;
.btn1 {
width: 100px;
height: 40px;
@@ -1357,6 +1415,47 @@ export default {
}
}
}
.organize {
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
white-space: nowrap;
}
.ant-select-dropdown {
min-width: 800px !important;
}
.ant-select {
border-radius: 8px !important;
// background-color: red;
}
.ant-cascader {
width: 264px;
height: 40px;
border-radius: 8px !important;
.ant-select-selector {
height: 100%;
}
.ant-select-selection-search-input {
height: 40px;
}
}
}
.boeTree {
margin-top: 20px;
width: 300px;
height: 40px;
margin-right: 10px;
.ant-select {
.ant-select-selector {
border-radius: 8px;
height: 40px;
.ant-select-selection-placeholder {
color: #409eff;
margin-left: 72px !important;
margin-top: 4px !important;
}
}
}
}
}
}
@@ -1416,10 +1515,25 @@ export default {
}
}
}
.line {
width: 90%;
height: 1px;
background-color: #e8e8e8;
margin-left: 12px;
margin-top: 20px;
}
.tit {
font-size: 14px;
font-weight: 500;
margin-top: 12px;
margin-left: 32px;
}
.selecteds {
display: flex;
flex-wrap: wrap;
margin-left: 32px;
height: 200px;
overflow-y: hidden;
.chose {
width: 64px;
height: 24px;
@@ -1490,4 +1604,18 @@ export default {
width: 7px !important;
}
}
.changetreedropdownboe {
width: 240px !important;
border-radius: 5px;
min-height: 600px !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>