mes-zs-admin-backend-ui/src/view/performance/houdaoshougong.vue

<template>
	<div>
	  <layout>
		  <layout-content >
		  <!-- <el-main> -->
			<div class="gva-table-box">
				<h1 style="margin: 0%;margin-bottom: 10px;">后道（手工确认）</h1>
				<el-row :gutter="24" style="margin-bottom: 15px;">
					<el-input v-model="add_searchInfo" placeholder="扫描标签二维码" 
								  @keyup.enter="add_onSubmit"
								id="searchInput" 
								  style="width: 230px;margin: 5px;height: 50px;">
								  </el-input>
					<el-button type="primary" icon="search" @click="add_onSubmit" style="margin: 5px;height: 50px;">查询</el-button>	
					
					<el-form-item label="机台号:" prop="deliveryDate" class="mab" style="font-size: 30px;margin: 10px;">
						<el-input v-model="add_formData['机台号']" style="width: 110px;height: 40px;" id="机台号" />
					</el-form-item>
					<el-form-item label="工序:" prop="deliveryDate" class="mab"style="font-size: 30px;margin: 10px;" label-width="90">
						<el-input v-model="add_formData['工序']" style="width: 110px;height: 40px;" id="工序" />
					</el-form-item>
					<el-form-item label="组别:" prop="deliveryDate" class="mab" style="font-size: 30px;margin: 10px;" label-width="90">
						<el-input v-model="add_formData['组别']" style="width: 110px;height: 40px;" id="组别" />
					</el-form-item>
					<el-form-item label="人员:" prop="deliveryDate" class="mab" style="font-size: 30px;margin: 10px;" label-width="90">
						<el-input v-model="add_formData['人员']" style="width: 110px;height: 40px;" id="人员" />
					</el-form-item>

				</el-row>
				
				<el-row :gutter="24">  
					<el-form-item label="数量:" prop="deliveryDate" class="mab" style="font-size: 30px;margin: 10px;" label-width="90">
						<el-input v-model="add_formData['数量']" style="width: 110px;height: 40px;" id="数量" />
					</el-form-item>
					<el-form-item label="尺码:" prop="deliveryDate" class="mab" style="font-size: 30px;margin: 10px;" label-width="90">
						<el-input v-model="add_formData['尺码']" style="width: 110px;height: 40px;" id="尺码" />
					</el-form-item>
					<el-form-item label="是否尾包:" prop="joinDate" style="font-size: 30px; margin: 10px;" label-width="150">  
					<!-- 假设 activeButtonValue 是从后端或某个方法获取的，这里直接硬编码为 0 或 1 -->  
					<div  
						:class="{'info-button': activeButtonValue === '1', 'default-button': activeButtonValue !== '1'}"  
						style="margin-top:-20px; margin-right:15px; height: 50px; width: 70px; display: flex; justify-content: center; align-items: center; cursor: not-allowed; border: 1px solid #ccc; border-radius: 4px; color: #000000;"  
						:style="{ backgroundColor: activeButtonValue === '1' ? '#ff0000' : '#808080' }"  
					>  
						是  
					</div>  
					<div  
						:class="{'info-button': activeButtonValue === '0', 'default-button': activeButtonValue !== '0'}"  
						style="margin-top:-20px; height: 50px; width: 70px; display: flex; justify-content: center; align-items: center; cursor: not-allowed; border: 1px solid #ccc; border-radius: 4px; color: #000000;"  
						:style="{ backgroundColor: activeButtonValue === '0' ? '#ff0000' : '#808080' }"  
					>  
						否  
					</div>  
					</el-form-item>  
				</el-row>  
					


				<el-row :gutter="24" style="margin-bottom: 15px;margin-left: 0px;">
					<div @contextmenu.prevent>
						 <el-table
							 ref="multipleTableRef"
							 style="width: 100%;height: 53vh"
							 tooltip-effect="dark"
							 :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"
							 @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="订单编号" width="140"/>
						  <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="140"/>
						  <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="140"/>
						  <el-table-column sortable align="left" label="是否尾包" prop="尾包" width="140"/>
						  <el-table-column sortable align="left" label="组别" prop="组别" width="140"/>
						  </el-table>
				  </div>
				</el-row>
					<div class="dialog-footer" style="text-align: left;margin-right: 60px;">
						<el-button type="primary" @click="add_Dialog" 	 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 getMachineMacdata = async () => {
  try {
	const Machine = '68-ED-A4-26-60-D1'
    const data  = await getMachineMac({sys_sbID:Machine,code:'后道'});
	add_formData['机台号'] = data.data['机台号']
	add_formData['工序'] = data.data['生产工序']
	add_formData['组别'] = data.data['组别']
	add_formData['人员'] = data.data['组长']
  } catch (error) {
    console.error(error)
  }
}
getMachineMacdata();


//点击【查询】按钮DC2408001-1,01,8,10,0
const add_searchInfo = ref('')
const add_tableData = reactive([]);
const activeButtonValue = ref('')
const UniqId = ref('')
//全局获取颜色款式款号
const _yskskh= ref('')
const searcs = 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{
	if(searcs.value === ''){
		 const order =add_searchInfo.value;
		 const sys_sbID = add_formData['机台号']
		 const getSpotLists = await getSpotList({order:order,code:'后道',sys_sbID:sys_sbID});
		 activeButtonValue.value = getSpotLists.data.result.wb
		 UniqId.value = getSpotLists.data.result.UniqId
		 add_formData['数量'] = getSpotLists.data.result.sl
		 add_formData['尺码'] = getSpotLists.data.result.cm
		 //获取下面报工历史记录
		 add_tableData.splice(0,add_tableData.length,...getSpotLists.data.records);//表格数据
		 searcs.value = 1;
	}else{
		 add_Dialog();
	}
   
  }
}

  const AttendanceVisible=ref(false)
  //清空对象的属性值
  const gd_clearFormData = () => {
	Object.keys(add_formData).forEach(key => {
	  add_formData[key] = '';
	});
  };

  const add_formData = reactive({
	机台号: '',	
	工序: '',
	组别: '',
	人员: '',	
	尺码: '',
	数量: '',
	是否订单尾包: '',
  });
  

  const currentSlValue=ref('')
//后道确认按钮
const add_Dialog = async ()=>{
  if(add_searchInfo.value === ''){
    ElMessage({type: 'warning',message: '请勾选具体的出库订单后，再操作此功能'})
  }else{
		console.log(UniqId.value)
		// return false;
		const cf_gettab = await search({UniqId:UniqId.value,code:'后道'}); // 调用search函数  
		if (cf_gettab.code === 0) {
			const firstPart = add_searchInfo.value.split(',')[0];  
			const lsjltable = await getTab({order_id:firstPart,sczl_jtbh:add_formData['机台号']}); 
			console.log(lsjltable)
			add_tableData.splice(0,add_tableData.length,...lsjltable.data.records);
			add_searchInfo.value = '';  
			setTimeout(() => {
				const inputElement = document.getElementById('searchInput');
				if (inputElement) {
					inputElement.focus();		
				}
			}, 100); // 延迟100毫秒
			searcs.value = '';
			ElMessage({type: 'success', message: '报工成功'});  
		}

  }
}
	//  AttendanceVisible.value = false
  // 新增取消
  const add_closeDialog = () => {
	   AttendanceVisible.value = false
  };


 
  
  

  //单机
  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 dialogFormVisible = ref(false)
  const edit_formData = ref({})
  // 双击修改
  const updateCompanyFunc = async (row) => {
	  console.log(row)
	  dialogFormVisible.value = true;
	  Object.assign(edit_formData.value,row);
	  edit_formData.value['是否订单尾包'] = row['是否尾包'];
	// let code = row['员工编号'];
	// const getStaffInfo_data = await getStaffInfo({code:code});
	// formDataTest.value = getStaffInfo_data.data;
  };
  
  // 弹窗修改确定
  const edit_Dialog = async () => {
	  _ygjbzledit();
  }
  
  // 弹窗修改关闭
  const edit_closeDialog = () => {
	  dialogFormVisible.value = false
  }
  
  const _ygjbzledit = async ()=>{
	// const formattedData = {
	//   '订单子编号': edit_formData.value['订单子编号'],
	//   '订单号': edit_formData.value['订单号'],
	//   '生产款号': edit_formData.value['生产款号'],
	//   '款式': edit_formData.value['款式'],
	//   '颜色': edit_formData.value['颜色'],
	//   '制单总数': edit_formData.value['制单总数'],
	//   '组别': edit_formData.value['组别'],
	//   '排产单数': edit_formData.value['排产单数'],
	//   '尺码': edit_formData.value['尺码'],
	//   '报工数量': edit_formData.value['报工数量'],
	//   '是否为尾包': edit_formData.value['是否为尾包'],
	//   '工序': edit_formData.value['工序'],
	//   '验片人': edit_formData.value['验片人'],
	//   '日期': edit_formData.value['日期'],
	// };
	// try {
	//   const edid_edit_formData = await 修改接口(formattedData);
	//   if (edid_edit_formData .code === 0) {
	//     dialogFormVisible.value = false;
	//     ElMessage({type: 'success',message: '更新成功'})
	//   } else {
	//     ElMessage({ type: 'error',message: '更新失败'})
	//   }
	// } catch (error) {
	//   console.error(error);
	// }
  }
  
  // =========== 分页 ===========
  // 分页相关的响应式变量
  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;
  }
  .mab{
	margin-bottom: 5px;
  }
  /* 点击按钮改变颜色 */
  .active-button {  
	  background-color: #ff0000;
  }
  .default-button {  
	  background-color: #808080;
  }
  </style>