查看页面编辑产品时图片无法修改

yangfeng

2023-11-14 cab6ab717f0f799c86cc7cb6aefbb73640208cd0

查看页面编辑产品时图片无法修改

 src/views/productManage/product/AddProductDialog.vue

@@ -71,21 +71,24 @@
                      style="width: 85%"
                      v-if="
                        editConfig.title == '编辑' ||
                        (editConfig.title == '新建' &&
                          codenumer &&
                          (explain != '' || isIdDisabled))
                        (editConfig.title == '新建' && codenumer && (explain != '' || isIdDisabled))
                      "
                      :disabled="editConfig.title != '新建'"
                      v-model="editConfig.infomation.id"
                      placeholder="请输入编码"
                    >
                    </el-input>
                    <span  v-else-if="editConfig.title == '新建'" style="color: #f56c6c;width: 85%"
                    <span v-else-if="editConfig.title == '新建'" style="color: #f56c6c; width: 85%"
                      >请优先配置编码规范 <el-button type="text" @click="numberClick"> 配置规范 </el-button></span
                    >
                  </el-form-item>
                  <el-form-item label="产品规格" prop="specs">
                    <el-input style="width: 85%" :disabled="!showFooter" v-model="editConfig.infomation.specs" placeholder="请输入"></el-input>
                    <el-input
                      style="width: 85%"
                      :disabled="!showFooter"
                      v-model="editConfig.infomation.specs"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="产品类型" prop="productType">
                    <el-select
@@ -205,11 +208,18 @@
                    </el-select>
                  </el-form-item>
                  <el-form-item label="产品型号" prop="type">
                    <el-input  style="width: 85%" :disabled="!showFooter"  v-model="editConfig.infomation.type" placeholder="请输入"></el-input>
                    <el-input
                      style="width: 85%"
                      :disabled="!showFooter"
                      v-model="editConfig.infomation.type"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="采购类型" prop="purchaseType">
                    <el-radio-group :disabled="!showFooter" v-model="editConfig.infomation.purchaseType">
                      <el-radio v-for="item in purchaseTypeList" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
                      <el-radio v-for="item in purchaseTypeList" :key="item.id" :label="item.id">{{
                        item.name
                      }}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="内部编码" prop="internalReference">
@@ -503,8 +513,8 @@
import { getProductCategoryList } from "@/api/product/productCategory"
import { getProductList, addProduct, updateProduct } from "@/api/product/product"
import { uploadFiles } from "@/api/common/other"
import codeMixin from "@/components/mixin/codeMixin";
import { getDataByType } from "@/api/data";
import codeMixin from "@/components/mixin/codeMixin"
import { getDataByType } from "@/api/data"
export default {
  mixins: [codeMixin],
  name: "AddProductDialog",
@@ -539,12 +549,12 @@
      editConfig: this.editCommonConfig,
      rules: {
        name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
        id: [{ required: true, validator: this.validateCheckCode,  trigger: ["change",'blur' ]}],
        id: [{ required: true, validator: this.validateCheckCode, trigger: ["change", "blur"] }],
        model: [{ required: true, message: "请选择物料类型", trigger: "change" }],
        // salePrice: [{ required: true, message: "请输入销售价格", trigger: "blur" }],
        unit: [{ required: true, message: "请输入单位", trigger: ["change",'blur' ] }],
        unit: [{ required: true, message: "请输入单位", trigger: ["change", "blur"] }],
        // 采购类型
        purchaseType: [{ required: true, message: "请选择", trigger: "blur" }],
        purchaseType: [{ required: true, message: "请选择", trigger: "blur" }]
      },
      memberOptions: [{ name: "管理员", id: 1 }],
      productCategoryOptions: [], // 产品类别
@@ -583,17 +593,25 @@
        { name: "其他", id: "其他" }
      ],
      statisticsMap: {
        amount: this.editCommonConfig.infomation.amount?this.editCommonConfig.infomation.amount:0,// 在库
        predictionAmount:this.editCommonConfig.infomation.predictionAmount?this.editCommonConfig.infomation.predictionAmount:0,//预测
        inputAmount:this.editCommonConfig.infomation.inputAmount?this.editCommonConfig.infomation.inputAmount:0,//进
        outputAmount:this.editCommonConfig.infomation.outputAmount?this.editCommonConfig.infomation.outputAmount:0,//出
        reorderRuleNum:this.editCommonConfig.infomation.reorderRuleNum?this.editCommonConfig.infomation.reorderRuleNum:0,//重订货规则数量
        minInventoryRule:this.editCommonConfig.infomation.minInventoryRule?this.editCommonConfig.infomation.minInventoryRule:0,//最小重订货
        maxInventoryRule:this.editCommonConfig.infomation.maxInventoryRule?this.editCommonConfig.infomation.maxInventoryRule:0,//最大重订货
        amount: this.editCommonConfig.infomation.amount ? this.editCommonConfig.infomation.amount : 0, // 在库
        predictionAmount: this.editCommonConfig.infomation.predictionAmount
          ? this.editCommonConfig.infomation.predictionAmount
          : 0, //预测
        inputAmount: this.editCommonConfig.infomation.inputAmount ? this.editCommonConfig.infomation.inputAmount : 0, //进
        outputAmount: this.editCommonConfig.infomation.outputAmount ? this.editCommonConfig.infomation.outputAmount : 0, //出
        reorderRuleNum: this.editCommonConfig.infomation.reorderRuleNum
          ? this.editCommonConfig.infomation.reorderRuleNum
          : 0, //重订货规则数量
        minInventoryRule: this.editCommonConfig.infomation.minInventoryRule
          ? this.editCommonConfig.infomation.minInventoryRule
          : 0, //最小重订货
        maxInventoryRule: this.editCommonConfig.infomation.maxInventoryRule
          ? this.editCommonConfig.infomation.maxInventoryRule
          : 0 //最大重订货
      },
      isView: false,
      fileFormdata: null, // 上传图片入参
      purchaseTypeList: getDataByType("purchaseType"),
      purchaseTypeList: getDataByType("purchaseType")
    }
  },
  created() {
@@ -612,16 +630,16 @@
      this.editClick()
    }
    this.setOptionalFieldsToEmpty()
    this.formInfo();
    this.formInfo()
  },
  methods: {
    formInfo() {
      this.objCode.type = "物料编码";
      this.objCode.codeStandID = "";
      this.objCode.type = "物料编码"
      this.objCode.codeStandID = ""
      if (this.editConfig.infomation.codeStandardID) {
        this.objCode.codeStandID = this.editConfig.infomation.codeStandardID;
        this.objCode.codeStandID = this.editConfig.infomation.codeStandardID
      }
      this.getRCodeStandardList();
      this.getRCodeStandardList()
    },
    /**
     * 非必填项后端返回的是数字 0,表单需要空串才能视为未选择回显
@@ -697,6 +715,7 @@
      this.showEdit = false
      this.showButton = false
      this.showFooter = true
      this.isView = false
      this.setTableForm()
    },
    // 保存
@@ -732,19 +751,19 @@
    saveEditRequest(attachmentIDs) {
      let requestUrl = this.editConfig.title === "新建" ? addProduct : updateProduct
      this.unsetFieldsToNumber()
      let params={
      let params = {
        ...this.editConfig.infomation,
        attachmentIDs
      }
      if (this.editConfig.title == "新建") {
        params.codeStandardID = this.autoCodeObj.codeStandardID;
        params.autoIncr = this.autoCodeObj.maxAutoIncr;
        params.codeStandardID = this.autoCodeObj.codeStandardID
        params.autoIncr = this.autoCodeObj.maxAutoIncr
      }
      requestUrl(params).then((res) => {
        console.log(res)
        this.editConfig.visible = false
        if (res.code === 200) {
          this.$message.success(this.editConfig.title === "新建"?'添加':'编辑'+'成功!')
          this.$message.success(this.editConfig.title === "新建" ? "添加" : "编辑" + "成功!")
          this.$parent.getData()
        }
      }, console.error)

 src/views/productManage/product/IconCropper.vue

@@ -127,16 +127,30 @@
      fileName: ""
    }
  },
  mounted() {
    console.log(this.imageUrl)
    if (!this.isView && this.imageUrl?.length > 0) {
      this.isPreview = true
      this.previewImg = this.imageUrl
    } else {
      this.isPreview = false
  computed: {
    myIsView() {
      return this.isView
    }
  },
  watch: {
    myIsView() {
      this.setImgMethods()
    }
  },
  mounted() {
    console.log(this.imageUrl)
    this.setImgMethods()
  },
  methods: {
    // 设置上传/更换图片显示方法
    setImgMethods() {
      if (!this.isView && this.imageUrl?.length > 0) {
        this.isPreview = true
        this.previewImg = this.imageUrl
      } else {
        this.isPreview = false
      }
    },
    // 上传按钮 限制图片大小和类型
    handleChangeUpload(file, fileList) {
      const isJPG = file.raw.type === "image/jpeg" || file.raw.type === "image/png"