feat:添加学员的添加组织,受众关联,导入学员,导入学员状态

This commit is contained in:
岳佳鑫
2022-10-20 15:01:36 +08:00
parent 5c80f4262d
commit e9884178b2
4 changed files with 557 additions and 7 deletions

View File

@@ -3,7 +3,7 @@
:visible="Stuvisible"
class="drawerStyle stuadd"
placement="right"
width="60%"
width="50%"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
@@ -60,7 +60,81 @@
:data-source="tabledata"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
:scroll="{ x: 590, y: 560 }"
:scroll="{ x: 560, 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="organize">组织</div>
<a-cascader
v-model:value="value"
placeholder="请输入组织名称"
:options="organizeList"
/>
</div>
</a-tab-pane>
<a-tab-pane key="3" tab="受众关联">
<div class="tab1">
<div class="nameinp">
<div class="namee">受众名称</div>
<a-select
v-model:value="value"
style="width: 264px; border-radius: 8px"
placeholder="请输入组织名称"
:options="organizeList1"
/>
</div>
<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>
<div class="line">
<div class="inline">
<div class="left1">
<div class="img"></div>
<div class="text" style="margin-left: 10px">已选择</div>
<div class="text2">2</div>
<div class="text"></div>
<div class="text3">列表选项总计</div>
<div class="text4">9</div>
</div>
<div class="right1">清空</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: 700, y: 400 }"
@expand="expandTable"
:pagination="false"
:row-selection="{
@@ -82,8 +156,6 @@
</div>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="添加组织" force-render>Content of Tab Pane 2</a-tab-pane>
<a-tab-pane key="3" tab="受众关联">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
</div>
</div>
@@ -129,6 +201,49 @@ export default {
pageSize: 10,
currentPage: 1,
tableDataTotal: 50,
organizeList: [
{
id: 1,
value: "京东方",
label: "京东方",
children: [
{
id:2,
value: "产研部",
label: "产研部",
children: [
{
id:4,
value: "产品部门",
label: "产品部门",
},
{
id:5,
value: "研发部门",
label: "研发部门",
},
],
},
{
id:3,
value: "人力资源部",
label: "人力资源部",
children: [
{
id:6,
value: "人事部",
label: "人事部",
},
{
id:7,
value: "行政部",
label: "行政部",
},
],
},
],
},
],
tabledata: [
{
key: 1,
@@ -211,6 +326,98 @@ export default {
className: "h",
},
],
tabledata1: [
{
key: 1,
name: "学习受众",
time: "2022-10-31 23:12:00",
total: "1",
state: "已发布",
type: "普通受众",
},
{
key: 2,
name: "2",
time: "2022-10-31 23:12:00",
total: "2",
state: "已发布",
type: "普通受众",
},
{
key: 3,
name: "mask",
time: "2022-10-31 23:12:00",
total: "1",
state: "已发布",
type: "普通受众",
},
{
key: 4,
name: "学习受众",
time: "2022-10-31 23:12:00",
total: "1",
state: "已发布",
type: "普通受众",
},
{
key: 5,
name: "学业受众",
time: "2022-10-31 23:12:00",
total: "2",
state: "已发布",
type: "普通受众",
},
{
key: 6,
name: "案例受众",
time: "2022-10-31 23:12:00",
total: "3",
state: "已发布",
type: "普通受众",
},
],
tablecolumns1: [
{
title: "受众名称",
dataIndex: "name",
key: "name",
width: 30,
align: "left",
className: "h",
},
{
title: "创建时间",
dataIndex: "time",
key: "time",
width: 40,
align: "center",
className: "h",
},
{
title: "人数",
dataIndex: "total",
key: "total",
width: 20,
align: "center",
className: "h",
},
{
title: "状态",
dataIndex: "state",
key: "state",
width: 20,
align: "center",
className: "h",
},
{
title: "类型",
dataIndex: "type",
key: "type",
width: 30,
align: "center",
className: "h",
},
],
});
const closeDrawer = () => {
ctx.emit("update:Stuvisible", false);
@@ -265,8 +472,10 @@ export default {
}
.main {
display: flex;
height: 80%;
.left {
width: 65%;
height: 100%;
border-right: 1px solid rgba(233, 233, 233, 1);
.tabs {
margin-right: 33px;
@@ -407,6 +616,25 @@ export default {
// bottom: 20px;
}
}
.tab2 {
display: flex;
align-items: center;
.organize {
color: rgba(0, 0, 0, 0.8500);
font-size: 14px;
}
.ant-cascader {
width: 264px;
height: 40px;
border-radius: 8px;
.ant-select-selector{
height: 100%;
}
.ant-select-selection-search-input {
height: 40px;
}
}
}
}
}
.right {