mes-ai-admin-backend-ui/src/view/performance/07-otherDocuments/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="plus" class="bt" @click="handleShowAdd">新增 </el-button>
								<el-button type="primary" icon="delete" class="bt" @click="onDel">删除 </el-button>

							</el-form-item>
						</el-form>

						<!-- 数据展示 -->
						<el-table ref="table" style="width: 100%" tooltip-effect="dark" :data="tableData" row-key="ID"
							highlight-current-row border show-overflow-tooltip="true" :row-style="{ height: '20px' }"
							:cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
							:header-cell-style="{ padding: '0px' }" @selection-change="handleSelectionChange"
							@row-dblclick="handleShowEdit" @current-change="(row, oldRow) => { currentRow = row}">

							<!-- 循环渲染列 -->
							<el-table-column v-for=" column in tableColumns " :key="column.prop" :prop="column.prop"
								:label="column.label" :width="column.width" 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>
					<!-- 弹出框 -->
					<div>
						<!-- 详情页 -->
						<el-dialog v-model="dialogFormVisible" :before-close="closeDialog"
							:title="type === 'create' ? '新增' : '修改'" destroy-on-close width="800px">
							<!-- <el-scrollbar height="500px"> -->
							<el-form :model="detailData" id="detail-form" ref="elFormRef" label-width="100px"
								label-position="right" inline>
								<el-row :gutter="24">
									<el-col :span="24">
										<el-form-item label="员工编号">
											<el-input v-model="detailData.Sczl_bh1" @blur="handleYgbhEnter"
												placeholder="Enter回车" @keydown="ent1($event)" style="width: 120px" />
											<el-input style="width: 120px; margin-left: 5px" readonly
												v-model="detailData.name" />
										</el-form-item>
									</el-col>
								</el-row>

								<el-row :gutter="24">
									<el-col :span="14">
										<el-form-item label="工序类别">
											<el-input @blur="get_LB" v-model="detailData.sczl_Type"
												@keydown="ent1($event)" style="width: 120px; " />

											<!-- <el-select v-model="detailData.sczl_Type" style="width: 150px">
											<el-option label="拆片" value="拆片" />
											<el-option label="包装" value="包装" />
											<el-option label="打包" value="打包" />
											<el-option label="拉料" value="拉料" />
										</el-select> -->
										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item label="日期">
											<el-input type="date" max="9999-12-31" v-model="detailData.Sczl_rq"
												@keydown="ent1($event)" style="width: 150px" />
										</el-form-item>
									</el-col>
								</el-row>

								<el-row :gutter="24">
									<el-col :span="24">
										<el-form-item label="工单编号">
											<el-input v-model="detailData.Sczl_gdbh" @blur="handleGdbhEnter"
												placeholder="Enter回车" @keydown="ent1($event)" style="width: 120px" />
											<el-input v-model="detailData.Gd_cpmc"
												style="width: 480px; margin-left: 5px" readonly />
										</el-form-item>
									</el-col>
								</el-row>

								<el-row :gutter="24">
									<el-col :span="24">
										<el-form-item label="工艺流程">
											<el-input v-model="detailData.Sczl_gxmc" @blur="handleGylcEnter"
												@keydown="ent1($event)" style="width: 480px" />
											<el-input v-model="detailData.sczl_gxh"
												style="width: 120px; margin-left: 5px" readonly />
										</el-form-item>
									</el-col>
								</el-row>

								<el-row :gutter="24">
									<el-col :span="14">
										<el-form-item label="" style="margin-left: 67px;">
											<el-input v-model="leftData" @keydown="ent1($event)"
												style="width: 100px; margin-left: 32px;"
												@blur="()=>{detailData.Sczl_cl = (leftData * rightData).toString()}" />X
											<el-input v-model="rightData" @keydown="ent1($event)"
												style="width: 100px;margin-left: 12px;"
												@blur="()=>{detailData.Sczl_cl = (leftData * rightData).toString()}" />

										</el-form-item>
									</el-col>
									<el-col :span="10">
										<el-form-item label="计件产量">
											<el-input @keydown="ent1($event)" v-model="detailData.Sczl_cl"
												style="width: 150px" />
										</el-form-item>
									</el-col>
								</el-row>

								<el-row :gutter="24">
									<el-col :span="24">
										<el-form-item label="工价代号">
											<el-input v-model="detailData.Sczl_dedh" style="width: 150px"
												@blur="handleGjdhEnter" @keydown="ent1($event)" />
											<el-input v-model="detailData.sys_mc" style="width: 450px; margin-left: 5px"
												readonly />
										</el-form-item>
									</el-col>
								</el-row>

								<el-row :gutter="24">
									<el-col :span="24">
										<el-form-item label="票号备注">
											<el-input v-model="detailData.Sczl_desc" @keydown="ent1($event)"
												style="width: 605px" />
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>

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

						<!-- 工价代号弹窗 -->
						<el-dialog v-model="dialogDedh" :before-close="()=>{dialogDedh = false}" title="工价代号"
							destroy-on-close>

							<el-scrollbar style="height: 50vh;width: 50vw;">
								<el-tree :data="dedhTreeData" highlight-current style="width: 90%;"
									@node-click="handleSelectDjdh" />
							</el-scrollbar>
						</el-dialog>

						<!-- 工艺流程弹窗 -->
						<el-dialog v-model="dialogGylc" title="工艺流程" destroy-on-close style="width: 500px; "
							@keydown="selectGX($event)">

							<el-table tooltip-effect="dark" :data="selectData" row-key="ID" highlight-current-row="true"
								border style="width:100%" height="400px" @row-dblclick="handleSelectClick" ref="table2">
								<el-table-column prop="jyGx" label="检验工序" width="460" />
							</el-table>

						</el-dialog>

						<!-- 工序类别选择 -->
						<el-dialog v-model="LBVisible" title="选择" destroy-on-close width="200px"
							@keydown="selectLB($event)">
							<el-table tooltip-effect="dark" :data="LBselectData" row-key="ID"
								highlight-current-row="true" border style="width:100%" :row-style="{ height: '30px' }"
								@row-dblclick="LBSelectClick" ref="tableLB">
								<el-table-column prop="sczl_Type" label="" width="160" />
							</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-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>
	import {
		Layout,
		LayoutContent,
		LayoutHeader,
		LayoutSider
	} from '@arco-design/web-vue'
	import {
		ElMessage,
		dayjs,
		ElMessageBox
	} from 'element-plus'
	import {
		ref,
		reactive,
		nextTick
	} from 'vue'
	import {
		getSide,
		getTable,
		getYg,
		getGdmc,
		getDedh,
		getGxMc,
		updateData,
		add,
		del
	} from '@/api/mes_api_gty/otherDocuments'
	import {
		useUserStore
	} from '@/pinia/modules/user'
	const userStore = useUserStore()
	const sys_id = '[' + userStore.userInfo.userName + '/' + userStore.userInfo.nickName + ']'
	defineOptions({
		name: '07OtherDocuments'
	})

	// 侧边栏数据请求
	const treeData = reactive([])
	const getSideData = async () => {
		const response = await getSide()
		if (response.code === 0) {
			const transformedData = response.data.map(item => ({
				label: `${item.date.replace(/-/g, '.')}【产量合计: ${item.counts}】`,
				children: item.sys.map(sysItem => ({
					label: `${sysItem.Sczl_bh1}(${sysItem.name}) 【产量合计: ${sysItem.count}】`,
					params: {
						date: item.date.substring(0, 4) + '-' + item.date.substring(4),
						Sczl_bh1: sysItem.Sczl_bh1,
					},
				})),
			}))
			treeData.splice(0, treeData.length, ...transformedData)
		}
	}
	getSideData()

	const elFormRef = ref()

	// ============== 表格页面 ==============
	const tableColumns = [{
			prop: 'sczl_Type',
			label: '计件类型',
			width: '120'
		},
		{
			prop: 'Sczl_rq',
			label: '日期',
			width: '100'
		},
		{
			prop: 'Sczl_bh1',
			label: '员工编号',
			width: '120'
		},
		{
			prop: 'name',
			label: '员工姓名',
			width: '120'
		},
		{
			prop: 'sczl_gdbh',
			label: '工单编号',
			width: '120'
		},
		{
			prop: 'Gd_cpmc',
			label: '产品名称',
			width: '300'
		},
		{
			prop: 'Sczl_cl',
			label: '产量',
			width: '100'
		},
		{
			prop: '',
			label: '千件工价',
			width: '120'
		}, // prop 属性值需要补充
		{
			prop: 'sys_mc',
			label: '工价备注',
			width: '200'
		}, // prop 属性值需要补充
		{
			prop: 'Sczl_desc',
			label: '备注',
			width: '100'
		},
		{
			prop: 'Sczl_gxmc',
			label: '工序名称',
			width: '120'
		},
		{
			prop: 'sczl_yjno',
			label: '印件号',
			width: '100'
		},
		{
			prop: 'sczl_gxh',
			label: '工序号',
			width: '100'
		},
		{
			prop: 'sys_id',
			label: '创建用户',
			width: '150'
		},
		{
			prop: 'sys_rq',
			label: '创建时间',
			width: '200'
		},
		{
			prop: 'mod_rq',
			label: '修改时间',
			width: '200'
		},
		{
			prop: 'UniqId',
			label: 'UNIQID',
			width: '100'
		}
	]
	const tableData = reactive([])
	const currentRow = ref()
	const type = ref('')

	const page = ref(1)
	const total = ref(0)
	const limit = ref(10)
	const searchInfo = ref('')
	const params = {
		date: '',
		Sczl_bh1: '',
		order: '',
		page: page.value.toString(),
		limit: limit.value.toString(),
	}

	const table = ref()
	const setCurrent = (row) => {
		table.value?.setCurrentRow(row)
	}

	// 获取表格数据
	const getTableData = async () => {
		// try {
		const response = await getTable(params)
		if (response.code === 0) {
			total.value = response.data.total
			tableData.splice(0, tableData.length, ...response.data.rows)
			setCurrent(tableData[0])
		}
	}

	// 分页设置
	const handleSizeChange = () => {
		params.limit = limit.value.toString()
		getTableData()
	}

	// 页面跳转
	const handleCurrentChange = () => {
		params.page = page.value.toString()
		getTableData()
	}

	// 点击左侧节点
	const handleNodeClick = (node, check) => {
		if (node.params) {
			params.date = node.params.date
			params.Sczl_bh1 = node.params.Sczl_bh1
			params.order = ''
			page.value = 1
			handleCurrentChange()
		}
	}

	// 搜索
	function handleSearch() {
		params.order = searchInfo.value
		params.date = ''
		params.Sczl_bh1 = ''
		page.value = 1
		handleCurrentChange()
	}

	// ============== 详情页面 ==============
	const detailData = reactive({
		Sczl_bh1: '',
		sczl_Type: '',
		Sczl_rq: '',
		Sczl_gdbh: '',
		Sczl_gxmc: '',
		sczl_gxh: '',
		Sczl_cl: '',
		Sczl_dedh: '',
		Sczl_desc: '',
	})
	const leftData = ref(0)
	const rightData = ref(0)
	const dedhTreeData = ref()
	const gylcTreeData = ref()
	const selectData = reactive([])


	// 弹窗控制标记
	const dialogFormVisible = ref(false)
	const dialogDedh = ref(false)
	const dialogGylc = ref(false)
	// 新增数据
	const handleShowAdd = () => {
		type.value = 'create'
		// 设置detailData对象中的所有属性值为空
		Object.keys(detailData).forEach(key => {
			detailData[key] = '';
		});
		const date = dayjs().format('YYYY-MM-DD')
		detailData.Sczl_rq = date
		dialogFormVisible.value = true
	}
	// 查改
	const handleShowEdit = () => {
		type.value = 'update'
		Object.assign(detailData, currentRow.value)
		detailData.Sczl_gdbh = detailData.sczl_gdbh
		detailData.Sczl_dedh = detailData.sys_bh
		dialogFormVisible.value = true
	}
	const ent1 = (event) => {
		const inputs = document.getElementsByTagName('input');
		const currentIndex = Array.from(inputs).indexOf(event.target);

		if (event.keyCode === 13 || event.keyCode === 40) { // Enter 或向下箭头
			for (let i = currentIndex + 1; i < inputs.length; i++) {
				if (!inputs[i].readOnly) {
					nextTick(() => {
						inputs[i].focus();
						inputs[i].select();
					})
					break;
				}
			}
		} else if (event.keyCode === 38) { // 向上箭头
			for (let i = currentIndex - 1; i >= 0; i--) {
				if (!inputs[i].readOnly) {
					nextTick(() => {
						inputs[i].focus();
						inputs[i].select();
					})
					break;
				}
			}
		} else if (event.keyCode === 8) { // 删除箭头
			if (event.target.selectionStart === 0) {
				for (let i = currentIndex - 1; i >= 0; i--) {
					if (!inputs[i].readOnly) {
						nextTick(() => {
							inputs[i].focus();
							inputs[i].setSelectionRange(0, 0);
							inputs[i].select(); // 全选输入框内容
						})
						break;
					}
				}
			}
		} else if (event.keyCode === 37) { // 向左箭头
			if (event.target.selectionStart === 0) {
				for (let i = currentIndex - 1; i >= 0; i--) {
					if (!inputs[i].readOnly) {
						nextTick(() => {
							inputs[i].focus();
							inputs[i].select();
						})
						break;
					}
				}
			}
		} else if (event.keyCode === 39) { // 向右箭头
			if (event.target.selectionStart === event.target.value.length) {
				for (let i = currentIndex + 1; i < inputs.length; i++) {
					if (!inputs[i].readOnly) {
						nextTick(() => {
							inputs[i].focus();
							inputs[i].select();
						})
						break;
					}
				}
			}
		}
	}

	//员工编号回车事件
	const handleYgbhEnter = async () => {
		if (!detailData.Sczl_bh1 || LBVisible.value) {
			return
		}
		const response = await getYg({
			sczl_bh: detailData.Sczl_bh1
		})
		if (response.code == 0) {
			if (response.data.length == 1) {
				detailData.name = response.data[0].ygxm
				detailData.Sczl_bh1 = response.data[0].员工编号
			} 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_bh1 = ''
			}
		} else {
			detailData.name = '';
			detailData.Sczl_bh1 = '';
		}
	}
	const dialogSelectVisible_Yg = ref(false)
	const selectData_Yg = reactive([])
	// 处理选择框
	const handleSelectClick_Yg = (row, column, event) => {
		detailData.name = row.ygxm
		detailData.Sczl_bh1 = row.员工编号
		dialogSelectVisible_Yg.value = false
	}
	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;
		}
	}
	const table_Yg = ref()
	const setGXCurrent_Yg = (row) => {
		setTimeout(() => {
			table_Yg.value?.setCurrentRow(row)
			detailData.name = row.ygxm
			detailData.Sczl_bh1 = row.员工编号
		})
	}


	//工序类型选择
	const get_LB = () => {
		GetLB()
	}
	const LBVisible = ref(false)
	const LBselectData = reactive([])
	//获取仓库信息
	const GetLB = async () => {
		if(dialogSelectVisible_Yg.value){
			return
		}
		const data = [{
			'sczl_Type': '拆片'
		}, {
			'sczl_Type': '包装'
		}, {
			'sczl_Type': '打包'
		}, {
			'sczl_Type': '拉料'
		}]
		LBselectData.splice(0, LBselectData.length, ...data)
		setLBCurrent(LBselectData[0])
		LBVisible.value = true
	}
	//选择
	const LBSelectClick = (row, column, event) => {
		const {
			sczl_Type
		} = row
		detailData.sczl_Type = sczl_Type
		LBVisible.value = false
	}
	const tableLB = ref()
	const setLBCurrent = (row) => {
		setTimeout(() => {
			tableLB.value?.setCurrentRow(row)
			const {
				sczl_Type
			} = row
			detailData.sczl_Type = sczl_Type
		})
	}
	const LBIndex = ref(0);
	const LBCurrent = ref(0);
	const selectLB = (event) => {
		if (event.keyCode === 40) { // 向下箭头
			if (LBIndex.value < LBselectData.length - 1) {
				LBIndex.value++;
				setLBCurrent(LBselectData[LBIndex.value]);
			} else {
				LBIndex.value = 0;
				setLBCurrent(LBselectData[LBIndex.value]); // 到达最后一行时回到第一行			
			}
		} else if (event.keyCode === 38) { // 向上箭头
			if (LBIndex.value > 0) {
				LBIndex.value--;
				setLBCurrent(LBselectData[LBIndex.value]);
			} else {
				LBIndex.value = LBselectData.length - 1;
				setLBCurrent(LBselectData[LBIndex.value]); // 到达第一行时回到最后一行
			}
		} else if (event.keyCode === 13) { // 回车键
			LBVisible.value = false
		}
	}

	const handleGdbhEnter = async () => {
		const res = await getGdmc({
			gdbh: detailData.Sczl_gdbh
		})
		if (res.code === 0) {
			detailData.Gd_cpmc = res.data.Gd_cpmc
		}
	}

	const handleGylcEnter = async () => {
		const res = await getGxMc({
			gdbh: detailData.Sczl_gdbh,
			keyword: ''
		})
		if (res.code === 0) {
			const data = res.data.sort((a, b) => parseInt(a.Gy0_yjno) - parseInt(b.Gy0_yjno));
			selectData.splice(0, selectData.length, ...data)
			setGXCurrent[selectData[0]]
			dialogGylc.value = true
		}
	}

	// 工单选择框
	const handleSelectClick = (row, column, event) => {
		detailData.Sczl_gxmc = row.jyGx
		detailData.sczl_gxh = row.Gy0_gxh
		detailData.Gd_cpmc = row.Gd_cpmc
		dialogGylc.value = false
	}
	const table2 = ref()
	const setGXCurrent = (row) => {
		setTimeout(() => {
			table2.value?.setCurrentRow(row)
			detailData.Sczl_gxmc = row.jyGx
			detailData.sczl_gxh = row.Gy0_gxh
			detailData.Gd_cpmc = row.Gd_cpmc
		})
	}
	const handleSelectGylc = (node, check) => {
		detailData.Sczl_gxmc = node['jyGx']
		detailData.sczl_gxh = node['Gy0_gxh']
		detailData.Gd_cpmc = node['Gd_cpmc']
		dialogGylc.value = false
	}
	const currentIndex = ref(0);
	const GXCurrent = ref(0);
	const selectGX = (event) => {
		if (event.keyCode === 40) { // 向下箭头
			if (currentIndex.value < selectData.length - 1) {
				currentIndex.value++;
				setGXCurrent(selectData[currentIndex.value]);
			} else {
				currentIndex.value = 0;
				setGXCurrent(selectData[currentIndex.value]); // 到达最后一行时回到第一行			
			}
		} else if (event.keyCode === 38) { // 向上箭头
			if (currentIndex.value > 0) {
				currentIndex.value--;
				setGXCurrent(selectData[currentIndex.value]);
			} else {
				currentIndex.value = selectData.length - 1;
				setGXCurrent(selectData[currentIndex.value]); // 到达第一行时回到最后一行
			}
		} else if (event.keyCode === 13) { // 回车键
			dialogGylc.value = false
		}
	}

	const handleGjdhEnter = async () => {
		const res = await getDedh({
			sczl_jtbh: ''
		})
		if (res.code === 0) {
			const {
				data
			} = res

			const transformData = (data) => {
				if (Array.isArray(data)) {
					return data.map((item) => transformData(item))
				} else if (typeof data === 'object') {
					const {
						Key_,
						sys_bh,
						sys_mc,
						bh_mc
					} = data
					const label = `${sys_bh}【${sys_mc}】`
					const node = {
						Key_,
						sys_bh,
						sys_mc,
						label
					}

					if (bh_mc) {
						node.children = transformData(bh_mc)
					}

					return node
				} else {
					return data
				}
			}

			const temp = []
			temp[0] = transformData(data)
			dedhTreeData.value = temp
			dialogDedh.value = true
		}
	}

	const handleSelectDjdh = (node, check) => {
		if (!node['children']) {
			const {
				sys_bh,
				sys_mc
			} = node
			detailData.Sczl_dedh = sys_bh
			detailData.sys_mc = sys_mc
			dialogDedh.value = false
		}
	}


	// 弹窗确定
	const enterDialog = async () => {
		// if(formData.value.入仓类型==''){
		// 	ElMessage({type: 'warning',message: '请选择入仓类型'});
		// 	return;
		// }
		// if(formData.value.仓库编号==''){
		// 	ElMessage({type: 'warning',message: '请选择仓库'});
		// 	return;
		// }
		// if(formData.value.jjcp_gdbh==''){
		// 	ElMessage({type: 'warning',message: '请填写工单编号'});
		// 	return;
		// }
		// if(formData.value.jjcp_cpdh==''){
		// 	ElMessage({type: 'warning',message: '请选择印件'});
		// 	return;
		// }
		// if(formData.value.jjcp_sl==''){
		// 	ElMessage({type: 'warning',message: '请填写入仓数量'});
		// 	return;
		// }

		const restoredData = {
			Sys_id: sys_id,
			Sczl_bh1: detailData.Sczl_bh1,
			sczl_Type: detailData.sczl_Type,
			Sczl_rq: detailData.Sczl_rq,
			Sczl_gdbh: detailData.Sczl_gdbh,
			Sczl_gxmc: detailData.Sczl_gxmc,
			sczl_gxh: detailData.sczl_gxh,
			Sczl_cl: detailData.Sczl_cl,
			Sczl_dedh: detailData.Sczl_dedh,
			Sczl_desc: detailData.Sczl_desc,
		}
		let res
		switch (type.value) {
			case 'create':
				res = await add(restoredData)
				break
			case 'update':
				restoredData.UniqId = detailData.UniqId;
				res = await updateData(restoredData)
				break
			default:
				// res = await createCompany(formData.value)
				break
		}
		if (res.code === 0) {
			ElMessage({
				type: 'success',
				message: type.value == 'create' ? '创建成功' : '更改成功'
			})

			dialogFormVisible.value = false
			getTableData()
			// getSideData()
		}
	}

	// 关闭弹窗
	const closeDialog = () => {
		dialogFormVisible.value = false
	}

	let formElements
	const moveFocus = (event) => {
		const index = Array.from(formElements).indexOf(event.target)
		const key = event.key
		event.preventDefault()
		console.log(formElements)
		switch (index) {
			case 0:
				if (key === 'ArrowDown') {
					formElements[1].focus()
					formElements[1].select();
				} else if (key === 'ArrowUp') {
					formElements[formElements.length - 1].focus()
				} else if (key === 'Enter') {
					formElements[1].focus()
					formElements[1].select();
				}
				break

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

			default:
				if (key === 'ArrowDown') {
					formElements[index + 1].focus()
					formElements[index + 1].select();
				} else if (key === 'ArrowUp') {
					formElements[index - 1].focus()
					formElements[index + 1].select();
				} else if (key === 'Enter') {
					formElements[index + 1].focus()
					formElements[index + 1].select();
				}
				break
		}
	}

	const rowSelection = {
		type: 'radio'
	};

	// let lastCellValue=ref()
	// 多选
	// const handleSelectionChange = (val) => {
	//   if(val.length>0){
	// 	  lastCellValue = val.map(row=>row.UniqId)
	//   }
	//   console.log(lastCellValue)
	//   console.log(rowSelection)
	// }

	//删除
	function onDel() {
		if (!currentRow.value) {
			ElMessage({
				type: 'warning',
				message: '请选择要删除的数据',
			})
			return
		}
		ElMessageBox.confirm('确定要删除吗?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			del({
				UniqId: currentRow.value.UniqId
			}).then(res => {
				if (res.code === 0) {
					ElMessage({
						type: 'success',
						message: '删除成功',
					})
				}
				getTableData()
			})
		})

		// Del()
	}
	//删除
	const Del = async () => {
		console.log(lastCellValue)
		return
		const response = await finisheddel({
			UniqId: lastCellValue
		});
		if (response.code === 0) {
			ElMessage({
				type: 'success',
				message: '删除成功',
			})
		}
		getTableData()
	}
</script>

<style scoped>
	.JKWTree-container {
		display: flex;
	}

	.JKWTree-tree {
		width: 100%;
		background-color: #fff;
		padding: 10px;
		margin-right: 20px;
	}

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

	.JKWTree-content {
		flex: 1;
	}

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