145 lines
6.6 KiB
Vue
145 lines
6.6 KiB
Vue
<template>
|
|
<div class="page">
|
|
<el-card class="search-card">
|
|
<el-form :inline="true" :model="searchForm">
|
|
<el-form-item label="投诉类型">
|
|
<el-select v-model="searchForm.type" clearable>
|
|
<el-option label="门店服务态度差" value="门店服务态度差" />
|
|
<el-option label="车辆配置/质量问题" value="车辆配置/质量问题" />
|
|
<el-option label="费用/分成问题" value="费用/分成问题" />
|
|
<el-option label="订单分配不公" value="订单分配不公" />
|
|
<el-option label="门店管理问题" value="门店管理问题" />
|
|
<el-option label="其他" value="其他" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="searchForm.status" clearable>
|
|
<el-option label="待处理" value="待处理" />
|
|
<el-option label="处理中" value="处理中" />
|
|
<el-option label="已解决" value="已解决" />
|
|
<el-option label="已关闭" value="已关闭" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
|
<el-button @click="handleReset">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<el-card>
|
|
<el-table :data="tableData" border stripe>
|
|
<el-table-column prop="complaintId" label="投诉编号" width="140" />
|
|
<el-table-column label="客户" width="100">
|
|
<template #default="{ row }">{{ row.customer?.name || '-' }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="type" label="类型" width="100" />
|
|
<el-table-column prop="content" label="内容" show-overflow-tooltip />
|
|
<el-table-column prop="status" label="状态" width="100">
|
|
<template #default="{ row }">
|
|
<el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="handler" label="处理人" width="100" />
|
|
<el-table-column prop="createdAt" label="创建时间" width="120">
|
|
<template #default="{ row }">{{ formatDate(row.createdAt) }}</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="150">
|
|
<template #default="{ row }">
|
|
<el-button size="small" type="primary" @click="handleEdit(row)">处理</el-button>
|
|
<el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
|
|
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
|
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
|
|
<el-form-item label="类型" prop="type">
|
|
<el-select v-model="form.type">
|
|
<el-option label="门店服务态度差" value="门店服务态度差" />
|
|
<el-option label="车辆配置/质量问题" value="车辆配置/质量问题" />
|
|
<el-option label="费用/分成问题" value="费用/分成问题" />
|
|
<el-option label="订单分配不公" value="订单分配不公" />
|
|
<el-option label="门店管理问题" value="门店管理问题" />
|
|
<el-option label="其他" value="其他" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="内容" prop="content">
|
|
<el-input v-model="form.content" type="textarea" rows="3" />
|
|
</el-form-item>
|
|
<el-form-item label="处理人">
|
|
<el-input v-model="form.handler" />
|
|
</el-form-item>
|
|
<el-form-item label="回复">
|
|
<el-input v-model="form.response" type="textarea" rows="2" />
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="form.status">
|
|
<el-option label="待处理" value="待处理" />
|
|
<el-option label="处理中" value="处理中" />
|
|
<el-option label="已解决" value="已解决" />
|
|
<el-option label="已关闭" value="已关闭" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import api from '../utils/api'
|
|
|
|
const searchForm = ref({ type: '', status: '' })
|
|
const tableData = ref([])
|
|
const dialogVisible = ref(false)
|
|
const dialogTitle = ref('添加投诉')
|
|
const formRef = ref(null)
|
|
const form = ref({ _id: '', type: '', content: '', handler: '', response: '', status: '待处理' })
|
|
const rules = { type: [{ required: true, message: '请选择类型', trigger: 'change' }], content: [{ required: true, message: '请输入内容', trigger: 'blur' }] }
|
|
|
|
const fetchData = async () => {
|
|
const res = await api.get('/complaints')
|
|
if (res.data.success) tableData.value = res.data.data
|
|
}
|
|
const handleSearch = () => {
|
|
let data = [...tableData.value]
|
|
if (searchForm.value.type) data = data.filter(c => c.type === searchForm.value.type)
|
|
if (searchForm.value.status) data = data.filter(c => c.status === searchForm.value.status)
|
|
tableData.value = data
|
|
}
|
|
const handleReset = () => { searchForm.value = { type: '', status: '' }; fetchData() }
|
|
const handleAdd = () => { dialogTitle.value = '添加投诉'; form.value = { _id: '', type: '', content: '', handler: '', response: '', status: '待处理' }; dialogVisible.value = true }
|
|
const handleEdit = (row) => { dialogTitle.value = '处理投诉'; form.value = { ...row }; dialogVisible.value = true }
|
|
const handleSubmit = async () => {
|
|
await formRef.value.validate()
|
|
if (form.value._id) {
|
|
await api.put(`/complaints/${form.value._id}`, form.value)
|
|
ElMessage.success('处理成功')
|
|
} else {
|
|
await api.post('/complaints', form.value)
|
|
ElMessage.success('添加成功')
|
|
}
|
|
dialogVisible.value = false; fetchData()
|
|
}
|
|
const handleDelete = async (row) => {
|
|
await ElMessageBox.confirm('确定删除?', '提示', { type: 'warning' })
|
|
await api.delete(`/complaints/${row._id}`)
|
|
ElMessage.success('删除成功'); fetchData()
|
|
}
|
|
const getStatusType = (status) => ({ '待处理': 'danger', '处理中': 'warning', '已解决': 'success', '已关闭': 'info' }[status] || 'info')
|
|
const formatDate = (d) => d ? new Date(d).toLocaleDateString('zh-CN') : '-'
|
|
onMounted(() => { fetchData() })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.search-card { margin-bottom: 20px; }
|
|
.toolbar { margin-bottom: 20px; }
|
|
</style>
|