在用详情

src/pages.json

@@ -567,6 +567,19 @@
                 "navigationBarTitleText": "机具库存查询"
             }
         },
+        {
+            "path": "pages/stquery/deviceStatusRecord/useDetails",
+            "style": {
+                "navigationBarTitleText": "在用详情"
+            }
+        },
+        // 配件库存
+        {
+            "path": "pages/stquery/deviceStatusRecord/partsStore",
+            "style": {
+                "navigationBarTitleText": "配件库存查询"
+            }
+        },
         //设备信息查询
         {
             "path": "pages/devicesSearch/qrSearch",

src/pages/stquery/deviceStatusRecord/index.vue

@@ -52,8 +52,8 @@
 						<uni-th style="font-size: 20rpx;" width="70px" align="center">机具名称</uni-th>
 						<uni-th style="font-size: 20rpx;" width="70px" align="center">规格型号</uni-th>
 						<uni-th style="font-size: 20rpx;" width="70px" align="center">单位</uni-th>
-						<uni-th style="font-size: 20rpx;" width="45px" align="center">库存</uni-th> 
+						<uni-th style="font-size: 20rpx;" width="50px" align="center">库存</uni-th> 
-						<uni-th style="font-size: 20rpx;" width="45px" align="center">在用</uni-th>
+						<uni-th style="font-size: 20rpx;" width="50px" align="center">在用</uni-th>
 					</uni-tr>
 					<uni-tr></uni-tr> 
 			</uni-table>
@@ -70,12 +70,12 @@
 					</uni-tr> --> 
                 <!-- 表格数据行 --> 
 					<uni-tr v-for="(item,index) in tableList" :key="index">
-						<uni-td style="width: 100rpx;font-size: 20rpx;text-align: center;">{{(index+1)}}</uni-td>
+						<uni-td style="width: 45px;font-size: 20rpx;text-align: center;">{{(index+1)}}</uni-td>
-						<uni-td style="width: 160rpx;font-size: 20rpx;text-align: center;">{{item.typeName}}</uni-td>
+						<uni-td style="width: 70px;font-size: 20rpx;text-align: center;">{{item.typeName}}</uni-td>
-						<uni-td style="width: 160rpx;font-size: 20rpx;text-align: center;">{{item.typeModelName}}</uni-td>
+						<uni-td style="width: 70px;font-size: 20rpx;text-align: center;">{{item.typeModelName}}</uni-td>
-						<uni-td style="width: 160rpx;font-size: 20rpx;text-align: center;">{{item.unit}}</uni-td>
+						<uni-td style="width: 70px;font-size: 20rpx;text-align: center;">{{item.unit}}</uni-td>
-						<uni-td style="width: 100rpx;font-size: 20rpx;text-align: center;">{{item.storeNum}}</uni-td>
+						<uni-td style="width: 50px;font-size: 20rpx;text-align: center;">{{item.storeNum}}</uni-td>
-						<uni-td style="width: 100rpx;font-size: 20rpx;text-align: center;">{{item.usNum}}</uni-td>  
+						<uni-td style="width: 50px;font-size: 20rpx;text-align: center;color: #409EFF" @click="goToUseDetails(item)">{{item.usNum}}</uni-td>  
 					</uni-tr> 
             </uni-table>
         </scroll-view>
@@ -92,6 +92,12 @@ const partList = ref([
     // {modelType:"手扶绞磨机", partName:"离合器轴", typeName:"XJSF-JM-1", storageNum:"20", preNum:"0"},{modelType:"手扶绞磨机", partName:"离合器轴", typeName:"XJSF-JM-2", storageNum:"20", preNum:"0"},{modelType:"手扶绞磨机", partName:"离合器轴", typeName:"XJSF-JM-3", storageNum:"20", preNum:"0"}
 ]) //列表数据源
 
+const goToUseDetails = (item) => {
+    uni.navigateTo({
+        url: `/pages/stquery/deviceStatusRecord/useDetails?typeId=${item.typeId}`
+    })
+}
+
 // --------1---------
 // 类型数据
 const maList = ref([])//一级选择数据

src/pages/stquery/deviceStatusRecord/useDetails.vue

@@ -0,0 +1,204 @@
+<template>
+  <!-- 退料任务 -->
+  <view class="accept page-common">
+    <uni-row :gutter="24" class="search-form">
+      <uni-col :span="18">
+        <view>
+          <uni-easyinput v-model="queryParams.keyWord" placeholder="请输入内容" />
+        </view>
+      </uni-col>
+      <uni-col :span="6">
+        <view class="search" @click="getTableList">查询</view>
+      </uni-col>
+    </uni-row>
+
+    <scroll-view scroll-y class="scroll-container" @scrolltolower="onScrollTolower">
+      <scroll-view scroll-y class="scroll-container" @scrolltolower="onScrollTolower">
+        <uni-table border stripe emptyText="暂无更多数据" sticky>
+          <uni-tr>
+            <uni-th style="font-size: 20rpx" width="40px" align="center">序号</uni-th>
+            <uni-th style="font-size: 20rpx" width="150px" align="center">工程名称</uni-th>
+            <uni-th style="font-size: 20rpx" width="70px" align="center">配件名称</uni-th>
+            <uni-th style="font-size: 20rpx" width="70px" align="center">规格型号</uni-th>
+            <uni-th style="font-size: 20rpx" width="45px" align="center">在用</uni-th>
+            <uni-th style="font-size: 20rpx" width="100px" align="center">设备编码</uni-th>
+          </uni-tr>
+          <uni-tr v-for="(item, index) in tableList" :key="index">
+            <uni-td style="width: 40px; font-size: 20rpx; text-align: center">{{
+              index + 1
+            }}</uni-td>
+            <uni-td style="width: 150px; font-size: 20rpx; text-align: center">{{
+              item.projectName
+            }}</uni-td>
+            <uni-td style="width: 70px; font-size: 20rpx; text-align: center">{{
+              item.typeName
+            }}</uni-td>
+            <uni-td style="width: 70px; font-size: 20rpx; text-align: center">{{
+              item.typeModelName
+            }}</uni-td>
+            <uni-td style="width: 45px; font-size: 20rpx; text-align: center">{{
+              item.usNum
+            }}</uni-td>
+            <uni-td style="width: 100px; font-size: 20rpx; text-align: center">{{
+              item.maCode
+            }}</uni-td>
+          </uni-tr>
+        </uni-table>
+      </scroll-view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { getUserRecordListApi } from '@/services/stquery/stquery.js'
+import { debounce } from 'lodash-es'
+
+const tableList = ref([]) //列表数据源
+const total = ref(0)
+// 查询参数
+const queryParams = ref({
+  keyWord: '', //关键字
+  pageNum: 1,
+  pageSize: 20,
+  typeId: null,
+})
+// 滚动触底事件
+const onScrollTolower = debounce(() => {
+  console.log('触底事件')
+  if (total.value > tableList.value.length) {
+    queryParams.value.pageSize += 10
+    getTableList()
+  }
+}, 500)
+// 获取列表数据
+const getTableList = async (isTap = false) => {
+  try {
+    uni.showLoading({ title: '加载中', mask: true })
+    const res = await getUserRecordListApi(queryParams.value)
+    tableList.value = res?.data?.rows || []
+    total.value = res?.data?.total || 0
+  } catch (error) {
+    console.log('🚀 ~ getTableList ~ error:', error)
+  } finally {
+    uni.hideLoading()
+  }
+}
+
+onLoad((options) => {
+  queryParams.value.typeId = options.typeId || null
+  tableList.value = []
+  total.value = 0
+  getTableList(true)
+})
+</script>
+
+<style lang="scss" scoped>
+.accept {
+  height: 95vh;
+  word-break: break-all;
+  background-color: #f7f8fa;
+  padding: 24rpx;
+  // 搜索表单
+  .search-form {
+    display: flex;
+    align-items: center;
+    background: #fff;
+    padding: 10rpx;
+    border-radius: 20rpx;
+    margin-bottom: 24rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+
+    .select-box {
+      width: 100%;
+      height: 80rpx;
+    }
+    .select-box-content {
+      height: 75rpx;
+      width: auto;
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+    }
+    .select-box-item {
+      width: auto;
+      padding: 5rpx;
+      margin-right: 10rpx;
+      height: 60rpx;
+      line-height: 60rpx;
+      font-size: 24rpx;
+      word-break: keep-all;
+      white-space: nowrap;
+    }
+
+    // 搜索按钮
+    .search {
+      height: 60rpx;
+      background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
+      text-align: center;
+      line-height: 60rpx;
+      color: #fff;
+      border-radius: 12rpx;
+      font-size: 28rpx;
+      font-weight: 600;
+      box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
+      transition: all 0.3s ease;
+
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
+      }
+    }
+
+    // 新增按钮
+    .addBtn {
+      height: 80rpx;
+      background: linear-gradient(135deg, #19be6b 0%, #16a75c 100%);
+      text-align: center;
+      line-height: 80rpx;
+      color: #fff;
+      border-radius: 12rpx;
+      font-size: 28rpx;
+      font-weight: 600;
+      box-shadow: 0 6rpx 20rpx rgba(25, 190, 107, 0.2);
+      transition: all 0.3s ease;
+
+      &:active {
+        transform: scale(0.98);
+        opacity: 0.9;
+      }
+    }
+  }
+}
+
+// 列表容器
+.scroll-container {
+  width: 100%;
+  height: 80vh;
+  margin: 0rpx auto;
+}
+
+/* 针对Web平台 */
+.scroll-view {
+  overflow: auto; /* 允许滚动 */
+  -ms-overflow-style: none; /* IE和Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* 针对其他非Web平台，比如小程序，可以通过条件编译来设置 */
+/* #ifdef MP-WEIXIN */
+.scroll-view {
+  scroll-view {
+    scroll-x: true;
+    scroll-y: auto;
+    ::-webkit-scrollbar {
+      display: none; /* 针对Webkit浏览器，隐藏滚动条 */
+      width: 0;
+      height: 0;
+      color: transparent;
+    }
+  }
+}
+/* #endif */
+</style>

src/services/stquery/stquery.js

@@ -36,13 +36,14 @@ export const getPartPersonNumApi = (data) => {
   })
 }
 
-
+// 在用详情
-
+export const getUserRecordListApi = (data) => {
-
+  return http({
-
+    method: 'GET',
-
+    url: '/material/complex_query/getUserRecordList',
-
+    data,
-
+  })
+}