tiantian-system/app/pages/admin/product/service.vue

<script setup lang="ts">
definePageMeta({ layout: 'admin' })
const { activeTab } = useNav()
activeTab.value = 'product-service'

const activeTabKey = ref('tickets')

const tabs = [
  { key: 'tickets', label: '服务工单' },
  { key: 'feedback', label: '客户反馈' },
  { key: 'warranty', label: '质保管理' },
]

// 服务工单
const tickets = ref([
  { id: 'ST-2026040901', customer: '比亚迪股份有限公司', product: '精密轴承组件 A型', type: '技术支持', status: '处理中', assignee: '张工', createTime: '2026-04-09 10:30', urgent: 'high' },
  { id: 'ST-2026040802', customer: '宁德时代新能源', product: '液压缸体 B型', type: '故障报修', status: '待派单', assignee: '-', createTime: '2026-04-08 15:20', urgent: 'medium' },
  { id: 'ST-2026040801', customer: '华为技术有限公司', product: '传动齿轮组 C型', type: '咨询', status: '已完成', assignee: '李工', createTime: '2026-04-08 09:15', urgent: 'low' },
  { id: 'ST-2026040703', customer: '美的集团', product: '密封圈组件 D型', type: '技术支持', status: '已完成', assignee: '王工', createTime: '2026-04-07 14:00', urgent: 'medium' },
])

const statusColor: Record<string, string> = { '处理中': 'processing', '待派单': 'warning', '已完成': 'success' }
const urgentColor: Record<string, string> = { 'high': 'error', 'medium': 'warning', 'low': 'default' }
const urgentLabel: Record<string, string> = { 'high': '紧急', 'medium': '普通', 'low': '低' }

// 客户反馈
const feedback = ref([
  { id: 'FB-001', customer: '比亚迪股份有限公司', content: '产品性能稳定，交付及时，服务态度好', rating: 5, createTime: '2026-04-08' },
  { id: 'FB-002', customer: '宁德时代新能源', content: '希望增加技术培训频次', rating: 4, createTime: '2026-04-07' },
  { id: 'FB-003', customer: '华为技术有限公司', content: '产品质量可靠，但包装可以改进', rating: 4, createTime: '2026-04-06' },
  { id: 'FB-004', customer: '富士康科技集团', content: '技术响应速度需要提升', rating: 3, createTime: '2026-04-05' },
])

// 质保列表
const warranty = ref([
  { id: 'WA-001', product: '精密轴承组件 A型', batch: 'B-20260301-01', quantity: 500, warrantyPeriod: '2年', expireDate: '2028-03-01', status: '有效' },
  { id: 'WA-002', product: '液压缸体 B型', batch: 'B-20260215-02', quantity: 200, warrantyPeriod: '1年', expireDate: '2027-02-15', status: '有效' },
  { id: 'WA-003', product: '传动齿轮组 C型', batch: 'B-20251201-03', quantity: 1000, warrantyPeriod: '2年', expireDate: '2027-12-01', status: '即将到期' },
])
</script>

<template>
  <div class="page-container">
    <div class="page-header">
      <h2 class="page-title">售后服务</h2>
      <a-button type="primary">
        <template #icon><PlusOutlined /></template>
        新建工单
      </a-button>
    </div>

    <a-tabs v-model:activeKey="activeTabKey">
      <a-tab-pane key="tickets" tab="服务工单">
        <div class="card">
          <a-table :dataSource="tickets" :pagination="{ pageSize: 10 }" size="small" rowKey="id">
            <a-table-column title="工单编号" dataIndex="id" width="150" />
            <a-table-column title="客户" dataIndex="customer" />
            <a-table-column title="产品" dataIndex="product" />
            <a-table-column title="类型" dataIndex="type" width="100" align="center" />
            <a-table-column title="紧急度" dataIndex="urgent" width="90" align="center">
              <template #default="{ text }">
                <a-tag :color="urgentColor[text]">{{ urgentLabel[text] }}</a-tag>
              </template>
            </a-table-column>
            <a-table-column title="状态" dataIndex="status" width="100" align="center">
              <template #default="{ text }">
                <a-badge :status="statusColor[text] === 'processing' ? 'processing' : statusColor[text] === 'success' ? 'success' : 'warning'" :text="text" />
              </template>
            </a-table-column>
            <a-table-column title="处理人" dataIndex="assignee" width="80" align="center" />
            <a-table-column title="创建时间" dataIndex="createTime" width="150" />
            <a-table-column title="操作" width="100" align="center">
              <template #default>
                <a>详情</a>
              </template>
            </a-table-column>
          </a-table>
        </div>
      </a-tab-pane>

      <a-tab-pane key="feedback" tab="客户反馈">
        <div class="card">
          <a-table :dataSource="feedback" :pagination="{ pageSize: 10 }" size="small" rowKey="id">
            <a-table-column title="反馈编号" dataIndex="id" width="100" />
            <a-table-column title="客户" dataIndex="customer" />
            <a-table-column title="反馈内容" dataIndex="content" />
            <a-table-column title="评分" dataIndex="rating" width="120" align="center">
              <template #default="{ text }">
                <a-rate :value="text" disabled :tooltips="['很差', '较差', '一般', '满意', '非常满意']" />
              </template>
            </a-table-column>
            <a-table-column title="时间" dataIndex="createTime" width="120" />
          </a-table>
        </div>
      </a-tab-pane>

      <a-tab-pane key="warranty" tab="质保管理">
        <div class="card">
          <a-table :dataSource="warranty" :pagination="false" size="small" rowKey="id">
            <a-table-column title="产品名称" dataIndex="product" />
            <a-table-column title="批次号" dataIndex="batch" width="160" />
            <a-table-column title="数量" dataIndex="quantity" width="80" align="center" />
            <a-table-column title="质保期" dataIndex="warrantyPeriod" width="90" align="center" />
            <a-table-column title="到期日期" dataIndex="expireDate" width="120" />
            <a-table-column title="状态" dataIndex="status" width="100" align="center">
              <template #default="{ text }">
                <a-tag :color="text === '有效' ? 'success' : 'warning'">{{ text }}</a-tag>
              </template>
            </a-table-column>
            <a-table-column title="操作" width="100" align="center">
              <template #default>
                <a>详情</a>
              </template>
            </a-table-column>
          </a-table>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style scoped>
.page-container { padding: 24px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.page-title { font-size: 20px; font-weight: 600; color: #1f2937; margin: 0; }
.card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; }
</style>