specialNeeds.vue

<template>
<div>
  <el-dialog :before-close="()=>{$emit('update:show',false)
  }" center width="80%"  :visible.sync="show">
    <div class="content">
      <h1>{{orderNo}} 特需</h1>
      <el-form label-width="180px" label-position="left">
        <el-form-item :label="$t('特殊要求')">
          <el-checkbox-group v-model="advanceType" >
            <el-checkbox @click="change(item)" v-for="(item) in getDictDatas(DICT_TYPE.ORDER_SPECIAL_NEEDS)"  :label="item.value" >{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('特殊要求备注')"><el-input  type="textarea" style="width: 300px;" v-model="todoDetail"></el-input></el-form-item>
        <el-form-item v-for="(item,index) in  this.getDictDatas(this.DICT_TYPE.ORDER_SPECIAL_NEEDS)" v-if="advanceType.indexOf(item.value) > -1" :key="item.value" :label="item.label + '预计金额'">
          <el-input style="width: 300px;" v-model="specialNeedsList[index].transFee">
            <div style="width: 100px;" slot="append" >
              <el-select   v-model="specialNeedsList[index].transCurrency">
                <el-option v-for="item in JSON.parse(currency)" :key="item.id" :label="item.titleZh" :value="item.id" />
              </el-select>
            </div>
          </el-input>
           <div style="display: inline-block;margin-left: 20px;">
             <span style="margin-right: 10px;">{{ $t('付款类型') }}</span>
             <dict-selector  :placeholder="$t('请选择付款类型')"  v-model="specialNeedsList[index].payType"  :type="DICT_TYPE.PAYMENT_TYPE" ></dict-selector>
           </div>
        </el-form-item>
      </el-form>
    </div>
    <div  slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">{{ $t('提交') }}</el-button>
      <el-button @click="$emit('update:show',false)">{{ $t('取消') }}</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { getDictDatas, DICT_TYPE } from '@/utils/dict';
import {specialNeedCreate,getSpecialListByOrderId} from "@/api/ecw/order";

export default {
  name: "specialNeeds",
  props:{
    orderId:{
      type:[String,Number],
    },
    orderNo:[String,Number],
    show:Boolean,
    currency:String
  },
  computed:{

  },
  data(){
    return{
      getDictDatas,
      DICT_TYPE,
      form:{},
      advanceType:[],
      specialNeedsList:[],
      todoDetail:'',
      echoList:[],

    }
  },

  methods:{
    submit(){
      this.specialNeedsList.forEach(i => {
        i.todoDetail = this.todoDetail
      })
      let p = this.specialNeedsList.filter(i => this.advanceType.indexOf(i.advanceType) > -1)
      let p1 = []
      //获取新增的和修改的
      p.forEach(item => {
        if(this.echoList.find( i => item.id === i.id)){
        p1.push(item)
        }else {
          item.oper = 'add'
          p1.push(item)
        }
      })
      //获取删除的
      this.echoList.forEach(item => {
       if(!(p.find(i => i.id === item.id))){
         item.oper = 'del'
          p1.push(item)
       }
      })
     let p2 =  p1.filter(i => Number(i.transFee) > 0)
      if(p2.every(i => !!i.payType)){
        specialNeedCreate(p1).then(r=>{
          if(r.code === 0){
            this.$emit('update:show',false)
            this.$emit('determine')
            this.$message.success('提交成功');
          }
        })
      }else {
       let v = p2.map(i => i.advanceType);
       console.log(this.getDictDatas(this.DICT_TYPE.ORDER_SPECIAL_NEEDS),'this.getDictDatas(this.DICT_TYPE.ORDER_SPECIAL_NEEDS)')
        let v2 = this.getDictDatas(this.DICT_TYPE.ORDER_SPECIAL_NEEDS).filter(i => v.includes(i.value))
        this.$modal.notifyWarning(`请选择"${ v2.map(i => i.label).join('，')}"的付款类型。`)
      }
    },
  },
  watch:{
    show(val){
      if(val){
         this.getDictDatas(this.DICT_TYPE.ORDER_SPECIAL_NEEDS).forEach(r => {
             this.specialNeedsList.push({
               advanceType:r.value,
               orderId:this.orderId,
               transFee:'',//预计金额
               transCurrency:1,//运输费币种
               payType:''
               })
         })
        //特需回显
        getSpecialListByOrderId(this.orderId).then(r => {
          this.echoList = r.data;
          r.data.forEach(i => {
            this.advanceType.push(i.advanceType)
           let index = this.specialNeedsList.findIndex(item => i.advanceType == item.advanceType)
            this.specialNeedsList.splice(index,1, {  advanceType:i.advanceType,
              orderId:this.orderId,
              id:i.id,
              transFee:i.transFee,//预计金额
              transCurrency:i.transCurrency,//运输费币种
              payType:i.payType})
          })

        })
      }else {
        this.specialNeedsList = []
        this.advanceType = []
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>