订单详情页面优化

src/views/ecw/order/detail.vue

@@ -7,40 +7,39 @@
         <template v-else-if="order.containerNumber"> - {{order.containerNumber}}</template>
       </div>
       <el-row :gutter="24">
-        <el-col :span="10" v-if="order.consignorVO">
-          <el-descriptions class="margin-top" border :title="$t('发货人')" :column="2" :labelStyle="{width:'150px'}">
-            <el-descriptions-item :label="$t('发货人中文名称')">{{order.consignorVO.name}}</el-descriptions-item>
+        <el-col :span="12" v-if="order.consignorVO" style="position: relative;">
+           <span style="color:#409EFF;position: absolute;left:160px;top:0;font-size:16px" @click="consigneeChange">{{consigneeText}}</span>
+          <el-descriptions class="margin-top" border :title="$t('发货人')" :column="3" :labelStyle="{width:'110px'}" :contentStyle="{width:'150px'}">
+            <el-descriptions-item :label="$t('中文名称')">{{order.consignorVO.name}}</el-descriptions-item>
              <!-- v1.7新增 -->
-             <el-descriptions-item :label="$t('发货人英文名称')">{{order.consignorVO.nameEn}}</el-descriptions-item>
-            <el-descriptions-item :label="$t('发货人电话')">
+             <el-descriptions-item :label="$t('英文名称')">{{order.consignorVO.nameEn}}</el-descriptions-item>
+            <el-descriptions-item :label="$t('电话')">
               +{{order.consignorVO.countryCode}} {{order.consignorVO.phone}}
             </el-descriptions-item>
-            <el-descriptions-item :label="$t('发货人邮箱')">{{order.consignorVO.email}}</el-descriptions-item>
-            <el-descriptions-item :label="$t('发货人公司中文名称')">
-              {{order.consignorVO.company}}
-            </el-descriptions-item>
-             <!-- v1.7新增 -->
-            <el-descriptions-item :label="$t('发货人公司英文名称')">
-              {{order.consignorVO.companyEn}}
+            <el-descriptions-item :label="$t('付款人')">
+              <el-link v-if="order.drawee == 3" @click.native="showDarweeDialog=true" type="primary">{{ $t('自定义') }}</el-link>
+              <dict-tag v-else :type="DICT_TYPE.DRAWEE" :value="order.drawee"></dict-tag>
             </el-descriptions-item>
           </el-descriptions>
+          <el-descriptions border :class="showMore?'showInfo':'hiddenInfo'" :column="3" :labelStyle="{width:'110px'}" :contentStyle="{width:'150px'}">
+              <el-descriptions-item :label="$t('邮箱')">{{order.consignorVO.email}}</el-descriptions-item>
+              <el-descriptions-item :label="$t('公司中文名称')">
+                {{order.consignorVO.company}}
+              </el-descriptions-item>
+               <!-- v1.7新增 -->
+              <el-descriptions-item :label="$t('公司英文名称')">
+                {{order.consignorVO.companyEn}}
+              </el-descriptions-item>
+            </el-descriptions>
         </el-col>
-        <el-col :span="14" v-if="order.consigneeVO">
-          <el-descriptions class="margin-top" border :title="$t('收货人')" :column="3" :labelStyle="{width:'150px'}">
-            <el-descriptions-item :label="$t('收货人中文名称')">{{order.consigneeVO.name}}</el-descriptions-item>
+        <el-col :span="12" v-if="order.consigneeVO">
+          <el-descriptions class="margin-top" border :title="$t('收货人')" :column="3" :labelStyle="{width:'110px'}" :contentStyle="{width:'150px'}">
+            <el-descriptions-item :label="$t('中文名称')">{{order.consigneeVO.name}}</el-descriptions-item>
              <!-- v1.7新增 -->
-            <el-descriptions-item :label="$t('收货人英文名称')">{{order.consigneeVO.nameEn}}</el-descriptions-item>
-            <el-descriptions-item :label="$t('收货人电话')">
+            <el-descriptions-item :label="$t('英文名称')">{{order.consigneeVO.nameEn}}</el-descriptions-item>
+            <el-descriptions-item :label="$t('电话')">
               +{{order.consigneeVO.countryCode}} {{order.consigneeVO.phone}}
             </el-descriptions-item>
-            <el-descriptions-item :label="$t('收货人邮箱')">{{order.consigneeVO.email}}</el-descriptions-item>
-            <el-descriptions-item :label="$t('收货人公司中文名称')">
-              {{order.consigneeVO.company}}
-            </el-descriptions-item>
-             <!-- v1.7新增 -->
-            <el-descriptions-item :label="$t('收货人公司英文名称')">
-              {{order.consigneeVO.companyEn}}
-            </el-descriptions-item>
             <el-descriptions-item :label="$t('收货方式')">
               <dict-tag :type="DICT_TYPE.ECW_HARVEST_METHOD" :value="order.consigneeVO.harvestMethod" />
             </el-descriptions-item>
@@ -51,15 +50,18 @@
               {{order.consigneeVO.address}}
             </el-descriptions-item>
           </el-descriptions>
+          <el-descriptions border :class="showMore?'showInfo':'hiddenInfo'" :column="3" :labelStyle="{width:'110px'}" :contentStyle="{width:'150px'}">
+             <el-descriptions-item :label="$t('邮箱')">{{order.consigneeVO.email}}</el-descriptions-item>
+             <el-descriptions-item :label="$t('公司中文名称')">
+               {{order.consigneeVO.company}}
+             </el-descriptions-item>
+              <!-- v1.7新增 -->
+             <el-descriptions-item :label="$t('公司英文名称')">
+               {{order.consigneeVO.companyEn}}
+             </el-descriptions-item>
+          </el-descriptions>
         </el-col>
       </el-row>
-      <el-descriptions class="margin-top" border :column="1" :labelStyle="{width:'150px'}">
-        <el-descriptions-item :label="$t('付款人')">
-
-          <el-link v-if="order.drawee == 3" @click.native="showDarweeDialog=true" type="primary">{{ $t('自定义') }}</el-link>
-          <dict-tag v-else :type="DICT_TYPE.DRAWEE" :value="order.drawee"></dict-tag>
-        </el-descriptions-item>
-      </el-descriptions>
     </el-card>
     <el-card class="card">
       <el-descriptions border :title="$t('物流信息')" :column="4">
@@ -463,7 +465,9 @@ export default {
       logsLoading: false, // 日志加载中
       logs: [], // 操作日志
       activeNames: [],//显示隐藏订单基本信息
-      showText:this.$t('显示更多')
+      showText:this.$t('显示更多'),
+      showMore:false,
+      consigneeText:this.$t('展示'),
     }
   },
   computed:{
@@ -545,6 +549,11 @@ export default {
     handleChange(val){
       this.showText = val.length>0? this.$t('隐藏') : this.$t('显示更多')
     },
+    //订单信息显示更多
+    consigneeChange(){
+      this.showMore = !this.showMore;
+      this.consigneeText = this.showMore? this.$t('隐藏') : this.$t('展示')
+    },
     // 显示费用详情
     showFeeDetail(row, type){
       this.showFeeDetailDialog = true
@@ -713,7 +722,17 @@ export default {
 .el-icon-arrow-down {
   font-size: 12px;
 }
+.hiddenInfo{
+  display:none;
+}
+.showInfo{
+  display:block;
+}
 /deep/ .el-collapse-item__header{
   color:#409EFF !important;
 }
+/deep/ .el-collapse-item__wrap{
+  margin-left:-12px;
+  border:none !important;
+}
 </style>