检测录入、设备列表数据加载过渡动画

src/pages/equipment/detail/equipmentDetail.vue

@@ -102,6 +102,13 @@
       </view>
     </view>
 
+    <wd-overlay :show="pageLoading" :z-index="999" :lock-scroll="true">
+      <view class="loading-wrapper">
+        <wd-loading type="spinner" size="30px" color="#fff" />
+        <text class="loading-text">加载中...</text>
+      </view>
+    </wd-overlay>
+
     <!-- 选择校核人弹窗 -->
     <view v-if="showSelectUserPopup" class="popup-overlay" @click="closeSelectUserPopup">
       <view class="popup-content" @click.stop>
@@ -183,6 +190,7 @@ import NavBar from '@/components/NavBar/NavBar.vue'
 
 const currentTab = ref(0)
 const dataSource = ref<any>({})
+const pageLoading = ref(false)
 const tabList = ref<any[]>([])
 const isInspectMode = ref(false)
 const showSelectUserPopup = ref(false)
@@ -307,22 +315,20 @@ const switchTab = (index: number) => {
 
 // 获取设备详情
 const fetchGetOnlineEquipmentDetail = async () => {
+  pageLoading.value = true
   try {
     const result: any = await requestFunc(TaskOrderFuncName.CheckEquipTaskList, equipType, {
       id: orderItemId,
     })
 
     if (result?.data) {
-      // 分成检验项目和其他项目
       const reportDic = getFilterReport(
         result?.data?.reportList,
         result.data.taskOrderItem.equipCode,
       )
 
-      // 权限过滤：根据用户角色过滤检验项目
       const equipment = result.data.taskOrderItem
       const isMain = isMainChecker(equipment, userInfo.value)
-      // 过滤检验项目
       const equip = result.data.taskOrderItem
 
       const filteredReportList = reportDic?.reportList
@@ -360,7 +366,6 @@ const fetchGetOnlineEquipmentDetail = async () => {
         },
       }
       dataSource.value = taskInfo
-      // 检查是否有其他报告，决定显示哪个 Tab
       if (reportDic?.otherReportList?.length && pageType !== 'OTHER_REPORT') {
         tabList.value[3] = { value: '项目文件', id: 'OTHER_REPORT' }
       }
@@ -368,6 +373,8 @@ const fetchGetOnlineEquipmentDetail = async () => {
   } catch (error) {
     console.error('获取设备详情失败:', error)
     uni.showToast({ title: '加载失败', icon: 'error' })
+  } finally {
+    pageLoading.value = false
   }
 }
 
@@ -754,4 +761,18 @@ watch(
   font-size: 20px;
   color: #999;
 }
+
+.loading-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.loading-text {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #ffffff;
+}
 </style>

src/pages/taskOnline/TaskOnlineEquipmentList.vue

@@ -70,7 +70,7 @@
 
         <view class="cell-bottom">
           <view
-            v-if="item.taskStatus === PressureCheckerMyTaskStatus.CONFIRMED"
+            v-if="!item.isClaim && item.taskStatus === PressureCheckerMyTaskStatus.RECORD_INPUT"
             class="claim-btn"
             :class="item.isClaim ? 'white-btn' : 'blue-btn'"
             @click="fetchClaimEquipments(item.id + '', item.isClaim)"
@@ -89,7 +89,10 @@
         </view>
       </view>
 
-      <view v-if="equipmentList.length === 0" class="empty-text">暂无数据</view>
+      <view v-if="loading && equipmentList.length === 0" class="loading-text">加载中...</view>
+      <view v-if="!loading && equipmentList.length === 0" class="empty-text">
+        <text>暂无数据</text>
+      </view>
     </scroll-view>
 
     <view v-if="orderId" class="bottom-operate">
@@ -106,12 +109,12 @@
       </view>
       <view class="btn-group">
         <button class="operate-btn blue-btn" @click="showMoreOperate = true">更多操作</button>
-        <button
+        <!-- <button
           class="operate-btn white-btn"
           @click="showBatchClaimPopup({ text: '是否取消认领已选择的设备？', isClaim: true })"
         >
           取消认领
-        </button>
+        </button> -->
         <button
           class="operate-btn white-btn"
           @click="showBatchClaimPopup({ text: '是否认领已选择的设备？', isClaim: false })"
@@ -313,10 +316,12 @@ defineOptions({ name: 'TaskOnlineEquipmentList' })
 
 const userStore = useUserStore()
 const userInfo = computed(() => userStore.userInfo)
+const equipType = useConfigStore().getEquipType()
 
 const orderId = ref('')
 const orderNo = ref('')
 const equipmentList = ref<any[]>([])
+const loading = ref(false)
 const refreshing = ref(false)
 const selectAll = ref(false)
 const selectedEquipments = ref<any[]>([])
@@ -349,8 +354,6 @@ const showSpaceTemplatePopup = ref(false)
 const spaceTemplateList = ref<any[]>([])
 const selectedSpaceTemplateId = ref('')
 
-const equipType = useConfigStore().getEquipType()
-
 onLoad((options: any) => {
   orderId.value = options?.orderId || ''
   orderNo.value = options?.orderNo || ''
@@ -363,15 +366,12 @@ onShow(() => {
 const selectedEquipIds = computed(() => selectedEquipments.value.map((item) => item.equipId))
 
 const fetchCheckerOnlineEquipmentList = async () => {
+  loading.value = true
   const apiParams: any = {
     orderId: orderId.value,
     pageSize: 999,
     pageNo: 1,
     taskStatusList: [400, 500, 510],
-    // checkUserStrIds: userInfo.value?.id,
-    // planCheckUserIds: userInfo.value?.id,
-    // managerStrIds: userInfo.value?.id,
-    // mainCheckerIds: userInfo.value?.id,
   }
   try {
     const equipmentListData = await requestFunc(
@@ -382,6 +382,8 @@ const fetchCheckerOnlineEquipmentList = async () => {
     equipmentList.value = equipmentListData?.data?.list || []
   } catch (error) {
     console.error('获取设备列表失败:', error)
+  } finally {
+    loading.value = false
   }
 }
 
@@ -486,9 +488,9 @@ const fetchClaimEquipments = async (equipmentId: string, isClaim: boolean) => {
   try {
     let result: any
     if (isClaim) {
-      result = await cancelClaim({ id: equipmentId })
+      result = await requestFunc(TaskOrderFuncName.EquipmentConfirmClaim, equipType, { id: equipmentId })
     } else {
-      result = await confirmTaskClaim({ id: equipmentId })
+      result = await requestFunc(TaskOrderFuncName.EquipmentCancelClaim, equipType, { id: equipmentId })
     }
     updateClaim(result, [equipmentId], !isClaim)
   } catch (error) {
@@ -1029,13 +1031,23 @@ const goBack = () => {
   color: rgb(59, 59, 59);
 }
 
-.empty-text {
-  padding: 30px;
+.loading-text {
+  padding: 15px;
   font-size: 14px;
   color: #999;
   text-align: center;
 }
 
+.empty-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 0;
+  font-size: 14px;
+  color: #999;
+}
+
 .bottom-operate {
   display: flex;
   flex-direction: row;