feat: PODUS和工厂订单new缩略图优化

src/components/Thumbnail.vue

@@ -4,6 +4,7 @@
     :style="imageStyle"
     :style="imageStyle"
     :src="imageUrl"
     :src="imageUrl"
     loading="lazy"
     loading="lazy"
+    preview-teleported
   />
   />
 </template>
 </template>
 
 
@@ -46,8 +47,8 @@ const displayHeight = computed(() => {
 
 
 const imageStyle = computed(() => {
 const imageStyle = computed(() => {
   return {
   return {
-    width: `${displayWidth}px`,
-    height: `${displayHeight}px`,
+    width: `${displayWidth.value}px`,
+    height: `${displayHeight.value}px`,
   }
   }
 })
 })
 
 

src/views/order/factoryOrderNew/component/WaitingRestockTable.vue

@@ -66,6 +66,7 @@ import { getRestockListApi, restockCheckApi } from '@/api/factoryOrderNew'
 import type { RestockData } from '@/types/api/factoryOrderNew'
 import type { RestockData } from '@/types/api/factoryOrderNew'
 import TableView from '@/components/TableView.vue'
 import TableView from '@/components/TableView.vue'
 import usePageList from '@/utils/hooks/usePageList'
 import usePageList from '@/utils/hooks/usePageList'
+import Thumbnail from '@/components/Thumbnail.vue'
 
 
 const filterForm = reactive({
 const filterForm = reactive({
   warehouseSku: '',
   warehouseSku: '',
@@ -108,11 +109,11 @@ const columns = [
     align: 'center',
     align: 'center',
     render: (row: RestockData) => {
     render: (row: RestockData) => {
       return (
       return (
-        <el-image
+        <Thumbnail
           src={row.image ?? ''}
           src={row.image ?? ''}
-          style={{ width: '50px', height: '50px' }}
+          width="45"
+          display-width="50"
           previewSrcList={[row.image ?? '']}
           previewSrcList={[row.image ?? '']}
-          previewTeleported
         />
         />
       )
       )
     },
     },