成品入仓页面优化

src/view/yunyin/shengchanguanli/chengpinrucang.vue

@@ -320,80 +320,42 @@
 		  </el-dialog>
 		  
 		  
-		  <el-dialog v-model="SMVisible" title="选择" destroy-on-close style='height: 100%;margin: 0px;' width="100%">
-			<div class="block">
-				<!-- <span class="demonstration">月份选择：</span> -->
-				<!-- <el-date-picker v-model="ExcelformData['rq']" type="month" placeholder="选择月份"style='width: 10%;'></el-date-picker> -->
-        <el-input v-model="searchInfo" placeholder="搜索产品编号或产品名称"  style="width: 180px;"></el-input>
-				<el-button type="primary" @click="dwonSubmit" style='margin-left: 10px;'>定位</el-button>
-				<el-button type="primary" class="bt" icon="download" @click="exportToExcel" >导出Excel</el-button>
-				<el-button type="primary" icon="edit" @click="pd_gxclhconClick" class="bt">工序产量核查</el-button>
-				<el-button type="primary" icon="edit" @click="pd_lcdlistonClick" class="bt">流程单查询</el-button>
-			</div>
+		  <el-dialog v-model="SMVisible" title="工单入仓进程数据统计（未完成工单）" destroy-on-close style='height: 100%;margin: 0px;' width="100%">
+        <div class="block" style="margin: 0px 0px 15px 0px ;">
+          <!-- <span class="demonstration">月份选择：</span> -->
+          <!-- <el-date-picker v-model="ExcelformData['rq']" type="month" placeholder="选择月份"style='width: 10%;'></el-date-picker> -->
+          <el-input v-model="searchInfo" placeholder="搜索产品编号或产品名称"  style="width: 180px;"></el-input>
+          <el-button type="primary" @click="dwonSubmit" style='margin-left: 10px;'>定位</el-button>
+          <el-button type="primary" class="bt" icon="download" @click="exportToExcel" >导出Excel</el-button>
+          <el-button type="primary" icon="edit" @click="pd_gxclhconClick" class="bt">工序产量核查</el-button>
+          <el-button type="primary" icon="edit" @click="pd_lcdlistonClick" class="bt">流程单查询</el-button>
+        </div>
 		    <el-table tooltip-effect="dark"  ref="tableRef" :data="SMselectData"
-			style="width: 100%;height: 80vh" 
-			row-key="Yj_Gdbh" highlight-current-row="true" 
-			borderstyle="width:180%"height="100%"
-			@row-dblclick="SMSelectClick"
-			@row-click="MBRowClick"
-		    >
-				<el-table-column
-				  prop="Yj_Gdbh"
-				  label="工单编号"
-				  width="180"
-				/>
-		      <el-table-column
-		        prop="yj_Yjno"
-		        label="印件号"
-		        width="200"
-		      />
-			  <el-table-column
-				prop="yj_yjmc"
-				label="印件名称"
-				width="200"
-			  />
-			  <el-table-column
-				prop="yj_成品数量"
-				label="计划交货数量"
-				width="200"
-			  />
-			  <el-table-column
-				prop="yj_实际投料"
-				label="印件投料"
-				width="200"
-			  />
-			  <el-table-column
-				prop="sczl_cls"
-				label="包装产量"
-				width="200"
-			  />
-			  <el-table-column
-				prop="jjcp_sls"
-				label="入仓数量"
-				width="200"
-			  />
-			  <el-table-column
-				prop="jjcp_smb"
-				label="是否末版"
-				width="200"
-			  />
-			  <el-table-column
-				prop="jjcp_smb"
-				label="缺数"
-				width="200"
-			  />
-			  <el-table-column
-				prop="客户料号"
-				label="完工"
-				width="200"
-			  />
-			  <el-table-column
-				prop="jjcp_sj"
-				label="最近入仓时间"
-				width="200"
-			  />
+            style="width: 100%;height: 80vh;"  border 
+            
+            :row-style="{ height: '0px' }"            
+            :cell-style="{ padding: '2px' }"
+            :header-row-style="{ height: '0px' }"
+            :header-cell-style="{ padding: '0px' }"
+            row-key="Yj_Gdbh" highlight-current-row="true" 
+            borderstyle="width:180%"height="100%"
+            :show-overflow-tooltip="true"
+            @row-dblclick="SMSelectClick"
+            @row-click="MBRowClick">
+          <el-table-column prop="Yj_Gdbh"       label="工单编号" width="120" />
+          <el-table-column prop="yj_Yjno"       label="印件号" width="100"  />
+          <el-table-column prop="yj_yjmc"       label="印件名称" width="500" />
+          <el-table-column prop="yj_成品数量"    label="计划交货数量" width="120" />
+          <el-table-column prop="yj_实际投料"    label="印件投料" width="120" />
+          <el-table-column prop="sczl_cls"      label="包装产量" width="110" />
+          <el-table-column prop="jjcp_sls"      label="入仓数量" width="110" />
+          <el-table-column prop="jjcp_smb"      label="是否末版" width="110" />
+          <el-table-column prop="jjcp_smb"      label="缺数" width="110" />
+          <el-table-column prop="客户料号"       label="完工" width="100" />
+          <el-table-column prop="jjcp_sj"       label="最近入仓时间" width="140" />
 		    </el-table>
 		  </el-dialog>
+
 		  <!--工序产量核查【弹窗】-->
           <el-dialog v-model="pd_gxclhclist" title="工序产量核查" style="width: 100%;height: 100%;margin: 0px;padding: 0px">
             <el-button type="" @click="gxclhcCancel">退出</el-button>
@@ -725,14 +687,24 @@ const MBRowClick = async (row) => {
 function onSMB() {
 	MbList()
 	SMVisible.value=true
+  searchInfo.value=''
+
 }
 const MbList = async (value) => {
   const response = await mbList();
-  console.log(response.data) 
-  if (response.code === 0) {
-	 SMselectData.value=response.data.rows
-	 console.log(TJselectData)
-  }
+  console.log("response",response) 
+  //查询显示所有未完成和已完成的数据
+  // if (response.code === 0) {
+	//  SMselectData.value = response.data.rows
+	//  console.log(TJselectData)
+  // }
+
+//查询显示所有未完成的数据
+if (response.code === 0) {
+  const filteredData = response.data.rows.filter(row => row.jjcp_smb === "");
+  SMselectData.value = filteredData;
+}
+
 }
 
 //=========工序产量核查===========
@@ -770,7 +742,7 @@ const gdwhformData = reactive({
 });
 const inputCpmc = ref('')
 
-
+//定位按钮
 const dwonSubmit = () => {
    const searchValue = searchInfo.value.trim();
       if (searchValue) {
@@ -781,32 +753,20 @@ const dwonSubmit = () => {
             tableRef.value.setCurrentRow(matchedRow);
  
             // 查找表格体的滚动容器
-            const tableBodyWrapper = tableRef.value.$el.querySelector('.el-table__body-wrapper tbody');
-            if (tableBodyWrapper) {
-              // 由于 Element UI 不提供直接获取行 DOM 元素的方法，我们需要遍历所有行来找到匹配的那一行
-              const rows = tableBodyWrapper.querySelectorAll('.el-table__row');
-              const targetRow = Array.from(rows).find(row => {
-                // 注意：这里我们假设每行都有一个唯一的 key 属性与数据匹配，但实际情况可能不同
-                // 如果您的表格行有 `row-key` 属性，并且这个 key 映射到了 DOM 的某个属性上（比如 data-row-key），
-                // 那么您应该使用那个属性来找到目标行。但是，Element UI 并不默认这样做。
-                // 一种解决方案是在渲染行时手动添加一个 ref 或 data 属性来存储行的 key。
-                // 由于这个示例中没有这样的设置，我们假设您无法通过 DOM 属性直接找到目标行。
-                // 因此，这里我们使用了一个不太优雅的方法：通过比较行的数据与匹配的数据来找到目标行。
-                // 这通常不是最佳实践，因为它依赖于行的渲染顺序和数据结构的一致性。
-                const rowData = JSON.parse(row.dataset.rowData || '{}'); // 假设您在某处将行数据作为 JSON 字符串存储在了 data-row-data 属性中（这不是 Element UI 的默认行为）
-                return rowData.Yj_Gdbh === matchedRow.Yj_Gdbh;
-              });
- 
-              // 如果找到了目标行，滚动到它
-              if (targetRow) {
-                targetRow.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-              } else {
-                ElMessage.warning('未找到对应的行数据（在 DOM 中）');
-              }
-            } else {
-              ElMessage.warning('未找到表格体');
-            }
-          });
+            const tableBodyWrapper = tableRef.value.$el.querySelector('.el-table__body-wrapper');
+            // 获取所有具有 'current-row' 类的行
+            const targetRow = tableBodyWrapper.querySelector('.el-table__row.current-row');
+          if (targetRow) {
+            // 使用 scrollIntoView 方法滚动到目标行
+            targetRow.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+
+            // // 可选：输出调试信息
+            // console.log('Scrolled to row:', targetRow);
+          } else {
+            dwonSubmit();
+            console.log('No row with class "current-row" found.');
+          }
+          }); 
         } else {
           ElMessage.warning('未找到匹配的工单编号');
         }
@@ -814,23 +774,7 @@ const dwonSubmit = () => {
         ElMessage.warning('请输入搜索内容');
       }
 };
-// const dwonSubmit = () => {
-//   const searchValue = searchInfo.value.trim();
-//   if (searchValue) {
-//     const matchedRow = SMselectData.value.find(row => row.Yj_Gdbh === searchValue);
-//     if (matchedRow) {
-//       nextTick(() => {
-//         tableRef.value.setCurrentRow(matchedRow);
-//       });
-//     } else {
-//       // 你可以使用 Element Plus 的消息组件或其他方式来显示警告
-//       // 例如：ElMessage.warning('未找到匹配的工单编号');
-//       console.warn('未找到匹配的工单编号');
-//     }
-//   } else {
-//     console.warn('请输入搜索内容');
-//   }
-// };
+
 
 //导出excel表
 const exportToExcel = () => {