feat: 产品/产品类别编辑弹窗非必填项表单备选项删除请选择,重置接口返回字段式表单正常回显

songshankun

2023-10-20 8669f9f8959e29d4dea457cd88416d9b954b35af

feat: 产品/产品类别编辑弹窗非必填项表单备选项删除请选择,重置接口返回字段式表单正常回显

 src/api/data.js

@@ -100,10 +100,6 @@
// 强制下架策略
const forceRemovalStrategy = [
  {
    name: "请选择",
    id: 0
  },
  {
    name: "先进先出",
    id: 1
  },
@@ -119,10 +115,6 @@
//成本方法
const costingMethod = [
  {
    name: "请选择",
    id: 0
  },
  {
    name: "标准价格",
    id: 1
  },
@@ -137,10 +129,6 @@
]
// 库存计价
const inventoryValuation = [
  {
    name: "请选择",
    id: 0
  },
  {
    name: "手动",
    id: 1

 src/views/productManage/product/AddProductDialog.vue

@@ -165,7 +165,7 @@
                      :disabled="!showFooter"
                    >
                      <el-option
                        v-for="item in productCategoryListWithDefault"
                        v-for="item in productCategoryOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
@@ -482,9 +482,6 @@
  },
  components: {},
  computed: {
    productCategoryListWithDefault() {
      return [{ id: 0, name: "请选择" }, ...(this.productCategoryOptions ?? [])]
    },
    modalTitle() {
      if (this.editConfig.title === "编辑" && this.editConfig.autoEdit) {
        return "编辑"
@@ -508,7 +505,6 @@
      memberOptions: [{ name: "管理员", id: 1 }],
      productCategoryOptions: [], // 产品类别
      productTypeOptions: [
        { name: "请选择", id: 0 },
        { name: "能消耗", id: 1 },
        { name: "服务", id: 2 },
        { name: "可库存产品", id: 3 }
@@ -556,8 +552,29 @@
    if (this.editConfig.autoEdit) {
      this.editClick()
    }
    this.setOptionalFieldsToEmpty()
  },
  methods: {
    /**
     * 非必填项后端返回的是数字 0,表单需要空串才能视为未选择回显
     */
    setOptionalFieldsToEmpty(){
      ['productType','categoryId']
          .filter(filed => this.editConfig.infomation[filed] === 0)
          .forEach(filed => {
            this.editConfig.infomation[filed] = ''
          })
    },
    /**
     * 后端只接受数字形式, 保存时还得再转回去
     */
    unsetFieldsToNumber(){
      ['productType','categoryId']
          .filter(filed => this.editConfig.infomation[filed] === '')
          .forEach(filed => {
            this.editConfig.infomation[filed] = 0
          })
    },
    // 获取产品类别
    async getProductCategoryList() {
      await getProductCategoryList({
@@ -618,6 +635,7 @@
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let requestUrl = this.editConfig.title === "新建" ? addProduct : updateProduct
          this.unsetFieldsToNumber()
          requestUrl({
            ...this.editConfig.infomation
          }).then((res) => {
@@ -627,7 +645,7 @@
              this.$message.success("添加成功")
              this.$parent.getData()
            }
          })
          },console.error)
        }
      })
    },

 src/views/productManage/product/index.vue

@@ -259,17 +259,17 @@
    },
    // 新建
    addBtnClick() {
      this.editConfig.visible = true
      this.editConfig.title = "新建"
      this.editConfig.infomation = {}
      this.editConfig.visible = true
    },
    // 详情
    showDetail(row) {
      console.log(row)
      this.editConfig.visible = true
      this.editConfig.autoEdit = false
      this.editConfig.title = "编辑"
      this.editConfig.infomation = { ...row }
      this.editConfig.visible = true
    },
    // 编辑
    editRow(row){

 src/views/productManage/productCategory/AddProductCategoryDialog.vue

@@ -88,7 +88,7 @@
                    style="width: 85%"
                    :disabled="!showFooter"
                  >
                    <el-option v-for="item in productCategoryListWithDefault" :key="item.id" :label="item.name" :value="item.id">
                    <el-option v-for="item in productCategoryList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
@@ -197,9 +197,6 @@
  },
  components: {},
  computed: {
    productCategoryListWithDefault(){
      return [{id:0,name:'请选择'},...(this.productCategoryList?? [])]
    },
    modalTitle(){
      if (this.editConfig.title === '编辑' && this.editConfig.autoEdit){
        return '编辑'
@@ -239,8 +236,29 @@
    if (this.editConfig.autoEdit){
      this.editClick()
    }
    this.setOptionalFieldsToEmpty()
  },
  methods: {
    /**
     * 非必填项后端返回的是数字 0,表单需要空串才能视为未选择回显
     */
    setOptionalFieldsToEmpty(){
      ['parentId','costingMethod','inventoryValuation','forceRemovalStrategy']
          .filter(filed => this.editConfig.infomation[filed] === 0)
          .forEach(filed => {
            this.editConfig.infomation[filed] = ''
          })
    },
    /**
     * 后端只接受数字形式, 保存时还得再转回去
     */
    unsetFieldsToNumber(){
      ['parentId','costingMethod','inventoryValuation','forceRemovalStrategy']
          .filter(filed => this.editConfig.infomation[filed] === '')
          .forEach(filed => {
            this.editConfig.infomation[filed] = 0
          })
    },
    // 获取产品数量
    getProductCount(){
      getProductList({
@@ -294,6 +312,7 @@
      this.showFooter = true
    },
    saveParams() {
      this.unsetFieldsToNumber()
      let data = JSON.parse(JSON.stringify(this.editConfig.infomation))

      let params = {