klp-oa/klp-ui/src/views/wms/warehouse/log.vue

<template>
  <div class="app-container">
    <!-- 整体布局 -->
    <div class="layout-container">
      <!-- 左侧树形结构 -->
      <div class="tree-container" v-loading="treeLoading">
        <el-tree ref="warehouseTreeRef" :data="warehouseTree" :props="treeProps" node-key="actualWarehouseId"
          @node-click="handleNodeClick" :expand-on-click-node="false" highlight-current class="warehouse-tree"
          :disabled="isSwitching">
        </el-tree>
      </div>

      <!-- 右侧仓库信息区域 - 替换为 Bird 组件 -->
      <div class="warehouse-container" v-if="selectedNodeId" v-loading="rightLoading" element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading">
        <!-- 日志表格 -->
        <LogTable :warehouseId="selectedNodeId" />
      </div>

      <!-- 未选中节点提示 -->
      <div class="empty-select-tip" v-if="!selectedNodeId">
        请选择左侧仓库查看吞吐日志
      </div>
    </div>
  </div>
</template>

<script>
import { treeActualWarehouseTwoLevel } from "@/api/wms/actualWarehouse";
import LogTable from "@/views/wms/warehouse/components/LogTable.vue";

export default {
  name: "Overview",
  components: {
    LogTable,
  },
  data() {
    return {
      warehouseTree: [],
      treeProps: { label: "actualWarehouseName", children: "children" },
      selectedNodeId: "",
      selectedNode: null,
      // 加载状态
      treeLoading: false,
      rightLoading: false,
      isSwitching: false,
      nodeClickTimer: null,
      buttonLoading: false,
    };
  },
  created() {
    this.getWarehouseTree();
  },
  beforeDestroy() {
    if (this.nodeClickTimer) clearTimeout(this.nodeClickTimer);
  },
  methods: {
    // 获取树形数据
    getWarehouseTree() {
      this.treeLoading = true;
      treeActualWarehouseTwoLevel()
        .then((res) => { this.warehouseTree = res.data || []; })
        .catch((err) => { this.$message.error("获取仓库树形数据失败：" + err.message); })
        .finally(() => { this.treeLoading = false; });
    },

    // 树节点点击
    handleNodeClick(node) {
      // if (this.isSwitching) return;
      // if (this.nodeClickTimer) clearTimeout(this.nodeClickTimer);

      // this.nodeClickTimer = setTimeout(() => {
      if (!node.children || node.children.length === 0) {
        // this.isSwitching = true;
        // this.rightLoading = true;
        this.selectedNodeId = node.actualWarehouseId;
        this.selectedNode = node;
      } else {
        this.selectedNodeId = '';
        this.selectedNode = null;
      }
      // }, 300);
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: calc(100vh - 90px);
  padding: 16px;
  box-sizing: border-box;
  background: #f5f7fa;
}

.layout-container {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 16px;

  .tree-container {
    width: 160px;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .warehouse-container {
    flex: 1;
    height: 100%;
    overflow-y: auto;
  }

  .empty-select-tip {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #909399;
    font-size: 16px;
    background: #fff;
    border-radius: 8px;
  }
}

// 初始化网格选择器样式
.grid-selector-container {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;

  .selector-tip {
    margin-bottom: 10px;
    font-size: 12px;
    color: #606266;
  }

  .grid-selector {
    width: 100%;
    max-width: 500px;
    max-height: 300px;
    overflow: auto;
    border: 1px solid #e6e6e6;
    background: #fafafa;

    .grid-selector-row {
      display: flex;

      .grid-selector-cell {
        width: 20px;
        height: 20px;
        border: 1px solid #e0e0e0;
        box-sizing: border-box;
        transition: all 0.1s;

        &.hovered {
          background: #e8f4ff;
          border-color: #409eff;
        }

        &.selected {
          background: #409eff;
          border-color: #1e88e5;
        }

        &:hover {
          background: #c6e2ff;
          border-color: #409eff;
        }
      }
    }
  }
}
</style>