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

<template>
  <div>
    <layout>
		<h1 style="margin: 0%;margin-bottom: 6px;">出库领用</h1>
		<el-row :gutter="24" style="margin-bottom: 6px;">
			  <el-input v-model="add_searchInfo" placeholder="请扫描订单编号或输入生产款号模糊查询"  @input="handleInput"
				@keyup.enter="add_onSubmit" id="searchInput"  style="width: 340px;height: 50px;margin-left: 10px;">
			  </el-input>
			  <el-button type="primary" @click="Reporting_onSubmit" style="height: 50px;font-size: 20px;">选择领用</el-button>
			  <el-button type="primary" icon="reading" @click="details_onSubmit" style="height: 50px;font-size: 20px;">出库退还记录</el-button>
		</el-row>
      <layout>
		  
        <layout-content >
          <div class="gva-table-box">
           <el-table ref="multipleTable" style="width: 100%;height: 64vh" tooltip-effect="dark"
                      :row-style="{ height: '40px' }"  :header-cell-style="{ padding: '0px' }"
                      :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                      :data="restableData"  border row-key="ID" size="small"  
					  :cell-class-name="tableDataCellClass"
                      highlight-current-row="true"  @row-dblclick="updateCompanyFunc"
                      @row-click="tableRowClick" :show-overflow-tooltip="true"
                      @selection-change="handleSelectionChange">
			        <!-- <el-table-column type="selection" width="80" /> -->
              <el-table-column  align="left" label="订单编号" prop="订单编号" width="105" />
			  <el-table-column  align="left" label="客户编号" prop="客户编号" width="80"/>
              <el-table-column  align="left" label="生产款号" prop="生产款号" width="170"/>
              <el-table-column  align="left" label="款式" 	 prop="款式" 	width="170"/>
			  <el-table-column  align="left" label="接单日期" prop="接单日期" width="160"/>
              <el-table-column  align="left" label="创建人员" prop="创建人员" width="160"/>
			  <el-table-column  align="left" label="创建时间" prop="创建时间" width="160"/>
            </el-table>
            <div class="dialog-footer" style="text-align: left;margin-right: 60px;">
			</div>
          </div>
      </layout-content>
      </layout>
    </layout>
  </div>
  
  <el-dialog v-model="res_bomdialogFormVisible" :before-close="res_bomcloseDialog"  width="100%" style="height: 100%;margin: 0%;padding: 0px 10px 0px 10px;"  destroy-on-close>
	<div class="dialog-footer" style="margin: 0px;">
		<el-input v-model="add_lysearchInfo" placeholder="请扫描订单编号进行操作"
			@keyup.enter="add_lyonSubmit" id="ly_searchInput" style="width: 340px;height: 50px;margin-left: 10px;">
		</el-input>
		<el-button type="primary" @click="res_bomcloseDialog"  style="width: 100px;height: 50px;margin-left: 10px;">关 闭</el-button>
		<el-button type="primary" @click="print_lingyong" style="width: 100px;height: 50px;">增加至领用页</el-button>
		<el-button type="primary" @click="del_lingyong"  style="width: 100px;height: 50px;">删除面料领用</el-button>
	</div>
	
	<el-divider style="margin: 10px 0px 20px;" ><span style="font-size: 18px;color:red;font-weight: bold;margin-left: 20px;">绿色部分填写领用数量</span></el-divider>
	<el-descriptions class="margin-top" :column="4"  :size="size" border>
		<el-descriptions-item label="订单编号" class="ddh">{{ ddhformData['ddh'] }}</el-descriptions-item>
		<el-descriptions-item label="客户">{{ ddhformData['kh'] }}</el-descriptions-item>
		<el-descriptions-item label="生产款号">{{ ddhformData['sckh'] }}</el-descriptions-item>
		<el-descriptions-item label="款式">{{ ddhformData['ks'] }}</el-descriptions-item>
	</el-descriptions>
  	<div>
  		<el-table ref="paichengRef" :show-overflow-tooltip="true" highlight-current-row="true"
				  :row-style="{ height: '0px' }"  :header-cell-style="{ padding: '0px' }"
				  :cell-style="{ padding: '0px' }" :header-row-style="{ height: '0px' }"
  		          style="width: 100%;height: 22vh" border tooltip-effect="dark"
  		          :data="resbomtableData" row-key="ID" :cell-class-name="scfjfpxsCellClass">
  		  <template v-for="(item, idx) in resbom_tableColumns">
  		    <el-table-column #default="{ row, column, $index }" align="left" :label="item.label" :width="item.width" >
  		      <div v-if="['领用'].includes(item.prop)">
  		        <el-input v-model="row[item.prop]" :clearable="false" style='height: 30px;'
  		                  :id="`input${idx}${$index}`" @keyup="resbom_handleKeyDown($event, idx, $index, item.prop)"/>
  		      </div>
  		      <div v-else>{{ row[item.prop] }}</div>
  		    </el-table-column>
  		  </template>
  		</el-table>
  	</div>
	
	    <div class="print-container">
			<el-button type="primary" @click="res_bomenterDialog"  style="width: 100px;height: 50px;">一键领用</el-button>
	      <el-divider>
	        <span class="print-title" style="font-size: 18px;">面料领用页</span>
	      </el-divider>
		  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
		    <p style="font-size: 18px;margin-right: 20px;">领用单号: 
		      <el-input v-model="danhao" style="width: 200px;" disabled/>
		    </p>
			<p style="font-size: 18px;margin-right: 20px;">领用日期:
			  <el-input v-model="riqi" style="width: 200px;" disabled/>
			</p>
		  </div>
	      <div style="margin-top: 5px;">
	        <el-table ref="paichengRef1" :show-overflow-tooltip="true" highlight-current-row="true"
	                  :row-style="{ height: '30px' }"   :header-cell-style="{ padding: '0px' }"
	                  :cell-style="{ padding: '0px' }"  :header-row-style="{ height: '10px' }"
	                  style="width: 100%; height: 40vh"  border 
	                  tooltip-effect="dark"  :data="FabriccollartableData" 
	                  row-key="ID" :cell-class-name="scfjfpxsCellClass"
	                  @selection-change="FabriccollarhandleSelectionChange">
			  <el-table-column type="selection" width="45" />
	          <template v-for="(item, idx) in Fabriccollar_tableColumns">
	            <el-table-column #default="{ row, column, $index }" align="left"  :label="item.label" :width="item.width">
	              <div v-if="[''].includes(item.prop)">
	                <el-input v-model="row[item.prop]" :clearable="false" 
	                          :id="`input${idx}${$index}`" 
	                          @keyup="resbom_handleKeyDown($event, idx, $index, item.prop)"/>
	              </div>
	              <div v-else>{{ row[item.prop] }}</div>
	            </el-table-column>
	          </template>
	        </el-table>
	      </div>
		  <br>
		  <div style="display: flex; justify-content: space-around; align-items: center; margin-bottom: 10px;">
		    <p style="font-size: 18px;">出库人: 
			<el-input v-model="chukuren" style="width: 200px;" disabled/>
			</p>
		    <p style="font-size: 18px;">领用人: 
		      <el-input v-model="linguser" style="width: 200px;" />
		    </p>
		  </div>
	    </div>
  </el-dialog>
  
  <!--详情记录 -->
  <el-dialog v-model="pickingaddvisible" :before-close="()=> pickingaddvisible = false" style="width: 70%; margin: 5% auto; height: 79%;" :title="'出库退还记录'" destroy-on-close>
	   <div class="dialog-footer" style="bottom: 10px; right: 10px; width: 100%;">
		 <el-button  type="primary" @click="ckth_closeDialog" style="width: 80px;height: 40px;">关 闭</el-button>
	   </div>
	   <br>
		<div>
			<el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="出库记录"  @click="showTable('出库记录')"  name="first">
                <el-table ref="multipleTable"
                          :row-style="{ height: '30px' }"
                          :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                          :header-cell-style="{ padding: '0px' }"
                          :show-overflow-tooltip="true"
                          highlight-current-row="true"
						  @row-click="tableclick"
                          @row-dblclick="chukuupdateCompanyFunc"
                          style="width: 100%;height: 36vh" border
                          :summary-method="getSummaries" tooltip-effect="dark" :data="cktableData" row-key="ID" >
				  <el-table-column align="left" sortable label="出库单号" prop="单号"  width="140"/>				  
                  <el-table-column align="left" sortable label="订单编号" prop="订单编号"  width="140"/>
				  <el-table-column align="left" sortable label="款号" prop="款号"  width="180"/>
				  <el-table-column align="left" sortable label="数量" prop="数量"  width="105"/>
                  <el-table-column align="left" sortable label="出库人员" prop="出库人员"  width="160"/>
                  <el-table-column align="left" sortable label="出库时间" prop="出库时间"  width="160"/>
                </el-table>
              </el-tab-pane>
			  
			  <!-- <el-tab-pane label="入库记录"  @click="showTable('入库记录')"  name="second">
			    <el-table ref="multipleTable"
			              :row-style="{ height: '30px' }"
			              :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
			              :header-cell-style="{ padding: '0px' }"
			              :show-overflow-tooltip="true"
			              highlight-current-row="true"
						  @row-click="rukutableclick"
			              @row-dblclick="rukuupdateCompanyFunc"
			              style="width: 100%;height: 36vh" border
			              :summary-method="getSummaries" tooltip-effect="dark" :data="rukutableData" row-key="ID" >
			      <el-table-column align="left" sortable label="订单编号" prop="订单编号"  width="140"/>
				  <el-table-column align="left" sortable label="款号" prop="款号"  width="180"/>
				  <el-table-column align="left" sortable label="数量" prop="数量"  width="105"/>
			      <el-table-column align="left" sortable label="出库时间" prop="出库时间"  width="160"/>
			      <el-table-column align="left" sortable label="上报机台" prop="上报机台"  width="160"/>
			    </el-table>
			  </el-tab-pane> -->

              <el-tab-pane label="退还记录" @click="showTable('退还记录')" name="second">
                <el-table ref="multipleTable"
                          :row-style="{ height: '30px' }"
                          :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                          :header-cell-style="{ padding: '0px' }"
                          highlight-current-row="true"
                          :show-overflow-tooltip="true"
                          :cell-class-name="gysatusCellClass"
                          @row-dblclick="gdgyupdateCompanyFunc"
                          @row-click="clickybupdate2"
                          :row-class-name="rowClassStyle2"
                          style="width: 100%;height: 36vh" border tooltip-effect="dark" :data="thtableData" row-key="ID">
				  <el-table-column align="left" sortable label="订单编号" prop="订单编号"  width="140"/>
				  <el-table-column align="left" sortable label="款号" prop="款号"  width="180"/>
				  <el-table-column align="left" sortable label="数量" prop="数量"  width="105"/>
                  <el-table-column align="left" sortable label="出库时间" prop="出库时间"  width="160"/>
                  <el-table-column align="left" sortable label="上报机台" prop="上报机台"  width="160"/>
                </el-table>
              </el-tab-pane>
		   </el-tabs>
		</div>
  </el-dialog>

  <!--单号详情记录 -->
  <el-dialog v-model="details_pickingaddvisible" :before-close="()=> details_pickingaddvisible = false" style="width: 70%; margin: 5% auto; height: 79%;" :title="单据详情"
	destroy-on-close>
	   <div class="dialog-footer" style="bottom: 10px; right: 10px; width: 100%;">
		 <el-button  type="primary" @click="details_ckth_closeDialog" style="width: 80px;height: 40px;">关 闭</el-button>
		 <el-button type="danger"  @click="deldetail_delclick" style="width: 80px;height: 40px;"	v-if="del_details=== true" :disabled="details_Selection === '' "  class="bt"   >删除</el-button>
	   </div>
	   <br>
		<div>
			
                <el-table ref="multipleTable"
                          :row-style="{ height: '30px' }"
                          :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                          :header-cell-style="{ padding: '0px' }"
                          :show-overflow-tooltip="true"
                          highlight-current-row="true"
						  @row-click="tableclick"
                          @row-dblclick="ysupdateCompanyFunc"
						  @selection-change="detailSelectionChange"
                          style="width: 100%;height: 36vh" border
                          :summary-method="getSummaries" tooltip-effect="dark" :data="chuku_detailstableData" row-key="ID" >
				  <el-table-column   align="center" type="selection" width="40"/>
				  <el-table-column align="left" sortable label="出库单号" prop="单号"  width="140"/>
			      <el-table-column align="left" sortable label="订单编号" prop="订单编号"  width="140"/>
				  <el-table-column align="left" sortable label="物料名称" prop="物料名称"  width="140"/>
				  <el-table-column align="left" sortable label="客户编号" prop="款号"  width="180"/>
				  <el-table-column align="left" sortable label="数量" prop="数量"  width="105"/>
				  <!-- <el-table-column align="left" sortable label="入库人" prop="入仓人员"  width="160"/> -->
			      <el-table-column align="left" sortable label="出库人员" prop="出库人员"  width="160"/>
			      <el-table-column align="left" sortable label="出库时间" prop="出库时间"  width="160"/>
                </el-table>
		</div>
  </el-dialog>
  
</template>
<script>
//点击按钮显示下方表格
export default {
  data() {
    return {
      currentTable: '', // 当前展示的表格
      activeName: 'first',
      _ddhval:'',
	  add_gddialogFormVisible: true,
    };
  },
  methods: {
    
  }
};
</script>
<script setup>
// 全量引入格式化工具 请按需保留
import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
import {ref, reactive} from 'vue'
import {getSpotList,getSpotTab,orderSearch,outReport,orderBomList,FabricDetail,gitReceiptNumber,FabricDetaillist,FabricDetaildel} from '@/api/mes/job'
import { ElMessage, ElMessageBox,ElUpload, ElButton } from 'element-plus';
// import { get } from 'scriptjs';
import { useUserStore } from '@/pinia/modules/user'
defineOptions({name: 'Company'})
//获取用户登录信息
const userStore = useUserStore()
const _username = ref('')
_username.value = userStore.userInfo.userName + '/' + userStore.userInfo.nickName
console.log('获取用户名称',_username.value)
//全局调用获取当前日期
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}`;
//自动聚焦光标input
const getMachineMacdata = async () => {
	setTimeout(() => {
		const inputElement = document.getElementById('searchInput');
		if (inputElement) {
			inputElement.focus();		
		}
	}, 100); // 延迟100毫秒
}
getMachineMacdata();

//全局调用参数
const danhao = ref('')
const riqi = ref('')
const linguser = ref('')
const chukuren = ref('')
const add_searchInfo = ref('')//搜索
const add_lysearchInfo = ref('')//搜索
const restableData = reactive([])//表格
const _orderid = ref('')//订单子编号
const _kh = ref('')//生产款号

const handleInput = async ()=>{
	restableData.splice(0, restableData.length);//清空表格
	//订单信息数据查询【接口】
	const orderSearchdata = await orderSearch({search:add_searchInfo.value});
	if(orderSearchdata.data.length === 1){
		_orderid.value = orderSearchdata.data[0]['订单编号']
		add_searchInfo.value = orderSearchdata.data[0]['订单编号']
		ddhformData.ddh = orderSearchdata.data[0]['订单编号']
		ddhformData.kh = orderSearchdata.data[0]['客户编号']
		ddhformData.sckh = orderSearchdata.data[0]['生产款号']
		ddhformData.ks = orderSearchdata.data[0]['款式']
		add_lysearchInfo.value = add_searchInfo.value
		
		const gitReceiptNumberdata = await gitReceiptNumber({number:'CK'});
		console.log(gitReceiptNumberdata)
		danhao.value = gitReceiptNumberdata.data.number
		chukuren.value = userStore.userInfo.nickName
		linguser.value = gitReceiptNumberdata.data.username
		riqi.value = currentDates

	}else{
		restableData.splice(0,orderSearchdata.length,...orderSearchdata.data);
	}
}

//查询按钮
const add_onSubmit = async ()=>{
	restableData.splice(0, restableData.length);//清空表格
	//订单信息数据查询【接口】
	const orderSearchdata = await orderSearch({search:add_searchInfo.value});
	if(orderSearchdata.data.length === 1){
		res_bomdialogFormVisible.value = true
		_orderid.value = orderSearchdata.data[0]['订单编号']
		add_searchInfo.value = orderSearchdata.data[0]['订单编号']
		ddhformData.ddh = orderSearchdata.data[0]['订单编号']
		ddhformData.kh = orderSearchdata.data[0]['客户编号']
		ddhformData.sckh = orderSearchdata.data[0]['生产款号']
		ddhformData.ks = orderSearchdata.data[0]['款式']
		add_lysearchInfo.value = add_searchInfo.value
		
		const gitReceiptNumberdata = await gitReceiptNumber({number:'CK'});
		console.log(gitReceiptNumberdata)
		danhao.value = gitReceiptNumberdata.data.number
		chukuren.value = userStore.userInfo.nickName
		linguser.value = gitReceiptNumberdata.data.username
		riqi.value = currentDates

		Reporting_onSubmit()
	}else{
		restableData.splice(0,orderSearchdata.length,...orderSearchdata.data);
	}
};



//表格行点击
const tableRowClick = async (row)=>{
	console.log(row)
	add_searchInfo.value = row.订单编号
	_orderid.value = row.订单编号
	_kh.value = row.生产款号
	ddhformData.ddh = row['订单编号']
	ddhformData.kh = row['客户编号']
	ddhformData.sckh = row['生产款号']
	ddhformData.ks = row['款式']
}

//查询
const add_lyonSubmit = async ()=>{
	const orderSearchdata = await orderSearch({search:add_lysearchInfo.value});
	if(orderSearchdata.data.length === 1){
		add_lysearchInfo.value = orderSearchdata.data[0]['订单编号']
		ddhformData.ddh = orderSearchdata.data[0]['订单编号']
		ddhformData.kh = orderSearchdata.data[0]['客户编号']
		ddhformData.sckh = orderSearchdata.data[0]['生产款号']
		ddhformData.ks = orderSearchdata.data[0]['款式']
	}
	try {
    const orderBomListdata = await orderBomList({order:add_lysearchInfo.value});
	resbomtableData.value = orderBomListdata.data;
    const formattedData = orderBomListdata.data.map(item=>{
      item.物料名称 = item.物料名称;
      item.计划用料 = item.计划用料;
	  item.定额用料 = item.定额用料;
	  item.裁床实际用料 = item.裁床实际用料;
	  item.裁床领用面料 = item.裁床领用面料;
	  item.裁床退回仓库面料 = item.裁床退回仓库面料;
	  item.备注 = item.备注;
	  item.UNIQID = item.UNIQID;
	  item.领用 = '';
      return item
    });
	add_lysearchInfo.value = ''
  } catch (error) {
    console.error(error);
  }
};

const res_bomdialogFormVisible = ref(false)
const resbomtableData = ref([]);
const FabriccollartableData = ref([]);
const ddhformData = reactive({
  ddh: '',
  kh:'',
  sckh:'',
  ks:'',
});
const resbom_tableColumns = ref(
    [
		// { label: '订单编号', prop: '订单编号', width: '90' },
		// { label: '客户', prop: '客户编号', width: '70' },
		// { label: '生产款号', prop: '生产款号', width: '100' },
		// { label: '款式', prop: '款式', width: '100' },
		{ label: '物料名称', prop: '物料名称', width: '160' },
		{ label: '计划用料', prop: '计划用料', width: '105' },
		{ label: '定额用料', prop: '定额用料', width: '110' },
		{ label: '计划门幅', prop: '计划门幅', width: '100' },
		{ label: '定额门幅', prop: '定额门幅', width: '100' },
		{ label: '裁床实际用料', prop: '裁床实际用料', width: '115' },
		{ label: '裁床领用面料', prop: '裁床领用面料', width: '115' },
		{ label: '裁床退回仓库面料', prop: '裁床退回仓库面料', width: '150' },
		{ label: '入库总量', prop: '入库总量', width: '90' },
		{ label: '面料结余', prop: '面料结余', width: '90' },
		{ label: '本次领用', prop: '领用', width: '110' },
		// { label: '备注', prop: '备注', width: '120' },
		{ label: '投料单位', prop: '投料单位', width: '90' },
		// { label: 'UNIQID', prop: 'UNIQID', width: '80' },
    ]
)

const Fabriccollar_tableColumns = ref(
    [
		{ label: '订单编号', prop: '订单编号', width: '90' },
		{ label: '客户', prop: '客户编号', width: '70' },
		{ label: '生产款号', prop: '生产款号', width: '100' },
		{ label: '款式', prop: '款式', width: '100' },
		{ label: '物料名称', prop: '物料名称', width: '160' },
		{ label: '计划用料', prop: '计划用料', width: '105' },
		{ label: '定额用料', prop: '定额用料', width: '110' },
		{ label: '计划门幅', prop: '计划门幅', width: '100' },
		{ label: '定额门幅', prop: '定额门幅', width: '100' },
		{ label: '裁床实际用料', prop: '裁床实际用料', width: '115' },
		{ label: '裁床领用面料', prop: '裁床领用面料', width: '115' },
		{ label: '裁床退回仓库面料', prop: '裁床退回仓库面料', width: '150' },
		{ label: '入库总量', prop: '入库总量', width: '90' },
		{ label: '面料结余', prop: '面料结余', width: '90' },
		{ label: '本次领用', prop: '领用', width: '110'},
		// { label: '备注', prop: '备注', width: '120' },
		{ label: '投料单位', prop: '投料单位', width: '90' },
		// { label: 'UNIQID', prop: 'UNIQID', width: '80' },
    ]
)
//查询
const Reporting_onSubmit = async ()=>{
	if(_orderid.value === '' || _orderid.value === null){
		ElMessage({type: 'warning',message: '请扫描订单后，再操作此功能'})
	}else{
		add_lysearchInfo.value = add_searchInfo.value
		res_bomdialogFormVisible.value = true
		FabriccollartableData.value = []; 
		const gitReceiptNumberdata = await gitReceiptNumber({number:'CK'});
		console.log(gitReceiptNumberdata)
		danhao.value = gitReceiptNumberdata.data.number
		chukuren.value = userStore.userInfo.nickName
		linguser.value = gitReceiptNumberdata.data.username
		riqi.value = currentDates
		// const orderBomListlsit = await orderBomList({order:_orderid.value});
		// console.log(orderBomListlsit)
		_TestCoefficient();
	}
}
//bom数据获取
const _TestCoefficient = async ()=>{
  try {
    const orderBomListdata = await orderBomList({order:_orderid.value});
	console.log(orderBomListdata)
	resbomtableData.value = orderBomListdata.data;
    const formattedData = orderBomListdata.data.map(item=>{
      item.物料名称 = item.物料名称;
      item.计划用料 = item.计划用料;
	  item.定额用料 = item.定额用料;
	  item.裁床实际用料 = item.裁床实际用料;
	  item.裁床领用面料 = item.裁床领用面料;
	  item.裁床退回仓库面料 = item.裁床退回仓库面料;
	  item.备注 = item.备注;
	  item.UNIQID = item.UNIQID;
	  item.领用 = '';
      return item
    });
  } catch (error) {
    console.error(error);
  }
}
const resbom_handleKeyDown = (event, x, y, prop) => {
  const currentElement = document.getElementById(`input${x}${y}`);
  if (currentElement === null && currentElement === undefined) return
  let move = 0
  switch (event.keyCode) {
    case 13: // Enter
    case 40: // 向下箭头
      if (y < resbomtableData.value.length )
        document.getElementById(`input${x}${y + 1}`).focus();
      break;
    case 38: // 向上箭头
      if ( y > 0) {
        document.getElementById(`input${x}${y - 1}`).focus();
      }
      break;
    case 39: // 向左箭头
      if (x >= 0 && x <=6) {
        move = x + 1
      }
      document.getElementById(`input${move}${y}`).focus();
      break;
    case 37: // 向右箭头
      if (x = 0  && x <=6) {
        move = x - 1
      }
      document.getElementById(`input${move}${y}`).focus();
      break;
    default:
      break;
  }
}
const scfjfpxsCellClass = ({row, column, rowIndex, columnIndex}) =>{
  if (column.label === '本次领用') {
    return 'background-plan-usage-low';
  }
}

// 确定
const res_bomenterDialog = async() => {
	if(FabriccollartableData.value.length === 0){
		ElMessage({ type: 'warning',message: '请先添加领用信息'})
		return
	}
	if(linguser.value.length === 0){
		ElMessage({ type: 'warning',message: '请先添加领用信息'})
		return
	}
	const rawValueArray = FabriccollartableData._rawValue;
	const formattedData = rawValueArray.map(item => {
	  return {
	    order_id: ddhformData.ddh,
	    款号: ddhformData.sckh,
	    物料名称: item.物料名称 !== null ? item.物料名称 : "",
	    number: item.领用 !== null ? item.领用 : "",
	    rq: currentDate,
	    name: "出库",
		sys_id: userStore.userInfo.nickName,
		receipt_number:danhao.value,
		recipient:linguser.value
	  }
	});
	console.log(formattedData);
	
	const add_outReport = await outReport(formattedData);
	if (add_outReport.code === 0) {
		res_bomdialogFormVisible.value = false;
		ElMessage({type: 'success',message: '领用成功'})
	} else {
		ElMessage({ type: 'error',message: '领用失败'})
	}
}

// 取消
const res_bomcloseDialog = () => {
	res_bomdialogFormVisible.value = false;
}

// 增加至领用页
const print_lingyong = async () => {
	if(add_lysearchInfo.value === ''){
		setTimeout(() => {
			  const inputElement = document.getElementById('ly_searchInput');
			  if (inputElement) {
				  inputElement.focus();		
			  }
		 }, 100);//100毫秒
		return;
	}
	setTimeout(() => {
		  const inputElement = document.getElementById('ly_searchInput');
		  if (inputElement) {
			  inputElement.focus();		
		  }
	 }, 100);//100毫秒
	const filteredData = resbomtableData.value.filter(item => item.领用 && item.领用.trim() !== "");
  // 将过滤后的数据添加到 FabriccollartableData
  FabriccollartableData.value.push(...filteredData);
  add_lyonSubmit()
}

// //删除
// const del_lingyong = async () => {
//   if (!lySelection.value) {
//     console.log('没有选中任何行');
//     return;
//   }
 
//   const idsToDelete = lySelection.value.split(',').map(Number); // 确保转换为数字
//   console.log('要删除的ID:', idsToDelete);
//   console.log('当前数据:', FabriccollartableData.value);
 
//   FabriccollartableData.value = FabriccollartableData.value.filter(
//     item => !idsToDelete.includes(item.UNIQID)
//   );
 
//   console.log('删除后的数据:', FabriccollartableData.value);
//   lySelection.value = '';
// };

// const lySelection = ref('')
// const FabriccollarhandleSelectionChange = (selection) => {
//   const ids = selection.map(item => item.UNIQID); // 提取每行的 UniqId
//   lySelection.value = ids.join(','); // 将 UniqId 数组转换为逗号分隔的字符串
//   console.log(lySelection.value)
// };

//=============出库退还记录==================
const cktableData = reactive([])
const thtableData = reactive([])
const rukutableData = reactive([])

const pickingaddvisible = ref(false)//弹窗
// const detailData = reactive({})
const add_prinkformData = reactive({});
//详情记录
const details_onSubmit = async ()=>{
	cktableData.splice(0,cktableData.length)
	rukutableData.splice(0,rukutableData.length)
	thtableData.splice(0,thtableData.length)
	pickingaddvisible.value = true
	const FabricDetaillist = await FabricDetail({order:_orderid.value});
	const ruku_FabricDetaillist = await FabricDetail({order:_orderid.value,search:'入库'});
	console.log(FabricDetaillist)
	console.log(ruku_FabricDetaillist)
	rukutableData.splice(0,ruku_FabricDetaillist.length,...ruku_FabricDetaillist.data['入库记录']);
	cktableData.splice(0,FabricDetaillist.length,...FabricDetaillist.data['出库记录']);
	thtableData.splice(0,FabricDetaillist.length,...FabricDetaillist.data['退还记录']);
}
//领料取消
const ckth_closeDialog = async ()=>{
	pickingaddvisible.value = false
	//自动聚焦光标input
	getMachineMacdata();
}

const dh = ref('')
const type = ref('')
const details_pickingaddvisible = ref(false)
const chuku_detailstableData = reactive([])
const th_detailstableData = reactive([])
const chukuupdateCompanyFunc = async (row)=>{
	dh.value = row.单号
	type.value = 'rk'
	details_pickingaddvisible.value = true
	console.log(row)
	chuku_detailstableData.splice(0,chuku_detailstableData.length);
	const FabricDetaillistdata = await FabricDetaillist({order:row.单号,search:''});
	chuku_detailstableData.splice(0,FabricDetaillistdata.length,...FabricDetaillistdata.data['出库记录']);
	console.log(FabricDetaillistdata)
}
// 	const chukuupdateCompanyFunc = async (row)=>{
// 	dh.value = row.单号
// 	type.value = 'ck'
// 	details_pickingaddvisible.value = true
// 	console.log(row)
// 	const FabricDetaillistdata = await FabricDetaillist({order:row.单号,search:'出库'});
// 	console.log(FabricDetaillistdata)
// }
const thupdateCompanyFunc = async (row)=>{
	dh.value = row.单号
	type.value = 'th'
	details_pickingaddvisible.value = true
	console.log(row)
	const FabricDetaillistdata = await FabricDetaillist({order:row.单号,search:''});
	console.log(FabricDetaillistdata)
}
//详情页取消
const details_ckth_closeDialog = async ()=>{
	details_pickingaddvisible.value = false
	//自动聚焦光标input
	getMachineMacdata();
}

//表格复选框
const del_details = ref(true)//删除BOM资料
const details_Selection = ref('')//存储选中Uniqid
const detailSelectionChange = (selection, type) => {
  const ids = selection.map(item => {
    return item.id
  })
  details_Selection.value = ids.join(',')
  console.log("复选框",details_Selection.value)
}

// 删除详情按钮
const deldetail_delclick = async () => {
  try {
    // 弹出确认框
    await ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    // 用户点击“确定”后执行以下逻辑
    const params = {
		id: details_Selection._value,
		Mod_id: userStore.userInfo.nickName,
    };
    console.log('删除参数:', params);
    // 调用删除接口
    const res1 = await FabricDetaildel(params);
    if (res1.code === 0) {
      ElMessage.success('删除成功');
    } else {
      ElMessage.error('删除失败');
      return; // 如果删除失败，直接返回
    }
    // 重新获取BOM列表数据
	chuku_detailstableData.splice(0,chuku_detailstableData.length);
	const FabricDetaillistdata = await FabricDetaillist({order:dh.value,search:''});
	chuku_detailstableData.splice(0,FabricDetaillistdata.length,...FabricDetaillistdata.data['出库记录']);
  } catch (error) {
    // 用户点击“取消”或弹框关闭
    console.log('用户取消删除操作');
  }
};

// =========== 分页 ===========
// 分页相关的响应式变量
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>
/* 根据出库状态文字颜色 */
:deep(.status-plan-usage-low div) {
  color: #8c939d  !important;
}
:deep(.statusy-plan-usage-low div) {
  color: blue !important;
}
.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;
  }
}
.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;
}
/* 表格复选框大小调整 */
:deep(.el-checkbox.el-checkbox--small .el-checkbox__inner) {
    width: 45px; /* 复选框宽度 */
    height: 23px; /* 复选框高度 */
}
/*bom参数背景*/
:deep(.el-table__body .background-plan-usage-low div div div) {
  background: #80FA80 !important;
}
/* 选中某行时的背景色 */
:deep(.el-table__body tr.current-row) > td {
  background: #ff80ff !important;
}
: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__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: 5px !important;
}
.mab{
  margin-bottom: 5px;
}
/* 搜索样式 */
::v-deep .el-input__wrapper #searchInput {  
  font-size: 16px; 
}  
::v-deep(.el-descriptions__table tbody tr .is-bordered-label){
	width: 60px;
}
::v-deep(.el-descriptions__table tbody tr .el-descriptions__content){
	width: 120px;
}
</style>