库存现有量

src/views/mes/wm/wmstock/index.vue

@@ -1,7 +1,32 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input
+            v-model="itemTypeName"
+            placeholder="请输入分类名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="itemTypeOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            default-expand-all
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
 
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
         <el-form-item label="产品物料编码" prop="itemCode">
           <el-input
             v-model="queryParams.itemCode"
@@ -106,14 +131,19 @@
         :limit.sync="queryParams.pageSize"
         @pagination="getList"
       />
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import { listWmstock, getWmstock, delWmstock, addWmstock, updateWmstock } from "@/api/mes/wm/wmstock";
-
+import { treeselect } from "@/api/mes/md/itemtype";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 export default {
   name: "Wmstock",
+  components: { Treeselect },
   data() {
     return {
       // 遮罩层
@@ -128,6 +158,8 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
+      //物料产品分类树
+      itemTypeOptions: undefined,
       // 库存记录表格数据
       wmstockList: [],
       // 弹出层标题
@@ -167,6 +199,7 @@ export default {
   },
   created() {
     this.getList();
+    this.getTreeselect();
   },
   methods: {
     /** 查询库存记录列表 */
@@ -178,7 +211,22 @@ export default {
         this.loading = false;
       });
     },
-
+    /** 查询分类下拉树结构 */
+    getTreeselect() {
+      treeselect().then(response => {
+        this.itemTypeOptions = response.data;
+      });
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.itemTypeId = data.id;
+      this.handleQuery();
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;