batchIncreaseAir.vue

<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <products-selector ref="productSelector" v-model="form.productIdList" show-all @setall="isAllProduct=$event"
                         enable-filtered @setFiltered="isAllFilteredProduct=$event"
                         :default-ids="form.productIdList" class="mb-20"/>

      <routers-selector v-model="selectedRoutes" :type="type" />

      <el-card style="margin-bottom: 10px">
        <div slot="header" style="font-size:20px;">
          {{$t('价格设置')}}
        </div>
        <el-form-item :label="$t('单价模式')" prop="priceType">
          <dict-selector :type="DICT_TYPE.ECW_PRICE_TYPE" v-model="form.priceType" form-type="radio" formatter="number" />
        </el-form-item>

        <!--全包价-->
        <template v-if="form.priceType === 1" >
          <div v-for="(item, index) in form.fullPriceStepList" :key="index" class="mb-20">
            <price-step
              ref="stepPrice"
              :index="index"
              :currency-list="currencyList"
              :unit-list="unitList"
              field-prefix="all"
              :price-name="$t('全包价')"
              :show-add="index === form.fullPriceStepList.length -1"
              :value="item"
              :step-tips="!isStepPriceValid(item) ? $t('区间设置不完整，将被忽略') : null"
              @add="handleAddPrice('fullPriceStepList', $event)"
              @delete="handleDeletePrice('fullPriceStepList', $event)"
              @changeUnit="handleUnitChange(form.fullPriceStepList, index, ...$event)"
            ></price-step>
          </div>
        </template>
        <el-row v-else :gutter="20" class="mt-20">
          <el-col :span="12">
            <div v-for="(item, index) in form.freightPriceStepList" :key="index"  class="mb-20">
              <price-step
                ref="stepPrice"
                :index="index"
                :currency-list="currencyList"
                :unit-list="unitList"
                field-prefix="transport"
                :price-name="$t('运费')"
                :show-add="index === form.freightPriceStepList.length -1"
                :value="item"
                :step-tips="!isStepPriceValid(item) ? $t('区间设置不完整，将被忽略') : null"
                @add="handleAddPrice('freightPriceStepList', $event)"
                @delete="handleDeletePrice('freightPriceStepList', $event)"
                @changeUnit="handleUnitChange(form.freightPriceStepList, index, ...$event)"
              ></price-step>
            </div>
          </el-col>
          <el-col :span="12">
            <div v-for="(item, index) in form.clearancePriceStepList" :key="index" class="mb-20">
              <price-step
                ref="stepPrice"
                :index="index"
                :currency-list="currencyList"
                :unit-list="unitList"
                field-prefix="clearance"
                :price-name="$t('清关费')"
                :show-add="index === form.clearancePriceStepList.length -1"
                :value="item"
                :step-tips="!isStepPriceValid(item) ? $t('区间设置不完整，将被忽略') : null"
                @add="handleAddPrice('clearancePriceStepList', $event)"
                @delete="handleDeletePrice('clearancePriceStepList', $event)"
                @changeUnit="handleUnitChange(form.clearancePriceStepList, index, ...$event)"
              ></price-step>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <div style="margin: 20px 0">
      <el-button @click="submitForm" type="primary" :loading="loading">{{$t('确认提交')}}</el-button>
      <el-button type="default" @click="$router.back()">{{$t('返回上一页')}}</el-button>
    </div>
  </div>
</template>
<script>
import RoutersSelector from '@/components/RoutersSelector'
import {batchAddPrice, batchAddPriceAir, batchUpdateProductPrice, getProductPrice} from "@/api/ecw/productPrice";
import { getCurrencyList } from '@/api/ecw/currency';
import { getUnitList } from '@/api/ecw/unit';
import ProductsSelector from '@/components/ProductsSelector'
import Selector from '@/components/Selector'
import Inputor from '@/components/Inputor'
import Decimal from 'decimal.js'
import PriceStep from "@/views/ecw/productPrice/components/PriceStep.vue";
import {getProductTypeList} from "@/api/ecw/productType";

// 定义默认的价格单位和体积单位
const DEFAULT_PRICE_UNIT = 1
const DEFAULT_VOLUME_UNIT = 6
const DEFAULT_WEIGHT_UNIT = 6

export default {
  components: {PriceStep, RoutersSelector, ProductsSelector, Selector, Inputor },
  data() {
    return {
      checkList: [],
      selectedRoutes: [], // 勾选的路线渠道
      form: {
        priceType: undefined,
        specialList: [],
        // 空运固定阶梯价
        stepPrice: 1,
        fullPriceStepList:[],
        freightPriceStepList:[],
        clearancePriceStepList:[]
      },
      isAllProduct: false, // 是否全部商品
      isAllFilteredProduct: false, // 是否全部篩選商品
      specialProducts: [],
      rules: {},
      product: null,
      currencyList: [],
      unitList: [],
      productTypeList: [],
      productDisabled: true,
      lineList: [], //路线数组
      loading: false,
      // 批量加价/减价
      quickForm:{}
    }
  },
  computed: {
    // 类型，默认海运sea,air表示空运
    type(){
      return this.$route.path.split(/[-_]/).pop()
    },
    // 判断阶梯价是否有效
    isStepPriceValid(){
      return stepPrice => {
        return (stepPrice.startNum || stepPrice.startNum === 0) && stepPrice.endNum
      }
    },
  },
  watch: {
    checkList() { //选择路线
      if (this.checkList.length > 0) {
        this.form.lineChannelList = this.checkList.map(item => {
          return { lineId: item, shippingChannelId: 0 }
        })
      } else {
        this.form.lineChannelList = []
      }
    },
    product() {
      this.$set(this.form, 'productType', this.product.typeId)
    },
    "form.priceType"(priceType){
      if(priceType && !this.form.fullPriceStepList?.length){
        this.handleAddPrice("fullPriceStepList", "all")
      }
      if(!priceType){
        if(!this.form.freightPriceStepList?.length){
          this.handleAddPrice("freightPriceStepList", "transport")
        }
        if(!this.form.clearancePriceStepList?.length){
          this.handleAddPrice("clearancePriceStepList", "clearance")
        }
      }
    }
  },
  async created() {
    this.currencyList = (await getCurrencyList())?.data || []
    this.unitList = (await getUnitList())?.data || []
    this.productTypeList = (await getProductTypeList())?.data || []
  },
  methods: {
    handleAddPrice(field, fieldPrefix){
      if(!this.form[field]){
        this.$set(this.form, field, [])
      }
      let priceUnit = DEFAULT_PRICE_UNIT
      let volumeUnit = DEFAULT_VOLUME_UNIT
      let weightUnit = DEFAULT_WEIGHT_UNIT
      if(this.form[field].length){
        const first = this.form[field][0]
        priceUnit = first[`${fieldPrefix}PriceUnit`]
        volumeUnit = first[`${fieldPrefix}VolumeUnit`]
        weightUnit = first.weightUnit
      }
      console.log("添加价格的默认单位", {
        priceUnit,
        volumeUnit,
        weightUnit
      })
      this.form[field].push({
        [`${fieldPrefix}PriceUnit`]: priceUnit,
        [`${fieldPrefix}VolumeUnit`]: volumeUnit,
        weightUnit: weightUnit,
        specialList:[]
      })
    },
    handleDeletePrice(field, index){
      this.form[field].splice(index, 1)
    },
    handleUnitChange(stepPriceList, index, data){
      console.log('handleUnitChange', ...arguments)
      if(index > 0) return
      const isVolumeUnit = data.field.indexOf("VolumeUnit") > -1
      // 如果是重量单位,且不是清关费想换的，则需要同步最小起计量单位
      if(isVolumeUnit && data.type != 'clearance'){
        this.form.minWeightUnit = data.value
      }
      stepPriceList.forEach(item => {
        item[data.field] = data.value
        // 如果是设置体积单位，则还需要同步到阶梯重量单位
        if(isVolumeUnit){
          item['weightUnit'] = data.value
        }
        if(item.packagingList?.length){
          item.packagingList.forEach(p => {
            if(data.field.indexOf("PriceUnit") > -1){
              p['packagingPriceUnit'] = data.value
            }
            if(data.field.indexOf("VolumeUnit") > -1){
              p['packagingVolumeUnit'] = data.value
            }
          })
        }
        if(item.specialList?.length){
          item.specialList.forEach(p => {
            p[data.field] = data.value
          })
        }
      })
    },

    // 获得用语提交的阶梯价副本
    getPriceList(stepList){
      if(!stepList?.length) return []
      let stepPriceList = JSON.parse(JSON.stringify(stepList))
      stepPriceList.forEach((item, index) => {
        item.rankNum = index + 1
        item.packagingList = item.packagingList.filter(p => !!p.packagingTypes?.length)
        item.packagingList = item.packagingList.map( p => {
          p.packagingTypes = p.packagingTypes.join(",")
          return p
        })
      })
      // 过滤掉空的阶梯
      return stepPriceList.filter(this.isStepPriceValid)
    },

    submitForm() {
      this.$refs["form"].validate(async (valid) => {
        if (!valid) {
          return;
        }

        // 只有新增的时候做判断
        if (!this.$route.query.ids && (!this.selectedRoutes || !this.selectedRoutes.length)) {
          this.$message.error(this.$t('请选择线路'));
          return;
        }

        let data = Object.assign({}, this.form, {
          // lineChannelList: this.selectedRoutes,
          // specialList: this.specialProducts,
          isAllProduct: this.isAllProduct ? 1:0
        })

        if(!data.isAllProduct && (!data.productIdList || !data.productIdList.length)){
          return this.$message.error(this.$t('请选择商品') + "!")
        }

        data.lineChannelList = this.selectedRoutes

        if(data.lineChannelList.length < 1){
          return this.$message.error(this.$t('请选择需要修改的路线'))
        }

        data.fullPriceStepList= this.getPriceList(data.fullPriceStepList)
        data.freightPriceStepList= this.getPriceList(data.freightPriceStepList)
        data.clearancePriceStepList= this.getPriceList(data.clearancePriceStepList)

        // 检查被忽略的阶梯价
        let msgArr = [];
        if(data.priceType){
          const ignoreAll =  this.form.fullPriceStepList.length - data.fullPriceStepList.length
          if(ignoreAll){
            msgArr.push(this.$t("{n}个全包阶梯价", {n: ignoreAll}))
          }
          if(!data.fullPriceStepList?.length){
            return this.$message.error(this.$t('请设置全包价'))
          }
        }else{
          const ignoreFreight = this.form.freightPriceStepList.length - data.freightPriceStepList.length
          const ignoreClearance = this.form.clearancePriceStepList.length - data.clearancePriceStepList.length

          if(ignoreFreight){
            msgArr.push(this.$t("{n}个运费阶梯价", {n: ignoreFreight}))
          }
          if(ignoreClearance){
            msgArr.push(this.$t("{n}个清关费阶梯价", {n: ignoreClearance}))
          }

          if(!data.freightPriceStepList?.length && !data.clearancePriceStepList?.length){
            return this.$message.error(this.$t('请设置运费或清关费'))
          }
        }
        let msg = this.$t('已选择{route}条路线，{product}个商品', {
          route: data.lineChannelList.length,
          product: this.isAllProduct ? this.$refs.productSelector.allTotal : data.productIdList.length
        })
        if(msgArr.length){
          msg += ";" + msgArr.join(",") + "被忽略"
        }
        await this.$confirm(msg + this.$t('；确认提交修改？', ))

        this.loading = true
        batchAddPriceAir(data).then(async(response) => {
          await this.$alert(this.$t("操作成功"));
          this.$store.dispatch("tagsView/delCurrentView")
        })
        .finally(res => {
          this.loading = false
        })
      });
    }
  }
}
</script>
<style scoped>
.w100{
  width: 100px;
}
.mr10{
  margin-right: 10px;
}
.tips{
  color: red;
}
</style>