优化

src/view/performance/chejianbaogong.vue

@@ -16,13 +16,14 @@
 			<el-button type="primary" size="large" class="bt" style="color:white;font-size: 15px;font-weight: bold;width: 70px"  @click="oncomplaints" >客诉记录</el-button>
 			<el-button type="primary" size="large" class="bt" style="color:white;font-size: 15px;font-weight: bold;width: 120px" @click="deldbcl_onclick" :disabled="dbclSelection === ''"   title="当班产量明细" >当班产量明细删除</el-button>
 			<el-button type="primary" size="large" class="bt" style="color:white;font-size: 15px;font-weight: bold;width: 95px"  @click="pd_lcdlistonClick" >流程单查询</el-button>
+			<el-button type="primary" size="large" class="bt" style="color:white;font-size: 15px;font-weight: bold;width: 165px"  @click="scpconClick" >工单生产批次信息查询</el-button>
 		</div>
 	</header>
 	
     <el-container>
       <el-container>
         <el-main>
-<div class="gva-search-box" style=" overflow: hidden; padding: 0; margin-top:20px;display: flex;">
+	<div class="gva-search-box" style=" overflow: hidden; padding: 0; margin-top:30px;display: flex;">
 		<div style="flex: 1; border: 0px magenta solid; margin: 0; padding: 0; margin-left: 20px; margin-top: 20px; color: red;">
 	  
 	  <el-row :gutter="20">
@@ -1806,7 +1807,160 @@
               </layout>
             </div>
           </el-dialog>
-
+		  
+				
+			<!--工单生产批次信息查询【弹窗】-->
+			<el-dialog v-model="scpconlist" title="工单生产批次信息查询" style="width: 100%;height: 100%;margin: 0px;padding: 0px;">
+			  <el-button type="primary"   @click="ontuicclicks" style="color: white;margin-left: 20px;"  class="bt" title="退出">退出</el-button>
+			  <div 
+			    style="
+			      width: 60%; 
+			      height: 470px; 
+			      position: fixed; 
+			      left: 25%; 
+			      padding: 20px; 
+			      border-radius: 8px; 
+			      background-color: #fff; 
+			      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
+			    <div style="margin-top: 10px;">
+			      <!-- 提示信息 -->
+			      <hr>
+			      <p style="font-size: 14px; color: red; margin: 10px 0;">搜索栏目为空，则从最近2周完工的工单中选择</p>
+			      <p style="font-size: 14px; color: red; margin: 10px 0;">否则，以栏目值为关键字，从工单编号、产品名称、客户名称中选择</p>
+			  	<p style="font-size: 18px; color: red; margin: 10px 0;">在列表中进行双击打开查看流程单查询</p>
+			      <hr>
+			      
+			      <!-- 输入框和按钮 -->
+			      <div style="display: flex; align-items: center; margin-top: 10px;">
+			        <el-input v-model="searchInfolcd" placeholder="Enter回车搜索工单编号" @keydown="Enterkeysearch" id="searchInfo" style="flex: 1; margin-right: 10px;"></el-input>
+			        <el-button type="primary" title="搜索" icon="el-icon-search"  @click="onSubmitlcd" >搜索</el-button>
+			      </div>
+			      
+			      <!-- 表格展示区域 -->
+			      <div class="gva-table-box" style="margin-top: 15px;">
+			        <el-table 
+			          ref="multipleTable"
+			          style="width: 100%; height: 30vh; verflow: auto;" 
+			  		:row-style="{ height: '20px' }"  :header-cell-style="{ padding: '0px' }"
+			  		:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
+			          :data="tableDatalcd" 
+			          :border="true" 
+			          :tooltip-effect="'dark'"
+			          row-key="ID"
+			          highlight-current-row
+			          @row-click="tableRowClicklcd"
+			          @row-dblclick="updateCompanyFunclcd"
+			          @selection-change="handleSelectionChange">
+			  		
+			  		<el-table-column align="left"  label="工单编号" 	  width="115"	prop="Gd_gdbh" />
+			  		<el-table-column align="left"  label="行号" 	  width="60"	prop="行号" />
+			  		<el-table-column align="left"  label="工序名称" 	 	prop="Gd_cpmc"  />
+			  		
+			          <!-- <el-table-column prop="工单" label="工单编号-行号-工序名称" align="left" sortable show-overflow-tooltipmin-width="300"/> -->
+			  		
+			        </el-table>
+			      </div>
+			    </div>
+			  </div>
+			  <!-- 机台生产日报表维护弹窗 -->
+			  <el-dialog v-model="popdialog" title="机台生产日报表维护" destroy-on-close width="90%" style="height: 90%; margin-left: 5%; margin-top: 2%;">
+			    <div>
+			      <!-- 顶层布局 -->
+			      <layout>
+			        <!-- 顶部的搜索区域 -->
+			        <layout-header>
+			          <el-form ref="elSearchFormRef" class="demo-form-inline" :rules="searchRule">
+			            <!-- 添加按钮 -->
+			  		  <el-button type="primary" icon="edit" style="color: white;margin-left: 20px;"   @click="ontuicclick"  class="bt" title="退出">退出</el-button>
+			          </el-form>
+			        </layout-header>
+			  
+			        <!-- 左右布局 -->
+			        <layout style="height: calc(100% - 50px); display: flex;">
+			          <!-- 左侧树形区域 -->
+			          <layout-sider style="width: 140px; margin-right: 10px; overflow: hidden;height: 640px;">
+			            <div class="JKWTree-tree" style="height: 100%; max-height: 100vh; overflow-y: auto;">
+			              <h3></h3>
+			              <el-tree
+			                :data="treeDatalcd"
+			                node-key="num"
+			                highlight-current
+			                :props="defaultProps"
+			                @node-click="handleNodeClicklcd"
+			              />
+			            </div>
+			          </layout-sider>
+			  
+			  
+			          <!-- 右侧表格区域 -->
+			          <layout-content style="flex: 1; overflow: auto;">
+			            <el-main>
+			  			 <div style="width: 100%; font-family: Arial, sans-serif; font-size: 14px;">
+			  				 <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
+			  				   <p style="flex: 0.4; margin: 0;">工单编号：<span style="color: red;">{{ _GetorderDetail['Gd_gdbh'] }}</span></p>
+			  				   <p style="flex: 0.3; margin: 0;">产品代号：<span style="color: red;">{{ _GetorderDetail['Gd_cpdh'] }}</span></p>
+			  				   <p style="flex: 1; margin: 0;">产品名称：<span style="color: red;">{{ _GetorderDetail['Gd_cpmc'] }}</span></p>
+			  				 </div>
+			  				 <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
+			  				   <p style="flex: 0.4; margin: 0;">订单数量：<span style="color: red;">{{ _GetorderDetail['订单数量'] }}</span></p>
+			  				   <p style="flex: 0.3; margin: 0;">实际投料：<span style="color: red;">{{ _GetorderDetail['实际投料'] }}</span></p>
+			  				   <p style="flex: 1; margin: 0;">
+			  					 单位：<span style="color: red;">{{ _GetorderDetail['计量单位'] }}</span> 
+			  					 目标合格率：<span style="color: red;">{{ _GetorderDetail['投料率'] }}</span>
+			  				   </p>
+			  				 </div>
+			  			   </div>
+			  			  
+			  			  <el-tabs v-model="activeName" @tab-click="handleClick">
+			  					<el-tab-pane label="工艺及生产班组"  @click="showTable('工艺及生产班组')"  name="first">
+			  					  <el-table tooltip-effect="dark" :data="lcdtableData" row-key="ID"
+			  					    highlight-current-row="true"
+			  					    :row-style="{ height: '0px' }" :header-cell-style="{ padding: '0px' }"
+			  					    :cell-style="{ padding: '0px' }" :header-row-style="{ height: '0px' }"
+			  					    border :show-overflow-tooltip="true" :cell-class-name="planUsageCellClass"
+			  					    style="width: 100%;height: 65vh" ref="tablesczl_gxmc"
+			  					    @row-dblclick="gyscbzSelectClick">
+			  					    <el-table-column align="left"  label="流程单号" 	  width="81"	prop="流程单号" />
+			  					    <el-table-column align="left"  label="工序号" 	  width="68"	prop="工序号" />
+			  					    <el-table-column align="left"  label="工序名称" 	  width="240"	prop="工序名称"  />
+			  					    <el-table-column align="left"  label="生产日期" 	  width="120"	prop="生产日期"  />
+			  					    <el-table-column align="left"  label="机台编号" 	  width="81"	prop="机台编号"  />
+			  					    <el-table-column align="left"  label="班组人员01"  width="105"  :formatter="(row) => `${row.sczl_bh1 || ''} ${row.name1 || ''}`"/>
+			  					    <el-table-column align="left"  label="班组人员02"  width="105"  :formatter="(row) => `${row.sczl_bh2 || ''} ${row.name2 || ''}`"/>
+			  					    <el-table-column align="left"  label="班组人员03"  width="105"  :formatter="(row) => `${row.sczl_bh3 || ''} ${row.name3 || ''}`"/>
+			  					    <el-table-column align="left"  label="班组人员04"  width="105"  :formatter="(row) => `${row.sczl_bh4 || ''} ${row.name4 || ''}`"/>
+			  					    <el-table-column align="left"  label="班组人员05"  width="105"  :formatter="(row) => `${row.sczl_bh5 || ''} ${row.name5 || ''}`"/>
+			  					    <el-table-column align="left"  label="班组人员06"  width="105"  :formatter="(row) => `${row.sczl_bh6 || ''} ${row.name6 || ''}`"/>
+			  					    <el-table-column align="left"  label="班组人员07"  width="105"  :formatter="(row) => `${row.sczl_bh7 || ''} ${row.name7 || ''}`"/>
+			  					    <el-table-column align="left"  label="班组人员08"  width="105"  :formatter="(row) => `${row.sczl_bh8 || ''} ${row.name8 || ''}`"/>
+			  					    <el-table-column align="left"  label="班组人员09"  width="105"  :formatter="(row) => `${row.sczl_bh9 || ''} ${row.name9 || ''}`"/>
+			  					    <el-table-column align="left"  label="班组人员10"  width="105"  :formatter="(row) => `${row.sczl_bh10 || ''} ${row.name10 || ''}`"/>
+			  					  </el-table>
+			  					</el-tab-pane>
+			  					
+			  					<el-tab-pane label="制程异常记录"  @click="showTable('制程异常记录')"  name="second">
+			  					  <el-table tooltip-effect="dark" :data="zcycjltableData" row-key="ID"
+			  					    highlight-current-row="true"
+			  					    :row-style="{ height: '0px' }" :header-cell-style="{ padding: '0px' }"
+			  					    :cell-style="{ padding: '0px' }" :header-row-style="{ height: '0px' }"
+			  					    border :show-overflow-tooltip="true" :cell-class-name="planUsageCellClass"
+			  					    style="width: 100%;height: 65vh" ref="tablzcycjl_gxmc"
+			  					    @row-dblclick="zcycjlSelectClick">
+			  					    <el-table-column align="left"  label="流程单号" 	  width="100"	prop="流程单号" />
+			  					    <el-table-column align="left"  label="数量" 	  	  width="100"	prop="数量" />
+			  					    <el-table-column align="left"  label="异常备注" 	  width="400"	prop="缺陷备注"  />
+			  					    <el-table-column align="left"  label="用户" 	  	  width="160"	prop="用户"  />
+			  					  </el-table>
+			  					</el-tab-pane>
+			  
+			  			  </el-tabs>
+			            </el-main>
+			          </layout-content>
+			        </layout>
+			      </layout>
+			    </div>
+			  </el-dialog>
+			</el-dialog>
 
 
           <el-dialog
@@ -2170,9 +2324,22 @@
   </div>
 </template>
 
-
+<script>
+//点击按钮显示下方表格
+export default {
+  data() {
+    return {
+      currentTable: '', // 当前展示的表格
+      activeName: 'first',
+	  _GetorderDetail:'',
+    };
+  },
+  methods: {
+    
+  }
+};
+</script>
 <script setup>
-
 import {
   createCompany,
   deleteCompany,
@@ -2261,6 +2428,13 @@ import { ref, reactive } from 'vue'
 import Shebeizhuangtai from '@/view/performance/09-workOrderVerification/componets/shebeizhuangtai.vue'
 import { useUserStore } from '@/pinia/modules/user'
 import PrintPage from '../yunyin/shengchanguanli/components/print.vue'
+import {
+  StaGetOrderList,
+  StaGetList,
+  StaProcessList,
+  StaGetOrderDetail,
+  StaProcessAnomaly,
+} from '@/api/mes/job'
 
 const printPageRef = ref()
 const userStore = useUserStore()
@@ -5665,11 +5839,135 @@ const pd_lcdCancel = async () => {
   pd_lcdlist.value = false;
 }
 
-// const sbzyqdplanUsageCellClass = ({row, column, rowIndex, columnIndex}) =>{
-//   if(formData.value['工单编号'] === row['工单编号|质量信息'].split('|')[0]){
-//     return 'back-color-row';
-//   }
-// }
+
+
+
+
+/*
+	工单生产批次信息查询
+*/
+const scpconlist = ref(false);
+const scpconClick = async () => {
+  console.log(formData.value.工单编号)
+  searchInfolcd.value = formData.value.工单编号
+  scpconlist.value = true;
+  onSubmitlcd()//调用接口
+}
+//进入页面默认光标加载
+setTimeout(() => {
+	const inputElement = document.getElementById('searchInfo');
+	if (inputElement) {
+		inputElement.focus();		
+	}
+}, 100);
+			
+//搜索
+const searchInfolcd = ref('');
+const tableDatalcd = reactive([])
+//查询按钮
+const onSubmitlcd = () => {
+  _StaGetOrderList()
+};
+//搜索回车
+const Enterkeysearch = (event) => {
+   if (event.key === 'Enter') {
+      _StaGetOrderList();
+    }
+};
+//调用接口
+const _StaGetOrderList = async (node) => {
+  const StaGetOrderListdata = await StaGetOrderList({search:searchInfolcd.value});
+  console.log(StaGetOrderListdata)
+  if(StaGetOrderListdata.data.length === 0){
+    ElMessage({type: 'warning',message: '未搜索具体查询条件'})
+  }
+  tableDatalcd.splice(0,tableDatalcd.length,...StaGetOrderListdata.data);//表格数据
+};
+
+// 树形节点属性映射
+const treeDatalcd = reactive([]);
+const defaultProps = {
+  label: '流程单',
+  children: 'children',
+};
+//全局调用工单编号、印件号
+const _Gd_gdbhlcd = ref(null)
+const _Gd_yjnolcd = ref(null)
+const _GetorderDetail = ref(null)
+
+
+/*
+	弹窗页面
+*/
+const popdialog = ref(false);
+//双击
+const updateCompanyFunclcd = async (row) => {
+	console.log("双击",row)
+	_Gd_gdbhlcd.value = row['Gd_gdbh']
+	_Gd_yjnolcd.value =row['行号']
+	
+	const StaGetOrderDetaildata = await StaGetOrderDetail({ gdbh: row['Gd_gdbh'], yjno: row['行号'] });
+	let resultData = StaGetOrderDetaildata.data;
+	// 遍历对象，将 null 值替换为空字符串
+	Object.keys(resultData).forEach((key) => {
+	  if (resultData[key] === null) {
+	    resultData[key] = '';
+	  }
+	});
+	_GetorderDetail.value = resultData;
+	console.log("_GetorderDetail.value", _GetorderDetail.value);
+	
+	_StaGetList(row)
+	
+}
+
+//左侧树形节点点击事件
+const handleNodeClicklcd = (node) => {
+  _StaProcessList(node['num'])
+  _StaProcessAnomaly()
+};
+
+//获取左侧菜单栏
+const _StaGetList = async (row) => {
+  const StaGetListdata = await StaGetList({gdbh:row['Gd_gdbh'],yjno:row['行号']});
+  console.log(StaGetListdata.msg)
+  if(StaGetListdata.msg === '成功'){
+	  treeDatalcd.splice(0, treeDatalcd.length, ...StaGetListdata.data);
+	  popdialog.value = true
+  }else{
+	  console.log(StaGetListdata.msg)
+	  ElMessage({type: 'warning',message: StaGetListdata.msg})
+  }
+};
+
+//工艺及生产班组
+const lcdtableData = reactive([])
+const _StaProcessList = async (node) => {
+  const StaProcessListdata = await StaProcessList({gdbh:_Gd_gdbhlcd.value,yjno:_Gd_yjnolcd.value,num:node});
+  lcdtableData.splice(0,lcdtableData.length,...StaProcessListdata.data);
+};
+
+//制程异常记录
+const zcycjltableData = reactive([])
+const _StaProcessAnomaly = async () => {
+  const StaProcessAnomalydata = await StaProcessAnomaly({gdbh:_Gd_gdbhlcd.value,yjno:_Gd_yjnolcd.value});
+  zcycjltableData.splice(0,zcycjltableData.length,...StaProcessAnomalydata.data);
+};
+
+//退出按钮
+const ontuicclick = async () => {
+  popdialog.value = false
+};
+
+//退出按钮
+const ontuicclicks = async () => {
+  scpconlist.value = false
+};
+
+
+
+
+
 // 班组人员及分配比例
 const bzryplanUsageCellClass = ({row, column, rowIndex, columnIndex}) =>{
   if(formData.value['班组Id'] === row.ID){
@@ -5833,5 +6131,9 @@ const sbzyqdsatusCellClass = ({row, column, rowIndex, columnIndex}) =>{
   font-size: 16px;
   font-weight: bold;
 }
+/* tree组件背景高亮 */
+	:deep(.el-tree-node:focus > .el-tree-node__content){
+			background: #ff80ff !important;
+		}
 
 </style>