wip

src/views/UserView.vue

@@ -209,7 +209,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, onBeforeUnmount, computed } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
 import {
@@ -226,6 +226,7 @@ import { ticketApi, userApi } from "@/api/ticket";
 import { resetRouter } from "@/router";
 import { formatUrl, formatDate } from "@/utils/format";
 import SearchInput from "@/components/common/SearchInput.vue";
+import { openSocket, closeSocket, onTicketChanged, onReconnect } from "@/utils/socket";
 
 const router = useRouter();
 const loading = ref(false);
@@ -258,8 +259,9 @@ const currentUser = computed(() => {
 
 
 // 获取工单信息
-const fetchTickets = async () => {
-  loading.value = true;  // 显示加载中状态
+// silent: 静默刷新（WS 推送触发），不显示 loading 遮罩
+const fetchTickets = async (silent = false) => {
+  if (!silent) loading.value = true;  // 显示加载中状态
   // 优化：不再获取所有工单，而是根据当前视图的状态和用户ID进行筛选
   try {
     const statusMap = {
@@ -304,7 +306,7 @@ const fetchTickets = async () => {
     allTickets.value = [];
     ElMessage.error("获取列表失败");
   } finally {
-    loading.value = false;
+    if (!silent) loading.value = false;
   }
 };
 
@@ -446,6 +448,9 @@ const handleLogout = () => {
   });
 };
 
+let stopTicketWatch = null;
+let stopReconnectWatch = null;
+
 onMounted(async () => {
   try {
     const res = await ticketApi.getUserStaffs();
@@ -455,6 +460,17 @@ onMounted(async () => {
     }
   } catch (e) { }
   await fetchTickets();
+
+  // 实时刷新：后台新增/更新工单时静默刷新列表；断线重连后补拉一次
+  openSocket();
+  stopTicketWatch = onTicketChanged(() => fetchTickets(true));
+  stopReconnectWatch = onReconnect(() => fetchTickets(true));
+});
+
+onBeforeUnmount(() => {
+  stopTicketWatch && stopTicketWatch();
+  stopReconnectWatch && stopReconnectWatch();
+  closeSocket();
 });
 </script>