273 lines
7.6 KiB
Vue
273 lines
7.6 KiB
Vue
<script setup lang="ts">
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { onMounted, reactive, ref } from 'vue'
|
||
|
||
import {
|
||
createSupportGroup,
|
||
deleteSupportGroup,
|
||
fetchSupportGroupAdmins,
|
||
fetchSupportGroups,
|
||
updateSupportGroup,
|
||
type SaveSupportGroupRequest,
|
||
type SupportGroup,
|
||
type SupportGroupMember,
|
||
} from '@/features/admin/api/supportGroups'
|
||
import { readError } from '@/shared/utils/error'
|
||
|
||
const protectedCodes = new Set(['owner_onboarding', 'renter_handoff'])
|
||
const loading = ref(false)
|
||
const saving = ref(false)
|
||
const groups = ref<SupportGroup[]>([])
|
||
const supportAdmins = ref<SupportGroupMember[]>([])
|
||
const dialogVisible = ref(false)
|
||
const editingGroup = ref<SupportGroup | null>(null)
|
||
const form = reactive<SaveSupportGroupRequest>({
|
||
code: '',
|
||
name: '',
|
||
description: '',
|
||
status: 'active',
|
||
sort_order: 0,
|
||
member_ids: [],
|
||
})
|
||
|
||
onMounted(() => {
|
||
void Promise.all([loadGroups(), loadSupportAdmins()])
|
||
})
|
||
|
||
async function loadGroups() {
|
||
loading.value = true
|
||
try {
|
||
groups.value = await fetchSupportGroups()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '客服分组加载失败'))
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
async function loadSupportAdmins() {
|
||
try {
|
||
supportAdmins.value = await fetchSupportGroupAdmins()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '客服列表加载失败'))
|
||
}
|
||
}
|
||
|
||
function openCreate() {
|
||
editingGroup.value = null
|
||
Object.assign(form, {
|
||
code: '',
|
||
name: '',
|
||
description: '',
|
||
status: 'active',
|
||
sort_order: 0,
|
||
member_ids: [],
|
||
})
|
||
dialogVisible.value = true
|
||
}
|
||
|
||
function openEdit(row: SupportGroup) {
|
||
editingGroup.value = row
|
||
Object.assign(form, {
|
||
code: row.code,
|
||
name: row.name,
|
||
description: row.description,
|
||
status: row.status,
|
||
sort_order: row.sort_order,
|
||
member_ids: row.members.map(item => item.id),
|
||
})
|
||
dialogVisible.value = true
|
||
}
|
||
|
||
async function saveGroup() {
|
||
if (!form.name.trim()) {
|
||
ElMessage.warning('请填写分组名称')
|
||
return
|
||
}
|
||
saving.value = true
|
||
try {
|
||
const payload = {
|
||
...form,
|
||
name: form.name.trim(),
|
||
description: form.description?.trim(),
|
||
member_ids: form.member_ids || [],
|
||
}
|
||
if (editingGroup.value) {
|
||
await updateSupportGroup(editingGroup.value.id, payload)
|
||
ElMessage.success('客服分组已更新')
|
||
} else {
|
||
await createSupportGroup(payload)
|
||
ElMessage.success('客服分组已创建')
|
||
}
|
||
dialogVisible.value = false
|
||
await loadGroups()
|
||
} catch (error) {
|
||
ElMessage.error(readError(error, '保存失败'))
|
||
} finally {
|
||
saving.value = false
|
||
}
|
||
}
|
||
|
||
async function handleDelete(row: SupportGroup) {
|
||
try {
|
||
await ElMessageBox.confirm(`确定删除客服分组「${row.name}」吗？`, '删除确认', {
|
||
confirmButtonText: '确认删除',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
await deleteSupportGroup(row.id)
|
||
ElMessage.success('客服分组已删除')
|
||
await loadGroups()
|
||
} catch {
|
||
// 用户取消或接口已提示
|
||
}
|
||
}
|
||
|
||
function statusLabel(status: string) {
|
||
return status === 'disabled' ? '停用' : '启用'
|
||
}
|
||
|
||
function supportName(item: SupportGroupMember) {
|
||
return item.nickname || item.username
|
||
}
|
||
|
||
function supportStatusLabel(status: string) {
|
||
const map: Record<string, string> = {
|
||
online: '在线',
|
||
busy: '忙碌',
|
||
offline: '离线',
|
||
}
|
||
return map[status] || status
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="page">
|
||
<div class="page-header-row">
|
||
<div class="page-header">
|
||
<p class="eyebrow">Support Groups</p>
|
||
<h1>客服分组</h1>
|
||
<p>配置收号、卖号等业务阶段的客服成员，系统会按分组自动分配群聊客服。</p>
|
||
</div>
|
||
<div class="toolbar-actions">
|
||
<el-button @click="loadGroups">刷新</el-button>
|
||
<el-button type="primary" @click="openCreate">新建分组</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<el-table v-loading="loading" class="table-panel" :data="groups">
|
||
<el-table-column prop="name" label="分组名称" min-width="150" />
|
||
<el-table-column prop="code" label="业务编码" min-width="150" />
|
||
<el-table-column prop="description" label="说明" min-width="240" />
|
||
<el-table-column label="成员" min-width="260">
|
||
<template #default="{ row }">
|
||
<div class="member-tags">
|
||
<el-tag v-for="member in row.members" :key="member.id" size="small">
|
||
{{ supportName(member) }}
|
||
</el-tag>
|
||
<span v-if="!row.members?.length" class="muted">未配置</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" width="90">
|
||
<template #default="{ row }">
|
||
<el-tag :type="row.status === 'disabled' ? 'info' : 'success'" size="small">
|
||
{{ statusLabel(row.status) }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="sort_order" label="排序" width="80" align="center" />
|
||
<el-table-column label="操作" width="170" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button size="small" @click="openEdit(row)">编辑</el-button>
|
||
<el-button
|
||
v-if="!protectedCodes.has(row.code)"
|
||
size="small"
|
||
type="danger"
|
||
@click="handleDelete(row)"
|
||
>
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<el-dialog
|
||
v-model="dialogVisible"
|
||
:title="editingGroup ? '编辑客服分组' : '新建客服分组'"
|
||
width="560px"
|
||
>
|
||
<el-form label-position="top">
|
||
<el-form-item label="分组名称">
|
||
<el-input v-model="form.name" placeholder="例如：收号组-客服" />
|
||
</el-form-item>
|
||
<el-form-item label="业务编码">
|
||
<el-input
|
||
v-model="form.code"
|
||
:disabled="Boolean(editingGroup)"
|
||
placeholder="留空自动生成；默认分组编码不可修改"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="说明">
|
||
<el-input v-model="form.description" type="textarea" :rows="2" />
|
||
</el-form-item>
|
||
<div class="form-grid">
|
||
<el-form-item label="状态">
|
||
<el-select v-model="form.status">
|
||
<el-option label="启用" value="active" />
|
||
<el-option label="停用" value="disabled" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="排序">
|
||
<el-input-number v-model="form.sort_order" :min="0" :step="10" />
|
||
</el-form-item>
|
||
</div>
|
||
<el-form-item label="客服成员">
|
||
<el-select
|
||
v-model="form.member_ids"
|
||
multiple
|
||
filterable
|
||
collapse-tags
|
||
collapse-tags-tooltip
|
||
placeholder="选择客服人员"
|
||
>
|
||
<el-option
|
||
v-for="admin in supportAdmins"
|
||
:key="admin.id"
|
||
:label="`${supportName(admin)}（${supportStatusLabel(admin.support_status)}）`"
|
||
:value="admin.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="dialogVisible = false">取消</el-button>
|
||
<el-button type="primary" :loading="saving" @click="saveGroup">保存</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.toolbar-actions,
|
||
.member-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.muted {
|
||
color: #8f9bba;
|
||
}
|
||
|
||
.form-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
:deep(.el-select) {
|
||
width: 100%;
|
||
}
|
||
</style>
|