feat: 工单系统优化 - 改为列表形式，添加排序、状态修改、图片粘贴拖拽等功能

src/views/ticket/TicketList.vue

@@ -3,9 +3,6 @@
     <!-- 顶部工具栏 -->
     <div class="toolbar">
       <div class="status-tabs">
-        <div class="tab-item" :class="{ active: activeStatus === '' }" @click="filterByStatus('')">
-          全部 <span class="count">{{ stats.total }}</span>
-        </div>
         <div class="tab-item pending" :class="{ active: activeStatus === 'pending' }" @click="filterByStatus('pending')">
           待处理 <span class="count">{{ stats.pending }}</span>
         </div>
@@ -18,8 +15,22 @@
         <div class="tab-item completed" :class="{ active: activeStatus === 'completed' }" @click="filterByStatus('completed')">
           已完成 <span class="count">{{ stats.completed }}</span>
         </div>
+        <div class="tab-item" :class="{ active: activeStatus === '' }" @click="filterByStatus('')">
+          全部 <span class="count">{{ stats.total }}</span>
+        </div>
       </div>
       <div class="toolbar-right">
+        <el-select v-model="sortBy" placeholder="排序方式" clearable style="width: 140px" @change="handleSortChange">
+          <el-option label="不排序" value="" />
+          <el-option label="创建时间" value="created_at" />
+          <el-option label="更新时间" value="updated_at" />
+          <el-option label="工单号" value="id" />
+        </el-select>
+        <el-select v-model="sortOrder" placeholder="排序顺序" clearable style="width: 100px" @change="handleSortChange">
+          <el-option label="默认" value="" />
+          <el-option label="降序" value="desc" />
+          <el-option label="升序" value="asc" />
+        </el-select>
         <el-input
           v-model="searchKeyword"
           placeholder="搜索工单号、标题、用户名"
@@ -92,7 +103,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, onActivated } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
@@ -112,7 +123,11 @@ const isLoading = ref(false)
 // 工单数据
 const ticketList = ref([])
 const searchKeyword = ref('')
-const activeStatus = ref('')
+const activeStatus = ref('pending') // 默认选中"待处理"
+
+// 排序
+const sortBy = ref('') // 默认不排序
+const sortOrder = ref('') // 默认不选择排序顺序
 
 // 统计数据
 const stats = reactive({
@@ -125,6 +140,8 @@ const stats = reactive({
 
 
 
+
+
 // 状态转换
 const convertStatusToString = (status) => {
   const statusMap = { 0: 'pending', 1: 'processing', 2: 'replied', 3: 'completed' }
@@ -151,7 +168,14 @@ const fetchTicketList = async () => {
       statusParam = statusMap[activeStatus.value] || ''
     }
 
-    const res = await getTickerList(pageSize.value, currentPage.value, statusParam)
+    console.log('调用getTickerList，排序参数:', { sortBy: sortBy.value, sortOrder: sortOrder.value })
+    const res = await getTickerList(
+      pageSize.value, 
+      currentPage.value, 
+      statusParam,
+      sortBy.value,
+      sortOrder.value
+    )
 
     if (res.code === 200) {
       ticketList.value = (res.data.data || []).map(item => ({
@@ -212,6 +236,12 @@ const filterByStatus = (status) => {
   fetchTicketList()
 }
 
+// 排序变化处理
+const handleSortChange = () => {
+  currentPage.value = 1
+  fetchTicketList()
+}
+
 // 搜索处理
 const handleSearch = () => {}
 
@@ -261,10 +291,21 @@ const handleComplete = (ticket) => {
   }).catch(() => {})
 }
 
+let isFirstLoad = true
+
 onMounted(() => {
   fetchTicketList()
   fetchStats()
 })
+
+// 当页面被激活时（从详情页返回时）
+onActivated(() => {
+  // 跳过首次加载，只在从其他页面返回时刷新
+  if (!isFirstLoad) {
+    refreshList()
+  }
+  isFirstLoad = false
+})
 </script>
 
 <style scoped>