|
|
@@ -0,0 +1,387 @@
|
|
|
+<template>
|
|
|
+ <div class="app-page">
|
|
|
+ <section class="glass-card section-card">
|
|
|
+ <el-form :model="filters" inline class="filter-form">
|
|
|
+ <el-form-item label="工单号">
|
|
|
+ <el-input v-model="filters.ticketNo" placeholder="工单号" clearable style="width:170px" @keyup.enter="loadData" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="工单类型">
|
|
|
+ <el-select v-model="filters.type" placeholder="全部" clearable style="width:130px">
|
|
|
+ <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="filters.priority" placeholder="全部" clearable style="width:120px">
|
|
|
+ <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="filters.status" placeholder="全部" clearable style="width:130px">
|
|
|
+ <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="loadData">查询</el-button>
|
|
|
+ <el-button @click="resetFilters">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="glass-card section-card" style="padding:12px 24px">
|
|
|
+ <div class="table-toolbar" style="margin-bottom:0">
|
|
|
+ <div class="chip-list">
|
|
|
+ <el-button type="primary" @click="openCreate">新建工单</el-button>
|
|
|
+ </div>
|
|
|
+ <el-button @click="loadData">刷新</el-button>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="glass-card section-card">
|
|
|
+ <el-table :data="filteredItems" stripe style="width:100%" v-loading="loading">
|
|
|
+ <el-table-column prop="ticketNo" label="工单号" width="170" />
|
|
|
+ <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
|
|
|
+ <el-table-column prop="type" label="类型" width="80">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="typeTag(row.type)" size="small">{{ row.type }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="priority" label="优先级" width="80">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="priorityTag(row.priority)" size="small">{{ row.priority }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态" width="90">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="statusTag(row.status)" size="small">{{ row.status }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="creator" label="创建人" width="100" />
|
|
|
+ <el-table-column prop="handler" label="处理人" width="100" />
|
|
|
+ <el-table-column prop="relatedOrder" label="关联订单" width="140">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button v-if="row.relatedOrder" link type="primary">{{ row.relatedOrder }}</el-button>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createdAt" label="创建时间" width="160" />
|
|
|
+ <el-table-column prop="updateTime" label="更新时间" width="160" />
|
|
|
+ <el-table-column label="操作" width="160" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button link type="primary" @click="openDetail(row)">处理</el-button>
|
|
|
+ <el-button link type="primary" @click="assignHandler(row)" v-if="row.status === '待处理'">分配</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <el-empty description="暂无数据" />
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <el-dialog v-model="createVisible" title="新建工单" width="560px" destroy-on-close>
|
|
|
+ <el-form :model="createForm" label-width="100px">
|
|
|
+ <el-form-item label="工单类型" required>
|
|
|
+ <el-select v-model="createForm.type" placeholder="选择类型" style="width:100%">
|
|
|
+ <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="优先级" required>
|
|
|
+ <el-select v-model="createForm.priority" placeholder="选择优先级" style="width:100%">
|
|
|
+ <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="工单标题" required>
|
|
|
+ <el-input v-model="createForm.title" placeholder="请输入工单标题" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="关联订单">
|
|
|
+ <el-input v-model="createForm.relatedOrder" placeholder="关联订单号（可选）" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="问题描述" required>
|
|
|
+ <el-input v-model="createForm.content" type="textarea" :rows="4" placeholder="请详细描述问题" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="附件">
|
|
|
+ <el-upload action="#" :auto-upload="false" :limit="3">
|
|
|
+ <el-button size="small">上传附件</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="createVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmCreate">提交工单</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <el-drawer v-model="detailVisible" title="工单处理" size="600px">
|
|
|
+ <template v-if="detailItem">
|
|
|
+ <el-descriptions :column="2" border style="margin-bottom:16px">
|
|
|
+ <el-descriptions-item label="工单号">{{ detailItem.ticketNo }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="状态">
|
|
|
+ <el-tag :type="statusTag(detailItem.status)">{{ detailItem.status }}</el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="类型">
|
|
|
+ <el-tag :type="typeTag(detailItem.type)">{{ detailItem.type }}</el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="优先级">
|
|
|
+ <el-tag :type="priorityTag(detailItem.priority)">{{ detailItem.priority }}</el-tag>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="创建人">{{ detailItem.creator }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="处理人">{{ detailItem.handler }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="关联订单" :span="2">
|
|
|
+ <el-button v-if="detailItem.relatedOrder" link type="primary">{{ detailItem.relatedOrder }}</el-button>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </el-descriptions-item>
|
|
|
+ <el-descriptions-item label="创建时间" :span="2">{{ detailItem.createdAt }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <h4 style="margin:0 0 12px">问题描述</h4>
|
|
|
+ <div class="glass-card" style="padding:12px;margin-bottom:16px">
|
|
|
+ <p style="margin:0">{{ detailItem.content }}</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h4 style="margin:0 0 12px">处理记录</h4>
|
|
|
+ <el-timeline>
|
|
|
+ <el-timeline-item v-for="(log, idx) in detailItem.logs" :key="idx" :timestamp="log.time" :type="log.type">
|
|
|
+ <strong>{{ log.operator }}</strong>
|
|
|
+ <div style="color:var(--cb-text-soft);margin-top:4px">{{ log.action }}</div>
|
|
|
+ </el-timeline-item>
|
|
|
+ </el-timeline>
|
|
|
+
|
|
|
+ <div v-if="detailItem.status !== '已完结'" style="margin-top:16px">
|
|
|
+ <h4 style="margin:0 0 12px">处理操作</h4>
|
|
|
+ <el-form label-position="top">
|
|
|
+ <el-form-item label="回复内容">
|
|
|
+ <el-input v-model="replyContent" type="textarea" :rows="3" placeholder="输入回复内容" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div class="chip-list">
|
|
|
+ <el-button type="primary" @click="submitReply">提交回复</el-button>
|
|
|
+ <el-button v-if="detailItem.status === '处理中'" type="success" @click="requestConfirm">请求确认</el-button>
|
|
|
+ <el-button v-if="detailItem.status === '待确认'" type="success" @click="closeTicket">完结工单</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-drawer>
|
|
|
+
|
|
|
+ <el-dialog v-model="assignVisible" title="分配处理人" width="400px">
|
|
|
+ <el-form label-position="top">
|
|
|
+ <el-form-item label="选择处理人">
|
|
|
+ <el-select v-model="assignHandlerId" placeholder="选择处理人" style="width:100%">
|
|
|
+ <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="assignVisible = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmAssign">确认分配</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed, onMounted, reactive, ref } from 'vue';
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
+
|
|
|
+interface TicketItem {
|
|
|
+ ticketNo: string;
|
|
|
+ title: string;
|
|
|
+ type: string;
|
|
|
+ priority: string;
|
|
|
+ status: string;
|
|
|
+ creator: string;
|
|
|
+ handler: string;
|
|
|
+ relatedOrder: string;
|
|
|
+ content: string;
|
|
|
+ createdAt: string;
|
|
|
+ updateTime: string;
|
|
|
+ logs: { time: string; operator: string; action: string; type: string }[];
|
|
|
+}
|
|
|
+
|
|
|
+const items = ref<TicketItem[]>([
|
|
|
+ { ticketNo: 'TK-20260420-001', title: '订单发货延迟咨询', type: '咨询', priority: '中', status: '待处理', creator: 'Olivia Zhang', handler: '-', relatedOrder: 'OMS-20260419-0012', content: '您好，我有一笔订单已经等待发货3天了，请问是什么原因导致的延迟？订单号：OMS-20260419-0012', createdAt: '2026-04-20 09:30:00', updateTime: '2026-04-20 09:30:00', logs: [] },
|
|
|
+ { ticketNo: 'TK-20260420-002', title: '商品破损投诉', type: '投诉', priority: '高', status: '处理中', creator: 'Noah Smith', handler: '张丽', relatedOrder: 'OMS-20260418-0008', content: '收到的行李箱角部有凹陷，包装也有破损，请求退货退款处理', createdAt: '2026-04-20 08:15:00', updateTime: '2026-04-20 10:20:00', logs: [{ time: '2026-04-20 10:20:00', operator: '张丽', action: '已联系物流公司核实，等待回复', type: 'primary' }] },
|
|
|
+ { ticketNo: 'TK-20260419-003', title: '退换货申请', type: '售后', priority: '紧急', status: '待确认', creator: 'Emma Wilson', handler: '李梅', relatedOrder: 'OMS-20260418-0015', content: '背包拉链损坏，无法正常使用，申请换货', createdAt: '2026-04-19 16:45:00', updateTime: '2026-04-20 11:30:00', logs: [{ time: '2026-04-19 17:00:00', operator: '李梅', action: '已审核通过，等待用户寄回商品', type: 'success' }, { time: '2026-04-20 11:30:00', operator: '系统', action: '用户已填写退货物流单号', type: 'info' }] },
|
|
|
+ { ticketNo: 'TK-20260419-004', title: '发票开具咨询', type: '咨询', priority: '低', status: '已完结', creator: 'Liam Chen', handler: '张丽', relatedOrder: 'OMS-20260419-0022', content: '请问如何申请开具增值税发票？', createdAt: '2026-04-19 14:20:00', updateTime: '2026-04-19 15:00:00', logs: [{ time: '2026-04-19 14:30:00', operator: '张丽', action: '已发送发票申请指引', type: 'primary' }, { time: '2026-04-19 15:00:00', operator: '系统', action: '用户确认问题已解决，工单完结', type: 'success' }] },
|
|
|
+ { ticketNo: 'TK-20260418-005', title: '账户异常问题', type: '其他', priority: '中', status: '待处理', creator: 'Sophie Brown', handler: '-', relatedOrder: '', content: '无法登录账户，提示密码错误但我已经确认密码正确', createdAt: '2026-04-18 11:30:00', updateTime: '2026-04-18 11:30:00', logs: [] }
|
|
|
+]);
|
|
|
+
|
|
|
+const loading = ref(false);
|
|
|
+const createVisible = ref(false);
|
|
|
+const detailVisible = ref(false);
|
|
|
+const assignVisible = ref(false);
|
|
|
+const detailItem = ref<TicketItem | null>(null);
|
|
|
+const assignHandlerId = ref('');
|
|
|
+const replyContent = ref('');
|
|
|
+
|
|
|
+const filters = ref({ ticketNo: '', type: '', priority: '', status: '' });
|
|
|
+
|
|
|
+const createForm = reactive({
|
|
|
+ type: '',
|
|
|
+ priority: '',
|
|
|
+ title: '',
|
|
|
+ relatedOrder: '',
|
|
|
+ content: ''
|
|
|
+});
|
|
|
+
|
|
|
+const filteredItems = computed(() => {
|
|
|
+ return items.value.filter(item => {
|
|
|
+ if (filters.value.ticketNo && !item.ticketNo.includes(filters.value.ticketNo)) return false;
|
|
|
+ if (filters.value.type && item.type !== filters.value.type) return false;
|
|
|
+ if (filters.value.priority && item.priority !== filters.value.priority) return false;
|
|
|
+ if (filters.value.status && item.status !== filters.value.status) return false;
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+const typeTag = (type: string) => {
|
|
|
+ const map: Record<string, string> = { '咨询': '', '投诉': 'danger', '售后': 'warning', '其他': 'info' };
|
|
|
+ return map[type] || '';
|
|
|
+};
|
|
|
+
|
|
|
+const priorityTag = (priority: string) => {
|
|
|
+ const map: Record<string, string> = { '紧急': 'danger', '高': 'warning', '中': '', '低': 'info' };
|
|
|
+ return map[priority] || '';
|
|
|
+};
|
|
|
+
|
|
|
+const statusTag = (status: string) => {
|
|
|
+ const map: Record<string, string> = { '待处理': 'warning', '处理中': 'primary', '待确认': '', '已完结': 'success' };
|
|
|
+ return map[status] || '';
|
|
|
+};
|
|
|
+
|
|
|
+const loadData = () => {
|
|
|
+ loading.value = true;
|
|
|
+ setTimeout(() => { loading.value = false; }, 300);
|
|
|
+};
|
|
|
+
|
|
|
+const resetFilters = () => {
|
|
|
+ filters.value = { ticketNo: '', type: '', priority: '', status: '' };
|
|
|
+};
|
|
|
+
|
|
|
+const openCreate = () => {
|
|
|
+ Object.assign(createForm, { type: '', priority: '', title: '', relatedOrder: '', content: '' });
|
|
|
+ createVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const confirmCreate = async () => {
|
|
|
+ if (!createForm.type || !createForm.priority || !createForm.title || !createForm.content) {
|
|
|
+ ElMessage.warning('请填写必填项');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const newTicket: TicketItem = {
|
|
|
+ ticketNo: `TK-${new Date().toISOString().slice(0, 10).replace(/-/g, '')}-${String(items.value.length + 1).padStart(3, '0')}`,
|
|
|
+ ...createForm,
|
|
|
+ status: '待处理',
|
|
|
+ creator: '当前用户',
|
|
|
+ handler: '-',
|
|
|
+ createdAt: new Date().toLocaleString(),
|
|
|
+ updateTime: new Date().toLocaleString(),
|
|
|
+ logs: []
|
|
|
+ };
|
|
|
+ items.value.unshift(newTicket);
|
|
|
+ createVisible.value = false;
|
|
|
+ ElMessage.success('工单已创建');
|
|
|
+};
|
|
|
+
|
|
|
+const openDetail = (row: TicketItem) => {
|
|
|
+ detailItem.value = row;
|
|
|
+ replyContent.value = '';
|
|
|
+ detailVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const assignHandler = (row: TicketItem) => {
|
|
|
+ detailItem.value = row;
|
|
|
+ assignHandlerId.value = '';
|
|
|
+ assignVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+const confirmAssign = async () => {
|
|
|
+ if (!assignHandlerId.value) {
|
|
|
+ ElMessage.warning('请选择处理人');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const idx = items.value.findIndex(t => t.ticketNo === detailItem.value!.ticketNo);
|
|
|
+ if (idx !== -1) {
|
|
|
+ items.value[idx].handler = assignHandlerId.value;
|
|
|
+ items.value[idx].status = '处理中';
|
|
|
+ items.value[idx].updateTime = new Date().toLocaleString();
|
|
|
+ }
|
|
|
+ assignVisible.value = false;
|
|
|
+ ElMessage.success(`已分配给 ${assignHandlerId.value}`);
|
|
|
+};
|
|
|
+
|
|
|
+const submitReply = async () => {
|
|
|
+ if (!replyContent.value) {
|
|
|
+ ElMessage.warning('请输入回复内容');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const idx = items.value.findIndex(t => t.ticketNo === detailItem.value!.ticketNo);
|
|
|
+ if (idx !== -1) {
|
|
|
+ items.value[idx].logs.push({
|
|
|
+ time: new Date().toLocaleString(),
|
|
|
+ operator: '当前用户',
|
|
|
+ action: replyContent.value,
|
|
|
+ type: 'primary'
|
|
|
+ });
|
|
|
+ items.value[idx].updateTime = new Date().toLocaleString();
|
|
|
+ detailItem.value = items.value[idx];
|
|
|
+ }
|
|
|
+ replyContent.value = '';
|
|
|
+ ElMessage.success('回复已提交');
|
|
|
+};
|
|
|
+
|
|
|
+const requestConfirm = async () => {
|
|
|
+ const idx = items.value.findIndex(t => t.ticketNo === detailItem.value!.ticketNo);
|
|
|
+ if (idx !== -1) {
|
|
|
+ items.value[idx].status = '待确认';
|
|
|
+ items.value[idx].logs.push({
|
|
|
+ time: new Date().toLocaleString(),
|
|
|
+ operator: '系统',
|
|
|
+ action: '已提交确认请求，等待用户确认',
|
|
|
+ type: 'info'
|
|
|
+ });
|
|
|
+ detailItem.value = items.value[idx];
|
|
|
+ }
|
|
|
+ ElMessage.success('已提交确认请求');
|
|
|
+};
|
|
|
+
|
|
|
+const closeTicket = async () => {
|
|
|
+ await ElMessageBox.confirm('确认完结此工单？', '完结确认');
|
|
|
+ const idx = items.value.findIndex(t => t.ticketNo === detailItem.value!.ticketNo);
|
|
|
+ if (idx !== -1) {
|
|
|
+ items.value[idx].status = '已完结';
|
|
|
+ items.value[idx].logs.push({
|
|
|
+ time: new Date().toLocaleString(),
|
|
|
+ operator: '系统',
|
|
|
+ action: '工单已完结',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ detailItem.value = items.value[idx];
|
|
|
+ }
|
|
|
+ ElMessage.success('工单已完结');
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(loadData);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.filter-form :deep(.el-form-item) { margin-bottom: 0; }
|
|
|
+</style>
|
docker