From 46051c015bc5dc4f787340466181ee217c95115e Mon Sep 17 00:00:00 2001
From: taozi <1362265981@qq.com>
Date: Wed, 31 Dec 2025 09:40:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/materials/index.vue | 72 ++++++++++++++++++++++++++---------
 1 file changed, 53 insertions(+), 19 deletions(-)

diff --git a/src/views/materials/index.vue b/src/views/materials/index.vue
index 1c3543e..70f8c65 100644
--- a/src/views/materials/index.vue
+++ b/src/views/materials/index.vue
@@ -5,6 +5,21 @@
         :table-loading="loading" @row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange"
         @search-reset="searchReset" :page.sync="page">
       </avue-crud>
+      <template slot="picture" slot-scope="scope">
+          <el-upload
+            class="avatar-uploader"
+            action="/api/upload"              
+            :show-file-list="false"
+            list-type="picture-card"
+            :on-success="(res, file) => handleUploadSuccess(res, file, scope)"
+            :before-upload="beforeUpload"
+            :on-preview="handlePreview"
+            :headers="uploadHeaders"
+          >
+            <img v-if="scope.row.picture" :src="scope.row.picture" class="avatar" style="width:100%;height:100%;object-fit:contain;" />
+            <i v-else class="el-icon-plus"></i>
+          </el-upload>
+        </template>
     </basic-container>
   </div>
 </template>
@@ -13,7 +28,10 @@ import { getList, add, remove, update, getCode } from "@/api/materials/list";
 export default {
   data() {
     return {
-      form: { imageUrl: "" },
+      form: {
+        imageUrl: "",
+        picture: ""  // 用于存储接口返回的图片地址
+      },
       selectionList: [],
       query: {},
       loading: true,
@@ -98,30 +116,45 @@ export default {
           {
             label: '图片',
             prop: 'picture',
-            type: 'upload',
             headerAlign: "center",
             align: "center",
-            loadText: "图片上传中，请稍等",
-            span: 12,
-            // propsHttp: { //配置请求接口返回的数据结构
-            //   url: 'picture', //路径地址
-            //   name: 'name', //图片名称
-            //   res: 'data' //返回数据层级结构
-            // },
-            tip: "只能上传jpg/png文件",
+            slot: true,  // 使用自定义插槽
+            add: true,   // 新增时显示
+            edit: true,  // 编辑时显示
+            view: true,  // 查看时显示
             rules: [{
               required: true,
               message: "请上传图片",
-              trigger: "change",
-            }],
-                formatter: (row, column) => {
-              const value = row.picture;
-              if (value === null || value === undefined || value === "") {
-                return "无"
-              }
-              return value;
-            }
+              trigger: "change"
+            }]
           },
+          // {
+          //   label: '图片',
+          //   prop: 'picture',
+          //   type: 'upload',
+          //   headerAlign: "center",
+          //   align: "center",
+          //   loadText: "图片上传中，请稍等",
+          //   span: 12,
+          //   // propsHttp: { //配置请求接口返回的数据结构
+          //   //   url: 'picture', //路径地址
+          //   //   name: 'name', //图片名称
+          //   //   res: 'data' //返回数据层级结构
+          //   // },
+          //   tip: "只能上传jpg/png文件",
+          //   rules: [{
+          //     required: true,
+          //     message: "请上传图片",
+          //     trigger: "change",
+          //   }],
+          //       formatter: (row, column) => {
+          //     const value = row.picture;
+          //     if (value === null || value === undefined || value === "") {
+          //       return "无"
+          //     }
+          //     return value;
+          //   }
+          // },
         ],
       },
       data: [],
@@ -135,6 +168,7 @@ export default {
     this.fetchMaterialCode();
   },
   methods: {
+   
     fetchMaterialCode() {
       getCode()
         .then((res) => {