no message

2026-08-21 11:19:36 +08:00
parent 3bdfc5ecf0
commit 0f66bd1878
76 changed files with 10176 additions and 0 deletions
@@ -0,0 +1,208 @@
+<template>
+  <div class="page-container">
+    <el-card>
+      <div class="toolbar">
+        <el-input
+          v-model="keyword"
+          placeholder="搜索车牌号"
+          clearable
+          style="width: 250px"
+          @keyup.enter="handleSearch"
+          @clear="handleSearch"
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+
+        <el-select v-model="status" placeholder="状态筛选" clearable style="width: 150px" @change="handleSearch">
+          <el-option label="待处理" value="PENDING" />
+          <el-option label="已通过" value="APPROVED" />
+          <el-option label="已驳回" value="REJECTED" />
+          <el-option label="已完成" value="COMPLETED" />
+        </el-select>
+
+        <el-button type="primary" @click="handleSearch">
+          <el-icon><Search /></el-icon>&nbsp;查询
+        </el-button>
+        <el-button type="success" @click="handleCreate">
+          <el-icon><Plus /></el-icon>&nbsp;创建报价
+        </el-button>
+      </div>
+
+      <el-table :data="tableData" v-loading="loading" stripe border>
+        <el-table-column prop="id" label="ID" width="70" align="center" />
+        <el-table-column label="车牌号" width="120">
+          <template #default="{ row }">
+            {{ row.vehicle?.license_plate || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="品牌/车型" width="150">
+          <template #default="{ row }">
+            {{ row.vehicle ? `${row.vehicle.brand} ${row.vehicle.model}` : '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="compulsory_premium" label="交强险(元)" width="110" align="right">
+          <template #default="{ row }">
+            {{ row.compulsory_premium.toLocaleString() }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="commercial_premium" label="商业险(元)" width="110" align="right">
+          <template #default="{ row }">
+            {{ row.commercial_premium.toLocaleString() }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="total_premium" label="总保费(元)" width="120" align="right">
+          <template #default="{ row }">
+            <span class="total-premium">{{ row.total_premium.toLocaleString() }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100" align="center">
+          <template #default="{ row }">
+            <el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="valid_until" label="有效期至" width="120" />
+        <el-table-column label="操作" width="160" align="center">
+          <template #default="{ row }">
+            <el-button type="primary" link @click="handleDetail(row)">详情</el-button>
+            <el-button
+              v-if="row.status === 'PENDING' || row.status === 'REJECTED'"
+              type="warning" link @click="handleEdit(row)"
+            >
+              编辑
+            </el-button>
+            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        class="pagination"
+        v-model:current-page="page"
+        v-model:page-size="pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="fetchData"
+        @size-change="handleSizeChange"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getQuotes, deleteQuote } from '../../api/quote'
+import type { InsuranceQuote, QuoteStatus } from '../../types'
+
+const router = useRouter()
+const loading = ref(false)
+const tableData = ref<InsuranceQuote[]>([])
+const keyword = ref('')
+const status = ref('')
+const page = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+
+function statusLabel(status: string) {
+  const map: Record<string, string> = {
+    PENDING: '待处理',
+    APPROVED: '已通过',
+    REJECTED: '已驳回',
+    COMPLETED: '已完成',
+  }
+  return map[status] || status
+}
+
+function statusType(status: string) {
+  const map: Record<string, 'warning' | 'success' | 'danger' | 'info'> = {
+    PENDING: 'warning',
+    APPROVED: 'success',
+    REJECTED: 'danger',
+    COMPLETED: 'info',
+  }
+  return map[status] || 'info'
+}
+
+async function fetchData() {
+  loading.value = true
+  try {
+    const res = await getQuotes({
+      keyword: keyword.value,
+      status: status.value,
+      page: page.value,
+      pageSize: pageSize.value,
+    })
+    tableData.value = res.data.list
+    total.value = res.data.total
+  } catch (e: any) {
+    ElMessage.error(e.message || '获取报价列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function handleSearch() {
+  page.value = 1
+  fetchData()
+}
+
+function handleSizeChange() {
+  page.value = 1
+  fetchData()
+}
+
+function handleCreate() {
+  router.push('/quotes/create')
+}
+
+function handleDetail(row: InsuranceQuote) {
+  router.push(`/quotes/${row.id}`)
+}
+
+function handleEdit(row: InsuranceQuote) {
+  router.push(`/quotes/${row.id}/edit`)
+}
+
+async function handleDelete(row: InsuranceQuote) {
+  try {
+    await ElMessageBox.confirm(`确定删除报价单 #${row.id} 吗？`, '删除确认', {
+      type: 'warning',
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    })
+    await deleteQuote(row.id)
+    ElMessage.success('删除成功')
+    fetchData()
+  } catch (e: any) {
+    if (e !== 'cancel' && e !== 'close') {
+      ElMessage.error(e.message || '删除失败')
+    }
+  }
+}
+
+onMounted(fetchData)
+</script>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  align-items: center;
+}
+
+.pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.total-premium {
+  font-weight: 700;
+  color: #e6a23c;
+}
+</style>