新增商品图片从表

src/views/basicData/commodityType/configuration/imgUploadList.json

@@ -0,0 +1,87 @@
+{
+  "lazy": true,
+  "align": "center",
+  "menuAlign": "left",
+  "tip": false,
+  "simplePage": true,
+  "searchShow": true,
+  "searchMenuSpan": 6,
+  "dialogWidth": "60%",
+  "tree": true,
+  "refreshBtn": false,
+  "border": true,
+  "index": true,
+  "selection": true,
+  "menuWidth": 300,
+  "dialogClickModal": false,
+  "addBtnText": "上  传",
+  "column": [{
+    "label": "文件名称",
+    "prop": "fileName",
+    "index": 1,
+    "width": 100,
+    "rules": [
+      {
+        "required": true,
+        "message": "请输入文件名称",
+        "trigger": "blur"
+      }
+    ]
+  },{
+    "label": "备注",
+    "prop": "remarks",
+    "index": 2,
+    "width": 100,
+    "rules": [
+      {
+        "required": false,
+        "message": "请输入备注",
+        "trigger": "blur"
+      }
+    ]
+  }, {
+    "label": "图片",
+    "prop": "img",
+    "type": "upload",
+    "index": 3,
+    "width": 150,
+    "listType": "picture-img",
+    "span": 24,
+    "tip": "只能上传jpg/png/jpeg文件，且不超过2M,宽高比为1:1",
+    "action": "/api/blade-resource/oss/endpoint/put-file",
+    "dataType": "string",
+    "propsHttp": {
+      "res": "data",
+      "url": "link"
+    },
+    "rules": [
+      {
+        "required": true,
+        "message": "请上传图片",
+        "trigger": "blur"
+      }
+    ]
+  },
+    {
+      "label": "商品详情轮播",
+      "prop": "string",
+      "dataType": "string",
+      "type": "upload",
+      "propsHttp": {
+        "res": "data",
+        "url": "link"
+      },
+      "span": 24,
+      "listType": "picture-card",
+      "tip": "只能上传jpg/png/jpeg文件，且不超过2M,宽为750，高不大于1000",
+      "action": "/api/blade-resource/oss/endpoint/put-file",
+      "rules": [
+        {
+          "required": true,
+          "message": "请上传图片",
+          "trigger": "blur"
+        }
+      ]
+    }
+  ]
+}

src/views/basicData/commodityType/detailsPageEdit.vue

@@ -101,6 +101,14 @@
         </basic-container>
         <containerTitle title="商品图片"></containerTitle>
         <basic-container style="margin-bottom: 10px">
+          <avue-crud ref="imgUpload"
+                     :option="imgUploadList"
+                     :data="imgUploadData"
+                     @row-save="imgUploadSave"
+                     @row-update="imgUploadUpdate"
+                     @row-del="imgUploadDel"
+                     :upload-before="uploadBefore"
+          ></avue-crud>
         </basic-container>
         <containerTitle title="详情页编辑"></containerTitle>
         <basic-container style="margin-bottom: 10px">
@@ -114,6 +122,8 @@
 import customerContact from "./configuration/customerContact.json"
 import customerPurchase from "./configuration/customerPurchase.json"
 import {detail, corpsattn, typeSave} from "@/api/maintenance/priceManagement"
+import imgUploadList from "./configuration/imgUploadList.json"
+
 export default {
   name: "detailsPage",
   data() {
@@ -132,8 +142,10 @@ export default {
       disabled: false,
       customerContact: customerContact,
       customerPurchase: customerPurchase,
+      imgUploadList: imgUploadList,
       contactsForm: {},
       contactsData: [],
+      imgUploadData: [],
       basicData: {
         column: [
           {
@@ -464,6 +476,79 @@ export default {
         }
       });
     },
+    // 商品图片上传保存
+    imgUploadSave(row, done, loading) {
+      console.log(row)
+      this.imgUploadData.push(row)
+      done()
+    },
+    imgUploadUpdate(row, index, done, loading) {
+      done()
+    },
+    imgUploadDel(row, index, donerowDel) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        //商品判断是否需要调用删除接口
+        if (row.id) {
+          // corpsattn(row.id).then(res => {
+          //   this.$message({
+          //     type: "success",
+          //     message: "操作成功!"
+          //   });
+          //   this.imgUploadData.splice(index, 1);
+          // })
+        } else {
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          this.imgUploadData.splice(index, 1);
+        }
+      })
+    },
+    // 上传前
+    uploadBefore(file, done, loading,column) {
+      console.log(loading)
+      const is2M = file.size / 1024 / 1024 < 2
+      const isType = file.type === ("image/jpeg" || "image/png" || "image/jpg")
+      if (!isType) {
+        this.$message.error('图片只能是JPG、JPEG、PNG格式')
+      } else {
+        loading()
+      }
+      if (!is2M) {
+        this.$message.error('图片大小不能超过2M')
+      } else {
+        loading()
+      }
+      const img = new Image();
+      const _URL = window.URL || window.webkitURL;
+      let isSize = null;
+      img.onload = () => {
+        if (column.label == '图片') {
+          isSize= img.width === img.height;
+          if (!isSize) {
+            this.$message.error('图片宽高限制比例为1:1')
+          }
+        } else {
+          const width = 750;
+          const height = 1000;
+          isSize = img.width === width && img.height <= height;
+          if (!isSize) {
+            this.$message.error('商品详情轮播图宽为750，高不能超过1000')
+          }
+        }
+        if (is2M && isType && isSize) {
+          done()
+        } else {
+          loading()
+        }
+      };
+      img.src = _URL.createObjectURL(file);
+    },
     //返回列表
     backToList() {
       this.$router.$avueRouter.closeTag();