update 进行中的订单-查看详情弹窗
This commit is contained in:
@@ -1,41 +1,31 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="dialog-with-menu"
|
||||
style="padding: 40px"
|
||||
style="padding: 32px"
|
||||
:fullscreen="fullscreen"
|
||||
:visible="visible"
|
||||
@close="handleClose"
|
||||
:destroy-on-close="false"
|
||||
:close-on-click-modal="configs.clickModalToClose ?? true"
|
||||
>
|
||||
<!-- <el-button type="text" icon="el-icon-close" style="position: absolute; z-index: 100; top: 0; right: 18px" @click="handleClose">关闭</el-button> -->
|
||||
:close-on-click-modal="configs.clickModalToClose ?? true">
|
||||
<div slot="title" style="background: #eee; padding: 8px; text-align: center; border-bottom: 1px solid #ccc">
|
||||
<el-checkbox-group v-model="activeTab" @change="handleTabClick">
|
||||
<el-checkbox-button :true-label="1">子订单进度</el-checkbox-button>
|
||||
<el-checkbox-button :true-label="2">窑车详情</el-checkbox-button>
|
||||
<el-checkbox-button :true-label="3">托盘详情</el-checkbox-button>
|
||||
<el-checkbox-button :true-label="4">订单详情</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
|
||||
<el-tab-pane name="sub" label="子订单进度">
|
||||
<SubOrderDetail v-if="order !== null" :order="order" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="car" label="窑车详情">
|
||||
<CarDetail v-if="order !== null" :order-id="order.id" :table-layout="carLayoutKey" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="tray" label="托盘详情">
|
||||
<TrayDetail />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="order" label="订单详情">
|
||||
<OrderDetail ref="order-detail-tag" :configs="configs" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<!--
|
||||
<div style="width: 100%; height: 76px; position: absolute; z-index: 100; bottom: 0; text-align: right;">
|
||||
<el-button type="" plain @click="handleClose" style="margin-right: 18px; margin-top: 18px;">关闭</el-button>
|
||||
</div> -->
|
||||
<!-- <transition mode="out-in" :name="toLeft ? 'fade-left' : 'fade-right'"> -->
|
||||
<transition mode="out-in" name="fade-left">
|
||||
<SubOrderDetail v-if="activeTab === 1 && order !== null" :order="order" />
|
||||
<CarDetail v-if="activeTab === 2 && order !== null" :order-id="order.id" :table-layout="carLayoutKey" />
|
||||
<TrayDetail v-if="activeTab === 3" />
|
||||
<OrderDetailWrapper v-if="activeTab === 4" :order="order" :order-detail-configs="configs" />
|
||||
</transition>
|
||||
|
||||
<!-- footer -->
|
||||
<div slot="footer" style="">
|
||||
<!-- <template v-for="(operate, index) in configs.form.operations">
|
||||
<el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{
|
||||
operate.label
|
||||
}}</el-button>
|
||||
</template> -->
|
||||
<div slot="footer" style="background: #eee; padding: 10px 20px">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
@@ -43,13 +33,13 @@
|
||||
|
||||
<script>
|
||||
import CarDetail from "./tabs/carDetail.vue";
|
||||
import OrderDetail from "./tabs/orderDetail.vue";
|
||||
import OrderDetailWrapper from "./tabs/orderDetailWrapper.vue";
|
||||
import SubOrderDetail from "./tabs/subOrderDetail.vue";
|
||||
import TrayDetail from "./tabs/trayDetail.vue";
|
||||
|
||||
export default {
|
||||
name: "DialogWithMenu--OrderVersion",
|
||||
components: { CarDetail, OrderDetail, SubOrderDetail, TrayDetail },
|
||||
components: { CarDetail, OrderDetailWrapper, SubOrderDetail, TrayDetail },
|
||||
props: {
|
||||
configs: {
|
||||
type: Object,
|
||||
@@ -57,7 +47,7 @@ export default {
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
inject: ["urls"],
|
||||
@@ -65,26 +55,41 @@ export default {
|
||||
return {
|
||||
detailMode: false,
|
||||
visible: false,
|
||||
activeTab: "sub",
|
||||
activeTab: 1,
|
||||
oldActiveTab: 1,
|
||||
order: null,
|
||||
carLayoutKey: 0,
|
||||
toLeft: true,
|
||||
orderNotReady: true
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
document.body.style.overflow = "hidden";
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.body.style.overflow = "unset";
|
||||
},
|
||||
methods: {
|
||||
handleTabClick(tab, event) {
|
||||
console.log("handle tab click", tab, event);
|
||||
switch (tab.label) {
|
||||
case "子订单进度":
|
||||
handleTabClick(tab) {
|
||||
console.log("handle tab click", tab);
|
||||
if (tab > this.oldActiveTab) this.toLeft = true;
|
||||
else this.toLeft = false;
|
||||
switch (tab) {
|
||||
case 1:
|
||||
// 子订单进度
|
||||
break;
|
||||
case "窑车详情":
|
||||
case 2:
|
||||
// "窑车详情":
|
||||
this.carLayoutKey = Math.random();
|
||||
break;
|
||||
case "托盘详情":
|
||||
case 3:
|
||||
// "托盘详情":
|
||||
break;
|
||||
case "订单详情":
|
||||
case 4:
|
||||
// "订单详情":
|
||||
break;
|
||||
}
|
||||
this.oldActiveTab = tab;
|
||||
},
|
||||
|
||||
/** init **/
|
||||
@@ -93,10 +98,6 @@ export default {
|
||||
this.order = order;
|
||||
this.detailMode = detailMode ?? false;
|
||||
this.visible = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs["order-detail-tag"].init(this.order.id, this.detailMode);
|
||||
});
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
@@ -104,8 +105,6 @@ export default {
|
||||
|
||||
setTimeout(() => {
|
||||
this.$emit("destroy-dialog");
|
||||
// this.resetForm();
|
||||
// this.$emit("update:dialogVisible", false);
|
||||
}, 200);
|
||||
},
|
||||
},
|
||||
@@ -116,12 +115,6 @@ export default {
|
||||
.dialog-with-menu >>> .el-dialog__body {
|
||||
padding-top: 40px !important;
|
||||
padding-bottom: 40px !important;
|
||||
/* padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
height: 100%; */
|
||||
}
|
||||
|
||||
.el-select,
|
||||
@@ -130,12 +123,26 @@ export default {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.dialog-with-menu >>> .el-dialog {
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dialog-with-menu >>> .el-dialog__header {
|
||||
padding: 0;
|
||||
/* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
|
||||
}
|
||||
|
||||
.dialog-with-menu >>> .el-dialog__body {
|
||||
height: calc(100% - 72px);
|
||||
/* height: calc(100% - 72px); */
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
/* padding-bottom: 10px; */
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dialog-with-menu >>> .el-dialog__footer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dialog-with-menu >>> .el-tabs__content {
|
||||
@@ -152,4 +159,44 @@ export default {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.fade-left-enter {
|
||||
transform: translateX(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-left-enter-active,
|
||||
.fade-left-leave-active {
|
||||
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
.fade-left-enter-to,
|
||||
.fade-left-leave {
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.fade-left-leave-to {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-right-enter {
|
||||
transform: translateX(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-right-leave-to {
|
||||
transform: translateX(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fade-right-enter-active,
|
||||
.fade-right-leave-active {
|
||||
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
.fade-right-enter-to,
|
||||
.fade-right-leave {
|
||||
transform: translateX(0);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user