mes-ai-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%"
								ref="table">
								<el-table-column prop="sczl_冲定额" label="冲月定额" width="150" />
							</el-table>
						</el-dialog>
					<!-- 弹出框 -->
					<div>
						<el-dialog v-model="dialogFormVisible" :title="type" destroy-on-close width="1200px">
							<el-form id="detail-form" :model="detailData" inline label-position="left"
								@keyup="moveFocus">
								<el-form-item label="日期">
									<el-input type="date" max="9999-12-31" @focus="rqHandleFocus()"
										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;"
										placeholder="Enter回车" 
										@blur="getBzsubmit()" />
									<el-input v-model="detailData.name" style="width: 100px; padding-left: 5px;"
										@click="selectvalue($event)" readonly />
								</el-form-item>

								<el-form-item label="组别">
									<!-- <el-select v-model="detailData.sczl_bzdh" placeholder=" " style="width: 80px" >
									  <el-option  label="A班" value="A班" />
									  <el-option label="B班" value="B班" />
									</el-select> -->
									<el-input v-model="detailData.sczl_bzdh" style="width: 80px;" />
								</el-form-item>
								<br>

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

								<el-form-item label="冲月定额">
									<!-- <el-select v-model="detailData.sczl_冲定额" placeholder=" " style="width: 100px">
										<el-option label="" value="" />
										<el-option label="是" value="是" />
									</el-select> -->
									<el-input v-model="detailData.sczl_冲定额" style="width: 80px;" />
								</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="100">
										<template #default="{ row, $index }">
											<el-input v-model="row.sczl_gdbh" placeholder="Enter回车"
												@keyup.enter="handleEnter($index, row)" />
										</template>
									</el-table-column>

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

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

									<el-table-column label="印件名称">
										<template #default="{ row }">
											<el-input v-model="row.Gd_cpmc" readonly />
										</template>
									</el-table-column>

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

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

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

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

									<el-table-column label="来源" width="100">
										<template #default="{ row }">
											<el-input v-model="row.sczl_Jtbh1" />
										</template>
									</el-table-column>

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

								</el-table>

								<el-form-item label="其他备注" style="margin-top: 10px;">
									<el-input v-model="detailData.sczl_desc" />
								</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" :before-close="() => dedhsearchModel = false" @opened="focusFirstNode">
							<el-form>
								<div>
									<el-form-item label="定额代号 :" class="mab" prop="keyOrder">
									</el-form-item>

									<div style="border:1px solid #eee; width:100%; height: 400px; overflow-y: auto">
										<el-tree ref="table_dedh" node-key="id" :data="dedhtreeData" :props="{
		            children: 'children',
		            label: 'label',
		          }"   @node-click="dedhhandleNodeClick"></el-tree>
									</div>


								</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>


// export default {
//   data() {
//   },
//   methods: {
//     focusFirstNode() {
//       // 在对话框打开时聚焦在第一个节点上
// 	  const tree = this.$refs.dedhTree;
// 	  if (this.dedhtreeData && this.dedhtreeData.length > 0) {
//             // 设置第一个节点为默认选中节点
//             this.$refs.dedhTree.setCurrentKey(this.dedhtreeData[0].id);
//         }
//     },
//   },
//   mounted() {
//     if (this.dedhsearchModel) {
//       this.focusFirstNode();
//     }
//   },
// };
</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) => {

		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 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 () => {
		try {
			const response = await getPackingTable({
				date: params.date,
				sys_id: params.sys_id,
				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)
				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}`],
							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) {
				// 			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) {
				const {
					Gd_cpmc,
					Gy0_gxmc,
					jyGx
				} = response.data[0]
				if (response.data.length === 1) {
					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[`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 updatePackingTable(restoredData)
		if (res.code === 0) {
			ElMessage({
				type: 'success',
				message: '更新成功',
			})
			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[`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: '新增成功',
			})
			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 = () => {
		//弹出选择
		const data = [{
			'sczl_bzdh': 'A班'
		}, {
			'sczl_bzdh': 'B班'
		}]
		selectDataBz.splice(0, selectDataBz.length, ...data)
		BzVisible.value = true
		setCurrent(data[0])
	}
	//冲月定额
	const getBzsubmit2 = () => {
		//弹出选择
		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 = (index, row) => {
		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) => {
		// console.log(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
			console.log(event);
		}
	}
	// 弹窗确定
	const enterDialog = () => {
		if (type.value === '查改') {
			updateDetailData()
		} else if (type.value === '新增') {
			addDetailData()
		}
	}


	//新增定额代号
	const dedhsearchModel = ref(false)
	const dedhtreeData = ref([])
	const table_dedh =ref()
	const _index = ref(null)
	// 定额代号回车事件
	const getDedhsubmit = async (index, row) => {
		// const tree = this.$refs.dedhTree;
		// console.log(tree);
		console.log(index)
		_index.value = index
		dedhsearchModel.value = true;
		const getPieceWorks = await getDedh();
		console.log(getPieceWorks);
	if (getPieceWorks.code === 0) {
		const transformItems = (items,indexs) => {
	        return items.map((item,index) => ({
	            id: `${indexs}-${index}`,
	            label: `${item.sys_mc}【${item.sys_bh}】`,
	            params: {
	                code: item.sys_bh
	            },
	            children: item.bh_mc ? transformItems(item.bh_mc) : []
	        }));
	    };
	
	    const transformedData2 = getPieceWorks.data.map((topItem,indexs) => ({
			id: indexs,
	        label: `${topItem.sys_mc}【${topItem.sys_bh}】`,
	        params: {
	            code: topItem.sys_bh
	        },
	        children: topItem.bh_mc ? transformItems(topItem.bh_mc,indexs) : []
	    }));
	
	    dedhtreeData.value = transformedData2;
		console.log(transformedData2);
		  nextTick(() => {
		    // 手动设置选中节点，如果默认选中不生效，可以使用此方法
		    if (table_dedh.value) {
			  const tree = table_dedh.value?.$el; // 访问组件实例的 $el
			    if (tree) {
			      // 通过DOM选择器查找节点
			      const node = tree.querySelector('[data-key="0"]');
			      if (node) {
			        node.scrollIntoView();
			        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) => {
    const index = Array.from(formElements).indexOf(event.target);
    const key = event.key;
    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();
            }
            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;
    }
};

</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;
	}
</style>