跳转到主要内容

产品-品牌管理

1. 文件概述

文件路径：/src/views/erp/baseinfo/brand/index.vue

文件类型：Vue 3 单文件组件（SFC）

所属模块：ERP系统 - 基础信息管理 - 品牌管理

功能定位：该组件实现了品牌信息的增、删、改、查等核心功能，是ERP系统基础信息管理的重要组成部分。

2. 技术架构

2.1 技术栈

  • 前端框架：Vue 3
  • 开发模式：Composition API
  • UI组件库：Element Plus
  • 图标库：IconPark
  • HTTP客户端：Axios（通过brandApi间接使用）

2.2 核心组件

主要依赖组件：

  • <GlobalTable>：自定义表格组件，用于数据展示和分页
  • <el-dialog>：Element Plus对话框组件，用于新增/编辑品牌信息
  • <el-form>：Element Plus表单组件，用于品牌信息的输入和验证
  • <el-button>、<el-input>、<el-table>等基础UI组件

2.3 API依赖

引入的API模块：

import brandApi from '@/api/erp/material/brandApi.js';

使用的API方法：

  • brandApi.list()：获取品牌列表数据
  • brandApi.saveData()：保存或更新品牌信息
  • brandApi.delBrand()：删除品牌信息

3. 页面结构

3.1 整体布局

<div class="main-sty">
    <!-- 顶部操作栏 -->
    <div class="con-header">...</div>
    
    <!-- 数据表格 -->
    <el-row>
        <GlobalTable>...</GlobalTable>
    </el-row>
    
    <!-- 编辑对话框 -->
    <el-dialog>...</el-dialog>
</div>

3.2 关键区域详解

3.2.1 顶部操作栏

包含以下元素：

  • 添加品牌按钮：触发新增品牌对话框
  • 搜索框：支持按品牌名称搜索
  • 帮助按钮：提供操作指引

3.2.2 数据表格

使用自定义的GlobalTable组件展示品牌信息，包含以下列：

  • 品牌名称：品牌的名称，支持排序
  • 备注：品牌的描述信息
  • 操作时间：记录的操作时间，支持排序
  • 操作：包含编辑和删除按钮

3.2.3 编辑对话框

用于新增和编辑品牌信息，包含以下字段：

  • 品牌名称：必填项，品牌的名称
  • 品牌备注：选填项，品牌的描述信息

4. 核心功能

4.1 数据展示

功能描述：以表格形式展示品牌信息，支持分页和排序。

技术实现：

  • 使用GlobalTable组件实现数据展示
  • 默认按操作时间降序排序
  • 表格高度自适应，避免页面滚动

4.2 品牌搜索

功能描述：根据品牌名称进行搜索过滤。

使用方法：

  1. 在搜索框中输入品牌名称
  2. 点击搜索按钮或按Enter键
  3. 系统会过滤显示匹配的品牌信息

技术实现：

  • loadData()函数处理搜索逻辑
  • 将搜索关键词传递给API进行过滤
  • 支持空搜索（显示所有品牌）

4.3 新增品牌

功能描述：添加新的品牌信息。

使用方法：

  1. 点击"添加品牌"按钮
  2. 在弹出的对话框中填写品牌信息
  3. 点击"提交"按钮保存

技术实现：

  • Add()函数清空表单并打开对话框
  • 表单验证确保品牌名称必填
  • 调用brandApi.saveData()保存数据

4.4 编辑品牌

功能描述：修改现有品牌信息。

使用方法：

  1. 在表格中找到要修改的品牌
  2. 点击"编辑"按钮
  3. 在弹出的对话框中修改信息
  4. 点击"提交"按钮保存

技术实现：

  • Edit(rows)函数将选中的品牌数据填充到表单
  • 调用brandApi.saveData()更新数据
  • 自动关闭对话框并刷新列表

4.5 删除品牌

功能描述：删除不需要的品牌信息。

使用方法：

  1. 在表格中找到要删除的品牌
  2. 点击"删除"按钮
  3. 在确认对话框中点击"确认"按钮

技术实现：

  • Remove(rows)函数触发删除确认对话框
  • 调用brandApi.delBrand()删除数据
  • 使用Element Plus的ElMessageBox和ElMessage提供操作反馈

5. 数据流程

5.1 数据加载流程

  1. 组件挂载时调用onMounted(loadData)
  2. loadData()构建搜索参数并调用globalTable.value.loadTable()
  3. GlobalTable组件内部调用loadTableData()方法
  4. loadTableData()调用brandApi.list()获取品牌列表数据
  5. 数据返回后更新tableData状态，表格自动刷新

5.2 数据保存流程

  1. 用户点击"添加"或"编辑"按钮，打开对话框
  2. 用户填写表单并点击"提交"
  3. 表单验证通过后调用brandApi.saveData()
  4. API返回成功后，关闭对话框并调用loadData()刷新列表
  5. 显示操作成功的消息提示

5.3 数据删除流程

  1. 用户点击"删除"按钮，弹出确认对话框
  2. 用户点击"确认"后调用brandApi.delBrand()
  3. API返回成功后，调用loadData()刷新列表
  4. 显示删除成功的消息提示

6. 状态管理

6.1 核心状态

let state = reactive({
    tableData: {records: [], total: 0}, // 表格数据
    selectRows: [], // 选中的行数据
    searchKeywords: "", // 搜索关键词
    dialogVisible: false, // 对话框显示状态
    formData: {name: ''}, // 表单数据
    rules: {name: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }]} // 表单验证规则
})

6.2 状态转换

  • 表格数据更新：loadTableData()函数更新tableData
  • 搜索状态：searchKeywords实时响应输入变化
  • 对话框状态：dialogVisible控制对话框的显示和隐藏
  • 表单数据：新增时清空，编辑时填充选中行数据

7. 表单验证

7.1 验证规则

rules: {
    name: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }]
}

7.2 验证触发

  • 品牌名称为必填项
  • 失焦时触发验证
  • 提交表单时进行完整验证

8. 用户体验

8.1 操作反馈

  • 成功提示：新增、编辑、删除操作成功后显示绿色提示
  • 错误提示：操作失败时显示红色提示
  • 确认提示：删除操作前显示确认对话框，防止误操作

8.2 界面优化

  • 表格自适应高度：避免页面滚动，提升浏览体验
  • 搜索即时响应：支持回车搜索和点击搜索按钮
  • 表单自动填充：编辑时自动填充现有数据
  • 加载状态提示：数据加载过程中显示加载状态

9. 代码优化建议

9.1 表单验证规则修正

问题：表单验证规则中错误地使用了"供应商名称"的提示信息，应改为"品牌名称"。

建议修改：

rules: {
    name: [{ required: true, message: '请输入品牌名称', trigger: 'blur' }]
}

9.2 搜索逻辑简化

问题：loadData()函数中的搜索逻辑可以简化。

建议修改：

function loadData() {
    var data = {
        search: state.searchKeywords || ""
    };
    globalTable.value.loadTable(data);
}

9.3 变量命名统一

问题：API调用返回的处理函数中，变量命名不一致。

建议修改：

brandApi.delBrand({"id": rows.id.toString()}).then((response) => {
    ElMessage.success('删除成功');
    loadData();
});

9.4 注释完善

建议：为关键函数和复杂逻辑添加详细注释，提升代码可维护性。

10. 使用说明

10.1 基本操作流程

  1. 查看品牌列表：进入页面后自动加载所有品牌信息
  2. 搜索品牌：在搜索框中输入名称，点击搜索按钮
  3. 新增品牌：点击"添加品牌"按钮，填写信息后提交
  4. 编辑品牌：找到要修改的品牌，点击"编辑"按钮，修改后提交
  5. 删除品牌：找到要删除的品牌，点击"删除"按钮，确认后删除

10.2 注意事项

  • 品牌名称为必填项，不能为空
  • 删除操作不可逆，请谨慎操作
  • 搜索功能仅支持按品牌名称搜索
  • 页面会自动保存搜索状态和分页信息

11. 总结

品牌管理页面是ERP系统基础信息管理的重要模块，实现了品牌信息的完整生命周期管理。页面采用Vue 3 Composition API开发，使用Element Plus组件库构建用户界面，通过RESTful API与后端进行数据交互。

页面具有良好的用户体验，包括直观的操作界面、及时的操作反馈和完善的表单验证。代码结构清晰，功能模块化，便于维护和扩展。

通过合理的状态管理和数据流程设计，页面实现了高效的数据加载和更新，为用户提供了流畅的操作体验。

回到顶部