mes-admin-backend-ui/src/view/performance/06-packingDocuments/index.vue

<template>
	<div>
		<!--    左侧树侧形结构-->
		<el-container>
			<layout-sider :resize-directions="['right']" :width="220" style="margin-right: 10px;">
				<div class="JKWTree-tree" style="height: 70vh;">
					<h3>包装计件单据维护</h3>
					<el-tree :data="treeData" highlight-current @node-click="handleNodeClick" />
				</div>
			</layout-sider>
			<el-container>
				<el-main>
					<!-- 按钮 -->
					<div class="gva-table-box">
						<el-form>
							<el-form-item>
								<el-input v-model="searchInfo" placeholder="搜索产品编号或产品名称" clearable style="width: 180px;" />
								<el-button type="primary" icon="Search" class="search" @click="handleSearch" />
								<el-button type="primary" icon="edit" class="bt" @click="handleShowDetail">查改</el-button>
								<el-button type="primary" icon="edit" class="bt" @click="handleShowAdd">新增</el-button>
								<el-button type="primary" icon="delete" class="bt" @click="handleDelete">删除</el-button>
							</el-form-item>
						</el-form>
						<!-- 数据展示 -->
						<el-table ref="table" style="width: 100%" :data="tableData" row-key="ID" highlight-current-row
							border show-overflow-tooltip :row-style="{ height: '20px' }"
							:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
							:header-cell-style="{ padding: '0px' }" @row-dblclick="handleShowDetail"
							@current-change="(row, oldRow) => { currentRow = row}">
							<el-table-column type="selection" width="55" />
							<!-- 循环渲染列 -->
							<el-table-column v-for=" column in tableColumns " :key="column.prop" :prop="column.prop"
								:label="column.label" width="110" sortable />
						</el-table>
						<!-- 分页 -->
						<div class="gva-pagination">
							<el-pagination v-model:current-page="page" v-model:page-size="limit"
								layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 30, 50, 100]"
								:total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
						</div>
					</div>
						<el-dialog v-model="BzVisible" title="选择" destroy-on-close width="200px"
							@keydown="selectBZ($event)">
							<el-table tooltip-effect="dark" :data="selectDataBz" row-key="ID"
								highlight-current-row="true" border style="width:100%" @row-dblclick="SelectClickBz"
								ref="table">
								<el-table-column prop="sczl_bzdh" label="班组" width="150" />
							</el-table>
						</el-dialog>
						<el-dialog v-model="BzVisible2" title="冲月定额" destroy-on-close width="200px"
							@keydown="selectCY($event)">
							<el-table tooltip-effect="dark" :data="selectDataCY" row-key="ID"
								highlight-current-row="true" border style="width:100%"  @row-dblclick="SelectClickCY"
								ref="table" :row-style="{ height: '30px' }"	>
								<el-table-column prop="sczl_冲定额" label="冲月定额" width="150"  />
							</el-table>
						</el-dialog>
					<!-- 弹出框 -->
					<div>
						<el-dialog v-model="dialogFormVisible" :title="type" destroy-on-close width="1400px">
							<el-form id="detail-form" :model="detailData" inline label-position="left">
								<el-form-item label="日期">
									<el-input type="date" max="9999-12-31" @focus="rqHandleFocus()" @keyup="moveFocus"
										v-model="detailData.sczl_rq" style="width: 120px;" />
								</el-form-item>

								<el-form-item label="员工编号">
									<el-input v-model="detailData.sczl_bh" style="width: 100px;" @keyup="moveFocus"
										placeholder="Enter回车" 
										 />
									<el-input v-model="detailData.name" style="width: 100px; padding-left: 5px;"
										@keyup="moveFocus" @click="selectvalue($event)" readonly />
								</el-form-item>

								<el-form-item label="组别">
									<el-input v-model="detailData.sczl_bzdh" style="width: 80px;" @keyup="moveFocus" @keydown="getBzsubmit($event)" />
								</el-form-item>
								<br>

								<el-form-item label="计时时数" style="padding-left: 195px;">
									<el-input v-model="detailData.sczl_jsss" style="width: 100px;" @keyup="moveFocus"
										@click="selectvalue($event)" />
								</el-form-item>

								<el-form-item label="冲月定额">
									<el-input v-model="detailData.sczl_冲定额" @keyup="moveFocus" style="width: 80px;" @keydown="getBzsubmit2($event)" />
								</el-form-item>

								<el-table :data="detailData.table" border tooltip-effect="dark"
									:row-style="{ height: '20px' }" :cell-style="{ padding: '0px' }"
									:header-row-style="{ height: '20px' }" :header-cell-style="{ padding: '0px' }">

									<el-table-column label="工单编号" width="120">
										<template #default="{ row, $index }">
											<el-input v-model="row.sczl_gdbh" placeholder="Enter回车"
												@keydown="handleEnter($event,$index, row)" @keyup="movefous3($event,row)" />
										</template>
									</el-table-column>

									<el-table-column label="印件工序" width="100">
										<template #default="{ row }">
											<el-input v-model="row.sczl_yjGx" @keyup="moveFocus" readonly />
										</template>
									</el-table-column>

									<el-table-column label="工序名称" width="100">
										<template #default="{ row }">
											<el-input v-model="row.sczl_gxmc" @keyup="moveFocus" readonly />
										</template>
									</el-table-column>

									<el-table-column label="印件名称" width="310">
										<template #default="{ row }">
											<el-input v-model="row.Gd_cpmc" @keyup="moveFocus" readonly />
										</template>
									</el-table-column>
									
									<el-table-column label="核算标准">
										<template #default="{ row }">
											<el-select v-model="row.hsbz" @keyup="moveFocus"  placeholder="请选择" popper-class="dropdown" >
												<el-option label="1000" value="1000" ></el-option>
												<el-option label="2500" value="2500"></el-option>
											</el-select>
										</template>
									</el-table-column>

									<el-table-column label="包装产量" width="100">
										<template #default="{ row }">
											<el-input v-model="row.sczl_cl" @keyup="moveFocus" />
										</template>
									</el-table-column>

									<el-table-column label="返工产量" width="95">
										<template #default="{ row }">
											<el-input v-model="row.sczl_返工产量" @keyup="moveFocus" />
										</template>
									</el-table-column>

									<el-table-column label="每箱数量" width="100">
										<template #default="{ row }">
											<el-input v-model="row.sczl_PgCl" @keyup="moveFocus" />
										</template>
									</el-table-column>

									<el-table-column label="计产系数" width="95">
										<template #default="{ row }">
											<el-input v-model="row.sczl_计产系数" @keyup="moveFocus" />
										</template>
									</el-table-column>

									<el-table-column label="来源" width="95">
										<template #default="{ row }">
											<el-input v-model="row.sczl_Jtbh1"  
											@keyup  ="movefous2($event,row)"/>
										</template>
									</el-table-column>

									<el-table-column label="定额代号" width="130">
										<template #default="{ row, $index }">
											<el-input id="input" v-model="row.sczl_dedh" @keyup="moveFocus"
												@keydown="getDedhsubmit($event,$index, row)" />
												
										</template>
									</el-table-column>

								</el-table>

								<el-form-item label="其他备注" style="margin-top: 10px;">
									<el-input v-model="detailData.sczl_desc"  @keyup="moveFocus" style="width:600px;"/>
								</el-form-item>

							</el-form>

							<template #footer>
								<div class="dialog-footer">
									<el-button @click="dialogFormVisible = false">取 消</el-button>
									<el-button type="primary" @click="enterDialog">确 定
									</el-button>
								</div>
							</template>
						</el-dialog>


						<!-- 新增定额代号 -->
						<el-dialog v-model="dedhsearchModel" id="tableFplb" @keydown="ent($event)" style="margin-top: 5%;"  >
							<el-form>
									<el-form-item label="选择定额代号" class="mab" prop="keyOrder"></el-form-item>
									<div style="border:1px solid #eee; width:100%; height: 600px; overflow-y: auto;">
										<el-tree :data="dedhtreeData" ref="table_fplb" 
											@keydown="handleTreeKeydown" 
											:props="{ children: 'children',label: 'label'}"
											node-key="id" @node-click="dedhhandleNodeClick">
										</el-tree>
									</div>
							</el-form>
						</el-dialog>
						
						<!-- 弹出选项框 -->
						<el-dialog v-model="dialogSelectVisible" title="选择" destroy-on-close width="800px"
							@keydown="selectCP($event)">
							<el-table tooltip-effect="dark" :data="selectData" row-key="ID" highlight-current-row border
								style="width:100%" @row-dblclick="handleSelectClick" ref="table2">
								<el-table-column prop="Gd_cpmc" label="产品名称" width="460" />
								<el-table-column prop="Gy0_gxmc" label="工序" width="200" />
								<el-table-column prop="jyGx" label="工序编号" width="100" />
							</el-table>
						</el-dialog>
					</div>
					
					<!-- 员工选择 -->
					<el-dialog v-model="dialogSelectVisible_Yg" title="选择" destroy-on-close width="300px"
						@keydown="selectGX_Yg($event)">
						<el-table tooltip-effect="dark" :data="selectData_Yg" row-key="ID" highlight-current-row="true"
							border style="width:100%" @row-dblclick="handleSelectClick_Yg" ref="table_Yg">
							<el-table-column prop="员工编号" label="员工编号" width="100" />
							<el-table-column prop="ygxm" label="员工姓名" width="200" />
						</el-table>
					</el-dialog>
					
					<!-- 班组选择 -->
					<el-dialog v-model="dialogSelectVisible_Bz" title="选择" destroy-on-close width="200px"
						@keydown="selectGX_Bz($event)">
						<el-table tooltip-effect="dark" :data="selectData_Bz" row-key="ID" highlight-current-row="true"
							border style="width:100%" @row-dblclick="handleSelectClick_Bz" ref="table_Bz">
							<el-table-column prop="sczl_bzdh" label="班组" width="160" />
						</el-table>
					</el-dialog>

				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
</script>


<script setup>
	import {
		Layout,
		LayoutContent,
		LayoutHeader,
		LayoutSider
	} from '@arco-design/web-vue'
	import {
		ElMessage,
		ElMessageBox,
		dayjs
	} from 'element-plus'

	// import { Download, Search, Delete } from '@element-plus/icons-vue'
	import {
		reactive,
		ref,
		nextTick,
		onMounted
	} from 'vue'
	import {
		getGxMc,
		getInfo,
		getLocate,
		getPackingSideTable,
		getPackingTable,
		updatePackingTable,
		getYg,
		DeletePackingTable,
		addPackingTable,
		getDedh
	} from '@/api/mes_api_gty/myapi'
	import {
		useUserStore
	} from '@/pinia/modules/user'
	const userStore = useUserStore()
	const sys_id = '[' + userStore.userInfo.userName + '/' + userStore.userInfo.nickName + ']'
	defineOptions({
		name: '06PackingDocuments',
	})
	//班组
	const BzVisible = ref (false)
	//
	const BzVisible2 = ref (false)
	const selectDataBz = reactive([])
	const selectDataCY = reactive([])
const SelectClickBz = (row, column, event) => {
	detailData.sczl_bzdh = row.sczl_bzdh
		BzVisible.value = false
	}
	const selectBZ = (event) => {
		if (event.keyCode === 40) { // Enter 或向下箭头
			setCurrent(selectDataBz[1]);

		} else if (event.keyCode === 38) {
			setCurrent(selectDataBz[0]);

		} else if (event.keyCode === 13) {
			BzVisible.value = false
		}

	}
	const selectCY = (event) => {
		if (event.keyCode === 40) { // Enter 或向下箭头
			setCurrent2(selectDataCY[1]);

		} else if (event.keyCode === 38) {
			setCurrent2(selectDataCY[0]);

		} else if (event.keyCode === 13) {
			BzVisible2.value = false
		}

	}
	const SelectClickCY = (row, column, event) => {
		detailData.sczl_冲定额 = row.sczl_冲定额
		BzVisible2.value = false
	}
	// 侧边栏功能
	const treeData = reactive([])
	const getSideData = async () => {
		try {
			const response = await getPackingSideTable()
			if (response.code === 0) {
				const transformedData = response.data.map(item => ({
					label: `${item.date.replace(/-/g, '.')}【单据数: ${item.counts}张】`,
					children: item.sys.map(sysItem => ({
						label: `${sysItem.sys_id} 【记录数: ${sysItem.count}张】`,
						params: {
							date: item.date.replace(/\./g, '-'),
							sys_id: sysItem.sys_id,
						},
					})),
				}))
				treeData.splice(0, treeData.length, ...transformedData)
			}
		} catch (e) {
			console.log(e)
		}
	}
	getSideData()

	// 表格功能
	const tableColumns = [{
			label: '员工编号',
			prop: 'sczl_bh',
			width: '100'
		},
		{
			label: '员工姓名',
			prop: 'name',
			width: '100'
		},
		{
			label: '生产日期',
			prop: 'sczl_rq',
			width: '100'
		},
		{
			label: '班组',
			prop: 'sczl_bzdh',
			width: '100'
		},
		{
			label: '包装产量',
			prop: 'sczl_cl',
			width: '100'
		},
		{
			label: '返工产量',
			prop: 'sczl_fgsl',
			width: '100'
		},
		{
			label: '计件产量',
			prop: 'sczl_jjcl',
			width: '100'
		},
		{
			label: '相关工单',
			prop: 'sczl_gdbh1',
			width: '100'
		},
		{
			label: '创建用户',
			prop: 'sys_id',
			width: '120'
		},
		{
			label: '创建时间',
			prop: 'sys_rq',
			width: '180'
		},
		{
			label: '修改时间',
			prop: 'mod_rq',
			width: '180'
		},
		{
			label: 'UNIQID',
			prop: 'UniqId',
			width: '100'
		},
	]
	const tableData = reactive([])
	const params = {
		type: '',
		date: '',
		sys_id: '',
		gdbh: '',
	}

	const total = ref(0)
	const page = ref(1)
	const limit = ref(10)

	const type = ref('')
	const searchInfo = ref('')
	const currentRow = ref({})
	// const multipleSelection = ref([])

	// 获取列表数据
	const getTableData = async () => {
		console.log('刷新列表')
		try {
			const response = await getPackingTable({
				date: params.date,
				sys_id: params.sys_id,
				page: page.value.toString(),
				limit: limit.value.toString(),
			})
			console.log('查看回调',response)
			if (response.code === 0) {
				total.value = response.data.total
				tableData.splice(0, tableData.length, ...response.data.rows)
				setCurrent(tableData[0])
			}
		} catch (e) {
			console.log(e)
		}
	}
	// 获取定位数据
	const getLocateTable = async () => {
		try {
			const response = await getLocate({
				gdbh: params.gdbh,
				page: page.value.toString(),
				limit: limit.value.toString(),
			})
			if (response.code === 0) {
				total.value = response.data.total
				tableData.splice(0, tableData.length, ...response.data.rows)
			}
		} catch (e) {
			console.log(e)
		}
	}
	// 删除数据
	const deleteTableData = async (id) => {
		try {
			const res = await DeletePackingTable({
				UniqId: id
			})
			if (res.code === 0) {
				return 0
			}
		} catch (e) {
			console.log(e)
		}
	}

	const handleNodeClick = (node, check) => {
		if (node.params) {
			params.date = node.params.date
			params.sys_id = node.params.sys_id
			params.type = 'getTableData'
			page.value = 1
			getTableData()
		}
	}

	const selectvalue = (e) => {
		console.log(e)
		e.currentTarget.select();
	}
	// 定位
	const handleSearch = () => {
		params.gdbh = searchInfo.value
		params.type = 'getLocateTable'
		page.value = 1
		getLocateTable()
	}

	// 查改
	const handleShowDetail = () => {
		type.value = '查改'
		console.log(currentRow.value)
		if (currentRow.value.UniqId == undefined) {
			ElMessage({
				type: 'warning',
				message: '未选中记录',
			})
			return
		} else {
			getTableInfo(currentRow.value?.UniqId)
		}
	}

	// 删除
	const handleDelete = () => {
		if (currentRow.value.UniqId == undefined) {
			ElMessage({
				type: 'warning',
				message: '未选中记录',
			})
			return
		}
		ElMessageBox.confirm(
				`确认删除这条数据么?`,
				'警告', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(async () => {
				const ret = await deleteTableData(currentRow.value?.UniqId)
				if (ret === 0) {
					ElMessage({
						type: 'success',
						message: '删除成功',
					})
					getSideData()
					getTableData()
				} else {
					ElMessage({
						type: 'error',
						message: '删除失败',
					})
				}
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
	}
	// 分页
	// #region
	const handleSizeChange = () => {
		switch (params.type) {
			case 'getTableData':
				getTableData()
				break
			case 'getLocateTable':
				getLocateTable()
				break
			default:
				break
		}
	}
	const handleCurrentChange = () => {
		switch (params.type) {
			case 'getTableData':
				getTableData()
				break
			case 'getLocateTable':
				getLocateTable()
				break
			default:
				break
		}
	}
	// #endregion

	// 详情界面
	const detailData = reactive({
		UniqId: '',
		selectIndex: 0,
		sczl_rq: '',
		sczl_bh: '',
		name: '',
		sczl_bzdh: '',
		sczl_jsss: '',
		sczl_冲定额: '',
		sczl_desc: '',
		table: [],
	})
	const selectData = reactive([])
	const table = ref()

	// 弹窗控制标记
	const dialogFormVisible = ref(false)
	const dialogSelectVisible = ref(false)

	const setCurrent = (row) => {
		table.value?.setCurrentRow(row)
		detailData.sczl_bzdh = row.sczl_bzdh
		detailData.sczl_冲定额 = row.sczl_冲定额
	}
	const setCurrent2 = (row) => {
		table.value?.setCurrentRow(row)
		detailData.sczl_冲定额 = row.sczl_冲定额
	}
	// 获取详细信息
	const getTableInfo = async (id) => {
		try {
			const response = await getInfo({
				UniqId: id
			})
			if (response.code === 0) {
				const {
					sczl_rq,
					sczl_bh,
					name,
					sczl_bzdh,
					sczl_jsss,
					sczl_冲定额,
					sczl_desc,
					...rest
				} = response.data
				Object.assign(detailData, {
					sczl_rq,
					sczl_bh,
					name,
					sczl_bzdh,
					sczl_jsss,
					sczl_冲定额,
					sczl_desc
				})
				detailData.table = Array.from({
						length: 6
					}, (_, i) => i + 1)
					.map(num => {
						return {
							sczl_gdbh: rest[`sczl_gdbh${num}`],
							sczl_yjGx: rest[`sczl_yjGx${num}`],
							sczl_gxmc: rest[`sczl_gxmc${num}`],
							Gd_cpmc: rest[`Gd_cpmc${num}`],
							sczl_cl: rest[`sczl_cl${num}`],
							hsbz:rest[`sczl_type${num}`],
							sczl_返工产量: rest[`sczl_返工产量${num}`],
							sczl_PgCl: rest[`sczl_PgCl${num}`],
							sczl_计产系数: rest[`sczl_计产系数${num}`],
							sczl_Jtbh1: rest[`sczl_Jtbh${num}`],
							sczl_dedh: rest[`sczl_dedh${num}`],
						}
					})

				if (type.value === '新增') {
					console.log(detailData)
					// detailData.name = ''
					// detailData.sczl_bh = ''
					// detailData.sczl_bzdh = ''
					// detailData.sczl_desc = ''
					// detailData.sczl_jsss = ''
					// detailData.sczl_rq = ''
					detailData.table.forEach(row => {
						for (const key in row) {
							if ( key === 'sczl_cl'){
								row[key] = '' // 清空每行的内容
							}

						}
					})
				} else {
					detailData.UniqId = id
					dialogFormVisible.value = true
				}

				if (type.value === '新增' || type.value === '查改') {
					detailData.UniqId = id
					dialogFormVisible.value = true

					// 在 setTimeout 中获取元素，确保在 DOM 渲染完毕后执行
					setTimeout(() => {
						formElements = document.getElementById('detail-form').elements
						formElements[0].focus()
					}, 0)
				}
			}
		} catch (e) {
			console.log(e)
		}
	}

	//日期获得焦点事件
	const rqHandleFocus = () => {
		if (detailData.sczl_rq == '') {
			detailData.sczl_rq = new Date().toISOString().split('T')[0]
		}
	}

	// 获取工序名称
	const getTableGxMc = async (index, row) => {
		try {
			const response = await getGxMc({
				gdbh: row.sczl_gdbh
			})
			if (response.code === 0) {
				if (response.data.length === 0) {
					ElMessage({
						type: 'error',
						message: row.sczl_gdbh+'工单未发现印件、工艺数据，请先维护工单基础数据',
					})
					detailData.table[index].Gd_cpmc = ''
					detailData.table[index].sczl_yjGx = ''
					detailData.table[index].sczl_gxmc = ''
				}else if (response.data.length === 1) {
					const {
						Gd_cpmc,
						Gy0_gxmc,
						jyGx
					} = response.data[0]
					detailData.table[index].Gd_cpmc = Gd_cpmc
					detailData.table[index].sczl_yjGx = jyGx
					detailData.table[index].sczl_gxmc = Gy0_gxmc
				} else {
					selectData.splice(0, selectData.length, ...response.data)
					setCPCurrent(selectData[0])
					detailData.selectIndex = index
					dialogSelectVisible.value = true
				}
			}
		} catch (e) {
			console.log(e)
		}
	}

	// 更新数据
	const updateDetailData = async () => {
		const restoredData = {
			UniqId: detailData.UniqId,
			sczl_rq: detailData.sczl_rq,
			sczl_bh: detailData.sczl_bh,
			name: detailData.name,
			sczl_bzdh: detailData.sczl_bzdh,
			sczl_jsss: detailData.sczl_jsss,
			sczl_冲定额: detailData.sczl_冲定额,
			sczl_desc: detailData.sczl_desc,
		}
		detailData.table.forEach((item, index, array) => {
			const num = index + 1
			restoredData[`sczl_gdbh${num}`] = item.sczl_gdbh
			restoredData[`sczl_yjGx${num}`] = item.sczl_yjGx
			restoredData[`sczl_gxmc${num}`] = item.sczl_gxmc
			restoredData[`sczl_type${num}`] = item.hsbz === undefined ? '' : item.hsbz;
			restoredData[`Gd_cpmc${num}`] = item.Gd_cpmc
			restoredData[`sczl_cl${num}`] = item.sczl_cl
			restoredData[`sczl_返工产量${num}`] = item.sczl_返工产量
			restoredData[`sczl_PgCl${num}`] = item.sczl_PgCl
			restoredData[`sczl_计产系数${num}`] = item.sczl_计产系数
			restoredData[`sczl_Jtbh${num}`] = item.sczl_Jtbh1
			restoredData[`sczl_dedh${num}`] = item.sczl_dedh
		})
		console.log(restoredData)
		// return false;
		const res = await updatePackingTable(restoredData)
		if (res.code === 0) {
			ElMessage({
				type: 'success',
				message: '更新成功',
			})
		getTableData()
			dialogFormVisible.value = false
		}
	}

	// 新增数据
	const handleShowAdd = async () => {
		type.value = '新增'
		if (currentRow.value.UniqId == null) {
			detailData.table = Array.from({
					length: 6
				}, (_, i) => i + 1)
				.map(num => {
					return {
						sczl_gdbh: '',
						sczl_yjGx: '',
						sczl_gxmc: '',
						Gd_cpmc: '',
						sczl_cl: '',
						sczl_返工产量: '',
						sczl_PgCl: '',
						sczl_计产系数: '',
						sczl_Jtbh1: '',
						sczl_dedh: '',
					}
				})
			setTimeout(() => {
				formElements = document.getElementById('detail-form').elements
				formElements[0].focus()
			}, 0)
			dialogFormVisible.value = true
		} else {
			await getTableInfo(currentRow.value?.UniqId)
			// 默认日期为前一天的日期
			const date = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
			detailData.sczl_rq = date
		}
	}
	const addDetailData = async () => {
		const restoredData = {
			sys_id: sys_id,
			sczl_rq: detailData.sczl_rq,
			sczl_bh: detailData.sczl_bh,
			// name: detailData.name,
			sczl_bzdh: detailData.sczl_bzdh,
			sczl_jsss: detailData.sczl_jsss,
			sczl_冲定额: detailData.sczl_冲定额,
			sczl_desc: detailData.sczl_desc,
		}
		detailData.table.forEach((item, index, array) => {
			const num = index + 1
			restoredData[`sczl_gdbh${num}`] = item.sczl_gdbh
			restoredData[`sczl_yjGx${num}`] = item.sczl_yjGx
			restoredData[`sczl_gxmc${num}`] = item.sczl_gxmc
			restoredData[`sczl_type${num}`] = item.hsbz === undefined ? '' : item.hsbz;
			// restoredData[`Gd_cpmc${num}`] = item.Gd_cpmc
			restoredData[`sczl_cl${num}`] = item.sczl_cl
			restoredData[`sczl_返工产量${num}`] = item.sczl_返工产量
			restoredData[`sczl_PgCl${num}`] = item.sczl_PgCl
			restoredData[`sczl_计产系数${num}`] = item.sczl_计产系数
			restoredData[`sczl_Jtbh${num}`] = item.sczl_Jtbh1
			restoredData[`sczl_dedh${num}`] = item.sczl_dedh
		})
	
		const res = await addPackingTable(restoredData)
		if (res.code === 0) {
			ElMessage({
				type: 'success',
				message: '新增成功',
			})
		getTableData()
			// dialogFormVisible.value = false
			if (params.date != '') {
				getTableData()
			}
			getSideData()
		}
	}
	//弹出框回车事件
	const handleGetYg = async () => {
		if (detailData.sczl_bh == '') {
			formElements = document.getElementById('detail-form').elements
			formElements[3].focus()
			formElements[3].select()
			return
		}
		try {
			const response = await getYg({ sczl_bh: detailData.sczl_bh })
			if (response.code == 0) {
				if (response.data.length == 1) {
					detailData.name = response.data[0].ygxm
					detailData.sczl_bh = response.data[0].员工编号
					detailData.sczl_jsss = "0"
					// detailData.sczl_冲定额 = "0"
					formElements = document.getElementById('detail-form').elements
					formElements[3].focus()
					formElements[3].select()
				} else if (response.data.length > 1) {
					selectData_Yg.splice(0, selectData_Yg.length, ...response.data)
					setGXCurrent_Yg(selectData_Yg[0])
					dialogSelectVisible_Yg.value = true
				} else {
					ElMessage({
						type: 'warning',
						message: '未查询到该员工'
					})
					detailData.name = ''
					detailData.sczl_bh = ''
				}
			} else {
				detailData.name = '';
				detailData.sczl_bh = '';
			}
		} catch (e) {
			console.log(e)
		}
	}
	const dialogSelectVisible_Yg = ref(false)
	const selectData_Yg = reactive([])
	// 处理选择框
	const handleSelectClick_Yg = (row, column, event) => {
		detailData.name = row.ygxm
		detailData.sczl_bh = row.员工编号
		dialogSelectVisible_Yg.value = false
		formElements = document.getElementById('detail-form').elements
		formElements[3].focus()
		formElements[3].select()
	}
	const currentIndex_Yg = ref(0);
	const GXCurrent_Yg = ref(0);
	const selectGX_Yg = (event) => {
		if (event.keyCode === 40) { // 向下箭头
			if (currentIndex_Yg.value < selectData_Yg.length - 1) {
				currentIndex_Yg.value++;
				setGXCurrent_Yg(selectData_Yg[currentIndex_Yg.value]);
			} else {
				currentIndex_Yg.value = 0;
				setGXCurrent_Yg(selectData_Yg[currentIndex_Yg.value]); // 到达最后一行时回到第一行			
			}
		} else if (event.keyCode === 38) { // 向上箭头
			if (currentIndex_Yg.value > 0) {
				currentIndex_Yg.value--;
				setGXCurrent_Yg(selectData_Yg[currentIndex_Yg.value]);
			} else {
				currentIndex_Yg.value = selectData_Yg.length - 1;
				setGXCurrent_Yg(selectData_Yg[currentIndex_Yg.value]); // 到达第一行时回到最后一行
			}
		} else if (event.keyCode === 13) { // 回车键
			dialogSelectVisible_Yg.value = false;
			formElements = document.getElementById('detail-form').elements
			formElements[3].focus()
			formElements[3].select()
		}
	}
	const table_Yg = ref()
	const setGXCurrent_Yg = (row) => {
		setTimeout(() => {
			table_Yg.value?.setCurrentRow(row)
			detailData.name = row.ygxm
			detailData.sczl_bh = row.员工编号
		})
	}

	//班组回车事件
	const getBzsubmit = (event) => {
		if (event.keyCode !== 37){
		//弹出选择
		const data = [{
			'sczl_bzdh': 'A班'
		}, {
			'sczl_bzdh': 'B班'
		}]
		selectDataBz.splice(0, selectDataBz.length, ...data)
		if (dialogSelectVisible_Yg.value == false){
			BzVisible.value = true
		}

		setCurrent(data[0])
		}

	}
	//冲月定额
	const getBzsubmit2 = (event) => {
		if (event.keyCode !== 37) {
			const data = [{
			'sczl_冲定额': '是'
		}, {
			'sczl_冲定额': '否'
		}]
		selectDataCY.splice(0, selectDataCY.length, ...data)
		BzVisible2.value = true
		setCurrent2(data[0])
		}
	}
	const dialogSelectVisible_Bz = ref(false)
	const selectData_Bz = reactive([])
	// 处理选择框
	const handleSelectClick_Bz = (row, column, event) => {
		detailData.sczl_bzdh = row.sczl_bzdh
		dialogSelectVisible_Bz.value = false
	}
	const currentIndex_Bz = ref(0);
	const GXCurrent_Bz = ref(0);
	const selectGX_Bz = (event) => {
		if (event.keyCode === 40) { // 向下箭头
			if (currentIndex_Bz.value < selectData_Bz.length - 1) {
				currentIndex_Bz.value++;
				setGXCurrent_Bz(selectData_Bz[currentIndex_Bz.value]);
			} else {
				currentIndex_Bz.value = 0;
				setGXCurrent_Bz(selectData_Bz[currentIndex_Bz.value]); // 到达最后一行时回到第一行			
			}
		} else if (event.keyCode === 38) { // 向上箭头
			if (currentIndex_Bz.value > 0) {
				currentIndex_Bz.value--;
				setGXCurrent_Bz(selectData_Bz[currentIndex_Bz.value]);
			} else {
				currentIndex_Bz.value = selectData_Bz.length - 1;
				setGXCurrent_Bz(selectData_Bz[currentIndex_Bz.value]); // 到达第一行时回到最后一行
			}
		} else if (event.keyCode === 13) { // 回车键
			dialogSelectVisible_Bz.value = false;
		}
	}
	const table_Bz = ref()
	const setGXCurrent_Bz = (row) => {
		setTimeout(() => {
			table_Bz.value?.setCurrentRow(row)
			detailData.sczl_bzdh = row.sczl_bzdh
		})
	}
	
	// 处理选择框回车操作
	const handleEnter = (event,index, row) => {
		const inputs = document.getElementsByTagName("input");
		const currentIndex = Array.from(inputs).indexOf(event.target);
		// console.log(inputs)
		if(event.keyCode === 13){
			console.log("回车")
			detailData.table[index].sczl_dedh = '030002002'
			detailData.table[index].sczl_计产系数 = '1.000'
			if (row.sczl_gdbh === '') {
				detailData.table[index].sczl_yjGx = ''
				detailData.table[index].sczl_gxmc = ''
				detailData.table[index].Gd_cpmc = ''
			} else {
				getTableGxMc(index, row)
			}
		}
	}

	// 处理选择框
	const handleSelectClick = (row, column, event) => {
		const {
			Gd_cpmc,
			Gy0_gxmc,
			jyGx
		} = row
		const index = detailData.selectIndex
		detailData.table[index].Gd_cpmc = Gd_cpmc
		detailData.table[index].sczl_yjGx = jyGx
		detailData.table[index].sczl_gxmc = Gy0_gxmc
		dialogSelectVisible.value = false
	}
	const table2 = ref()
	const setCPCurrent = (row) => {
		setTimeout(() => {
			table2.value?.setCurrentRow(row)
			const {
				Gd_cpmc,
				Gy0_gxmc,
				jyGx
			} = row
			const index = detailData.selectIndex
			detailData.table[index].Gd_cpmc = Gd_cpmc
			detailData.table[index].sczl_yjGx = jyGx
			detailData.table[index].sczl_gxmc = Gy0_gxmc
		})
	}
	const CPIndex = ref(0);
	const JYCurrent = ref(0);
	const selectCP = (event) => {
		if (event.keyCode === 40) { // 向下箭头
			if (CPIndex.value < selectData.length - 1) {
				CPIndex.value++;
				setCPCurrent(selectData[CPIndex.value]);
			} else {
				CPIndex.value = 0;
				setCPCurrent(selectData[CPIndex.value]); // 到达最后一行时回到第一行			
			}
		} else if (event.keyCode === 38) { // 向上箭头
			if (CPIndex.value > 0) {
				CPIndex.value--;
				setCPCurrent(selectData[CPIndex.value]);
			} else {
				CPIndex.value = selectData.length - 1;
				setCPCurrent(selectData[CPIndex.value]); // 到达第一行时回到最后一行
			}
		} else if (event.keyCode === 13) { // 回车键
			dialogSelectVisible.value = false

		}
	}
	// 弹窗确定
	const enterDialog = async () => {
		for(let i = 0; i < detailData.table.length; i++) {
				if (detailData.table[i].sczl_gdbh ) {
					if(detailData.table[i].sczl_yjGx === '' || detailData.table[i].sczl_gxmc === '' || detailData.table[i].Gd_cpmc === ''){
						ElMessage({
						type: 'warning',
						message: detailData.table[i].sczl_gdbh + '工单未填写印件工序、工序名称或印件名称，无法保存'
					})
					return;
					}
				}
			}
		ElMessageBox.confirm('数据存盘?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			console.log(detailData.table[0].sczl_gdbh)
			if (type.value === '查改') {
			updateDetailData()
			console.log('查改')
		} else if (type.value === '新增') {
			addDetailData()
		}
		})
	}


	/*
		定额代号
	*/
	const dedhtreeData = reactive([]);
	const treeRef = ref(null);
	const dedhsearchModel = ref(false);
	const table_fplb = ref(null); // el-tree 的 ref
	const defaultExpandedKey = ref(null); // 默认展开的节点 key
	const selectIndex = ref(0); // 当前选中的索引
	const _index = ref(null)
	
	const getDedhsubmit = async (event,index, row) => {
	  try {
	    // 如果当前值是特殊值，直接跳到下一行
	    if (detailData.table[index].sczl_dedh === "030002002") {
	      jumpToNextRow(index);
	      return;
	    }
	
	    // 请求数据
	    const response = await getDedh();
	    if (response.code === 0) {
	      const treeData = response.data;
	
	      // 判断当前行的值是否存在于返回数据中
	      const isValueExist = checkIfValueExist(treeData, row.sczl_dedh);
	      if (isValueExist) {
	        console.log("匹配成功，跳转到下一行");
	        jumpToNextRow(index); // 跳转到下一行
	      } else {
			  if (event.keyCode === 13) {
				  // 如果不匹配，弹出弹窗
				  dedhsearchModel.value = true; 
				  _index.value = index; // 保存当前行索引
				  	
				  // 构建树形数据
				  dedhtreeData.splice(0, dedhtreeData.length, ...treeData.map((node) => buildTree(node)));
				  	
				  nextTick(() => {
				    const tree = table_fplb.value;
				    if (tree) {
				      const firstNode = tree.getNode(0);
				      if (firstNode) {
				        firstNode.expanded = true; 
				        firstNode.el.scrollIntoView();
				        firstNode.el.focus();
				      }
				    }
				  });
			  }
	      }
	    }
	  } catch (error) {
	    console.error("获取数据出错：", error);
	  }
	};
	
	// 判断当前值是否存在于树数据中
	const checkIfValueExist = (data, targetValue) => {
	  let found = false;
	
	  const search = (nodes) => {
	    for (const node of nodes) {
	      if (node.sys_bh === targetValue) {
	        found = true;
	        break;
	      }
	      if (Array.isArray(node.bh_mc)) {
	        search(node.bh_mc); // 递归搜索
	      }
	    }
	  };
	
	  search(data);
	  return found;
	};
	
	// 构建树形数据
	const buildTree = (node, parentIndex = "") => {
	  return {
	    id: parentIndex ? `${parentIndex}-${node.sys_bh}` : node.sys_bh,
	    label: `${node.sys_mc}【${node.sys_bh}】`,
	    params: { code: node.sys_bh },
	    children: Array.isArray(node.bh_mc)
	      ? node.bh_mc.map((child) => buildTree(child, node.sys_bh))
	      : [],
	  };
	};
	
	// 跳转到下一行的工单编号
	const jumpToNextRow = (currentIndex) => {
	  const nextRowIndex = currentIndex + 1;
	  if (nextRowIndex < detailData.table.length) {
	    nextTick(() => {
	      const nextInput = document.querySelector(
	        `[data-index="${nextRowIndex}"] input`
	      );
	      if (nextInput) {
	        nextInput.focus(); // 聚焦到下一行的工单编号输入框
	      }
	    });
	  }
	};

	
	
	//键盘事件
	const handleTreeKeydown = (event, index) => {
	  // _index.value = index; // 保存当前行索引
	  const tree = table_fplb.value; // 获取树实例
	  if (!tree) {
	    console.error("树组件未加载");
	    return;
	  }
	
	  const focusedElement = document.activeElement;
	  const focusedNodeId = focusedElement?.getAttribute("data-key");
	
	  // 回车键（13）的处理
	  if (event.keyCode === 13 && focusedNodeId) {
	    tree.setCurrentKey(focusedNodeId);
	    tree.$nextTick(() => {
	      const currentNode = tree.getCurrentNode();
	      if (!currentNode) {
	        console.warn("没有选中的节点");
	        return;
	      }
	
	      // 清除上一次的选中状态
	      clearPreviousSelection(tree);
	
	      // 收起所有其他节点
	      Object.keys(tree.store.nodesMap).forEach((key) => {
	        tree.store.nodesMap[key].expanded = false; // 收起所有节点
	      });
	
	      // 展开当前节点
	      tree.store.nodesMap[currentNode.id].expanded = true;
	
	      // 如果当前节点有子节点，选中第一个子节点
	      if (currentNode.children && currentNode.children.length > 0) {
	        const firstChild = currentNode.children[0];
	        if (firstChild) {
	          const firstChildKey = firstChild.id.toString();
	          tree.setCurrentKey(firstChildKey);
	          setTimeout(() => {
	            const firstChildDom = tree.$el.querySelector(`[data-key="${firstChildKey}"]`);
	            if (firstChildDom) {
	              firstChildDom.focus();
	              firstChildDom.scrollIntoView({ block: "nearest" });
	            }
	          });
	        }
	      } else {
	        // 当前节点没有子节点的逻辑
	        console.log("当前行索引:", _index.value); // 打印当前行索引
	        console.log("当前子节点:", currentNode.label);
	        const currentLabel = currentNode.label; 
	        const code = currentLabel.split("【")[1]?.split("】")[0] || "";
	
	        // 赋值给当前行的字段
	        detailData.table[_index.value].sczl_dedh = code;
	        dedhsearchModel.value = false; // 关闭弹窗
	      }
	    });
	  }
	
	  // 上下箭头键（38/40）的处理
	  else if (event.keyCode === 38 || event.keyCode === 40) {
	    const currentNode = tree.getCurrentNode();
	    if (currentNode) {
	      const currentNodeDom = tree.$el.querySelector(`[data-key="${currentNode.id}"]`);
	      if (currentNodeDom) {
	        currentNodeDom.focus();
	      }
	    }
	  }
	};

	
	// 清除之前的选中状态
	const clearPreviousSelection = (tree) => {
	  const selectedNodes = tree.getCheckedNodes();
	  selectedNodes.forEach(node => {
		tree.setChecked(node, false);
	  });
	  tree.setCurrentKey(null);
	};
	
	
	// 弹出框键盘事件
	const ent = (event) => {
	  if (document.activeElement.id === "tableFplb") {
		if (table_fplb.value) {
		  const tree = table_fplb.value?.$el;
		  console.log(111, tree);
		  if (tree) {
			const node = tree.querySelector("[data-key]");
			console.log(222, node);
			if (event.keyCode === 13) {
				/* 跳过 */
			}
			if (node) {
			  node.scrollIntoView({ block: "nearest" }); // 确保节点可见
			  node.focus(); // 确保焦点正确
			}
		  }
		}
	  }
	};
	
	// 点击定额代号
	const dedhhandleNodeClick = (node, check) => {
		console.log(node);
		console.log(node.params.code);
		if (node.children && node.children.length > 0) {
			console.log(11);
		} else {
			detailData.table[_index.value].sczl_dedh = node.params.code
			dedhsearchModel.value = false;
		}
		// dedhsearchModel.value = false;
	};




	let flag_Bz = true
	let formElements
	const moveFocus = (event) => {
		// console.log(formElements);
    const index = Array.from(formElements).indexOf(event.target);
    const key = event.key;
	console.log(index);
	const currentInputValue = formElements[index].value;
    event.preventDefault();
    switch (index) {
        case 0:
            if (key === 'ArrowRight' ) {
                formElements[1].focus();
                formElements[1].select();
            } else if (key === 'ArrowLeft') {
                formElements[formElements.length - 1].focus();
                formElements[formElements.length - 1].select();
            } else if (key === 'Enter') {
                formElements[1].focus();
                formElements[1].select();
            }
            break;
        case 1:
            if (key === 'ArrowRight') {
                formElements[3].focus();
                formElements[3].select();
            } else if (key === 'ArrowLeft') {
                formElements[0].focus();
                formElements[0].select();
            } else if (key === 'Enter') {
                handleGetYg();
            }
            break;

        case 3:
            if (key === 'ArrowRight') {

                formElements[4].focus();
                formElements[4].select();
            } else if (key === 'ArrowLeft') {
                formElements[1].focus();
                formElements[1].select();
            } else if (key === 'Enter') {
                formElements[4].focus();
                formElements[4].select();
            }
            break;

        case formElements.length - 1:
            if (key === 'ArrowRight') {
                formElements[0].focus();
                formElements[0].select();
            } else if (key === 'ArrowLeft') {
                formElements[index - 1].focus();
                formElements[index - 1].select();
            } else if (key === 'Enter') {
                formElements[0].focus();
                formElements[0].select();
				enterDialog()
            }
            break;

        default:
            if (key === 'ArrowRight') {
                formElements[index + 1].focus();
                formElements[index + 1].select();
            } else if (key === 'ArrowLeft') {
                formElements[index - 1].focus();
                formElements[index - 1].select();
            } else if (key === 'Enter') {
                formElements[index + 1].focus();
                formElements[index + 1].select();
            }
            break;
    }
};
	const movefous2 = (event,row,index)=>{
		const index2 = Array.from(formElements).indexOf(event.target)
			if (row.sczl_dedh != '' & event.key === "ArrowRight"){
				event.stopPropagation();
				formElements[index2+2].focus();
				formElements[index2+2].select();
			}
	}
	const movefous = (event,row,index)=>{
		console.log(1)
		const index2 = Array.from(formElements).indexOf(event.target)
			if (row.sczl_dedh != '' & event.key === "ArrowLeft"){
				event.stopPropagation();
				formElements[index2-2].focus();
				formElements[index2-2].select();
			}
			if(row.sczl_gdbh === '' && event.key === "Enter" ){
				event.stopPropagation();
				formElements[index2+11].focus();
				formElements[index2+11].select();
				row.sczl_yjGx = ""
				row.sczl_gxmc = ""
				row.Gd_cpmc = ""
				row.hsbz = ""
				row.sczl_cl = ""
				row.sczl_返工产量 = ""
				row.sczl_计产系数 = ""
				row.sczl_PgCl = ""
				row.sczl_Jtbh1 = ""
				row.sczl_dedh = ""
			}
	}
	const movefous3 = (event,row,index)=>{
		console.log(3333)
		if (event.key === "Enter"){
			const index2 = Array.from(formElements).indexOf(event.target)
			event.stopPropagation();
			formElements[index2+1].focus();
			formElements[index2+1].select();
		}else{
			return
		}
	}

</script>

<style scoped>
	:deep(.plan-usage-low div) {
		color: red !important;
	}

	.JKWTree-container {
		display: flex;
	}

	.JKWTree-tree {
		width: 100%;
		background-color: #fff;
		/*background-color: rgba(241, 224, 224, 0.99);*/
		padding: 10px;
		margin-right: 20px;
	}

	.JKWTree-tree h3 {
		font-size: 15px;
		font-weight: 700;
		margin: 10px 0;
	}

	.JKWTree-content {
		flex: 1;
	}


	:deep(.el-table__body .warning-row) {
		background: #FFFF80 !important;
	}

	/* 选中某行时的背景色 */
	:deep(.el-table__body tr.current-row)>td {
		background: #ff80ff !important;
	}

	:deep(.el-table .bg-yellow) {
		background: yellow;
	}
</style>
<style scoped>
	:deep(.el-table td .cell) {
		line-height: 25px !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;
	}
	/* tree组件背景高亮 */
	:deep(.el-tree-node:focus > .el-tree-node__content){
			background: #ff80ff !important;
		}
</style>