mes-dacheng-admin-backend-ui/src/view/performance/baozhuangbaogong.vue

<template>
	<div>
	  <layout>
		  <layout-content >
		  <!-- <el-main> -->
			<div class="gva-table-box">
				<h1 id="title" style="margin: 0%;margin-bottom: 10px;">{{_code}}报工</h1>
				<el-row :gutter="10" style="align-items: center; margin-bottom: 20px;">
					<!-- 子订单编号输入框 -->
					<el-col :span="4"  style="padding: 0px;margin: 0px;">
					  <el-input v-model="add_searchInfo" placeholder="请扫描子订单编号"@keyup.enter="add_onSubmit" id="searchInput" style="width: 100%; height: 50px;"/>
					</el-col>
				
					<!-- 查询按钮 -->
					<el-col :span="1.5"  style="padding: 0px;margin: 0px;">
					  <el-button type="primary" icon="search" @click="add_onSubmit"style="height: 50px;width: 80px;">查询</el-button>
					</el-col>
				
					<el-col :span="1.5" style="padding: 0px;margin: 0px;">
					  <el-text style="font-size: 30px;">机台号</el-text>
					</el-col>
					<!-- 机台号输入框 -->
					<el-col :span="2"><el-input v-model="add_formData['机台号']" readonly style="width: 100%; height: 40px;"/></el-col>
				   
					<el-col :span="1.5" style="padding: 0px;margin: 0px;">
						<el-text style="font-size: 30px;">工序</el-text>
					</el-col>
					<!-- 工序输入框 -->
					<el-col :span="2"><el-input v-model="add_formData['工序']"  readonly  style="width: 100%; height: 40px;" /></el-col>
				
					<el-col :span="1.5" style="padding: 0px;margin: 0px;">
						<el-text style="font-size: 30px;">组别</el-text>
					</el-col>
					<!-- 组别输入框 -->
					<el-col :span="2"><el-input v-model="add_formData['组别']" readonly  style="width: 100%; height: 40px;" /></el-col>
				
					<el-col :span="1.5" style="padding: 0px;margin: 0px;">
						<el-text style="font-size: 30px;">人员</el-text>
					</el-col>
					<!-- 人员输入框 -->
					<el-col :span="2"><el-input v-model="add_formData['人员']" readonly style="width: 100%; height: 40px;"/></el-col>
				</el-row>
				
				<el-row :gutter="10" style="align-items: center; margin-bottom: 20px;">
					<el-col :span="1.5" style="padding: 0px;margin: 0px;">
						<el-text style="font-size: 30px;">尺码</el-text>
					</el-col>
					<!-- 尺码输入框 -->
					<el-col :span="2"><el-input v-model="add_formData['尺码']" readonly style="width: 100%; height: 40px;"/></el-col>
					
					<el-col :span="1.5" style="padding: 0px;margin: 0px;">
						<el-text style="font-size: 30px;">总数量</el-text>
					</el-col>
					<!-- 总数量输入框 -->
					<el-col :span="2"><el-input v-model="add_formData['总数量']" readonly style="width: 100%; height: 40px;"/></el-col>
					
					<el-col :span="1.5" style="padding: 0px;margin: 0px;">
						<el-text style="font-size: 30px;">剩余数量</el-text>
					</el-col>
					<!--剩余数量输入框 -->
					<el-col :span="2"><el-input v-model="add_formData['剩余数量']" readonly style="width: 100%; height: 40px;"/></el-col>
						
					<el-col :span="1.5" style="padding: 0px;margin: 0px;">
						<el-text style="font-size: 30px;">上报数量</el-text>
					</el-col>
					<!--上报数量输入框 -->
					<el-col :span="2"><el-input v-model="add_formData['上报数量']"  @input="baogongslpd" id="s_num" style="width: 100%; height: 40px;"/></el-col>
						
				
					<!-- 是否尾包文本 -->
					<el-col :span="2.5">
					  <el-text style="font-size: 30px;">是否尾包</el-text>
					</el-col>
										
					<!-- 是否尾包按钮 -->
					<el-col :span="1">
						<el-button
							:class="{'info-button': activeButtonValue === '1', 'default-button': activeButtonValue !== '1'}"
							style="margin-top:-6px; margin-right:15px; height: 50px; width: 60px; 
							display: flex; justify-content: center; align-items: center; cursor: not-allowed; border: 1px solid #ccc;
							 border-radius: 4px; color: #000000; font-size: 24px;"    
							:style="{ backgroundColor: activeButtonValue === '1' ? '#ff0000' : '#808080' }"
							>是</el-button>
					</el-col>
					
					<el-col :span="1">
						<el-button 
							:class="{'info-button': activeButtonValue === '0', 'default-button': activeButtonValue !== '0'}"
							style="margin-top:-6px; height: 50px; width: 60px; margin-left: 10px;
							display: flex; justify-content: center; align-items: center; cursor: not-allowed; border: 1px solid #ccc; 
							border-radius: 4px; color: #000000; font-size: 24px;"    
							:style="{ backgroundColor: activeButtonValue === '0' ? '#ff0000' : '#808080' }"
							>否</el-button>
					</el-col>
				</el-row>

				<layout-content >
					<el-main>
						<el-row :gutter="24" style="margin-bottom: 15px;">
							<!-- 表格数据 -->
							  <el-tabs v-model="activeName">
								<el-tab-pane label="报工历史记录"   @click="showTable('报工历史记录')" name="first">
									<el-table ref="multipleTableRef" style="width: 100%;height: 53vh"
										: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" tooltip-effect="dark"
										@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="serial" width="100"/>
									<el-table-column sortable align="left" label="报工时间" prop="sys_rq" width="160"/>
									<el-table-column sortable align="left" label="订单编号" prop="订单编号" width="130"/>
									<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="130"/>
									<el-table-column sortable align="left" label="尺码" prop="尺码" width="110"/>
									<el-table-column sortable align="left" label="数量" prop="数量" width="110"/>
									<el-table-column sortable align="left" label="上报数量" prop="上报数量" width="110"/>
									<el-table-column sortable align="left" label="是否尾包" prop="尾包" width="130"/>
									<!-- <el-table-column sortable align="left" label="组别" prop="组别" width="130"/> -->
									</el-table>
								</el-tab-pane>
								
							  <el-tab-pane label="技术附件" @click="showTable('技术附件')" name="fourth">
								<el-table ref="multipleTable"
										  :row-style="{ height: '20px' }"
										  :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
										  :header-cell-style="{ padding: '0px' }"
										  :show-overflow-tooltip="true"
										  :cell-class-name="planUsageCellClass"
										  highlight-current-row="true"
										  @row-dblclick="ExcelShow"
										  style="width: 100%;height: 36vh" border tooltip-effect="dark" :data="jstableData" row-key="ID" @selection-change="handleSelectionChange">
								  <!-- <el-table-column type="selection" width="55" /> -->
								  <el-table-column align="left" label="备注" prop="附件备注"  width="120"/>
								  <el-table-column align="left" label="文件类型" prop="附件类型"  width="120"/>
								  <el-table-column align="left" label="关联产品" prop="关联编号"  width="120"/>
								  <el-table-column align="left" label="建档用户" prop="sys_id"  width="120"/>
								  <el-table-column align="left" label="建档时间" prop="sys_rq"  width="160"/>
								  <el-table-column align="left" label="更新时间" prop="mod_rq"  width="120"/>
								  </el-table>
								</el-tab-pane>
							</el-tabs>
						</el-row>
					</el-main>
				</layout-content>
					<div class="dialog-footer" style="text-align: left;margin-right: 60px;">
						<el-button type="primary" @click="add_Dialog" id="add_Dialog"	:disabled="add_Dialogonclick === false"  style="width: 110px;height: 60px;font-size: 20px;margin-left: 20px;">报工</el-button>
						<el-button type="primary" @click="gd_yulan" 	 style="width: 100px;height: 60px;font-size: 20px;">订单表预览</el-button>
					</div>
			</div>
		  <!-- </el-main> -->
		</layout-content>
	  </layout>
	  <!-- 技术附件预览弹窗 -->
	  <el-dialog v-model="luckyexcelVisible" :before-close="luckyexcelCloseDialog" width="100%" top="0vh">
	    <div id="luckyexcel" style="width: 100%;height: 100vh;"></div>
	  </el-dialog>
	  
	  <PrintPage ref="printPageRef" />
	</div>
  </template>
<script>
export default {
	data() {
	  return {
			currentTable: '', // 当前展示的表格
			activeName: 'first',
	  };
	}, 
	methods: {
    handleKeyDown(event, prevId, currentId, nextId) {
      const currentElement = document.getElementById(currentId);
      const isEmpty = currentElement.value === '';
      const atStart = currentElement.selectionStart === 0;
      const atEnd = currentElement.selectionStart === currentElement.value.length;
      switch (event.keyCode) {
        case 13: // Enter
        case 40: // 向下箭头
          if (nextId) {
            document.getElementById(nextId).focus();
          }
          break;
        case 38: // 向上箭头
          if (prevId) {
            document.getElementById(prevId).focus();
          }
          break;
        case 8: // 删除键
          if (prevId && (isEmpty || atStart)) {
            document.getElementById(prevId).focus();
          }
          break;
        case 37: // 向左箭头
          if (prevId && atStart) {
            document.getElementById(prevId).focus();
          }
          break;
        case 39: // 向右箭头
          if (nextId && atEnd) {
            document.getElementById(nextId).focus();
	
          }
          break;
        default:
          break;
      }
    },
  },
};
</script>
<script setup>
// 全量引入格式化工具 请按需保留
import $script from 'scriptjs'
import $ from 'jquery';
import LuckyExcel from 'luckyexcel';
import { Layout, LayoutSider, LayoutContent } from '@arco-design/web-vue';
import {hiprint} from "vue-plugin-hiprint";
import {ref, reactive,nextTick,watch, setBlockTracking } from 'vue'
import {getSpotList,search,getTab,OrderAttachments,getTabByGdbh } from '@/api/mes/job'
import {getMachineMac} from '@/api/jixiaoguanli/jitairibaobiao'
import {getMac} from '@/api/jixiaoguanli/baogong'
import PrintPage from '../yunyin/shengchanguanli/components/print.vue';
import {ElMessage} 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}`;
const printPageRef = ref()


//全局获取code，接口接收code
const _code = '包装'
//全局接口接受的物理地址
const Machine = ref('')
//全局获取UniqId
const UniqId = ref('')
//全局获取工序
const _gx = '7'
//全局获取工序名称
const _gxmc = _code
const add_formData = reactive({
	机台号: '',	
	工序: '',
	组别: '',
	人员: '',	
	尺码: '',
	数量: '',
	剩余数量: '',
	上报数量:'',
	是否订单尾包: '',
});


//物理地址获取机台编号
const getMachineMacdata = async () => {
  console.log(_code,"机台获取物理地址",Machine.value)
  try {
    const data  = await getMachineMac({sys_sbID:Machine.value});
	add_formData['机台号'] = data.data['机台号']
	add_formData['工序'] = data.data['生产工序']
	add_formData['组别'] = data.data['组别']
	add_formData['人员'] = data.data['组长']
	  setTimeout(() => {
			const inputElement = document.getElementById('searchInput');
			if (inputElement) {
				inputElement.focus();		
			}
	 }, 100); // 延迟100毫秒
  } catch (error) {
    console.error(error)
  }
}
//自动获取物理地址
const GetAddr =  () => {
  var xmlhttp = null;
  var res;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // 2. 设置回调函数
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      res = eval('('+xmlhttp.response+')');
      let result = ''
      for (let i = 0; i < res.macAddress.length; i++) {
        if (i % 2 === 0 && i !== 0) {
          result += '-' // 根据实际需求修改分隔符
        }
        result += res.macAddress[i]
      }
	  Machine.value = result
    getMachineMacdata(Machine.value)
    }
  }
  // 3. 打开一个连接
  xmlhttp.open("get", "http://127.0.0.1:8090/init")
  // 5. 发送
  xmlhttp.send();
}
// getMachineMacdata();
GetAddr()
//搜索
const add_searchInfo = ref('')
//表格
const add_tableData = reactive([]);
//尾包选中值
const activeButtonValue = ref('')
//代表扫描两次自动保存
const searcs = ref('')
const _order = ref('')
//技术附件
const jstableData = reactive([])
const _list = ref('')

// 查询按钮
const add_onSubmit = async ()=>{
	if(add_formData['机台号'] === ''){
		ElMessage({type: 'warning',message: '未获取到机台'})
		return false;
	}
	
  if(add_searchInfo.value === '' || add_searchInfo.value === undefined){
    const WorkListdata = [];
    add_tableData.splice(0,add_tableData.length,...WorkListdata);
	ElMessage({type: 'warning',message: '请扫描小票二维码' })
	return false;
  }
  
	setTimeout(() => {
		const inputElement = document.getElementById('s_num');
		if (inputElement) {
			inputElement.focus();		
		}
	}, 100);
	
	 _order.value = add_searchInfo.value;
	 //获取下面报工历史记录
	 const getSpotLists = await getSpotList({order:add_searchInfo.value,code:_code,sys_sbID:add_formData['机台号']});
	 console.log(getSpotLists)
	 if(getSpotLists.data === null){
		 add_searchInfo.value = ''
		 add_formData['尺码'] = ''
		 add_formData['总数量'] = ''
		 add_formData['剩余数量'] = ''
		 setTimeout(() => {
		 	const inputElement = document.getElementById('searchInput');
		 	if (inputElement) {
		 		inputElement.focus();		
		 	}
		 }, 100);
	 }
	 activeButtonValue.value = getSpotLists.data.result.wb
	 UniqId.value = getSpotLists.data.result.UniqId
	 _list.value = getSpotLists.data.result
	 add_formData['尺码'] = getSpotLists.data.result.cm
	 add_formData['总数量'] = getSpotLists.data.result.sl
	 add_formData['剩余数量'] = getSpotLists.data.result.ci_num
	 add_tableData.splice(0,add_tableData.length,...getSpotLists.data.records);
	 
	 //技术附件
	 const searchValue = add_searchInfo.value.split('-')[0];
	 const jsOrderAttachments = await OrderAttachments({order:searchValue,desc:'技术附件'})
	 jstableData.splice(0,jsOrderAttachments.data.length,...jsOrderAttachments.data);
	 
}

//技术资料excel展示
const ExcelShow = (row) =>{
	console.log("技术资料excel展示")
	console.log(row)
	if(!row.附件内容) return
	$.getScript('/luckysheet/plugins/js/plugin.js', () => {
		$script('/luckysheet/luckysheet.umd.js', () => {
					function dataURLtoBlob(dataUrl) {
					    const byteString = atob(dataUrl.split(',')[1]);
					    const ab = new ArrayBuffer(byteString.length);
					    const ia = new Uint8Array(ab);

					    for (let i = 0; i < byteString.length; i++) {
					        ia[i] = byteString.charCodeAt(i);
					    }

					    return new Blob([ab], { type: 'application/octet-stream' });
					}

					const blob = dataURLtoBlob(row.附件内容);
					luckyexcelVisible.value = true
					LuckyExcel.transformExcelToLucky(blob, function(exportJson, luckysheetfile){
						if(exportJson.sheets==null || exportJson.sheets.length==0){
							alert("Failed to read the content of the excel file, currently does not support xls files!");
							return;
						}
						if(luckyExcel) luckyExcel.destroy();
						luckysheet.create({
							container: 'luckyexcel', //容器的ID
							data: exportJson.sheets,
							title: exportJson.info.name, // 工作簿名称
							lang: "zh", // 设定表格语言 国际化设置，允许设置表格的语言，支持中文("zh")和英文("en")
							showtoolbar: false, // 是否显示工具栏
							showinfobar: false, // 是否显示顶部信息栏
							allowEdit: false, // 是否允许前台编辑
							enableAddRow: false, // 允许增加行
							enableAddCol: false, // 允许增加列
							userInfo: false, // 右上角的用户信息展示样式
							showRowBar: false, // 是否显示行号区域
							showColumnBar: false, // 是否显示列号区域
							sheetFormulaBar: false, // 是否显示公式栏
							enableAddBackTop: false,//返回头部按钮
						});
						luckyExcel = luckysheet;
					})
		})
	})
	$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/luckysheet/plugins/css/pluginsCss.css'));
	$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/luckysheet/plugins/plugins.css'));
	$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/luckysheet/css/luckysheet.css'));
	$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', '/luckysheet/assets/iconfont/iconfont.css'));

}

let luckyExcel = null

const luckyexcelVisible = ref(false)
const luckyexcelCloseDialog = () => {
  luckyexcelVisible.value = false
}	



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

const add_Dialogonclick = ref(false)

//获取input事件
function baogongslpd() {    
  // 将字符串转换为数字  
  const reportedQuantity = parseInt(add_formData['上报数量'], 10) || 0;  
  const totalQuantity = parseInt(add_formData['剩余数量'], 10) || 0; 
  
  if (reportedQuantity > totalQuantity) {  
    ElMessage({ type: 'warning', message: '上报数量不能大于剩余数量' });  
    add_Dialogonclick.value = false;  
  }else if(reportedQuantity === ''){
	add_Dialogonclick.value = false;  
  } else {  
    add_Dialogonclick.value = true;  
  }  
}
const currentSlValue=ref('')

//报工
const add_Dialog = async ()=>{
console.log(UniqId.value)
 if(add_formData['上报数量'] === ''){
    ElMessage({type: 'warning',message: '上报数量为空，请填写上报数量'})
	return;
  }
  
  if(_order.value === ''){
    ElMessage({type: 'warning',message: '请重新扫描小票二维码'})
	return;
  }else{
		let params ={}
		params.code = _code
		params.order = _order.value.split(',')[0].split('-')[0]
		params.order_id = _order.value.split(',')[0]
		params.gx = _gx
		params.gxmc = _gxmc
		params.cm = _order.value.split(',')[3]
		params.sl = _order.value.split(',')[4]
		params.sczl_jtbh = add_formData['机台号']
		params.sczl_bh = add_formData['组别']
		params.wb =  _order.value.split(',')[5]
		params.sys_id = add_formData['人员']
		params.UniqId = UniqId.value
		params.s_num = add_formData['上报数量']
		params.ci_num = add_formData['剩余数量']
		console.log(params)
		
		// 记录每一次上报数据信息日志
			let datalog = {};
			datalog.code = _code;
			datalog.订单编号 = _list.value.订单编号;
			datalog.子订单编号 = _list.value.order;
			datalog.款号 = _list.value.生产款号;
			datalog.款式 = _list.value.款式;
			datalog.颜色 = _list.value.颜色;
			datalog.上报时间 = currentDate;
			datalog.上报数量 = add_formData['上报数量'];
			// 记录总实裁数
			datalog.sctotal = _list.value.sctotal;
			datalog.zdtotal = _list.value.zdtotal;
			datalog['组别'] = add_formData['组别'];
			
			console.log(_list)
			console.log(datalog)
			const getTabByGdbhs = await getTabByGdbh(datalog);
		// return false;
		const cf_gettab = await search(params); // 调用search函数  
		if (cf_gettab.code === 0) {
			// const firstPart = add_searchInfo.value.split(',')[0];  
			//上报后历史记录表格刷新
			const lsjltable = await getTab({order_id:_order.value.split(',')[0],sczl_jtbh:add_formData['机台号']}); 
			add_tableData.splice(0,add_tableData.length,...lsjltable.data.records);
			// //上报后刷新表格数据
			// const getSpotLists = await getSpotList({order:_order.value.split(',')[0],code:_code,sys_sbID:sys_sbID});
			// add_tableData.splice(0,add_tableData.length,...getSpotLists.data.records);
			add_searchInfo.value = '';  
			setTimeout(() => {
				const inputElement = document.getElementById('searchInput');
				if (inputElement) {
					inputElement.focus();		
				}
			}, 100); // 延迟100毫秒
			// searcs.value = '';
			add_formData['尺码']=''
			add_formData['总数量']=''
			add_formData['上报数量']=''
			add_formData['剩余数量']=''
		//  searcs.value = 1;
		 add_searchInfo.value = ''
			ElMessage({type: 'success', message: '报工成功'});  
		}

  }
}

const gd_yulan = () => {
  if(_order.value === '' || _order.value === null){
    ElMessage({type: 'warning',message: '请选择具体的工单后，再操作此功能'})
    return false;
  }else{
    const order = _order.value.split('-')[0]
      printPageRef.value.open(order) 
  }
}
//单击
const add_tableRowClick = async (row) => {
	const orderString = `${row['子订单编号']},${row['组别']},3,${row['尺码']},${row['数量']},${row['尾包']}`;
	add_formData['尺码'] =  row.尺码
	add_formData['总数量'] =  row.数量
	add_formData['剩余数量'] =  row.剩余数量
	_order.value =  orderString
console.log(row)
}
//双击
const add_updateCompanyFunc = async (row) => {

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

}
//复选框
const add_xpSelectionChange = async (selection) => {
  console.log(selection.length)
  selectedRows.value = selection; 
  if (selection.length === 0) {
	  ElMessage({type: 'warning', message: '请勾选打印的数据' });
	  return false;
  }else if(selection.length>0){
	  allPrintData.value = selection.map((row) => {
	  let weibao = row['是否尾包'] === '是' ? 1 : 0;
	  const ewm = `${row['订单子编号']},01,${row['尺码']},${row['数量']},${weibao}`;
	  return {
		  emm: ewm,
		  zddbh: row['子订单编号'],
		  kh: row['款号'],
		  pm: row['款式'],
		  ys: row['颜色'],
		  cm: row['尺码'],
		  sl: row['数量'],
		  zb: row['组别'],
		  dyrq: currentDates,
		  wb: row['尾包']
	  };
  });
  }else{
	  allPrintData.value = [];
  }
  console.log(allPrintData.value)
}

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

// 表格复选框选中变化时触发
const table_SelectionChange = (val) => {
  table_selectrows.value = val; // 将选中的行数据保存到 table_selectrows
}
  
 
// =========== 分页 ===========
// 分页相关的响应式变量
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
// 分页
const handleCurrentChange = (val) => {
page.value = val;
_getStaffList();
};

// 修改页面容量 点击多少条/页
const handleSizeChange = (val) => {
page.value = 10;//默认显示
pageSize.value = val;
_getStaffList();
};
</script>
<style scoped>
.form-container {
display: flex;
flex-wrap: wrap;
}

.form-column {
/*flex: 1;*/
margin-right: 15px; /* 调整列之间的间距 */
}
/* 左侧输入框宽度调整 */
.form-column .el-form-item .el-input {
width: 150px; /* 调整左侧输入框的宽度 */
}

/* 媒体查询，根据需要调整断点 */
@media screen and (max-width: 768px) {
.form-column {
  flex: 1 0 100%; /* 在小屏幕下变成单列布局 */
  margin-right: 0;
}
}
/* 表格复选框大小调整 */
:deep(.el-checkbox.el-checkbox--small .el-checkbox__inner) {
  width: 30px; /* 复选框宽度 */
  height: 20px; /* 复选框高度 */
}

:deep(.el-checkbox.el-checkbox--small.is-checked .el-checkbox__inner::after) {
  transform: scale(1.2) rotate(45deg); /* 调整选中后的对勾大小 */
  top: 5%; /* 调整对勾位置 */
  left: 40%; /* 调整对勾位置 */
  width: 5px; /* 调整对勾宽度 */
  height: 9px; /* 调整对勾高度 */
}

/*:deep(.el-table td .cell) {*/
/*  line-height: 30px !important;*/
/*}*/
.JKWTree-container {
display: flex;
}
.JKWTree-tree {
/*width: 300px;*/
background-color: #fff;
padding: 10px;
margin-right: 20px;
}
.JKWTree-tree h3 {
font-size: 15px;
font-weight: 700;
margin: 10px 0;
}
.JKWTree-content {
flex: 1;
}
/* 图片上传 */
.upload-box {
width: 200px;
height: 200px;
border: 2px dashed #e2e2e2;
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
}
.uploaded-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.upload-icon {
font-size: 40px;
color: #c0c4cc;
}
.file-input {
display: none;
}
.el-table .warning-row {
background: oldlace;
}

/* 选中某行时的背景色 */
:deep(.el-table__body tr.current-row) > td {
background: #ff80ff !important;
}
</style>
<style scoped>
:deep(.el-table td .cell) {
line-height: 20px !important;
}
:deep(.el-tabs__header){
margin-bottom: 0;
}
.search{
margin-left: 0px !important;
margin-right: 10px !important;
}
.bt{
margin-left: 2px !important;
padding: 3px !important;
font-size: 12px;
}
.el-tabs__header{
margin: 0px !important;
}
.gva-table-box{
padding: 0px !important;
margin-left: -10px !important;
}
.mab{
margin-bottom: 5px;
}
/* 点击按钮改变颜色 */
.active-button {  
  background-color: #ff0000;
}
.default-button {  
  background-color: #808080;
}


/* 搜索样式 */
::v-deep .el-input__wrapper #searchInput {  
  font-size: 16px; 
} 
::v-deep .el-input__wrapper #jitaihao {  
  font-size: 18px; 
}  
::v-deep .el-input__wrapper #gongxu {  
  font-size: 18px; 
}  
::v-deep .el-input__wrapper #zubie {  
  font-size: 18px; 
}  
::v-deep .el-input__wrapper #renyuan {  
  font-size: 18px; 
} 
::v-deep .el-input__wrapper #shuliang {  
  font-size: 18px; 
  color: red;
} 
::v-deep .el-input__wrapper #chima {  
  font-size: 18px; 
} 
::v-deep .el-input__wrapper #sbsl {  
  font-size: 18px; 
  color: red;
} 
</style>