mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-18 15:26:45 +08:00
feat: 增加报名管理功能,支持添加和删除报名记录,优化受众选择弹窗逻辑
This commit is contained in:
@@ -47,7 +47,18 @@
|
|||||||
|
|
||||||
<el-col :span="6" :offset="4">
|
<el-col :span="6" :offset="4">
|
||||||
<div class="grid-content bg-purple" style="text-align: right;">
|
<div class="grid-content bg-purple" style="text-align: right;">
|
||||||
<el-button type="primary" icon="el-icon-upload2" @click="handleExportSignup">导出报名记录</el-button>
|
<el-button
|
||||||
|
v-if="showSignupActions"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-plus"
|
||||||
|
style="margin-right: 10px;"
|
||||||
|
@click="handleAddSignupClick"
|
||||||
|
>
|
||||||
|
添加报名
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" icon="el-icon-upload2" @click="handleExportSignup">
|
||||||
|
导出报名记录
|
||||||
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -72,6 +83,22 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="signTime" label="报名时间"></el-table-column>
|
<el-table-column prop="signTime" label="报名时间"></el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
v-if="showSignupActions"
|
||||||
|
label="操作"
|
||||||
|
width="140"
|
||||||
|
>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
size="mini"
|
||||||
|
class="delete-action-link--danger"
|
||||||
|
@click="handleDeleteSignup(scope.row)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<div style="padding: 10px;">
|
<div style="padding: 10px;">
|
||||||
<div style="text-align:center; padding: 10px;">
|
<div style="text-align:center; padding: 10px;">
|
||||||
@@ -226,6 +253,17 @@
|
|||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
<AudienceModal
|
||||||
|
v-if="showSignupActions && hasCourseCrowds"
|
||||||
|
:visible.sync="audienceDialogVisible"
|
||||||
|
@confirm="handleAudienceConfirm"
|
||||||
|
:audience-ids="courseCrowds.map(item => item.id)"
|
||||||
|
/>
|
||||||
|
<SignupModal
|
||||||
|
v-if="showSignupActions && !hasCourseCrowds"
|
||||||
|
:visible.sync="addSignupVisible"
|
||||||
|
@confirm="handleSignupCreate"
|
||||||
|
/>
|
||||||
<!-- 学习详情 -->
|
<!-- 学习详情 -->
|
||||||
<el-dialog title="学习详情" :visible.sync="study.detailShow" width="900px" :append-to-body="true">
|
<el-dialog title="学习详情" :visible.sync="study.detailShow" width="900px" :append-to-body="true">
|
||||||
<div>
|
<div>
|
||||||
@@ -452,15 +490,27 @@ import apiCoursePortal from "@/api/modules/coursePortal.js";
|
|||||||
import { mapGetters, mapActions } from "vuex";
|
import { mapGetters, mapActions } from "vuex";
|
||||||
import apiUser from "@/api/system/user.js";
|
import apiUser from "@/api/system/user.js";
|
||||||
import apiStudy from "@/api/modules/courseStudy.js";
|
import apiStudy from "@/api/modules/courseStudy.js";
|
||||||
|
import apiCourse from "@/api/modules/course.js";
|
||||||
import { getToken } from "@/utils/token";
|
import { getToken } from "@/utils/token";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import NameFilterSelect from "@/components/NameFilterSelect/index.vue";
|
import NameFilterSelect from "@/components/NameFilterSelect/index.vue";
|
||||||
|
import SignupModal from "@/components/signup/SignupModal.vue";
|
||||||
|
import AudienceModal from "@/components/signup/AudienceModal.vue";
|
||||||
|
|
||||||
NameFilterSelect;
|
NameFilterSelect;
|
||||||
export default {
|
export default {
|
||||||
components: { NameFilterSelect },
|
components: { NameFilterSelect, SignupModal, AudienceModal },
|
||||||
|
props: {
|
||||||
|
showSignupActions: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(["resOwnerMap", "sysTypeMap"]),
|
...mapGetters(["resOwnerMap", "sysTypeMap"]),
|
||||||
|
hasCourseCrowds() {
|
||||||
|
return Array.isArray(this.courseCrowds) && this.courseCrowds.length > 0;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -514,6 +564,8 @@ export default {
|
|||||||
},
|
},
|
||||||
studyDateTime: [],
|
studyDateTime: [],
|
||||||
courseDetail: JSON.parse(sessionStorage.getItem("courseDetail")),
|
courseDetail: JSON.parse(sessionStorage.getItem("courseDetail")),
|
||||||
|
// 课程详情中的 crowds 信息(通过 apiCourse.detail 获取)
|
||||||
|
courseCrowds: [],
|
||||||
downParams: {},
|
downParams: {},
|
||||||
typePress: false,
|
typePress: false,
|
||||||
isHomeWork: false,
|
isHomeWork: false,
|
||||||
@@ -538,6 +590,9 @@ export default {
|
|||||||
value: "",
|
value: "",
|
||||||
input: "",
|
input: "",
|
||||||
tabName: "second",
|
tabName: "second",
|
||||||
|
audienceDialogVisible: false,
|
||||||
|
addSignupVisible: false,
|
||||||
|
selectedAudiences: [],
|
||||||
learningSituation: {
|
learningSituation: {
|
||||||
pageIndex: 1, //第几页
|
pageIndex: 1, //第几页
|
||||||
pageSize: 10, // 每页多少条
|
pageSize: 10, // 每页多少条
|
||||||
@@ -623,6 +678,7 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.getCourseDetailCrowds();
|
||||||
this.getSignupList();
|
this.getSignupList();
|
||||||
this.getResOwnerTree().then((rs) => {
|
this.getResOwnerTree().then((rs) => {
|
||||||
this.resOwnerListMap = rs;
|
this.resOwnerListMap = rs;
|
||||||
@@ -639,6 +695,58 @@ export default {
|
|||||||
loadSysTypes: "sysType/loadSysTypes",
|
loadSysTypes: "sysType/loadSysTypes",
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
// 查询课程详情,获取 crowds 信息
|
||||||
|
getCourseDetailCrowds() {
|
||||||
|
if (!this.courseDetail || !this.courseDetail.id) return;
|
||||||
|
apiCourse
|
||||||
|
.detail(this.courseDetail.id)
|
||||||
|
.then((res) => {
|
||||||
|
console.log('res1', res);
|
||||||
|
const result = res.result || {};
|
||||||
|
this.courseCrowds = Array.isArray(result.crowds) ? result.crowds : [];
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.courseCrowds = [];
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 添加报名按钮点击,根据 crowds 是否有值决定弹窗
|
||||||
|
handleAddSignupClick() {
|
||||||
|
if (this.hasCourseCrowds) {
|
||||||
|
this.audienceDialogVisible = true;
|
||||||
|
} else {
|
||||||
|
this.addSignupVisible = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSignupCreate(payload) {
|
||||||
|
console.log("signup payload", payload);
|
||||||
|
this.getSignupList();
|
||||||
|
},
|
||||||
|
handleDeleteSignup(row) {
|
||||||
|
this.$confirm(`<i class="el-icon-warning-outline"></i>确认删除${row.name || ''}的报名记录吗?`, '删除确认', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
dangerouslyUseHTMLString: true,
|
||||||
|
type: 'warning',
|
||||||
|
customClass: 'custom-confirm-dialog'
|
||||||
|
}).then(() => {
|
||||||
|
apicourseStudy.deleteSignUp(row.id, this.courseDetail.id)
|
||||||
|
.then((res) => {
|
||||||
|
if (res && res.status === 200) {
|
||||||
|
this.$showMessage("删除成功", 'success');
|
||||||
|
this.getSignupList();
|
||||||
|
} else if (res) {
|
||||||
|
this.$showMessage(res.message || "删除失败", 'error');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
this.$showMessage("删除失败", 'error');
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
// this.$showMessage('已取消删除', 'info');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
resetCommonResourceQuery() {
|
resetCommonResourceQuery() {
|
||||||
this.$refs.commonResourceStudyPeopleNameFilter.handleReset();
|
this.$refs.commonResourceStudyPeopleNameFilter.handleReset();
|
||||||
this.commonResourceStudyPeopleQuery = {
|
this.commonResourceStudyPeopleQuery = {
|
||||||
@@ -1079,6 +1187,10 @@ export default {
|
|||||||
this.learningRecords.pageIndex = val;
|
this.learningRecords.pageIndex = val;
|
||||||
this.getStudyRecords();
|
this.getStudyRecords();
|
||||||
},
|
},
|
||||||
|
handleAudienceConfirm(list) {
|
||||||
|
this.selectedAudiences = list;
|
||||||
|
this.getSignupList();
|
||||||
|
},
|
||||||
// 报名列表
|
// 报名列表
|
||||||
getSignupList() {
|
getSignupList() {
|
||||||
let params = {
|
let params = {
|
||||||
@@ -1175,6 +1287,18 @@ export default {
|
|||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
.delete-action-link--danger {
|
||||||
|
color: #E32E2E;
|
||||||
|
&:hover {
|
||||||
|
color: #E32E2E;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
color: #E32E2E;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
color: #E32E2E;
|
||||||
|
}
|
||||||
|
}
|
||||||
#courseManage {
|
#courseManage {
|
||||||
.option-code {
|
.option-code {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
|
|||||||
Reference in New Issue
Block a user