vue后台管理 地址配送的逻辑 （省，市，区，街道）的单选和多选的具体的逻辑

第一种 省（单选）市（单选）区（单选) 街道（多选）

效果：

代码：

<templete>
    <div class="add-product">
        <el-form
          ref="form"
          :model="productForm"
          label-position="left"
          label-width="140px"
          size="mini"
        > 
          <el-form-item label="配送地址">
            <el-select
              v-model="productForm.provinceCode"
             
              placeholder="请选择省"
              @change="onChoiceProvince"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-select
              v-model="productForm.cityCode"
            
              placeholder="请选择市"
              @change="onChoiceCity"
            >
              <el-option
                v-for="item in cityList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-select
              v-model="productForm.countyCode"
              
              placeholder="请选择区"
              @change="onChoiceCounty"
            >
              <el-option
                v-for="item in countyList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select> 
             <el-select
              v-model="productForm.streetCode"
              multiple
              placeholder="请选择街道"
              @change="onChoiceStreet"
            >
              <el-option
                v-for="item in streetList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>    
</templete>
<script>
import { Loading } from "element-ui";
import {
  getAllProvince, //获取省市区街道的接口
} from "api/request";
import { ERR_OK } from "api/config";
import { loadingInstance, Success, Error } from "common/js/util";
export default {
    data() {
      return {
          productForm: {
              provinceCode: [], //配送地址的省code
              cityCode: [], //配送地址的市code
              countyCode: [], //配送地址的区code
              streetCode: [], //配送地址的街道code
              province: null, //配送地址的省名称
              city: null, //配送地址的省名称
              county: null, //配送地址的省名称
              street: "" , //配送地址的省名称
        }
      provinceList: [],
      cityList: [],
      countyList: [],
      streetList: []
      }
    },
 mounted() {
    let getUserInfo = JSON.parse(window.localStorage.getItem("getUserInfo"));
    if (!getUserInfo) {
      this.$router.push({
        path: "/"
      });
    } else {
      this.fileyHeader = {
        token: getUserInfo.token,
        "Content-Type": "multipart/form-data"
      };
      this.productId = this.$route.query.productId;
      this._getProvince();
      this._getProvinceList("0");
    }
  },
  methods: {
     // 请选择省
      onChoiceProvince(code) {
      this.productForm.cityCode = this.productForm.countyCode = 
      this.productForm.streetCode = null;
      this.provinceList.map(item => {
        if (item.code == code) {
          this.productForm.province = item.name;
        }
      });

      this._getCityList(code);
    },
    // 请选择市
      onChoiceCity(code) {
      this.productForm.countyCode = this.productForm.streetCode = null;
      this.cityList.map(item => {
        if (item.code == code) {
          this.productForm.city = item.name;
        }
      });
      this._getCountyList(code);
    },
     // 请选择区
    onChoiceCounty(code) {
      this.productForm.streetCode = null;
      this.countyList.map(item => {
        if (item.code == code) {
          this.productForm.county = item.name;
        }
      });
      this._getStreetList(code);
    },
     // 请选择街道
    onChoiceStreet(codeList) {
      this.productForm.street = "";
      this.$forceUpdate();
      this.streetList.map(item => {
        for (var i = 0; i < codeList.length; i++) {
          if (item.code == codeList[i]) {
            this.productForm.street = this.productForm.street + "," + item.name;
          }
        }
      });
      // console.log(codeList.toString());
      // console.log(this.productForm.street);
    },  
       //获取省份
    _getProvinceList(code) {
      getAllProvince({
        pcode: code
      }).then(res => {
        if (res.status === ERR_OK) {
          this.provinceList = res.data;
        } else {
          Error(this, res);
        }
      });
    },
    //获取市
    _getCityList(code) {
      getAllProvince({
        pcode: code
      }).then(res => {
        if (res.status === ERR_OK) {
          this.cityList = res.data;
        } else {
          Error(this, res);
        }
      });
    },
    //获取区
    _getCountyList(code) {
      getAllProvince({
        pcode: code
      }).then(res => {
        if (res.status === ERR_OK) {
          this.countyList = res.data;
        } else {
          Error(this, res);
        }
      });
    },
    //获取街道
    _getStreetList(code) {
      getAllProvince({
        pcode: code
      }).then(res => {
        if (res.status === ERR_OK) {
          this.streetList = res.data;
        } else {
          Error(this, res);
        }
      });
    },


   
    // 获取城市
    _getProvince() {
      let param = {};
      loadingInstance(Loading);
      getAllProvince(param).then(res => {
        loadingInstance(Loading).close();
        if (res.status === ERR_OK) {
          this.provinceOptions = res.data;
          if (this.productId != null) {
            this._getProductDetail();
          }
        } else {
          Error(this, res);
        }
      });
    },

     //里面有把多选的街道渲染到页面的逻辑
      _getProductDetail() {
      let param = {
        spuId: parseInt(this.productId)
      };
      getProductDetail(param).then(res => {
        loadingInstance(Loading).close();
        if (res.status === ERR_OK) {
          this.productForm = res.data;
          console.log("9999");
          console.log(this.productForm);
          // 如果 isPoints 为 null，则将其设置为 0
          if (this.productForm.isPoints === null) {
            this.productForm.isPoints = 0;
          }
          if (this.productForm.isOnePay === null) {
            this.productForm.isOnePay = 0;
          }
          if (this.productForm.isSubsidyRate === null) {
            this.productForm.isSubsidyRate = 0;
          }
          if (this.productForm.isRestock === null) {
            this.productForm.isRestock = 0;
          }
          this.productForm.isLevel = this.productForm.isLevel + "";
          this.specialSpec = res.data.specialSpec;
          this.isRestock = res.data.isRestock; //是否进入进获区
          this.isPoints = res.data.isPoints; // 商品积分抵扣
          this.isOnePay = res.data.isOnePay; //一元购商品
          this.isSubsidyRate = res.data.isSubsidyRate; //不结算市场管理奖
          this.isRegion = res.data.isRegion; //是否区域产品
          // console.log(this.isPoints);
          // this.provinceList = this.productForm.provinceList;
          this.cityList = this.productForm.cityList;
          this.countyList = this.productForm.countyList;
          this.streetList = this.productForm.streetList;
          //街道显示的代码
          if (
            this.productForm.streetCode != null &&
            this.productForm.streetCode != ""
          ) {
            this.productForm.streetCode = this.productForm.streetCode.split(
              ","
            );
          }
          
          // 接收
          this.skuBos = res.data.skuVos;
          res.data.areaFees = []; //首先对 "res.data.areaFees" 进行了初始化操作，将其赋值为空数组 []。如果在整个代码块执行前需要清空或重置 "res.data.areaFees"，
          if (this.skuBos) {
            this.skuBos.forEach(item => {
              if (item.areaFees !== null) {
                item.areaFees.forEach(data => {
                  res.data.areaFees.push(data);
                });
              }
            });
            // console.log(res.data.areaFees);
          }
          if (res.data.skuVos && res.data.skuVos.length > 0) {
            this.fxPrices = res.data.skuVos.map(item => {
              return {
                skuId: item.id,
                title: item.title,
                price: this._getRepet(item, "-1"),
                price0: this._getRepet(item, "0"),
                price1: this._getRepet(item, "1"),
                price2: this._getRepet(item, "2"),
                price3: this._getRepet(item, "3"),
                price4: this._getRepet(item, "4")
              };
            });
          }
          if (res.data.areaFees) {
            this.areaFees = res.data.areaFees;
            for (let i = 0; i < this.areaFees.length; i++) {
              let province = this.areaFees[i];
              province.provinces = province.codes
                .map((item, idx) => {
                  var value = this.provinceOptions.find(function(ele, index) {
                    return ele.code == item;
                  });
                  return value.name;
                })
                .toString();
            }
          }
         
          if (
            res.data.skuVos[0].repetitionPriceVos[1] &&
            res.data.skuVos[0].repetitionPriceVos[2] &&
            res.data.skuVos[0].repetitionPriceVos[1].price &&
            res.data.skuVos[0].repetitionPriceVos[2].price
          ) {
            this.active = Math.round(
              (1 -
                res.data.skuVos[0].repetitionPriceVos[2].price /
                  res.data.skuVos[0].repetitionPriceVos[1].price) *
                100
            );
          }

        
          this.productForm.skuVos = null;
          this.productForm.homePage = this.productForm.homePage + "";
          this.productForm.newHomePage = this.productForm.newHomePage + "";
          this.productForm.exchange = this.productForm.exchange + "";
          this.productForm.refundable = this.productForm.refundable + "";
          this.productForm.isDistributor = this.productForm.isDistributor + "";
          this.productForm.isPurchase = this.productForm.isPurchase + "";
          this.productForm.type = this.productForm.type + "";
          this.fileList = [];
          this.fileList.push({
            name: res.data.masterImage,
            url: res.data.masterImage
          });
          this.fileList1 = [];
          for (let i = 0; i < res.data.detailsImages.length; i++) {
            let imgUrl = res.data.detailsImages[i];
            this.fileList1.push({
              name: imgUrl,
              url: imgUrl
            });
          }
          this.categorySelect = [res.data.cid1, res.data.cid2];
        } else {
          Error(this, res);
        }
      });
    },
    
   //里面有一个提交街道的逻辑
     onSubmit() {
      if (this.skuBos.length < 1) {
        alert("请添加商品参数");
      } else {
        this.productForm.homePage = parseInt(this.productForm.homePage);
        this.productForm.newHomePage = parseInt(this.productForm.newHomePage);
        this.productForm.exchange = parseInt(this.productForm.exchange);
        this.productForm.refundable = parseInt(this.productForm.refundable);
        this.productForm.isNumGoods = parseInt(this.productForm.isNumGoods);

        this.productForm.skuBos = this.skuBos;

        //街道    // 如果streetCode不是 null，它执行一个操作，将 provinceCode 转换为字符串。
        if (this.productForm.streetCode != null) {
          this.productForm.streetCode = this.productForm.streetCode.toString();
        }
    
      
        // console.log(this.areaFees);
        let b = [];
        // 删除外层的数据
        this.areaFees.map((item, index, arr) => {
          if (
            item.hasOwnProperty("specialSpecValue") &&
            item.specialSpecValue !== null
          ) {
            b.push(index);
          }
        });
        for (var i = b.length - 1; i >= 0; i--) {
          this.areaFees.splice(b[i], 1);
        }
        this.productForm.areaFees = this.areaFees;
        this.removeIds.map(item => {
          this.productForm.skuBos.push({
            id: item
          });
        });
        this.productForm.specialSpec = this.specialSpec;
        // 检查 this.productForm.isNumGoods 是否不等于1，如果不等于1，则排除 perPrice 字段
        if (this.productForm.isNumGoods !== 1) {
          delete this.productForm.perPrice;
        }
        loadingInstance(Loading);
        if (this.productId != null) {
          // console.log(this.productForm);
          updateProduct(this.productForm).then(res => {
            loadingInstance(Loading).close();
            if (res.status === ERR_OK) {
              Success(this, res);
              // 这个记得一会儿打开
              this.$router.push({
                path: "/product"
              });
            } else {
              this.reset();
              Error(this, res);
            }
          });
        } else {
          // console.log(this.productForm);
          addProduct(this.productForm).then(res => {
            loadingInstance(Loading).close();
            if (res.status === ERR_OK) {
              Success(this, res);
              this.$router.push({
                path: "/product"
              });
            } else {
              this.reset();
              Error(this, res);
            }
          });
        }
      }
    },
   
   }
  }
</script>
<style scoped>
.add-product {
  height: fit-content;
  margin-left: 50px;
  margin-top: 30px;
  margin-bottom: 30px;
  box-sizing: border-box;
}
</style>

第二种 省（单选）市（单选）区（多选) 街道（多选）

效果：

<templete>
  <div class="add-product">
      <el-form
        ref="form" label-width="80px" class="content"
      > 
        <el-form-item label="配送地址">
          <el-select
            v-model="product.regionProvinceCode"
            placeholder="请选择省"
            @change="onChoiceProvince"
          >
            <el-option
              v-for="item in regionProvinceList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
          <el-select
            v-model="product.regionCityCode"
            placeholder="请选择市"
            @change="onChoiceCity"
          >
            <el-option
              v-for="item in regionCityList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
          <el-select
            v-model="product.regionCountyCode"
            multiple
            placeholder="请选择区"
            @change="onChoiceCounty"
          >
            <el-option
              v-for="item in regionCountyList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
          <el-select
            v-model="product.regionStreetCode"
            multiple
            placeholder="请选择街道"
            @change="onChoiceStreet"
          >
            <el-option
              v-for="item in regionStreetList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>    
</templete>
<script>
import { Loading } from "element-ui";
import {
getAllProvince, //获取省市区街道的接口
} from "api/request";
import { ERR_OK } from "api/config";
export default {
  data() {
    return {
      product: {
        regionProvinceCode: null, //配送地址的省code
        regionCityCode: null, //配送地址的市code
        regionCountyCode: null, //配送地址的区code
        regionStreetCode: null, //配送地址的街道code
        regionProvince: null, //配送地址的省名称
        regionCity: null, //配送地址的市名称
        regionCounty: null, //配送地址的区名称
        regionStreet: null, //配送地址的街道名称
      }
      regionProvinceList: [],
      regionCityList: [],
      regionCountyList: [],
      regionStreetList: [],
    }
  },
mounted() {
  let getUserInfo = JSON.parse(window.localStorage.getItem("getUserInfo"));
  if (!getUserInfo) {
    this.$router.push({
      path: "/"
    });
  } else {
    this.fileyHeader = {
      token: getUserInfo.token,
      "Content-Type": "multipart/form-data"
    };
    this.productId = this.$route.query.productId;
    this._getProvince();
    this._getProvinceList("0");
  }
},
methods: {
   // 请选择省
    onChoiceProvince(code) {
      this.product.regionCityCode = this.product.regionCountyCode = this.product.regionStreetCode = null;
      this.regionProvinceList.map(item => {
        if (item.code == code) {
          this.product.regionProvince = item.name;
        }
      });

      this._getCityList(code);
    },
  // 请选择市
   onChoiceCity(code) {
      this.product.regionCountyCode = this.product.regionStreetCode = null;

      this.regionCityList.map(item => {
        if (item.code == code) {
          this.product.regionCity = item.name;
        }
      });
      this._getCountyList(code);
    },
   // 请选择区
  onChoiceCounty(codeList) {
      this.product.regionStreet = null;
      this.product.regionCounty = codeList
        .map(code => {
          // 找到匹配的项目
          const item = this.regionCountyList.find(item => item.code === code);
          // 如果找到了项目，则返回其名称；否则返回空字符串
          return item ? item.name : "";
        })
        .join(",");
      this._getStreetList(codeList);
    },
    // 请选择街道
  onChoiceStreet(codeList) {
      this.product.regionStreet = "";
      this.$forceUpdate();
      this.regionStreetList.map(item => {
        for (var i = 0; i < codeList.length; i++) {
          if (item.code == codeList[i]) {
            this.product.regionStreet =
              this.product.regionStreet + "," + item.name;
          }
        }
      });
      // console.log(codeList.toString());
      // console.log(this.product.street);
    },
   //获取省份列表
    _getProvinceList(code) {
      // loadingInstance(Loading);
      getAllProvince({
        pcode: code
      }).then(res => {
        // loadingInstance(Loading).close();
        if (res.status === ERR_OK) {
          this.regionProvinceList = res.data;
        } else {
          Error(this, res);
        }
      });
    },
     //获取市列表
    _getCityList(code) {
      // loadingInstance(Loading);
      getAllProvince({
        pcode: code
      }).then(res => {
        // loadingInstance(Loading).close();
        if (res.status === ERR_OK) {
          this.regionCityList = res.data;
        } else {
          Error(this, res);
        }
      });
    },
  //获取区列表
    _getCountyList(code) {
      // loadingInstance(Loading);
      getAllProvince({
        pcode: code
      }).then(res => {
        // loadingInstance(Loading).close();
        if (res.status === ERR_OK) {
          this.regionCountyList = res.data;
        } else {
          Error(this, res);
        }
      });
    },
      //获取街道列表
       _getStreetList(codeList) {
      // 将数组转换为逗号分隔的字符串
      const pcodeParam = codeList.join(",");
      console.log("传入的区县代码:", codeList);
      getAllProvince({
        pcode: pcodeParam
      })
        .then(res => {
          console.log("返回的街道数据:", res);
          if (res.status === ERR_OK) {
            this.regionStreetList = res.data;
          } else {
            Error(this, res);
          }
        })
        .catch(error => {
          console.error("获取街道数据出错:", error);
        });
    },
  
 //里面有一个提交街道的逻辑
     onSubmit() {
      // 先处理 isPick 字段
      let isPick = !this.product.isPick ? "0" : "1";
      this.product.isPick = isPick;

      // 使用解构赋值从 this.product 中排除不需要的字段
      let {
        regionProvinceCode,
        regionCityCode,
        regionCountyCode,
        regionStreetCode,
        ...submissionData
      } = this.product;

      // 使用剩余的 submissionData 进行提交
      addStore(submissionData).then(res => {
        loadingInstance(Loading).close();
        if (res.status === ERR_OK) {
          Success(this, res);
        } else {
          Error(this, res);
        }
      });
    },
 
 }
}
</script>
<style scoped>
.add-product {
height: fit-content;
margin-left: 50px;
margin-top: 30px;
margin-bottom: 30px;
box-sizing: border-box;
}
</style>

代码：

第三种 省（多选）市（多选）区（多选)?

效果：

代码：

<templete>
    <div class="add-product">
        <el-form
          ref="form"
          :model="productForm"
          label-position="left"
          label-width="140px"
          size="mini"
        > 
          <el-form-item label="配送地址">
            <el-select
              v-model="productForm.provinceCode"
              multiple
              placeholder="请选择省"
              @change="onChoiceProvince"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-select
              v-model="productForm.cityCode"
              multiple
              placeholder="请选择市"
              @change="onChoiceCity"
            >
              <el-option
                v-for="item in cityList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
            <el-select
              v-model="productForm.countyCode"
              multiple
              placeholder="请选择区"
              @change="onChoiceCounty"
            >
              <el-option
                v-for="item in countyList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select> 
          </el-form-item>
        </el-form>
      </div>    
</templete>
<script>
import { Loading } from "element-ui";
import {
  getAllProvince, //获取省市区街道的接口
} from "api/request";
import { ERR_OK } from "api/config";
import { loadingInstance, Success, Error } from "common/js/util";
export default {
    data() {
      return {
          productForm: {
              provinceCode: [], //配送地址的省code
              cityCode: [], //配送地址的市code
              countyCode: [], //配送地址的区code
              streetCode: [], //配送地址的街道code
              province: null, //配送地址的省名称
              city: null, //配送地址的省名称
              county: null, //配送地址的省名称
              street: "" , //配送地址的省名称
        }
      provinceList: [],
      cityList: [],
      countyList: [],
      streetList: []
      }
    },
 mounted() {
    let getUserInfo = JSON.parse(window.localStorage.getItem("getUserInfo"));
    if (!getUserInfo) {
      this.$router.push({
        path: "/"
      });
    } else {
      this.fileyHeader = {
        token: getUserInfo.token,
        "Content-Type": "multipart/form-data"
      };
      this.productId = this.$route.query.productId;
      this._getProvince();
      this._getProvinceList("0");
    }
  },
  methods: {
     // 请选择省
     onChoiceProvince(code) {
      this.productForm.cityCode = this.productForm.countyCode = null;
      this.productForm.province = code
        .map(code => {
          const item = this.provinceList.find(item => item.code === code);
          return item ? item.name : "";
        })
        .join(",");

      this._getCityList(code);
    },
    // 请选择市
      onChoiceCity(selectedCityCodes) {
      this.productForm.countyCode = null;
      this.productForm.city = selectedCityCodes
        .map(code => {
          const item = this.cityList.find(item => item.code === code);
          return item ? item.name : "";
        })
        .join(",");

      this._getCountyList(selectedCityCodes);
    },
     // 请选择区
    onChoiceCounty(selectedCountyCodes) {
      this.productForm.county = selectedCountyCodes
        .map(code => {
          const item = this.countyList.find(item => item.code === code);
          return item ? item.name : "";
        })
        .join(",");
    },
      
       //获取省份
    _getProvinceList(code) {
      getAllProvince({
        pcode: code
      }).then(res => {
        if (res.status === ERR_OK) {
          this.provinceList = res.data;
        } else {
          Error(this, res);
        }
      });
    },
    //获取市
    _getCityList(code) {
      const pcodeParam = code.join(",");
      console.log("获取城市列表的省份代码:", code);
      getAllProvince({ pcode: pcodeParam }).then(res => {
        console.log("返回的城市数据:", res);
        if (res.status === ERR_OK) {
          this.cityList = res.data;
        } else {
          Error(this, res);
        }
      });
    },
    //获取区
    _getCountyList(selectedCityCodes) {
      console.log("获取区县列表的城市代码:", selectedCityCodes);
      this.countyList = [];
      let promises = selectedCityCodes.map(cityCode => {
        return getAllProvince({ pcode: cityCode }).then(res => {
          console.log("单个城市下的区县数据:", res);
          if (res.status === ERR_OK) {
            return res.data;
          } else {
            Error(this, res);
            return [];
          }
        });
      });

      Promise.all(promises).then(allCounties => {
        this.countyList = allCounties.flat();
        console.log("所有选中城市的区县数据合并后:", allCounties.flat());
      });
    },


   
    // 获取城市
    _getProvince() {
      let param = {};
      loadingInstance(Loading);
      getAllProvince(param).then(res => {
        loadingInstance(Loading).close();
        if (res.status === ERR_OK) {
          this.provinceOptions = res.data;
          if (this.productId != null) {
            this._getProductDetail();
          }
        } else {
          Error(this, res);
        }
      });
    },

      _getProductDetail() {
      let param = {
        spuId: parseInt(this.productId)
      };
      getProductDetail(param).then(res => {
        loadingInstance(Loading).close();
        if (res.status === ERR_OK) {
          this.productForm = res.data;
          console.log("9999");
          console.log(this.productForm);
          // 如果 isPoints 为 null，则将其设置为 0
          if (this.productForm.isPoints === null) {
            this.productForm.isPoints = 0;
          }
          if (this.productForm.isOnePay === null) {
            this.productForm.isOnePay = 0;
          }
          if (this.productForm.isSubsidyRate === null) {
            this.productForm.isSubsidyRate = 0;
          }
          if (this.productForm.isRestock === null) {
            this.productForm.isRestock = 0;
          }
          this.productForm.isLevel = this.productForm.isLevel + "";
          this.specialSpec = res.data.specialSpec;
          this.isRestock = res.data.isRestock; //是否进入进获区
          this.isPoints = res.data.isPoints; // 商品积分抵扣
          this.isOnePay = res.data.isOnePay; //一元购商品
          this.isSubsidyRate = res.data.isSubsidyRate; //不结算市场管理奖
          this.isRegion = res.data.isRegion; //是否区域产品
          this.cityList = this.productForm.cityList;
          this.countyList = this.productForm.countyList;
          this.streetList = this.productForm.streetList;
        
          // 省
          if (
            this.productForm.provinceCode != null &&
            this.productForm.provinceCode != ""
          ) {
            this.productForm.provinceCode = this.productForm.provinceCode.split(
              ","
            );
          }
          // 市
          if (
            this.productForm.cityCode != null &&
            this.productForm.cityCode != ""
          ) {
            this.productForm.cityCode = this.productForm.city.split(",");
          }
          // 区
          if (
            this.productForm.countyCode != null &&
            this.productForm.countyCode != ""
          ) {
            this.productForm.countyCode = this.productForm.county.split(",");
          }
          // 接收
          this.skuBos = res.data.skuVos;
          res.data.areaFees = []; //首先对 "res.data.areaFees" 进行了初始化操作，将其赋值为空数组 []。如果在整个代码块执行前需要清空或重置 "res.data.areaFees"，
          if (this.skuBos) {
            this.skuBos.forEach(item => {
              if (item.areaFees !== null) {
                item.areaFees.forEach(data => {
                  res.data.areaFees.push(data);
                });
              }
            });
            // console.log(res.data.areaFees);
          }
          if (res.data.skuVos && res.data.skuVos.length > 0) {
            this.fxPrices = res.data.skuVos.map(item => {
              return {
                skuId: item.id,
                title: item.title,
                price: this._getRepet(item, "-1"),
                price0: this._getRepet(item, "0"),
                price1: this._getRepet(item, "1"),
                price2: this._getRepet(item, "2"),
                price3: this._getRepet(item, "3"),
                price4: this._getRepet(item, "4")
              };
            });
          }
          if (res.data.areaFees) {
            this.areaFees = res.data.areaFees;
            for (let i = 0; i < this.areaFees.length; i++) {
              let province = this.areaFees[i];
              province.provinces = province.codes
                .map((item, idx) => {
                  var value = this.provinceOptions.find(function(ele, index) {
                    return ele.code == item;
                  });
                  return value.name;
                })
                .toString();
            }
          }
      
          // 反推复消价格
          if (
            res.data.skuVos[0].repetitionPriceVos[1] &&
            res.data.skuVos[0].repetitionPriceVos[2] &&
            res.data.skuVos[0].repetitionPriceVos[1].price &&
            res.data.skuVos[0].repetitionPriceVos[2].price
          ) {
            this.active = Math.round(
              (1 -
                res.data.skuVos[0].repetitionPriceVos[2].price /
                  res.data.skuVos[0].repetitionPriceVos[1].price) *
                100
            );
          }
          this.productForm.skuVos = null;
          this.productForm.homePage = this.productForm.homePage + "";
          this.productForm.newHomePage = this.productForm.newHomePage + "";
          this.productForm.exchange = this.productForm.exchange + "";
          this.productForm.refundable = this.productForm.refundable + "";
          this.productForm.isDistributor = this.productForm.isDistributor + "";
          this.productForm.isPurchase = this.productForm.isPurchase + "";
          this.productForm.type = this.productForm.type + "";
          this.fileList = [];
          this.fileList.push({
            name: res.data.masterImage,
            url: res.data.masterImage
          });
          this.fileList1 = [];
          for (let i = 0; i < res.data.detailsImages.length; i++) {
            let imgUrl = res.data.detailsImages[i];
            this.fileList1.push({
              name: imgUrl,
              url: imgUrl
            });
          }
          this.categorySelect = [res.data.cid1, res.data.cid2];
        } else {
          Error(this, res);
        }
      });
    }, 
    
   //里面有一个提交街道的逻辑
    
   onSubmit() {
      if (this.skuBos.length < 1) {
        alert("请添加商品参数");
      } else {
        this.productForm.homePage = parseInt(this.productForm.homePage);
        this.productForm.newHomePage = parseInt(this.productForm.newHomePage);
        this.productForm.exchange = parseInt(this.productForm.exchange);
        this.productForm.refundable = parseInt(this.productForm.refundable);
        this.productForm.isNumGoods = parseInt(this.productForm.isNumGoods);
        this.productForm.skuBos = this.skuBos;
        // 如果 provinceCode 不是 null，它执行一个操作，将 provinceCode 转换为字符串。
        if (this.productForm.provinceCode != null) {
          this.productForm.provinceCode = this.productForm.provinceCode.toString();
        }
        if (this.productForm.cityCode != null) {
          this.productForm.cityCode = this.productForm.cityCode.toString();
        }
        if (this.productForm.countyCode != null) {
          this.productForm.countyCode = this.productForm.countyCode.toString();
        }
        // console.log(this.areaFees);
        let b = [];
        // 删除外层的数据
        this.areaFees.map((item, index, arr) => {
          if (
            item.hasOwnProperty("specialSpecValue") &&
            item.specialSpecValue !== null
          ) {
            b.push(index);
          }
        });
        for (var i = b.length - 1; i >= 0; i--) {
          this.areaFees.splice(b[i], 1);
        }
        this.productForm.areaFees = this.areaFees;
        this.removeIds.map(item => {
          this.productForm.skuBos.push({
            id: item
          });
        });
        this.productForm.specialSpec = this.specialSpec;
        // 检查 this.productForm.isNumGoods 是否不等于1，如果不等于1，则排除 perPrice 字段
        if (this.productForm.isNumGoods !== 1) {
          delete this.productForm.perPrice;
        }
        loadingInstance(Loading);
        if (this.productId != null) {
          // console.log(this.productForm);
          updateProduct(this.productForm).then(res => {
            loadingInstance(Loading).close();
            if (res.status === ERR_OK) {
              Success(this, res);
              // 这个记得一会儿打开
              this.$router.push({
                path: "/product"
              });
            } else {
              this.reset();
              Error(this, res);
            }
          });
        } else {
          // console.log(this.productForm);
          addProduct(this.productForm).then(res => {
            loadingInstance(Loading).close();
            if (res.status === ERR_OK) {
              Success(this, res);
              this.$router.push({
                path: "/product"
              });
            } else {
              this.reset();
              Error(this, res);
            }
          });
        }
      }
    },
   
   }
  }
</script>
<style scoped>
.add-product {
  height: fit-content;
  margin-left: 50px;
  margin-top: 30px;
  margin-bottom: 30px;
  box-sizing: border-box;
}
</style>