mes-dacheng-admin-backend-ui/src/view/performance/09-workOrderVerification/index.vue

<template>
	<div>
		<el-container>
			<!-- 左侧树形结构 -->
			<el-scrollbar max-height="75vh">

				<layout-sider :resize-directions="['right']" :width="220" style="margin-right: 50px;">
					<div class="JKWTree-tree" style="height: 70vh;">
						<h3>工单核验单维护</h3>
						<el-tree :data="treeData" highlight-current @node-click="handleNodeClick" />
					</div>
				</layout-sider>
			</el-scrollbar>

			<el-container>
				<el-main>
					<div class="gva-table-box">
						<!-- 按钮区域 -->
						<el-form>
							<el-form-item>
								<el-input v-model="searchInfo" placeholder="输入工单编号"  style="width: 180px;"/>
								<el-button type="primary" :icon="Search" class="bt" @click="handleSearch"></el-button>
								<el-button type="primary" class="bt" icon="plus" @click="handleShowAdd">新增</el-button>
								<el-button type="primary" icon="copy-document" class="bt"@click="dialogMrhjtj = true">每日核检统计</el-button>
								<el-button type="primary" icon="copy-document" class="bt" @click="showGdzjfptj">工单质检废品统计</el-button>
								<el-button type="primary" icon="edit"   @click="gdlcdcxconlick"    class="bt" title="流程单查询">流程单查询</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-click="handleSelectChange"
							@row-dblclick="doubleClick">
							<!-- 循环渲染表格列 -->
							<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>

					<!-- 弹出框 -->
					<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="type" destroy-on-close
						width="1200px">

						<el-form ref="elFormRef" :model="detailData" inline label-position="right" :rules="rule"
							id="detail-form" label-width="70px">
							<el-row :gutter="24">
								<el-col :span="5">
									<el-form-item label="日期">
										<el-input type="date" max="9999-12-31" v-model="detailData.qczl_rq" @keydown="ent1($event)" @focus="rqHandleFocus()"
											style="width: 130px;" />
									</el-form-item>
								</el-col>
								<el-col :span="5">
									<el-form-item label="工单编号">
										<el-input v-model="detailData.qczl_gdbh" style="width: 120px;" @keydown="ent1($event)"
											@blur="handleGdbhEnter" placeholder="Enter回车" />
									</el-form-item>
								</el-col>
								<el-col :span="5">
									<el-form-item label="拼印主工单" label-width="90px">
										<el-input v-model="detailData.qczl_Pygd" style="width: 120px;" @keydown="ent1($event)" />
									</el-form-item>
								</el-col>
								<el-col :span="9">
									<el-form-item label="产品名称">
										<el-input v-model="detailData.Gd_cpmc" style="width: 300px;" readonly />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="5">
									<el-form-item label="印件号">
										<el-input v-model="detailData.qczl_yjno" style="width: 60px;" readonly/>
									</el-form-item>
								</el-col>
								<el-col :span="10">
									<el-form-item label="印件名称" >
										<el-input v-model="detailData.yj_yjmc" style="width: 385px;" readonly/>
									</el-form-item>
								</el-col>
								<el-col :span="5">
									<el-form-item label="废品总数">
										<el-input v-model="detailData.qczl_fp"  @keydown="ent1($event)" style="width: 100px;" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="5">
									<el-form-item label="工序">
										<el-input v-model="detailData.qczl_gxmc" style="width: 150px;"
											@blur="getgxsubmit" @keydown="ent1($event)" />
									</el-form-item>
								</el-col>
								<el-col :span="5">
									<el-form-item label="工序号">
										<el-input v-model="detailData.qczl_gxh" @keydown="ent1($event)" style="width: 120px;" />
									</el-form-item>
								</el-col>
								<el-col :span="5">
									<el-form-item label="总流程号" label-width="90px">
										<el-input v-model="detailData.total_liucheng" @keydown="ent1($event)" style="width: 120px;" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="15">
									<el-form-item label="流程单号">
										<el-input v-model="detailData.qczl_num" @keydown="ent1($event)" style="width: 60px; margin-right: 5px;" />
										<el-input v-model="detailData.qczl_NumDesc1" @keydown="ent1($event)" style="width: 60px; margin-right: 5px;" />
										<el-input v-model="detailData.qczl_NumDesc2" @keydown="ent1($event)" style="width: 60px; margin-right: 5px;" />
										<el-input v-model="detailData.qczl_NumDesc3" @keydown="ent1($event)" style="width: 60px; margin-right: 5px;" />
										<el-input v-model="detailData.qczl_NumDesc4" @keydown="ent1($event)" style="width: 60px; margin-right: 5px;" />
										<el-input v-model="detailData.qczl_NumDesc5" @keydown="ent1($event)" style="width: 60px; margin-right: 5px;" />
										<el-input v-model="detailData.qczl_NumDesc6" @keydown="ent1($event)" style="width: 60px; margin-right: 5px;" />
										<el-input v-model="detailData.qczl_NumDesc7" @keydown="ent1($event)" style="width: 60px; margin-right: 5px;" />
										<el-input v-model="detailData.qczl_NumDesc8" @keydown="ent1($event)" style="width: 60px; margin-right: 5px;" />
									</el-form-item>
								</el-col>
								<el-col :span="9">
									<el-form-item label="备注">
										<el-input v-model="detailData.qczl_NumDesc" @keydown="ent1($event)" style="width: 300px;" />
									</el-form-item>
								</el-col>
							</el-row>

							<el-scrollbar height="400px">
								<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="200">
										<template #default="{ row, $index }">
											<el-input v-model="row.fp_lb" @keydown="ent1($event)"  @blur="handleFplbEnter($index, row)" />
										</template>
									</el-table-column>

									<el-table-column label="数量" width="100">
										<template #default="{ row, $index }">
											<el-input v-model="row.fp_sl" @keydown="ent1($event)"  @blur="handleFpslEnter($index, row)" />
										</template>
									</el-table-column>
									<el-table-column label="工序及责任机长" >
										<template #default="{ row }">
											<el-input v-model="row.fp_gxmc" @keydown="ent1($event)" readonly/>
										</template>
									</el-table-column>
									<el-table-column label="" width="100">
										<template #default="{ row }">
											<el-input v-model="row.fp_bz" @keydown="ent1($event)" readonly/>
										</template>
									</el-table-column>
									<el-table-column label="" width="100">
										<template #default="{ row }">
											<el-input v-model="row.fp_bh" @keydown="ent1($event)" readonly/>
										</template>
									</el-table-column>
									<el-table-column label="" width="100">
										<template #default="{ row }">
											<el-input v-model="row.fp_name" @keydown="ent1($event)" readonly/>
										</template>
									</el-table-column>
								</el-table>
							</el-scrollbar>
						</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="dialogSelectVisible1" id="tableFplb" @keydown="ent($event)"  @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 :data="selecTreeData" ref="table_fplb"
										:props="{ children: 'children',label: 'label'}"
										node-key="id" @node-click="handleFplbClick">
									</el-tree>
								</div>
							</div>
						</el-form>
						
					</el-dialog>

					<!-- 弹出选项框 数量 -->
					<el-dialog v-model="dialogSelectVisible2" title="选择" destroy-on-close width="800px"
						@keydown="selectSL($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 v-for=" column in selectColumns " :key="column.prop" :prop="column.prop"
								:label="column.label" :width="column.width" />
						</el-table>
					</el-dialog>

					<!--流程单查询【弹窗】-->
					<el-dialog v-model="gd_lcdlist" title="工单工序生产进程" style="width: 100%;height: 100%;margin: 0px;padding: 0px;">
						<div style="width: 100%;height: 100%;">
						<el-button type="" @click="gd_lcdCancel">退出</el-button>
						</div>
						<div style="width: 100%; height: 100%; display: flex; align-items: center;">
						<el-form-item label="工单编号" style="margin-right: 20px; padding: 0;">
							<el-input v-model="gd_lcdformData['gdbh']" @keyup.enter="gd_lcdProductValue"/>
						</el-form-item>
						<el-form-item label="" style="margin-right: 5px; padding: 0;">
							<el-input v-model="gd_lcdformData['code']" disabled/>
						</el-form-item>
						<el-form-item label="" style="margin-right: 5px; padding: 0;">
							<el-input v-model="gd_lcdformData['name']" disabled style="width: 500px"/>
						</el-form-item>
						</div>
						<div style="width: 100%; height: 70vh; display: flex;">
						<layout>
							<layout-sider :resize-directions="['right']" :width="240" style="margin-right: 10px;height: 70vh;">
							<div class="JKWTree-tree">
								<el-tree :data="lcd_treeData" @node-click="lcd_handleNodeClick" default-expand-all></el-tree>
							</div>
							</layout-sider>
							<layout-main>
							<!-- 这里放右侧的内容 -->
							<el-space wrap>
								<!-- 右侧内容 -->
								<template v-for="item in processList.total_process">
								<el-button disabled :type="! processList.process.includes(item) ? 'danger' : 'info'" plain style="width: 50px">{{ item }}</el-button>
								</template>
							</el-space>
							</layout-main>
						</layout>
						</div>
          			</el-dialog>


					<!-- 弹出选项框 工单 -->
					<el-dialog v-model="dialogSelectVisible" title="选择" destroy-on-close width="1000px"
						@keydown="selectGX($event)">
						<el-table tooltip-effect="dark" :data="selectData_gd" row-key="ID" highlight-current-row="true"
							border style="width:100%" @row-dblclick="handleSelectClick_gd" ref="table_gd">
							<el-table-column prop="Gd_cpmc" label="工单名称" width="430" />
							<el-table-column prop="yj_Yjno" label="印件号" width="100" />
							<el-table-column prop="yj_yjmc" label="印件名称" width="430" />
						</el-table>
					</el-dialog>
					
					<!-- 弹出选项框 工序 -->
					<el-dialog v-model="dialogSelectVisible_gx" title="选择" destroy-on-close width="600px" 
						@keydown="select_gx($event)">
						<el-table tooltip-effect="dark" :data="selectData_gx" row-key="ID" highlight-current-row="true"
							border style="width:100%" @row-dblclick="handleSelectClick_gx" ref="table_gx">
							<el-table-column prop="gxh" label="工序号" width="100" />
							<el-table-column prop="gxmc" label="工序名称" width="460" />
						</el-table>
					</el-dialog>

					<!-- 废品日统计 -->
					<Meirihejiantongji v-if="dialogMrhjtj" v-model="dialogMrhjtj" />

					<!-- 工单质检废品统计 -->
					<Gongdanzhijianfeipintongji v-if="dialogGdzjfptj" v-model="dialogGdzjfptj" :val="value1" />

					<!-- 测试图表 -->
					<Shebeizhuangtai v-if="dialogSbyxgl" v-model="dialogSbyxgl"
						title="【01.30 08:30】【JY01#--海德堡对开八色平版胶印机(JY08-01)】【2311116-->钻石(荷花）盒包装纸】【01--胶印】" />

				</el-main>
			</el-container>
		</el-container>

	</div>
</template>

<script setup>
	// 全量引入格式化工具 请按需保留
	import {createCompany,deleteCompany,deleteCompanyByIds,updateCompany,findCompany,getCompanyList} from '@/api/company'
	import {ElMessage,ElMessageBox,} from 'element-plus'
	import {Search,Refresh,Download} from '@element-plus/icons-vue'
	import {ref,reactive,nextTick} from 'vue'
	import {getOrderProcessLeft,getOrderProcessRight} from "@/api/yunyin/yunying";
	import {getSide,getTable,getOneWorkOrder,getOrderInfo,getGxAndLeader,getYjInfo,getWastInfo,updateData,add,del} from '@/api/mes_api_gty/workOrderVerification'
	import Meirihejiantongji from '@/view/performance/09-workOrderVerification/componets/meirihejiantongji.vue'
	import Gongdanzhijianfeipintongji from '@/view/performance/09-workOrderVerification/componets/gongdanzhijianfeipintongji.vue'
	import Shebeizhuangtai from '@/view/performance/09-workOrderVerification/componets/shebeizhuangtai.vue'
	import {Layout,LayoutContent,LayoutHeader,LayoutSider} from '@arco-design/web-vue'
	import {useUserStore} from '@/pinia/modules/user'
	const userStore = useUserStore()
	const sys_id = '[' + userStore.userInfo.userName + '/' + userStore.userInfo.nickName + ']'
	defineOptions({
		name: '06PackingDocuments'
	})

	// 侧边栏数据请求
	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.sys_id} 【记录数: ${sysItem.count}张】`,
					params: {
						date: item.date.replace(/\./g, '-'),
						sys_id: sysItem.sys_id,
					},
				})),
			}))
			treeData.splice(0, treeData.length, ...transformedData)
		}
	}

	getSideData()

	// 验证规则
	const rule = reactive({})
	const elFormRef = ref()
	const elSearchFormRef = ref()

	// =========== 表格控制部分 ===========
	const tableColumns = [
		{label: '工单编号',		prop: 'qczl_gdbh',		width: '120'},
		{label: '印件号',		prop: 'qczl_yjno',		width: '100'},
		{label: '印件名称',		prop: 'Gd_cpmc',		width: '400'},
		{label: '日期',			prop: 'qczl_rq',		width: '100'},
		{label: '流程单号',		prop: 'qczl_num',		width: '120'},
		{label: '流程单备注',	prop: 'qczl_NumDesc',	width: '120'},
		{label: '总废品',		prop: 'qczl_fp',		width: '100'},
		{label: '废品1',		prop: 'sl_lb1',			width: '250'},
		{label: '废品2',		prop: 'sl_lb2',			width: '250'},
		{label: '废品3',		prop: 'sl_lb3',			width: '250'},
		{label: '废品4',		prop: 'sl_lb4',			width: '250'},
		{label: '废品5',		prop: 'sl_lb5',			width: '250'},
		{label: '废品6',		prop: 'sl_lb6',			width: '250'},
		{label: '废品7',		prop: 'sl_lb7',			width: '250'},
		{label: '废品8',		prop: 'sl_lb8',			width: '250'},
		{label: '废品9',		prop: 'sl_lb9',			width: '250'},
		{label: '废品10',		prop: 'sl_lb10',		width: '250'},
		{label: '废品11',		prop: 'sl_lb11',		width: '250'},
		{label: '废品12',		prop: 'sl_lb12',		width: '250'},
		{label: '废品13',		prop: 'sl_lb13',		width: '250'},
		{label: '废品14',		prop: 'sl_lb14',		width: '250'},
		{label: '废品15',		prop: 'sl_lb15',		width: '250'},
		{label: '废品16',		prop: 'sl_lb16',		width: '250'},
		{label: '废品17',		prop: 'sl_lb17',		width: '250'},
		{label: '创建用户',		prop: 'sys_id',			width: '200'},
	]
	const tableData = reactive([])
	const total = ref(0)
	const page = ref(1)
	const limit = ref(10)
	const searchInfo = ref('')
	const params = {
		date: '',
		sys_id: '',
		order: '',
		page: page.value.toString(),
		limit: limit.value.toString(),
	}
	// 获取工序
	const getgxsubmit = () => {
		
		if(!detailData.qczl_gdbh || !detailData.qczl_yjno){
			return
		}
		GetJtbh()
	}
	const GetJtbh = async () => {
		const { qczl_gdbh, qczl_yjno } = detailData
		const response = await getYjInfo({ order: qczl_gdbh, yj_no: qczl_yjno })
		if (response.code === 0) {
			const data = response.data
			if (data) {
				detailData.total_liucheng = data.max_num
				const tableData = data.gx_data.map(item => ({
					gxh: item.Gy0_gxh,
					gxmc: item.Gy0_gxmc + (item.Add_gxmc === '' ? '' : '-' + item.Add_gxmc),
					// addGxmc: item.Add_gxmc
				}))
				selectData_gx.splice(0, selectData_gx.length, ...tableData)
				setCurrent_gx(selectData_gx[0])
				dialogSelectVisible_gx.value = true
			}
		}
	}
	
	const dialogSelectVisible_gx = ref(false)
	const selectData_gx = reactive([])
	const handleSelectClick_gx = (row, column, event) => {
		const { gxh, gxmc } = row
		detailData.qczl_gxmc = gxh + '-' + gxmc
		detailData.qczl_gxh = gxh
		dialogSelectVisible_gx.value = false
	}
	const currentIndex_gx = ref(0);
	const current_gx = ref(0);
	const select_gx = (event) => {
		if (event.keyCode === 40) { // 向下箭头
			if (currentIndex_gx.value < selectData_gx.length - 1) {
				currentIndex_gx.value++;
				setCurrent_gx(selectData_gx[currentIndex_gx.value]);
			} else {
				currentIndex_gx.value = 0;
				setCurrent_gx(selectData_gx[currentIndex_gx.value]); // 到达最后一行时回到第一行			
			}
		} else if (event.keyCode === 38) { // 向上箭头
			if (currentIndex_gx.value > 0) {
				currentIndex_gx.value--;
				setCurrent_gx(selectData_gx[currentIndex_gx.value]);
			} else {
				currentIndex_gx.value = selectData_gx.length - 1;
				setCurrent_gx(selectData_gx[currentIndex_gx.value]); // 到达第一行时回到最后一行
			}
		} else if (event.keyCode === 13) { // 回车键
			dialogSelectVisible_gx.value = false;
		}
	}
	const table_gx = ref()
	const setCurrent_gx = (row) => {
		setTimeout(() => {
			table_gx.value?.setCurrentRow(row)
			const { gxh, gxmc } = row
			detailData.qczl_gxmc = gxh + '-' + gxmc
			detailData.qczl_gxh = gxh
		})
	}
	
	// 批量删除控制标记
	const deleteVisible = ref(false)
	const multipleSelection = ref([])
	const getTableData = async () => {
		const response = await getTable(params)
		if (response.code === 0) {
			total.value = response.data.total
			// Object.assign(tableData, response.data.rows)

			tableData.splice(0, tableData.length, ...response.data.rows)
		}
	}

	// 左侧树结构点击
	const handleNodeClick = (node, check) => {
		if (node.params) {
			params.date = node.params.date
			params.sys_id = node.params.sys_id
			page.value = 1
			handleCurrentChange()
		}
	}

	// =========== 流程单查询 ===========
const gd_lcdlist = ref(false);
const gd_lcdformData = reactive({
  gdbh: '',
  code: '',
  name: '',
});
// 流程单查询按钮
const processList = ref([]);
const gdlcdcxconlick = async () => {
  if(currentRow.gdbh === '' || currentRow.gdbh === null || currentRow.gdbh === undefined){
    ElMessage({type: 'warning',message: '请选择具体的工单，在进行操作'})
    return false;
  }else{
    gd_lcdformData['gdbh'] = currentRow.gdbh;
    _getOrderProcessLeft_list();
    gd_lcdlist.value = true;
    processList.value = []
  }
}
//流程单查询回车
const gd_lcdProductValue = async () => {
  if(gd_lcdformData['gdbh'] == '' || gd_lcdformData['gdbh'] === null){
    ElMessage({type: 'warning',message: '工单编号为空'})
    return false;
  }
  _getOrderProcessLeft_list();
}

const lcd_treeData = ref([]);
const _getOrderProcessLeft_list = async () => {
  const order = gd_lcdformData['gdbh'];
  try {
    //5.1流程单查询-工单工序生产进程菜单栏
    const getOrderProcessLeft_list = await getOrderProcessLeft({ order:order});
    console.log(getOrderProcessLeft_list)
    if(getOrderProcessLeft_list.data.Gd_info === null || getOrderProcessLeft_list.data.Gd_info === ''){
      ElMessage({type: 'warning',message: '未查询到具体工单信息'})
      lcd_treeData.value = [];
      return false;
    }
    gd_lcdformData['code'] = getOrderProcessLeft_list.data.Gd_info['code'];
    gd_lcdformData['name'] = getOrderProcessLeft_list.data.Gd_info['name'];
    lcd_treeData.value = [{
      label: order + '-' + getOrderProcessLeft_list.data.Gd_info['name'],
      // label: getOrderProcessLeft_list.data.Gd_info['code'] + '-' + getOrderProcessLeft_list.data.Gd_info['name'],
      value: undefined,
      children: []
    }]
    const newData = [];
    for (let key in getOrderProcessLeft_list.data.Gy_info) {
      let temp = getOrderProcessLeft_list.data.Gy_info[key];
      let concatenatedValue = `${temp.Gy0_yjno}-${temp.Gy0_gxh} ---> ${temp.Gy0_gxmc}`;
      newData.push({ label: concatenatedValue,value: temp.Gy0_gxh });
    }
    lcd_treeData.value[0].children = newData;
    //5.2流程单查询-获取工单工序生产进程右侧【接口】【进入页面默认显示第一个数据】
    const getOrderProcessRight_list = await getOrderProcessRight({order: order, gxNo:newData[0].value});
    processList.value = getOrderProcessRight_list.data
  } catch (error) {
    console.error(error);
  }
};
//点击左侧获取工序显示右侧数据
const lcd_handleNodeClick = async (node) => {
  if (node.value === undefined || node.value === null){
      return false;
  }
  const order = gd_lcdformData['gdbh'];
  //5.2流程单查询-获取工单工序生产进程右侧【接口】
  const getOrderProcessRight_list = await getOrderProcessRight({order:order, gxNo:node.value});
  processList.value = getOrderProcessRight_list.data
};

// 流程单查询退出
const gd_lcdCancel = async () => {
  gd_lcdlist.value = false;
}



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

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

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

	// ============== 详情页面 ==============
	const detailData = reactive({})
	// const selectData = reactive([])
	const selectColumns = [{
			label: '',
			prop: 'sczl_gxmc',
			width: '500'
		},
		{
			label: '',
			prop: 'sczl_jtbh',
			width: '100'
		},
		{
			label: '',
			prop: 'sczl_bzdh',
			width: '100'
		},
		{
			label: '',
			prop: 'name',
			width: '100'
		},
	]
	// 行为控制标记（弹窗内部需要增还是改）
	const type = ref('')

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

	let selectIndex = 0

	const getDetailData = async (id) => {
		try {
			const res = await getOneWorkOrder({ UniqId: id })
			if (res.code === 0) {
				const obj = res.data
				// 裁剪返回数据的前后空格
				for (const key in obj) {
					if (Object.prototype.hasOwnProperty.call(obj, key) && typeof obj[key] === 'string') {
						obj[key] = obj[key].trim()
					}
				}
				// 修改日期格式
				if (Object.prototype.hasOwnProperty.call(obj, 'qczl_rq') && typeof obj['qczl_rq'] === 'string') {
					obj['qczl_rq'] = obj['qczl_rq'].split(' ')[0]
				}

				Object.assign(detailData, obj)
				const table = []

				// 循环13行数据
				for (let i = 1; i <= 13; i++) {
					table.push({
						fp_lb: detailData[`fp_lb${i}`] || '',
						fp_sl: detailData[`fp_sl${i}`] || '',
						fp_gxmc: detailData[`fp_gxmc${i}`] || '',
						fp_bz: detailData[`fp_bz${i}`] || '',
						fp_bh: detailData[`fp_bh${i}`] || '',
						fp_name: detailData[`fp_name${i}`] || '',
					})
					// 从原对象中删除这些属性
					delete detailData[`fp_lb${i}`]
					delete detailData[`fp_sl${i}`]
					delete detailData[`fp_gxmc${i}`]
					delete detailData[`fp_bz${i}`]
					delete detailData[`fp_bh${i}`]
					delete detailData[`fp_name${i}`]
				}
				detailData.table = table
				getOrderInfo({ order: detailData.qczl_gdbh }).then(resposne => {
					if (resposne.code === 0) {
						//循环resposne.data当子项yj_Yjno的值等于obj中的qczl_yjno的值时设置detailData.Gd_cpmc的值为res.data[i].Gd_cpmc
						for (let i = 0; i < resposne.data.length; i++) {
							if (resposne.data[i].yj_Yjno == detailData.qczl_yjno) {
								detailData.yj_yjmc = resposne.data[i].yj_yjmc
								detailData.Gd_cpmc = resposne.data[i].Gd_cpmc
							}
						}
						showDialog()
					}
				})
			}
		} catch (e) {
			console.log(e)
		}
	}
	
	//日期获得焦点事件
	const rqHandleFocus = () => {
		if (detailData.qczl_rq == undefined || detailData.qczl_rq == '') {
			detailData.qczl_rq = new Date().toISOString().split('T')[0]
		}
	}

	// 工单编号回车
	const handleGdbhEnter = async () => {
		if (detailData.qczl_gdbh != undefined) {
			const res = await getOrderInfo({
				order: detailData.qczl_gdbh
			})
			if (res.code === 0) {
				if (res.data.length == 0) {
					ElMessage({
						type: 'error',
						message: '查无此编号的工单，请仔细检查后重新输入'
					})
					//设置输入框的值为空
					detailData.Gd_cpmc = ''
					detailData.qczl_yjno = ''
					detailData.yj_yjmc = ''
				} else if (res.data.length == 1) {
					detailData.Gd_cpmc = res.data[0]['Gd_cpmc']
					detailData.qczl_yjno = res.data[0]['yj_Yjno']
					detailData.yj_yjmc = res.data[0]['yj_yjmc']
				} else if (res.data.length > 1) {
					selectData_gd.splice(0, selectData_gd.length, ...res.data)
					setGXCurrent(selectData_gd[0])
					dialogSelectVisible.value = true
				}

			}
		} else {
			detailData.Gd_cpmc = ''
			detailData.qczl_yjno = ''
			detailData.yj_yjmc = ''
		}

	}
	const dialogSelectVisible = ref(false)
	const selectData_gd = reactive([])
	// 处理选择框
	const handleSelectClick_gd = (row, column, event) => {
		detailData.Gd_cpmc = row.Gd_cpmc
		detailData.qczl_yjno = row.yj_Yjno
		detailData.yj_yjmc = row.yj_yjmc
		dialogSelectVisible.value = false
	}
	const currentIndex = ref(0);
	const GXCurrent = ref(0);
	const selectGX = (event) => {
		if (event.keyCode === 40) { // 向下箭头
			if (currentIndex.value < selectData_gd.length - 1) {
				currentIndex.value++;
				setGXCurrent(selectData_gd[currentIndex.value]);
			} else {
				currentIndex.value = 0;
				setGXCurrent(selectData_gd[currentIndex.value]); // 到达最后一行时回到第一行			
			}
		} else if (event.keyCode === 38) { // 向上箭头
			if (currentIndex.value > 0) {
				currentIndex.value--;
				setGXCurrent(selectData_gd[currentIndex.value]);
			} else {
				currentIndex.value = selectData_gd.length - 1;
				setGXCurrent(selectData_gd[currentIndex.value]); // 到达第一行时回到最后一行
			}
		} else if (event.keyCode === 13) { // 回车键
			dialogSelectVisible.value = false;
		}
	}
	const table_gd = ref()
	const setGXCurrent = (row) => {
		setTimeout(() => {
			table_gd.value?.setCurrentRow(row)
			detailData.Gd_cpmc = row.Gd_cpmc
			detailData.qczl_yjno = row.yj_Yjno
			detailData.yj_yjmc = row.yj_yjmc
		})
	}

	const selecTreeData = ref([])
	const table_fplb = ref()
	// 废品类别回车
	const handleFplbEnter =  async(index, row) => {
		//上个弹窗还未关闭或者值为空
		if(dialogSelectVisible2.value || !row.fp_lb){
			return
		}
		let flag = true
	
		//查询废品类别
		const res = await getWastInfo()
			if (res.code == 0) {
				const obj = res.data
				const children = []
				let i = 0
				for (const subCategory in obj.废品分类) {
					if (flag && Object.prototype.hasOwnProperty.call(obj.废品分类, subCategory)) {
						let j = 0
						const subChildren = []
						obj.废品分类[subCategory].map(item => {
							if(item==row.fp_lb){
								flag = false
								return
							}
							subChildren.push({ 
								id: i+'-'+j,
								label: item, 
								children: []
							})
							j++
						})

						children.push({
							id: i,
							label: subCategory,
							children: subChildren
						})
						i++
					}
				}
				if(!flag){ 
					return 
				}
				//渲染数据
				selecTreeData.value = children
				selectIndex = index
				dialogSelectVisible1.value = true
				// nextTick(() => {
				// 	// 手动设置选中节点，如果默认选中不生效，可以使用此方法
				// 	if (table_fplb.value) {
				// 		const tree = table_fplb.value?.$el; // 访问组件实例的 $el
				// 		if (tree) {
				// 			const node = tree.querySelector('[data-key="0"]');
				// 			if (node) {
				// 				node.scrollIntoView();
				// 				node.focus(); // 尝试聚焦
				// 				console.log(document.activeElement === node); // 输出检查
				// 			}
				// 		}
						
				// 	}
				// });
				
			}
		
	}

	const handleFplbClick = (node, check) => {
		console.log(node, check)
		if (node.children && node.children.length > 0) {
			console.log(11);
		} else {
			detailData.table[selectIndex].fp_lb = node.label
			dialogSelectVisible1.value = false
		}
	}

	let selectData = [] // 将const改为let

	const handleFpslEnter = async (index, row) => {
		selectIndex = index
		if(dialogSelectVisible1.value){
			return
		}
		if (row.fp_sl == '0' || row.fp_sl == '') {
			detailData.table[index].fp_gxmc = ''
			detailData.table[index].fp_bz = ''
			detailData.table[index].fp_bh = ''
			detailData.table[index].fp_name = ''
			return
		}

		//计算总数
		let total = 0;
		detailData.table.forEach((item, index) => {
			if(item.fp_sl != 0 || item.fp_sl != ''){
				total += parseInt(item.fp_sl);
			}
		});
		detailData.qczl_fp = total

		const params = {
			type: row.fp_lb,
			order: detailData.qczl_gdbh,
			yjno: detailData.qczl_yjno,
		}
		let res
		try {
			res = await getGxAndLeader(params)
			if (res.code !== 0) {
				return
			}
		} catch (e) {
			console.log(e)
			return
		}

		// 解译乱码并填充到selectData
		const decodedData = res.data.map(item => {
			return {
				sczl_gxmc: decodeEntities(item.sczl_gxmc), // 解译乱码函数
				sczl_bzdh: item.sczl_bzdh,
				sczl_jtbbh: item.sczl_jtbh,
				sczl_bh1: item.sczl_bh1,
				name: item.name.trim() // 去除姓名两端的空格
			}
		})

		selectData = decodedData // 对selectData进行赋值

		setCurrent(selectData[0])
		dialogSelectVisible2.value = true
	}

	// 解译HTML实体编码的函数
	function decodeEntities(encodedString) {
		const textArea = document.createElement('textarea')
		textArea.innerHTML = encodedString
		return textArea.value
	}
	// 双击表格操作
	function doubleClick(row, column, event) {
		type.value = '查改'
		getDetailData(row.UniqId)
	}

	// 处理选择框回车操作
	const handleSelectClick = (row, column, event) => {
		const {
			sczl_gxmc,
			sczl_bzdh,
			sczl_bh1,
			name
		} = row
		const index = selectIndex
		console.log(index);
		detailData.table[index].fp_gxmc = sczl_gxmc
		detailData.table[index].fp_bz = sczl_bzdh
		detailData.table[index].fp_bh = sczl_bh1
		detailData.table[index].fp_name = name
		dialogSelectVisible2.value = false
	}
	const table2 = ref()
	const setCurrent = (row) => {
		setTimeout(() => {
			table2.value?.setCurrentRow(row)
			// SelectClick(row)
			// console.log(row)
			// console.log(table)
			const {
				sczl_gxmc,
				sczl_bzdh,
				sczl_bh1,
				name
			} = row
			const index = selectIndex
			detailData.table[index].fp_gxmc = sczl_gxmc
			detailData.table[index].fp_bz = sczl_bzdh
			detailData.table[index].fp_bh = sczl_bh1
			detailData.table[index].fp_name = name
		})
	}
	const SLIndex = ref(0);
	const JYCurrent = ref(0);
	const selectSL = (event) => {
		if (event.keyCode === 40) { // 向下箭头
			if (SLIndex.value < selectData.length - 1) {
				SLIndex.value++;
				setCurrent(selectData[SLIndex.value]);
			} else {
				SLIndex.value = 0;
				setCurrent(selectData[SLIndex.value]); // 到达最后一行时回到第一行			
			}
		} else if (event.keyCode === 38) { // 向上箭头
			if (SLIndex.value > 0) {
				SLIndex.value--;
				setCurrent(selectData[SLIndex.value]);
			} else {
				SLIndex.value = selectData.length - 1;
				setCurrent(selectData[SLIndex.value]); // 到达第一行时回到最后一行
			}
		} else if (event.keyCode === 13) { // 回车键
			dialogSelectVisible2.value = false
		}
	}
	// 弹窗确定
	const enterDialog = async () => {
		if (type.value === '查改') {
			updateDetailData()
		} else if (type.value === '新增') {
			addDetailData()
		}
	}
	const addDetailData = async () => {
		const formatDate = (date) => {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		};

		const restoredData = {
			UniqId: detailData.UniqId,
			qczl_gdbh: detailData.qczl_gdbh,
			qczl_yjno: detailData.qczl_yjno,
			qczl_gxh: detailData.qczl_gxh,
			qczl_gxmc: detailData.qczl_gxmc,
			qczl_rq: formatDate(new Date(detailData.qczl_rq)),
			qczl_fp: detailData.qczl_fp,
			qczl_num: detailData.qczl_num,
			qczl_NumDesc: detailData.qczl_NumDesc,
			qczl_NumDesc1: detailData.qczl_NumDesc1,
			qczl_NumDesc2: detailData.qczl_NumDesc2,
			qczl_NumDesc3: detailData.qczl_NumDesc3,
			qczl_NumDesc4: detailData.qczl_NumDesc4,
			qczl_NumDesc5: detailData.qczl_NumDesc5,
			qczl_NumDesc6: detailData.qczl_NumDesc6,
			qczl_NumDesc7: detailData.qczl_NumDesc7,
			qczl_NumDesc8: detailData.qczl_NumDesc8,
			sys_id: sys_id
		};

		detailData.table.forEach((item, index) => {
			const num = index + 1;
			restoredData[`fp_lb${num}`] = item.fp_lb;
			restoredData[`fp_sl${num}`] = item.fp_sl;
			restoredData[`fp_bh${num}`] = item.fp_bh;
			restoredData[`fp_bz${num}`] = item.fp_bz;
			restoredData[`fp_gxmc${num}`] = item.fp_gxmc;
		});

		console.log(restoredData);
		const res = await add(restoredData)
		console.log(res)

		if (res.code === 0) {
			ElMessage({
				type: 'success',
				message: '新增成功',
			})
			//刷新
			if (params.date != '') {
				getTableData()
			}
			getSideData()
			dialogFormVisible.value = false
		}
	};
	// 修改
	const updateDetailData = async () => {

		const formatDate = (date) => {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		};

		const restoredData = {
			UniqId: detailData.UniqId,
			qczl_gdbh: detailData.qczl_gdbh,
			qczl_yjno: detailData.qczl_yjno,
			qczl_gxh: detailData.qczl_gxh,
			qczl_gxmc: detailData.qczl_gxmc,
			qczl_rq: formatDate(new Date(detailData.qczl_rq)),
			qczl_fp: detailData.qczl_fp,
			qczl_num: detailData.qczl_num,
			qczl_NumDesc: detailData.qczl_NumDesc,
			qczl_NumDesc1: detailData.qczl_NumDesc1,
			qczl_NumDesc2: detailData.qczl_NumDesc2,
			qczl_NumDesc3: detailData.qczl_NumDesc3,
			qczl_NumDesc4: detailData.qczl_NumDesc4,
			qczl_NumDesc5: detailData.qczl_NumDesc5,
			qczl_NumDesc6: detailData.qczl_NumDesc6,
			qczl_NumDesc7: detailData.qczl_NumDesc7,
			qczl_NumDesc8: detailData.qczl_NumDesc8,
		}
		detailData.table.forEach((item, index) => {
			const num = index + 1
			restoredData[`fp_lb${num}`] = item.fp_lb
			restoredData[`fp_sl${num}`] = item.fp_sl
			restoredData[`fp_bh${num}`] = item.fp_bh
			restoredData[`fp_bz${num}`] = item.fp_bz
			restoredData[`fp_gxmc${num}`] = item.fp_gxmc
		})
		const res = await updateData(restoredData)
		if (res.code === 0) {
			ElMessage({
				type: 'success',
				message: res.msg,
			})
			dialogFormVisible.value = false
		}
	}

	// 多选
	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	// 多选删除
	const onDelete = async () => {
		const ids = []
		if (multipleSelection.value.length === 0) {
			ElMessage({
				type: 'warning',
				message: '请选择要删除的数据'
			})
			return
		}
		multipleSelection.value &&
			multipleSelection.value.map(item => {
				ids.push(item.ID)
			})
		const res = await deleteCompanyByIds({
			ids
		})
		if (res.code === 0) {
			ElMessage({
				type: 'success',
				message: '删除成功'
			})
			if (tableData.value.length === ids.length && page.value > 1) {
				page.value--
			}
			deleteVisible.value = false
			getTableData()
		}
	}

	// 更新行
	const updateCompanyFunc = async (row) => {
		const res = await findCompany({
			ID: row.ID
		})
		type.value = 'update'
		if (res.code === 0) {
			formData.value = res.data.recompany
			// dialogFormVisible.value = true
			showDialog()
		}
	}

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

	// 导出excel
	function exportExcel() {
		console.log('导出到excel')
		// dialogSbyxgl.value = true
	}

	const dialogMrhjtj = ref(false)
	const dialogGdzjfptj = ref(false)
	const dialogSbyxgl = ref(false)
	const dialoglcdcx = ref(false)
	const value1 = ref('')
	const table = ref(null)

	const showGdzjfptj = () => {
		value1.value = currentRow.gdbh
		dialogGdzjfptj.value = true
		
	}
	const currentRow = ref()
	const handleSelectChange = (row, column, event) => {
		currentRow.value = row.UniqId
		currentRow.gdbh = row.qczl_gdbh
		console.log(currentRow.gdbh)
	}

	// 新增数据
	const handleShowAdd = async () => {
		type.value = '新增'
		if (currentRow.value == undefined) {
			// 循环13行数据
			const table = []
			for (let i = 1; i <= 13; i++) {
				table.push({
					fp_lb: '',
					fp_sl: '',
					fp_gxmc: '',
					fp_bz: '',
					fp_bh: '',
					fp_name: '',
				})
			}
			detailData.table = table
			dialogFormVisible.value = true
		} else {
			getOneWorkOrder({ UniqId: currentRow.value }).then(res => {
				if (res.code === 0) {
					const obj = res.data
					// 裁剪返回数据的前后空格
					for (const key in obj) {
						if (Object.prototype.hasOwnProperty.call(obj, key) && typeof obj[key] === 'string') {
							obj[key] = obj[key].trim()
						}
					}
					// 修改日期格式
					if (Object.prototype.hasOwnProperty.call(obj, 'qczl_rq') && typeof obj['qczl_rq'] === 'string') {
						obj['qczl_rq'] = obj['qczl_rq'].split(' ')[0]
					}
					obj['qczl_num'] = '0'
					obj['qczl_NumDesc1'] = '0'
					obj['qczl_NumDesc2'] = '0'
					obj['qczl_NumDesc3'] = '0'
					obj['qczl_NumDesc4'] = '0'
					obj['qczl_NumDesc5'] = '0'
					obj['qczl_NumDesc6'] = '0'
					obj['qczl_NumDesc7'] = '0'
					obj['qczl_NumDesc8'] = '0'
					obj['qczl_fp'] = ''
					Object.assign(detailData, obj)
					const table = []

					// 循环13行数据
					for (let i = 1; i <= 13; i++) {
						table.push({
							fp_lb: detailData[`fp_lb${i}`] || '',
							fp_sl: 0,
							fp_gxmc: detailData[`fp_gxmc${i}`] || '',
							fp_bz: detailData[`fp_bz${i}`] || '',
							fp_bh: detailData[`fp_bh${i}`] || '',
							fp_name: detailData[`fp_name${i}`] || '',
						})
						// 从原对象中删除这些属性
						delete detailData[`fp_lb${i}`]
						delete detailData[`fp_sl${i}`]
						delete detailData[`fp_gxmc${i}`]
						delete detailData[`fp_bz${i}`]
						delete detailData[`fp_bh${i}`]
						delete detailData[`fp_name${i}`]
					}
					detailData.table = table
					getOrderInfo({ order: detailData.qczl_gdbh }).then(resposne => {
						if (resposne.code === 0) {
							//循环resposne.data当子项yj_Yjno的值等于obj中的qczl_yjno的值时设置detailData.Gd_cpmc的值为res.data[i].Gd_cpmc
							for (let i = 0; i < resposne.data.length; i++) {
								if (resposne.data[i].yj_Yjno == detailData.qczl_yjno) {
									detailData.yj_yjmc = resposne.data[i].yj_yjmc
									detailData.Gd_cpmc = resposne.data[i].Gd_cpmc
								}
							}
							showDialog()
						}
					})
				}
			})
			
		}


		// type.value='add'
		//    Object.assign(detailData);
		// dialogFormVisible.value = true
	}
	// 开启弹窗
	const showDialog = () => {
		dialogFormVisible.value = true
		// 在 setTimeout 中获取元素，确保在 DOM 渲染完毕后执行
		// setTimeout(() => {
		// 	formElements = document.getElementById('detail-form').elements
		// 	formElements[0].focus()
		// }, 0)
	}

	//
	const ent = (event) => {
		if(document.activeElement.id=='tableFplb'){
			if (table_fplb.value) {
				const tree = table_fplb.value?.$el; // 访问组件实例的 $el
				if (tree) {
					const node = tree.querySelector('[data-key="0"]');
					if (node) {
						node.scrollIntoView();
						node.focus(); // 尝试聚焦}
					}
				}
				
			}
		}
			
	}
 const ent1 = (event) => {
   const inputs = document.getElementsByTagName('input');
   const currentIndex = Array.from(inputs).indexOf(event.target);

   if (event.keyCode === 13 || event.keyCode === 40) { // Enter 或向下箭头
       let nextIndex = currentIndex + 1;
       while (nextIndex < inputs.length) {
           if (inputs[nextIndex].disabled) {
               console.log("当前输入框为disabled，跳过");
               nextIndex++; // 跳过disabled的输入框
               continue;
           }

           if (!inputs[nextIndex].readOnly) {
               nextTick(() => {
                   inputs[nextIndex].focus();
                   inputs[nextIndex].select();
               });
               break;
           }

           nextIndex++;
       }
   }
 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);
           })
           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;
         }
       }
     }
   }
 }
	// 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 === '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 handleDelete = () => {
		if (currentRow.value == undefined) {
			ElMessage({
				type: 'warning',
				message: '未选中记录',
			})
			return
		}
		ElMessageBox.confirm(
				`确认删除这条数据么?`,
				'警告', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
				}
			).then(() => {
				del({'UniqId': currentRow.value}).then(res => {
					if (res.code === 0) {
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
						currentRow.value = undefined
						getSideData()
						getTableData()
					}
				})
				
			}).catch(() => {
				ElMessage({
					type: 'info',
					message: '取消删除',
				})
			})
	}
</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;
	}

	.bt {
		margin-left: 2px !important;
		padding: 3px !important;
		font-size: 12px;
	}

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