525 lines
13 KiB
Markdown
525 lines
13 KiB
Markdown
# 生产计划模块 - 前端开发规范
|
||
|
||
> 本文档为生产计划模块的前端开发技术规范，包含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. 生成采购订单后更新已订数量
|