pms-aomei/src/views/modules/pms/order/components/DialogWithMenu.vue

<template>
  <el-dialog
    class="dialog-with-menu"
    style="padding: 32px"
    :fullscreen="fullscreen"
    :visible="visible"
    @close="handleClose"
    @closed="$emit('destroy')">
    <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>

    <!-- <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" />
    </transition>

    <!-- footer  -->
    <div slot="footer" style="background: #eee; padding: 10px 20px">
      <el-button @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import CarDetail from "./tabs/carDetail.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, OrderDetailWrapper, SubOrderDetail, TrayDetail },
  props: {
    fullscreen: {
      type: Boolean,
      default: true,
    },
  },
  inject: ["urls"],
  data() {
    return {
      detailMode: false,
      visible: false,
      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) {
      console.log("handle tab click", tab);
      if (tab > this.oldActiveTab) this.toLeft = true;
      else this.toLeft = false;
      switch (tab) {
        case 1:
          // 子订单进度
          break;
        case 2:
          // "窑车详情":
          this.carLayoutKey = Math.random();
          break;
        case 3:
          // "托盘详情":
          break;
        case 4:
          // "订单详情":
          break;
      }
      this.oldActiveTab = tab;
    },

    /** init **/
    init(order, detailMode) {
      console.log("init menu dialog,", order);
      this.order = order;
      this.detailMode = detailMode ?? false;
      this.visible = true;
    },

    handleClose() {
      this.visible = false;
    },
  },
};
</script>

<style scoped>
.dialog-with-menu >>> .el-dialog__body {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.el-select,
.el-cascader,
.el-date-editor {
  width: 100% !important;
}

.dialog-with-menu >>> .el-dialog {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.dialog-with-menu >>> .el-dialog__header {
  padding: 0;
}

.dialog-with-menu >>> .el-dialog__body {
  /* 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 {
  height: calc(100% - 32px);
  overflow-y: auto;
  padding-right: 12px;
}

.dialog-with-menu >>> .el-tabs {
  height: 100%;
}

.h0 {
  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>