放货弹窗上的bug

src/views/ecw/order/components/Release.vue

 <template>
   <el-dialog :title="title" visible :before-close="closeDialog" :close-on-click-modal="false" width="1000px">
-      <el-form v-if="agreement"  ref="form" :model="formData" :rules="rules" size="small" label-width="100px" >
+    <el-form v-if="agreement" ref="form" :model="formData" :rules="rules" size="small" label-width="100px">
       <el-row>
         <el-col :span="6">
           <el-form-item :label="$t('订单号')">
-              {{detail.orderNo}}
+            {{ detail.orderNo }}
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item :label="$t('总箱数')">
-              {{detail.sumNum}}
+            {{ detail.sumNum }}
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item :label="$t('体积')">
-              {{detail.sumVolume}}m³
+            {{ detail.sumVolume }}m³
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item :label="$t('重量')">
-              {{detail.sumWeight}}kg
+            {{ detail.sumWeight }}kg
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item :label="$t('总控货箱数')">
-              {{detail.sumNum}}
+            {{ detail.sumNum }}
           </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item :label="$t('剩余放货箱数')">
-              {{detail.sumNum - detail.releaseNum	}}
+            {{ detail.sumNum - detail.releaseNum }}
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="12">
           <el-form-item :label="$t('到仓日期/卸柜日期')" label-width="200px">
-              {{detail.unloadTime}}
+            {{ detail.unloadTime }}
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item :label="$t('放货锁定收货人到期')" label-width="200px">
-              {{detail.lockConsigneeTime || '-'}}
+            {{ detail.lockConsigneeTime || '-' }}
           </el-form-item>
         </el-col>
       </el-row>
-        <div class="title">{{$t('请填写放货信息')}}</div>
+      <div class="title">{{ $t('请填写放货信息') }}</div>
       <div class="flex">
         <el-form-item :label="$t('收货人')" prop="consigneeName">
-            <el-input v-model="formData.consigneeName" :placeholder="$t('请输入收货人')" clearable class="w-150" ></el-input>
+          <el-input v-model="formData.consigneeName" :placeholder="$t('请输入收货人')" clearable
+                    class="w-150"></el-input>
         </el-form-item>
         <el-form-item :label="$t('收货人电话')" prop="consigneePhone">
           <!-- <el-input v-model="formData.field109" :placeholder="$t('区号')" clearable class="w-150"></el-input> -->
-            <area-code-selector v-model="formData.consigneeCountryCode" class="w-150" />
-            <el-input v-model="formData.consigneePhone" :placeholder="$t('请输入收货人电话')" clearable class="w-150 ml-10"></el-input>
+          <area-code-selector v-model="formData.consigneeCountryCode" class="w-150"/>
+          <el-input v-model="formData.consigneePhone" :placeholder="$t('请输入收货人电话')" clearable
+                    class="w-150 ml-10"></el-input>
         </el-form-item>
         <el-form-item :label="$t('收货人邮箱')" prop="consigneeEmail">
-            <el-input v-model="formData.consigneeEmail" :placeholder="$t('请输入收货人邮箱')" clearable class="w-150" ></el-input>
+          <el-input v-model="formData.consigneeEmail" :placeholder="$t('请输入收货人邮箱')" clearable
+                    class="w-150"></el-input>
         </el-form-item>
       </div>
       <el-table :data="[formData]" border class="release-table">
         <el-table-column :label="$t('控货箱数')">
-              {{detail.sumNum - detail.releaseNum	}}
+          {{ detail.sumNum - detail.releaseNum }}
         </el-table-column>
         <el-table-column :label="$t('放货箱数')">
           <template slot-scope="{row}">
@@ -87,27 +90,28 @@
         </el-table-column>
       </el-table>
       <el-form-item :label="$t('控货手机号')" prop="field117" style="margin-top:20px">
-          <el-input :value="'+' + detail.dialCode + detail.phone" readonly :placeholder="$t('请输入控货手机号')" >
+        <el-input :value="'+' + detail.dialCode + detail.phone" readonly :placeholder="$t('请输入控货手机号')">
         </el-input>
       </el-form-item>
       <el-form-item :label="$t('手机验证码')" prop="code">
-          <el-input v-model="formData.code" :placeholder="$t('请输入手机验证码')" clearable class="w-150 mr-10"></el-input>
+        <el-input v-model="formData.code" :placeholder="$t('请输入手机验证码')" clearable
+                  class="w-150 mr-10"></el-input>
         <!-- <el-button type="success">{{ $t('获取验证码') }}</el-button> -->
-          <send-sms-code :order-id="detail.orderId" scene="5" />
+        <send-sms-code :order-id="detail.orderId" scene="5"/>
       </el-form-item>
       <el-form-item label="" style="margin-top:20px">
-          <el-button type="success" @click="submit">{{$t('确认提货')}}</el-button>
-          <el-button type="default" @click="closeDialog">{{$t('关闭')}}</el-button>
+        <el-button type="success" @click="submit">{{ $t('确认提货') }}</el-button>
+        <el-button type="default" @click="closeDialog">{{ $t('关闭') }}</el-button>
       </el-form-item>
     </el-form>
 
     <div v-else>
       <!-- <release-agreement /> -->
-          <need-know ref="needKnow" keyname="control" />
+      <need-know ref="needKnow" keyname="control"/>
       <div style="margin-top:30px">
-              <el-button type="primary" @click="agreement=true">{{$t('我同意')}}</el-button>
+        <el-button type="primary" @click="agreement=true">{{ $t('我同意') }}</el-button>
         <!-- <el-button type="primary" @click="$refs.needKnow.download()">{{ $t('保存协议') }}</el-button> -->
-              <el-button @click="closeDialog">{{$t('关闭')}}</el-button>
+        <el-button @click="closeDialog">{{ $t('关闭') }}</el-button>
       </div>
     </div>
   </el-dialog>
@@ -119,16 +123,17 @@ import AreaCodeSelector from '@/components/AreaCodeSelector'
 import SendSmsCode from '@/views/ecw/order/components/SendSmsCode'
 import NeedKnow from '@/components/NeedKnow'
 import Decimal from 'decimal.js'
+
 export default {
-    props:{
+  props: {
     orderId: [String, Number]
   },
   components: {AreaCodeSelector, SendSmsCode, NeedKnow},
-    data(){
+  data() {
     return {
       show: false,
       detail: null,
-            formData:{
+      formData: {
         "pickNum": 0,
         "pickQuantity": 0,
         "pickVolume": 0,
@@ -138,14 +143,14 @@ export default {
       agreement: false, // 是否同意协议
     }
   },
-    watch:{
-      'formData.pickNum'(pickNum){
+  watch: {
+    'formData.pickNum'(pickNum) {
       this.$set(this.formData, 'pickVolume', Decimal(this.detail.sumVolume).mul(pickNum).div(this.detail.sumNum).toFixed(2))
       this.$set(this.formData, 'pickWeight', Decimal(this.detail.sumWeight).mul(pickNum).div(this.detail.sumNum).toFixed(2))
     }
   },
-    computed:{
-        rules(){
+  computed: {
+    rules() {
       return {
         consigneeName: {required: true, message: this.$t('请填写收货人')},
         code: {required: true, message: this.$t('请填写验证码')},
@@ -157,35 +162,35 @@ export default {
         }
       }
     },
-        title(){
+    title() {
       let t = this.$t('放货')
-            if(this.detail){
+      if (this.detail) {
         t += '-' + this.detail.orderNo
       }
       return t
     }
   },
-    created(){
+  created() {
     this.show = true
     this.loadData()
   },
-    methods:{
-        loadData(){
+  methods: {
+    loadData() {
       getReleaseInfo(this.orderId).then(res => {
         this.detail = res.data
         this.$set(this.formData, 'consigneeName', res.data.consigneeName)
-              this.$set(this.formData, 'consigneeCountryCode', '+' + res.data.consigneeCountryCode)
+        this.$set(this.formData, 'consigneeCountryCode', res.data.consigneeCountryCode ? ('+' + res.data.consigneeCountryCode) : null)
         this.$set(this.formData, 'consigneePhone', res.data.consigneePhone)
         this.$set(this.formData, 'consigneeEmail', res.data.consigneeEmail)
       })
     },
-        closeDialog(){
+    closeDialog() {
       this.show = false
       this.$emit('close')
     },
-        submit(){
+    submit() {
       this.$refs.form.validate(valid => {
-            if(!valid){
+        if (!valid) {
           return false
         }
         createPick(Object.assign({orderId: this.orderId}, this.formData)).then(res => {
@@ -201,20 +206,22 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.title{
-  font-size:16px;
-  margin:20px 0;
-  display:flex;
-  align-items:center;
-  &:before{
+.title {
+  font-size: 16px;
+  margin: 20px 0;
+  display: flex;
+  align-items: center;
+
+  &:before {
     content: '';
-    width:5px;
+    width: 5px;
     height: 15px;
-    background:#666;
-    margin-right:10px;
+    background: #666;
+    margin-right: 10px;
   }
 }
-::v-deep .release-table .el-form-item__error{
+
+::v-deep .release-table .el-form-item__error {
   position: static;
 }
 </style>