客服可以给会话设置个人备注, 设置 快捷回复
建群自动话术
This commit is contained in:
yml2213
@@ -0,0 +1,136 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { fetchAutoWelcomeMessage, updateAutoWelcomeMessage } from '@/api/chats'
|
||||
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const message = ref('')
|
||||
const editing = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
await loadMessage()
|
||||
})
|
||||
|
||||
async function loadMessage() {
|
||||
loading.value = true
|
||||
try {
|
||||
message.value = await fetchAutoWelcomeMessage()
|
||||
} catch {
|
||||
ElMessage.error('加载自动话术失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!message.value.trim()) {
|
||||
ElMessage.warning('话术内容不能为空')
|
||||
return
|
||||
}
|
||||
saving.value = true
|
||||
try {
|
||||
await updateAutoWelcomeMessage(message.value.trim())
|
||||
ElMessage.success('保存成功')
|
||||
editing.value = false
|
||||
} catch {
|
||||
ElMessage.error('保存失败')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function startEdit() {
|
||||
editing.value = true
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editing.value = false
|
||||
loadMessage()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auto-welcome-config" v-loading="loading">
|
||||
<div class="config-header">
|
||||
<h3>建群自动话术</h3>
|
||||
<p>订单群聊创建后自动发送的欢迎消息</p>
|
||||
</div>
|
||||
<div class="config-content">
|
||||
<template v-if="editing">
|
||||
<el-input
|
||||
v-model="message"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
placeholder="输入建群后自动发送的话术"
|
||||
/>
|
||||
<div class="config-actions">
|
||||
<el-button size="small" @click="cancelEdit">取消</el-button>
|
||||
<el-button size="small" type="primary" :loading="saving" @click="handleSave">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="preview-box">
|
||||
<p>{{ message || '未设置' }}</p>
|
||||
</div>
|
||||
<el-button size="small" @click="startEdit">编辑</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auto-welcome-config {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.config-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.config-header h3 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 16px;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.config-header p {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.config-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.config-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.preview-box {
|
||||
padding: 12px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.preview-box p {
|
||||
margin: 0;
|
||||
color: #374151;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,253 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
fetchQuickReplies,
|
||||
createQuickReply,
|
||||
updateQuickReply,
|
||||
deleteQuickReply,
|
||||
type QuickReply,
|
||||
} from '@/api/chats'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
success: []
|
||||
}>()
|
||||
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
const replies = ref<QuickReply[]>([])
|
||||
const editingId = ref<number | null>(null)
|
||||
const form = ref({
|
||||
title: '',
|
||||
content: '',
|
||||
sort_order: 0,
|
||||
})
|
||||
|
||||
watch(() => props.modelValue, (val) => {
|
||||
visible.value = val
|
||||
if (val) {
|
||||
loadReplies()
|
||||
}
|
||||
})
|
||||
|
||||
watch(visible, (val) => {
|
||||
emit('update:modelValue', val)
|
||||
})
|
||||
|
||||
async function loadReplies() {
|
||||
loading.value = true
|
||||
try {
|
||||
replies.value = await fetchQuickReplies()
|
||||
} catch {
|
||||
ElMessage.error('加载快捷回复失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function resetForm() {
|
||||
form.value = { title: '', content: '', sort_order: 0 }
|
||||
editingId.value = null
|
||||
}
|
||||
|
||||
function startEdit(reply: QuickReply) {
|
||||
editingId.value = reply.id
|
||||
form.value = {
|
||||
title: reply.title,
|
||||
content: reply.content,
|
||||
sort_order: reply.sort_order,
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.value.title || !form.value.content) {
|
||||
ElMessage.warning('标题和内容不能为空')
|
||||
return
|
||||
}
|
||||
try {
|
||||
if (editingId.value) {
|
||||
await updateQuickReply(editingId.value, form.value)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await createQuickReply(form.value.title, form.value.content, form.value.sort_order)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
resetForm()
|
||||
await loadReplies()
|
||||
emit('success')
|
||||
} catch {
|
||||
ElMessage.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(reply: QuickReply) {
|
||||
if (reply.is_global) {
|
||||
ElMessage.warning('不能删除全局快捷回复')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await ElMessageBox.confirm('确定删除这条快捷回复？', '确认删除', {
|
||||
type: 'warning',
|
||||
})
|
||||
await deleteQuickReply(reply.id)
|
||||
ElMessage.success('删除成功')
|
||||
await loadReplies()
|
||||
emit('success')
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
resetForm()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog v-model="visible" title="快捷回复管理" width="600px">
|
||||
<div class="quick-reply-content">
|
||||
<div class="reply-form">
|
||||
<el-input
|
||||
v-model="form.title"
|
||||
placeholder="快捷回复标题"
|
||||
maxlength="64"
|
||||
style="margin-bottom: 8px"
|
||||
/>
|
||||
<el-input
|
||||
v-model="form.content"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="回复内容"
|
||||
maxlength="500"
|
||||
show-word-limit
|
||||
style="margin-bottom: 8px"
|
||||
/>
|
||||
<div class="form-actions">
|
||||
<el-input-number
|
||||
v-model="form.sort_order"
|
||||
:min="0"
|
||||
:max="999"
|
||||
size="small"
|
||||
placeholder="排序"
|
||||
style="width: 120px"
|
||||
/>
|
||||
<div>
|
||||
<el-button v-if="editingId" size="small" @click="handleCancel">取消</el-button>
|
||||
<el-button size="small" type="primary" @click="handleSubmit">
|
||||
{{ editingId ? '更新' : '添加' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reply-list" v-loading="loading">
|
||||
<div
|
||||
v-for="reply in replies"
|
||||
:key="reply.id"
|
||||
class="reply-item"
|
||||
:class="{ global: reply.is_global }"
|
||||
>
|
||||
<div class="reply-info">
|
||||
<div class="reply-header">
|
||||
<span class="reply-title">{{ reply.title }}</span>
|
||||
<el-tag v-if="reply.is_global" size="small" type="info">全局</el-tag>
|
||||
<el-tag v-else size="small" type="success">个人</el-tag>
|
||||
</div>
|
||||
<div class="reply-content">{{ reply.content }}</div>
|
||||
</div>
|
||||
<div class="reply-actions">
|
||||
<el-button link size="small" @click="startEdit(reply)">编辑</el-button>
|
||||
<el-button
|
||||
v-if="!reply.is_global"
|
||||
link
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="handleDelete(reply)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-if="!loading && replies.length === 0" description="暂无快捷回复" />
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.quick-reply-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.reply-form {
|
||||
padding: 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.reply-list {
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.reply-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.reply-item.global {
|
||||
background: #f0f9ff;
|
||||
border-color: #bae6fd;
|
||||
}
|
||||
|
||||
.reply-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.reply-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.reply-title {
|
||||
font-weight: 500;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.reply-content {
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.reply-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { fetchSupportAdmins, transferChat, type SupportAdmin } from '@/api/chats'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
conversationId: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
success: []
|
||||
}>()
|
||||
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
const admins = ref<SupportAdmin[]>([])
|
||||
const selectedAdminId = ref<number | null>(null)
|
||||
|
||||
watch(() => props.modelValue, (val) => {
|
||||
visible.value = val
|
||||
if (val) {
|
||||
loadAdmins()
|
||||
}
|
||||
})
|
||||
|
||||
watch(visible, (val) => {
|
||||
emit('update:modelValue', val)
|
||||
})
|
||||
|
||||
async function loadAdmins() {
|
||||
loading.value = true
|
||||
try {
|
||||
admins.value = await fetchSupportAdmins()
|
||||
} catch {
|
||||
ElMessage.error('加载客服列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!selectedAdminId.value) {
|
||||
ElMessage.warning('请选择目标客服')
|
||||
return
|
||||
}
|
||||
submitting.value = true
|
||||
try {
|
||||
await transferChat(props.conversationId, selectedAdminId.value)
|
||||
ElMessage.success('转接成功')
|
||||
visible.value = false
|
||||
emit('success')
|
||||
} catch {
|
||||
ElMessage.error('转接失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog v-model="visible" title="转接会话" width="400px">
|
||||
<div v-loading="loading" class="transfer-content">
|
||||
<p class="tip">选择要转接给的客服：</p>
|
||||
<el-radio-group v-model="selectedAdminId" class="admin-list">
|
||||
<el-radio
|
||||
v-for="admin in admins"
|
||||
:key="admin.id"
|
||||
:value="admin.id"
|
||||
class="admin-item"
|
||||
>
|
||||
<span class="admin-name">{{ admin.nickname }}</span>
|
||||
<span class="admin-count">当前 {{ admin.chat_count }} 个会话</span>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<el-empty v-if="!loading && admins.length === 0" description="暂无可用客服" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" :disabled="!selectedAdminId" @click="handleSubmit">
|
||||
确认转接
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.transfer-content {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.tip {
|
||||
margin: 0 0 16px;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.admin-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.admin-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: auto;
|
||||
padding: 12px;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.admin-item.is-checked {
|
||||
border-color: #409eff;
|
||||
background: #ecf5ff;
|
||||
}
|
||||
|
||||
.admin-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.admin-count {
|
||||
color: #9ca3af;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user