<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-number style="width: 300px;" v-model.number="specialNeedsList[index].transFee" type="number" :min="0" step-strictly></el-input-number> <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 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; if(r.data.length){ this.todoDetail = r.data[0].todoDetail } 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>