#前端

zhou zhou

23 小时以前 1553782fd262f97a336fecc8b38f8f309fc08ae6

 rsf-design/src/views/basic-info/wh-mat/index.vue

@@ -1,6 +1,7 @@
<template>
  <div class="wh-mat-page art-full-height flex flex-col gap-4 xl:flex-row">
    <ElCard class="w-full shrink-0 xl:w-[320px]">
  <div class="wh-mat-page art-full-height">
    <div class="wh-mat-page__sidebar">
      <ElCard class="wh-mat-page__sidebar-card">
      <div class="mb-3 flex items-center justify-between gap-3">
        <div>
          <div class="text-base font-medium text-[var(--art-text-primary)]">物料分组</div>
@@ -22,7 +23,7 @@
        <ElButton @click="handleGroupSearch">搜索</ElButton>
      </div>

      <ElScrollbar class="h-[calc(100vh-260px)] pr-1">
      <ElScrollbar class="wh-mat-page__tree-scroll pr-1">
        <div v-if="groupTreeLoading" class="py-6">
          <ElSkeleton :rows="10" animated />
        </div>
@@ -45,9 +46,10 @@
          </template>
        </ElTree>
      </ElScrollbar>
    </ElCard>
      </ElCard>
    </div>

    <div class="min-w-0 flex-1 space-y-4">
    <div class="wh-mat-page__content">
      <ArtSearchBar
        v-model="searchForm"
        :items="searchItems"
@@ -59,23 +61,23 @@
      <ElCard class="art-table-card">
        <ArtTableHeader :loading="loading" v-model:columns="columnChecks" @refresh="loadMatnrList" />

      <ArtTable
        :loading="loading"
        :data="tableData"
        :columns="columns"
        :pagination="pagination"
        @pagination:size-change="handleSizeChange"
        @pagination:current-change="handleCurrentChange"
      >
        <template #action="{ row }">
          <ArtButtonTable icon="ri:eye-line" @click="openDetailDrawer(row)" />
        </template>
      </ArtTable>
    </ElCard>
        <ArtTable
          :loading="loading"
          :data="tableData"
          :columns="columns"
          :pagination="pagination"
          @pagination:size-change="handleSizeChange"
          @pagination:current-change="handleCurrentChange"
        >
          <template #action="{ row }">
            <ArtButtonTable icon="ri:eye-line" @click="openDetailDrawer(row)" />
          </template>
        </ArtTable>
      </ElCard>
    </div>

    <WhMatDetailDrawer v-model:visible="detailDrawerVisible" :loading="detailLoading" :detail="detailData" />
  </div>

  <WhMatDetailDrawer v-model:visible="detailDrawerVisible" :loading="detailLoading" :detail="detailData" />
</template>

<script setup>
@@ -327,3 +329,55 @@
    await Promise.all([loadGroupTree(), loadMatnrList()])
  })
</script>

<style scoped>
  .wh-mat-page {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  .wh-mat-page__sidebar {
    width: 320px;
    flex: 0 0 320px;
  }

  .wh-mat-page__sidebar-card {
    position: sticky;
    top: 16px;
  }

  .wh-mat-page__tree-scroll {
    height: calc(100vh - 320px);
    min-height: 420px;
  }

  .wh-mat-page__content {
    min-width: 0;
    flex: 1 1 auto;
  }

  .wh-mat-page__content > * + * {
    margin-top: 16px;
  }

  @media (max-width: 1024px) {
    .wh-mat-page {
      flex-direction: column;
    }

    .wh-mat-page__sidebar {
      width: 100%;
      flex-basis: auto;
    }

    .wh-mat-page__sidebar-card {
      position: static;
    }

    .wh-mat-page__tree-scroll {
      height: 320px;
      min-height: 320px;
    }
  }
</style>