fix: SBBJ-1126app备件维修工单，添加备件点击备件，应加loding，反应太慢

src/components/item/slectItemList.vue

@@ -3,10 +3,10 @@
   <u-popup v-model="props.isShowSelectItem" mode="center" border-radius="14">
     <view class="popup-title">选择备件</view>
     <view class="popup">
-      <u-search :placeholder="props.searchPlaceholder" v-model="form1.searchName" @change="searchItem" clearabled=false></u-search>
+      <u-search :placeholder="props.searchPlaceholder" v-model="form1.searchName" @change="searchItem" clearabled="false"></u-search>
-      <scroll-view class="list" scroll-y="true" style="max-height: 800rpx">
+      <scroll-view class="list" scroll-y="true" style="max-height: 800rpx" @scrolltolower="scrolltolower">
-        <view class="item" v-for="(item, index) in singleColumnList" :key="index" @click="chooseItem(item)">
+        <view class="item" v-for="(item, index) in tableData" :key="index" @click="chooseItem(item)">
-          <u-checkbox v-model="item.checked" shape="circle" style="margin-top: 8rpx;"></u-checkbox>
+          <u-checkbox v-model="item.checked" shape="circle" style="margin-top: 8rpx"></u-checkbox>
           <view class="right">
             <view class="item-name">
               名称: <span>{{ item.name }}</span>
@@ -17,16 +17,10 @@
             <view class="item-dec">
               编码: <span>{{ item.number }}</span>
             </view>
-            <view class="item-dec" style="display: flex;">
+            <view class="item-dec" style="display: flex">
-              <span style="white-space: nowrap; align-self: flex-start;">图片:</span>
+              <span style="white-space: nowrap; align-self: flex-start">图片:</span>
-              <div style="display: flex; flex-direction: column; margin-left: 10px;">
+              <div style="display: flex; flex-direction: column; margin-left: 10px">
-                <span
+                <span v-for="(pic, picIndex) in item.picture" :key="picIndex" @click.stop="showImage(pic.path)" @longpress.stop="showFullText(pic.name)" class="image-link">
-                  v-for="(pic, picIndex) in item.picture"
-                  :key="picIndex"
-                  @click.stop="showImage(pic.path)"
-                  @longpress.stop="showFullText(pic.name)" 
-                  class="image-link"
-                >
                   {{ pic.name }}
                 </span>
               </div>
@@ -56,117 +50,138 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, defineEmits, getCurrentInstance, watch } from 'vue';
+import { ref, defineProps, defineEmits, getCurrentInstance, watch } from 'vue'
-import { onLoad } from '@dcloudio/uni-app';
+import { onLoad } from '@dcloudio/uni-app'
-import * as repairOrderApi from "@/api/repairOrder";
+import * as repairOrderApi from '@/api/repairOrder'
 
 const props = defineProps({
   isShowSelectItem: {
     type: Boolean,
-    default: () => { return false },
+    default: () => {
+      return false
+    },
     require: true
   },
   searchPlaceholder: {
     type: String,
-    default: () => { return '请输入备件名称' },
+    default: () => {
+      return '请输入备件名称'
+    },
     require: true
   },
   singleColumnList: {
     type: Array,
-    default: () => { return [] },
+    default: () => {
-    require: false
+      return []
     },
-});
+    require: false
-
+  }
+})
+const pageSize = ref(10)
+const currentPage = ref(1)
+const tableData = ref([])
+// 展示的数据
+const showTableData = () => {
+  if (props.singleColumnList.length > pageSize.value) {
+    tableData.value = [...tableData.value, ...props.singleColumnList.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)]
+  } else {
+    tableData.value = props.singleColumnList
+  }
+}
+const scrolltolower = () => {
+  currentPage.value += 1
+  showTableData()
+}
 // 监测isShowSelectItem的变化
-watch(() => props.isShowSelectItem, (newValue, oldValue) => {
+watch(
+  () => props.isShowSelectItem,
+  (newValue, oldValue) => {
     if (newValue) {
-    console.log('props.isShowSelectItem', props.isShowSelectItem);
+      form1.value.searchName = null
-    form1.value.searchName = null;
+      form1.value.temporarilyNumber = null
-    form1.value.temporarilyNumber = null;
+      form1.value.temporarilyName = null
-    form1.value.temporarilyName = null;
+      showTableData()
+    }
   }
-});
+)
-
+
-const { proxy } = getCurrentInstance();
+const { proxy } = getCurrentInstance()
-const repairOrderList = ref([]);
+const repairOrderList = ref([])
-const itemList = ref([]);
+const itemList = ref([])
-const type = ref('');
+const type = ref('')
-const isShowSelectItem = ref(false);
+const isShowSelectItem = ref(false)
-const selectVal = ref(null);
+const selectVal = ref(null)
-const emits = defineEmits(['searchItem', 'chooseItem1']);
+const emits = defineEmits(['searchItem', 'chooseItem1'])
 const form1 = ref({
-  number: "",
+  number: '',
-  name: "",
+  name: '',
-  specifications: "",
+  specifications: '',
   qty: 0,
-  temporarilyNumber: "",
+  temporarilyNumber: '',
-  temporarilyName: "",
+  temporarilyName: '',
-  temporarilySpecifications: "",
+  temporarilySpecifications: '',
-  searchName: "",
+  searchName: ''
-});
+})
 
 // 管理全屏图片弹窗的状态
-const isImagePopupVisible = ref(false);
+const isImagePopupVisible = ref(false)
-const currentImagePath = ref('');
+const currentImagePath = ref('')
 
 // 管理浮窗的状态
-const showTooltip = ref(false);
+const showTooltip = ref(false)
-const tooltipContent = ref('');
+const tooltipContent = ref('')
-const tooltipPosition = ref({ top: '0px', left: '0px' });
+const tooltipPosition = ref({ top: '0px', left: '0px' })
 
 // 打开全屏图片弹窗
 function showImage(path) {
-  currentImagePath.value = path;
+  currentImagePath.value = path
-  isImagePopupVisible.value = true;
+  isImagePopupVisible.value = true
 }
 
 // 关闭全屏图片弹窗
 function closeImagePopup() {
   uni.hideLoading()
-  isImagePopupVisible.value = false;
+  isImagePopupVisible.value = false
 }
 
 // 显示完整内容的浮窗
 function showFullText(text) {
-  tooltipContent.value = text;
+  tooltipContent.value = text
-  showTooltip.value = true;
+  showTooltip.value = true
   // 设置浮窗位置（这里可以根据需求设置具体位置）
-  tooltipPosition.value = { top: '50px', left: '50px' };
+  tooltipPosition.value = { top: '50px', left: '50px' }
 }
 
 onLoad((option) => {
-  if (option.type) type.value = option.type;
+  if (option.type) type.value = option.type
-  if (option.type) isShowSelectItem.value = option.isShowSelectItem;
+  if (option.type) isShowSelectItem.value = option.isShowSelectItem
-  if (option.selectVal) selectVal.value = option.selectVal;
+  if (option.selectVal) selectVal.value = option.selectVal
-});
+})
 
 // 取消和确认方法
 function chooseItem1(type) {
   if (type == 1) {
-    form1.value.number = form1.value.temporarilyNumber;
+    form1.value.number = form1.value.temporarilyNumber
-    form1.value.name = form1.value.temporarilyName;
+    form1.value.name = form1.value.temporarilyName
-    form1.value.specifications = form1.value.temporarilySpecifications;
+    form1.value.specifications = form1.value.temporarilySpecifications
   }
-  emits('chooseItem1', type, form1);
+  emits('chooseItem1', type, form1)
 }
 
 function searchItem() {
-  emits('searchItem', form1.value.searchName);
+  emits('searchItem', form1.value.searchName)
 }
 
 function chooseItem(item) {
-  console.log('props.isShowSelectItem', props.isShowSelectItem);
+  const arr = props.singleColumnList.filter((cur) => cur.number != item.number)
-  console.log('props.singleColumnList', props.singleColumnList);
+  arr.forEach((item) => {
-  let arr = props.singleColumnList.filter(cur => cur.number != item.number);
+    item.checked = false
-  arr.forEach(item => {
+  })
-    item.checked = false;
+  item.checked = !item.checked
-  });
+  const arr1 = props.singleColumnList.filter((cur) => cur.number == item.number)
-  item.checked = !item.checked;
+  form1.value.temporarilyNumber = arr1[0].number
-  let arr1 = props.singleColumnList.filter(cur => cur.number == item.number);
+  form1.value.temporarilyName = arr1[0].name
-  form1.value.temporarilyNumber = arr1[0].number;
+  form1.value.temporarilySpecifications = arr1[0].specifications
-  form1.value.temporarilyName = arr1[0].name;
-  form1.value.temporarilySpecifications = arr1[0].specifications;
 }
 </script>
 
@@ -200,7 +215,7 @@ function chooseItem(item) {
     }
   }
   .reset {
-		background: #F5F5F5;
+    background: #f5f5f5;
     border-radius: 0px;
     &::after {
       border-radius: 0px;
@@ -252,7 +267,7 @@ function chooseItem(item) {
     display: flex;
     margin-bottom: 20rpx;
     .item-box {
-			background: #F5F5F5;
+      background: #f5f5f5;
       border-radius: 12rpx;
       flex: 1;
       width: 0rpx;