<template>
|
<div class="classManagePage-box">
|
<div class="classManagePage-nav">
|
<el-breadcrumb :separator-icon="ArrowRight">
|
<el-breadcrumb-item>我的班级</el-breadcrumb-item>
|
<el-breadcrumb-item>{{ classInfo?.name }}</el-breadcrumb-item>
|
<el-breadcrumb-item>话题</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
<div class="classManagePage-content">
|
<div class="headerBox">
|
<div class="searchBox">
|
<el-input
|
v-model="searchKey"
|
@clear="searchData()"
|
@keydown.enter="searchData()"
|
clearable
|
placeholder="搜索话题名称"
|
>
|
<template #append>
|
<el-button type="primary" class="searchBtn" @click="searchData()" :icon="Search" />
|
</template>
|
</el-input>
|
</div>
|
<el-button @click="openTalk()" v-if="userInfo?.role == 'Teacher'" type="primary" round>
|
新建 <el-icon><Plus /></el-icon>
|
</el-button>
|
</div>
|
<div class="listBox">
|
<el-table
|
:header-cell-style="{ background: '#eee' }"
|
:data="dataList"
|
border
|
v-loading="isLoading"
|
style="width: 100%"
|
>
|
<el-table-column prop="index" label="序号" width="70" />
|
<el-table-column label="话题名称" width="500">
|
<template #default="scope">
|
<span style="color: #ff6c00" v-if="scope.row.name">{{ scope.row.name }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createDate" label="发起日期" />
|
<el-table-column label="发起人">
|
<template #default="scope">
|
<span v-if="scope.row.publicText">{{ scope.row.publicText.publisher }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="发起人角色">
|
<template #default="scope">
|
<span v-if="scope.row.publicText?.publishRole == 'Teacher'">助教</span>
|
<span v-else>学生</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="updateDate" label="发起人最后回复日期" />
|
<el-table-column label="操作" width="180px">
|
<template #default="scope">
|
<el-button
|
link
|
type="primary"
|
v-if="scope.row.state == 'Normal'"
|
@click="toDetail(scope.row)"
|
>详情</el-button
|
>
|
<el-button
|
link
|
type="success"
|
v-if="scope.row.state != 'Normal'"
|
@click="pubTalk(scope.row)"
|
>发布</el-button
|
>
|
<el-button
|
link
|
type="danger"
|
v-if="userInfo.role == 'Teacher'"
|
@click="delMessageItem(scope.row)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
style="float: right"
|
v-model:current-page="pages.page"
|
:page-size="pages.pageSize"
|
layout="total, prev, pager, next"
|
:total="pages.count"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
<el-dialog v-model="dialogVisible" title="新建话题" width="800">
|
<div class="talkWall">
|
<div class="talKBox">
|
<span>话题标题：</span>
|
<el-input v-model="talkTitle" style="width: 440px" placeholder="请输入标题" />
|
</div>
|
<div class="talKBox">
|
<span>话题内容：</span>
|
<el-input
|
style="flex: 1"
|
v-model="talkContent"
|
:autosize="{ minRows: 10, maxRows: 15 }"
|
type="textarea"
|
placeholder="请输入内容"
|
/>
|
</div>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button @click="dialogVisible = false"> 取消 </el-button>
|
<el-button type="primary" @click="createMessage()"> 确认 </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref, onMounted, inject, watch } from 'vue'
|
import { useRoute, useRouter } from 'vue-router'
|
import { Search, ArrowRight } from '@element-plus/icons-vue'
|
import { ElMessage } from 'element-plus'
|
import moment from 'moment'
|
const route: any = useRoute()
|
const router = useRouter()
|
const MG: any = inject('MG')
|
const config: any = inject('config')
|
const classInfo = JSON.parse(route.query.classInfo)
|
const userInfo = ref()
|
|
const searchKey = ref('')
|
const talkTitle = ref('')
|
const talkContent = ref('')
|
const dialogVisible = ref(false)
|
const talkTopicInfo = ref()
|
const dataList = ref([])
|
const isLoading = ref(false)
|
let pages = reactive({
|
page: 1,
|
pageSize: 10,
|
count: 0,
|
loading: false
|
})
|
|
onMounted(() => {
|
const userCache: any = localStorage.getItem(config.userInfoKey)
|
if (userCache) {
|
userInfo.value = JSON.parse(userCache)
|
}
|
getTopicInfo()
|
})
|
|
const handleSizeChange = (val: number) => {
|
pages.pageSize = val
|
getMessage()
|
}
|
|
const handleCurrentChange = (val: number) => {
|
pages.page = val
|
getMessage()
|
}
|
|
const searchData = () => {
|
pages.page = 1
|
pages.pageSize = 10
|
getMessage()
|
}
|
|
// 获取话题topic
|
const getTopicInfo = () => {
|
const pramas = {
|
classId: classInfo.id,
|
refCodes: [config.refCodes.talk]
|
}
|
MG.edu.getClassTopic(pramas).then((res: any) => {
|
const list = res
|
talkTopicInfo.value = list.find((item: any) => item.refCode == config.refCodes.talk)
|
if (talkTopicInfo.value.id) {
|
getMessage()
|
}
|
})
|
}
|
|
// 新建话题
|
const createMessage = () => {
|
if (talkTitle.value == '') {
|
ElMessage({
|
message: '请填写标题',
|
type: 'warning'
|
})
|
return false
|
}
|
if (talkContent.value == '') {
|
ElMessage({
|
message: '请填写内容',
|
type: 'warning'
|
})
|
return false
|
}
|
newTalkMessage()
|
}
|
|
// 话题详情
|
const toDetail = (item: any) => {
|
const obj = classInfo
|
obj.MessageName = item.name
|
router.push({
|
path: '/talkDetail',
|
query: {
|
classInfo: JSON.stringify(obj)
|
}
|
})
|
}
|
|
const newTalkMessage = () => {
|
const userCache: any = localStorage.getItem(config.userInfoKey)
|
const userInfo = JSON.parse(userCache)
|
const textObj = {
|
content: talkContent.value,
|
publisher: userInfo?.name ?? '',
|
publishRole: userInfo?.role ?? '',
|
icon: userInfo.icon ?? ''
|
}
|
const data = {
|
description: '',
|
icon: '',
|
state: 'Normal',
|
topicIdOrRefCode: String(talkTopicInfo.value.id),
|
name: talkTitle.value,
|
content: JSON.stringify(textObj),
|
type: 'Normal',
|
cmsTypeRefCode: '',
|
newDataListRequest: []
|
}
|
MG.ugc.newTopicMessage(data).then((res: any) => {
|
if (res) {
|
dialogVisible.value = false
|
getMessage()
|
}
|
})
|
}
|
|
// 获取班级话题
|
const getMessage = () => {
|
isLoading.value = true
|
const data = {
|
start: (pages.page - 1) * pages.pageSize,
|
size: pages.pageSize,
|
appRefCode: config.appRefCode,
|
topicIdOrRefCode: String(talkTopicInfo.value.id),
|
searchList: searchKey.value
|
? [
|
{
|
keywords: searchKey.value,
|
field: 'Name',
|
compareType: 'Contains'
|
}
|
]
|
: []
|
}
|
MG.ugc.getTopicMessageList(data).then((res: any) => {
|
const list = res.datas
|
pages.count = res.totalSize
|
isLoading.value = false
|
dataList.value = list.map((item: any, i: number) => {
|
const str = item.content.indexOf('publisher')
|
if (str > -1) {
|
item.publicText = JSON.parse(item.content)
|
}
|
return {
|
...item,
|
index: i + 1,
|
createDate: moment(item.createDate).format('YYYY-MM-DD HH:mm:ss'),
|
updateDate: moment(item.updateDate).format('YYYY-MM-DD HH:mm:ss')
|
}
|
})
|
})
|
}
|
|
// 删除话题
|
const delMessageItem = (item: any) => {
|
const data = {
|
messageIds: [item.id]
|
}
|
MG.ugc
|
.delTopicMessage(data)
|
.then((res: any) => {
|
if (res) {
|
ElMessage.success('已删除')
|
getTopicInfo()
|
}
|
})
|
.catch((err: any) => {
|
ElMessage.error('删除失败，请稍后再试')
|
console.log(err)
|
})
|
}
|
|
// 审核话题
|
const pubTalk = (item: any) => {
|
const data = {
|
id: item.id,
|
name: item.name,
|
description: item.description,
|
icon: item.icon,
|
type: item.type,
|
state: 'Normal',
|
content: JSON.stringify(item.publicText),
|
newDataRequests: [],
|
updateDataRequests: []
|
}
|
MG.ugc
|
.updateTopicMessage(data)
|
.then((res: any) => {
|
if (res) {
|
ElMessage({
|
type: 'success',
|
message: '已发布'
|
})
|
getMessage()
|
}
|
})
|
.catch((err: any) => {
|
console.log(err, '审核话题')
|
})
|
}
|
|
const openTalk = () => {
|
dialogVisible.value = true
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.classManagePage-box {
|
padding: 20px;
|
.classManagePage-nav {
|
padding-bottom: 20px;
|
border-bottom: 1px solid #e6e8ed;
|
}
|
.classManagePage-content {
|
.headerBox {
|
padding: 20px 0;
|
overflow: hidden;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.searchBox {
|
width: 300px;
|
float: left;
|
.searchBtn {
|
background-color: var(--el-color-primary);
|
color: #fff;
|
border-top-left-radius: 0;
|
border-bottom-left-radius: 0;
|
}
|
}
|
}
|
}
|
}
|
.headerCellClass {
|
background-color: red !important;
|
}
|
|
.talkWall {
|
width: 100%;
|
height: auto;
|
.talKBox {
|
display: flex;
|
align-items: baseline;
|
margin-bottom: 20px;
|
}
|
}
|
</style>
|
