mes-ai-admin-backend-ui/src/view/performance/caiqiebaogong.vue

<template>
  <div>
	<layout>
	  <layout-content >
		<div class="gva-table-box">
			<h1 style="margin: 0%;margin-bottom: 10px;">裁切完工报工</h1>
		      <el-row :gutter="24" style="margin-bottom: 5px;">
		          <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-row>

			  <el-row :gutter="24">
		          <el-form-item label="尺码/制单数合计:" class="mab" prop="keyOrder" label-width="240" style="font-size: 30px;margin: 5px;">
		              <el-input v-model="cmformdata.cm1" disabled style="width: 90px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm2" disabled style="width: 90px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm3" disabled style="width: 90px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm4" disabled style="width: 90px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm5" disabled style="width: 90px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm6" disabled style="width: 90px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm7" disabled style="width: 90px;height: 40px;"/>
		              <el-input v-model="cmformdata.cm8" disabled style="width: 90px;height: 40px;"/>
					  <el-input v-model="cmformdata.cm9" disabled style="width: 90px;height: 40px;"/>	
		              <el-input v-model="cmformdata.cm10" disabled style="width: 90px;height: 40px;"/>
					  <el-input v-model="cmformdata.cm11" disabled style="width: 90px;height: 40px;"/>
		          </el-form-item>
		      </el-row>
		      

		      
		      <el-row :gutter="24">
		          <el-form-item label="本次实裁新增:" class="mab" prop="keyOrder" label-width="240" style="font-size: 30px;margin: 5px;">
		              <el-input  v-model="scsformdata.scs1"@input="updateTotal" style="width: 90px;height: 40px;" id="scs1" @keydown="handleKeyDown($event, 'scs10', 'scs1', 'scs2')"/>
		              <el-input  v-model="scsformdata.scs2"@input="updateTotal" style="width: 90px;height: 40px;" id="scs2" @keydown="handleKeyDown($event, 'scs1', 'scs2', 'scs3')"/>
		              <el-input  v-model="scsformdata.scs3"@input="updateTotal" style="width: 90px;height: 40px;" id="scs3"@keydown="handleKeyDown($event, 'scs2', 'scs3', 'scs4')"/>
		              <el-input  v-model="scsformdata.scs4"@input="updateTotal" style="width: 90px;height: 40px;" id="scs4"@keydown="handleKeyDown($event, 'scs3', 'scs4', 'scs5')"/>
		              <el-input  v-model="scsformdata.scs5"@input="updateTotal" style="width: 90px;height: 40px;" id="scs5"@keydown="handleKeyDown($event, 'scs4', 'scs5', 'scs6')"/>
		              <el-input  v-model="scsformdata.scs6"@input="updateTotal" style="width: 90px;height: 40px;" id="scs6"@keydown="handleKeyDown($event, 'scs5', 'scs6', 'scs7')"/>
		              <el-input  v-model="scsformdata.scs7"@input="updateTotal" style="width: 90px;height: 40px;" id="scs7"@keydown="handleKeyDown($event, 'scs6', 'scs7', 'scs8')"/>
		              <el-input  v-model="scsformdata.scs8"@input="updateTotal" style="width: 90px;height: 40px;" id="scs8"@keydown="handleKeyDown($event, 'scs7', 'scs8', 'scs9')"/>
		              <el-input  v-model="scsformdata.scs9"@input="updateTotal" style="width: 90px;height: 40px;" id="scs9"@keydown="handleKeyDown($event, 'scs8', 'scs9', 'scs10')"/>
					        <el-input  v-model="scsformdata.scs10"@input="updateTotal" style="width: 90px;height: 40px;" id="scs10"@keydown="handleKeyDown($event, 'scs9', 'scs10', 'scs1')"/>
					        <el-input  v-model="scsformdata.sctotal" disabled style="width: 90px;height: 40px;" id="sctotal"/>
		          </el-form-item>
		      </el-row>
          <!-- <el-row :gutter="24">
		          <el-form-item label="总的制单数合计/总的实裁数累计:" class="mab" prop="keyOrder" label-width="390" style="font-size: 30px;margin:5px;">
		              <el-input v-model="zdsformdata.zds1" disabled style="width: 90px;height: 40px;" id="zds1"/>
		              <el-input v-model="zdsformdata.zds2" disabled style="width: 90px;height: 40px;" id="zds2"/>
		              <el-input v-model="zdsformdata.zds3" disabled style="width: 90px;height: 40px;" id="zds3"/>
		              <el-input v-model="zdsformdata.zds4" disabled style="width: 90px;height: 40px;" id="zds4"/>
		              <el-input v-model="zdsformdata.zds5" disabled style="width: 90px;height: 40px;" id="zds5"/>
		              <el-input v-model="zdsformdata.zds6" disabled style="width: 90px;height: 40px;" id="zds6"/>
		              <el-input v-model="zdsformdata.zds7" disabled style="width: 90px;height: 40px;" id="zds7"/>
		              <el-input v-model="zdsformdata.zds8" disabled style="width: 90px;height: 40px;" id="zds8"/>
		              <el-input v-model="zdsformdata.zds9" disabled style="width: 90px;height: 40px;" id="zds9"/>
					        <el-input v-model="zdsformdata.zds10" disabled style="width: 90px;height: 40px;" id="zds10"/>
					        <el-input v-model="zdsformdata.zdtotal" disabled style="width: 90px;height: 40px;" id="zds11"/>
		          </el-form-item>
		      </el-row> -->

				<el-row :gutter="24" style="margin-bottom: 15px;">
					<el-table ref="multipleTable" style="width: 100%;height: 41vh" 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="updateCompanyFunc"
                      @row-click="tableRowClick" :show-overflow-tooltip="true"
                      @selection-change="handleSelectionChange">
			  <!-- <el-table-column type="selection" width="55" /> -->
			  <el-table-column  sortable  align="center" label="订单编号" prop="订单编号" width="120"/>
              <el-table-column  sortable align="left" label="订单子编号" prop="子订单编号"  width="130"/>
              <el-table-column  sortable  align="left" label="生产款号" prop="生产款号" width="120" />
              <el-table-column  sortable  align="left" label="款式" prop="款式" width="110" />
              <el-table-column  sortable  align="left" label="颜色" prop="颜色" width="80"  />
              <el-table-column  sortable  align="left" label="制单总数" prop="zdtotal" width="110" />
              <el-table-column  sortable  align="left" label="实裁总数" prop="sctotal" width="110" />
              <el-table-column  sortable  align="left" label="单位" prop="单位" width="80" />
              <!-- <el-table-column  sortable  align="left" label="工序" prop="工序" width="80" /> -->
              <el-table-column  sortable  align="left" label="验片人" prop="Sys_id" width="100" />
              <el-table-column  sortable  align="left" label="日期" prop="Sys_rq" width="160" />
            </el-table>
			</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-dialog v-model="DialogVisible" title="是否订单尾包" destroy-on-close width="30%" style="top: 20%;">
				  <h3>请再次确认是否该订单产品已全部报工，该批为订单尾包？</h3>
				 <div class="dialog-footer" style="text-align: right;">
					 <el-button @click="confirmDialogVisible">取消</el-button>
					 <el-button type="primary" @click="handleConfirm">确认</el-button>
				 </div>
			   </el-dialog>
  
		  <!-- </el-main> -->
		</layout-content>
	  </layout>
	</div>
  </template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      formDataTest: {
        imageUrl: '' // 添加一个字段来保存上传的图片路径
      },
      rule: {} // 初始化rule对象
    };
  }, 
  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 {ref, reactive} from 'vue'
import {getSpotList,getInfo} from '@/api/mes/job'
import {ElMessage} from "element-plus";
defineOptions({name: 'Company'})

//
//全局调用获取当前日期
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 add_searchInfo = ref('')
//清空对象的属性值
const gd_clearFormData = () => {
  Object.keys(add_formData).forEach(key => {
    add_formData[key] = '';
  });
};
// 尺码
const cmformdata = reactive({
  cm1:'',
  cm2:'',
  cm3:'',
  cm4:'',
  cm5:'',
  cm6:'',
  cm7:'',
  cm8:'',
  cm9:'',
  cm10:'',
  cm11:'合计',
});
// 制单数
const zdsformdata = reactive({
  scs1: 0,  
  scs2: 0,  
  scs3: 0,  
  scs4: 0,  
  scs5: 0,  
  scs6: 0,  
  scs7: 0,  
  scs8: 0,  
  scs9: 0,  
  scs10: 0,  
  sctotal: 0 
});
// 实裁数
const scsformdata = reactive({
  scs1:'',
  scs2:'',
  scs3:'',
  scs4:'',
  scs5:'',
  scs6:'',
  scs7:'',
  scs8:'',
  scs9:'',
  scs10:'',
  sctotal:'',
});
//实采相加
function updateTotal() {  
  // 直接指定要累加的属性名  
  const relevantKeys = ['scs1', 'scs2', 'scs3', 'scs4', 'scs5', 'scs6', 'scs7', 'scs8', 'scs9', 'scs10'];  
  const values = relevantKeys.map(key => parseInt(scsformdata[key], 10) || 0); // 使用 || 0 来处理可能的 NaN 或 undefined/null  
  scsformdata.sctotal = values.reduce((sum, value) => sum + value, 0);  
}  
// const sctotal = async ()=>{
// 	return [  
//       scsformdata.scs1,  
//       scsformdata.scs2,  
//       scsformdata.scs3,  
//       scsformdata.scs4,  
//       scsformdata.scs5,  
//       scsformdata.scs6,  
//       scsformdata.scs7,  
//       scsformdata.scs8,  
//       scsformdata.scs9,  
//     ].reduce((total, currentValue) => total + currentValue, 0);  
// }
const add_tableData = 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{
    const order =add_searchInfo.value;
	_order.value =add_searchInfo.value;
    const getSpotLists = await getSpotList({order:order,code:'裁切'});
	console.log(getSpotLists)
	add_tableData.value = getSpotLists.data.data;

	const keys1 = ['cm1', 'cm2', 'cm3', 'cm4','cm5','cm6','cm7','cm8','cm9','cm10','cm11',];
	// const keys2 = ['zds1', 'zds2', 'zds3', 'zds4','zds5','zds6','zds7','zds8','zds9','zds10','zdtotal',];
	if(order.includes('-')){
		for (let key of keys1) {  
			if (getSpotLists.data.list[0].hasOwnProperty(key)) { // 确保键存在于对象中  
				cmformdata[key] = getSpotLists.data.list[0][key];  
			}  
		}  
		// for (let key of keys2) {  
		// 	if (getSpotLists.data.list[0].hasOwnProperty(key)) { // 确保键存在于对象中  
		// 		zdsformdata[key] = getSpotLists.data.list[0][key];  
		// 	}  
		// }  
		setTimeout(() => {
        const inputElement = document.getElementById('scs1');
        if (inputElement) {
            inputElement.focus();		
        }
    }, 100); // 延迟100毫秒
	}else{
		for (let key of keys1) {  
			cmformdata[key] = '';  
		}  
		for (let key of keys2) {  
			zdsformdata[key] = '';  
		}   
	}
    setTimeout(() => {
        const inputElement = document.querySelector('#searchInput');
        if (inputElement) {
            inputElement.focus();
        }
    }, 100); // 延迟100毫秒
  }
};

//复选框选择
const ckSelection = ref('')
const handleSelectionChange = (selection, type) => {
  const ids = selection.map(item => {
    return item.子订单编号
  })
  ckSelection.value = ids.join(',')
  console.log(ckSelection.value)
}

//确认出库按钮
const add_Dialog = async ()=>{
  if(_order.value === ''){
    ElMessage({type: 'warning',message: '请扫描子订单后，再操作此功能'})
  }else{
	if (_order.value.indexOf('-') !== -1) {
	    let params = {}
	    for (let i = 1; i <= 10; i++) {  
	    const key = `scs${i}`; // 动态构建键名  
	    	if (scsformdata.hasOwnProperty(key)) { // 检查 scsformdata 是否包含该属性  
	    		params[key] = scsformdata[key]; // 将属性复制到 params  
	    	}  
	    }  
	    params.sctotal = scsformdata['sctotal'];
	    params.order = _order.value;//子订单编号
	    params.rq = currentDates;//时间
	    console.log(params)
	    //裁切完工报工
	    const baogong_getInfo = await getInfo(params);
	    if (baogong_getInfo.code === 0) {
	      ElMessage({type: 'success',message: '报工成功'});
	        const getSpotToLists = await getSpotToList();
	        add_tableData.splice(0,add_tableData.length,...getSpotToLists.data.data);
	        add_searchInfo.value = ''
	    } else {
	      ElMessage({ type: 'error',message: '出库失败'})
	    }
	} else {
		ElMessage({type: 'warning',message: '请扫描子订单后，再操作此功能'})
	}
    
  }
}


// =========== 分页 ===========
// 分页相关的响应式变量
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-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;
}
</style>