From 1553782fd262f97a336fecc8b38f8f309fc08ae6 Mon Sep 17 00:00:00 2001
From: zhou zhou <3272660260@qq.com>
Date: 星期三, 01 四月 2026 11:07:31 +0800
Subject: [PATCH] #前端
---
rsf-design/src/views/basic-info/wh-mat/index.vue | 94 +++++++++++++++++++++++++++++++++++++----------
1 files changed, 74 insertions(+), 20 deletions(-)
diff --git a/rsf-design/src/views/basic-info/wh-mat/index.vue b/rsf-design/src/views/basic-info/wh-mat/index.vue
index 72d23c5..6533a23 100644
--- a/rsf-design/src/views/basic-info/wh-mat/index.vue
+++ b/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>
--
Gitblit v1.9.1