Commit 8f646dfc authored by xiaoyan's avatar xiaoyan

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

parent 762a613a
<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
......@@ -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",
......
......@@ -124,6 +124,7 @@
"订单详情":"订单详情",
"唛头":"唛头",
"入仓时间":"入仓时间",
"路线":"路线",
"储位":"储位",
"未装":"未装",
"密码":"密码",
......@@ -340,6 +341,7 @@
"继续":"继续",
"英文品名":"英文品名",
"商品特性":"商品特性",
"特性":"特性",
"修改":"修改",
"删除":"删除",
"新商品入仓":"新商品入仓",
......
......@@ -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() {
......
......@@ -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);
}
......
......@@ -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>
......@@ -167,6 +177,9 @@
</view>
</view>
<!-- 订单详情弹窗 -->
<OrderDetailModal :orderDetailModal="orderDetailModal" :orderDetail="orderDetail" @close="showOrderDetail"></OrderDetailModal>
<!-- 批量输入 -->
<view class="cu-modal" :class="batchModal ? 'show' : ''" style="z-index: 900;">
<view class="cu-dialog">
......@@ -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'){
......
......@@ -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: [],
......
......@@ -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 {
......
......@@ -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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment