SeaStep.vue

<script>
import Selector from "@/components/Selector/index.vue";
import Inputor from "@/components/Inputor/index.vue";
import Template from "@/views/cms/template/index.vue";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";

export default {
  name: "SeaStep",
  components: {Template, Inputor, Selector},
  props:{
    index: Number,
    priceType: Number, // 1全包价，0清关费+运费
    unitList:{
      type: Array,
      default: []
    },
    currencyList:{
      type: Array,
      default: []
    },
    showAdd: Boolean,
    readonly: Boolean,
    value:{
      type: Object,
      default: () => {
        return {

        }
      }
    }
  },
  created() {
    this.initSpecialPrice()
  },
  data(){
    return {

    }
  },
  methods:{
    getDictDatas,
    // 初始化特需加价
    initSpecialPrice(){
      if(!this.value.specialList){
        this.$set(this.value, 'specialList', [])
      }
      this.getDictDatas(this.DICT_TYPE.ECW_SPECIAL_REQ_FOR_LINE_PRODUCTS).forEach(item => {
        if(!this.value.specialList.find(special => special.specialDictType == item.value)){
          this.value.specialList.push({
            allPrice: undefined, // 新建默认给0，否则默认是null
            allPriceUnit: this.value[`allPriceUnit`],
            allVolumeUnit: this.value[`allVolumeUnit`],
            transportPrice: undefined, // 新建默认给0，否则默认是null
            transportPriceUnit: this.value[`transportPriceUnit`],
            transportVolumeUnit: this.value[`transportVolumeUnit`],
            clearancePrice: undefined,
            clearancePriceUnit: this.value[`clearancePriceUnit`],
            clearanceVolumeUnit: this.value[`clearanceVolumeUnit`],
            specialDictType: item.value
          })
        }
      })
    },
    // 校验
    validate(){
      let valid = true
      const index = this.index
      // 区间设置检查
      if(index > 0 && !this.value.startNum){
        valid = false
        this.$message.error(`请设置第${index+1}阶段的起始值`)
      }
      if(!this.value.endNum){
        valid = false
        this.$message.error(`请设置第${index+1}阶段的结束值`)
      }
      // 价格检查
      if(this.priceType){
        if(!this.validatePrice(this.value[`allPrice`])){
          valid = false
          this.$message.error(`请设置第${index+1}阶段的全包价`)
        }
      }else{
        if(!this.validatePrice(this.value[`transportPrice`])){
          valid = false
          this.$message.error(`请设置第${index+1}阶段的运费`)
        }
        if(!this.validatePrice(this.value[`clearancePrice`])){
          valid = false
          this.$message.error(`请设置第${index+1}阶段的清关费`)
        }
      }

      return valid
    },
    // 校验价格是否为空，可以是0
    validatePrice(value){
      if(value === undefined || value === null || value === ''){
        return false
      }
      return true
    },
  }
}
</script>

<template>
  <div>
    <div style="font-size:14px; margin:10px 0">
      {{$t('第{index}阶梯定价方案', {index: index+1})}}：
      <template v-if="showAdd">
        <el-link type="primary" @click.native="$emit('add', fieldPrefix)">{{$t('添加区间')}}</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link type="danger" @click.native="$emit( 'delete', index)">{{$t('删除')}}</el-link>
      </template>
    </div>
    <el-form-item :label="$t('第{index}阶梯', {index: index+1})">
      <el-input-number v-model="value.startNum" :controls="false" class="w-100"></el-input-number>
      -
      <el-input-number v-model="value.endNum" :controls="false" class="w-100"></el-input-number>
      /
      <selector
        :disabled="index>0"
        v-model="value.weightUnit"
        :options="unitList"
        :label-field="$l(null, 'title')"
        @input="$emit('changeUnit', {
          value: $event,
          field: 'weightUnit',
          type: fieldPrefix
        })"
        value-field="id"
        class="w-100" />
    </el-form-item>
    <el-form-item :label="$t('默认运费')" v-if="!priceType">
      <el-input-number v-model="value[`transportPrice`]" :placeholder="$t('整数或者两位小数')" :precision="2" :controls="false" class="w-100 mr-10"/>
      <selector
        :disabled="index>0"
        v-model="value[`transportPriceUnit`]"
        :options="currencyList"
        :label-field="$l(null, 'title')"
        @input="$emit('changeUnit', {
           value: $event,
           field: `transportPriceUnit`
        })"
        value-field="id"
        class="w-100" />
      /
      <selector
        :disabled="index>0"
        v-model="value[`transportVolumeUnit`]"
        :options="unitList"
        :label-field="$l(null, 'title')"
        @input="$emit('changeUnit', {
            value: $event,
            field: `transportVolumeUnit`
          })"
        value-field="id"
        class="w-100" />
    </el-form-item>
    <el-form-item :label="$t('默认清关费')" v-if="!priceType">
      <el-input-number v-model="value[`clearancePrice`]" :placeholder="$t('整数或者两位小数')" :precision="2" :controls="false" class="w-100 mr-10"/>
      <selector
        :disabled="index>0"
        v-model="value[`clearancePriceUnit`]"
        :options="currencyList"
        :label-field="$l(null, 'title')"
        @input="$emit('changeUnit', {
           value: $event,
           field: `clearancePriceUnit`
        })"
        value-field="id"
        class="w-100" />
      /
      <selector
        :disabled="index>0"
        v-model="value[`clearanceVolumeUnit`]"
        :options="unitList"
        :label-field="$l(null, 'title')"
        @input="$emit('changeUnit', {
            value: $event,
            field: `clearanceVolumeUnit`
          })"
        value-field="id"
        class="w-100" />
    </el-form-item>
    <el-form-item :label="$t('默认全包价')" v-if="priceType">
      <el-input-number v-model="value[`allPrice`]" :placeholder="$t('整数或者两位小数')" :precision="2" :controls="false" class="w-100 mr-10"/>
      <selector
        :disabled="index>0"
        v-model="value[`allPriceUnit`]"
        :options="currencyList"
        :label-field="$l(null, 'title')"
        @input="$emit('changeUnit', {
           value: $event,
           field: `allPriceUnit`
        })"
        value-field="id"
        class="w-100" />
      /
      <selector
        :disabled="index>0"
        v-model="value[`allVolumeUnit`]"
        :options="unitList"
        :label-field="$l(null, 'title')"
        @input="$emit('changeUnit', {
            value: $event,
            field: `allVolumeUnit`
          })"
        value-field="id"
        class="w-100" />
    </el-form-item>
    <!--特性加价-->
    <template v-for="(special, specialIndex) in value.specialList">
      <div :key="specialIndex + 'transport'">
        <el-form-item
          v-if="!priceType"
          :label="getDictDataLabel(DICT_TYPE.ECW_SPECIAL_REQ_FOR_LINE_PRODUCTS, special.specialDictType) + $t('运费')"
        >
          <el-input-number v-model.number="special[`transportPrice`]" :controls="false" :min="0" :placeholder="$t('整数或者两位小数')" class="w-100 mr-10" />
          <selector disabled v-model="special[`transportPriceUnit`]" :options="currencyList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100 mr-10" />
          <span class="mr-10">/</span>
          <selector disabled v-model="special[`transportVolumeUnit`]" :options="unitList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100" />
        </el-form-item>
        <el-form-item
          v-if="!priceType"
          :label="getDictDataLabel(DICT_TYPE.ECW_SPECIAL_REQ_FOR_LINE_PRODUCTS, special.specialDictType) + $t('清关费')"
        >
          <el-input-number v-model.number="special[`clearancePrice`]" :controls="false" :min="0" :placeholder="$t('整数或者两位小数')" class="w-100 mr-10" />
          <selector disabled v-model="special[`clearancePriceUnit`]" :options="currencyList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100 mr-10" />
          <span class="mr-10">/</span>
          <selector disabled v-model="special[`clearanceVolumeUnit`]" :options="unitList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100" />
        </el-form-item>
        <el-form-item
          v-if="priceType"
          :label="getDictDataLabel(DICT_TYPE.ECW_SPECIAL_REQ_FOR_LINE_PRODUCTS, special.specialDictType) + $t('全包价')"
        >
          <el-input-number v-model.number="special[`allPrice`]" :controls="false" :min="0" :placeholder="$t('整数或者两位小数')" class="w-100 mr-10" />
          <selector disabled v-model="special[`allPriceUnit`]" :options="currencyList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100 mr-10" />
          <span class="mr-10">/</span>
          <selector disabled v-model="special[`allVolumeUnit`]" :options="unitList" :label-field="$l(null, 'title')" value-field="id" defaultable2 class="w-100" />
        </el-form-item>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.bold {
  font-weight: bold;
}
.text-lg{
  font-size: 1.3rem;
}
.tips{
  font-size: 1rem; color: red;
}
</style>