zuozhengqing
2023-11-10 d3004dd80e5fa80c696eaf2aeff089c5fb01bfe2
src/views/productManage/product/AddProductDialog.vue
@@ -43,6 +43,8 @@
            :show-procure="showProcure"
            :countObject="statisticsMap"
            :show-sale="showSale"
            @listingRulesClick="listingRulesClick"
            @reorderRulesClick="reorderRulesClick"
          />
          <div class="bottom">
            <el-tabs v-model="activeName" type="card">
@@ -120,6 +122,14 @@
                      :disabled="!showFooter"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="图片上传:" prop="imageUrl">
                    <IconCropper
                      :isView="isView"
                      :image-url="editConfig.infomation.imageSrc"
                      @getImageData="getImageData"
                      style="width: 85%"
                    />
                  </el-form-item>
                </div>
                <div class="right">
                  <el-form-item label="销售价格" prop="salePrice">
@@ -130,7 +140,7 @@
                      :min="0"
                      :controls="false"
                      size="mini"
                      style="width: 81%"
                      style="width: 85%"
                      :disabled="!showFooter"
                    ></el-input-number>
                  </el-form-item>
@@ -152,7 +162,7 @@
                      :min="0"
                      :controls="false"
                      size="mini"
                      style="width: 81%"
                      style="width: 85%"
                      :disabled="!showFooter"
                    ></el-input-number>
                  </el-form-item>
@@ -165,7 +175,7 @@
                      :disabled="!showFooter"
                    >
                      <el-option
                        v-for="item in productCategoryListWithDefault"
                        v-for="item in productCategoryOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
@@ -460,11 +470,11 @@
</template>
<script>
// import CommonFormTableView from "@/components/makepager/CommonFormTableView"
import IconCropper from "./IconCropper"
import { getProductCategoryList } from "@/api/product/productCategory"
import { getProductList, addProduct, updateProduct } from "@/api/product/product"
import { uploadFiles } from "@/api/common/other"
let inputElement = null
export default {
  name: "AddProductDialog",
  props: {
@@ -475,23 +485,20 @@
          visible: false,
          title: "新建",
          infomation: {},
          autoEdit:false
          autoEdit: false
        }
      }
    }
  },
  components: {},
  components: { IconCropper },
  computed: {
    productCategoryListWithDefault(){
      return [{id:0,name:'请选择'},...(this.productCategoryOptions ?? [])]
    },
    modalTitle(){
      if (this.editConfig.title === '编辑' && this.editConfig.autoEdit){
        return '编辑'
      }else if (this.editConfig.title === '编辑') {
        return !this.showEdit ? '编辑' : '查看'
      }else {
        return '新建'
    modalTitle() {
      if (this.editConfig.title === "编辑" && this.editConfig.autoEdit) {
        return "编辑"
      } else if (this.editConfig.title === "编辑") {
        return !this.showEdit ? "编辑" : "查看"
      } else {
        return "新建"
      }
    }
  },
@@ -502,13 +509,12 @@
      rules: {
        name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
        model: [{ required: true, message: "请选择物料类型", trigger: "change" }],
        salePrice: [{ required: true, message: "请输入销售价格", trigger: "blur" }],
        // salePrice: [{ required: true, message: "请输入销售价格", trigger: "blur" }],
        unit: [{ required: true, message: "请输入单位", trigger: "blur" }]
      },
      memberOptions: [{ name: "管理员", id: 1 }],
      productCategoryOptions: [], // 产品类别
      productTypeOptions: [
        { name: "请选择", id: 0 },
        { name: "能消耗", id: 1 },
        { name: "服务", id: 2 },
        { name: "可库存产品", id: 3 }
@@ -544,20 +550,48 @@
      ],
      statisticsMap: {
        inLibrary: 0 // 在库
      }
      },
      isView: false,
      fileFormdata: null // 上传图片入参
    }
  },
  created() {
    if (this.editConfig.title === "编辑" && !this.editConfig.autoEdit) {
      this.isView = true
    }
    this.getProductCategoryList()
    this.getProductList()
    this.setTableForm()
    this.setBottonView()
    this.statisticsMap.inLibrary = this.editConfig?.infomation?.amount ?? 0
    if (this.editConfig.autoEdit){
    if (this.editConfig.autoEdit) {
      this.editClick()
    }
    this.setOptionalFieldsToEmpty()
  },
  methods: {
    /**
     * 非必填项后端返回的是数字 0,表单需要空串才能视为未选择回显
     */
    setOptionalFieldsToEmpty() {
      let arr = ["productType", "categoryId"]
      arr
        .filter((filed) => this.editConfig.infomation[filed] === 0)
        .forEach((filed) => {
          this.editConfig.infomation[filed] = ""
        })
    },
    /**
     * 后端只接受数字形式, 保存时还得再转回去
     */
    unsetFieldsToNumber() {
      let arr = ["productType", "categoryId"]
      arr
        .filter((filed) => this.editConfig.infomation[filed] === "")
        .forEach((filed) => {
          this.editConfig.infomation[filed] = 0
        })
    },
    // 获取产品类别
    async getProductCategoryList() {
      await getProductCategoryList({
@@ -617,19 +651,45 @@
      console.log(this.editConfig.infomation)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let requestUrl = this.editConfig.title === "新建" ? addProduct : updateProduct
          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 = []
            }
          })
            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() {},
@@ -690,50 +750,9 @@
      this.tableData.splice(scope.$index, 1)
    },
    // 上传图片
    toGetImg() {
      if (this.showFooter) {
        if (inputElement === null) {
          // 生成文件上传的控件
          inputElement = document.createElement("input")
          inputElement.setAttribute("type", "file")
          inputElement.style.display = "none"
          if (window.addEventListener) {
            inputElement.addEventListener("change", this.uploadFile, false)
          } else {
            inputElement.attachEvent("onchange", this.uploadFile)
          }
          document.body.appendChild(inputElement)
        }
        inputElement.click()
      }
    },
    uploadFile(el) {
      if (el && el.target && el.target.files && el.target.files.length > 0) {
        console.log(el)
        const files = el.target.files[0]
        const isLt2M = files.size / 1024 / 1024 < 2
        const size = files.size / 1024 / 1024
        console.log(size)
        // 判断上传文件的大小
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!")
        } else if (files.type.indexOf("image") === -1) {
          //如果不是图片格式
          this.$message.error("请选择图片文件")
        } else {
          const that = this
          const reader = new FileReader() // 创建读取文件对象
          reader.readAsDataURL(el.target.files[0]) // 发起异步请求,读取文件
          reader.onload = function () {
            // 读取完成后,将结果赋值给img的src
            that.imageSrc = this.result
            console.log(this.result)
            // 数据传到后台
            //const formData = new FormData()
            //formData.append('file', files); // 可以传到后台的数据
          }
        }
      }
    getImageData(formdata) {
      this.fileFormdata = formdata
      // console.log(formdata, "图片数据")
    },
    // 进出点击
    inOutBoundClick() {
@@ -749,7 +768,7 @@
      }
    },
    // 在库点击
    inLibraryClick(){
    inLibraryClick() {
      if (this.editConfig.title !== "新建") {
        console.log(this.editConfig.infomation)
        this.$router.push({
@@ -761,6 +780,34 @@
        })
      }
    },
    // 上架规则
    listingRulesClick() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$router.push({
            path: "/warehouseManage/listingRules",
            query: {
              productName: this.editConfig.infomation.name,
              productId: this.editConfig.title === "新建" ? "" : this.editConfig.infomation.id
            }
          })
        }
      })
    },
    // 重订购规则
    reorderRulesClick() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$router.push({
            path: "/productManage/reorderRules",
            query: {
              productName: this.editConfig.infomation.name,
              productId: this.editConfig.title === "新建" ? "" : this.editConfig.infomation.id
            }
          })
        }
      })
    },
    // 可销售/可采购
    checkboxChange(val, param) {
      if (val === "采购") {