# quotation-client **Repository Path**: liujin2002/quotation-client ## Basic Information - **Project Name**: quotation-client - **Description**: 核价vue前端。。。。。。。。。。。。。。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-01-07 - **Last Updated**: 2025-09-01 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Base-RBAC 后台管理系统 一个基于 Vue 3 + TypeScript + Vite + Element Plus 的后台管理系统。 ## 技术栈 - **前端框架：** Vue 3.5.12 - **开发语言：** TypeScript 5.6.2 - **构建工具：** Vite 5.4.9 - **UI 框架：** Element Plus 2.8.6 - **状态管理：** Pinia 2.2.5 + pinia-plugin-persistedstate(状态持久化) - **路由管理：** Vue Router 4.4.5 - **HTTP 请求：** Axios 1.7.7 - **图表库：** ECharts 5.5.1 - **样式处理：** SCSS - **图标：** @element-plus/icons-vue ## 项目结构 src/ ├── api/ # API 接口定义 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── directive/ # 自定义指令 ├── hooks/ # 组合式函数 ├── http/ # Axios 配置和封装 ├── layout/ # 布局组件 ├── store/ # Pinia 状态管理 ├── views/ # 页面组件 └── utils/ # 工具函数 ## 功能模块 ### 1. 权限管理 - 基于 RBAC 的权限控制 - 自定义权限指令 v-permission - 动态路由生成 - 按钮级别的权限控制 ### 2. 用户管理 - 用户列表展示 - 用户添加/编辑/删除 - 角色分配 - 密码重置 ### 3. 角色管理 - 角色列表 - 角色添加/编辑/删除 - 权限分配 ### 4. 菜单管理 - 菜单树形展示 - 菜单添加/编辑/删除 - 权限配置 ### 5. 日志管理 - 操作日志记录 - 日志查询 - 日志详情查看 - 日志清理 ### 6. 个人中心 - 个人信息展示 - 密码修改 - 手机号/邮箱绑定 ### 7. 首页仪表盘 - 数据概览 - 交易趋势图表 - 实时监控 - 待办事项 ### 8. 物料分类管理 - 物料分类树形展示 - 分类的增删改查 - 支持多级分类管理 - 分类数据联动展示 ### 9. 物料档案管理 - 物料基础信息的增删改查 - 支持按物料编码、名称、品牌、生产厂家等条件查询 - 左侧分类树联动筛选 - 物料类型树形选择 - 计量单位下拉选择(显示单位名称和符号) - 表格固定高度，自适应窗口大小 - 分页功能 特点： 1. 布局结构 - 左侧分类树占比20% - 右侧内容区占比80% - 搜索区域使用卡片式布局 - 表格区域自适应高度 2. 功能特色 - 分类树联动：点击分类自动筛选对应物料 - 树形选择：物料类型使用树形选择器 - 单位选择：下拉框同时展示单位名称和符号 - 表单布局：新增/编辑弹框采用两列布局 - 数字输入：采购单价使用数字输入框，支持精确到小数点后两位 3. 交互优化 - 表格固定右侧操作列 - 删除操作二次确认 - 必填字段校验 - 重置功能保留当前分类 - 窗口大小变化自适应 ### 10. 工序档案管理 - 工序基础信息的增删改查 - 支持按工序编码、名称、状态条件查询 - 工序状态管理(启用/禁用) - 工序成本精确到小数点后两位 - 表格固定高度，自适应窗口大小 - 分页功能 特点： 1. 布局结构 - 顶部搜索区使用卡片式布局 - 表格区域自适应高度 - 状态列使用标签展示 2. 功能特色 - 状态管理：使用标签区分启用/禁用状态 - 成本管理：使用数字输入框，支持精确到小数点后两位 - 表单验证：必填字段包括工序编码、名称、成本 - 描述信息：使用文本域，支持多行输入 3. 交互优化 - 表格固定右侧操作列 - 删除操作二次确认 - 必填字段校验 - 状态切换使用单选按钮组 - 窗口大小变化自适应 - 表格溢出文字提示 4. 数据展示 - 序号列：自动计算序号 - 状态列：使用不同颜色标签区分 - 成本列：统一显示金额单位 - 描述列：超长文字自动省略并提示 ### 11. 颜色档案管理 - 颜色基础信息的增删改查 - 支持按颜色编码、名称、状态条件查询 - 颜色状态管理(启用/禁用) - 表格固定高度，自适应窗口大小 - 分页功能 特点： 1. 布局结构 - 顶部搜索区使用卡片式布局 - 表格区域自适应高度 - 状态列使用标签展示 2. 功能特色 - 状态管理：使用标签区分启用/禁用状态 - 表单验证：必填字段包括颜色编码、名称 - 描述信息：使用文本域，支持多行输入 3. 交互优化 - 表格固定右侧操作列 - 删除操作二次确认 - 必填字段校验 - 状态切换使用单选按钮组 - 窗口大小变化自适应 - 表格溢出文字提示 4. 数据展示 - 序号列：自动计算序号 - 状态列：使用不同颜色标签区分 - 描述列：超长文字自动省略并提示 ### 12. BOM管理 - BOM基础信息的增删改查 - 支持按BOM编码、名称、状态条件查询 - BOM物料清单管理 - BOM工序清单管理 - 自动计算成本价格 - 表格固定高度，自适应窗口大小 - 分页功能 特点： 1. 布局结构 - 主页面采用列表/表单切换式布局 - 表单页面采用选项卡(tabs)布局 - 物料和工序清单分开管理 - 价格信息实时计算展示 2. 功能特色 - 物料选择：支持多选、分类树筛选 - 工序选择：支持多选、状态筛选 - 数量修改：自动计算物料成本 - 价格计算：实时计算物料总价、工序总价和总成本 - 状态管理：使用标签区分启用/禁用状态 - BOM结构查看：树形展示BOM组成结构 - 支持多级BOM展示 - 显示每级BOM的编码、名称和价格 - 默认展开所有节点 - 自定义树节点样式 - 价格信息突出显示 3. 交互优化 - 表格固定右侧操作列 - 删除操作二次确认 - 必填字段校验 - 状态切换使用单选按钮组 - 窗口大小变化自适应 - 表格溢出文字提示 - BOM结构弹窗大小适中 - 树形层级缩进合理 - 价格使用醒目颜色标识 4. 数据结构 - BOM基础信息 - 物料清单：包含物料信息、数量、单价、成本 - 工序清单：包含工序信息、成本 - 价格信息：物料总价、工序总价、总成本 - BOM结构： - 支持无限层级的树形结构 - 每个节点包含基础信息和价格 - 父节点价格自动汇总子节点 5. 组件复用 - 物料选择弹框组件 - 工序选择弹框组件 - 系统对话框组件 - 表单验证规则 - BOM结构查看弹框组件 6. BOM报表查看功能 - 通过BOM编码快速查看BOM详细信息 - 左右分栏布局展示数据 - 支持一键重置 a. 基本信息展示 - BOM编码、名称 - 规格、品牌、生产厂家 - 材质、米重、面积、总重、厚度等技术参数 - 状态信息（启用/禁用） - 成本信息（物料总成本、工序总成本、总成本） b. 物料清单展示 - 序号、物料编码、名称 - 规格、数量、单位 - 单价和成本信息 - 表格形式展示，支持横向滚动 c. 工序清单展示 - 序号、工序编码、名称 - 工序成本 - 工序描述 - 表格形式展示，支持横向滚动 d. BOM结构展示 - 树形结构展示BOM组成 - 显示BOM编码、名称 - 显示各层级的数量 - 显示单价和总价信息 - 使用标签突出显示数字信息 - 默认展开所有层级 e. 界面特点 - 搜索区域：简洁的BOM编码搜索 - 左侧详情区：展示BOM的所有明细信息 - 右侧结构区：展示BOM的层级结构 - 自适应布局：支持窗口大小变化 - 加载状态：独立的加载效果 - 美观的数据展示： * 使用描述列表展示基本信息 * 使用彩色标签区分状态 * 使用不同颜色标识价格信息 * 统一的表格样式 * 合理的间距和留白 f. 交互优化 - 输入验证：BOM编码必填校验 - 重置功能：一键清空所有数据 - 加载状态：详情和结构独立的加载效果 - 数据为空时隐藏内容区域 - 价格金额统一格式化 - 表格内容溢出处理 - 树形结构层级缩进合理 g. 技术实现 - 使用 Vue 3 + TypeScript 开发 - Element Plus 组件库 - 组合式 API 的状态管理 - 响应式布局设计 - SCSS 样式处理 - 组件化开发 - 类型安全的数据处理 ### 13. 报价单管理 - 报价单基础信息的增删改查 - 支持按报价单号、标题条件查询 - 报价单明细管理（选择BOM） - 自动计算总金额 - 状态管理（草稿/已提交/已确认） - 表格固定高度，自适应窗口大小 - 分页功能 特点： 1. 布局结构 - 主页面采用列表/表单切换式布局 - 表单页面采用卡片式布局 - BOM选择支持多选 - 价格信息实时计算展示 2. 功能特色 - BOM选择：支持多选、自动带出价格 - 数量修改：自动计算总价 - 价格计算：实时计算单项总价和报价单总金额 - 状态管理：使用标签区分不同状态 - 草稿：灰色标签 - 已提交：黄色标签 - 已确认：绿色标签 - 有效期管理：日期选择器 3. 交互优化 - 表格固定右侧操作列 - 删除操作二次确认 - 必填字段校验 - 状态切换使用下拉选择 - 窗口大小变化自适应 - 表格溢出文字提示 - 价格使用醒目颜色标识 4. 数据结构 - 报价单基础信息 - 报价单号 - 报价标题 - 有效期 - 状态 - 总金额 - 备注 - 报价明细： - BOM信息（编码、名称、描述） - 数量 - 单价（来自BOM总价） - 总价（数量×单价） 5. 组件复用 - BOM选择弹框组件 - 系统对话框组件 - 表单验证规则 ### 14. 客户档案管理 - 客户基础信息的增删改查 - 支持按公司名称、公司代码、联系人条件查询 - 表格固定高度，自适应窗口大小 - 分页功能 特点： 1. 布局结构 - 顶部搜索区使用卡片式布局 - 表格区域自适应高度 - 分页区域靠右对齐 - 操作列固定在右侧 2. 功能特色 - 表单验证：必填字段包括公司代码、公司名称、联系人、联系电话 - 地址和备注：支持长文本输入，超出显示省略号 - 表单布局：新增/编辑弹框采用分组布局 * 两列布局：公司信息、联系信息 * 单列布局：地址、备注等长文本信息 - 弹框尺寸：统一设置为 700x300 3. 交互优化 - 表格固定右侧操作列 - 删除操作二次确认 - 必填字段校验 - 窗口大小变化自适应 - 表格溢出文字提示 - 关闭弹框时重置表单 4. 数据展示 - 序号列：自动计算序号 - 长文本列：地址和备注支持悬浮显示完整内容 - 表格布局：合理的列宽分配 - 分页设置：默认每页 10 条记录 5. 表单布局 - 分组设计：使用 form-row 类进行表单分组 - 间距控制：统一的间距设置 * 表单项间距：20px * 分组间距：20px * 表单内边距：20px - 响应式： * 输入框宽度自适应 * 标签固定宽度 80px * 两列均匀分布 6. 代码组织 - 使用 TypeScript 类型定义 - 组件化开发 - 统一的状态管理 - 响应式设计 - 代码注释完善 ## 项目特点 1. **TypeScript 支持** - 完整的类型定义 - 接口请求响应类型定义 - 组件 Props 类型检查 2. **组件封装** - SysDialog：统一对话框组件 - SelectChecked：多选下拉组件 - ElIconPicker：图标选择器 - TreeSelect：树形选择器 3. **Hooks 封装** - useDialog：统一管理对话框状态 - useInstance：获取全局实例 4. **HTTP 请求封装** - 统一响应处理 - 请求拦截器 - 响应拦截器 - Token 处理 5. **样式特点** - SCSS 预处理器 - 变量统一管理 - 过渡动画 - 响应式设计 ## 开发注意事项 1. **类型定义** - 所有的接口请求参数和响应数据都需要定义类型 - 组件的 props 需要明确类型定义 2. **状态管理** - 用户信息、权限等全局状态使用 Pinia 管理 - 使用 pinia-plugin-persistedstate 进行持久化存储 3. **权限控制** - 路由权限：动态路由匹配 - 按钮权限：使用 v-permission 指令 - 接口权限：请求头携带 token 4. **组件开发** - 保持组件的单一职责 - 使用组合式 API - Props 类型检查 - 事件命名规范 5. **样式规范** - 使用 BEM 命名规范 - 避免全局样式污染 - 使用 CSS 变量统一主题 ## 运行项目 - 安装依赖 - pnpm install - 开发环境运行 - pnpm run dev - 生产环境打包 - pnpm run build