生产工单物料需求清单

src/api/mes/pro/workorder.js

@@ -42,3 +42,12 @@ export function delWorkorder(workorderId) {
     method: 'delete'
   })
 }
+
+// 查询物料依赖列表
+export function listItems(query) {
+  return request({
+    url: '/mes/pro/workorder/listItems',
+    method: 'get',
+    params: query
+  })
+}

src/views/mes/pro/workorder/index.vue

@@ -331,7 +331,9 @@
         <el-tab-pane label="BOM组成"> 
           <Workorderbom ref="bomlist" :optType="optType" :workorder="form" @handleAddSub="handleSubAdd" ></Workorderbom>        
         </el-tab-pane>
-        <el-tab-pane label="物料需求"></el-tab-pane>
+        <el-tab-pane label="物料需求">
+          <WorkorderItemList :optType="optType" :workorder="form"></WorkorderItemList>
+        </el-tab-pane>
       </el-tabs>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="cancel" v-if="optType =='view' || form.status !='PREPARE' ">返回</el-button>
@@ -346,6 +348,7 @@
 <script>
 import { listWorkorder, getWorkorder, delWorkorder, addWorkorder, updateWorkorder } from "@/api/mes/pro/workorder";
 import Workorderbom from "./bom/bom.vue";
+import WorkorderItemList from "./items/item.vue";
 import ItemSelect  from "@/components/itemSelect/single.vue";
 import ClientSelect from "@/components/clientSelect/single.vue";
 import {genCode} from "@/api/system/autocode/rule"
@@ -359,7 +362,8 @@ export default {
     Treeselect,
     ItemSelect ,
     ClientSelect,
-    Workorderbom
+    Workorderbom,
+    WorkorderItemList
   },
   data() {
     return {

src/views/mes/pro/workorder/items/item.vue

@@ -0,0 +1,91 @@
+<template>
+    <div class="app-container">
+  
+      <el-table v-loading="loading" :data="productBomList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="物料编号" width="120" align="center" prop="bomItemCode" />
+        <el-table-column label="物料名称" width="200" align="center" prop="bomItemName" :show-overflow-tooltip="true"/>
+        <el-table-column label="规格型号" align="center" prop="bomItemSpec" :show-overflow-tooltip="true"/>
+        <el-table-column label="单位" align="center" prop="unitOfMeasure" />
+        <el-table-column label="物料/产品" align="center" prop="itemOrProduct" >
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.mes_item_product" :value="scope.row.itemOrProduct"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="预计使用量" align="center" prop="quantity" />
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+  </template>
+  
+  <script>
+  import { listItems } from "@/api/mes/pro/workorder";
+  export default {
+    name: "WorkorderItemList",
+    dicts: ['mes_item_product'],
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 物料需求
+        productBomList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          workorderId: null,
+          productId: null,
+          productCode: null,
+          productName: null,
+          productSpc: null,
+          unitOfMeasure: null,
+          itemOrProduct: null,
+          quantity: null,
+        }
+      };
+    },
+    props: {
+        optType: undefined,
+        workorder: undefined
+    },
+    created() {
+      this.getList();
+    },
+    methods: {
+      /** 查询生产工单BOM组成列表 */
+      getList() {
+        this.loading = true;
+        this.queryParams.workorderId = this.workorder.workorderId;
+        this.queryParams.productId = this.workorder.productId;
+        this.queryParams.quantity = this.workorder.quantity;
+        listItems(this.queryParams).then(response => {
+            debugger;
+          this.productBomList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      }
+    }
+  };
+  </script>
+