discount.vue

<template>
  <div class="app-container">
    <el-row type="flex" justify="center">
     <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="16">
       <el-card class="box-card">
         <div slot="header" class="clearfix" v-if="!readonly">
           <span style="font-size: 18px;font-weight: bold">{{ isDiscount ? '折扣管理' : '优惠申请' }}</span>
         </div>
         <el-form v-if="!readonly" ref="form" :model="form" label-width="80px">
           <el-form-item label="商品类型">
             <span>{{ getProductAttrNameById(form.prodType) }}</span>
           </el-form-item>
           <el-form-item label="商品名称">
             <span>{{ form.prodTitleZh }}</span>
           </el-form-item>
           <el-form-item label="英文名称">
             <span>{{ form.prodTitleEn }}</span>
           </el-form-item>
           <el-form-item label="线路">
             {{ `【${getDictDataLabel(DICT_TYPE.TRANSPORT_TYPE, form.transportId)}】${ getChannelNameById(form.channelId) }从【${startTitleZh}】发往【${destTitleZh}】`}}
           </el-form-item>
           <el-form-item label="是否预付">
             {{ form.isPayAdvance === 0 ? '是' : '否' }}
           </el-form-item>
           <el-form-item label="旧运费" style="width: 400px">
             <el-input v-model="form.orgFreight" readonly>
               <div slot="prepend" style="width: 60px">{{ currentMap[form.orgFreightCurrency] }}</div>
               <div slot="append" style="width: 60px">{{ unitMap[form.orgFreightVolume] }}</div>
             </el-input>
           </el-form-item>
           <el-form-item label="旧清关费" style="width: 400px">
             <el-input v-model="form.orgClearanceFreight" readonly>
               <div slot="prepend" style="width: 60px">{{ currentMap[form.orgClearanceFreightCurrency] }}</div>
               <div slot="append" style="width: 60px">{{ unitMap[form.orgClearanceFreightVolume] }}</div>
             </el-input>
           </el-form-item>
           <el-form-item label="新运费" required style="width: 400px">
             <el-input v-model="form.freight" type="number" class="input-with-select">
               <div slot="prepend" style="width: 60px">{{ currentMap[form.freightCurrency] }}</div>
               <div slot="append" style="width: 60px">{{ unitMap[form.freightVolume] }}</div>
             </el-input>
           </el-form-item>
           <el-form-item label="新清关费" required style="width: 400px">
             <el-input v-model="form.clearanceFreight" type="number" class="input-with-select">
               <div slot="prepend" style="width: 60px">{{ currentMap[form.clearanceFreightCurrency] }}</div>
               <div slot="append" style="width: 60px">{{ unitMap[form.clearanceFreightVolume] }}</div>
             </el-input>
           </el-form-item>
         </el-form>

         <div >
           <h2>审批流程</h2>
           <work-flow xmlkey="free_apply" v-model="form.channelId"  />
           <!--        <div>选择的用户：{{selectedUsers}}</div>-->
         </div>

         <div v-if="!readonly">
           <el-button type="primary" @click="handleSubmit">提交</el-button>
         </div>

         <el-descriptions border v-if="readonly" :column="1">
           <el-descriptions-item label="商品类型">{{ form.productType }}</el-descriptions-item>
           <el-descriptions-item label="商品名称">{{ form.prodTitleZh }}</el-descriptions-item>
           <el-descriptions-item label="英文名称">{{ form.prodTitleEn }}</el-descriptions-item>
           <el-descriptions-item label="线路">
             {{ `【${getDictDataLabel(DICT_TYPE.TRANSPORT_TYPE, form.transportId)}】${ getChannelNameById(form.channelId) }从【${startTitleZh}】发往【${destTitleZh}】`}}
           </el-descriptions-item>
           <el-descriptions-item label="是否预付">{{ form.isPayAdvance === 0 ? '是' : '否' }}</el-descriptions-item>
           <el-descriptions-item label="旧运费">{{ form.orgFreight }} {{ currentMap[form.orgFreightCurrency] }}/{{ unitMap[form.orgFreightVolume] }}</el-descriptions-item>
           <el-descriptions-item label="旧清关费">{{ form.orgClearanceFreight }} {{ currentMap[form.orgClearanceFreightCurrency] }}/{{ unitMap[form.orgClearanceFreightVolume] }}</el-descriptions-item>
           <el-descriptions-item label="新运费">{{ form.freight }} {{ currentMap[form.freightCurrency] }}/{{ unitMap[form.freightVolume] }}</el-descriptions-item>
           <el-descriptions-item label="新清关费">{{ form.clearanceFreight }} {{ currentMap[form.clearanceFreightCurrency] }}/{{ unitMap[form.clearanceFreightVolume] }}</el-descriptions-item>
         </el-descriptions>
       </el-card>
     </el-col>
    </el-row>
  </div>
</template>

<script>
import {createOrderSpecial, getOrderSpecial, getOrderSpecialByApproveId} from "@/api/ecw/order"
import {DICT_TYPE, getDictDataLabel} from "@/utils/dict"
import DictSelector from "@/components/DictSelector"
import {getUnitList} from "@/api/ecw/unit"
import {getChannelList} from "@/api/ecw/channel"
import { getCurrencyList } from '@/api/ecw/currency'
import { getProductAttrList } from '@/api/ecw/productAttr'
import {openedRouterList} from "@/api/ecw/warehouse"
import WorkFlow from "@/components/WorkFlow"

export default {
  name: "specialDiscount",
  props: {
    orderItemId: String,
    id: Number,
    readonly: {
      type: Boolean,
      default: false
    }
  },
  components: {
    DictSelector,
    WorkFlow
  },
  created() {
    // 临时
    if(this.$route.query.orderId){
      this.form.orderId = this.$route.query.orderId - 0
      // this.getOrder()
    }

    // 查看详情，列表进来的
    if(this.orderItemId){
      this.form.orderItemId = this.orderItemId - 0
      this.getOrderSpecial()
    }

    // 从流程查看详情
    if(this.id)
      this.getOrderSpecialByApproveId()

    getUnitList().then(res => this.unitList = res.data)
    getChannelList().then(res => this.channelList = res.data)
    getCurrencyList().then(res => this.currencyList = res.data)
    getProductAttrList().then(res => this.productAttrList = res.data)

  },
  data() {
    return {
      getDictDataLabel,
      DICT_TYPE,
      unitList:[],
      channelList:[],
      currencyList:[],
      productAttrList:[],
      form: {
        "abnormalState": 0,
        "applyResult": "",
        "applyStatus": 0,
        "applyType": '1',
        "ccIds": "",
        "channelId": 0,
        "charging": 0,
        "clearanceFreight": 0,
        "clearanceFreightCurrency": 0,
        "clearanceFreightVolume": 0,
        "commissionCurrencyId": 0,
        "commissionType": 0,
        "commission_id": 0,
        "destAddressEn": "",
        "destAddressZh": "",
        "destTitleEn": "",
        "destTitleZh": "",
        "destVolume": "",
        "destWarehouseId": 0,
        "freight": 0,
        "freightCurrency": 0,
        "freightVolume": 0,
        "inWarehouseState": 0,
        "isPayAdvance": 0,
        "lightCommissionAmount": 0,
        "lineId": 0,
        "orderId": 0,
        "orderItemId": 0,
        "orderNo": "",
        "orgClearanceFreight": 0,
        "orgClearanceFreightCurrency": 0,
        "orgClearanceFreightVolume": 0,
        "orgFreight": 0,
        "orgFreightCurrency": 0,
        "orgFreightVolume": 0,
        "orgVWeight": "",
        "orgWVolume": "",
        "prodId": 0,
        "prodTitleEn": "",
        "prodTitleZh": "",
        "prodType": 0,
        "shadeCommissionAmount": 0,
        "shipmentState": 0,
        "startAddressEn": "",
        "startAddressZh": "",
        "startTitleEn": "",
        "startTitleZh": "",
        "startVolume": "",
        "startWarehouseId": 0,
        "status": 0,
        "toWarehouseState": 0,
        "transportId": 0,
        "vweight": "",
        "wvolume": ""
      },

      startTitleZh: '',
      destTitleZh: ''
    }
  },
  methods: {
    handleSubmit(){
      createOrderSpecial({
        "applyType": this.isDiscount ? '2' : '1',
        clearanceFreight: this.form.clearanceFreight,
        clearanceFreightCurrency: this.form.clearanceFreightCurrency,
        clearanceFreightVolume: this.form.clearanceFreightVolume,
        orderId: this.form.orderId,
        orderItemId: this.form.orderItemId,
        freight: this.form.freight,
        freightCurrency: this.form.freightCurrency,
        freightVolume: this.form.freightVolume,
      }).then(r => {
        this.$message.success(r.msg || '提交成功')
        this.$tab.closePage()
      })
    },
    getOrderSpecial(){
      getOrderSpecial(this.form.orderItemId).then(r => {
        this.form = r.data
        this.form.freight = ''
        this.form.clearanceFreight = ''
      })
    },
    getOrderSpecialByApproveId(){
      getOrderSpecialByApproveId(this.id).then(r => {
        this.form = r.data
      })
    },
    getProductAttrNameById(id){
      return this.productAttrList.find(e => e.id === id)?.attrName || ''
    }
  },
  computed: {
    // 折扣管理页面
    isDiscount(){
      return this.$route.query.discount
    },
    // 根据渠道id显示渠道名
    getChannelNameById(){
      return channelId => {
        const s = this.channelList.find(item => item.channelId == channelId) ?. nameZh
        return s ? '【' + s + '】' : ''
      }
    },
    currentMap(){
      let map = {}
      this.currencyList.forEach(item => {
        map[item.id] = item.titleZh
      })
      return map
    },
    unitMap(){
      let map = {}
      this.unitList.forEach(item => {
        map[item.id] = item.titleZh
      })
      return map
    }
  },

  watch: {
    'form.lineId'(val){
      if (val){
        openedRouterList({lineId: val}).then(r => {
          if(r.data && r.data.length > 0){
            this.startTitleZh = r.data[0].startTitleZh
            this.destTitleZh = r.data[0].destTitleZh
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>