销售管理模块 - 前端开发规范
本文档为销售管理模块的前端开发规范,配合 销售管理.md PRD 文档使用,提供完整的技术实现细节。
1. 技术框架规范
1.1 技术栈
| 技术 |
版本 |
用途 |
| Vue.js |
2.x |
前端框架 |
| Element UI |
2.15.x |
UI 组件库 |
| Vue Router |
3.x |
路由管理 |
| Vuex |
3.x |
状态管理 |
| Axios |
0.21.x |
HTTP 请求 |
| amfe-flexible |
- |
移动端适配 |
1.2 设计规范
颜色方案
字体规范
间距规范
1.3 布局规范
2. 通用组件规范
2.1 数据表格 (el-table)
基础配置
标准列宽度
| 列类型 |
建议宽度 |
说明 |
| 序号 |
60px |
固定宽度 |
| 复选框 |
55px |
固定宽度 |
| 单据编码 |
140px |
如 XSDD000066 |
| 日期 |
110px |
如 2026-01-25 |
| 状态 |
80px |
审核/开立/退回 |
| 金额 |
120px |
右对齐,保留2位小数 |
| 数量 |
100px |
右对齐,保留2位小数 |
| 人员名称 |
100px |
销售员、操作员等 |
| 客户名称 |
180px |
可超长省略 |
| 物料名称 |
180px |
可超长省略 |
| 操作 |
150-200px |
根据按钮数量调整 |
分页配置
2.2 查询表单
行内布局
2.3 工具栏按钮
按钮类型规范
| 操作类型 |
Element 类型 |
图标 |
说明 |
| 新增 |
primary |
el-icon-plus |
蓝色主按钮 |
| 编辑 |
success |
el-icon-edit |
绿色 |
| 删除 |
danger |
el-icon-delete |
红色 |
| 导出 |
warning |
el-icon-download |
橙色 |
| 导入 |
- |
el-icon-upload2 |
默认 |
| 查询所有 |
- |
el-icon-search |
默认 |
| 审核 |
primary |
el-icon-check |
蓝色 |
| 反审核 |
warning |
el-icon-back |
橙色 |
| 打印 |
- |
el-icon-printer |
默认 |
2.4 弹窗组件
标准弹窗
确认框
2.5 表单验证规则
3. 数据字典
数据字典定义与后端 API 保持一致
3.1 单据状态 (status / orderStatus)
| 值 |
标签 |
颜色标签 |
说明 |
| DRAFT |
草稿 |
info |
新建未提交 |
| SUBMITTED |
已提交 |
primary |
待审批 |
| APPROVED |
已审批 |
success |
审核通过生效 |
| REJECTED |
已驳回 |
warning |
被退回修改 |
| CLOSED |
已关闭 |
danger |
已完成关闭 |
| CANCELLED |
已取消 |
info |
已作废取消 |
3.2 启用状态 (enableFlag)
| 值 |
标签 |
说明 |
| Y |
启用 |
正常使用 |
| N |
停用 |
禁用状态 |
3.3 物料/产品标识 (itemOrProduct)
| 值 |
标签 |
说明 |
| ITEM |
物料 |
原材料、零部件 |
| PRODUCT |
产品 |
成品、半成品 |
3.4 销售类型 (salesType)
| 值 |
标签 |
说明 |
| factory |
工厂订单 |
需要生产的订单 |
| stock |
库存供应 |
直接从库存发货 |
| purchase |
买进卖出 |
采购后直接销售 |
3.5 供货方式 (supplyMode)
| 值 |
标签 |
说明 |
| plan |
计划生产 |
需要先做生产计划 |
| stock |
库存供应 |
直接从现有库存出货 |
3.6 交期状态 (deliveryStatus)
| 值 |
标签 |
| estimate |
预计 |
| confirm |
确认 |
3.7 客户级别 (clientLevel)
| 值 |
标签 |
| A |
A级客户 |
| B |
B级客户 |
| C |
C级客户 |
| D |
D级客户 |
3.8 客户类型 (clientType)
| 值 |
标签 |
| ENTERPRISE |
企业客户 |
| PERSONAL |
个人客户 |
| DISTRIBUTOR |
经销商 |
| AGENT |
代理商 |
4. 页面字段详细规范
4.1 客户档案 - 表单字段
| 字段名 |
字段key |
类型 |
必填 |
规则/说明 |
| 客户名称 |
customerName |
input |
✅ |
最大100字符 |
| 客户别名 |
customerAlias |
input |
- |
最大50字符 |
| 简称 |
shortName |
input |
- |
最大20字符 |
| 所属省/市 |
region |
cascader |
- |
省市级联选择 |
| 公司地址 |
address |
input |
- |
最大200字符 |
| 邮编 |
zipCode |
input |
- |
6位数字 |
| 电话 |
phone |
input |
- |
座机/手机格式 |
| 信用等级 |
creditLevel |
select |
- |
A/B/C/D |
| 信用额度 |
creditLimit |
number |
- |
≥0,保留2位小数 |
| 客户分类 |
category |
select |
- |
下拉选择 |
| 状态 |
status |
radio |
- |
正常(1)/停用(0) |
| 备注 |
remark |
textarea |
- |
最大500字符 |
| 开户行 |
bankName |
input |
- |
最大100字符 |
| 银行账号 |
bankAccount |
input |
- |
最大30字符 |
| 税号 |
taxNumber |
input |
- |
18-20位 |
| 地址电话 |
bankAddress |
input |
- |
开票用 |
| 业务联系人 |
bizContact |
input |
- |
|
| 业务手机号 |
bizPhone |
input |
- |
11位手机号 |
| 财务联系人 |
finContact |
input |
- |
|
| 财务手机号 |
finPhone |
input |
- |
11位手机号 |
4.2 销售订单 - 表单字段
基础信息区
| 字段名 |
字段key |
类型 |
必填 |
可编辑 |
规则/说明 |
| 单据编码 |
docCode |
display |
- |
❌ |
系统自动生成:XSDD + 6位流水 |
| 单据日期 |
docDate |
date |
✅ |
✅ |
默认当天 |
| 单据状态 |
docStatus |
display |
- |
❌ |
0开立/1审核/2退回 |
| 单据类型 |
docType |
select |
- |
❌ |
业务订单 |
| 业务类型 |
bizType |
select |
✅ |
❌ |
销售订单 |
| 业务状态 |
bizStatus |
select |
- |
❌ |
正常/挂起 |
| 销售部门 |
deptId |
tree-select |
✅ |
✅ |
部门树选择 |
| 销售人员 |
salesmanId |
select |
✅ |
✅ |
部门下人员 |
| 操作员 |
operator |
display |
- |
❌ |
当前用户 |
| 审核员 |
auditor |
display |
- |
❌ |
审核时记录 |
| 审核日期 |
auditDate |
display |
- |
❌ |
审核时记录 |
| 销售类型 |
salesType |
select |
✅ |
✅ |
工厂订单/库存供应/买进卖出 |
| 供货方式 |
supplyMode |
select |
✅ |
✅ |
计划生产/库存供应 |
| 客户名称 |
customerId |
refer |
✅ |
✅ |
点击选择客户弹窗 |
| 合同号 |
contractNo |
input |
- |
✅ |
关联销售合同,可上传PDF |
| 付款条件 |
paymentTerms |
input |
- |
✅ |
如:款到发货 |
| 交付日期 |
deliveryDate |
date |
✅ |
✅ |
|
| 交期状态 |
deliveryStatus |
radio |
✅ |
✅ |
预计/确认 |
| 收货人 |
receiver |
input |
- |
✅ |
|
| 电话 |
receiverPhone |
input |
- |
✅ |
|
| 地址 |
receiverAddress |
textarea |
- |
✅ |
|
| 目的国家 |
destCountry |
input |
- |
✅ |
|
| 备注信息 |
remark |
textarea |
- |
✅ |
|
物料明细表
| 字段名 |
字段key |
类型 |
必填 |
说明 |
| 序号 |
index |
display |
- |
自动编号 |
| 物料编码 |
materialCode |
refer |
✅ |
点击选择物料 |
| 物料名称 |
materialName |
display |
- |
选择后自动带出 |
| 型号规格 |
spec |
display |
- |
选择后自动带出 |
| 主计量 |
unit |
select |
- |
选择后自动带出,可修改 |
| 数量 |
quantity |
number |
✅ |
>0,保留2位小数 |
| 单价 |
price |
number |
- |
≥0,保留2位小数 |
| 金额 |
amount |
display |
- |
=数量×单价,自动计算 |
| 质量要求 |
qualityReq |
input |
- |
|
| 备注 |
remark |
input |
- |
|
4.3 发货通知单 - 表单字段
基础信息区
| 字段名 |
字段key |
类型 |
必填 |
说明 |
| 单据编码 |
docCode |
display |
- |
FHTZ + 6位流水 |
| 单据日期 |
docDate |
date |
✅ |
默认当天 |
| 单据状态 |
docStatus |
display |
- |
|
| 业务类型 |
bizType |
select |
✅ |
发货通知单 |
| 仓库 |
warehouseId |
select |
✅ |
出库仓库 |
| 客户名称 |
customerId |
refer |
✅ |
|
| 收货人 |
receiver |
input |
- |
可从客户带出 |
| 收货电话 |
receiverPhone |
input |
- |
|
| 收货地址 |
receiverAddress |
textarea |
- |
|
| 运费 |
freight |
number |
- |
≥0 |
| 物流公司 |
logisticsCompany |
input |
- |
|
| 物流单号 |
logisticsNo |
input |
- |
|
物料明细表
| 字段名 |
字段key |
类型 |
必填 |
说明 |
| 销售订单号 |
orderCode |
display |
- |
引入时带出 |
| 物料编码 |
materialCode |
display/refer |
✅ |
引入或选择 |
| 物料名称 |
materialName |
display |
- |
|
| 订单数量 |
orderQty |
display |
- |
原订单数量 |
| 已发数量 |
deliveredQty |
display |
- |
累计已发 |
| 发货数量 |
deliveryQty |
number |
✅ |
≤(订单数量-已发数量) |
5. 业务逻辑规范
5.1 单据状态流转
5.2 字段联动规则
销售订单
- 选择客户 → 自动带出:收货人、电话、地址、付款条件
- 选择销售部门 → 销售人员下拉只显示该部门人员
- 选择物料 → 自动带出:物料名称、型号规格、主计量、默认单价
- 修改数量/单价 → 自动计算金额
amount = quantity × price
- 供货方式=库存供应 → 可直接发货,不需要生产计划
发货通知单
- 引入销售订单 → 自动带出:客户、收货人信息、物料明细
- 发货数量 → 校验不能超过(订单数量 - 已发数量)
5.3 权限控制点
| 功能点 |
权限标识 |
说明 |
| 销售订单-查看 |
sales:order:view |
查看列表和详情 |
| 销售订单-新增 |
sales:order:add |
新增按钮 |
| 销售订单-编辑 |
sales:order:edit |
编辑按钮 |
| 销售订单-删除 |
sales:order:delete |
删除按钮 |
| 销售订单-审核 |
sales:order:audit |
审核/反审核按钮 |
| 销售订单-导出 |
sales:order:export |
导出按钮 |
| 客户档案-查看 |
sales:customer:view |
|
| 客户档案-编辑 |
sales:customer:edit |
修改/新增 |
| 客户档案-删除 |
sales:customer:delete |
|
| 客户档案-导入 |
sales:customer:import |
|
| 客户档案-导出 |
sales:customer:export |
|
5.4 操作按钮状态规则
销售订单列表页
| 按钮 |
可用条件 |
| 新增 |
始终可用 |
| 删除 |
选中行 && 状态=开立 |
| 审核 |
选中行 && 状态=开立 |
| 反审核 |
选中行 && 状态=审核 && 无下游单据 |
| 导出 |
有数据时可用 |
销售订单详情/编辑页
| 按钮 |
可用条件 |
| 保存 |
状态=开立/退回 |
| 审核 |
状态=开立 && 有物料明细 |
| 反审核 |
状态=审核 && 无下游单据 |
| 编辑 |
状态!=审核 |
| 引入 |
已选择客户 |
| 新增物料 |
状态=开立/退回 |
6. API 接口规范
Base URL: https://demo.rsun.vip/prod-api
以下接口路径基于 Swagger API 文档 v3.4.0
6.1 接口基础规范
请求格式
响应格式
状态码说明
| 状态码 |
说明 |
| 200 |
成功 |
| 401 |
未授权 |
| 403 |
禁止访问 |
| 404 |
资源不存在 |
| 500 |
服务器内部错误 |
6.2 客户档案接口 (/sl/client)
| 接口 |
方法 |
路径 |
说明 |
| 分页列表 |
GET |
/sl/client |
查询客户列表 |
| 详情 |
GET |
/sl/client/{clientId} |
获取客户详情 |
| 新增 |
POST |
/sl/client |
新增客户 |
| 更新 |
PUT |
/sl/client |
更新客户 |
| 删除 |
DELETE |
/sl/client/{clientIds} |
批量删除 |
查询参数
| 参数名 |
类型 |
必填 |
说明 |
| clientCode |
string |
否 |
客户编码 |
| clientName |
string |
否 |
客户名称 |
| clientNick |
string |
否 |
客户简称 |
| pageNum |
integer |
否 |
页码,默认1 |
| pageSize |
integer |
否 |
每页条数,默认10 |
响应数据模型 (SlClient)
| 字段名 |
类型 |
说明 |
| clientId |
integer |
客户ID |
| clientCode |
string |
客户编码 |
| clientName |
string |
客户名称 |
| clientNick |
string |
客户简称 |
| clientEn |
string |
英文名称 |
| clientDes |
string |
客户描述 |
| clientLogo |
string |
客户Logo |
| clientType |
string |
客户类型 |
| clientLevel |
string |
客户级别 |
| clientSource |
string |
客户来源 |
| clientIndustry |
string |
所属行业 |
| address |
string |
地址 |
| website |
string |
网址 |
| email |
string |
邮箱 |
| tel |
string |
电话 |
| contact1 |
string |
联系人1 |
| contact1Tel |
string |
联系人1电话 |
| contact2 |
string |
联系人2 |
| contact2Tel |
string |
联系人2电话 |
| creditCode |
string |
信用代码 |
| enableFlag |
string |
启用状态(Y/N) |
6.3 销售订单接口 (/sl/order)
| 接口 |
方法 |
路径 |
说明 |
| 分页列表 |
GET |
/sl/order |
查询订单列表 |
| 详情 |
GET |
/sl/order/{orderId} |
获取订单详情 |
| 新增 |
POST |
/sl/order |
新增订单 |
| 更新 |
PUT |
/sl/order |
更新订单 |
| 删除 |
DELETE |
/sl/order/{orderIds} |
批量删除 |
查询参数
| 参数名 |
类型 |
必填 |
说明 |
| orderCode |
string |
否 |
订单编号 |
| clientId |
integer |
否 |
客户ID |
| orderStatus |
string |
否 |
订单状态 |
| pageNum |
integer |
否 |
页码 |
| pageSize |
integer |
否 |
每页条数 |
响应数据模型 (SlOrderMaster)
| 字段名 |
类型 |
说明 |
| orderId |
integer |
订单ID |
| orderCode |
string |
订单编号 |
| orderName |
string |
订单名称 |
| clientId |
integer |
客户ID |
| clientCode |
string |
客户编码 |
| clientName |
string |
客户名称 |
| orderDate |
string |
订单日期 |
| deliveryDate |
string |
交货日期 |
| orderStatus |
string |
订单状态 |
| totalAmount |
number |
订单总金额 |
新增订单请求体示例
6.4 发货单接口 (/sl/deliver)
| 接口 |
方法 |
路径 |
说明 |
| 分页列表 |
GET |
/sl/deliver |
查询发货单列表 |
| 详情 |
GET |
/sl/deliver/{deliverId} |
获取发货单详情 |
| 新增 |
POST |
/sl/deliver |
新增发货单 |
| 更新 |
PUT |
/sl/deliver |
更新发货单 |
| 删除 |
DELETE |
/sl/deliver/{deliverIds} |
批量删除 |
响应数据模型 (SlDeliverMaster)
| 字段名 |
类型 |
说明 |
| deliverId |
integer |
发货单ID |
| deliverCode |
string |
发货单编号 |
| deliverName |
string |
发货单名称 |
| orderId |
integer |
销售订单ID |
| clientId |
integer |
客户ID |
| clientName |
string |
客户名称 |
| deliverDate |
string |
发货日期 |
| warehouseId |
integer |
发货仓库ID |
| status |
string |
状态 |
6.5 退货单接口 (/sl/saleback)
| 接口 |
方法 |
路径 |
说明 |
| 分页列表 |
GET |
/sl/saleback |
查询退货单列表 |
| 新增 |
POST |
/sl/saleback |
新增退货单 |
| 更新 |
PUT |
/sl/saleback |
更新退货单 |
| 删除 |
DELETE |
/sl/saleback/{salebackIds} |
批量删除 |
响应数据模型 (SlSalebackMaster)
| 字段名 |
类型 |
说明 |
| salebackId |
integer |
退货单ID |
| salebackCode |
string |
退货单编号 |
| orderId |
integer |
原销售订单ID |
| clientId |
integer |
客户ID |
| salebackDate |
string |
退货日期 |
| reason |
string |
退货原因 |
| status |
string |
状态 |
6.6 销售发票接口 (/sl/invoice)
| 接口 |
方法 |
路径 |
说明 |
| 分页列表 |
GET |
/sl/invoice |
查询发票列表 |
| 新增 |
POST |
/sl/invoice |
新增发票 |
| 更新 |
PUT |
/sl/invoice |
更新发票 |
| 删除 |
DELETE |
/sl/invoice/{invoiceIds} |
批量删除 |
6.7 物料主数据接口 (/md/item)
| 接口 |
方法 |
路径 |
说明 |
| 分页列表 |
GET |
/md/item |
查询物料列表 |
| 详情 |
GET |
/md/item/{itemId} |
获取物料详情 |
| 新增 |
POST |
/md/item |
新增物料 |
| 更新 |
PUT |
/md/item |
更新物料 |
| 删除 |
DELETE |
/md/item/{itemIds} |
批量删除 |
查询参数
| 参数名 |
类型 |
必填 |
说明 |
| itemCode |
string |
否 |
物料编码 |
| itemName |
string |
否 |
物料名称 |
| specification |
string |
否 |
规格型号 |
| itemTypeId |
integer |
否 |
物料分类ID |
| itemOrProduct |
string |
否 |
物料/产品标识 |
响应数据模型 (MdItem)
| 字段名 |
类型 |
说明 |
| itemId |
integer |
物料ID |
| itemCode |
string |
物料编码 |
| itemName |
string |
物料名称 |
| specification |
string |
规格型号 |
| unitOfMeasure |
string |
计量单位 |
| itemTypeId |
integer |
物料分类ID |
| itemTypeName |
string |
物料分类名称 |
| itemOrProduct |
string |
物料/产品 (ITEM/PRODUCT) |
| safeStockFlag |
string |
是否启用安全库存 |
| minStock |
number |
最小库存 |
| maxStock |
number |
最大库存 |
| enableFlag |
string |
启用状态(Y/N) |
| remark |
string |
备注 |
6.8 仓库接口 (/wm/warehouse)
| 接口 |
方法 |
路径 |
说明 |
| 分页列表 |
GET |
/wm/warehouse |
查询仓库列表 |
| 新增 |
POST |
/wm/warehouse |
新增仓库 |
| 更新 |
PUT |
/wm/warehouse |
更新仓库 |
| 删除 |
DELETE |
/wm/warehouse/{warehouseIds} |
批量删除 |
6.9 库存查询接口 (/wm/stock)
| 接口 |
方法 |
路径 |
说明 |
| 库存列表 |
GET |
/wm/stock |
查询库存列表 |
查询参数
| 参数名 |
类型 |
必填 |
说明 |
| itemId |
integer |
否 |
物料ID |
| itemCode |
string |
否 |
物料编码 |
| itemName |
string |
否 |
物料名称 |
| warehouseId |
integer |
否 |
仓库ID |
响应示例
6.10 模块接口路径汇总
| 模块 |
路径前缀 |
说明 |
| 销售模块 |
/sl |
Sales |
| 仓库模块 |
/wm |
Warehouse Management |
| 物料模块 |
/md |
Master Data |
| 采购模块 |
/po |
Procurement |
| 生产模块 |
/pd |
Production |
| 计划模块 |
/pl |
Planning |
| 研发模块 |
/rd |
Research & Development |
| 委外模块 |
/pu |
Outsourcing |
| 财务模块 |
/fd |
Finance |
7. 组件封装建议
7.1 建议封装的公共组件
| 组件名 |
说明 |
使用场景 |
| CustomerSelect |
客户选择器 |
所有需要选择客户的地方 |
| MaterialSelect |
物料选择器 |
订单明细、发货明细等 |
| DeptTreeSelect |
部门树选择 |
选择部门 |
| UserSelect |
人员选择器 |
按部门筛选人员 |
| DocStatus |
单据状态标签 |
列表状态显示 |
| AmountInput |
金额输入框 |
数量、单价、金额输入 |
| DateRangePicker |
日期范围选择 |
查询条件 |
| ImportDialog |
导入弹窗 |
文件上传导入 |
| PrintButton |
打印按钮 |
单据打印 |
7.2 页面模板
建议基于 RuoYi-Vue 等开源框架的 CRUD 模板进行开发,保持代码风格一致。
8. 截图与原型参考
所有页面截图存放在 screenshot/ 目录下,命名规则:销售管理-{页面名}-{状态/操作}.png
开发时请参照截图实现 UI 还原度,重点关注:
- 表格列宽和对齐方式
- 表单字段布局
- 按钮颜色和位置
- 弹窗尺寸和布局
- 空状态和加载状态
附录:单据编码规则
| 单据类型 |
前缀 |
示例 |
说明 |
| 销售订单 |
XSDD |
XSDD000066 |
6位流水号 |
| 备货订单 |
XSBH |
XSBH000007 |
6位流水号 |
| 销售合同 |
XSHT |
XSHT000001 |
6位流水号 |
| 发货通知单 |
FHTZ |
FHTZ000001 |
6位流水号 |
| 开票结算单 |
KPJSD |
KPJSD00001 |
5位流水号 |
| 退货通知单 |
THTZ |
THTZ000001 |
6位流水号 |