From d8d1dff112caf664d7859b255ec90ae16e127450 Mon Sep 17 00:00:00 2001
From: zch <zangch@mesnac.com>
Date: Thu, 13 Feb 2025 13:59:52 +0800
Subject: [PATCH] =?UTF-8?q?add(mes):=20=E7=89=A9=E6=96=99=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0=E7=89=A9=E6=96=99?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E6=A0=91=E7=AD=9B=E9=80=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加左侧物料类型树，实现树形结构展示和筛选
- 增加搜索框，支持模糊搜索物料类型
- 优化物料信息列表，调整部分字段名称
- 重置查询条件时，清除物料类型ID并重置树状结构选择
---
 src/views/mes/baseMaterialInfo/index.vue | 151 +++++++++++++++++------
 1 file changed, 112 insertions(+), 39 deletions(-)

diff --git a/src/views/mes/baseMaterialInfo/index.vue b/src/views/mes/baseMaterialInfo/index.vue
index 596d6af..c289328 100644
--- a/src/views/mes/baseMaterialInfo/index.vue
+++ b/src/views/mes/baseMaterialInfo/index.vue
@@ -1,5 +1,35 @@
 <template>
   <div class="p-2">
+<el-row :gutter="9">
+  <el-col :span="4" :xs="24">
+    <div class="head-container">
+      <el-input
+        v-model="filterBoxName"
+        placeholder="请输入名称"
+        clearable
+        size="small"
+        prefix-icon="el-icon-search"
+        style="margin-bottom: 20px"
+      />
+    </div>
+    <div class="head-container">
+      <div class="tree-container">
+        <el-tree
+          :data="InfoOptions"
+          :props="props"
+          :expand-on-click-node="false"
+          :filter-node-method="filterNode"
+          ref="tree"
+          node-key="matrialTypeId"
+          default-expand-all
+          highlight-current
+          @node-click="handleTreeNodeClick"
+        />
+      </div>
+    </div>
+  </el-col>
+
+  <el-col :span="20" :xs="24">
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
         <el-card shadow="hover">
@@ -78,7 +108,7 @@
                 <el-option v-for="dict in active_flag" :key="dict.value" :label="dict.label" :value="dict.value"/>
               </el-select>
             </el-form-item>-->
-<!--            <el-form-item label="删除标识(0否 1是)" prop="deletedFlag">
+<!--            <el-form-item label="删除标识" prop="deletedFlag">
               <el-select v-model="queryParams.deletedFlag" placeholder="请选择删除标识(0否 1是)" clearable >
                 <el-option v-for="dict in deleted_flag" :key="dict.value" :label="dict.label" :value="dict.value"/>
               </el-select>
@@ -114,7 +144,7 @@
             <el-form-item label="安全库存数量" prop="safeStockAmount">
               <el-input v-model="queryParams.safeStockAmount" placeholder="请输入安全库存数量" clearable @keyup.enter="handleQuery" />
             </el-form-item>-->
-<!--            <el-form-item label="申请标识(1是 0否)" prop="applyFlag">
+<!--            <el-form-item label="申请标识" prop="applyFlag">
               <el-select v-model="queryParams.applyFlag" placeholder="请选择申请标识(1是 0否)" clearable >
                 <el-option v-for="dict in apply_flag" :key="dict.value" :label="dict.label" :value="dict.value"/>
               </el-select>
@@ -349,8 +379,15 @@
         </el-table-column>
       </el-table>
 
+
+
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
+
+  </el-col>
+
+</el-row>
+
     <!-- 添加或修改物料信息对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="baseMaterialInfoFormRef" :model="form" :rules="rules" label-width="120px">
@@ -681,43 +718,43 @@ const columns = ref<FieldOption[]>([
         { key: 7, label: `批次标识`, visible: true },
         { key: 8, label: `小批次数量`, visible: true },
         { key: 9, label: `计量单位ID`, visible: false },
-        { key: 10, label: `计量单位名称`, visible: true },
-        { key: 11, label: `物料组`, visible: true },
-        { key: 12, label: `物料规格`, visible: true },
-        { key: 13, label: `净重`, visible: false },
-       { key: 14, label: `毛重`, visible: false },
-         { key: 15, label: `绑定标识`, visible: false },
-          { key: 16, label: `所属工厂`, visible: false },
-          { key: 17, label: `创建组织`, visible: false },
-          { key: 18, label: `使用组织`, visible: false },
-          { key: 19, label: `所属产线`, visible: false },
-          { key: 20, label: `激活标识`, visible: false },
-          { key: 21, label: `删除标识`, visible: false },
-          { key: 22, label: `采购计价单位`, visible: false },
-          { key: 23, label: `审核日期`, visible: false },
-          { key: 24, label: `erp最后更新日期`, visible: false },
-          { key: 25, label: `最大库存数量`, visible: false },
-          { key: 26, label: `最小库存数量`, visible: false },
-          { key: 27, label: `安全库存数量`, visible: false },
-          { key: 28, label: `申请标识`, visible: false },
-          { key: 29, label: `物料分类`, visible: false },
-          { key: 30, label: `自动出库标识`, visible: false },
-          { key: 31, label: `辅料标识`, visible: false },
-          { key: 32, label: `低值易耗品标识`, visible: false },
-          { key: 33, label: `品牌`, visible: false },
-          { key: 34, label: `层级`, visible: false },
-          { key: 35, label: `花纹`, visible: false },
-          { key: 36, label: `速度级别`, visible: false },
-          { key: 37, label: `负荷载重`, visible: false },
-          { key: 38, label: `轮胎标记`, visible: false },
-          { key: 39, label: `最小停放时间`, visible: false },
-          { key: 40, label: `最大停放时间`, visible: false },
-          { key: 41, label: `标准重量`, visible: false },
-          { key: 42, label: `标准重量上限`, visible: false },
-          { key: 43, label: `标准重量下限`, visible: false },
-          { key: 44, label: `内胎标记`, visible: false },
-          { key: 45, label: `销售类型`, visible: false },
-          { key: 46, label: `备注`, visible: false },
+       { key: 10, label: `计量单位名称`, visible: true },
+         { key: 11, label: `物料组`, visible: true },
+          { key: 12, label: `物料规格`, visible: true },
+          { key: 13, label: `净重`, visible: false },
+         { key: 14, label: `毛重`, visible: false },
+           { key: 15, label: `绑定标识`, visible: false },
+            { key: 16, label: `所属工厂`, visible: false },
+            { key: 17, label: `创建组织`, visible: false },
+            { key: 18, label: `使用组织`, visible: false },
+            { key: 19, label: `所属产线`, visible: false },
+            { key: 20, label: `激活标识`, visible: false },
+            { key: 21, label: `删除标识`, visible: false },
+            { key: 22, label: `采购计价单位`, visible: false },
+            { key: 23, label: `审核日期`, visible: false },
+            { key: 24, label: `erp最后更新日期`, visible: false },
+            { key: 25, label: `最大库存数量`, visible: false },
+            { key: 26, label: `最小库存数量`, visible: false },
+            { key: 27, label: `安全库存数量`, visible: false },
+            { key: 28, label: `申请标识`, visible: false },
+            { key: 29, label: `物料分类`, visible: false },
+            { key: 30, label: `自动出库标识`, visible: false },
+            { key: 31, label: `辅料标识`, visible: false },
+            { key: 32, label: `低值易耗品标识`, visible: false },
+            { key: 33, label: `品牌`, visible: false },
+            { key: 34, label: `层级`, visible: false },
+            { key: 35, label: `花纹`, visible: false },
+            { key: 36, label: `速度级别`, visible: false },
+            { key: 37, label: `负荷载重`, visible: false },
+            { key: 38, label: `轮胎标记`, visible: false },
+            { key: 39, label: `最小停放时间`, visible: false },
+            { key: 40, label: `最大停放时间`, visible: false },
+            { key: 41, label: `标准重量`, visible: false },
+            { key: 42, label: `标准重量上限`, visible: false },
+            { key: 43, label: `标准重量下限`, visible: false },
+            { key: 44, label: `内胎标记`, visible: false },
+            { key: 45, label: `销售类型`, visible: false },
+            { key: 46, label: `备注`, visible: false },
 /*        { key: 49, label: `创建部门`, visible: true },
         { key: 50, label: `创建人`, visible: true },
         { key: 51, label: `创建时间`, visible: true },
@@ -883,6 +920,10 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
+  queryParams.value.materialTypeId = undefined; // 清除物料类型ID查询条件（树状结构）
+  if (tree.value) {
+    tree.value.setCurrentKey(null);
+  }
   dateRangeApproveDate.value = ['', ''];
   queryFormRef.value?.resetFields();
   handleQuery();
@@ -975,7 +1016,39 @@ const getMaterialType = async () => {
   materialTypeList.value = res.data;
 }
 
+//左侧物料类型树
+let InfoOptions = ref([]);
+const getInfoOptions = async () => {
+  const res = await getBaseMaterialTypeList(null);
+  InfoOptions.value = proxy?.handleTree(res.data, "matrialTypeId", "parentId");
+}
+
+//点击左侧物料类型树节点，获取id并赋值给form.value.materialTypeId
+const handleTreeNodeClick = async (data: any) => {
+  queryParams.value.materialTypeId = data.matrialTypeId;
+  handleQuery();
+}
+
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.matrialTypeName.toLowerCase().includes(value.toLowerCase());
+}
+
+const filterBoxName = ref('');
+const props = reactive({
+  children: 'children',
+  label: 'matrialTypeName',
+  value: 'matrialTypeId'
+});
+const tree = ref();
+watch(filterBoxName, (newVal) => {
+  if (tree.value) {
+    tree.value.filter(newVal);
+  }
+});
+
 onMounted(() => {
+  getInfoOptions();
   getList();
 });
 </script>