mes-sdai-admin-backend-ui/src/view/performance/baozhuangbaogong.vue

<template>
	<div>
	  <layout>
		  <layout-content >
		  <!-- <el-main> -->
			<div class="gva-table-box">
				<h1 id="title" style="margin: 0%;margin-bottom: 10px;">包装报工</h1>
				<el-row :gutter="24" style="margin-bottom: 0px;">
		          <el-input v-model="add_searchInfo" placeholder="请扫描子订单编号" @keyup.enter="add_onSubmit" id="searchInput" 
				  style="width: 220px;height: 50px;margin-left: 10px;"></el-input>
			      <el-button type="primary" icon="search" @click="add_onSubmit" style="height: 50px;width: 80px;">查询</el-button>
					<el-form-item label="机台号:" prop="jitaihao" class="mab" style="font-size: 30px;margin: 10px 0px 10px 0px;" label-width="116px">
					    <el-input v-model="add_formData['机台号']" readonly style="width: 100px; height: 40px;" id="jitaihao" />
					</el-form-item>
					<el-form-item label="工序:" prop="gongxu" class="mab" style="font-size: 30px;margin: 10px 0px 10px 0px;" label-width="86px">
					    <el-input v-model="add_formData['工序']" readonly style="width: 100px; height: 40px;" id="gongxu" />
					</el-form-item>
					<el-form-item label="组别:" prop="zubie" class="mab" style="font-size: 30px; margin: 10px 0px 10px 0px;" label-width="86px">
					    <el-input v-model="add_formData['组别']" readonly style="width: 140px; height: 40px;" id="zubie" />
					</el-form-item>
					<el-form-item label="人员:" prop="renyuan" class="mab" style="font-size: 30px; margin: 10px 0px 10px 0px;" label-width="86px">
					    <el-input v-model="add_formData['人员']" readonly style="width: 110px; height: 40px;" id="renyuan" />
					</el-form-item>
		      </el-row>
				
				<el-row :gutter="24">  
					<el-form-item label="尺码:" prop="chima" class="mab" style="font-size: 30px;margin: 10px 0px 10px 0px;" label-width="110">
						<el-input v-model="add_formData['尺码']" readonly style="width: 70px;height: 40px;" id="chima" />
					</el-form-item>
					<el-form-item label="总数量:" prop="shuliang" class="mab" style="font-size: 30px;margin: 10px 0px 10px 0px;" label-width="120">
						<el-input v-model="add_formData['总数量']" readonly style="width: 80px;height: 40px;" id="shuliang" />
					</el-form-item>
					<el-form-item label="剩余数量:" prop="shuliang" class="mab" style="font-size: 30px;margin: 10px 0px 10px 0px;" label-width="150">
						<el-input v-model="add_formData['剩余数量']" readonly style="width: 80px;height: 40px;" id="shuliang" />
					</el-form-item>
					<el-form-item label="上报数量:" prop="sbsl" class="mab" style="font-size: 30px;margin: 10px 0px 10px 0px;" label-width="150">
						<el-input v-model="add_formData['上报数量']" @input="baogongslpd"  style="width: 110px;height: 40px;" id="sbsl" />
					</el-form-item>
					<el-form-item label="是否尾包" prop="joinDate" style="font-size: 30px; margin: 10px 0px 10px 0px;" label-width="150">  
					<!-- 假设 activeButtonValue 是从后端或某个方法获取的，这里直接硬编码为 0 或 1 -->  
					<div :class="{'info-button': activeButtonValue === '1', 'default-button': activeButtonValue !== '1'}"    
						style="margin-top:-6px; margin-right:15px; height: 50px; width: 60px; 
						display: flex; justify-content: center; align-items: center; cursor: not-allowed; border: 1px solid #ccc;
						 border-radius: 4px; color: #000000; font-size: 24px;"    
						:style="{ backgroundColor: activeButtonValue === '1' ? '#ff0000' : '#808080' }">是</div>    
					<div :class="{'info-button': activeButtonValue === '0', 'default-button': activeButtonValue !== '0'}"    
						style="margin-top:-6px; height: 50px; width: 60px; 
						display: flex; justify-content: center; align-items: center; cursor: not-allowed; border: 1px solid #ccc; 
						border-radius: 4px; color: #000000; font-size: 24px;"    
						:style="{ backgroundColor: activeButtonValue === '0' ? '#ff0000' : '#808080' }">否</div>
					</el-form-item>  
				</el-row>  

				<layout-content >
					<el-main>
						<el-row :gutter="24" style="margin-bottom: 15px;margin-left: 0px;">
							<div @contextmenu.prevent>
								<el-table ref="multipleTableRef" style="width: 100%;height: 53vh"
									:row-style="{ height: '50px' }" :header-cell-style="{ padding: '5px', fontSize: '20px' }"
									:cell-style="{ padding: '10px', fontSize: '20px' }" :header-row-style="{ height: '20px' }"
									:data="add_tableData" border row-key="ID" size="small"
									highlight-current-row="true" tooltip-effect="dark"
									@row-dblclick="add_updateCompanyFunc" @row-click="add_tableRowClick" @row-contextmenu="handleRightClick"
									:show-overflow-tooltip="true" @selection-change="add_xpSelectionChange">
								<!-- <el-table-column type="selection" width="70" /> -->
								<el-table-column sortable align="left" label="流水号" prop="serial" width="100"/>
								<el-table-column sortable align="left" label="报工时间" prop="sys_rq" width="160"/>
								<el-table-column sortable align="left" label="订单编号" prop="订单编号" width="130"/>
								<el-table-column sortable align="left" label="订单子编号" prop="子订单编号" width="140"/>
								<!-- <el-table-column sortable align="left" label="款式" prop="款式" width="140"/> -->
								<el-table-column sortable align="left" label="色系名称" prop="颜色" width="130"/>
								<el-table-column sortable align="left" label="尺码" prop="尺码" width="110"/>
								<el-table-column sortable align="left" label="数量" prop="数量" width="110"/>
								<el-table-column sortable align="left" label="上报数量" prop="上报数量" width="110"/>
								<el-table-column sortable align="left" label="是否尾包" prop="尾包" width="130"/>
								<el-table-column sortable align="left" label="组别" prop="组别" width="130"/>
								</el-table>
						</div>
						</el-row>
					</el-main>
				</layout-content>
					<div class="dialog-footer" style="text-align: left;margin-right: 60px;">
						<el-button type="primary" @click="add_Dialog" id="add_Dialog"	:disabled="add_Dialogonclick === false"  style="width: 110px;height: 60px;font-size: 20px;">确认</el-button>
					</div>
			</div>
		  <!-- </el-main> -->
		</layout-content>
	  </layout>
	</div>
  </template>
<script>
export default {
	methods: {
    handleKeyDown(event, prevId, currentId, nextId) {
      const currentElement = document.getElementById(currentId);
      const isEmpty = currentElement.value === '';
      const atStart = currentElement.selectionStart === 0;
      const atEnd = currentElement.selectionStart === currentElement.value.length;
      switch (event.keyCode) {
        case 13: // Enter
        case 40: // 向下箭头
          if (nextId) {
            document.getElementById(nextId).focus();
          }
          break;
        case 38: // 向上箭头
          if (prevId) {
            document.getElementById(prevId).focus();
          }
          break;
        case 8: // 删除键
          if (prevId && (isEmpty || atStart)) {
            document.getElementById(prevId).focus();
          }
          break;
        case 37: // 向左箭头
          if (prevId && atStart) {
            document.getElementById(prevId).focus();
          }
          break;
        case 39: // 向右箭头
          if (nextId && atEnd) {
            document.getElementById(nextId).focus();
	
          }
          break;
        default:
          break;
      }
    },
  },
};
</script>
<script setup>
// 全量引入格式化工具 请按需保留
import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
import {hiprint} from "vue-plugin-hiprint";
import {ref, reactive,nextTick,watch, setBlockTracking } from 'vue'
import {getSpotList,search,getMachineMac,getTab} from '@/api/mes/job'
import {ElMessage} from "element-plus";
import { get } from 'scriptjs';
defineOptions({name: 'Company'})
  
// =========== 全局获取当前日期 ===========
// currentDate  年月日 时分秒
// currentDates  年月日
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要补零
const day = String(today.getDate()).padStart(2, '0');
const hours = String(today.getHours()).padStart(2, '0');
const minutes = String(today.getMinutes()).padStart(2, '0');
const seconds = String(today.getSeconds()).padStart(2, '0');
const currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
const currentDates = `${year}-${month}-${day}`;

//全局调用
const _Machine = '68-ED-A4-26-5F-38'
const _code = '包装'
const _gx = '7'
const _gxmc = "包装"

//物理地址获取机台编号
const getMachineMacdata = async () => {
  try {
    const data  = await getMachineMac({sys_sbID:_Machine,code:_code});
	add_formData['机台号'] = data.data['机台号']
	add_formData['工序'] = data.data['生产工序']
	add_formData['组别'] = data.data['组别']
	add_formData['人员'] = data.data['组长']
	setTimeout(() => {
				const inputElement = document.getElementById('searchInput');
				if (inputElement) {
					inputElement.focus();		
				}
			}, 100); // 延迟100毫秒
  } catch (error) {
    console.error(error)
  }
}
getMachineMacdata();
const UniqId = ref('')
//搜索
const add_searchInfo = ref('')
//表格
const add_tableData = reactive([]);
//尾包选中值
const activeButtonValue = ref('')
//代表扫描两次自动保存
const searcs = ref('')
const _order = ref('')
//查询询钮
const add_onSubmit = async ()=>{
  if(add_searchInfo.value === '' || add_searchInfo.value === undefined){
    const WorkListdata = [];
    add_tableData.splice(0,add_tableData.length,...WorkListdata);
	ElMessage({type: 'warning',message: '请扫描小票二维码' })
  }else{
	add_formData['尺码'] = ''
	add_formData['总数量'] = ''
	add_formData['剩余数量'] = ''
	add_formData['上报数量'] = ''
	// if(searcs.value === ''){
		 _order.value = add_searchInfo.value;
		 const sys_sbID = add_formData['机台号']
		 //获取下面报工历史记录
		 const getSpotLists = await getSpotList({order:add_searchInfo.value,code:_code,sys_sbID:sys_sbID});
		 activeButtonValue.value = getSpotLists.data.result.wb
		 UniqId.value = getSpotLists.data.result.UniqId
		 add_formData['尺码'] = getSpotLists.data.result.cm
		 add_formData['总数量'] = getSpotLists.data.result.sl
		 add_formData['剩余数量'] = getSpotLists.data.result.ci_num
		 add_tableData.splice(0,add_tableData.length,...getSpotLists.data.records);
		//  searcs.value = 1;
		 add_searchInfo.value = ''
		 setTimeout(() => {
		const inputElement = document.getElementById('sbsl');
		if (inputElement) {
			inputElement.focus();		
		}
	}, 100); // 延迟100毫秒
		 
	// }else{
	// 	 add_Dialog();
	// }
  }
}
const AttendanceVisible=ref(false)
//清空对象的属性值
const gd_clearFormData = () => {
	Object.keys(add_formData).forEach(key => {
	  add_formData[key] = '';
	});
};
const add_formData = reactive({
	机台号: '',	
	工序: '',
	组别: '',
	人员: '',	
	尺码: '',
	数量: '',
	剩余数量: '',
	上报数量:'',
	是否订单尾包: '',

});
const add_Dialogonclick = ref(false)
function baogongslpd() {    
  // 将字符串转换为数字  
  const reportedQuantity = parseInt(add_formData['上报数量'], 10) || 0; // 使用10作为基数表示十进制，如果转换失败则返回0  
  const totalQuantity = parseInt(add_formData['剩余数量'], 10) || 0; // 同样处理  
  if (reportedQuantity > totalQuantity) {  
    ElMessage({ type: 'warning', message: '上报数量不能大于剩余数量' });  
    add_Dialogonclick.value = false;  
  } else {  
    add_Dialogonclick.value = true;  
  }  
}
const currentSlValue=ref('')
//后道确认按钮
const add_Dialog = async ()=>{
  if(_order.value === ''){
    ElMessage({type: 'warning',message: '请重新扫描小票二维码'})
  }else{
		console.log(_order.value.split(',')[0])
		let params ={}
		params.code = _code
		params.order = _order.value.split(',')[0].split('-')[0]
		params.order_id = _order.value.split(',')[0]
		params.gx = _gx
		params.gxmc = _gxmc
		params.cm = _order.value.split(',')[3]
		params.sl = _order.value.split(',')[4]
		params.sczl_jtbh = add_formData['机台号']
		params.sczl_bh = add_formData['组别']
		params.wb =  _order.value.split(',')[5]
		params.sys_id = add_formData['人员']
		params.UniqId = UniqId.value
		params.s_num = add_formData['上报数量']
		params.ci_num = add_formData['剩余数量']
		console.log(params)
		// return false;
		const cf_gettab = await search(params); // 调用search函数  
		if (cf_gettab.code === 0) {
			// const firstPart = add_searchInfo.value.split(',')[0];  
			//上报后历史记录表格刷新
			const lsjltable = await getTab({order_id:_order.value.split(',')[0],sczl_jtbh:add_formData['机台号']}); 
			add_tableData.splice(0,add_tableData.length,...lsjltable.data.records);
			// //上报后刷新表格数据
			// const getSpotLists = await getSpotList({order:_order.value.split(',')[0],code:_code,sys_sbID:sys_sbID});
			// add_tableData.splice(0,add_tableData.length,...getSpotLists.data.records);
			add_searchInfo.value = '';  
			setTimeout(() => {
				const inputElement = document.getElementById('searchInput');
				if (inputElement) {
					inputElement.focus();		
				}
			}, 100); // 延迟100毫秒
			// searcs.value = '';
			add_formData['尺码']=''
			add_formData['数量']=''
			add_formData['上报数量']=''
		//  searcs.value = 1;
		 add_searchInfo.value = ''
			ElMessage({type: 'success', message: '报工成功'});  
		}

  }
}
//单机
const add_tableRowClick = async (row) => {
roww.value = row
}
//双击
const add_updateCompanyFunc = async (row) => {

}
//右键
const handleRightClick = async (row) => {

}
//复选框
const add_xpSelectionChange = async (selection) => {
  console.log(selection.length)
  selectedRows.value = selection; 
  if (selection.length === 0) {
	  ElMessage({type: 'warning', message: '请勾选打印的数据' });
	  return false;
  }else if(selection.length>0){
	  allPrintData.value = selection.map((row) => {
	  let weibao = row['是否尾包'] === '是' ? 1 : 0;
	  const ewm = `${row['订单子编号']},01,${row['尺码']},${row['数量']},${weibao}`;
	  return {
		  emm: ewm,
		  zddbh: row['子订单编号'],
		  kh: row['款号'],
		  pm: row['款式'],
		  ys: row['颜色'],
		  cm: row['尺码'],
		  sl: row['数量'],
		  zb: row['组别'],
		  dyrq: currentDates,
		  wb: row['尾包']
	  };
  });
  }else{
	  allPrintData.value = [];
  }
  console.log(allPrintData.value)
}

// =========== 删除按钮 ===========
//记录复选框的值
const bgSelection = ref(null)
const baogong_del = () => {
  if(bgSelection.value === null || bgSelection.value === ''){
		ElMessage({type: 'warning',message: '请选择删除的数据' })
  }else{
	   console.log(bgSelection.value)
  }
}
  
// 保存当前选中的行数据
const table_selectrows = ref([]);

// 表格复选框选中变化时触发
const table_SelectionChange = (val) => {
  table_selectrows.value = val; // 将选中的行数据保存到 table_selectrows
}
  
 
// =========== 分页 ===========
// 分页相关的响应式变量
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
// 分页
const handleCurrentChange = (val) => {
page.value = val;
_getStaffList();
};

// 修改页面容量 点击多少条/页
const handleSizeChange = (val) => {
page.value = 10;//默认显示
pageSize.value = val;
_getStaffList();
};
</script>
<style scoped>
.form-container {
display: flex;
flex-wrap: wrap;
}

.form-column {
/*flex: 1;*/
margin-right: 15px; /* 调整列之间的间距 */
}
/* 左侧输入框宽度调整 */
.form-column .el-form-item .el-input {
width: 150px; /* 调整左侧输入框的宽度 */
}

/* 媒体查询，根据需要调整断点 */
@media screen and (max-width: 768px) {
.form-column {
  flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
  margin-right: 0;
}
}
/* 表格复选框大小调整 */
:deep(.el-checkbox.el-checkbox--small .el-checkbox__inner) {
  width: 30px; /* 复选框宽度 */
  height: 20px; /* 复选框高度 */
}

:deep(.el-checkbox.el-checkbox--small.is-checked .el-checkbox__inner::after) {
  transform: scale(1.2) rotate(45deg); /* 调整选中后的对勾大小 */
  top: 5%; /* 调整对勾位置 */
  left: 40%; /* 调整对勾位置 */
  width: 5px; /* 调整对勾宽度 */
  height: 9px; /* 调整对勾高度 */
}

/*:deep(.el-table td .cell) {*/
/*  line-height: 30px !important;*/
/*}*/
.JKWTree-container {
display: flex;
}
.JKWTree-tree {
/*width: 300px;*/
background-color: #fff;
padding: 10px;
margin-right: 20px;
}
.JKWTree-tree h3 {
font-size: 15px;
font-weight: 700;
margin: 10px 0;
}
.JKWTree-content {
flex: 1;
}
/* 图片上传 */
.upload-box {
width: 200px;
height: 200px;
border: 2px dashed #e2e2e2;
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
}
.uploaded-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.upload-icon {
font-size: 40px;
color: #c0c4cc;
}
.file-input {
display: none;
}
.el-table .warning-row {
background: oldlace;
}

/* 选中某行时的背景色 */
:deep(.el-table__body tr.current-row) > td {
background: #ff80ff !important;
}
</style>
<style scoped>
:deep(.el-table td .cell) {
line-height: 20px !important;
}
:deep(.el-tabs__header){
margin-bottom: 0;
}
.search{
margin-left: 0px !important;
margin-right: 10px !important;
}
.bt{
margin-left: 2px !important;
padding: 3px !important;
font-size: 12px;
}
.el-tabs__header{
margin: 0px !important;
}
.gva-table-box{
padding: 0px !important;
margin-left: -10px !important;
}
.mab{
margin-bottom: 5px;
}
/* 点击按钮改变颜色 */
.active-button {  
  background-color: #ff0000;
}
.default-button {  
  background-color: #808080;
}


/* 搜索样式 */
::v-deep .el-input__wrapper #searchInput {  
  font-size: 16px; 
} 
::v-deep .el-input__wrapper #jitaihao {  
  font-size: 18px; 
}  
::v-deep .el-input__wrapper #gongxu {  
  font-size: 18px; 
}  
::v-deep .el-input__wrapper #zubie {  
  font-size: 18px; 
}  
::v-deep .el-input__wrapper #renyuan {  
  font-size: 18px; 
} 
::v-deep .el-input__wrapper #shuliang {  
  font-size: 18px; 
  color: red;
} 
::v-deep .el-input__wrapper #chima {  
  font-size: 18px; 
} 
::v-deep .el-input__wrapper #sbsl {  
  font-size: 18px; 
  color: red;
} 
</style>