# 生产计划模块 - 前端开发规范

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