From 3a1acebed0f523fc7877c359d24618c4cb4332bc Mon Sep 17 00:00:00 2001
From: GiveMePast <1248298477@qq.com>
Date: Sat, 28 Feb 2026 17:46:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8D=A1=E7=89=87=E7=9A=84?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1=E6=96=B9=E5=BC=8F=EF=BC=88?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=E6=8E=A5=E5=8F=A3=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/TicketManagement.vue | 436 +++++++++++++++++++++------------
 1 file changed, 284 insertions(+), 152 deletions(-)

diff --git a/src/views/TicketManagement.vue b/src/views/TicketManagement.vue
index dfbc8b5..afff8d2 100644
--- a/src/views/TicketManagement.vue
+++ b/src/views/TicketManagement.vue
@@ -6,35 +6,45 @@
           <div class="stat-label">总工单数</div>
           <div class="stat-value">{{ allStats.total }}</div>
         </div>
-        <el-icon class="stat-icon"><Memo /></el-icon>
+        <el-icon class="stat-icon">
+          <Memo />
+        </el-icon>
       </div>
       <div class="stat-card pending">
         <div class="stat-info">
           <div class="stat-label">未分配</div>
           <div class="stat-value">{{ allStats.pending }}</div>
         </div>
-        <el-icon class="stat-icon"><Clock /></el-icon>
+        <el-icon class="stat-icon">
+          <Clock />
+        </el-icon>
       </div>
       <div class="stat-card ongoing">
         <div class="stat-info">
           <div class="stat-label">进行中</div>
           <div class="stat-value">{{ allStats.ongoing }}</div>
         </div>
-        <el-icon class="stat-icon"><Loading /></el-icon>
+        <el-icon class="stat-icon">
+          <Loading />
+        </el-icon>
       </div>
       <div class="stat-card success">
         <div class="stat-info">
           <div class="stat-label">已完成</div>
           <div class="stat-value">{{ allStats.completed }}</div>
         </div>
-        <el-icon class="stat-icon"><CircleCheck /></el-icon>
+        <el-icon class="stat-icon">
+          <CircleCheck />
+        </el-icon>
       </div>
       <div class="stat-card finished">
         <div class="stat-info">
           <div class="stat-label">已完结</div>
           <div class="stat-value">{{ allStats.is_completed }}</div>
         </div>
-        <el-icon class="stat-icon"><Checked /></el-icon>
+        <el-icon class="stat-icon">
+          <Checked />
+        </el-icon>
       </div>
     </div>
 
@@ -43,100 +53,112 @@
         <div class="left">
           <el-button type="primary" @click="handleAdd" :icon="Plus">新增任务</el-button>
         </div>
-        <TicketFilter 
-          :operators="operatorsForFilter" 
+        <TicketFilter
+          :operators="operatorsForFilter"
           :staffs="staffList"
           :filters="filters"
           @filter-change="handleFilterChange"
-          @reset="handleFilterReset" 
+          @reset="handleFilterReset"
         />
       </div>
 
-      <TicketList 
-        :tickets="tickets" 
-        :loading="loading" 
-        @edit="handleEdit" 
-        @delete="handleDelete" 
+      <TicketList
+        :tickets="tickets"
+        :loading="loading"
+        @edit="handleEdit"
+        @delete="handleDelete"
       />
 
       <div class="pagination-container">
-        <el-pagination 
-          v-model:current-page="pagination.page" 
+        <el-pagination
+          v-model:current-page="pagination.page"
           v-model:page-size="pagination.limit"
-          :total="pagination.total" 
-          :page-sizes="[15, 30, 50, 100]" 
+          :total="pagination.total"
+          :page-sizes="[15, 30, 50, 100]"
           layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange" 
-          @current-change="handleCurrentChange" 
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
         />
       </div>
     </div>
 
-    <TicketForm 
-      v-model="showAddDialog" 
-      :form-data="currentTicket" 
+    <TicketForm
+      v-model="showAddDialog"
+      :form-data="currentTicket"
       :customers="customerList"
       :customer-employees="allCustomerEmployees"
       :staffs="staffList"
       :is-editing="isEditing"
-      @submit="handleFormSubmit" 
+      @submit="handleFormSubmit"
     />
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, computed} from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Memo, Clock, Loading, CircleCheck, Checked } from '@element-plus/icons-vue'
+import { ref, reactive, onMounted, computed } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import {
+  Plus,
+  Memo,
+  Clock,
+  Loading,
+  CircleCheck,
+  Checked,
+} from "@element-plus/icons-vue";
 
 // API 引入
-import { ticketApi ,customerApi} from '@/api/ticket'
+import { ticketApi, customerApi } from "@/api/ticket";
 
 // 组件引入
-import TicketFilter from '@/components/ticket/TicketFilter.vue'
-import TicketList from '@/components/ticket/TicketList.vue'
-import TicketForm from '@/components/ticket/TicketForm.vue'
+import TicketFilter from "@/components/ticket/TicketFilter.vue";
+import TicketList from "@/components/ticket/TicketList.vue";
+import TicketForm from "@/components/ticket/TicketForm.vue";
 
 // --- 响应式状态 ---
-const tickets = ref([])
-const operators = ref([])            
-const staffList = ref([])             
-const customerList = ref([])          
-const allCustomerEmployees = ref([])  
-const loading = ref(false)
-const showAddDialog = ref(false)
-const isEditing = ref(false)
-const currentTicket = ref({})
+const tickets = ref([]);
+const operators = ref([]);
+const staffList = ref([]);
+const customerList = ref([]);
+const allCustomerEmployees = ref([]);
+const loading = ref(false);
+const showAddDialog = ref(false);
+const isEditing = ref(false);
+const currentTicket = ref({});
 
 const allStats = reactive({
-  total: 0, pending: 0, ongoing: 0, completed: 0, is_completed: 0
-})
+  total: 0,
+  pending: 0,
+  ongoing: 0,
+  completed: 0,
+  is_completed: 0,
+});
 
 const pagination = reactive({
-  page: 1, limit: 15, total: 0
-})
+  page: 1,
+  limit: 15,
+  total: 0,
+});
 
 const filters = reactive({
   status: null,
   operator_name: null,
   staff_id: null,
   search: null,
-  sort_order: 'desc'
-})
+  sort_order: "desc",
+});
 
 // --- 核心数据加载方法 ---
 
-
 // 在 TicketManagement.vue 中利用 computed 提取
 const operatorsForFilter = computed(() => {
   // 返回包含 ID、姓名和公司名的对象数组
-  return allCustomerEmployees.value.map(emp => {
+  return allCustomerEmployees.value.map((emp) => {
     // 在 allCustomers 中找到该员工所属的公司名
-    const company = customerList.value.find(c => c.customer_id === emp.customer_id);
+    const company = customerList.value.find((c) => c.customer_id === emp.customer_id);
     return {
       id: emp.employee_id,
       name: emp.employee_name,
-      company: company ? company.company_name : '未知单位'
+      company: company ? company.company_name : "未知单位",
     };
   });
 });
@@ -147,117 +169,116 @@ const operatorsForFilter = computed(() => {
  */
 const loadCustomerData = async () => {
   try {
-    const res = await customerApi.getCustomers()
+    const res = await customerApi.getCustomers();
     // 适配点：根据返回的 code: 200 逻辑进行判断
     if (res.code === 200) {
       // 适配点：直接从 res 中获取 customers 和 employees 数组
-      customerList.value = res.customers || []
-      allCustomerEmployees.value = res.employees || []
+      customerList.value = res.customers || [];
+      allCustomerEmployees.value = res.employees || [];
     }
   } catch (error) {
-    console.error('获取客户数据失败:', error)
+    console.error("获取客户数据失败:", error);
   }
-}
+};
 
 /**
  * 加载我方员工列表
  */
 const loadStaffData = async () => {
   try {
-    const res = await ticketApi.getStaffs()
+    const res = await ticketApi.getStaffs();
     if (res.code) {
-      staffList.value = res.data
+      staffList.value = res.data;
     }
   } catch (error) {
-    console.error('获取我方员工列表失败:', error)
+    console.error("获取我方员工列表失败:", error);
   }
-}
+};
 
 /**
  * 获取全局统计数据
  */
 const initGlobalStats = async () => {
   try {
-    const response = await ticketApi.getTickets({ page: 1, limit: 1000 })
+    const response = await ticketApi.getticketsstatuscount();
     if (response.code) {
-      const allData = response.data.data
-      allStats.total = response.data.total
-      allStats.pending = allData.filter(t => t.is_complete === '未分配').length
-      allStats.ongoing = allData.filter(t => t.is_complete === '进行中').length
-      allStats.completed = allData.filter(t => t.is_complete === '已完成').length
-      allStats.is_completed = allData.filter(t => t.is_complete === '已完结').length
+      allStats.total = response.data["total"];
+      allStats.pending = response.data["pending"];
+      allStats.ongoing = response.data["ongoing"];
+      allStats.completed = response.data["completed"];
+      allStats.is_completed = response.data["is_completed"];
     }
   } catch (error) {
-    console.error('统计全局数据失败:', error)
+    console.error("统计全局数据失败:", error);
   }
-}
+};
 
 /**
  * 加载列表数据
  */
 const loadTickets = async () => {
-  loading.value = true
+  loading.value = true;
   try {
     const params = {
       page: pagination.page,
       limit: pagination.limit,
-      ...filters
-    }
-    const response = await ticketApi.getTickets(params)
+      ...filters,
+    };
+    const response = await ticketApi.getTickets(params);
     if (response.code) {
-      tickets.value = response.data.data || []
-      pagination.total = response.data.total || 0
+      tickets.value = response.data.data || [];
+      pagination.total = response.data.total || 0;
     }
   } catch (error) {
-    ElMessage.error('加载列表失败')
+    ElMessage.error("加载列表失败");
   } finally {
-    loading.value = false
+    loading.value = false;
   }
-}
+};
 
 const refreshAll = () => {
-  loadTickets()
-  initGlobalStats()
-}
+  loadTickets();
+  initGlobalStats();
+};
 
 // --- 事件处理 ---
 
 const handleFilterChange = (newFilters) => {
-  Object.assign(filters, newFilters)
-  pagination.page = 1
-  loadTickets()
-}
+  Object.assign(filters, newFilters);
+  pagination.page = 1;
+  loadTickets();
+};
 
 const handleFilterReset = () => {
-  Object.assign(filters, { 
-    status: null, 
-    operator_name: null, 
-    staff_id: null, 
-    search: null, 
-    sort_order: 'desc' 
-  })
-  pagination.page = 1
-  loadTickets()
-}
+  Object.assign(filters, {
+    status: null,
+    operator_name: null,
+    staff_id: null,
+    search: null,
+    sort_order: "desc",
+  });
+  pagination.page = 1;
+  loadTickets();
+};
 
 const handleAdd = () => {
-  isEditing.value = false
+  isEditing.value = false;
   currentTicket.value = {
-    website: '',
-    operator: '',
+    website: "",
+    operator: "",
     staff_id: null,
-    is_complete: '未分配',
-    remark: ''
-  }
-  showAddDialog.value = true
-}
+    is_complete: "未分配",
+    remark: "",
+  };
+  showAddDialog.value = true;
+};
 
 // 编辑工单
 const handleEdit = (row) => {
-  isEditing.value = true
-  currentTicket.value = { ...row } 
-  showAddDialog.value = true
-}
+  isEditing.value = true;
+  currentTicket.value = { ...row };
+  showAddDialog.value = true;
+};
 
 // 处理工单提交
 const handleFormSubmit = async (formData) => {
@@ -270,80 +291,191 @@ const handleFormSubmit = async (formData) => {
     }
 
     if (response.code) {
-      ElMessage.success(isEditing.value ? '修改成功 ✨' : '创建成功 🚀');
+      ElMessage.success(isEditing.value ? "修改成功 ✨" : "创建成功 🚀");
       showAddDialog.value = false;
       refreshAll();
     } else {
-      ElMessage.error(response.msg || '操作失败');
+      ElMessage.error(response.msg || "操作失败");
     }
   } catch (error) {
-    ElMessage.error('提交失败，系统异常');
+    ElMessage.error("提交失败，系统异常");
   }
-}
+};
 
 // 删除工单
 const handleDelete = async (id) => {
   try {
-    await ElMessageBox.confirm('确定要删除该工单吗？此操作不可逆', '提示', {
-      type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消'
-    })
-    const res = await ticketApi.deleteTicket(id)
+    await ElMessageBox.confirm("确定要删除该工单吗？此操作不可逆", "提示", {
+      type: "warning",
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+    });
+    const res = await ticketApi.deleteTicket(id);
     // console.log('删除',res)
     if (res.code) {
-      ElMessage.success('删除成功')
-      refreshAll()
+      ElMessage.success("删除成功");
+      refreshAll();
     }
   } catch (error) {
-    if (error !== 'cancel') ElMessage.error('删除失败')
+    if (error !== "cancel") ElMessage.error("删除失败");
   }
-}
+};
 
 // 加载所有运营人员
 const loadOperators = async () => {
   try {
-    const response = await ticketApi.getOperators()
+    const response = await ticketApi.getOperators();
     if (response.code) {
-      operators.value = response.data
+      operators.value = response.data;
     }
   } catch (error) {
-    console.error('获取运营人员筛选列表失败:', error)
+    console.error("获取运营人员筛选列表失败:", error);
   }
-}
+};
 
-const handleSizeChange = (val) => { pagination.limit = val; loadTickets(); }
-const handleCurrentChange = (val) => { pagination.page = val; loadTickets(); }
+const handleSizeChange = (val) => {
+  pagination.limit = val;
+  loadTickets();
+};
+const handleCurrentChange = (val) => {
+  pagination.page = val;
+  loadTickets();
+};
 
 onMounted(() => {
-  loadTickets()
-  initGlobalStats()
-  loadOperators()
-  loadStaffData() 
-  loadCustomerData() // 级联数据加载
-})
+  loadTickets();
+  initGlobalStats();
+  loadOperators();
+  loadStaffData();
+  loadCustomerData(); // 级联数据加载
+});
 </script>
 
 <style scoped>
 /* 样式部分保持不变 */
-.ticket-management { padding: 20px; background-color: #f8fafc; min-height: 100vh; }
-.stats-container { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 16px; margin-bottom: 24px; }
-.stat-card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; border-bottom: 3px solid transparent; }
-.stat-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
-.total { border-bottom-color: #409eff; }
-.total .stat-icon { color: #409eff; background: #ecf5ff; }
-.pending { border-bottom-color: #909399; }
-.pending .stat-icon { color: #909399; background: #f4f4f5; }
-.ongoing { border-bottom-color: #e6a23c; }
-.ongoing .stat-icon { color: #e6a23c; background: #fdf6ec; }
-.success { border-bottom-color: #67c23a; }
-.success .stat-icon { color: #67c23a; background: #f0f9eb; }
-.finished { border-bottom-color: #009688; }
-.finished .stat-icon { color: #009688; background: #e6f6f5; }
-.stat-label { font-size: 13px; color: #64748b; margin-bottom: 8px; font-weight: 500; }
-.stat-value { font-size: 24px; font-weight: 700; color: #1e293b; }
-.stat-icon { font-size: 24px; padding: 12px; border-radius: 10px; }
-.main-content { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
-.action-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
-.pagination-container { margin-top: 20px; display: flex; justify-content: flex-end; }
-@media (max-width: 1400px) { .stats-container { grid-template-columns: repeat(3, 1fr); } }
-@media (max-width: 768px) { .stats-container { grid-template-columns: 1fr 1fr; } }
-</style>
\ No newline at end of file
+.ticket-management {
+  padding: 20px;
+  background-color: #f8fafc;
+  min-height: 100vh;
+}
+
+.stats-container {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(150px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  background: white;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: all 0.3s ease;
+  border-bottom: 3px solid transparent;
+}
+
+.stat-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+.total {
+  border-bottom-color: #409eff;
+}
+
+.total .stat-icon {
+  color: #409eff;
+  background: #ecf5ff;
+}
+
+.pending {
+  border-bottom-color: #909399;
+}
+
+.pending .stat-icon {
+  color: #909399;
+  background: #f4f4f5;
+}
+
+.ongoing {
+  border-bottom-color: #e6a23c;
+}
+
+.ongoing .stat-icon {
+  color: #e6a23c;
+  background: #fdf6ec;
+}
+
+.success {
+  border-bottom-color: #67c23a;
+}
+
+.success .stat-icon {
+  color: #67c23a;
+  background: #f0f9eb;
+}
+
+.finished {
+  border-bottom-color: #009688;
+}
+
+.finished .stat-icon {
+  color: #009688;
+  background: #e6f6f5;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: #64748b;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.stat-icon {
+  font-size: 24px;
+  padding: 12px;
+  border-radius: 10px;
+}
+
+.main-content {
+  background: white;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1400px) {
+  .stats-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .stats-container {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+</style>