物资管理上传图片调整

src/views/materials/index.vue

@@ -1,9 +1,28 @@
 <template>
   <div>
     <basic-container>
-      <avue-crud :option="option" v-model="form" :data="data" @row-del="rowDel" @on-load="onLoad"
+      <avue-crud
-        :table-loading="loading" @row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange"
+        :option="option"
-        @search-reset="searchReset" :page.sync="page">
+        v-model="form"
+        :data="data"
+        @row-del="rowDel"
+        @on-load="onLoad"
+        :table-loading="loading"
+        @row-update="rowUpdate"
+        @row-save="rowSave"
+        @search-change="searchChange"
+        @search-reset="searchReset"
+        :page.sync="page"
+        :upload-after="uploadAfter"
+      >
+        <template slot="pictureImg" slot-scope="scope">
+          <!-- {{scope.row.picture}} -->
+          <el-image
+            style="width: 60px; height: 60px"
+            :src="scope.row.picture"
+            fit="fill"
+          ></el-image>
+        </template>
       </avue-crud>
     </basic-container>
   </div>
@@ -69,8 +88,7 @@ export default {
             type: "select",
             headerAlign: "center",
             align: "center",
-            dicData: [
+            dicData: [],
-            ],
             props: {
               label: "label",
               value: "value",
@@ -94,33 +112,25 @@ export default {
                 return "无";
               }
               return value;
-            }
+            },
           },
           {
-            label: '图片',
+            label: "图片",
-            prop: 'picture',
+            prop: "picture",
-            type: 'upload',
+            type: "upload",
             headerAlign: "center",
             align: "center",
             loadText: "图片上传中，请稍等",
             span: 12,
             tip: "只能上传jpg/png文件",
-            // rules: [{
+            hide: true,
-            //   required: true,
+            httpRequest: this.handleUpload,
-            //   message: "请上传图片",
-            //   trigger: "change",
-            // }],
-            formatter: (row, column) => {
-              const value = row.picture;
-              if (value === null || value === undefined || value === "") {
-                return "无"
-              }
-              return value;
           },
-            onSuccess: (res, file, fileList) => {
+          {
-              this.form.picture = res.data
+            label: "图片",
-            },
+            prop: "pictureImg",
-            httpRequest: this.handleUpload
+            span: 12,
+            display: false,
           },
         ],
       },
@@ -135,16 +145,20 @@ export default {
     this.fetchMaterialCode();
   },
   methods: {
+    uploadAfter(res, done, loading, column) {
+      console.log("上传成功", res, done, loading, column);
+    },
     handleUpload(params) {
-      const formData = new FormData()
+      const formData = new FormData();
-      formData.append('file', params.file)
+      formData.append("file", params.file);
       upload(formData)
-        .then(res => {
+        .then((res) => {
-          params.onSuccess(res)
+          this.form.picture = res.data.message;
-        })
+          params.onSuccess(res);
-        .catch(err => {
-          params.onError(err)
         })
+        .catch((err) => {
+          params.onError(err);
+        });
     },
     fetchMaterialCode() {
       getCode()
@@ -152,17 +166,17 @@ export default {
           const dicData = res.data.result.map((item) => ({
             label: item.name,
             value: item.code,
-          }))
+          }));
           const targetColumn = this.option.column.find(
             (col) => col.prop === "materialCode"
-          )
+          );
           if (targetColumn) {
-            targetColumn.dicData = dicData
+            targetColumn.dicData = dicData;
           }
         })
         .catch((error) => {
           this.$message.error("加载类别数据失败，请刷新重试");
-        })
+        });
     },
     handleLog() {
       this.dialogLogVisible = true;
@@ -219,7 +233,7 @@ export default {
           window.console.log(error);
           loading();
         }
-      )
+      );
     },
     //修改
     rowUpdate(row, index, done, loading) {