79 lines
3.6 KiB
Vue
79 lines
3.6 KiB
Vue
<template>
|
||
<div class="page">
|
||
<div class="page-title"><span class="royal">♛</span> 咨询回复</div>
|
||
<div class="panel" style="padding:12px; margin-bottom: 12px;">
|
||
<el-form :inline="true" :model="q">
|
||
<el-form-item label="状态">
|
||
<el-select v-model="q.status" style="width:140px"><el-option label="未解决" value="open" /><el-option label="已解决" value="resolved" /></el-select>
|
||
</el-form-item>
|
||
<el-form-item label="关键词">
|
||
<el-input v-model="q.kw" placeholder="内容/用户ID" clearable />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="fetch">查询</el-button>
|
||
<el-button @click="reset">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="panel" style="padding:0;">
|
||
<el-table :data="rows" size="large" @row-dblclick="openReply">
|
||
<el-table-column prop="id" label="ID" width="80" />
|
||
<el-table-column prop="userId" label="用户ID" width="100" />
|
||
<el-table-column prop="message" label="内容" />
|
||
<el-table-column prop="replyContent" label="回复内容" />
|
||
<el-table-column label="状态" width="120">
|
||
<template #default="{row}"><el-tag :type="row.status==='resolved'?'success':'warning'">{{ row.status==='resolved'?'已解决':'未解决' }}</el-tag></template>
|
||
</el-table-column>
|
||
<el-table-column fixed="right" label="操作" width="220">
|
||
<template #default="{row}">
|
||
<el-button size="small" type="primary" @click="openReply(row)" :disabled="row.status==='resolved'">回复</el-button>
|
||
<el-button size="small" @click="resolve(row)" v-if="row.status!=='resolved'">标记解决</el-button>
|
||
<el-button size="small" v-if="row.replyContent" @click="viewReply(row)">查看回复</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
|
||
<el-dialog v-model="visible" title="回复咨询" width="560">
|
||
<el-form label-width="96px">
|
||
<el-form-item label="回复内容"><el-input v-model="reply" type="textarea" :rows="5" placeholder="请输入回复..." /></el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="visible=false">取消</el-button>
|
||
<el-button type="primary" @click="sendReply">发送</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import { ElMessageBox } from 'element-plus'
|
||
import { get, post, put } from '../../api/http'
|
||
|
||
const q = reactive({ status: 'open', kw: '' })
|
||
const rows = ref<any[]>([])
|
||
const visible = ref(false)
|
||
const current = ref<any>(null)
|
||
const reply = ref('')
|
||
|
||
async function fetch(){
|
||
// 需要后端提供：GET /api/admin/consults?status=&kw=
|
||
const data = await get<any>('/api/admin/consults', { status: q.status, kw: q.kw })
|
||
rows.value = Array.isArray(data?.list) ? data.list : (Array.isArray(data)?data:[])
|
||
}
|
||
function reset(){ q.status='open'; q.kw=''; fetch() }
|
||
function openReply(row: any){ visible.value = true; current.value = row; reply.value='' }
|
||
async function sendReply(){ await post(`/api/admin/consults/${current.value.id}/reply`, { content: reply.value }); visible.value=false; await fetch() }
|
||
async function resolve(row: any){ await put(`/api/admin/consults/${row.id}/resolve`, {}); row.status = 'resolved' }
|
||
function viewReply(row: any){ ElMessageBox.alert(row.replyContent || '无', '已回复内容', { confirmButtonText: '知道了' }) }
|
||
|
||
onMounted(fetch)
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page { position: relative; z-index: 1; }
|
||
</style>
|
||
|
||
|