|
|
@@ -12,14 +12,18 @@
|
|
|
<div class="tabs-left">
|
|
|
<span
|
|
|
v-for="item in tabList"
|
|
|
- :key="item.id"
|
|
|
- :class="['tabs-item', { active: item.id === activeID }]"
|
|
|
- @click="changeTab(item.id)"
|
|
|
+ :key="item.type"
|
|
|
+ :class="['tabs-item', { active: item.type === curTab }]"
|
|
|
+ @click="changeTab(item.type)"
|
|
|
>
|
|
|
{{ item.name }}
|
|
|
</span>
|
|
|
</div>
|
|
|
- <div />
|
|
|
+ <div v-if="curTab === tabList[1].type" class="tabs-right">
|
|
|
+ <el-button @click="sendMessage('all')">
|
|
|
+ <span><svg-icon icon-class="send-message" /> 群发消息</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="student-table">
|
|
|
<el-table :data="student_list">
|
|
|
@@ -43,10 +47,13 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column fixed="right" width="120">
|
|
|
<template slot-scope="{ row }">
|
|
|
- <template v-if="activeID === 'new'">
|
|
|
+ <template v-if="curTab === tabList[0].type">
|
|
|
<span class="agree" @click="auditCourseStudent(row.course_student_id, 'true')"> 同意 </span>
|
|
|
<span class="refuse" @click="auditCourseStudent(row.course_student_id, 'false')"> 拒绝 </span>
|
|
|
</template>
|
|
|
+ <template v-if="curTab === tabList[1].type">
|
|
|
+ <span class="agree" @click="sendMessage('single', row.student_id, row.student_name)">发消息</span>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -64,30 +71,40 @@
|
|
|
@current-change="changePage"
|
|
|
@size-change="changePageSize"
|
|
|
/>
|
|
|
+
|
|
|
+ <send-message :visible.sync="visible" :title-name="titleName" @sendMessage="sendMessageToCourseStudent" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { PageQueryCourseStudentList } from '@/api/list';
|
|
|
-import { AuditCourseStudent } from '@/api/course';
|
|
|
+import { AuditCourseStudent, SendMessageToCourseStudent } from '@/api/course';
|
|
|
+import SendMessage from './SendMessage.vue';
|
|
|
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ SendMessage
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
course_id: this.$route.params.id,
|
|
|
student_name: '',
|
|
|
- activeID: 'new',
|
|
|
+ curTab: 'new',
|
|
|
+ visible: false,
|
|
|
+ titleName: '',
|
|
|
+ type: '',
|
|
|
+ student_id: '',
|
|
|
student_list: [],
|
|
|
page_capacity: 10,
|
|
|
cur_page: 1,
|
|
|
total_count: 0,
|
|
|
tabList: [
|
|
|
{
|
|
|
- id: 'new',
|
|
|
+ type: 'new',
|
|
|
name: '新申请'
|
|
|
},
|
|
|
{
|
|
|
- id: 'list',
|
|
|
+ type: 'list',
|
|
|
name: '学生列表'
|
|
|
}
|
|
|
]
|
|
|
@@ -98,38 +115,60 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
queryCourseStudentList() {
|
|
|
- let data = {
|
|
|
+ PageQueryCourseStudentList({
|
|
|
student_name: this.student_name,
|
|
|
course_id: this.course_id,
|
|
|
page_capacity: this.page_capacity,
|
|
|
- cur_page: this.cur_page
|
|
|
- };
|
|
|
-
|
|
|
- if (this.activeID === 'new') {
|
|
|
- data['audit_status_list'] = [0];
|
|
|
- } else {
|
|
|
- data['audit_status_list'] = [1];
|
|
|
- }
|
|
|
-
|
|
|
- PageQueryCourseStudentList(data).then(({ student_list, total_count, cur_page }) => {
|
|
|
+ cur_page: this.cur_page,
|
|
|
+ audit_status_list: this.curTab === 'new' ? [0] : [1]
|
|
|
+ }).then(({ student_list, total_count, cur_page }) => {
|
|
|
this.student_list = student_list;
|
|
|
this.total_count = total_count;
|
|
|
this.cur_page = cur_page;
|
|
|
});
|
|
|
},
|
|
|
- changeTab(id) {
|
|
|
+
|
|
|
+ changeTab(tab) {
|
|
|
this.student_list = [];
|
|
|
- this.activeID = id;
|
|
|
+ this.curTab = tab;
|
|
|
this.queryCourseStudentList();
|
|
|
},
|
|
|
+
|
|
|
changePage(newPage) {
|
|
|
this.cur_page = newPage;
|
|
|
this.queryCourseStudentList();
|
|
|
},
|
|
|
+
|
|
|
changePageSize(pageSize) {
|
|
|
this.page_capacity = pageSize;
|
|
|
this.queryCourseStudentList();
|
|
|
},
|
|
|
+
|
|
|
+ sendMessage(type, student_id, student_name) {
|
|
|
+ this.type = type;
|
|
|
+ this.student_id = student_id;
|
|
|
+ if (type === 'all') {
|
|
|
+ this.titleName = '全部';
|
|
|
+ } else {
|
|
|
+ this.titleName = student_name;
|
|
|
+ }
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ sendMessageToCourseStudent(content) {
|
|
|
+ let loading = this.$loading('发送消息中...');
|
|
|
+ SendMessageToCourseStudent({
|
|
|
+ course_id: this.course_id,
|
|
|
+ content,
|
|
|
+ type: this.type,
|
|
|
+ student_id: this.student_id
|
|
|
+ }).then(({ message_count }) => {
|
|
|
+ loading.close();
|
|
|
+ this.visible = false;
|
|
|
+ this.$message.success(`已成功发送${message_count}条消息`);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
auditCourseStudent(course_student_id, is_audited) {
|
|
|
AuditCourseStudent({ course_student_id, is_audited }).then(() => {
|
|
|
this.$message.success('审核课程学员成功！');
|
|
|
@@ -140,7 +179,7 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
+<style lang="scss" scoped>
|
|
|
@import '~@/styles/mixin';
|
|
|
|
|
|
.student-list {
|
|
|
@@ -154,7 +193,6 @@ export default {
|
|
|
&-container {
|
|
|
width: 100%;
|
|
|
min-height: calc(100vh - 240px);
|
|
|
- padding: 24px 32px;
|
|
|
margin-top: 16px;
|
|
|
background-color: #fff;
|
|
|
border-radius: 8px;
|
|
|
@@ -162,10 +200,14 @@ export default {
|
|
|
// 标签
|
|
|
.tabs {
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 68px;
|
|
|
+ padding: 16px 16px 0 32px;
|
|
|
border-bottom: 1px solid #d9d9d9;
|
|
|
|
|
|
&-left {
|
|
|
display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
|
|
|
.tabs-item {
|
|
|
padding-bottom: 16px;
|
|
|
@@ -174,7 +216,7 @@ export default {
|
|
|
|
|
|
&.active {
|
|
|
font-weight: 600;
|
|
|
- border-bottom: 2px solid $basic-color;
|
|
|
+ box-shadow: 0 1px 0 $basic-color, 0 -1px 0 $basic-color inset;
|
|
|
}
|
|
|
|
|
|
&:not(:first-child) {
|
|
|
@@ -182,6 +224,20 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ &-right {
|
|
|
+ .el-button {
|
|
|
+ height: 40px;
|
|
|
+ padding: 8px 16px;
|
|
|
+
|
|
|
+ .svg-icon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 8px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 学员列表
|
|
|
@@ -207,6 +263,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.el-avatar {
|
|
|
+ margin-left: 22px;
|
|
|
vertical-align: sub;
|
|
|
}
|
|
|
|
|
|
@@ -219,3 +276,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.student-list {
|
|
|
+ .student-table {
|
|
|
+ .el-table__header {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
