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

<template>
  <div>
    <layout>
      <layout-header>
        <div class="">
          <!--按钮部分-->
          <el-form ref="elSearchFormRef" class="demo-form-inline" :rules="searchRule" @keyup.enter="onSubmit">
            <el-form-item>
              <el-input v-model="searchInfo" placeholder="搜索" clearable style="width: 180px;height:40px;"></el-input>
              <el-button type="primary"  @click="onSubmit"  		
			  style="margin: 0px 5px 0px 0px;width: 80px;height:40px;border-radius: 5%;" icon="search" >查询</el-button>
			  <el-button type="primary"  @click="onAttendance" 		
			  style="margin: 0px 5px 0px 0px;width: 80px;height:40px;border-radius: 5%;">新增</el-button>
              <el-button type="primary"  @click="baogong_del" 		
			  style="margin: 0px 5px 0px 0px;width: 80px;height:40px;border-radius: 5%;float: right;background-color: red">删除</el-button>
			  <el-button type="primary"  @click="onxiaopiaoclick" 	
			  style="margin: 0px 5px 0px 0px;width: 80px;height:40px;border-radius: 5%;background-color: #20a53a;">补打小票</el-button>
            </el-form-item>
          </el-form>
        </div>
      </layout-header>

      <layout>
        <!--左侧树侧形结构-->
        <layout-sider :resize-directions="['right']" :width="190" style="margin-right: 10px;">
          <div class="JKWTree-tree" style="height: 200px">
            <h3>车缝完工报工</h3>
            <el-tree :data="treeData" class="treecolor" @node-click="handleNodeClick"></el-tree>
          </div>
        </layout-sider>

        <!-- 右侧区域 -->
        <layout-content >
        <el-main>
          <div class="gva-table-box">
            <!-- 表格数据 -->
			<el-table ref="multipleTable" style="width: 100%;height: 65vh" tooltip-effect="dark"
				  :row-style="{ height: '20px' }"  :header-cell-style="{ padding: '0px' }"
				  :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
				  :data="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="70" />
				<el-table-column  sortable 	align="left" label="订单子编号" 	prop="订单子编号"  	width="115"/>
				<el-table-column  sortable  align="left" label="订单号" 		prop="订单号" 		width="115"/>
				<el-table-column  sortable  align="left" label="生产款号" 	prop="生产款号" 		width="120" />
				<el-table-column  sortable  align="left" label="款式" 		prop="款式" 		width="100" />
				<el-table-column  sortable  align="left" label="颜色" 		prop="颜色" 		width="80"  />
				<el-table-column  sortable  align="left" label="制单总数" 	prop="制单总数" 		width="100" />
				<el-table-column  sortable  align="left" label="组别" 		prop="组别" 		width="100" />
				<el-table-column  sortable  align="left" label="排产单数" 	prop="排产单数" 		width="100" />
				<el-table-column  sortable  align="left" label="尺码" 		prop="尺码" 		width="70" />
				<el-table-column  sortable  align="left" label="报工数量" 	prop="报工数量" 		width="100" />
				<el-table-column  sortable  align="left" label="是否尾包" 	prop="是否尾包" 		width="100" />
				<el-table-column  sortable  align="left" label="工序" 		prop="工序" 		width="80" />
				<el-table-column  sortable  align="left" label="验片人" 		prop="验片人" 		width="90" />
				<el-table-column  sortable  align="left" label="日期" 		prop="日期" 		width="100" />
			</el-table>
            <!-- 分页 -->
            <div class="gva-pagination">
              <el-pagination layout="total" :current-page="page" :page-size="pageSize"
               :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
<!--              <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]"-->
<!--                             :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />-->
            </div>
          </div>
		  
          <!-- 修改弹窗 -->
			<el-dialog v-model="dialogFormVisible" :before-close="edit_closeDialog" destroy-on-close style="width: 100%; height: 100%;margin: 0%;">
				<h1 style="margin: 0%;margin-bottom: 10px;">修改</h1>
				<el-row :gutter="24">
					<el-col :span="10">
						<el-form-item label="订单子编号:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['订单子编号']" style="width: 60%; height: 40px;" id="订单子编号" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="订单号:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['订单号']" style="width: 60%; height: 40px;" id="订单号:" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="10">
						<el-form-item label="生产款号:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['生产款号']" style="width: 60%; height: 40px;" id="生产款号" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="款式:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['款式']" style="width: 60%; height: 40px;" id="款式" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24" >
					<el-col :span="10">
						<el-form-item label="颜色:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['颜色']" style="width: 60%; height: 40px;" id="颜色" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="制单总数:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['制单总数']" style="width: 60%; height: 40px;" id="制单总数" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24" >
					<el-col :span="10">
						<el-form-item label="组别:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['组别']" style="width: 60%; height: 40px;" id="组别" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="排产单数:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['排产单数']" style="width: 60%; height: 40px;" id="排产单数" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24" >
					<el-col :span="10">
						<el-form-item label="尺码:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['尺码']" style="width: 60%; height: 40px;" id="尺码" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="报工数量:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['报工数量']" style="width: 60%; height: 40px;" id="报工数量" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24" >
					<el-col :span="10">
						<el-form-item label="是否尾包:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-select v-model="edit_formData['是否订单尾包']" style="width: 60%; height: 40px;" id="是否订单尾包">
								<el-option label="是" value="是"></el-option>
								<el-option label="否" value="否"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="工序:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['工序']" style="width: 60%; height: 40px;" id="工序" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24" style="margin-bottom: 20px;">
					<el-col :span="10">
						<el-form-item label="验片人:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['验片人']" style="width: 60%;" id="验片人" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="日期:" prop="deliveryDate" class="mab" label-width="180" style="font-size: 30px;margin: 10px;">
							<el-input v-model="edit_formData['日期']" style="width: 60%;" id="日期" />
						</el-form-item>
					</el-col>
				</el-row>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="edit_closeDialog"  style="width: 110px;height: 60px;font-size: 20px;">取消</el-button>
						<el-button type="primary" @click="edit_Dialog"  style="width: 110px;height: 60px;font-size: 20px;">确认</el-button>
					</div>
				</template>
			</el-dialog>

		 <!-- 新增弹窗 -->
		  <el-dialog v-model="AttendanceVisible"  destroy-on-close style="width: 100%;height: 100%;margin: 0px;">
			  <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: 270px;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: 120px;height: 40px;" id="机台号" />
			      </el-form-item>
				  <el-form-item label="工序:" prop="deliveryDate" class="mab"style="font-size: 30px;margin: 10px;" label-width="100">
					  <el-input v-model="add_formData['工序']" style="width: 120px;height: 40px;" id="工序" />
				  </el-form-item>
				  <el-form-item label="组别:" prop="deliveryDate" class="mab" style="font-size: 30px;margin: 10px;" label-width="100">
					  <el-input v-model="add_formData['组别']" style="width: 120px;height: 40px;" id="组别" />
				  </el-form-item>
				  <el-form-item label="人员:" prop="deliveryDate" class="mab" style="font-size: 30px;margin: 10px;" label-width="100">
					  <el-input v-model="add_formData['人员']" style="width: 120px;height: 40px;" id="人员" />
				  </el-form-item>
			
				  <el-form-item label="尺码:" prop="joinDate" style="font-size: 30px;" label-width="110">
					<el-select v-model="add_formData['尺码']" style="width: 120px;" id="尺码">
					  <el-option label="32" value="32"></el-option>
					  <el-option label="33" value="33"></el-option>
					  <el-option label="34" value="34"></el-option>
					  <el-option label="35" value="35"></el-option>
					  <el-option label="36" value="36"></el-option>
					</el-select>
				</el-form-item>
				 <el-form-item label="数量:" prop="joinDate" style="font-size: 30px;"  label-width="110">
					<el-input v-model="add_formData['数量']" style="width: 150px;height: 40px;" id="人员" />
				</el-form-item>
				<el-form-item label="是否尾包:" prop="joinDate" style="font-size: 30px;"  label-width="150">
					<el-select v-model="add_formData['是否订单尾包']" style="width: 120px;height: 40px;" id="尺码" @change="wbSelectChange">
					  <el-option label="是" value="是"></el-option>
					  <el-option label="否" value="否"></el-option>
					</el-select>
				  </el-form-item>
			  </el-row>
		      <el-row :gutter="24" style="margin-bottom: 15px;">
				  <div @contextmenu.prevent>
					   <el-table
						   ref="multipleTableRef"
						   style="width: 100%;height: 40vh"
						   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="S" prop="S" width="140"/>
						<el-table-column sortable align="left" label="M" prop="M" width="140"/>
						<el-table-column sortable align="left" label="L" prop="L" width="140"/>
						<el-table-column sortable align="left" label="XL" prop="XL" width="140"/>
						<el-table-column sortable align="left" label="2XL" prop="2XL" width="140"/>
						</el-table>
				</div>
		      </el-row>
			  
		      <template #footer>
		          <div class="dialog-footer" >
		              <el-button 				@click="add_closeDialog" style="width: 110px;height: 60px;font-size: 20px;">取消</el-button>
		              <el-button type="primary" @click="add_Dialog" 	 style="width: 110px;height: 60px;font-size: 20px;">确认</el-button>
					  <el-button type="primary" @click="add_printxp"	 style="width: 110px;height: 60px;font-size: 20px;">打印小票</el-button>
		          </div>
		      </template>
		  </el-dialog>

			<!-- 是否订单尾包确认弹窗 -->
			 <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>
    </layout>
  </div>
</template>
<script>
export default {
 
};
</script>
<script setup>
// 全量引入格式化工具 请按需保留
import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
import {hiprint} from "vue-plugin-hiprint";
import {ref, reactive,nextTick } from 'vue'
import {getCustom, getDepartment, getProductData,getStaffInfo, getStaffList, ygjbzledit,clockUpdate} from '@/api/yunyin/yunying'
import {ElMessage} from "element-plus";
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 treeData = ref({})
const DataListdata = async () => {
  try {
    const data = 
    [
      {label : '2024.7.16'},
      {label : '2024.7.15'},
      {label : '2024.7.14'},
      {label : '2024.7.13'},
      {label : '2024.7.12'},
      {label : '2024.7.11'}
    ];
    treeData.value = data
  } catch (error) {
    console.error(error);
  }
};
DataListdata();
// 表格部分
const tableData = reactive([]);

//点击左侧树形 获取右侧table列表
const handleNodeClick = async (node) => {
  _getStaffList();  // 执行获取员工列表的函数
};

// =========== 搜索 ===========
const searchInfo = ref('')
const _department_code = ref(null)
//点击【查询】按钮
const onSubmit = () => {
  // _department_code.value = '';
  if(searchInfo.value === ''){
    tableData.length = 0;
  }else{
    _getStaffList();
  }
};

//表格
const row_onclick = ref(null); 
//表格行点击
const tableRowClick = async (row) => {
	console.log(row)
  row_onclick.value = row
}

const _getStaffList = async ()=>{
	console.log(searchInfo.value)
    try {
		const WorkListdata = [
		    {
		      '序号':'1',
		      '订单子编号':'2408001-1',
			  '订单号':'2408001',
		      '生产款号':'2401-1622款',
		      '款式':'连衣裙',
		      '颜色':'红色',
			  '制单总数':'90',
			  '组别':'车缝1组',
			  '排产单数':'50',
			  '尺码':'32',
			  '报工数量':'10',
			  '是否尾包':'否',
		      '工序':'仓库出库',
		      '验片人':'xxx',
		      '日期':'2024-07-16'
		    },
			{
			  '序号':'2',
			  '订单子编号':'2408001-2',
			  '订单号':'2408001',
			  '生产款号':'2402-1623款',
			  '款式':'长袖',
			  '颜色':'蓝色',
			  '制单总数':'90',
			  '组别':'车缝2组',
			  '排产单数':'60',
			  '尺码':'35',
			  '报工数量':'58',
			  '是否尾包':'否',
			  '工序':'仓库出库',
			  '验片人':'xxx',
			  '日期':'2024-07-16'
			},
			{
			  '序号':'3',
			  '订单子编号':'2408002-2',
			  '订单号':'2408002',
			  '生产款号':'2403-1624款',
			  '款式':'西服',
			  '颜色':'白色',
			  '制单总数':'90',
			  '组别':'车缝3组',
			  '排产单数':'60',
			  '尺码':'35',
			  '报工数量':'58',
			  '是否尾包':'否',
			  '工序':'仓库出库',
			  '验片人':'xxx',
			  '日期':'2024-07-16'
			},
			{
			  '序号':'4',
			  '订单子编号':'2408003-3',
			  '订单号':'2408003',
			  '生产款号':'2403-1625款',
			  '款式':'裤子',
			  '颜色':'黑色',
			  '制单总数':'90',
			  '组别':'车缝4组',
			  '排产单数':'40',
			  '尺码':'36',
			  '报工数量':'37',
			  '是否尾包':'是',
			  '工序':'仓库出库',
			  '验片人':'xxx',
			  '日期':'2024-07-16'
			},
		    
		];
		console.log(WorkListdata)
		tableData.splice(0,tableData.length,...WorkListdata);//表格数据
		// total.value =WorkListdata.data.total;//共多少条
  } catch (error) {
    console.error(error);
  }
}

// =========== 新增按钮 ===========
const AttendanceVisible=ref(false)
const add_tableData = reactive([]);

//清空对象的属性值
const gd_clearFormData = () => {
  Object.keys(add_formData).forEach(key => {
    add_formData[key] = '';
  });
};
//新增按钮
const onAttendance = () => {
    AttendanceVisible.value=true
	setTimeout(() => {
        const inputElement = document.querySelector('#searchInput');
        if (inputElement) {
            inputElement.focus();
        }
    }, 100); // 延迟100毫秒
	gd_clearFormData();
	add_formData['机台号'] = '车缝'
	add_formData['工序'] = '车缝'
	add_formData['组别'] = '服装厂1组'
	add_formData['人员'] = 'xxx'
	add_searchInfo.value = ''
	const WorkListdata = [];
	add_tableData.splice(0,add_tableData.length,...WorkListdata);
};
const add_formData = reactive({
  机台号: '',
  工序: '',
  组别: '',
  人员: '',
  尺码: '',
  数量: '',
  是否订单尾包: '',
});

// 新增确定
const add_Dialog = () => {
   // AttendanceVisible.value = false
};
// 新增取消
const add_closeDialog = () => {
     AttendanceVisible.value = false
};
const DialogVisible = ref(false)
// 是否订单尾包选择是弹窗
const wbSelectChange = (value) => {
	console.log(value)
	if (value === '是') {
		DialogVisible.value = true
	}
};
// 确定
const handleConfirm = () => {
	add_formData['是否订单尾包'] = '是'
	DialogVisible.value = false
};
// 取消
const confirmDialogVisible = () => {
	add_formData['是否订单尾包'] = '否'
	DialogVisible.value = false
};

// =========== 新增搜索 ===========
const add_searchInfo = 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{
	console.log(add_searchInfo.value)
	if(add_searchInfo.value === '2408001'){
		const WorkListdata = [
		    {
			  '订单子编号':'2408001-1',
		      '订单号':'2408001',
		      '生产款号':'2401-1622款',
		      '款式':'连衣裙',
			  '颜色':'红色',
		      'S':'34',
			  'M':'12',
			  'L':'53',
			  'XL':'44',
			  '2XL':'15'
		    },
			{
			  '订单子编号':'2408001-2',
			  '订单号':'2408001',
			  '生产款号':'2401-1623款',
			  '款式':'长袖',
			  '颜色':'蓝色',
			  'S':'23',
			  'M':'26',
			  'L':'48',
			  'XL':'67',
			  '2XL':'12'
			},
		];
		add_formData['尺码'] = '32'
		add_formData['数量'] = '10'
		add_formData['是否订单尾包'] = '否'
		add_tableData.splice(0,add_tableData.length,...WorkListdata);//表格数据
	}else if(add_searchInfo.value === '2408002'){
		const WorkListdata = [
		    {
			  '订单子编号':'2408002-2',
		      '订单号':'2408002',
		      '生产款号':'2402-1624款',
		      '款式':'西服',
		      '颜色':'白色'
		    },
		];
		add_formData['尺码'] = '35'
		add_formData['数量'] = '58'
		add_formData['是否订单尾包'] = '否'
		add_tableData.splice(0,add_tableData.length,...WorkListdata);//表格数据
	}else if(add_searchInfo.value === '2408003'){
		const WorkListdata = [
		    {
			  '订单子编号':'2408003-3',
		      '订单号':'2408003',
		      '生产款号':'2403-1625款',
		      '款式':'西服',
		      '颜色':'白色'
		    },
		];
		add_formData['尺码'] = '35'
		add_formData['数量'] = '58'
		add_formData['是否订单尾包'] = '是'
		add_tableData.splice(0,add_tableData.length,...WorkListdata);//表格数据
	}else if(add_searchInfo.value === '2408001-1'){
		const WorkListdata = [
		    {
			  '订单子编号':'2408001-1',
		      '订单号':'2408001',
		      '生产款号':'2401-1622款',
		      '款式':'连衣裙',
			  '颜色':'红色',
		      'S':'34',
			  'M':'12',
			  'L':'53',
			  'XL':'44',
			  '2XL':'15'
		    },
		];
		add_formData['尺码'] = '32'
		add_formData['数量'] = '10'
		add_formData['是否订单尾包'] = '否'
		add_tableData.splice(0,add_tableData.length,...WorkListdata);//表格数据
	}else if(add_searchInfo.value === '2408001-2'){
		const WorkListdata = [
			{
			  '订单子编号':'2408001-2',
			  '订单号':'2408001',
			  '生产款号':'2401-1623款',
			  '款式':'长袖',
			  '颜色':'蓝色',
			  'S':'23',
			  'M':'26',
			  'L':'48',
			  'XL':'67',
			  '2XL':'12'
			},
		];
		add_formData['尺码'] = '32'
		add_formData['数量'] = '10'
		add_formData['是否订单尾包'] = '否'
		add_tableData.splice(0,add_tableData.length,...WorkListdata);//表格数据
	}
	setTimeout(() => {
	    const inputElement = document.querySelector('#searchInput');
	    if (inputElement) {
	        inputElement.focus();
	    }
	}, 100); // 延迟100毫秒
	add_searchInfo.value = ''
  }
};

// =========== 新增打印小票 ===========
const jsondata = {"panels":[{"index":0,"name":1,"height":296.6,"width":210,"paperHeader":328.5,"paperFooter":832.5,"printElements":[{"options":{"left":207.5,"top":335,"height":61.5,"width":211.5,"title":"这是更新后的元素","right":418.9921875,"bottom":397.2421875,"vCenter":313.2421875,"hCenter":366.4921875,"field":"zddbh","coordinateSync":false,"widthHeightSync":false,"hideTitle":true,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":0,"top":337.5,"height":60,"width":207,"title":"子订单编号","coordinateSync":false,"widthHeightSync":false,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"right":187.74375915527344,"bottom":392.25,"vCenter":84.24375915527344,"hCenter":360.75},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":432.5,"top":380,"height":159,"width":159,"title":"二维码","qrcodeType":"qrcode","testData":"qrcode","right":590.7421875,"bottom":538.2421875,"vCenter":511.2421875,"hCenter":458.7421875,"field":"emm","qrCodeLevel":0,"coordinateSync":false,"widthHeightSync":false,"hideTitle":true},"printElementType":{"title":"二维码","type":"qrcode"}},{"options":{"left":85,"top":400,"height":61.5,"width":337.5,"title":"这是更新后的元素","right":297,"bottom":463.5,"vCenter":191.25,"hCenter":432.75,"field":"kh","coordinateSync":false,"widthHeightSync":false,"hideTitle":true,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"qid":"zddbh_1"},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":0,"top":400,"height":60,"width":84,"title":"款号","coordinateSync":false,"widthHeightSync":false,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"right":209.49375915527344,"bottom":455.4937505722046,"vCenter":105.99375915527344,"hCenter":423.9937505722046},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":0,"top":460,"height":60,"width":84,"title":"品名","coordinateSync":false,"widthHeightSync":false,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"right":207.75,"bottom":522.4921875,"vCenter":104.25,"hCenter":492.4921875},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":85,"top":462.5,"height":61.5,"width":342,"title":"这是更新后的元素","right":295.2421875,"bottom":523.9921875,"vCenter":189.4921875,"hCenter":493.2421875,"field":"pm","coordinateSync":false,"widthHeightSync":false,"hideTitle":true,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"qid":"kh_1"},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":85,"top":525,"height":61.5,"width":211.5,"title":"这是更新后的元素","right":293.7421875,"bottom":585.4921875,"vCenter":187.9921875,"hCenter":554.7421875,"field":"ys","coordinateSync":false,"widthHeightSync":false,"hideTitle":true,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"qid":"kh_2"},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":0,"top":525,"height":60,"width":84,"title":"颜色","coordinateSync":false,"widthHeightSync":false,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"right":209.49375915527344,"bottom":580.5,"vCenter":105.99375915527344,"hCenter":549},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":0,"top":587.5,"height":60,"width":82.5,"title":"尺码","coordinateSync":false,"widthHeightSync":false,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"right":209.49375915527344,"bottom":642.9937591552734,"vCenter":105.99375915527344,"hCenter":611.4937591552734},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":85,"top":590,"height":61.5,"width":211.5,"title":"这是更新后的元素","right":295.9921875,"bottom":651.24609375,"vCenter":190.2421875,"hCenter":620.49609375,"field":"cm","coordinateSync":false,"widthHeightSync":false,"hideTitle":true,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"qid":"kh_3"},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":0,"top":650,"height":60,"width":82.5,"title":"数量","coordinateSync":false,"widthHeightSync":false,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"right":209.49375915527344,"bottom":705.4968795776367,"vCenter":105.99375915527344,"hCenter":673.9968795776367},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":85,"top":652.5,"height":61.5,"width":211.5,"title":"这是更新后的元素","right":298.2421875,"bottom":714,"vCenter":192.4921875,"hCenter":683.25,"field":"sl","coordinateSync":false,"widthHeightSync":false,"hideTitle":true,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"qid":"kh_4"},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":450,"top":705,"height":61.5,"width":120,"title":"这是更新后的元素","right":570.9937362670898,"bottom":765.75,"vCenter":510.99373626708984,"hCenter":735,"field":"wb","coordinateSync":false,"widthHeightSync":false,"hideTitle":true,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"qid":"kh_7"},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":362.5,"top":707.5,"height":60,"width":87,"title":"尾包","coordinateSync":false,"widthHeightSync":false,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"right":450.24373626708984,"bottom":765.4968795776367,"vCenter":406.74373626708984,"hCenter":735.4968795776367},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":85,"top":710,"height":61.5,"width":276,"title":"这是更新后的元素","right":298.2421875,"bottom":771.99609375,"vCenter":192.4921875,"hCenter":741.24609375,"field":"zb","coordinateSync":false,"widthHeightSync":false,"hideTitle":true,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"qid":"kh_5"},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":0,"top":712.5,"height":60,"width":82.5,"title":"组别","coordinateSync":false,"widthHeightSync":false,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"right":209.49375915527344,"bottom":768,"vCenter":105.99375915527344,"hCenter":736.5},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":0,"top":765,"height":60,"width":168,"title":"打印日期","coordinateSync":false,"widthHeightSync":false,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"right":215.74687957763672,"bottom":814.7437648773193,"vCenter":112.24687957763672,"hCenter":783.2437648773193},"printElementType":{"title":"这是更新后的元素","type":"text"}},{"options":{"left":170,"top":767.5,"height":61.5,"width":420,"title":"这是更新后的元素","right":381,"bottom":828.75,"vCenter":275.25,"hCenter":798,"field":"dyrq","coordinateSync":false,"widthHeightSync":false,"hideTitle":true,"fontSize":40,"textContentVerticalAlign":"middle","qrCodeLevel":0,"qid":"kh_6"},"printElementType":{"title":"这是更新后的元素","type":"text"}}],"paperNumberLeft":568.5,"paperNumberTop":330,"paperNumberContinue":true,"watermarkOptions":{"content":"vue-plugin-hiprint","rotate":25,"timestamp":true,"format":"YYYY-MM-DD HH:mm"},"panelLayoutOptions":{}}]}


// 右键点击行时触发
const roww = ref(null)
const selectedRows = ref([]);
const printdata = ref({});

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

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

}
//复选框
const add_xpSelectionChange = (selection, type) => {
    console.log(selection);
    if (selection.length > 1) {
        // 当选择超过一个时，给出提示并只保留最后一个选择的行
        ElMessage({
            type: 'warning',
            message: '您只能选择一个订单子编号'
        });
        // 重置选择项
        selectedRows.value = []; // 清空之前的选择
        selection.splice(0, selection.length); // 清空当前选择数组
        return false;
    } else if (selection.length === 1) {
        // 只保留最后选择的那一行数据
        selectedRows.value = [selection[0]];

        // 将选中的数据赋值给 printdata
        const selectedRow = selection[0];
		let weibao; 
		if (add_formData['是否尾包'] === '是') {
			weibao = 1;
		} else {
			weibao = 0;
		}
		const ewm = `${selectedRow['订单子编号']},01,${add_formData['尺码']},${add_formData['数量']},${weibao}`;
		 printdata.value = {
			emm: ewm,
            zddbh: selectedRow['订单子编号'],
            kh: selectedRow['生产款号'],
            pm: selectedRow['款式'],
            ys: selectedRow['颜色'],
            cm: add_formData['尺码'],
            sl: add_formData['数量'],
            zb: add_formData['组别'],
            dyrq: currentDates,
            wb: add_formData['是否订单尾包'],
        };
    }
};

// 打印小票按钮点击时直接触发打印
const add_printxp = () => {
    console.log(selectedRows.value);
    console.log(printdata.value);
    // 判断是否没有选择或者选择了多条记录
    if (selectedRows.value.length === 0) {
        ElMessage({
            type: 'warning',
            message: '请选择一个订单子编号'
        });
        return false;
    } else if (selectedRows.value.length > 1) {
        ElMessage({
            type: 'warning',
            message: '只能选择一个订单子编号'
        });
        return false;
    }
    // 选中一条记录时执行打印
    if (selectedRows.value.length === 1 && Object.keys(printdata.value).length > 0) {
        hiprint.init();
        const hiprintTemplate = new hiprint.PrintTemplate({ template: jsondata });
        hiprintTemplate.print(printdata.value);
    }
};

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

// 表格复选框
const handleSelectionChange = (selection, type) => {
  const ids = selection.map(item => {
    return item.订单子编号
  })
  bgSelection.value = ids.join(',')
}


// =========== 补打小票 ===========
const onxiaopiaoclick = async () => {
	if(row_onclick.value === '' || row_onclick.value === null || row_onclick.value === undefined){
		ElMessage({type: 'warning',message: '请选择一条数据' })
		 return false;
	}
		let weibao; 
		if (row_onclick.value['是否尾包'] === '是') {
			weibao = 1;
		} else {
			weibao = 0;
		}
		const ewm = `${row_onclick.value['订单子编号']},01,${row_onclick.value['尺码']},${row_onclick.value['数量']},${weibao}`;
	printdata.value = {
	    emm: ewm,
	    zddbh: row_onclick.value['订单子编号'],
	    kh: row_onclick.value['生产款号'],
	    pm: row_onclick.value['款式'],
	    ys: row_onclick.value['颜色'],
	    cm: row_onclick.value['尺码'],
	    sl: row_onclick.value['报工数量'],
	    zb: row_onclick.value['组别'],
	    dyrq: currentDate,
	    wb: row_onclick.value['是否尾包'],
	};
	hiprint.init();
	const hiprintTemplate = new hiprint.PrintTemplate({ template: jsondata });
	hiprintTemplate.print(printdata.value);
}

// =========== 修改 ===========
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-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>