index.vue

<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="card-title">{{$t('申请特价')}}</div>
      <!-- 列表 -->
      <div class="order-header">
        <span style="font-size: 15px;">{{$t('订单号')}}：{{ order.orderNo }}</span>
        <el-button v-hasPermi="['ecw:order:reduce']" type="primary" @click="moreApply(1)" >{{$t('批量特价申请')}}</el-button>
        <el-button v-hasPermi="['ecw:order:commission']" type="primary" @click="moreApply(2)" >{{$t('批量管理折扣')}}</el-button>
      </div>

      <el-table v-loading="loading" :data="order.orderItemVOList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column :label="$t('序号')" align="center" prop="id" type="index"></el-table-column>
        <el-table-column
          prop="prodTitleZh"
          :label="$t('品名')">
          <template v-slot="{row}">
            {{ row.prodTitleZh }}/{{ row.prodTitleEn }}
          </template>
        </el-table-column>
        <el-table-column
          prop="prodAttrIds"
          :label="$t('填单货物属性')">
          <template v-slot="{row}">
            {{$t('品牌')}}：<dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="row.brandType" /><br>
            {{$t('箱数')}}：{{ row.num }}<br>
            {{$t('体积')}}：{{ row.volume }}m³<br>
            {{$t('重量')}}：{{ row.weight }}Kg
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          :label="$t('入库货物属性')">
          <template v-slot="{row}">
            <template v-if="row.warehouseInInfoVO">
              {{$t('品牌')}}：
              <!-- 23-03-27 根据需求方要求，按照详情页一样的规则显示 -->
              <template v-if="row.brandName">{{row.brandName}}</template>
              <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="row.feeType" />
              <!-- <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="row.feeType" /> --><br>
              {{$t('箱数')}}：{{ row.warehouseInInfoVO.cartonsNum }}<br>
              {{$t('体积')}}：{{ row.warehouseInInfoVO.volume }}m³<br>
              {{$t('重量')}}：{{ row.warehouseInInfoVO.weight }}Kg
            </template>
            <span v-else>{{$t('暂时没有入库信息')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          :formatter="(_, __, v) => parseTime(v)"
          :label="$t('最后操作时间')">
        </el-table-column>

        <el-table-column
          :label="$t('原价')">
          <template v-slot="{row}">
            <!-- 原价显示字段调整 https://zentao.test.jdshangmen.com/bug-view-2914.html -->
            <template v-if="!row.originalSeaFreight">{{$t('未报价')}}</template>
            <template v-else-if="row.charging ==1">
              {{$t('全包价')}}：{{ row.originalCostSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
            </template>
            <template v-else>
              {{$t('运费')}}：{{ row.originalCostSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
              <br>
              {{$t('清关费')}}：{{ row.originalCostClearanceFreight }} {{ currencyMap[row.clearanceFreightCurrency] }}/{{ unitMap[row.clearanceFreightVolume] }}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('成本价')">
          <template v-slot="{row}">
            <template v-if="!row.costSeaFreight">{{$t('未报价')}}</template>
            <template v-else-if="row.charging">
              {{$t('全包价')}}：{{ row.costSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
            </template>
            <template v-else>
              {{$t('运费')}}：{{ row.costSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
              <br>
              {{$t('清关费')}}：{{ row.costClearanceFreight }} {{ currencyMap[row.clearanceFreightCurrency] }}/{{ unitMap[row.clearanceFreightVolume] }}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('销售价')">
          <template v-slot="{row}">
            <template v-if="!row.oneSeaFreight">{{$t('未报价')}}</template>
            <template v-else-if="row.charging">
              {{$t('全包价')}}：{{ row.oneSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
            </template>
            <template v-else>
              {{$t('运费')}}：{{ row.oneSeaFreight }} {{ currencyMap[row.seaFreightCurrency] }}/{{ unitMap[row.seaFreightVolume] }}
              <br>
              {{$t('清关费')}}：{{ row.oneClearanceFreight }} {{ currencyMap[row.clearanceFreightCurrency] }}/{{ unitMap[row.clearanceFreightVolume] }}
            </template>
          </template>
        </el-table-column>

        <el-table-column
          prop="address"
          :label="$t('操作')">
          <template v-slot="{row}">
              <el-button v-if="row.originalSeaFreight" size="mini" type="text" v-hasPermi="['ecw:order:reduce']" @click="showDiscountItem=row">{{$t('优惠申请')}}</el-button>
              <el-button v-if="row.originalSeaFreight" size="mini" type="text" v-hasPermi="['ecw:order:commission']" @click="showCommissionItem=row">{{$t('佣金规则')}}</el-button>
              <el-button v-if="row.originalSeaFreight" size="mini" type="text" v-hasPermi="['ecw:order:discount']" @click="showAllowanceItem=row">{{$t('管理折扣')}}</el-button>
          </template>
        </el-table-column>

      </el-table>

      <div class="mt-50 flex-center">
        <!--
          1.海运整柜、海运拼柜显示重货优惠  1,2
          2.空运专线、海空联运显示泡货优惠  3,4
         -->
        <el-button v-hasPermi="['ecw:order:heavy']" type="primary" @click="showPreferentialType=4" v-if="order.transportId === 1 || order.transportId === 2">{{$t('申请重货优惠')}}</el-button>
        <el-button v-hasPermi="['ecw:order:bulky']" type="primary" @click="showPreferentialType=5" v-else>{{$t('申请泡货优惠')}}</el-button>
        <el-button type="primary" @click="$tab.closePage()">{{$t('关闭窗口')}}</el-button>
      </div>
    </el-card>

    <!-- 优惠申请 -->
    <discount v-if="!!showDiscountItem" :order="order" :orderItem="showDiscountItem" @close="showDiscountItem=null" @success="onDiscountSuccess" />
    <!-- 管理折扣 -->
    <discount v-if="!!showAllowanceItem" :order="order" :orderItem="showAllowanceItem" @close="showAllowanceItem=null" :applyType="2" @success="onDiscountSuccess" />
    <!-- 佣金规则 -->
    <commission v-if="!!showCommissionItem" :order="order" :orderItem="showCommissionItem" @close="showCommissionItem=null" @success="onCommissionSuccess" />
    <!-- 重泡货优惠 -->
    <preferential v-if="!!showPreferentialType" :applyType="showPreferentialType" :order="order" @close="showPreferentialType=null" @success="onPreferentialSuccess" />
  <!-- 批量优惠申请 -->
  <discounts v-if="!!showDiscountsIds" :order="order" :ids="ids"  @close="showDiscountsIds=null" @success="onDiscountsSuccess" />
  <!-- 批量管理折扣 -->
  <discounts v-if="!!showAllowanceIds" :order="order" :ids="ids" @close="showAllowanceIds=null" :applyType="32" @success="onDiscountsSuccess" />
  <!-- 佣金规则 -->
  </div>
</template>

<script>
import {DICT_TYPE, getDictDataLabel} from '@/utils/dict'
import {getUnitList} from "@/api/ecw/unit"
import {getCurrencyList} from "@/api/ecw/currency"
import {getProductAttrList} from "@/api/ecw/productAttr"
import { parseTime } from '@/utils/ruoyi'
import {getOrder} from "@/api/ecw/order"

import Discount from './Discount'
import Commission from './Commission'
import Preferential from './Preferential'
import Discounts from './Discounts'
export default {
  name: "OrderSpecial",
  components: {
    Discount, Commission, Preferential,Discounts
  },
  props: {
    orderId: [String, Number]
  },
  data() {
    return {
      parseTime,
      DICT_TYPE,
      getDictDataLabel,
      // 遮罩层
      loading: true,
      list: [],
      /* total:0,
      params:{
        page:1,
        rows:20,
        orderId:0,
        type:2
      }, */
      relationId:0,
      order: {
        number: '',
        orderItemVOList: []
      },
      unitList:[],
      currencyList:[],
      productAttrList:[],
      hasWarehouseInInfo: false,

      showDiscountItem: null, // 优惠申请
      showCommissionItem: null, // 佣金规则
      showAllowanceItem: null, // 管理折扣
      showPreferentialType: null, // 重泡货类型
      showDiscountsIds: null, // 批量优惠申请
      showAllowanceIds: null, // 批量管理折扣
      multipleSelection:null,
      ids:null
    };
  },
  created() {
    this.getOrder()
    getUnitList().then(res => this.unitList = res.data)
    getCurrencyList().then(res => this.currencyList = res.data)
    getProductAttrList().then(res => this.productAttrList = res.data)
  },
  methods: {
    getOrder(){
      this.loading = true
      getOrder(this.orderId).then(response => {
        this.loading = false
        this.order = response.data
        this.order.orderItemVOList.forEach(e => {
          if (e.warehouseInInfoVO){
            this.hasWarehouseInInfo = true
          }
        })
      })
    },
    toweight(){
      this.$router.push({
        path:"/order/specialWeight/"+this.params.orderId,
      })
    },
    tolight(){
      this.$router.push({
        path:"/order/specialLight/"+this.params.orderId,
      })
    },
    onDiscountSuccess(){
      this.showDiscountItem = null
      this.showAllowanceItem = null
      this.getOrder()
    },
    onDiscountsSuccess(){
      this.showDiscountsIds = null
      this.showAllowanceIds = null
      this.multipleSelection = null
      this.getOrder()
    },
    onCommissionSuccess(){
      this.showCommissionItem = null
      this.getOrder()
    },
    onPreferentialSuccess(){
      this.showPreferentialType = null
      this.getOrder()
    },
    // 表格多选
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.ids = selection.map(item => item.orderItemId)
    },
    moreApply(type){
      if(!this.ids||this.ids.length==0){
        this.$message.error(this.$t('请选择商品'))
        return
      }
      if(type==1){
        this.showDiscountsIds = true
      }else{
        this.showAllowanceIds = true
      }
    }
  },
  computed: {
    currencyMap(){
      let map = {}
      this.currencyList.forEach(item => {
        map[item.id] = this.$l(item, 'title')
      })
      return map
    },
    unitMap(){
      let map = {}
      this.unitList.forEach(item => {
        map[item.id] = this.$l(item, 'title')
      })
      return map
    }
  }

};
</script>
<style scoped>
.card-title{
  font-size: 18px;
  font-weight: bold;
}
.order-header{
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.order-header button{
  margin-left:20px;
}
</style>