界面问题修复

src/views/visitorRecord.vue

@@ -1,10 +1,10 @@
 <template>
   <div class='box'>
     <header class="tabbar">
-      <div @click="onClickTabbar(item)" v-for="item in stateEnum" class="tabbar-li" :key="item.status"
-           :class="query.status === item.status ? 'active' : ''">
-        {{ item.statusName }}
-        <img v-if="query.status === item.status" src="../assets/maomaochong.png" alt="">
+      <div @click="onClickTabbar(item)" v-for="item in statusTabs" class="tabbar-li" :key="item.value"
+           :class="query.status === item.value ? 'active' : ''">
+        {{ item.label }}
+        <img v-if="query.status === item.value" src="../assets/maomaochong.png" alt="">
       </div>
 
     </header>
@@ -18,8 +18,8 @@
           <p><span>随行人数：</span><span>{{ item.visitingNum }} </span></p>
           <p><span>来访事由：</span><span>{{ item.reason }}</span></p>
         </div>
-        <!-- refuse 拒绝 pass 通过 状态 -->
-        <div class="status" :class="stateEnum[item.status].className">{{ stateEnum[item.status].statusName }}</div>
+        <!-- 显示完整状态 -->
+        <div class="status" :class="getStatusInfo(item.status).className">{{ getStatusInfo(item.status).statusName }}</div>
       </div>
     </div>
     <div v-if="isLoading && recordArr.length === 0" class="content">
@@ -31,7 +31,7 @@
 </template>
 
 <script setup>
-import {ref, reactive} from 'vue'
+import {ref, reactive, computed} from 'vue'
 import {useRouter, useRoute} from 'vue-router'
 import {useStore} from 'vuex'
 import dd from 'dingtalk-jsapi'
@@ -44,12 +44,17 @@ import {getToken, getVisitorRecord} from '@/api/admin.js'
 const router = useRouter()
 const route = useRoute()
 const store = useStore()
-const stateEnum = store.state.stateEnum
+const statusTabs = computed(() => store.state.statusTabs)
 const recordArr = ref([])
 const isLoading = ref(false)
 
+// 获取状态信息
+const getStatusInfo = (status) => {
+  return store.getters.getStatusInfo(status)
+}
+
 const query = reactive({
-  status: 0,
+  status: -1, // 默认待处理（父状态）
   size: -1,
   current: 1,
 })
@@ -81,8 +86,8 @@ const onClickItem = (item) => {
 }
 
 const onClickTabbar = (item) => {
-  if (query.status !== item.status) {
-    query.status = item.status
+  if (query.status !== item.value) {
+    query.status = item.value
     recordArr.value = []
     visitorList()
   }
@@ -233,6 +238,47 @@ visitorList()
         color: #30BF78;
         background: #E7F8F5;
       }
+
+      // 新增状态样式
+      .wait {
+        color: #E6A23C;
+        background: #FFF7CC;
+      }
+
+      .cancel {
+        color: #909399;
+        background: #F4F4F5;
+      }
+
+      .pending {
+        color: #409EFF;
+        background: #ECF5FF;
+      }
+
+      .visited {
+        color: #67C23A;
+        background: #F0F9EB;
+      }
+
+      .overdue {
+        color: #E6A23C;
+        background: #FEF0F0;
+      }
+
+      .not-visited {
+        color: #909399;
+        background: #F4F4F5;
+      }
+
+      .finished {
+        color: #999999;
+        background: #F5F5F5;
+      }
+
+      .default {
+        color: #666666;
+        background: #F5F5F5;
+      }
     }
   }
 }