ECS5 / ECS5.0Web · Files

<template>
  <div class="warehouse-table">
    <!-- 固定表头 -->
    <table class="data-table">
      <thead>
        <tr class="table-header">
          <th v-for="(header, colIndex) in headers" :key="colIndex">
            {{ header }}
          </th>
        </tr>
      </thead>
    </table>
    <!-- 树形控件 -->
    <el-tree
      :data="treeData"
      node-key="id"
      :props="defaultProps"
      :expand-on-click-node="false"
      :default-expand-all="true"
    >
      <template #default="{ node, data }">
        <div
          v-if="data.type === 'group'"
          class="group-header"
          @click="toggleExpand(node)"
        >
          <span>{{ data.label }}</span>
        </div>
        <table v-else class="data-table">
          <tbody>
            <tr
              :class="{
                'active-row': data.isActive,
                'hover-effect': !data.isActive,
              }"
              @mouseover="!data.isActive && handleRowHover(data.id)"
              @mouseleave="!data.isActive && handleRowLeave(data.id)"
            >
              <td v-for="(cell, cellIndex) in data.cells" :key="cellIndex">
                {{ cell }}
              </td>
            </tr>
          </tbody>
        </table>
      </template>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        "站台编码",
        "站台名",
        "可出属性",
        "自动状态",
        "占位",
        "条码",
        "P-请求报文",
        "P-请求装载",
        "P-请求读码器",
        "P-请求条码",
        "P-请求重量",
        "P-请求长度",
        "P-请求宽度",
        "P-请求高度",
        "W-请求报文",
      ],
      treeData: [
        {
          id: 1,
          label: "2号巷道",
          type: "group",
          children: [
            {
              id: 2,
              type: "station",
              isActive: true,
              cells: [
                "P1001",
                "接出...",
                "可出",
                "1",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
              ],
            },
            {
              id: 3,
              type: "station",
              isActive: false,
              cells: [
                "P1007",
                "接入...",
                "不可出",
                "1",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
              ],
            },
          ],
        },
        {
          id: 4,
          label: "3号巷道",
          type: "group",
          children: [
            {
              id: 5,
              type: "station",
              isActive: false,
              cells: [
                "P2001",
                "接出...",
                "可出",
                "1",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
              ],
            },
            {
              id: 6,
              type: "station",
              isActive: false,
              cells: [
                "P2007",
                "接入...",
                "不可出",
                "1",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
                "0",
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      hoverRowIndex: -1,
    };
  },
  methods: {
    handleRowHover(index) {
      this.hoverRowIndex = index;
    },
    handleRowLeave() {
      this.hoverRowIndex = -1;
    },
    toggleExpand(node) {
      node.expanded = !node.expanded;
    },
  },
};
</script>

<style scoped>
.warehouse-table {
  font-family: Arial, sans-serif;
  color: #333;
  margin: 20px;
  overflow-x: auto;
}

.group-header {
  background: #f0f0f0;
  padding: 12px 15px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1200px;
}

.table-header th {
  background: #e9ecef;
  padding: 12px 15px;
  border: 1px solid #dee2e6;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
}

.data-table td {
  padding: 12px 15px;
  border: 1px solid #dee2e6;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
}

.active-row {
  background: #b3d4fc !important;
}

.hover-effect {
  transition: background-color 0.2s;
}

.hover-effect:hover {
  background: #f5f7fa;
}

::v-deep .el-tree {
  margin-top: 30px;
}

::v-deep .el-tree-node__content {
  padding: 15px 0;
}

::v-deep .el-tree-node__label {
  font-size: 14px;
}

::v-deep .el-tree-node {
  margin-bottom: 10px;
}

::v-deep .el-tree-node__expand-icon {
  display: none; /* 隐藏展开图标 */
}
</style>