Files
my-mom-system/prd/生产计划-前端开发规范.md

525 lines
13 KiB
Markdown
Raw Permalink Normal View History

2026-03-06 02:02:59 +08:00
# 生产计划模块 - 前端开发规范
> 本文档为生产计划模块的前端开发技术规范包含UI组件规范、字段验证、API接口等内容。
---
## 1. 技术栈
| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 2.x | 前端框架 |
| Element UI | 2.x | UI组件库 |
| Axios | - | HTTP请求库 |
| Vue Router | 3.x | 路由管理 |
| Vuex | 3.x | 状态管理 |
---
## 2. 设计规范
### 2.1 颜色规范
| 用途 | 色值 | 说明 |
|------|------|------|
| 主色调 | #409EFF | 按钮、链接、选中状态 |
| 成功色 | #67C23A | 审核状态、完成状态 |
| 警告色 | #E6A23C | 暂停状态、警告提示 |
| 危险色 | #F56C6C | 删除、错误提示 |
| 信息色 | #909399 | 开立状态、禁用状态 |
### 2.2 状态标签样式
| 状态 | 样式 | Element类型 |
|------|------|-------------|
| 开立 | 灰色标签 | info |
| 审核 | 绿色标签 | success |
| 暂停 | 橙色标签 | warning |
| 取消 | 红色标签 | danger |
| 完成 | 蓝色标签 | primary |
### 2.3 间距规范
| 类型 | 尺寸 | 使用场景 |
|------|------|----------|
| 小间距 | 8px | 表单字段内部 |
| 中间距 | 16px | 表单区块间 |
| 大间距 | 24px | 页面区域间 |
---
## 3. 通用组件规范
### 3.1 表格组件 (el-table)
```vue
<el-table
:data="tableData"
border
stripe
highlight-current-row
@row-click="handleRowClick"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" />
<el-table-column type="index" label="序号" width="60" />
<!-- 业务列 -->
</el-table>
```
### 3.2 分页组件 (el-pagination)
```vue
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryParams.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
```
### 3.3 表单组件 (el-form)
```vue
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="字段名" prop="fieldName">
<el-input v-model="form.fieldName" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
</el-form>
```
### 3.4 日期范围选择器
```vue
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd">
</el-date-picker>
```
---
## 4. 数据字典
### 4.1 单据状态 (status)
| 键值 | 显示文本 | 标签类型 |
|------|----------|----------|
| DRAFT | 开立 | info |
| APPROVED | 审核 | success |
| CLOSED | 关闭 | info |
### 4.2 业务状态 (businessStatus)
| 键值 | 显示文本 | 标签类型 |
|------|----------|----------|
| NORMAL | 正常 | success |
| PAUSE | 暂停 | warning |
| CANCEL | 取消 | danger |
### 4.3 业务类型 (businessType)
| 键值 | 显示文本 |
|------|----------|
| PRODUCTION_PLAN | 生产计划 |
| BOM_CALC | BOM运算 |
| SUPPLEMENT | 生产补料 |
### 4.4 供应方式 (supplyType)
| 键值 | 显示文本 |
|------|----------|
| PURCHASE | 采购 |
| SELF_MADE | 自制 |
| OUTSOURCE | 委外 |
### 4.5 需求方式 (needType)
| 键值 | 显示文本 |
|------|----------|
| 0 | 订单用料 |
| 1 | 库存备料 |
### 4.6 工作类型 (workType)
| 键值 | 显示文本 |
|------|----------|
| 0 | 生产计划单 |
| 1 | 零部件计划单 |
| 2 | 零部件订单 |
---
## 5. 表单字段规范
### 5.1 生产计划单表头
| 字段名 | 字段标识 | 类型 | 必填 | 验证规则 |
|--------|----------|------|------|----------|
| 单据编码 | orderCode | string | 是 | 系统自动生成 |
| 单据日期 | orderDate | date | 是 | 不能为空 |
| 业务状态 | businessStatus | string | 是 | 下拉选择 |
| 备注 | remark | string | 否 | 最大500字符 |
| 订单BOM | bomId | number | 是 | 必须选择 |
### 5.2 订单信息明细
| 字段名 | 字段标识 | 类型 | 必填 | 验证规则 |
|--------|----------|------|------|----------|
| 物料编码 | itemCode | string | 是 | 引入自动填充 |
| 物料名称 | itemName | string | 是 | 引入自动填充 |
| 主计量 | unitName | string | 是 | 引入自动填充 |
| 数量 | quantity | number | 是 | 大于0 |
| 质量要求 | qualityReq | string | 否 | 最大200字符 |
| 备注 | remark | string | 否 | 最大200字符 |
### 5.3 采购计划单
| 字段名 | 字段标识 | 类型 | 必填 | 验证规则 |
|--------|----------|------|------|----------|
| 单据编码 | planCode | string | 是 | 系统自动生成 |
| 物料编码 | itemCode | string | 是 | - |
| 物料名称 | itemName | string | 是 | - |
| 采购数量 | purchaseQty | number | 是 | 大于0 |
| 已订数量 | orderedQty | number | - | 只读 |
| 未订数量 | unorderedQty | number | - | 计算字段 |
---
## 6. API接口规范
### 6.1 通用响应结构
```json
{
"code": 200,
"msg": "操作成功",
"data": {}
}
```
### 6.2 分页查询响应
```json
{
"code": 200,
"msg": "操作成功",
"rows": [],
"total": 0
}
```
### 6.3 生产计划单接口
| 接口 | 方法 | 路径 | 说明 |
|------|------|------|------|
| 列表查询 | GET | /mp/plan/order/list | 查询生产计划单列表 |
| 详情查询 | GET | /mp/plan/order/{id} | 查询单个计划单详情 |
| 新增 | POST | /mp/plan/order | 新增生产计划单 |
| 修改 | PUT | /mp/plan/order | 修改生产计划单 |
| 删除 | DELETE | /mp/plan/order/{ids} | 删除生产计划单 |
| 审核 | PUT | /mp/plan/order/approve/{id} | 审核生产计划单 |
| 反审核 | PUT | /mp/plan/order/reject/{id} | 反审核生产计划单 |
| 引入订单 | GET | /mp/plan/order/import/list | 获取可引入的订单列表 |
#### 列表查询参数
```json
{
"salesOrderCode": "销售订单号",
"orderCode": "单据编码",
"itemCode": "物料编码",
"itemName": "物料名称",
"beginDate": "开始日期",
"endDate": "结束日期",
"workType": "工作类型",
"pageNum": 1,
"pageSize": 10
}
```
### 6.4 物料清单接口
| 接口 | 方法 | 路径 | 说明 |
|------|------|------|------|
| 列表查询 | GET | /mp/plan/mbom/list | 查询物料清单列表 |
| 详情查询 | GET | /mp/plan/mbom/{id} | 查询物料清单详情 |
| BOM运算 | POST | /mp/plan/mbom/calc | 执行BOM运算 |
| 审核 | PUT | /mp/plan/mbom/approve/{id} | 审核物料清单 |
| 下发 | PUT | /mp/plan/mbom/issue/{ids} | 下发到车间 |
### 6.5 采购计划单接口
| 接口 | 方法 | 路径 | 说明 |
|------|------|------|------|
| 列表查询 | GET | /mp/plan/purchase/list | 查询采购计划列表 |
| 详情查询 | GET | /mp/plan/purchase/{id} | 查询采购计划详情 |
| 新增 | POST | /mp/plan/purchase | 新增采购计划 |
| 修改 | PUT | /mp/plan/purchase | 修改采购计划 |
| 删除 | DELETE | /mp/plan/purchase/{ids} | 删除采购计划 |
| 审核 | PUT | /mp/plan/purchase/approve/{id} | 审核采购计划 |
| 生成采购订单 | POST | /mp/plan/purchase/generate/{ids} | 生成采购订单 |
#### 列表查询参数
```json
{
"salesOrderCode": "跟单单号",
"planCode": "单据编码",
"itemCode": "物料编码",
"itemName": "物料名称",
"needType": "需求方式(0订单用料/1库存备料)",
"beginDate": "开始日期",
"endDate": "结束日期",
"pageNum": 1,
"pageSize": 10
}
```
### 6.6 报表接口
| 接口 | 方法 | 路径 | 说明 |
|------|------|------|------|
| 计划执行明细 | GET | /mp/plan/detail/list | 计划执行明细查询 |
| 计划执行汇总 | GET | /mp/plan/total/list | 计划执行汇总查询 |
| 生产计划需求 | GET | /mp/plan/reorder/list | 生产计划需求查询 |
| 采购计划需求 | GET | /mp/plan/need/list | 采购计划需求查询 |
| 导出明细 | GET | /mp/plan/detail/export | 导出明细Excel |
| 导出汇总 | GET | /mp/plan/total/export | 导出汇总Excel |
#### 报表查询参数
```json
{
"businessType": "业务类型",
"needType": "需求方式",
"dataScope": "数据范围",
"beginDate": "开始日期",
"endDate": "结束日期",
"pageNum": 1,
"pageSize": 100
}
```
---
## 7. 业务逻辑
### 7.1 BOM运算逻辑
```javascript
// BOM运算
async function calcBom(orderId) {
try {
const loading = this.$loading({
lock: true,
text: 'BOM运算中...',
spinner: 'el-icon-loading'
});
const res = await calcBomApi(orderId);
loading.close();
if (res.code === 200) {
this.$message.success('BOM运算完成');
this.getMbomList();
}
} catch (error) {
loading.close();
this.$message.error('BOM运算失败');
}
}
```
### 7.2 数量汇总计算
```javascript
// 计算汇总数据
computed: {
summaryData() {
return {
purchaseQty: this.tableData.reduce((sum, row) => sum + (row.purchaseQty || 0), 0),
orderedQty: this.tableData.reduce((sum, row) => sum + (row.orderedQty || 0), 0),
unorderedQty: this.tableData.reduce((sum, row) => sum + (row.unorderedQty || 0), 0)
};
}
}
```
### 7.3 按钮权限控制
```javascript
// 按钮显示条件
computed: {
canEdit() {
return this.form.status === 'DRAFT';
},
canApprove() {
return this.form.status === 'DRAFT' && this.form.orderId;
},
canReject() {
return this.form.status === 'APPROVED';
},
canDelete() {
return this.form.status === 'DRAFT';
}
}
```
### 7.4 引入订单处理
```javascript
// 引入订单
handleImport(row) {
this.form.userId = row.userId;
this.form.userName = row.userName;
this.form.salesOrderCode = row.orderCode;
this.form.deliveryDate = row.deliveryDate;
// 获取订单明细
this.getOrderLines(row.orderId);
this.importDialogVisible = false;
}
```
---
## 8. 文件目录结构
```
src/
├── api/
│ └── plan/
│ ├── order.js # 生产计划单API
│ ├── mbom.js # 物料清单API
│ ├── purchase.js # 采购计划API
│ └── report.js # 报表API
├── views/
│ └── plan/
│ ├── order/
│ │ ├── index.vue # 生产计划单列表
│ │ └── detail.vue # 生产计划单详情
│ ├── parts/
│ │ ├── index.vue # 零部件订单列表
│ │ └── detail.vue # 零部件订单详情
│ ├── mbom/
│ │ └── index.vue # 物料清单列表
│ ├── purchase/
│ │ ├── index.vue # 采购计划列表
│ │ └── stock.vue # 备库计划列表
│ └── report/
│ ├── detail.vue # 计划执行明细
│ ├── total.vue # 计划执行汇总
│ ├── reorder.vue # 生产计划需求表
│ └── need.vue # 采购计划需求表
└── components/
└── plan/
├── ImportOrderDialog.vue # 引入订单弹窗
├── SelectBomDialog.vue # 选择BOM弹窗
└── MbomTable.vue # 物料清单表格组件
```
---
## 9. 路由配置
```javascript
{
path: '/plan',
component: Layout,
redirect: '/plan/order',
name: 'Plan',
meta: { title: '生产计划', icon: 'plan' },
children: [
{
path: 'order',
name: 'PlanOrder',
component: () => import('@/views/plan/order/index'),
meta: { title: '生产计划单' }
},
{
path: 'order/add',
name: 'PlanOrderAdd',
component: () => import('@/views/plan/order/detail'),
meta: { title: '新增生产计划单', activeMenu: '/plan/order' },
hidden: true
},
{
path: 'order/edit/:id',
name: 'PlanOrderEdit',
component: () => import('@/views/plan/order/detail'),
meta: { title: '编辑生产计划单', activeMenu: '/plan/order' },
hidden: true
},
{
path: 'parts',
name: 'PlanParts',
component: () => import('@/views/plan/parts/index'),
meta: { title: '零部件订单' }
},
{
path: 'mbom',
name: 'PlanMbom',
component: () => import('@/views/plan/mbom/index'),
meta: { title: '物料清单' }
},
{
path: 'purchase',
name: 'PlanPurchase',
component: () => import('@/views/plan/purchase/index'),
meta: { title: '采购计划单' }
},
{
path: 'purchase/stock',
name: 'PlanStock',
component: () => import('@/views/plan/purchase/stock'),
meta: { title: '备库计划单' }
},
{
path: 'detail',
name: 'PlanDetail',
component: () => import('@/views/plan/report/detail'),
meta: { title: '计划执行明细表' }
},
{
path: 'total',
name: 'PlanTotal',
component: () => import('@/views/plan/report/total'),
meta: { title: '计划执行汇总表' }
}
]
}
```
---
## 10. 注意事项
### 10.1 性能优化
1. 列表数据量大时使用虚拟滚动
2. BOM运算使用异步任务前端轮询状态
3. 导出功能使用后端流式导出
### 10.2 数据校验
1. 生产数量必须大于0
2. 采购数量不能超过需求数量
3. 日期范围不能超过系统限制
### 10.3 状态联动
1. 审核后字段变为只读
2. BOM运算完成后刷新物料清单
3. 生成采购订单后更新已订数量