<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="backBtn">
|
<el-button @click="goBack()" type="primary" link>
|
<el-icon style="margin-right: 5px"><ArrowLeftBold /></el-icon> 返回
|
</el-button>
|
</div>
|
<div class="talkBox">
|
<div class="leftBox">
|
<div class="MessageCount">{{ dataList.length }} 条回复</div>
|
<div class="inputBox">
|
<el-input v-model="textarea" :rows="8" type="textarea" placeholder="请输入" />
|
<el-button
|
class="submit"
|
:type="textarea.length > 0 ? 'primary' : 'info'"
|
:disabled="textarea.length == 0"
|
round
|
@click="submitText('1')"
|
>
|
回 复
|
</el-button>
|
</div>
|
<div v-if="dataList.length > 0 && !childLoading">
|
<div class="MessageBox" v-for="(item, index) in dataList" :key="index">
|
<div class="MessageHeader">
|
<div class="userBox">
|
<el-avatar
|
:src="
|
item.publicText?.icon ??
|
'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
|
"
|
/>
|
<el-text class="userName mx-1">{{ item.publicText?.publisher }}</el-text>
|
<el-text class="mx-1">{{ item.createDate }}</el-text>
|
</div>
|
<div class="options">
|
<!-- <el-button type="primary" link @click="openSubmit()"> 回复 </el-button> -->
|
<!-- <el-button
|
type="success"
|
link
|
@click="pubTalk(item)"
|
v-if="userInfo.role == 'Teacher' && item.state == 'WaitAudit'"
|
>
|
发布
|
</el-button> -->
|
<el-button
|
type="danger"
|
v-if="userInfo.role == 'Teacher'"
|
link
|
@click="removeMessageItem(item)"
|
>
|
删除
|
</el-button>
|
</div>
|
<!-- <el-dialog v-model="dialogVisible" title="回复话题" width="800">
|
<div class="talkWall">
|
<div class="talKBox">
|
<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="submitText('2')"> 回复 </el-button>
|
</div>
|
</template>
|
</el-dialog> -->
|
</div>
|
<div class="MessageContent" v-html="item.publicText?.content"></div>
|
</div>
|
</div>
|
<div v-if="childLoading" v-loading="childLoading" style="height: 100px"></div>
|
</div>
|
<div class="rightBox" v-if="ownData && !isLoading">
|
<div class="talkHeader">
|
<div class="talkUser">
|
<el-avatar
|
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
/>
|
<el-text class="userName mx-1">{{ ownData?.publicText?.publisher }}</el-text>
|
</div>
|
<el-text class="mx-1">{{ ownData?.updateDate }}</el-text>
|
</div>
|
<div class="talkContent">
|
<div class="contentTilte">{{ ownData?.name }}</div>
|
<div
|
v-if="ownData?.publicText"
|
class="contentText"
|
v-html="ownData?.publicText?.content"
|
></div>
|
<div v-else class="contentText" v-html="ownData?.content"></div>
|
</div>
|
</div>
|
<div class="rightBox" v-if="isLoading" v-loading="isLoading"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { useRoute, useRouter } from 'vue-router'
|
import { ArrowRight } from '@element-plus/icons-vue'
|
import { inject, onMounted, ref } from 'vue'
|
import moment from 'moment'
|
import { ElMessage } from 'element-plus'
|
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
|
|
const route: any = useRoute()
|
const router = useRouter()
|
const classInfo = JSON.parse(route.query.classInfo)
|
const userInfo = ref()
|
const textarea = ref('')
|
const talkContent = ref('')
|
const dialogVisible = ref(false)
|
const MG: any = inject('MG')
|
const config: any = inject('config')
|
const talkTopicInfo = ref()
|
const dataList: any = ref([])
|
const ownData = ref()
|
const isLoading = ref(false)
|
const childLoading = ref(false)
|
|
onMounted(() => {
|
const userCache: any = localStorage.getItem('jesk-userInfo')
|
if (userCache) {
|
userInfo.value = JSON.parse(userCache)
|
}
|
getTopicInfo()
|
})
|
|
const openSubmit = () => {
|
talkContent.value = ''
|
dialogVisible.value = true
|
}
|
|
const submitText = (val: string) => {
|
const userCache: any = localStorage.getItem('jesk-userInfo')
|
const userInfo = JSON.parse(userCache)
|
if (userInfo?.data) {
|
const iconData = JSON.parse(userInfo.data)
|
userInfo.icon = iconData?.relevantCertificates[0]?.md5 ?? ''
|
}
|
const textObj = {
|
content: val == '1' ? textarea.value : talkContent.value,
|
publisher: userInfo?.name ?? '',
|
publishRole: userInfo?.role ?? '',
|
icon: userInfo.icon ?? '',
|
type: userInfo.type ?? ''
|
}
|
const data = {
|
description: '',
|
icon: '',
|
state: 'Normal',
|
parentId: ownData?.value.id,
|
topicIdOrRefCode: String(talkTopicInfo.value.id),
|
name: userInfo?.name,
|
content: JSON.stringify(textObj),
|
type: 'Normal',
|
cmsTypeRefCode: '',
|
newDataListRequest: []
|
}
|
MG.ugc.newTopicMessage(data).then((res: any) => {
|
if (res) {
|
ElMessage({
|
message: '已回复',
|
type: 'success'
|
})
|
dialogVisible.value = false
|
textarea.value = ''
|
getMessageChildren()
|
}
|
})
|
}
|
|
// 获取话题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 getMessage = () => {
|
isLoading.value = true
|
const data = {
|
start: 0,
|
size: 1,
|
searchList: [
|
{
|
keywords: classInfo.MessageName,
|
field: 'Name',
|
compareType: 'Contains'
|
}
|
],
|
appRefCode: config.appRefCode,
|
topicIdOrRefCode: String(talkTopicInfo.value.id)
|
}
|
MG.ugc.getTopicMessageList(data).then((res: any) => {
|
const list = res.datas
|
isLoading.value = false
|
list.map((item: any) => {
|
const str = item.content.indexOf('publisher')
|
if (str > -1) {
|
item.publicText = JSON.parse(item.content)
|
if (item.publicText && item.publicText.publishRole) {
|
item.publicText.publishRole = item.publicText.publishRole == 'Teacher' ? '助教' : '学生'
|
}
|
}
|
item.createDate = moment(item.createDate).format('YYYY-MM-DD HH:mm:ss')
|
item.updateDate = moment(item.updateDate).format('YYYY-MM-DD HH:mm:ss')
|
return {
|
...item
|
}
|
})
|
ownData.value = list[0]
|
getMessageChildren()
|
})
|
}
|
|
// 获取当前话题的回复消息
|
const getMessageChildren = () => {
|
childLoading.value = true
|
const data = {
|
start: 0,
|
size: 999,
|
parentId: ownData?.value.id,
|
topicIdOrRefCode: String(talkTopicInfo.value.id)
|
}
|
MG.ugc.getTopicMessageSubList(data).then((res: any) => {
|
const list = res.datas
|
childLoading.value = false
|
dataList.value = list.map((item: any) => {
|
const str = item.content.indexOf('publisher')
|
if (str > -1) {
|
item.publicText = JSON.parse(item.content)
|
if (item.publicText && item.publicText.publishRole) {
|
item.publicText.publishRole = item.publicText.publishRole == 'Teacher' ? '助教' : '学生'
|
}
|
if (item.publicText?.icon && item.publicText?.type == 'teacherInfo') {
|
item.publicText.icon = getPublicImage(item.publicText?.icon, 60)
|
}
|
}
|
item.createDate = moment(item.createDate).format('YYYY-MM-DD HH:mm:ss')
|
item.updateDate = moment(item.updateDate).format('YYYY-MM-DD HH:mm:ss')
|
return {
|
...item
|
}
|
})
|
})
|
}
|
|
// 删除回复话题
|
const removeMessageItem = (item: any) => {
|
const data = {
|
messageIds: [item.id]
|
}
|
MG.ugc.delTopicMessage(data).then((res: any) => {
|
if (res) {
|
ElMessage({
|
message: '已删除',
|
type: 'success'
|
})
|
}
|
getMessage()
|
})
|
}
|
|
// 审核话题
|
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 goBack = () => {
|
router.go(-1)
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.classManagePage-box {
|
// padding: 20px 0;
|
background: #fff;
|
|
.classManagePage-nav {
|
width: 100%;
|
padding: 0 20px;
|
height: 40px;
|
border-bottom: 1px solid #e6e8ed;
|
position: sticky;
|
top: 0;
|
z-index: 999;
|
display: flex;
|
align-items: center;
|
background: #fff;
|
}
|
.classManagePage-content {
|
width: 100%;
|
position: relative;
|
.backBtn {
|
width: 100%;
|
height: 45px;
|
margin-bottom: 10px;
|
padding: 0 20px;
|
display: flex;
|
align-items: center;
|
position: sticky;
|
top: 40px;
|
z-index: 99;
|
background: #fff;
|
box-shadow: 0px 0px 20px 1px #eee;
|
}
|
.talkBox {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
padding: 0 20px;
|
.leftBox {
|
flex: 1;
|
min-width: 500px;
|
min-height: 700px;
|
background: #ffffff;
|
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.08);
|
border-radius: 5px 5px 5px 5px;
|
border: 1px solid #e7eaec;
|
margin-right: 20px;
|
.MessageCount {
|
padding: 0 30px;
|
width: 100%;
|
height: 60px;
|
border-bottom: 1px solid #e7eaec;
|
line-height: 60px;
|
}
|
:deep(.inputBox) {
|
padding: 20px 30px;
|
position: relative;
|
|
.el-textarea__inner {
|
padding: 15px;
|
padding-bottom: 45px;
|
box-sizing: border-box;
|
}
|
|
.submit {
|
position: absolute;
|
bottom: 30px;
|
right: 40px;
|
}
|
}
|
.MessageBox {
|
width: 100%;
|
padding: 0 30px;
|
.MessageHeader {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.userBox {
|
display: flex;
|
align-items: center;
|
.userName {
|
margin: 0 20px;
|
}
|
}
|
}
|
.MessageContent {
|
padding: 0 60px;
|
padding-bottom: 20px;
|
margin-bottom: 10px;
|
font-family: PingFang SC;
|
font-weight: 400;
|
font-size: 13px;
|
color: #333333;
|
line-height: 25px;
|
border-bottom: 1px solid #e7eaec;
|
}
|
}
|
}
|
.rightBox {
|
width: 650px;
|
min-width: 500px;
|
height: 650px;
|
background: #ffffff;
|
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.08);
|
border-radius: 5px 5px 5px 5px;
|
border: 1px solid #e7eaec;
|
position: sticky;
|
top: 95px;
|
z-index: 99;
|
background: #fff;
|
.talkHeader {
|
width: 100%;
|
padding: 0 30px;
|
height: 60px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1px solid #e7eaec;
|
|
.talkUser {
|
display: flex;
|
align-items: center;
|
.userName {
|
margin-left: 20px;
|
}
|
}
|
}
|
.talkContent {
|
width: 100%;
|
height: calc(100% - 60px);
|
overflow: auto;
|
|
padding: 20px 30px;
|
.contentTilte {
|
font-family: PingFang SC;
|
font-weight: bold;
|
font-size: 16px;
|
color: #333333;
|
margin-bottom: 20px;
|
}
|
.contentText {
|
font-family: PingFang SC;
|
font-weight: 400;
|
font-size: 13px;
|
color: #333333;
|
line-height: 30px;
|
text-align: left;
|
word-break: break-all;
|
word-wrap: break-word;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
