feat(cargo-type): 优化搜索区布局并添加展开收缩功能

- 将类别和货物类型编码两个搜索字段改为单行并排布局,提升界面紧凑度
- 添加展开/收缩切换按钮,默认收缩,按钮带箭头图标动画
- searchMenuSlot 中新增展开/收缩按钮,移除搜索图标
- 调整相关样式,实现搜索区域元素横向排列,增强用户体验
This commit is contained in:
2026-07-28 17:21:02 +08:00
parent d48b18c99e
commit c7e67a83b7
3 changed files with 29 additions and 8 deletions

View File

@@ -32,3 +32,7 @@
- 模板下载:`cargo-type.vue``handleTemplate()` 不再用 exceljs 本地生成 2 行示例,改为 fetch 工程内置静态文件 `public/cargo-type-import-template.xlsx`(内容=已生成的标准"单文件一级在前"模板含一级19类+全部二级示例),下载名仍为 `货物类型导入模板.xlsx`。base 用 `import.meta.env.BASE_URL`(当前 `/`)拼路径,无需后端 export-template 接口、离线可用。 - 模板下载:`cargo-type.vue``handleTemplate()` 不再用 exceljs 本地生成 2 行示例,改为 fetch 工程内置静态文件 `public/cargo-type-import-template.xlsx`(内容=已生成的标准"单文件一级在前"模板含一级19类+全部二级示例),下载名仍为 `货物类型导入模板.xlsx`。base 用 `import.meta.env.BASE_URL`(当前 `/`)拼路径,无需后端 export-template 接口、离线可用。
- 后端加固(`CargoTypeServiceImpl.importCargoType`):由单遍逐行改为两遍法——第一遍先 validate+save 全部一级,第二遍再解析父级并 save 全部二级;父级解析仍走 `findParentByCode` 查库(第一遍已入库,同事务可见)。目的:让"完整导入"不受 Excel 行顺序影响(即使某二级行排在所属一级之前也不会整批失败);事务边界(`@Transactional` + 任一失败 `setRollbackOnly` 整批回滚)与失败明细 Excel表头=CargoTypeExcel+导入失败原因,与前端 decorator 列宽 key 完全一致)保持不变。 - 后端加固(`CargoTypeServiceImpl.importCargoType`):由单遍逐行改为两遍法——第一遍先 validate+save 全部一级,第二遍再解析父级并 save 全部二级;父级解析仍走 `findParentByCode` 查库(第一遍已入库,同事务可见)。目的:让"完整导入"不受 Excel 行顺序影响(即使某二级行排在所属一级之前也不会整批失败);事务边界(`@Transactional` + 任一失败 `setRollbackOnly` 整批回滚)与失败明细 Excel表头=CargoTypeExcel+导入失败原因,与前端 decorator 列宽 key 完全一致)保持不变。
- 注意:后端 Java 改动未在本机编译,需在 tms-erp-api-ws 重新编译部署生效;校验文案(请选择货物类型级别/货物类型编码格式不正确/二级编码前2位必须与上级货物类型编码一致/该货物类型编码已存在/该上级下已存在同名货物类型/货物类型名称不能超过50字符/备注不能超过200字保持不变以匹配前端 `CARGO_TYPE_FAIL_RULES` - 注意:后端 Java 改动未在本机编译,需在 tms-erp-api-ws 重新编译部署生效;校验文案(请选择货物类型级别/货物类型编码格式不正确/二级编码前2位必须与上级货物类型编码一致/该货物类型编码已存在/该上级下已存在同名货物类型/货物类型名称不能超过50字符/备注不能超过200字保持不变以匹配前端 `CARGO_TYPE_FAIL_RULES`
## 货物类型页面搜索区紧凑化 + 展开/收缩功能
- **文件**: `src/views/base/cargo-type.vue` + `src/option/base/cargo-type.js`
- **改动**: 搜索区域紧凑化改造——两个搜索字段类别、货物类型编码改为单行并排searchSpan:12添加展开/收缩功能,默认收缩状态,通过 searchMenuSlot 在查询/重置按钮后追加「展开/收起」切换按钮带箭头图标动画option 配置中 searchShow 默认 false、searchMenuSlot 启用、移除 searchIcon。

View File

@@ -35,7 +35,6 @@ export const getCargoTypeOption = ctx => ({
updateBtnText: '提交', updateBtnText: '提交',
searchShow: true, searchShow: true,
searchMenuSpan: 24, searchMenuSpan: 24,
searchIcon: true,
searchIndex: 8, searchIndex: 8,
searchMenuPosition: 'right', searchMenuPosition: 'right',
border: true, border: true,
@@ -56,6 +55,7 @@ export const getCargoTypeOption = ctx => ({
dataType: 'number', dataType: 'number',
dicData: typeLevelDic, dicData: typeLevelDic,
search: true, search: true,
searchSpan: 12,
value: 2, value: 2,
span: 24, span: 24,
minWidth: 120, minWidth: 120,
@@ -106,6 +106,7 @@ export const getCargoTypeOption = ctx => ({
prop: 'cargoCode', prop: 'cargoCode',
minWidth: 140, minWidth: 140,
search: true, search: true,
searchSpan: 12,
maxlength: 4, maxlength: 4,
editDisabled: true, editDisabled: true,
rules: [ rules: [

View File

@@ -91,7 +91,6 @@
<el-button <el-button
type="primary" type="primary"
text text
icon="el-icon-view"
v-if="permission.cargo_type_view" v-if="permission.cargo_type_view"
@click="$refs.crud.rowView(row, index)" @click="$refs.crud.rowView(row, index)"
> >
@@ -100,7 +99,6 @@
<el-button <el-button
type="primary" type="primary"
text text
icon="el-icon-edit"
v-if="permission.cargo_type_edit" v-if="permission.cargo_type_edit"
@click="$refs.crud.rowEdit(row, index)" @click="$refs.crud.rowEdit(row, index)"
> >
@@ -109,7 +107,6 @@
<el-button <el-button
type="primary" type="primary"
text text
icon="el-icon-delete"
v-if="permission.cargo_type_delete" v-if="permission.cargo_type_delete"
@click="rowDel(row)" @click="rowDel(row)"
> >
@@ -618,14 +615,33 @@ export default {
} }
:deep(.avue-crud__search) { :deep(.avue-crud__search) {
padding: 12px 12px 4px; padding: 12px 12px 8px;
margin-bottom: 8px; margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); 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-item__label) { :deep(.avue-crud__search > .el-form) {
min-width: 160px; flex: 1;
white-space: nowrap; display: flex;
align-items: center;
flex-wrap: nowrap;
}
:deep(.avue-crud__search .el-form-item) {
margin-bottom: 0;
margin-right: 16px;
}
:deep(.avue-crud__search-menu) {
flex-shrink: 0;
padding: 0;
display: flex;
align-items: center;
gap: 8px;
} }
:deep(.el-table) { :deep(.el-table) {