specialNeeds.vue 4.21 KB
<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="特殊要求">
          <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="特殊要求备注"><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" >
              <dict-selector   v-model="specialNeedsList[index].transCurrency"  :type="DICT_TYPE.COMMISSION_CURRENCY_TYPE" ></dict-selector>
            </div>
          </el-input>
           <div style="display: inline-block;margin-left: 20px;">
             <span style="margin-right: 10px;">付款类型</span>
             <dict-selector  placeholder="请选择付款类型"  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">提交</el-button>
      <el-button @click="$emit('update:show',false)">取消</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,
  },
  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)
       console.log(p,'p')
      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)
       }
      })
      specialNeedCreate(p1).then(r=>{
        if(r.code === 0){
          this.$emit('update:show',false)
          this.$emit('determine')
          this.$message.success('提交成功');
        }
      })
    },
  },
  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:'',//运输费币种
               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>