Files
my-mom-system/prd/销售管理-前端开发规范.md
panchengyong c28ada5050 commit content
2026-03-06 02:02:59 +08:00

27 KiB
Raw Blame History

销售管理模块 - 前端开发规范

本文档为销售管理模块的前端开发规范,配合 销售管理.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 设计规范

颜色方案

// 主色调
$primary-color: #409EFF;      // Element UI 默认主色
$success-color: #67C23A;      // 成功状态
$warning-color: #E6A23C;      // 警告状态
$danger-color: #F56C6C;       // 危险/删除
$info-color: #909399;         // 信息/禁用

// 背景色
$bg-color: #F5F7FA;           // 页面背景
$sidebar-bg: #304156;         // 侧边栏背景
$header-bg: #FFFFFF;          // 顶栏背景

// 文字色
$text-primary: #303133;       // 主要文字
$text-regular: #606266;       // 常规文字
$text-secondary: #909399;     // 次要文字
$text-placeholder: #C0C4CC;   // 占位符

字体规范

$font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
$font-size-base: 14px;
$font-size-small: 12px;
$font-size-large: 16px;
$font-size-title: 18px;

间距规范

$spacing-mini: 4px;
$spacing-small: 8px;
$spacing-base: 12px;
$spacing-medium: 16px;
$spacing-large: 24px;

1.3 布局规范

┌─────────────────────────────────────────────────────────────┐
│                     顶部导航栏 (64px)                         │
├─────────────────────────────────────────────────────────────┤
│ 左侧菜单 │                  主内容区                          │
│  (展开   │  ┌─────────────────────────────────────────┐     │
│  200px   │  │ 面包屑导航 + Tab标签                      │     │
│  收起    │  ├─────────────────────────────────────────┤     │
│  64px)   │  │ 查询区域 (可折叠)                        │     │
│          │  ├─────────────────────────────────────────┤     │
│          │  │ 工具栏                                   │     │
│          │  ├─────────────────────────────────────────┤     │
│          │  │ 数据表格                                 │     │
│          │  │                                         │     │
│          │  │                                         │     │
│          │  ├─────────────────────────────────────────┤     │
│          │  │ 分页组件                                 │     │
│          │  └─────────────────────────────────────────┘     │
└─────────────────────────────────────────────────────────────┘

2. 通用组件规范

2.1 数据表格 (el-table)

基础配置

<el-table
  :data="tableData"
  border
  stripe
  highlight-current-row
  :height="tableHeight"
  v-loading="loading"
  @selection-change="handleSelectionChange"
  @row-click="handleRowClick"
>

标准列宽度

列类型 建议宽度 说明
序号 60px 固定宽度
复选框 55px 固定宽度
单据编码 140px 如 XSDD000066
日期 110px 如 2026-01-25
状态 80px 审核/开立/退回
金额 120px 右对齐保留2位小数
数量 100px 右对齐保留2位小数
人员名称 100px 销售员、操作员等
客户名称 180px 可超长省略
物料名称 180px 可超长省略
操作 150-200px 根据按钮数量调整

分页配置

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryParams.pageNum"
  :page-sizes="[20, 50, 100, 200]"
  :page-size="queryParams.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
/>

2.2 查询表单

行内布局

<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="0">
  <el-form-item>
    <el-input v-model="queryParams.keyword" placeholder="关键词" clearable />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  </el-form-item>
</el-form>

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 弹窗组件

标准弹窗

<el-dialog
  :title="dialogTitle"
  :visible.sync="dialogVisible"
  width="800px"
  :close-on-click-modal="false"
  :destroy-on-close="true"
>
  <!-- 内容 -->
  <template #footer>
    <el-button @click="dialogVisible = false"> </el-button>
    <el-button type="primary" @click="submitForm" :loading="submitLoading"> </el-button>
  </template>
</el-dialog>

确认框

this.$confirm('确认删除?', '警告', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  // 执行删除
}).catch(() => {
  // 取消
});

2.5 表单验证规则

const rules = {
  // 必填文本
  customerName: [
    { required: true, message: '请输入客户名称', trigger: 'blur' }
  ],
  // 必填选择
  salesmanId: [
    { required: true, message: '请选择销售员', trigger: 'change' }
  ],
  // 数字验证
  quantity: [
    { required: true, message: '请输入数量', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '数量必须大于0', trigger: 'blur' }
  ],
  // 日期验证
  deliveryDate: [
    { required: true, message: '请选择交付日期', trigger: 'change' }
  ]
};

3. 数据字典

数据字典定义与后端 API 保持一致

3.1 单据状态 (status / orderStatus)

标签 颜色标签 说明
DRAFT 草稿 info 新建未提交
SUBMITTED 已提交 primary 待审批
APPROVED 已审批 success 审核通过生效
REJECTED 已驳回 warning 被退回修改
CLOSED 已关闭 danger 已完成关闭
CANCELLED 已取消 info 已作废取消
<el-tag :type="statusTagType(scope.row.status)">{{ statusLabel(scope.row.status) }}</el-tag>
// 状态映射
const statusMap = {
  'DRAFT': { label: '草稿', type: 'info' },
  'SUBMITTED': { label: '已提交', type: 'primary' },
  'APPROVED': { label: '已审批', type: 'success' },
  'REJECTED': { label: '已驳回', type: 'warning' },
  'CLOSED': { label: '已关闭', type: 'danger' },
  'CANCELLED': { label: '已取消', type: '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 字段联动规则

销售订单

  1. 选择客户 → 自动带出:收货人、电话、地址、付款条件
  2. 选择销售部门 → 销售人员下拉只显示该部门人员
  3. 选择物料 → 自动带出:物料名称、型号规格、主计量、默认单价
  4. 修改数量/单价 → 自动计算金额 amount = quantity × price
  5. 供货方式=库存供应 → 可直接发货,不需要生产计划

发货通知单

  1. 引入销售订单 → 自动带出:客户、收货人信息、物料明细
  2. 发货数量 → 校验不能超过(订单数量 - 已发数量)

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 接口基础规范

请求格式

// Content-Type: application/json
// 字符编码: UTF-8

// GET 请求 - 查询列表
axios.get('/sl/order', { params: queryParams })

// GET 请求 - 获取详情
axios.get('/sl/order/' + orderId)

// POST 请求 - 新增
axios.post('/sl/order', formData)

// PUT 请求 - 更新
axios.put('/sl/order', formData)

// DELETE 请求 - 删除(支持批量,逗号分隔)
axios.delete('/sl/order/' + orderIds)

响应格式

// 通用响应 (AjaxResult)
{
  "code": 200,           // 状态码200成功
  "msg": "操作成功",      // 提示信息
  "data": { ... }        // 返回数据
}

// 分页响应 (TableDataInfo)
{
  "total": 100,          // 总条数
  "rows": [ ... ],       // 数据列表
  "code": 200,
  "msg": "查询成功"
}

状态码说明

状态码 说明
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 订单总金额

新增订单请求体示例

{
  "orderName": "销售订单001",
  "clientId": 100,
  "orderDate": "2026-01-25",
  "deliveryDate": "2026-02-01",
  "lines": [
    {
      "itemId": 1,
      "itemCode": "P001",
      "quantity": 100,
      "unitPrice": 50.00
    }
  ]
}

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

响应示例

{
  "total": 50,
  "rows": [
    {
      "stockId": 1,
      "itemId": 100,
      "itemCode": "M001",
      "itemName": "原材料A",
      "warehouseId": 1,
      "warehouseName": "主仓库",
      "quantityOnHand": 1000,
      "quantityLocked": 100,
      "quantityAvailable": 900
    }
  ],
  "code": 200,
  "msg": "查询成功"
}

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 还原度,重点关注:

  1. 表格列宽和对齐方式
  2. 表单字段布局
  3. 按钮颜色和位置
  4. 弹窗尺寸和布局
  5. 空状态和加载状态

附录:单据编码规则

单据类型 前缀 示例 说明
销售订单 XSDD XSDD000066 6位流水号
备货订单 XSBH XSBH000007 6位流水号
销售合同 XSHT XSHT000001 6位流水号
发货通知单 FHTZ FHTZ000001 6位流水号
开票结算单 KPJSD KPJSD00001 5位流水号
退货通知单 THTZ THTZ000001 6位流水号