156 lines
4.0 KiB
Vue
156 lines
4.0 KiB
Vue
<template>
|
|
<el-dialog
|
|
class="dialog-with-menu"
|
|
style="padding: 40px"
|
|
: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> -->
|
|
|
|
<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> -->
|
|
|
|
<!-- 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> -->
|
|
<el-button @click="handleClose">取消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import CarDetail from "./tabs/carDetail.vue";
|
|
import OrderDetail from "./tabs/orderDetail.vue";
|
|
import SubOrderDetail from "./tabs/subOrderDetail.vue";
|
|
import TrayDetail from "./tabs/trayDetail.vue";
|
|
|
|
export default {
|
|
name: "DialogWithMenu--OrderVersion",
|
|
components: { CarDetail, OrderDetail, SubOrderDetail, TrayDetail },
|
|
props: {
|
|
configs: {
|
|
type: Object,
|
|
default: () => null,
|
|
},
|
|
fullscreen: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
inject: ["urls"],
|
|
data() {
|
|
return {
|
|
detailMode: false,
|
|
visible: false,
|
|
activeTab: "sub",
|
|
order: null,
|
|
carLayoutKey: 0,
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
handleTabClick(tab, event) {
|
|
console.log("handle tab click", tab, event);
|
|
switch (tab.label) {
|
|
case "子订单进度":
|
|
break;
|
|
case "窑车详情":
|
|
this.carLayoutKey = Math.random();
|
|
break;
|
|
case "托盘详情":
|
|
break;
|
|
case "订单详情":
|
|
break;
|
|
}
|
|
},
|
|
|
|
/** init **/
|
|
init(order, detailMode) {
|
|
console.log("init menu dialog,", order);
|
|
this.order = order;
|
|
this.detailMode = detailMode ?? false;
|
|
this.visible = true;
|
|
|
|
this.$nextTick(() => {
|
|
this.$refs["order-detail-tag"].init(this.order.id, this.detailMode);
|
|
});
|
|
},
|
|
|
|
handleClose() {
|
|
this.visible = false;
|
|
|
|
setTimeout(() => {
|
|
this.$emit("destroy-dialog");
|
|
// this.resetForm();
|
|
// this.$emit("update:dialogVisible", false);
|
|
}, 200);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.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,
|
|
.el-cascader,
|
|
.el-date-editor {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.dialog-with-menu >>> .el-tabs__content {
|
|
height: calc(100% - 32px);
|
|
overflow-y: auto;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.dialog-with-menu >>> .el-tabs {
|
|
height: 100%;
|
|
}
|
|
|
|
.h0 {
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
</style>
|