Commossion.vue 9.88 KB
Newer Older
1 2
<template>
  <el-dialog visible :close-on-click-modal="false" :before-close="closeDialog" :title="$t('佣金规则申请')">
dragondean@qq.com's avatar
dragondean@qq.com committed
3
    <el-form ref="form" :model="form" label-width="80px" :rules="rules" :disabled="form.applyStatus == 1">
4
      <el-form-item :label="$t('商品类型')">
dragondean@qq.com's avatar
dragondean@qq.com committed
5
        <span>{{ getProductTypeNameById(form.productType) }}</span>
6 7 8 9 10 11 12 13
      </el-form-item>
      <el-form-item :label="$t('商品名称')">
        <span>{{ form.prodTitleZh }}</span>
      </el-form-item>
      <el-form-item :label="$t('英文名称')">
        <span>{{ form.prodTitleEn }}</span>
      </el-form-item>
      <el-form-item :label="$t('线路')">
dragondean@qq.com's avatar
dragondean@qq.com committed
14 15
        {{ `【${getDictDataLabel(DICT_TYPE.TRANSPORT_TYPE, form.transportId)}】${ getChannelNameById(form.channelId) }`}}
        {{$t("从【{departureName}】发往【{objectiveName}", {departureName: form.departureName, objectiveName: form.objectiveName})}}
16 17 18 19 20
      </el-form-item>
      
      <el-row v-if="!form.charging">
        <el-col :span="12">
          <el-form-item :label="$t('运费')">
dragondean@qq.com's avatar
dragondean@qq.com committed
21
            {{form.orgSeaFreight}} {{ currencyMap[form.seaFreightCurrency] }} / {{ unitMap[form.seaFreightVolume] }}
22 23 24 25
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('清关费')">
dragondean@qq.com's avatar
dragondean@qq.com committed
26
            {{form.clearanceFreight}} {{ currencyMap[form.clearanceFreightCurrency] }} / {{ unitMap[form.clearanceFreightVolume] }}
27 28 29 30
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item :label="$t('全包价')" v-if="form.charging">
dragondean@qq.com's avatar
dragondean@qq.com committed
31
        {{form.orgSeaFreight}} {{ currencyMap[form.seaFreightCurrency] }} / {{ unitMap[form.seaFreightVolume] }}
32 33
      </el-form-item>
      <el-form-item :label="$t('佣金类型')" prop="commissionType">
34
        <dict-selector :type="DICT_TYPE.COMMISSION_TYPE" v-model="form.commissionType" form-type="radio" formatter="number" />
35 36 37
      </el-form-item>

      <!-- 明佣或者明佣+暗佣才显示 -->
Marcus's avatar
Marcus committed
38
      <el-form-item :label="$t('明佣佣金')" v-if="form.commissionType == 1 || form.commissionType == 3">
39
        <el-input v-model.number="form.lightCommissionAmount" placeholder="" class="w-100"></el-input>
40
        {{ currencyMap[form.seaFreightCurrency] }} / {{ unitMap[form.seaFreightVolume] }}
41 42 43
      </el-form-item>

      <!-- 明佣+暗佣才显示 -->
Marcus's avatar
Marcus committed
44
      <el-form-item :label="$t('暗佣佣金')" v-if="form.commissionType == 3">
45
        <el-input v-model.number="form.shadeCommissionAmount" placeholder="" class="w-100"></el-input>
46
        {{ currencyMap[form.seaFreightCurrency] }} / {{ unitMap[form.seaFreightVolume] }}
47 48 49 50
      </el-form-item>

      <!-- 无佣金不显示 -->
      <div class="pl-50" v-if="form.commissionType != 0">
51
        <div v-if="form.commissionType != 2">{{$l(form, 'prodTitle')}}</div>
52 53

        <!-- 明佣+暗佣显示 -->
dragondean@qq.com's avatar
dragondean@qq.com committed
54
        <div v-if="form.commissionType == 3">
dragondean@qq.com's avatar
dragondean@qq.com committed
55
          {{$t('成本价')}}{{costPrice}} {{ currencyMap[form.seaFreightCurrency] }} / {{ unitMap[form.seaFreightVolume] }}
dragondean@qq.com's avatar
dragondean@qq.com committed
56
        </div>
57
        
58 59
        <!-- 暗佣显示 -->
        <div v-if="form.commissionType == 2">
dragondean@qq.com's avatar
dragondean@qq.com committed
60 61
          {{$l(form, 'prodTitle')}}
          <template v-if="darkCommission">
62
            {{$t('暗佣')}}{{darkCommission}} {{ currencyMap[form.seaFreightCurrency] }} / {{ unitMap[form.seaFreightVolume] }}
dragondean@qq.com's avatar
dragondean@qq.com committed
63
          </template>
Marcus's avatar
Marcus committed
64
          <el-link type="primary" @click.native="$router.push('/customer/customerCommission?customerId=' + offer.relationId)">{{ $t('去设置') }}</el-link>
65 66
        </div>

dragondean@qq.com's avatar
dragondean@qq.com committed
67
        <div  v-if="form.commissionType == 1 || form.commissionType == 3">{{$t('销售价')}}{{ salePrice }} {{ currencyMap[form.seaFreightCurrency] }} / {{ unitMap[form.seaFreightVolume] }}</div>
68
        <div v-if="form.commissionType == 3">{{$t('实际佣金返点')}}{{form.shadeCommissionAmount + form.lightCommissionAmount }} {{ currencyMap[form.seaFreightCurrency] }} / {{ unitMap[form.seaFreightVolume] }}</div>
69
      </div>
70
      <div class="page-title">{{$t('审批流程')}}</div>
dragondean@qq.com's avatar
dragondean@qq.com committed
71
      <work-flow xmlkey="sheet_sale" v-model="ccIdArr" />
72
    </el-form>
dragondean@qq.com's avatar
dragondean@qq.com committed
73
    
74

dragondean@qq.com's avatar
dragondean@qq.com committed
75
    <div v-if="form.applyStatus != 1">
Marcus's avatar
Marcus committed
76
      <el-button type="primary" @click="handleSubmit" :disabled="!submitable">{{ $t('提交') }}</el-button>
77 78 79 80 81
    </div>
    <div v-else>
      <el-button type="primary" @click="$router.push('/bpm/process-instance/detail?id=' + form.formId)">
        <dict-tag :type="DICT_TYPE.APPLY_STATUS" :value="form.applyStatus" />
      </el-button>
Marcus's avatar
Marcus committed
82 83
      <el-button type="primary" @click="cancelAudit">{{ $t('取消审核') }}</el-button>
      <el-button type="default" @click="closeDialog">{{ $t('返回') }}</el-button>
84 85 86 87 88 89 90 91 92 93 94
    </div>
  </el-dialog>
</template>

<script>
import {createOfferSpecial, getOfferSpecial, getOfferSpecialByApproveId} from "@/api/ecw/offer"
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'
dragondean@qq.com's avatar
dragondean@qq.com committed
95
import { getProductTypeList } from '@/api/ecw/productType'
96
import WorkFlow from '@/components/WorkFlow'
dragondean@qq.com's avatar
dragondean@qq.com committed
97
import {getDarkReturnCommission} from '@/api/ecw/customerCommission'
dragondean@qq.com's avatar
dragondean@qq.com committed
98
import {cancelProcessInstance} from '@/api/bpm/processInstance'
dragondean@qq.com's avatar
dragondean@qq.com committed
99
import Decimal from "decimal.js"
100
const TYPE = 3
101 102 103
export default {
  name: "Commossion",
  props: {
dragondean@qq.com's avatar
dragondean@qq.com committed
104 105 106
    offer: Object,
    offerProd: Object,
    /* 
107
    offerProdId: Number,
dragondean@qq.com's avatar
dragondean@qq.com committed
108
    customerId: Number */
109 110 111 112 113
  },
  components: {
    DictSelector, WorkFlow
  },
  created() {
dragondean@qq.com's avatar
dragondean@qq.com committed
114
    this.getOfferSpecial()
115 116 117 118

    getUnitList().then(res => this.unitList = res.data)
    getChannelList().then(res => this.channelList = res.data)
    getCurrencyList().then(res => this.currencyList = res.data)
dragondean@qq.com's avatar
dragondean@qq.com committed
119
    getProductTypeList().then(res => this.productTypeList = res.data)
120 121 122 123 124 125 126 127 128

  },
  data() {
    return {
      getDictDataLabel,
      DICT_TYPE,
      unitList:[],
      channelList:[],
      currencyList:[],
dragondean@qq.com's avatar
dragondean@qq.com committed
129
      productTypeList:[],
130 131
      ccIdArr: [],
      form: {
132
        type: TYPE
133 134
      },
      rules:{
Marcus's avatar
Marcus committed
135
        commissionType      : {required: true, message: this.$t('请选择佣金类型')},
dragondean@qq.com's avatar
dragondean@qq.com committed
136 137
      },
      darkCommission: null, // 暗佣佣金
138 139 140
    }
  },
  computed: {
141 142 143 144 145 146 147 148 149 150 151 152 153 154
    // 是否可以提交
    submitable(){
      let submitable = false;
      [
        ['orgLightCommissionAmount', 'lightCommissionAmount'],
        ['orgShadeCommissionAmount', 'shadeCommissionAmount'],
        ['commissionType', 'orgCommissionType']
      ].forEach(item => {
        if(this.form[item[0]] != this.form[item[1]]){
          submitable = true
        }
      })
      return submitable
    },
155 156 157 158
    // 根据渠道id显示渠道名
    getChannelNameById(){
      return channelId => {
        const s = this.channelList.find(item => item.channelId == channelId) ?. nameZh
Marcus's avatar
Marcus committed
159
        return s ? this.$t('') + s + this.$t('') : ''
160 161
      }
    },
162 163
    // 最初的运费
    initialPrice(){
164
      return Decimal(this.form.orgSeaFreight || 0)
165
        // .minus(this.form.orgShadeCommissionAmount || 0)
166
        .minus(this.form.orgLightCommissionAmount || 0)
167

dragondean@qq.com's avatar
dragondean@qq.com committed
168
    },
169 170 171 172 173
    // 新的成本价
    costPrice(){
      return this.initialPrice.minus(this.form.shadeCommissionAmount || 0)
    },
    // 新的销售价
dragondean@qq.com's avatar
dragondean@qq.com committed
174
    salePrice(){
175
      return this.initialPrice.plus(this.form.lightCommissionAmount || 0)
dragondean@qq.com's avatar
dragondean@qq.com committed
176
    },
177
    currencyMap(){
178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195
      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
    },
  },
  watch:{
    ccIdArr(){
      this.$set(this.form, 'ccIds', this.ccIdArr.join(','))
    },
dragondean@qq.com's avatar
dragondean@qq.com committed
196 197 198 199 200 201
    'form.commissionType'(val, old){
      if(typeof old !='undefined' && old != val){
        this.$set(this.form, 'lightCommissionAmount', 0)
        this.$set(this.form, 'shadeCommissionAmount', 0)
      }
      
dragondean@qq.com's avatar
dragondean@qq.com committed
202 203 204 205 206
      
      // 暗佣需要查询暗佣设置
      if(val == 2){
        this.getCommission()
      }
207 208 209 210 211 212 213 214 215
    }
  },
  methods: {
    handleSubmit(){
      this.$refs.form.validate().then(res => {
        // 接口运费不能为空,所以这里提交了运费字段
        createOfferSpecial(Object.assign({
          clearanceFreight: this.form.orgClearanceFreight,
          seaFreight: this.form.orgSeaFreight
216
        }, this.form, {type: TYPE})).then(res => {
217 218 219 220 221 222
          this.$message.success(this.$t('提交成功'))
          this.$emit('success')
        })
      })
    },
    getOfferSpecial(){
223
      getOfferSpecial(this.offerProd.offerProdId, {type: TYPE}).then(r => {
224 225 226
        this.form = r.data
      })
    },
dragondean@qq.com's avatar
dragondean@qq.com committed
227 228
    getProductTypeNameById(id){
      return this.$l(this.productTypeList.find(e => e.id === id), 'title')
229 230 231
    },
    closeDialog(){
      this.$emit('close')
dragondean@qq.com's avatar
dragondean@qq.com committed
232 233 234 235 236 237 238 239 240
    },
    getCommission(){
        getDarkReturnCommission({
          customerId: this.offer.relationId,
          customsType: this.offer.customsType,
          darkCurrency: this.form.orgSeaFreightCurrency,
          darkUnit: this.form.orgSeaFreightVolume,
          departureId: this.offer.departureId,
          objectiveId: this.offer.objectiveId,
dragondean@qq.com's avatar
dragondean@qq.com committed
241
          productAttr: this.offerProd.prodAttrIds.split(',').filter(item => item && item != ''),
dragondean@qq.com's avatar
dragondean@qq.com committed
242 243
          productType: this.offerProd.productType,
          transportId: this.offer.transportId,
244
          type: 2, 
dragondean@qq.com's avatar
dragondean@qq.com committed
245 246 247
        }).then(res => {
          this.darkCommission = res.data?.darkCommission
        })
dragondean@qq.com's avatar
dragondean@qq.com committed
248 249 250 251 252 253 254 255 256 257 258 259 260 261 262
    },
    cancelAudit(){
      this.$prompt(this.$t('请输入取消原因?'), this.$t("取消审批"), {
        type: 'warning',
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
        inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/, // 判断非空,且非空格
        inputErrorMessage: this.$t("取消原因不能为空"),
      }).then(({ value }) => {
        return cancelProcessInstance(this.form.formId, value);
      }).then(() => {
        this.$modal.msgSuccess(this.$t("取消成功"));
        this.closeDialog()
      })
    },
263 264 265
  }
}
</script>