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="90" />	 
				<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="105" />	 
				<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="110"/>
				<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="90"/>
				<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="res_bomenterDialog"  style="width: 100px;height: 50px;">一键出库</el-button>
	  </div>
	   <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>
	  
	  <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>
	  <br>
		<div>
			<el-table
			  ref="paichengRef"
			  :show-overflow-tooltip="true"
			  highlight-current-row="true"
			  :row-style="{ height: ' 40px' }"
			  :header-cell-style="{ padding: '0px' }"
			  :cell-style="{ padding: '10px 0px 10px 0px' }"
			  :header-row-style="{ height: '0px' }"
			  style="width: 100%; height: 40vh"
			  border
			  tooltip-effect="dark"
			  :data="resbomtableData"
			  row-key="ID"
			  :cell-class-name="scfjfpxsCellClass">
			  <template v-for="(item, idx) in resbom_tableColumns" :key="idx">
				<el-table-column :label="item.label" :width="item.width">
				  <template #default="{ row, column, $index }">
					<!-- 判断该列是否需要输入框 -->
					<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>
				  </template>
				</el-table-column>
			  </template>
			</el-table>
		  
			<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: 100%; margin: 0% auto; height: 100%;" :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;display: inline-block;">关 闭</el-button>
		   <h3 style="color: red;display: inline-block;margin-left: 20px;">双击表格行查看入库单明细</h3>
		 </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' }" :header-cell-style="{ padding: '0px' }"
							:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
							:show-overflow-tooltip="true" highlight-current-row="true"
							@row-click="rukutableclick" @row-dblclick="chukuupdateCompanyFunc"
							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="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' }":header-cell-style="{ padding: '0px' }"
							:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
							highlight-current-row="true" :show-overflow-tooltip="true"
							:cell-class-name="gysatusCellClass"  :row-class-name="rowClassStyle2"
							@row-click="clickybupdate2" @row-dblclick="thupdateCompanyFunc"
							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: 100%; margin: 0% auto; height: 100%;" :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' }" :header-cell-style="{ padding: '0px' }"
							:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
							:show-overflow-tooltip="true" highlight-current-row="true"
							@row-click="tableclick" @row-dblclick="ysupdateCompanyFunc"
							@selection-change="detailSelectionChange" style="width: 100%;height: 65vh" border
							:summary-method="getSummaries" tooltip-effect="dark" :data="ruku_detailstableData" row-key="ID" >
					<el-table-column   align="center" type="selection" width="40"/>
					<el-table-column align="left"  label="订单编号" prop="订单编号"  width="110"/>
					<el-table-column align="left"  label="生产款号" prop="生产款号"  width="140"/>
					<el-table-column align="left"  label="物料名称" prop="物料名称"  width="140"/>
					<el-table-column align="left"  label="计划用料" prop="计划用料"  width="100"/>
					<el-table-column align="left"  label="定额用料" prop="定额用料"  width="100"/>
					<el-table-column align="left"  label="计划门幅" prop="计划门幅"  width="100"/>
					<el-table-column align="left"  label="定额门幅" prop="定额门幅"  width="100"/>
					<el-table-column align="left"  label="裁床实际用料" prop="裁床实际用料"  width="110"/>
					<el-table-column align="left"  label="裁床领用面料" prop="裁床领用面料"  width="110"/>
					<el-table-column align="left"  label="裁床退还数量" prop="裁床退还数量"  width="110"/>
					<el-table-column align="left"  label="库存总量" prop="库存总量"  width="100"/>
					<el-table-column align="left"  label="面料结余" prop="面料结余"  width="100"/>
					<el-table-column align="left"  label="入库数量" prop="入库数量"  width="100"/>
					<el-table-column align="left"  label="投料单位" prop="投料单位"  width="90"/>
					<el-table-column align="left"  label="入库人员" prop="入库人员"  width="120"/>
					<el-table-column align="left"  label="入库时间" prop="入库时间"  width="160"/>
					<el-table-column align="left"  label="款式" prop="款式"  width="140"/>
					<el-table-column align="left"  label="客户" prop="客户编号"  width="80"/>
				  </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,getInputDetail,outReport,
  InputOrderSearch,outReport,orderBomList,FabricDetail,gitReceiptNumber,FabricDetaillist,FabricDetaildel} from '@/api/mes/job'
  import { ElMessage, ElMessageBox,ElUpload, ElButton } from 'element-plus';
  import { useUserStore } from '@/pinia/modules/user'
  // import { get } from 'scriptjs';
  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 chukuren = ref('')
  const add_searchInfo = ref('')//搜索
  const add_lysearchInfo = ref('')//搜索
  const restableData = reactive([])//表格
  const _orderid = ref('')//订单子编号
  const _kh = ref('')//生产款号
  
  //input实时调用
  const handleInput = async ()=>{
	  restableData.splice(0, restableData.length);//清空表格
	  //订单信息数据查询【接口】
	  const orderSearchdata = await InputOrderSearch({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:'RK'});
		  danhao.value = gitReceiptNumberdata.data.number
		  chukuren.value = userStore.userInfo.nickName
		  riqi.value = currentDates
	  }else{
		  restableData.splice(0,orderSearchdata.length,...orderSearchdata.data);
	  }
  }
  
  //input回车事件
  const add_onSubmit = async ()=>{
	  //清空表格
	  restableData.splice(0, restableData.length);
	  const orderSearchdata = await InputOrderSearch({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:'RK'});
		  console.log(gitReceiptNumberdata)
		  danhao.value = gitReceiptNumberdata.data.number
		  chukuren.value = userStore.userInfo.nickName
		  riqi.value = currentDates
		  Reporting_onSubmit()
	  }else{
		  restableData.splice(0,orderSearchdata.length,...orderSearchdata.data);
	  }
  };
  
  
  
  //表格行点击
  const tableRowClick = async (row)=>{
	  add_searchInfo.value = row.订单编号
	  _orderid.value = row.订单编号
	  _kh.value = row.生产款号
	  
	  ddhformData.glbh = row['关联编号']
	  ddhformData.ddh = row['订单编号']
	  ddhformData.kh = row['客户编号']
	  ddhformData.sckh = row['生产款号']
	  ddhformData.wlbh = row['物料编码']
	  ddhformData.ks = row['款式']
  }
  
  //查询
  const add_lyonSubmit = async ()=>{
	  const orderSearchdata = await InputOrderSearch({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 Detailres = await getInputDetail({
		  关联编号:ddhformData.glbh,
		  订单编号:ddhformData.ddh,
		  物料编码:ddhformData.wlbh
		  });
		  console.log(Detailres)
		  
	  add_lysearchInfo.value = ''
	} catch (error) {
	  console.error(error);
	}
  };
  
  //选择入库弹窗
  const res_bomdialogFormVisible = ref(false)
  const resbomtableData = ref([]);
  const ddhformData = reactive({
	glbh: '',
	ddh: '',
	kh:'',
	sckh:'',
	ks:'',
	wlbh:'',
  });
  const resbom_tableColumns = ref(
	  [
		  { label: '批次号', prop: '批次号', width: '90' },
		  { label: '关联号', prop: '关联号', width: '80' },
		  { label: '物料编号', prop: '物料编号', width: '160' },
		  { label: '物料名称', prop: '物料名称', width: '100' },
		  { label: '计划用料', prop: '计划用料', width: '100' },
		  { label: '计划门幅', prop: 'BOM_计划门幅', width: '100' },
		  { label: '定额用料', prop: '定额用料', width: '100' },
		  { label: '定额门幅', prop: 'BOM_定额门幅', width: '100' },
		  { label: '实际门幅', prop: '实际门幅', width: '100' },
		  { label: '领用', prop: '领用', width: '100' },
		  { label: '入仓总量', prop: '入仓总量', width: '100' },
		  { label: '库存数量', prop: '库存数量', width: '100' },
		  { label: '领用数量', prop: '领用数量', width: '100' },
		  { label: '颜色', prop: 'BOM_颜色', width: '100' },
		  { label: '关联订单', prop: '关联订单', width: '110' },
		  { label: '单位', prop: '单位', width: '100' },
	  ]
  )
  
  //选择出库
  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
		  const gitReceiptNumberdata = await gitReceiptNumber({number:'CK'});
		  danhao.value = gitReceiptNumberdata.data.number
		  chukuren.value = userStore.userInfo.nickName
		  riqi.value = currentDates
		  _TestCoefficient();
	  }
  }
  //调用接口【获取入库面料信息】
  const _TestCoefficient = async () => {
	try {
	  const Detailres = await getInputDetail({
		关联编号: ddhformData.glbh,
		订单编号: ddhformData.ddh,
		物料编码: ddhformData.wlbh
	  });
  
	  console.log(Detailres);
  
	  // 如果接口返回的data是单条数据（对象），可以直接赋值
	  if (Detailres.code === 0 && Detailres.data) {
		resbomtableData.value = [Detailres.data];  // 将单条数据包装为数组，便于表格渲染
	  }
	} 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 === '领用' ||column.label === '实际门幅') {
	  return 'background-plan-usage-low';
	}
  }
  
  // 确定
  const res_bomenterDialog = async () => {
	  console.log(resbomtableData);
  
	  // 直接构造一个对象，不用 JSON 格式的索引
	  const formattedData = {
		  order_id: ddhformData.ddh,
		  款号: ddhformData.sckh,
		  物料编码: resbomtableData.value[0]['物料编号'],
		  物料名称: resbomtableData.value[0]['物料名称'],
		  number: resbomtableData.value[0]['领用'],
		  name: "出库",
		  sys_id: userStore.userInfo.nickName,
		  receipt_number: danhao.value,
		  客户编号: ddhformData.kh,
		  款式: ddhformData.ks,
		  rq: currentDate,
		  批次号: resbomtableData.value[0]['批次号'],
		  关联编号: resbomtableData.value[0]['关联号'],
		  实际门幅: resbomtableData.value[0]['实际门幅'],
	  };
  
	  console.log(formattedData);
  
	  // 异步调用输入数据的接口
	  const add_outReport = await outReport(formattedData);
  
	  // 根据返回的 code 进行提示
	  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 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);
	  thtableData.splice(0,thtableData.length);
	  rukutableData.splice(0,rukutableData.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 ruku_detailstableData = reactive([])
  const chuku_detailstableData = reactive([])
  const th_detailstableData = reactive([])
  const rukuupdateCompanyFunc = async (row)=>{
	  dh.value = row.单号
	  type.value = 'rk'
	  details_pickingaddvisible.value = true
	  ruku_detailstableData.splice(0,ruku_detailstableData.length);
	  const FabricDetaillistdata = await FabricDetaillist({order:row.单号,search:''});
	  ruku_detailstableData.splice(0,FabricDetaillistdata.length,...FabricDetaillistdata.data['入库记录']);
	  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列表数据
	  ruku_detailstableData.splice(0,ruku_detailstableData.length);
	  const FabricDetaillistdata = await FabricDetaillist({order:dh.value,search:''});
	  ruku_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>