From 1434bbf691a9613a47f64075f16fd6a5a9723027 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Tue, 28 Jul 2026 17:52:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(cargo-type):=20=E9=87=8D=E6=9E=84=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E5=8C=BA=E5=9F=9F=E4=B8=BA=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E7=B4=A7=E5=87=91=E5=8D=95=E8=A1=8C=E6=90=9C=E7=B4=A2=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 替换 Avue 默认搜索表单，改为 flex 布局的一行紧凑搜索栏
- 左侧添加类型下拉选择和带搜索按钮的输入框，支持回车、清除和切换触发搜索
- 右侧新增添加分类、批量导入、批量删除按钮，依权限显示
- 隐藏 Avue 内置搜索和菜单左侧旧按钮槽，避免重复功能
- 引入 Element Plus 图标组件 Search 和 Plus，提升视觉友好度
- 应用固定宽度和轻量阴影样式，实现与设计稿一致的样式效果
---
 .workbuddy/memory/2026-07-28.md |  10 +++
 src/option/base/cargo-type.js   |   3 +-
 src/views/base/cargo-type.vue   | 151 ++++++++++++++++++++------------
 3 files changed, 107 insertions(+), 57 deletions(-)

diff --git a/.workbuddy/memory/2026-07-28.md b/.workbuddy/memory/2026-07-28.md
index 934f084..fb49cda 100644
--- a/.workbuddy/memory/2026-07-28.md
+++ b/.workbuddy/memory/2026-07-28.md
@@ -36,3 +36,13 @@
 ## 货物类型页面搜索区紧凑化 + 展开/收缩功能
 - **文件**: `src/views/base/cargo-type.vue` + `src/option/base/cargo-type.js`
 - **改动**: 搜索区域紧凑化改造——两个搜索字段（类别、货物类型编码）改为单行并排（searchSpan:12）；添加展开/收缩功能，默认收缩状态，通过 searchMenuSlot 在查询/重置按钮后追加「展开/收起」切换按钮（带箭头图标动画）；option 配置中 searchShow 默认 false、searchMenuSlot 启用、移除 searchIcon。
+
+## cargo-type 搜索区重构为自定义紧凑单行搜索栏
+- **文件**: `src/views/base/cargo-type.vue` + `src/option/base/cargo-type.js`
+- **改动**: 将 Avue 默认搜索表单完全替换为自定义紧凑单行搜索栏（对齐设计稿截图风格）：
+  - 左侧：`el-select` 类型下拉（选择类型）+ `el-input` 搜索输入框（搜索分类名称，带搜索图标按钮）
+  - 右侧：添加分类（主色按钮）、批量导入、批量删除操作按钮
+  - 隐藏 Avue 内置搜索（`searchShow: false`），移除 `menu-left` 插槽中的按钮
+  - 新增 `handleCompactSearch` 方法，支持回车/点击/清除/下拉切换触发搜索，keyword 映射为 `cargoName` 参数
+  - 引入 Element Plus 图标组件（Search, Plus）
+  - 样式：flex 单行布局、轻量阴影 `0 2px 8px rgba(0,0,0,0.06)`、select 160px / input 280px 固定宽度
diff --git a/src/option/base/cargo-type.js b/src/option/base/cargo-type.js
index 61d4eb9..7032f87 100644
--- a/src/option/base/cargo-type.js
+++ b/src/option/base/cargo-type.js
@@ -33,7 +33,8 @@ export const getCargoTypeOption = ctx => ({
   emptyBtnText: '重置',
   saveBtnText: '提交',
   updateBtnText: '提交',
-  searchShow: true,
+  searchShow: false,
+  searchIcon: false,
   searchMenuSpan: 24,
   searchIndex: 8,
   searchMenuPosition: 'right',
diff --git a/src/views/base/cargo-type.vue b/src/views/base/cargo-type.vue
index 6db1208..b138729 100644
--- a/src/views/base/cargo-type.vue
+++ b/src/views/base/cargo-type.vue
@@ -1,5 +1,52 @@
 <template>
   <basic-container class="cargo-type-page">
+    <!-- 紧凑搜索栏 -->
+    <div class="compact-search">
+      <div class="compact-search__form">
+        <el-select
+          v-model="query.typeLevel"
+          placeholder="选择类型"
+          clearable
+          class="compact-search__select"
+          @change="handleCompactSearch"
+        >
+          <el-option label="一级货物类型" :value="1" />
+          <el-option label="二级货物类型" :value="2" />
+        </el-select>
+        <el-input
+          v-model="query.keyword"
+          placeholder="搜索分类名称"
+          clearable
+          class="compact-search__input"
+          @keyup.enter="handleCompactSearch"
+          @clear="handleCompactSearch"
+        >
+          <template #append>
+            <el-button @click="handleCompactSearch">
+              <el-icon><Search /></el-icon>
+            </el-button>
+          </template>
+        </el-input>
+      </div>
+      <div class="compact-search__actions">
+        <el-button type="primary" v-if="permission.cargo_type_add" @click="$refs.crud.rowAdd()">
+          <el-icon class="el-icon--left"><Plus /></el-icon>添加分类
+        </el-button>
+        <el-button
+          type="primary"
+          plain
+          v-if="permission.cargo_type_import"
+          @click="handleImport"
+        >批量导入</el-button>
+        <el-button
+          type="danger"
+          plain
+          v-if="permission.cargo_type_delete"
+          @click="handleDelete"
+        >批量删除</el-button>
+      </div>
+    </div>
+
     <avue-crud
       :option="option"
       :table-loading="loading"
@@ -20,40 +67,6 @@
       @refresh-change="refreshChange"
       @on-load="onLoad"
     >
-      <template #menu-left>
-        <el-button
-          type="primary"
-          icon="el-icon-upload"
-          plain
-          v-if="permission.cargo_type_import"
-          @click="handleImport"
-          >批量导入
-        </el-button>
-        <el-button
-          type="primary"
-          icon="el-icon-download"
-          plain
-          v-if="permission.cargo_type_template"
-          @click="handleTemplate"
-          >下载模板
-        </el-button>
-        <el-button
-          type="primary"
-          icon="el-icon-download"
-          plain
-          v-if="permission.cargo_type_export"
-          @click="handleExport"
-          >批量导出
-        </el-button>
-        <el-button
-          type="danger"
-          icon="el-icon-delete"
-          plain
-          v-if="permission.cargo_type_delete"
-          @click="handleDelete"
-          >批量删除
-        </el-button>
-      </template>
 
       <template #parentCargoName="{ row }">
         {{ row.typeLevel === 1 ? '/' : row.parentCargoName || '/' }}
@@ -151,6 +164,7 @@ import { openImportDialog } from '@/utils/import-excel';
 import { getToken } from '@/utils/auth';
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
+import { Search, Plus } from '@element-plus/icons-vue';
 
 // 导入失败明细中，每个错误文本对应的「字段列」与「规则说明」
 const CARGO_TYPE_FAIL_RULES = [
@@ -247,6 +261,7 @@ export const decorateCargoTypeFailDetail = async workbook => {
 };
 
 export default {
+  components: { Search, Plus },
   data() {
     return {
       form: {},
@@ -511,6 +526,17 @@ export default {
       this.syncColumnDisplay();
       done();
     },
+    handleCompactSearch() {
+      this.page.currentPage = 1;
+      const params = {};
+      if (this.query.typeLevel != null) {
+        params.typeLevel = this.query.typeLevel;
+      }
+      if (this.query.keyword) {
+        params.cargoName = this.query.keyword;
+      }
+      this.onLoad(this.page, params);
+    },
     searchReset() {
       this.query = {};
       this.page.currentPage = 1;
@@ -614,34 +640,47 @@ export default {
     box-shadow: none;
   }
 
-  :deep(.avue-crud__search) {
-    padding: 12px 12px 8px;
+  // 隐藏表格工具栏中的搜索图标按钮
+  :deep(.avue-crud__search-btn) {
+    display: none !important;
+  }
+
+  // 紧凑搜索栏
+  .compact-search {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
     margin-bottom: 8px;
+    background: #fff;
+    border-radius: 4px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
     gap: 16px;
-  }
 
-  :deep(.avue-crud__search > .el-form) {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-  }
+    &__form {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      gap: 12px;
+      min-width: 0;
+    }
 
-  :deep(.avue-crud__search .el-form-item) {
-    margin-bottom: 0;
-    margin-right: 16px;
-  }
+    &__select {
+      width: 160px;
+      flex-shrink: 0;
+    }
 
-  :deep(.avue-crud__search-menu) {
-    flex-shrink: 0;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    gap: 8px;
+    &__input {
+      width: 280px;
+      flex-shrink: 0;
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-shrink: 0;
+    }
   }
 
   :deep(.el-table) {