最新修改，初版

src/views/TicketManagement.vue

@@ -1,21 +1,40 @@
 <template>
   <div class="ticket-management">
     <div class="stats-container">
-      <div class="stat-item total">
-        <div class="stat-label">总工单数</div>
-        <div class="stat-value">{{ allStats.total }}</div>
+      <div class="stat-card total">
+        <div class="stat-info">
+          <div class="stat-label">总工单数</div>
+          <div class="stat-value">{{ allStats.total }}</div>
+        </div>
+        <el-icon class="stat-icon"><Memo /></el-icon>
       </div>
-      <div class="stat-item pending">
-        <div class="stat-label">未分配</div>
-        <div class="stat-value">{{ allStats.pending }}</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>
       </div>
-      <div class="stat-item ongoing">
-        <div class="stat-label">进行中</div>
-        <div class="stat-value">{{ allStats.ongoing }}</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>
       </div>
-      <div class="stat-item success">
-        <div class="stat-label">已完成/已完结</div>
-        <div class="stat-value">{{ allStats.completed }}</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>
+      </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>
       </div>
     </div>
 
@@ -24,80 +43,149 @@
         <div class="left">
           <el-button type="primary" @click="handleAdd" :icon="Plus">新增任务</el-button>
         </div>
-        <TicketFilter :filters="filters" :operators="operators" @filter-change="handleFilterChange"
-          @reset="handleFilterReset" />
+        <TicketFilter 
+          :operators="operatorsForFilter" 
+          :staffs="staffList"
+          :filters="filters"
+          @filter-change="handleFilterChange"
+          @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" v-model:page-size="pagination.limit"
-          :total="pagination.total" :page-sizes="[15, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        <el-pagination 
+          v-model:current-page="pagination.page" 
+          v-model:page-size="pagination.limit"
+          :total="pagination.total" 
+          :page-sizes="[15, 30, 50, 100]" 
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange" 
+          @current-change="handleCurrentChange" 
+        />
       </div>
     </div>
 
-    <TicketForm v-model="showAddDialog" :form-data="currentTicket" :operators="operators" :is-editing="isEditing"
-      @submit="handleFormSubmit" />
+    <TicketForm 
+      v-model="showAddDialog" 
+      :form-data="currentTicket" 
+      :customers="customerList"
+      :customer-employees="allCustomerEmployees"
+      :staffs="staffList"
+      :is-editing="isEditing"
+      @submit="handleFormSubmit" 
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed} from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
-import { ticketApi } from '@/api/ticket'
+import { Plus, Memo, Clock, Loading, CircleCheck, Checked } from '@element-plus/icons-vue'
+
+// API 引入
+import { ticketApi ,customerApi} from '@/api/ticket'
+
+// 组件引入
 import TicketFilter from '@/components/TicketFilter.vue'
 import TicketList from '@/components/TicketList.vue'
 import TicketForm from '@/components/TicketForm.vue'
 
-// --- 响应式数据 ---
+// --- 响应式状态 ---
 const tickets = ref([])
-const operators = 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
+  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,
-  principalpeople: null,
+  staff_id: null,
   search: null,
   sort_order: 'desc'
 })
 
-// --- 方法 ---
+// --- 核心数据加载方法 ---
+
+
+// 在 TicketManagement.vue 中利用 computed 提取
+const operatorsForFilter = computed(() => {
+  // 返回包含 ID、姓名和公司名的对象数组
+  return allCustomerEmployees.value.map(emp => {
+    // 在 allCustomers 中找到该员工所属的公司名
+    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 : '未知单位'
+    };
+  });
+});
 
 /**
- * 核心：获取全局统计数据
- * 逻辑：发送一个不带任何 filters 的请求，专门计算总数
+ * 加载客户单位及对应员工数据
+ * 根据你提供的接口返回结构进行了适配
+ */
+const loadCustomerData = async () => {
+  try {
+    const res = await customerApi.getCustomers()
+    // 适配点：根据返回的 code: 200 逻辑进行判断
+    if (res.code === 200) {
+      // 适配点：直接从 res 中获取 customers 和 employees 数组
+      customerList.value = res.customers || []
+      allCustomerEmployees.value = res.employees || []
+    }
+  } catch (error) {
+    console.error('获取客户数据失败:', error)
+  }
+}
+
+/**
+ * 加载我方员工列表
+ */
+const loadStaffData = async () => {
+  try {
+    const res = await ticketApi.getStaffs()
+    if (res.code) {
+      staffList.value = res.data
+    }
+  } catch (error) {
+    console.error('获取我方员工列表失败:', error)
+  }
+}
+
+/**
+ * 获取全局统计数据
  */
 const initGlobalStats = async () => {
   try {
-    // 请求第一页，且不带任何筛选条件（filters）
-    // 目的只是为了拿到全量数据来统计卡片
     const response = await ticketApi.getTickets({ page: 1, limit: 1000 })
     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 === '已完成' || t.is_complete === '已完结').length
+      allStats.completed = allData.filter(t => t.is_complete === '已完成').length
+      allStats.is_completed = allData.filter(t => t.is_complete === '已完结').length
     }
   } catch (error) {
     console.error('统计全局数据失败:', error)
@@ -105,7 +193,7 @@ const initGlobalStats = async () => {
 }
 
 /**
- * 加载列表数据（受分页和筛选影响）
+ * 加载列表数据
  */
 const loadTickets = async () => {
   loading.value = true
@@ -116,10 +204,9 @@ const loadTickets = async () => {
       ...filters
     }
     const response = await ticketApi.getTickets(params)
-    // console.log('工单列表响应:', response)
     if (response.code) {
-      tickets.value = response.data.data
-      pagination.total = response.total
+      tickets.value = response.data.data || []
+      pagination.total = response.data.total || 0
     }
   } catch (error) {
     ElMessage.error('加载列表失败')
@@ -128,195 +215,135 @@ const loadTickets = async () => {
   }
 }
 
-// 筛选逻辑
-const handleFilterChange = (newFilters) => {
-  Object.assign(filters, newFilters)
-  pagination.page = 1
-  loadTickets() // 只刷新列表，不刷新卡片
-}
-
-const handleFilterReset = () => {
-  Object.assign(filters, { status: null, operator_name: null, principalpeople: null, search: null, sort_order: 'desc' })
-  pagination.page = 1
-  loadTickets()
-}
-
-// 新增/编辑/删除后，需要同时刷新列表和统计卡片
 const refreshAll = () => {
   loadTickets()
   initGlobalStats()
 }
 
-const handleFormSubmit = async (formData) => {
-  // ... 提交逻辑 ...
-  // 成功后调用 refreshAll()
+// --- 事件处理 ---
+
+const handleFilterChange = (newFilters) => {
+  Object.assign(filters, newFilters)
+  pagination.page = 1
+  loadTickets()
 }
 
-const handleDelete = async (id) => {
-  try {
-    // 1. 弹出二次确认框，防止用户点错
-    await ElMessageBox.confirm(
-      '确定要删除该工单吗？此操作不可逆',
-      '提示',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-    )
-
-    // 2. 开启 loading（如果有的话）
-    // loading.value = true 
-
-    // 3. 调用 API 发送删除请求
-    const res = await ticketApi.deleteTicket(id)
-    // console.log('删除响应:', res)
-
-    // 4. 根据你的后端返回结构判断是否成功
-    // 假设后端返回 code 为 200 表示成功
-    if (res.code) {
-      ElMessage.success('删除成功')
-
-      // 5. 成功后调用刷新列表的方法
-      if (typeof refreshAll === 'function') {
-        refreshAll()
-      }
-    } else {
-      ElMessage.error(res.message || '删除失败')
-    }
-  } catch (error) {
-    // 处理取消操作或接口报错
-    if (error !== 'cancel') {
-      console.error('删除出错：', error)
-      ElMessage.error('系统错误，删除失败')
-    }
-  } finally {
-    // loading.value = false
-  }
+const handleFilterReset = () => {
+  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
-  // 初始化一个空的工单对象
   currentTicket.value = {
     website: '',
     operator: '',
-    principalpeople: '',
-    is_complete: '未分配'
+    staff_id: null,
+    is_complete: '未分配',
+    remark: ''
   }
   showAddDialog.value = true
 }
 
-
-/**
- * 编辑任务：克隆数据并打开弹窗
- */
+// 编辑工单
 const handleEdit = (row) => {
   isEditing.value = true
-  // 使用解构赋值 {...row} 进行浅拷贝，避免修改弹窗时直接影响表格行
-  currentTicket.value = { ...row }
+  currentTicket.value = { ...row } 
   showAddDialog.value = true
 }
 
+// 处理工单提交
+const handleFormSubmit = async (formData) => {
+  try {
+    let response;
+    if (isEditing.value) {
+      response = await ticketApi.updateTicket(currentTicket.value.id, formData);
+    } else {
+      response = await ticketApi.addTicket(formData);
+    }
 
-/**
- * 加载运营人员列表（用于弹窗下拉框）
- */
+    if (response.code) {
+      ElMessage.success(isEditing.value ? '修改成功 ✨' : '创建成功 🚀');
+      showAddDialog.value = false;
+      refreshAll();
+    } else {
+      ElMessage.error(response.msg || '操作失败');
+    }
+  } catch (error) {
+    ElMessage.error('提交失败，系统异常');
+  }
+}
+
+// 删除工单
+const handleDelete = async (id) => {
+  try {
+    await ElMessageBox.confirm('确定要删除该工单吗？此操作不可逆', '提示', {
+      type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消'
+    })
+    const res = await ticketApi.deleteTicket(id)
+    // console.log('删除',res)
+    if (res.code) {
+      ElMessage.success('删除成功')
+      refreshAll()
+    }
+  } catch (error) {
+    if (error !== 'cancel') ElMessage.error('删除失败')
+  }
+}
+
+// 加载所有运营人员
 const loadOperators = async () => {
   try {
     const response = await ticketApi.getOperators()
-    console.log('运营人员列表响应:', response.data)
-
-    // 这里的判断逻辑要根据你后端的实际返回结构调整
-    // 如果后端直接返回数组：operators.value = response
-    // 如果后端返回带 code 的结构：
     if (response.code) {
-      operators.value = response.data || response
+      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(); }
 
-// 初始化
 onMounted(() => {
-  loadTickets()       // 渲染表格
-  initGlobalStats()   // 锁定卡片统计
+  loadTickets()
+  initGlobalStats()
   loadOperators()
+  loadStaffData() 
+  loadCustomerData() // 级联数据加载
 })
 </script>
 
 <style scoped>
-/* 保持原有样式不变 */
-.ticket-management {
-  padding: 20px;
-  background-color: #f5f7fa;
-  min-height: 100vh;
-}
-
-.stats-container {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-.stat-item {
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-  border-left: 5px solid #409eff;
-}
-
-.stat-item.pending {
-  border-left-color: #909399;
-}
-
-.stat-item.ongoing {
-  border-left-color: #e6a23c;
-}
-
-.stat-item.success {
-  border-left-color: #67c23a;
-}
-
-.stat-label {
-  font-size: 14px;
-  color: #666;
-}
-
-.stat-value {
-  font-size: 26px;
-  font-weight: bold;
-  color: #333;
-  margin-top: 5px;
-}
-
-.main-content {
-  background: white;
-  padding: 20px;
-  border-radius: 8px;
-}
-
-.action-bar {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
-}
-
-.pagination-container {
-  margin-top: 20px;
-  display: flex;
-  justify-content: flex-end;
-}
+/* 样式部分保持不变 */
+.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>