feature: 订单详情弹窗提取公共组件

src/components/order-detail-modal/index.vue

+<template>
+  <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
+    <view class="cu-dialog">
+      <view class="cu-bar bg-white justify-end bottom-line">
+        <view class="content title-bolder">{{$t('订单详情')}}</view>
+      </view>
+      <scroll-view scroll-y="true" style="height: 300px;">
+        <view class="cu-form-group margin-top">
+          <view class="title">{{$t('订单号')}}</view>
+          <view class="content">
+            {{ orderDetail.orderNo }}
+            <view style="color:blue;fontWeight:bold;">
+              {{ orderDetail.isExternalWarehouse === 1 ? ('('+$t('外部仓')+')') : ''}}
+            </view>
+            <view style="color:sandybrown;fontWeight:bold;">
+              {{ orderDetail.adjustToDestWarehouseId > 0 ? ('('+$t('调仓')+')') : ''}}
+            </view>
+          </view>
+        </view>
+        <view class="cu-form-group">
+          <view class="title">{{$t('唛头')}}</view>
+          <view class="content">{{ orderDetail.marks }}</view>
+        </view>
+        <view class="cu-form-group">
+          <view class="title">{{$t('报关方式')}}</view>
+          <view class="content"><dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="orderDetail.customsType" /></view>
+        </view>
+        <view class="cu-form-group">
+          <view class="title">{{$t('入仓时间')}}</view>
+          <view class="content">{{ orderDetail.rucangTime | formatDate }}</view>
+        </view>
+        <view class="cu-form-group">
+          <view class="title">{{$t('路线')}}</view>
+          <view class="content" v-if="orderDetail.logisticsInfoDto">
+            {{ $lang.locale==='zh-Hans'? `${orderDetail.logisticsInfoDto.startTitleZh} - ${orderDetail.logisticsInfoDto.destTitleZh}`: `${orderDetail.logisticsInfoDto.startTitleEn} - ${orderDetail.logisticsInfoDto.destTitleEn}`  }}</view>
+        </view>
+
+        <view>
+          <view class="item-content" v-for="(v, goodsKey) in orderDetail.orderItemVOList" :key="'goods-' + goodsKey">
+            <view>
+              <view>{{$t('品名')}}：{{ $lang.locale==='zh-Hans'?v.prodTitleZh:v.prodTitleEn }}</view>
+              <view>{{$t('备案')}}：
+                <template v-if="v.brandName">{{v.brandName}}</template>
+                <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="v.feeType" />
+              </view>
+            </view>
+            <view>
+              <view>{{$t('箱数')}}：{{ v.warehouseInInfoVO && v.warehouseInInfoVO.cartonsNum }}</view>
+              <view>{{$t('体积')}}：{{ v.warehouseInInfoVO && v.warehouseInInfoVO.volume | toFixed }} CBM</view>
+            </view>
+            <view>
+              <view>{{$t('重量')}}：{{ v.warehouseInInfoVO && v.warehouseInInfoVO.weight | toFixed }} kg</view>
+              <view>
+                {{$t('储位')}}：
+                <template v-if="v.warehouseInInfoVO && v.warehouseInInfoVO.orderLocationMergeVOSet">
+                  {{v.warehouseInInfoVO.orderLocationMergeVOSet.map(location => `${location.areaName}${location.locationName || ''}`).join(',')}}
+                </template>
+              </view>
+            </view>
+            <view>
+            <!-- <view v-if="v.attrNameList">{{$t('特性')}}：{{ v.attrNameList.join(',') }}</view> -->
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+
+      <view class="cu-bar bg-white justify-end top-line">
+        <view class="action"><button class="cu-btn bg-grey" @tap="showOrderDetail(false)">{{$t('取消')}}</button></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+export default {
+	name: 'orderDetailModal',
+	props: {
+		orderDetail: {
+			type: Object,
+			default: ''
+		},
+		orderDetailModal:{
+			type: Boolean,
+			default: true
+		}
+	},
+	methods: {
+		showOrderDetail(index) {
+			this.$emit('close', false);
+		},
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.cu-dialog {
+  background-color: #fff;
+
+  .content {
+    &.title-bolder {
+      color: #333333;
+      font-weight: bolder;
+    }
+  }
+
+  .item-content {
+    text-align: left;
+    padding: 10px 20px 0px 20px;
+
+    &.noPadding {
+      padding: 0;
+    }
+
+    > view {
+      display: flex;
+      padding: 4px 0;
+
+      > view {
+        flex: 1;
+        word-break: break-all;
+        padding-left: 4px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/i18n/languages/en_US.json

@@ -128,6 +128,7 @@
     "订单详情": "Order Details",
     "唛头": "Marks",
     "入仓时间": "deliver time",
+    "路线": "Route",
     "储位": "Storage site",
     "未装": "not be loaded",
     "密码": "password",
@@ -340,6 +341,7 @@
     "继续": "yes",
     "英文品名": "English name",
     "商品特性": "Product Features",
+    "特性": "Features",
     "修改": "modify",
     "删除": "delete",
     "新商品入仓": "New produce",

src/i18n/languages/zh_CN.json

@@ -124,6 +124,7 @@
   "订单详情":"订单详情",
   "唛头":"唛头",
   "入仓时间":"入仓时间",
+  "路线":"路线",
   "储位":"储位",
   "未装":"未装",
   "密码":"密码",
@@ -340,6 +341,7 @@
   "继续":"继续",
   "英文品名":"英文品名",
   "商品特性":"商品特性",
+  "特性":"特性",
   "修改":"修改",
   "删除":"删除",
   "新商品入仓":"新商品入仓",

src/pages/airWarehouseOut/airStartcheckOut.vue

@@ -120,7 +120,8 @@
     </scroll-view>
 
     <!-- 订单详情弹窗 -->
-    <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
+    <OrderDetailModal :orderDetailModal="orderDetailModal" :orderDetail="orderDetail" @close="showOrderDetail"></OrderDetailModal>
+    <!-- <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
       <view class="cu-dialog">
         <view class="cu-bar bg-white justify-end bottom-line">
           <view class="content title-bolder">{{$t('订单详情')}}</view>
@@ -181,7 +182,7 @@
           <view class="action"><button class="cu-btn bg-grey" @tap="showOrderDetail(false)">{{$t('取消')}}</button></view>
         </view>
       </view>
-    </view>
+    </view> -->
 
     <!-- 未装弹窗 -->
     <view class="cu-modal" :class="unloadModal ? 'show' : ''" style="z-index: 900;">
@@ -435,10 +436,12 @@ import {
 } from "../loading/api";
 import { getAdjustWaitOutList, warehouseAdjustSendOutBatch, getSupplierPage,getAirShipmentByShipmentId,boxAirCheckoutGet,warehouseCreate,getAirCheckoutByShipmentId,searchLoadOrderByBoxNo,batchAirCreate,singleAirCreate } from './api'
 import { updateImg } from "@/api/system";
+import OrderDetailModal from "@/components/order-detail-modal/index.vue"
 
 export default {
   name: "loading-detail",
   components: {
+    OrderDetailModal
   },
   mixins: [mixins],
   data() {

src/pages/loading/detail.vue

@@ -166,7 +166,8 @@
     </scroll-view>
 
     <!-- 订单详情弹窗 -->
-    <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
+    <OrderDetailModal :orderDetailModal="orderDetailModal" :orderDetail="orderDetail" @close="showOrderDetail"></OrderDetailModal>
+    <!-- <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
       <view class="cu-dialog">
         <view class="cu-bar bg-white justify-end bottom-line">
           <view class="content title-bolder">{{$t('订单详情')}}</view>
@@ -227,7 +228,7 @@
           <view class="action"><button class="cu-btn bg-grey" @tap="showOrderDetail(false)">{{$t('取消')}}</button></view>
         </view>
       </view>
-    </view>
+    </view> -->
 
     <!-- 未装弹窗 -->
     <view class="cu-modal" :class="unloadModal ? 'show' : ''" style="z-index: 900;">
@@ -429,6 +430,7 @@ import {
   listByOrderId,
 } from "./api";
 import splitCom from "./components/split-com.vue";
+import OrderDetailModal from "@/components/order-detail-modal/index.vue"
 import { updateImg } from "@/api/system";
 import dayjs from "dayjs";
 
@@ -436,6 +438,7 @@ export default {
   name: "loading-detail",
   components: {
     splitCom,
+    OrderDetailModal
   },
   mixins: [mixins],
   data() {
@@ -781,6 +784,7 @@ export default {
     /* 显示订单详情 */
     showOrderDetail(show, id) {
       this.orderDetailModal = show;
+      console.log('OrderDetailModal', this.OrderDetailModal)
       if (show) {
         this.getOrderDetail(id);
       }

src/pages/mergePkg/package.vue

@@ -63,9 +63,19 @@
               </view>
               <view>
                 <view class="label">{{$t('订单号')}}: </view>
-                <view class="content">
-                  {{item.orderNo}}
-                </view>
+                <div class="content">
+                  <text @tap="showOrderDetail(true, item.orderId)">{{item.orderNo}}</text>
+                  <text>itemType</text>
+                  <!-- 调仓 -->
+                  <!-- 报关方式 -->
+                  <dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="item.customsType" />
+                  <!-- 包装类型 -->
+                  <dict-tag :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" :value="item.unit"></dict-tag>
+                  <!-- 混箱 -->
+                  <!-- 有牌 -->
+                  <text v-if="item.orderItemDOS.some(ele => ele.checkBrandType && ele.checkBrandType !== 0)">有牌</text>
+                  <!-- 带电 -->
+                </div>
               </view>
             </view>
             <view>
@@ -166,6 +176,9 @@
 	    </view>
 	  </view>
 	</view>
+  
+  <!-- 订单详情弹窗 -->
+  <OrderDetailModal :orderDetailModal="orderDetailModal" :orderDetail="orderDetail" @close="showOrderDetail"></OrderDetailModal>
 
 	<!-- 批量输入 -->
 	<view class="cu-modal" :class="batchModal ? 'show' : ''" style="z-index: 900;">
@@ -298,13 +311,14 @@ import {
 import {   batchCreateMore,batchDeleteMore,singleCreate,orderTagList } from "../tallyAir/api";
 import { getOrderDetailByBoxNo } from "../loading/api";
 import EditMergePkgDialog from "@/pages/mergePkg/components/editMergePkgDialog.vue";
+import OrderDetailModal from "@/components/order-detail-modal/index.vue"
 import util from '@/util/util'
 import { msg, alert } from "@/util/tools";
 import Seal from "@/pages/mergePkg/components/seal.vue";
 import Empty from "@/pages/mergePkg/components/empty.vue";
 import * as types from "../../store/mutations-types.js";
 export default {
-  components: { Empty, Seal, EditMergePkgDialog, uniIcons },
+  components: { Empty, Seal, EditMergePkgDialog, uniIcons, OrderDetailModal },
   filters:{
     toFixed(val){
       return Number(val).toFixed(2)
@@ -329,6 +343,9 @@ export default {
       searchKeyword: null,
       // 是否显示封箱弹层
       showSealDialog: false,
+      /* 订单详情 */
+      orderDetailModal: false,
+      orderDetail: {},
 	  keyword: "",
 	   //未理货箱号
 	   noTallyAir:false,
@@ -425,6 +442,30 @@ export default {
         this.$set(item, 'checked', status)
       })
     },
+    /* 显示订单详情 */
+    showOrderDetail(show, id) {
+      this.orderDetailModal = show;
+      if (show) {
+        this.getOrderDetail(id);
+      }
+    },
+    /* 读取订单详情 */
+    getOrderDetail(id) {
+      return new Promise((resolve, reject) => {
+        getOrderDetailAdmin(id).then((data) => {
+          //订单信息
+          this.orderDetail = data;
+          listByOrderId({ orderId: id }).then((data) => {
+            let positionNos = data.map((item) => {
+              return `${item.warehouseName ?? ""}${item.areaName ?? ""}${
+                item.locationName ?? ""
+              }`;
+            });
+            this.$set(this.orderDetail, "positionNo", positionNos.join(","));
+          });
+        });
+      });
+    },
     // 装箱
     pack(item){
 	  if(item.customsType!=='1'){

src/pages/packTogetherSearch/packTogetherSearch.vue

@@ -39,7 +39,8 @@
 		  </view>
 		</view>
 		  <!-- 订单详情弹窗 -->
-		  <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
+			<OrderDetailModal :orderDetailModal="orderDetailModal" :orderDetail="orderDetail" @close="showOrderDetail"></OrderDetailModal>
+		  <!-- <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
 			<view class="cu-dialog">
 			  <view class="cu-bar bg-white justify-end bottom-line">
 				<view class="content title-bolder">{{$t('订单详情')}}</view>
@@ -101,15 +102,18 @@
 				<view class="action"><button class="cu-btn bg-grey" @tap="showOrderDetail(false)">{{$t('取消')}}</button></view>
 			  </view>
 			</view>
-		  </view>
+		  </view> -->
 	</view>
 </template>
 
 <script>
 	import { getWarehouseWaitInList,listByOrderId,getOrderDetailAdmin } from './api'
 	import mixins from "../../mixins/mixin.js";
+	import OrderDetailModal from "@/components/order-detail-modal/index.vue"
+
 	export default {
 		mixins: [mixins],
+		components: { OrderDetailModal },
 		data() {
 			return {
 				listData: [],

src/pages/tally/detail.vue

@@ -109,7 +109,8 @@
     </scroll-view>
 
     <!-- 订单详情弹窗 -->
-    <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
+    <OrderDetailModal :orderDetailModal="orderDetailModal" :orderDetail="orderDetail" @close="showOrderDetail"></OrderDetailModal>
+    <!-- <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
       <view class="cu-dialog">
         <view class="cu-bar bg-white justify-end bottom-line">
           <view class="content title-bolder">{{$t('订单详情')}}</view>
@@ -135,11 +136,6 @@
             <view class="title">{{$t('报关方式')}}</view>
             <view class="content"><dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="orderDetail.customsType" /></view>
           </view>
-<!--          <view class="cu-form-group">-->
-<!--            <view class="title">{{$t('入仓时间')}}</view>-->
-<!--            <view class="content">{{ orderDetail.rucangTime | formatDate }}</view>-->
-<!--          </view>-->
-
           <view>
             <view class="item-content" v-for="(v, goodsKey) in orderDetail.orderItemVOList" :key="'goods-' + goodsKey">
               <view>
@@ -164,7 +160,7 @@
           <view class="action"><button class="cu-btn bg-grey" @tap="showOrderDetail(false)">{{$t('取消')}}</button></view>
         </view>
       </view>
-    </view>
+    </view> -->
 
     <!-- 货物详情弹窗 -->
     <view class="cu-modal" :class="goodsModal ? 'show' : ''" style="z-index: 900;">
@@ -250,10 +246,11 @@ import {
 } from "./api";
 import { getOrderDetail, getLoadingDetail } from "../loading/api";
 import WarehouseDetail from "./warehouseDetail.vue";
+import OrderDetailModal from "@/components/order-detail-modal/index.vue"
 
 export default {
   name: "tally-detail",
-  components: { WarehouseDetail },
+  components: { WarehouseDetail,OrderDetailModal },
   mixins: [mixins],
   data() {
     return {

src/pages/tallyAir/detail.vue

@@ -135,7 +135,8 @@
     </scroll-view>
 
     <!-- 订单详情弹窗 -->
-    <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
+    <OrderDetailModal :orderDetailModal="orderDetailModal" :orderDetail="orderDetail" @close="showOrderDetail"></OrderDetailModal>
+    <!-- <view class="cu-modal" :class="orderDetailModal ? 'show' : ''" style="z-index: 900;">
       <view class="cu-dialog">
         <view class="cu-bar bg-white justify-end bottom-line">
           <view class="content title-bolder">{{$t('订单详情')}}</view>
@@ -161,10 +162,6 @@
             <view class="title">{{$t('报关方式')}}</view>
             <view class="content"><dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="orderDetail.customsType" /></view>
           </view>
-<!--          <view class="cu-form-group">-->
-<!--            <view class="title">{{$t('入仓时间')}}</view>-->
-<!--            <view class="content">{{ orderDetail.rucangTime | formatDate }}</view>-->
-<!--          </view>-->
 
           <view>
             <view class="item-content" v-for="(v, goodsKey) in orderDetail.orderItemVOList" :key="'goods-' + goodsKey">
@@ -190,7 +187,7 @@
           <view class="action"><button class="cu-btn bg-grey" @tap="showOrderDetail(false)">{{$t('取消')}}</button></view>
         </view>
       </view>
-    </view>
+    </view> -->
 
     <!-- 货物详情弹窗 -->
     <view class="cu-modal" :class="goodsModal ? 'show' : ''" style="z-index: 900;">
@@ -402,11 +399,12 @@ import {
 import { getOrderDetail, getLoadingDetail,getOrderDetailByBoxNo } from "../loading/api";
 import WarehouseDetail from "./warehouseDetail.vue";
 import Exception from "./components/exception.vue";
+import OrderDetailModal from "@/components/order-detail-modal/index.vue"
 import util from "../../util/util.js";
 
 export default {
   name: "tally-detail",
-  components: { Exception, WarehouseDetail },
+  components: { Exception, WarehouseDetail, OrderDetailModal },
   mixins: [mixins],
   data() {
     return {