#前端

zhou zhou

15 小时以前 5d31cb5f1fb32a478d5b751ebfe97d47db890778

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

@@ -1,83 +1,89 @@
<template>
  <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>
          <div class="text-xs text-[var(--art-text-secondary)]">
            {{ selectedGroupLabel }}
          </div>
        </div>
        <ElButton text @click="handleResetGroup">全部</ElButton>
      </div>

      <div class="mb-3 flex items-center gap-2">
        <ElInput
          v-model.trim="groupSearch"
          clearable
          placeholder="搜索物料分组"
          @clear="handleGroupSearch"
          @keyup.enter="handleGroupSearch"
        />
        <ElButton @click="handleGroupSearch">搜索</ElButton>
      </div>

      <ElScrollbar class="wh-mat-page__tree-scroll pr-1">
        <div v-if="groupTreeLoading" class="py-6">
          <ElSkeleton :rows="10" animated />
        </div>
        <ElEmpty v-else-if="!groupTreeData.length" description="暂无物料分组" />
        <ElTree
          v-else
          :data="groupTreeData"
          :props="treeProps"
          node-key="id"
          highlight-current
          default-expand-all
          :current-node-key="selectedGroupId"
          @node-click="handleGroupNodeClick"
        >
          <template #default="{ data }">
            <div class="flex items-center gap-2">
              <span class="font-medium">{{ data.name || '--' }}</span>
              <span class="text-xs text-[var(--art-text-secondary)]">{{ data.code || '--' }}</span>
  <div class="wh-mat-page-root">
    <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>
              <div class="text-xs text-[var(--art-text-secondary)]">
                {{ selectedGroupLabel }}
              </div>
            </div>
          </template>
        </ElTree>
      </ElScrollbar>
      </ElCard>
            <ElButton text @click="handleResetGroup">全部</ElButton>
          </div>

          <div class="mb-3 flex items-center gap-2">
            <ElInput
              v-model.trim="groupSearch"
              clearable
              placeholder="搜索物料分组"
              @clear="handleGroupSearch"
              @keyup.enter="handleGroupSearch"
            />
            <ElButton @click="handleGroupSearch">搜索</ElButton>
          </div>

          <ElScrollbar class="wh-mat-page__tree-scroll pr-1">
            <div v-if="groupTreeLoading" class="py-6">
              <ElSkeleton :rows="10" animated />
            </div>
            <ElEmpty v-else-if="!groupTreeData.length" description="暂无物料分组" />
            <ElTree
              v-else
              :data="groupTreeData"
              :props="treeProps"
              node-key="id"
              highlight-current
              default-expand-all
              :current-node-key="selectedGroupId"
              @node-click="handleGroupNodeClick"
            >
              <template #default="{ data }">
                <div class="flex items-center gap-2">
                  <span class="font-medium">{{ data.name || '--' }}</span>
                  <span class="text-xs text-[var(--art-text-secondary)]">{{ data.code || '--' }}</span>
                </div>
              </template>
            </ElTree>
          </ElScrollbar>
        </ElCard>
      </div>

      <div class="wh-mat-page__content">
        <ArtSearchBar
          v-model="searchForm"
          :items="searchItems"
          :showExpand="true"
          @search="handleSearch"
          @reset="handleReset"
        />

        <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>
      </div>
    </div>

    <div class="wh-mat-page__content">
      <ArtSearchBar
        v-model="searchForm"
        :items="searchItems"
        :showExpand="true"
        @search="handleSearch"
        @reset="handleReset"
      />

      <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>
    </div>
    <WhMatDetailDrawer
      v-model:visible="detailDrawerVisible"
      :loading="detailLoading"
      :detail="detailData"
    />
  </div>

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

<script setup>
@@ -333,6 +339,7 @@
<style scoped>
  .wh-mat-page {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }