添加、编辑上传图片接口联调及编辑和查看和列表图片回显

yangfeng

2023-11-09 d35533b1b42df7e1808a19a8ea72613e605cd6ef

 src/views/productManage/product/AddProductDialog.vue

@@ -140,7 +140,7 @@
                      :min="0"
                      :controls="false"
                      size="mini"
                      style="width: 81%"
                      style="width: 85%"
                      :disabled="!showFooter"
                    ></el-input-number>
                  </el-form-item>
@@ -162,7 +162,7 @@
                      :min="0"
                      :controls="false"
                      size="mini"
                      style="width: 81%"
                      style="width: 85%"
                      :disabled="!showFooter"
                    ></el-input-number>
                  </el-form-item>
@@ -473,6 +473,7 @@
import IconCropper from "./IconCropper"
import { getProductCategoryList } from "@/api/product/productCategory"
import { getProductList, addProduct, updateProduct } from "@/api/product/product"
import { uploadFiles } from "@/api/common/other"

export default {
  name: "AddProductDialog",
@@ -550,18 +551,14 @@
      statisticsMap: {
        inLibrary: 0 // 在库
      },
      isView: false
      isView: false,
      fileFormdata: null // 上传图片入参
    }
  },
  created() {
    if (this.editConfig.title === "编辑" && !this.editConfig.autoEdit) {
      this.isView = true
    }
    // if (this.editConfig.title === "新建") {
    //   this.editConfig.infomation.imageSrc = ""
    // } else {
    //   this.editConfig.infomation.imageSrc = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    // }
    this.getProductCategoryList()
    this.getProductList()
    this.setTableForm()
@@ -654,20 +651,45 @@
      console.log(this.editConfig.infomation)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let requestUrl = this.editConfig.title === "新建" ? addProduct : updateProduct
          this.unsetFieldsToNumber()
          requestUrl({
            ...this.editConfig.infomation
          }).then((res) => {
            console.log(res)
            this.editConfig.visible = false
            if (res.code === 200) {
              this.$message.success("添加成功")
              this.$parent.getData()
          console.log(this.fileFormdata == null)
          let attachmentIDs = []
          if (this.fileFormdata == null) {
            if (this.editConfig.infomation.attachmentList?.length > 0) {
              this.editConfig.infomation.attachmentList.forEach((ele) => {
                attachmentIDs.push(ele.id)
              })
            } else {
              attachmentIDs = []
            }
          }, console.error)
            this.saveEditRequest(attachmentIDs)
          } else {
            uploadFiles(this.fileFormdata).then((res) => {
              if (res.code == 200) {
                res.data.forEach((ele) => {
                  attachmentIDs.push(ele.id)
                })
              }
              this.saveEditRequest(attachmentIDs)
            })
          }
        }
      })
    },
    // 保存/编辑接口请求
    saveEditRequest(attachmentIDs) {
      let requestUrl = this.editConfig.title === "新建" ? addProduct : updateProduct
      this.unsetFieldsToNumber()
      requestUrl({
        ...this.editConfig.infomation,
        attachmentIDs
      }).then((res) => {
        console.log(res)
        this.editConfig.visible = false
        if (res.code === 200) {
          this.$message.success("添加成功")
          this.$parent.getData()
        }
      }, console.error)
    },
    // 删除
    delClick() {},
@@ -728,8 +750,9 @@
      this.tableData.splice(scope.$index, 1)
    },
    // 上传图片
    getImageData(data) {
      console.log(data, "图片数据")
    getImageData(formdata) {
      this.fileFormdata = formdata
      // console.log(formdata, "图片数据")
    },
    // 进出点击
    inOutBoundClick() {