feat(cargo-type): 重构搜索区域为自定义紧凑单行搜索栏

- 替换 Avue 默认搜索表单,改为 flex 布局的一行紧凑搜索栏
- 左侧添加类型下拉选择和带搜索按钮的输入框,支持回车、清除和切换触发搜索
- 右侧新增添加分类、批量导入、批量删除按钮,依权限显示
- 隐藏 Avue 内置搜索和菜单左侧旧按钮槽,避免重复功能
- 引入 Element Plus 图标组件 Search 和 Plus,提升视觉友好度
- 应用固定宽度和轻量阴影样式,实现与设计稿一致的样式效果
This commit is contained in:
2026-07-28 17:52:57 +08:00
parent c7e67a83b7
commit 1434bbf691
3 changed files with 107 additions and 57 deletions

View File

@@ -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 固定宽度