优化

src/view/performance/chejianbaogong.vue

@@ -1671,7 +1671,7 @@
 					<el-input v-model="JPformdata['通电工时']" style="width: 110px;" id="通电工时" @keydown="JPent($event)"/>
 				  </el-form-item>
 				  <el-form-item label="定额代号:" prop="customerCode" class="mab" label-width="90">
-					<el-input v-model="JPformdata['定额代号']" style="width: 160px;" id="定额代号" @keydown="JPent($event)"/>
+					<el-input v-model="JPformdata['定额代号']" readonly style="width: 160px;" id="定额代号" @keydown="JPent($event)"/>
 				  </el-form-item>
 				</el-row>
 				
@@ -2132,7 +2132,7 @@
 			  <el-row :gutter="20" style="margin-top:0px; margin-bottom: 1vh;">
 				<el-col :span="4" style="margin-top:0px; margin-bottom: 1px;">
 				  <el-form-item label="定额代号" prop="id" style="margin-top:0px; margin-bottom: 1px;">
-					<el-input v-model="dbformData.定额代号" id="定额代号" style="margin-top:0px; margin-bottom: 1px;" @keydown="ent($event, '通电工时', '定额代号', '码包')"  placeholder="" />
+					<el-input v-model="dbformData.定额代号" id="定额代号" readonly style="margin-top:0px; margin-bottom: 1px;" @keydown="ent($event, '通电工时', '定额代号', '码包')"  placeholder="" />
 				  </el-form-item>
 				</el-col>
 				<el-col :span="8" style="margin-top:0px; margin-bottom: 1px;">
@@ -2352,6 +2352,19 @@
 			:title="titleinfo"
 			:formData="formData"
 		  />
+
+		  <el-dialog v-model="GetDedhVisible" id="tableFplb" @keydown="ent($event)" style="margin-top: 5%;"  >
+		  	<el-form>
+		  			<el-form-item label="选择定额代号" class="mab" prop="keyOrder"></el-form-item>
+		  			<div style="border:1px solid #eee; width:100%; height: 600px; overflow-y: auto;">
+		  				<el-tree :data="GetDedhtreeData" ref="table_fplb" 
+		  					@keydown="handleTreeKeydown" 
+		  					:props="{ children: 'children',label: 'label'}"
+		  					node-key="id" @node-click="handleFplbClick">
+		  				</el-tree>
+		  			</div>
+		  	</el-form>
+		  </el-dialog>
   
 		  </el-main>
 		</el-container>
@@ -2456,7 +2469,8 @@
 	ChanliangProcessDetail,
 	JpUploade,
 	getTimelist,
-	getRejectRate
+	getRejectRate,
+	JPproductionDedh
   } from '@/api/jixiaoguanli/jitairibaobiao'
   
   import {
@@ -2591,6 +2605,9 @@ const warningres = (arr) => {
 		 'bh10': '10',
 		 'bh11': '11',
 	   };
+	   if(id2 === '定额代号'){
+		getDedhsubmit();
+	   }
 	   if (idMap.hasOwnProperty(id2) && event.keyCode === 13) {
 		   getygsubmit('', idMap[id2]);
 		 }else if(id3!=''){
@@ -3971,6 +3988,10 @@ const warningres = (arr) => {
 				  }
 			  })
 		  }
+		  if (event.target.id === '定额代号') {
+			console.log('测试')
+				getDedhsubmit();
+		}
 	  }
 	  
 	 const inputs = document.getElementsByTagName('input');
@@ -6170,6 +6191,177 @@ const warningres = (arr) => {
 	  return 'status-plan-usage-low';
 	}
   }
+
+
+  const GetDedhtreeData = reactive([]);
+const GetDedhVisible = ref(false);
+const table_fplb = ref(null); // el-tree 的 ref
+const getDedhsubmit = async () => {
+try {
+    const response = await JPproductionDedh({
+      sczl_jtbh: `${formData.value['机台号'].replace(/#+$/, '')}#`,
+    });
+    if (response.code === 0) {
+      const data = response.data;
+
+      // 处理单条记录的情况，直接赋值
+      if (!Array.isArray(data) && !data.bh_mc) {
+        JPformdata['定额代号'] = data.sys_bh;
+        return;
+      }
+      // 定义递归函数，用于构造树形结构
+      const buildTree = (node) => {
+        const treeNode = {
+          id: node.sys_bh,
+          label: node.sys_bh + (node.sys_mc ? `【${node.sys_mc}】` : ""), // 显示内容
+          children: [],
+          key: node.Key_ || node.sys_bh, // 保留 key 属性，用于操作
+        };
+
+        // 如果有子节点，递归处理
+        if (node.bh_mc && Array.isArray(node.bh_mc)) {
+          treeNode.children = node.bh_mc.map((childNode) => buildTree(childNode));
+        }
+
+        return treeNode;
+      };
+
+      // 处理数组数据结构，生成树形结构并展示弹窗
+      if (Array.isArray(data)) {
+        GetDedhtreeData.splice(
+          0,
+          GetDedhtreeData.length,
+          ...data.map((item) => ({
+            id: item.sys_bh,
+            label: item.sys_bh + (item.sys_mc ? `【${item.sys_mc}】` : ""),
+            children: [],
+            key: item.sys_bh,
+          }))
+        );
+        GetDedhVisible.value = true; // 展示弹窗
+      }
+
+      // 处理嵌套的树形结构数据
+      if (!Array.isArray(data) && data.bh_mc) {
+        GetDedhtreeData.splice(0, GetDedhtreeData.length, buildTree(data));
+        GetDedhVisible.value = true; // 展示弹窗
+      }
+
+      // 使用 nextTick 确保树形组件渲染完成后执行操作
+      nextTick(() => {
+        const tree = table_fplb.value; // 获取树形组件实例
+        if (tree) {
+          const firstNode = tree.getNode(0); // 获取树形的第一个节点
+          if (firstNode) {
+            firstNode.el.focus(); // 聚焦到第一个节点
+          }
+        }
+      });
+    }
+  } catch (error) {
+    console.error("获取数据失败：", error);
+  }
+};	
+
+//键盘事件
+const handleTreeKeydown = (event) => {
+  const tree = table_fplb.value; // 获取树实例
+  if (!tree) {
+	console.error("树组件未加载");
+	return;
+  }
+
+  const focusedElement = document.activeElement;
+  const focusedNodeId = focusedElement?.getAttribute("data-key"); // 获取 DOM 的 data-key 属性
+
+  if (event.keyCode === 13 && focusedNodeId) { // 判断是否是回车键
+	tree.setCurrentKey(focusedNodeId); // 设置当前节点为选中
+	tree.$nextTick(() => {
+	  const currentNode = tree.getCurrentNode(); // 获取当前选中的节点
+	  if (!currentNode) {
+		console.warn("没有选中的节点");
+		return;
+	  }
+	// 清除上一次的选中状态
+	clearPreviousSelection(tree);
+	  // 收起所有其他节点
+	  Object.keys(tree.store.nodesMap).forEach((key) => {
+		tree.store.nodesMap[key].expanded = false; // 收起所有节点
+	  });
+
+	  // 展开当前节点
+	  tree.store.nodesMap[currentNode.id].expanded = true;
+
+	  // 如果当前节点有子节点，选中第一个子节点
+	  if (currentNode.children && currentNode.children.length > 0) {
+		const firstChild = currentNode.children[0];
+		if (firstChild) {
+		  const firstChildKey = firstChild.id.toString();
+		  tree.setCurrentKey(firstChildKey); // 设置第一个子节点为选中
+		  setTimeout(() => {
+			const firstChildDom = tree.$el.querySelector(`[data-key="${firstChildKey}"]`);
+			if (firstChildDom) {
+			  firstChildDom.focus();
+			  firstChildDom.scrollIntoView({ block: "nearest" });
+			}
+		  });
+		}
+	  } else {
+		console.log("当前子节点:", currentNode.label);
+	  // 如果节点没有子节点，打印节点名称
+	  JPformdata['定额代号'] = currentNode.label.split("【")[0];
+	  GetDedhVisible.value = false;
+	  }
+	});
+  } else if (event.keyCode === 38 || event.keyCode === 40) { // 上下箭头键
+	const currentNode = tree.getCurrentNode();
+	if (currentNode) {
+	  const currentNodeDom = tree.$el.querySelector(`[data-key="${currentNode.id}"]`);
+	  if (currentNodeDom) {
+		currentNodeDom.focus();
+	  }
+	}
+  }
+};
+
+// 清除之前的选中状态
+const clearPreviousSelection = (tree) => {
+  const selectedNodes = tree.getCheckedNodes();
+  selectedNodes.forEach(node => {
+	tree.setChecked(node, false);
+  });
+  tree.setCurrentKey(null);
+};
+
+// // 弹出框键盘事件
+// const ent = (event) => {
+//   if (document.activeElement.id === "tableFplb") {
+// 	if (table_fplb.value) {
+// 	  const tree = table_fplb.value?.$el;
+// 	  if (tree) {
+// 		const node = tree.querySelector("[data-key]");
+// 		if (event.keyCode === 13) {
+// 		  // GetDedhVisible.value = false;
+// 		}
+// 		if (node) {
+// 		  node.scrollIntoView({ block: "nearest" }); // 确保节点可见
+// 		  node.focus(); // 确保焦点正确
+// 		}
+// 	  }
+// 	}
+//   }
+// };
+
+//点击事件
+const handleFplbClick = (nodeData, node, component) => {
+  //存放当前节点的nodeId
+  if (!nodeData.children || nodeData.children.length === 0) {
+	// 如果节点没有子节点，打印节点名称
+	JPformdata['定额代号']= nodeData.label.split("【")[0];
+	dbformData.value.定额代号 = nodeData.label.split("【")[0];
+	GetDedhVisible.value = false;
+  }
+};
   
   </script>
   <style scoped>