feat(cargo-type): 优化顶部按钮区界面和样式

- 将“添加分类”按钮文字修改为“新增”以统一风格
- 为批量导入、下载模板、批量导出和批量删除按钮添加对应 Element Plus 图标
- 在组件中引入并注册 Search、Plus、Upload、Download、Delete 图标组件
- 新增样式规则,去除 basic-container 卡片内层 el-card 的 padding,符合设计规范4.4
- 隐藏表格工具栏中的搜索图标按钮,优化界面简洁度
This commit is contained in:
2026-07-29 11:48:07 +08:00
parent 6e71c38dad
commit a1c8e7c1ce
2 changed files with 24 additions and 7 deletions

View File

@@ -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;