修改显示

src/views/mes/materialBom/index.vue

@@ -2,8 +2,8 @@
   <div class="p-2">
     <el-row :gutter="20">
       <!-- 生产bom树 -->
-      <el-col :lg="6" :xs="24" style="height: calc(100vh - 120px);overflow:auto;" v-loading="treeLoading">
-        <el-card shadow="hover" style="">
+      <el-col :lg="6" :xs="24" style="" v-loading="treeLoading">
+        <el-card shadow="hover" style="height: calc(100vh - 120px);overflow:auto;">
           <el-input v-model="materialName" placeholder="请输入物料名称" prefix-icon="Search" clearable />
           <el-tree
             ref="materialBomTreeRef"
@@ -18,11 +18,17 @@
             @node-click="handleNodeClick"
           >
             <template #default="{ node, data }">
+              <div>
                 <el-tooltip :content="`${data.label}`">
-                <div class="custom-tree-node">
-                  <span>{{ node.label }}</span>
+                  <div class="custom-tree-node" style="display: inline-block;vertical-align: center">
+                    <span :style="{backgroundColor:getColor(data)?.[0],color:getColor(data)?.[1]}">{{ node.label
+                      }}</span>
                   </div>
                 </el-tooltip>
+                <el-button type="primary" link @click="fun(data)">
+                  上传
+                </el-button>
+              </div>
             </template>
           </el-tree>
         </el-card>
@@ -880,6 +886,17 @@ const findObjectByTreeKey = (list, targetTreeKey) => {
 //   }
 //
 // }
+const getColor = (e) => {
+  if (e.materialBomVersion === '01') {
+    return ['#ff0000', '#fff'];
+  }
+  if (e.materialBomVersion === '02') {
+    return ['#00ff00', '#000'];
+  }
+  if (e.materialBomVersion === '03') {
+    return ['#0000ff', '#fff'];
+  }
+};
 </script>
 
 <style lang="scss" scoped></style>