scottpan/my-mom-system

Fork 0

Files

panchengyong c28ada5050 commit content

2026-03-06 02:02:59 +08:00

13 KiB

Raw Permalink Blame History

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

本文档为生产计划模块的前端开发技术规范，包含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)

<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)

<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)

<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 日期范围选择器

<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 通用响应结构

{
  "code": 200,
  "msg": "操作成功",
  "data": {}
}

6.2 分页查询响应

{
  "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	获取可引入的订单列表

列表查询参数

{
  "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}	生成采购订单

列表查询参数

{
  "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

报表查询参数

{
  "businessType": "业务类型",
  "needType": "需求方式",
  "dataScope": "数据范围",
  "beginDate": "开始日期",
  "endDate": "结束日期",
  "pageNum": 1,
  "pageSize": 100
}

7. 业务逻辑

7.1 BOM运算逻辑

// 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 数量汇总计算

// 计算汇总数据
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 按钮权限控制

// 按钮显示条件
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 引入订单处理

// 引入订单
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. 路由配置

{
  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 性能优化

列表数据量大时使用虚拟滚动
BOM运算使用异步任务，前端轮询状态
导出功能使用后端流式导出

10.2 数据校验

生产数量必须大于0
采购数量不能超过需求数量
日期范围不能超过系统限制

10.3 状态联动

审核后字段变为只读
BOM运算完成后刷新物料清单
生成采购订单后更新已订数量

13 KiB Raw Permalink Blame History Unescape Escape

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

1. 技术栈

2. 设计规范

2.1 颜色规范

2.2 状态标签样式

2.3 间距规范

3. 通用组件规范

3.1 表格组件 (el-table)

3.2 分页组件 (el-pagination)

3.3 表单组件 (el-form)

3.4 日期范围选择器

4. 数据字典

4.1 单据状态 (status)

4.2 业务状态 (businessStatus)

4.3 业务类型 (businessType)

4.4 供应方式 (supplyType)

4.5 需求方式 (needType)

4.6 工作类型 (workType)

5. 表单字段规范

5.1 生产计划单表头

5.2 订单信息明细

5.3 采购计划单

6. API接口规范

6.1 通用响应结构

6.2 分页查询响应

6.3 生产计划单接口

列表查询参数

6.4 物料清单接口

6.5 采购计划单接口

列表查询参数

6.6 报表接口

报表查询参数

7. 业务逻辑

7.1 BOM运算逻辑

7.2 数量汇总计算

7.3 按钮权限控制

7.4 引入订单处理

8. 文件目录结构

9. 路由配置

10. 注意事项

10.1 性能优化

10.2 数据校验

10.3 状态联动

13 KiB

Raw Permalink Blame History