feat(cargo-type): 优化顶部按钮区界面和样式
- 将“添加分类”按钮文字修改为“新增”以统一风格 - 为批量导入、下载模板、批量导出和批量删除按钮添加对应 Element Plus 图标 - 在组件中引入并注册 Search、Plus、Upload、Download、Delete 图标组件 - 新增样式规则,去除 basic-container 卡片内层 el-card 的 padding,符合设计规范4.4 - 隐藏表格工具栏中的搜索图标按钮,优化界面简洁度
This commit is contained in:
12
.workbuddy/memory/2026-07-29.md
Normal file
12
.workbuddy/memory/2026-07-29.md
Normal file
@@ -0,0 +1,12 @@
|
||||
# 2026-07-29 工作日志
|
||||
|
||||
## cargo-type 顶部按钮区优化
|
||||
- **文件**: `src/views/base/cargo-type.vue`
|
||||
- **改动**:
|
||||
1. 新增按钮文字 `添加分类` → `新增`(与截图一致)
|
||||
2. 为 4 个按钮补齐 Element Plus 图标:批量导入(Upload)、下载模板(Download)、批量导出(Download)、批量删除(Delete),均带 `el-icon--left`
|
||||
3. 图标导入注册:`import { Search, Plus, Upload, Download, Delete }`,components 同步注册
|
||||
4. 补充规范样式:`:deep(.basic-container__card) > .el-card__body { padding: 0 }`(去除内层卡片 padding,符合 AGENTS.md 4.4)
|
||||
- **排查确认无需改动项**:
|
||||
- 操作列菜单(查看/编辑/删除)menuWidth:220 已符合规范
|
||||
- `empty-pagination` 组件已靠右、`total` 在前、`sizes` 在 total 右侧,符合分页规范;avue-crud 默认分页 layout 同规范(customer-type 同模块也未自定义)
|
||||
@@ -30,32 +30,32 @@
|
||||
</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-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-icon class="el-icon--left"><Upload /></el-icon>批量导入</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
v-if="permission.cargo_type_template"
|
||||
@click="handleTemplate"
|
||||
>下载模板</el-button>
|
||||
><el-icon class="el-icon--left"><Download /></el-icon>下载模板</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
v-if="permission.cargo_type_export"
|
||||
@click="handleExport"
|
||||
>批量导出</el-button>
|
||||
><el-icon class="el-icon--left"><Download /></el-icon>批量导出</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
v-if="permission.cargo_type_delete"
|
||||
@click="handleDelete"
|
||||
>批量删除</el-button>
|
||||
><el-icon class="el-icon--left"><Delete /></el-icon>批量删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -176,7 +176,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';
|
||||
import { Search, Plus, Upload, Download, Delete } from '@element-plus/icons-vue';
|
||||
|
||||
// 导入失败明细中,每个错误文本对应的「字段列」与「规则说明」
|
||||
const CARGO_TYPE_FAIL_RULES = [
|
||||
@@ -273,7 +273,7 @@ export const decorateCargoTypeFailDetail = async workbook => {
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { Search, Plus },
|
||||
components: { Search, Plus, Upload, Download, Delete },
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
@@ -652,6 +652,11 @@ export default {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// 去除 basic-container 卡片内层 el-card 的 padding(规范 4.4)
|
||||
:deep(.basic-container__card) > .el-card__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 隐藏表格工具栏中的搜索图标按钮
|
||||
:deep(.avue-crud__search-btn) {
|
||||
display: none !important;
|
||||
|
||||
Reference in New Issue
Block a user