称重抓取

src/views/material/index.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="gi_table_page">
     <GiTable
-      title="物料管理管理"
-      row-key="id"
-      :data="dataList"
-      :columns="columns"
-      :loading="loading"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
-      :pagination="pagination"
-      :disabled-tools="['size']"
-      :disabled-column-keys="['name']"
-      @refresh="search"
+        title="物料管理管理"
+        row-key="id"
+        :data="dataList"
+        :columns="columns"
+        :loading="loading"
+        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+        :pagination="pagination"
+        :disabled-tools="['size']"
+        :disabled-column-keys="['name']"
+        @refresh="search"
     >
+      <!-- toolbar 部分保持不变 -->
       <template #toolbar-left>
         <a-input-search v-model="queryForm.materialName" placeholder="请输入物料名称" allow-clear @search="search" />
         <a-input-search v-model="queryForm.encoding" placeholder="请输入物料编码" allow-clear @search="search" />
@@ -38,27 +39,40 @@
           <template #default>照片批量导入</template>
         </a-button>
       </template>
+
+      <!-- 【修改点】照片列插槽 -->
       <template #photoUrl="{ record }">
         <div class="photo-container">
+          <!-- 1. 正常显示图片：有地址 且 未标记为错误 -->
           <img
-            v-if="record.photoUrl"
-            :src="record.photoUrl"
-            alt="物料照片"
-            class="material-photo"
-            @error="handleImgError($event)"
+              v-if="record.photoUrl && !record.photoLoadError"
+              :src="record.photoUrl"
+              alt="物料照片"
+              class="material-photo"
+              @load="handleImgLoad(record)"
+              @error="handleImgError(record, $event)"
           />
-          <span v-else class="no-photo">暂无照片</span>
+
+          <!-- 2. 无地址 -->
+          <span v-else-if="!record.photoUrl" class="no-photo">暂无照片</span>
+
+          <!-- 3. 地址存在但加载失败 -->
+          <span v-else class="photo-error">
+            <icon-exclamation-circle-fill class="error-icon" />
+            照片异常
+          </span>
         </div>
       </template>
+
       <template #action="{ record }">
         <a-space>
           <a-link v-permission="['admin:materialInfo:update']" title="修改" @click="onUpdate(record)">修改</a-link>
           <a-link
-            v-permission="['admin:materialInfo:delete']"
-            status="danger"
-            :disabled="record.disabled"
-            :title="record.disabled ? '不可删除' : '删除'"
-            @click="onDelete(record)"
+              v-permission="['admin:materialInfo:delete']"
+              status="danger"
+              :disabled="record.disabled"
+              :title="record.disabled ? '不可删除' : '删除'"
+              @click="onDelete(record)"
           >
             删除
           </a-link>
@@ -73,6 +87,7 @@
 </template>
 
 <script setup lang="ts">
+// ... 保持原有的 import 不变
 import MaterialInfoAddModal from './MaterialInfoAddModal.vue'
 import MaterialInfoImportDrawer from './MaterialInfoImportDrawer.vue'
 import PhotosImport from '@/views/material/PhotosImport.vue';
@@ -84,6 +99,12 @@ import has from '@/utils/has'
 
 defineOptions({ name: 'MaterialInfo' })
 
+// 扩展类型定义，允许动态添加 photoLoadError 属性
+// 如果 TS 报错，可以在 MaterialInfoResp 接口定义中添加 photoLoadError?: boolean;
+interface MaterialInfoRespWithStatus extends MaterialInfoResp {
+  photoLoadError?: boolean;
+}
+
 const queryForm = reactive<MaterialInfoQuery>({
   materialName: undefined,
   encoding: undefined,
@@ -97,6 +118,7 @@ const {
   search,
   handleDelete,
 } = useTable((page) => listMaterialInfo({ ...queryForm, ...page }), { immediate: true })
+
 const columns = ref<TableInstanceColumns[]>([
   { title: '物料名称', dataIndex: 'materialName', slotName: 'materialName' },
   { title: '物料编码', dataIndex: 'encoding', slotName: 'encoding' },
@@ -116,14 +138,12 @@ const columns = ref<TableInstanceColumns[]>([
   },
 ])
 
-// 重置
 const reset = () => {
   queryForm.materialName = undefined
   queryForm.encoding = undefined
   search()
 }
 
-// 删除
 const onDelete = (record: MaterialInfoResp) => {
   return handleDelete(() => deleteMaterialInfo(record.id), {
     content: `是否确定删除该条数据？`,
@@ -131,25 +151,26 @@ const onDelete = (record: MaterialInfoResp) => {
   })
 }
 
-// 导出
 const onExport = () => {
   useDownload(() => exportMaterialInfo(queryForm))
 }
 
-// 图片加载失败处理函数（新增）
-const handleImgError = (e: Event) => {
-  // 替换为你的默认图片地址（建议放在/static目录下）
-  const target = e.target as HTMLImageElement
-  target.src = '/static/images/default-material.png'
+// 【修改点】图片加载处理逻辑
+const handleImgLoad = (record: MaterialInfoRespWithStatus) => {
+  record.photoLoadError = false
+}
+
+const handleImgError = (record: MaterialInfoRespWithStatus, e: Event) => {
+  // 标记为加载错误，触发模板渲染 "照片异常"
+  record.photoLoadError = true
+  console.warn(`物料照片加载失败: ${record.photoUrl}`)
 }
 
 const MaterialInfoAddModalRef = ref<InstanceType<typeof MaterialInfoAddModal>>()
-// 新增
 const onAdd = () => {
   MaterialInfoAddModalRef.value?.onAdd()
 }
 
-// 修改
 const onUpdate = (record: MaterialInfoResp) => {
   MaterialInfoAddModalRef.value?.onUpdate(record.id)
 }
@@ -166,23 +187,43 @@ const onPhotosImport = () => {
 </script>
 
 <style scoped lang="scss">
-// 物料照片样式（新增）
 .photo-container {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 80px;
+  width: 100%;
+  overflow: hidden;
 }
 
 .material-photo {
-  width: 80px;
-  height: 80px;
-  object-fit: cover; // 保持图片比例，避免拉伸
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   border-radius: 4px;
+  transition: opacity 0.3s;
 }
 
 .no-photo {
   color: #999;
   font-size: 12px;
+  text-align: center;
+}
+
+// 新增样式
+.photo-error {
+  color: #ff4d4f; // 阿里红/危险色
+  font-size: 12px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.4;
+
+  .error-icon {
+    font-size: 18px;
+    margin-bottom: 2px;
+  }
 }
 </style>