mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-17 23:06:45 +08:00
feat: 添加新的受众选择和报名功能，新增多个API请求，更新样式以优化用户体验
This commit is contained in:
huweihang
209
src/components/signup/AudienceModal.vue
Normal file
209
src/components/signup/AudienceModal.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<el-dialog title="添加报名" :visible.sync="visibleSync" width="1200px" top="8vh" append-to-body @close="handleClose">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="从受众中选择" name="quick">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="tab-search">
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
placeholder="姓名"
|
||||
size="small"
|
||||
clearable
|
||||
class="input"
|
||||
@keyup.enter.native="onSearch"
|
||||
/>
|
||||
<el-button type="primary" size="small" @click="onSearch">查询</el-button>
|
||||
<el-button type="primary" size="small" @click="onReset">重置</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
class="use-table"
|
||||
border
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
@selection-change="onSelectionChange"
|
||||
:row-key="row => row.id"
|
||||
max-height="420"
|
||||
>
|
||||
<el-table-column type="selection" width="50" />
|
||||
<el-table-column prop="userName" label="姓名" min-width="220" show-overflow-tooltip />
|
||||
<el-table-column prop="workNum" label="工号" width="120" />
|
||||
<el-table-column prop="departName" label="部门" width="120" />
|
||||
<el-table-column prop="orgPath" label="组织路径" min-width="200" show-overflow-tooltip />
|
||||
</el-table>
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
background
|
||||
layout="total, prev, pager, next, jumper"
|
||||
:pager-count="5"
|
||||
:page-size="pageSize"
|
||||
:current-page="pageNo"
|
||||
:total="total"
|
||||
@current-change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取 消</el-button>
|
||||
<el-button type="primary" @click="handleConfirm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchAudienceList, saveStu } from "@/api/signup/commonStudent";
|
||||
|
||||
export default {
|
||||
name: "AudienceModal",
|
||||
props: {
|
||||
visible: { type: Boolean, default: false },
|
||||
pageSize: { type: Number, default: 10 },
|
||||
// 从课程详情中传入的受众ID列表
|
||||
audienceIds: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'quick',
|
||||
courseDetail: JSON.parse(sessionStorage.getItem("courseDetail") || "{}"),
|
||||
visibleSync: this.visible,
|
||||
loading: false,
|
||||
keyword: "",
|
||||
tableData: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
selectedRows: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible(val) {
|
||||
this.visibleSync = val;
|
||||
if (val) {
|
||||
this.resetAndFetch();
|
||||
}
|
||||
},
|
||||
visibleSync(val) {
|
||||
this.$emit("update:visible", val);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
resetAndFetch() {
|
||||
this.keyword = "";
|
||||
this.pageNo = 1;
|
||||
this.selectedRows = [];
|
||||
this.fetchList();
|
||||
},
|
||||
fetchList() {
|
||||
this.loading = true;
|
||||
fetchAudienceList({
|
||||
keyword: this.keyword,
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
audienceIdList: this.audienceIds || [],
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data || res.result || res || {};
|
||||
this.tableData = data.list || [];
|
||||
this.total = data.total || 0;
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
onSearch() {
|
||||
this.pageNo = 1;
|
||||
this.fetchList();
|
||||
},
|
||||
onReset() {
|
||||
this.keyword = "";
|
||||
this.onSearch();
|
||||
},
|
||||
onPageChange(page) {
|
||||
this.pageNo = page;
|
||||
this.fetchList();
|
||||
},
|
||||
onSelectionChange(list) {
|
||||
this.selectedRows = list;
|
||||
},
|
||||
handleClose() {
|
||||
this.visibleSync = false;
|
||||
},
|
||||
handleConfirm() {
|
||||
const targetId = this.courseDetail?.id;
|
||||
if(!this.selectedRows.length) {
|
||||
this.$showMessage('请添加学员', 'error');
|
||||
return
|
||||
}
|
||||
saveStu({
|
||||
targetId,
|
||||
type: 13,
|
||||
deptIds: [],
|
||||
groupIds: [],
|
||||
studentList: this.selectedRows.map((e) => ({ id: e.userId })),
|
||||
}).then(() => {
|
||||
this.$showMessage("添加成功", 'success');
|
||||
this.$emit("confirm", this.selectedRows);
|
||||
this.handleClose();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tab-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.label {
|
||||
margin-right: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 240px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-dialog__body {
|
||||
padding: 0 20px 30px 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav {
|
||||
.el-tabs__item {
|
||||
color: #3b7cff;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
width: 60px !important;
|
||||
height: 1px;
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-dialog__footer {
|
||||
|
||||
.el-button {
|
||||
min-width: 120px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
border-radius: 6px;
|
||||
padding: 0 18px;
|
||||
}
|
||||
|
||||
.el-button--default {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
border-color: rgba(0, 0, 0, 0.3);
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background-color: #3b7cff;
|
||||
border-color: #3b7cff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user