完善创建订单页面重构

src/views/ecw/order/edit.vue

@@ -17,7 +17,7 @@
           <template #header>
             <div slot="header" class="card-title">发货人</div>
           </template>
-          <el-form-item :label="$t('发货人中文名称')" prop="consignorContactsId" >
+          <el-form-item :label="$t('名称')" prop="consignorContactsId" >
             <!-- <customer-contact-selector v-model="form.consignorContactsId" @change="consignorContact = $event" type="1" /> -->
             <div class="contact">
               <el-input v-model="form.consignorName" placeholder="" :disabled2="inWarehouse"/>
@@ -25,37 +25,44 @@
               <img v-if="!updateChannel" src="@/assets/svg/contact_create.svg" class="phonebook" @click="quickCreateType='0'" />
             </div>
           </el-form-item>
-          <!-- v1.7新增 -->
-          <el-form-item :label="$t('发货人英文名称')" prop="consignorNameEn" >
+          <el-form-item :label="$t('电话')" prop="consignorPhone">
+            <area-code-selector v-model="form.consignorCountryCode" class="w-200 mr-10" disabled />
+            <el-input v-model="form.consignorPhone" class="w-200" disabled />
+          </el-form-item>
+
+          <el-button circle icon="el-icon-circle-plus" v-if="!showFullConsignor" @click="showFullConsignor=true"></el-button>
+          <el-button circle icon="el-icon-remove" v-else @click="showFullConsignor=false"></el-button>
+
+          <div v-if="showFullConsignor">
+            <el-form-item :label="$t('英文名称')" prop="consignorNameEn" >
               <!-- <customer-contact-selector v-model="form.consignorContactsId" @change="consignorContact = $event" type="1" /> -->
               <div class="contact">
                 <el-input v-model="form.consignorNameEn" placeholder="" :disabled2="inWarehouse"/>
               </div>
             </el-form-item>
-          <el-form-item :label="$t('发货人电话')" prop="consignorPhone">
-            <area-code-selector v-model="form.consignorCountryCode" class="w-200 mr-10" disabled />
-            <el-input v-model="form.consignorPhone" class="w-200" disabled />
-          </el-form-item>
-          <el-form-item :label="$t('发货人公司中文名称')" prop="consignorPhone">
+            <el-form-item :label="$t('公司中文名称')" prop="consignorPhone">
               <el-input v-model="form.consignorCompany" :disabled2="inWarehouse" />
             </el-form-item>
             <!-- v1.7新增 -->
-          <el-form-item :label="$t('发货人公司英文名称')" prop="consignorPhone">
+            <el-form-item :label="$t('公司英文名称')" prop="consignorPhone">
               <el-input v-model="form.consignorCompanyEn" :disabled2="inWarehouse" />
             </el-form-item>
             <el-form-item label="Email" prop="consignorPhone">
               <el-input v-model="form.consignorEmail" :disabled2="inWarehouse" />
             </el-form-item>
+          </div>
         </el-card>
         <el-card class="form-section mt-10">
           <template #header>
-            <div slot="header" class="card-title">收货人</div>
-            <el-radio-group v-if="noConsignee && form.isCargoControl" v-model="hasConsignee">
+            <div class="flex items-center">
+              <div slot="header" class="card-title mr-20">收货人</div>
+              <el-radio-group v-if="noConsignee" v-model="hasConsignee">
                 <el-radio :label="true">{{$t('有')}}</el-radio>
                 <el-radio :label="false">{{$t('无')}}</el-radio>
               </el-radio-group>
+            </div>
           </template>
-          <el-form-item :label="$t('收货人中文名称')" prop="consigneeContactsId">
+          <el-form-item :label="$t('名称')" prop="consigneeContactsId">
             <!-- <customer-contact-selector v-model="form.consignorContactsId" @change="consignorContact = $event" type="1" /> -->
             <div class="contact">
               <el-input v-model="form.consigneeName" placeholder="" :disabled="!hasConsignee"/>
@@ -64,26 +71,33 @@
             </div>
           </el-form-item>
           <!-- v1.7新增 -->
-          <el-form-item :label="$t('收货人英文名称')" prop="consigneeNameEn">
+
+          <el-form-item :label="$t('电话')" prop="consigneePhone">
+            <area-code-selector v-model="form.consigneeCountryCode" class="w-200 mr-10" disabled/>
+            <el-input v-model="form.consigneePhone" class="w-200" disabled/>
+          </el-form-item>
+
+          <el-button circle icon="el-icon-circle-plus" v-if="!showFullConsignee" @click="showFullConsignee=true"></el-button>
+          <el-button circle icon="el-icon-remove" v-else @click="showFullConsignee=false"></el-button>
+
+          <div v-if="showFullConsignee">
+            <el-form-item :label="$t('英文名称')" prop="consigneeNameEn">
               <!-- <customer-contact-selector v-model="form.consignorContactsId" @change="consignorContact = $event" type="1" /> -->
               <div class="contact">
                 <el-input v-model="form.consigneeNameEn" placeholder="" :disabled="!hasConsignee"/>
               </div>
             </el-form-item>
-          <el-form-item :label="$t('收货人电话')" prop="consigneePhone">
-            <area-code-selector v-model="form.consigneeCountryCode" class="w-200 mr-10" disabled/>
-            <el-input v-model="form.consigneePhone" class="w-200" disabled/>
-          </el-form-item>
-          <el-form-item :label="$t('收货人公司中文名称')" prop="consigneePhone">
+            <el-form-item :label="$t('公司中文名称')" prop="consigneePhone">
               <el-input v-model="form.consigneeCompany" :disabled="!hasConsignee" />
             </el-form-item>
             <!-- v1.7新增 -->
-          <el-form-item :label="$t('收货人公司英文名称')" prop="consigneePhone">
+            <el-form-item :label="$t('公司英文名称')" prop="consigneePhone">
               <el-input v-model="form.consigneeCompanyEn" :disabled="!hasConsignee" />
             </el-form-item>
             <el-form-item label="Email" prop="consigneePhone">
               <el-input v-model="form.consigneeEmail" :disabled="!hasConsignee"/>
             </el-form-item>
+          </div>
         </el-card>
         <el-card class="mt-10">
             <div class="form-section">
@@ -387,10 +401,12 @@
                       <i class="el-icon-question"></i>
                     </el-tooltip>
                   </template>
+                  <!--无收货人的情况下必须控货且不能更改-->
                   <dict-selector :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
                        v-model="form.isCargoControl"
                        formatter="bool"
                        form-type="radio"
+                       :disabled="!hasConsignee"
                        :filter="(item) => {
                           return selectedRouter && selectedRouter.controlStatus === 1 && item.value === 'true' ? false : true
                        }"
@@ -750,7 +766,11 @@ export default {
       // 发货人是否允许控货无收货人
       noConsignee: false,
       // 是否有收货人
-      hasConsignee: true
+      hasConsignee: true,
+      // 是否展示全部发货人信息
+      showFullConsignor: false,
+      // 是否展示全部收货人信息
+      showFullConsignee: false,
     };
   },
   computed:{
@@ -910,6 +930,12 @@ export default {
     }
   },
   watch:{
+    // 如果无收货人则必须控货
+    hasConsignee(val){
+      if(!val){
+        this.$set(this.form, 'isCargoControl', true)
+      }
+    },
     ccIdArr(arr){
         this.$set(this.form, 'ccIds', arr.join(","))
     },
@@ -1317,6 +1343,12 @@ export default {
         this.$set(this.form, this.contactChooseType + 'NameEn', contact.contactsNameEn||'')
         this.$set(this.form, this.contactChooseType + 'Phone', contact.phoneNew)
         this.noConsignee = contact.noConsignee
+
+        // 如果发货人不允许无收货人，则重置为有收货人
+        if(!this.noConsignee && !this.hasConsignee){
+          this.$set(this, 'hasConsignee', true)
+        }
+
         this.contactChooseType = null
         this.quickCreateType = null
         if(this.form.lineId)  this.getOfferData()