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

<template>
  <div>
    <el-container>
      <!-- 左侧树形结构 -->
      <el-scrollbar max-height="75vh">
        <!-- <el-aside>
          <div class="JKWTree-tree">
            <h3>工单核验单维护</h3>
            <el-tree
              :data="treeData"
              highlight-current
              @node-click="handleNodeClick"
            />
          </div>
        </el-aside> -->
		
		<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">
            <!-- 按钮区域 -->
            <div class="gva-btn-list">
              <el-row :span="6">
                <el-input
                  v-model="searchInfo"
                  placeholder="输入工单编号"
                />
              </el-row>
              <el-button
                type="primary"
                :icon="Search"
				class="bt"
                @click="handleSearch"
              >搜索
              </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"
                
				class="bt" icon="plus"
                @click="handleShowAdd"
              >新增
              </el-button>
              <div style="margin-left: auto;">
                <!-- <el-button
                  type="primary"
                  :icon="Download"
				  class="bt"
                  @click="exportExcel"
                >导出到Excel</el-button> -->
              </div>
            </div>
            <!-- 数据展示 -->
            <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
                type="selection"
                width="55"
              />
              <!-- 循环渲染表格列 -->
              <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="1000px"
          >

            <el-form ref="elFormRef" :model="detailData"
              inline label-position="right"
              :rules="rule" id="detail-form"
            >
			<el-row :gutter="30">
				<el-col :span="5">
					<el-form-item label="日期" >
						<el-date-picker v-model="detailData.qczl_rq" type="date" style="width: 150px;" />
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="工单编号" >
					  <el-input  v-model="detailData.qczl_gdbh"
						style="width: 150px;"
						@keyup.enter="handleGdbhEnter"
						placeholder="Enter回车"
					  />
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="拼印主工单">
					  <el-input
					    v-model="detailData.qczl_Pygd"
					    style="width: 150px;"
					  />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="产品名称" >
					  <el-input v-model="detailData.Gd_cpmc"
					    style="width: 300px;" readonly />
					</el-form-item>
				</el-col>
			</el-row>
              <br>
              <el-form-item
                label="印件号"
              >
                <el-input
                  v-model="detailData.qczl_yjno"
                  style="width: 60px;"
                />
              </el-form-item>
              <el-form-item
                label="印件名称"
                style="margin-left: 47px"
              >
                <el-input
                  v-model="detailData.yj_yjmc"
                  style="width: 500px;"
                  
                />
              </el-form-item>
              <el-form-item
                label="废品总数"
              >
                <el-input
                  v-model="detailData.qczl_fp" id="废品总数"
                  style="width: 100px;"
                />
              </el-form-item>
              <br>

              <el-form-item
                label="工序"
              >
                <el-input
                  v-model="detailData.qczl_gxmc"
                  style="width: 200px;"
                  @keyup.enter.native="getgxsubmit"
                />
              </el-form-item>
              <el-form-item
                label="工序号"
              >
                <el-input
                  v-model="detailData.qczl_gxh"
                  style="width: 100px;"
                  
                />
              </el-form-item>
              <el-form-item
                label="总流程号"
              >
                <el-input
                  v-model="detailData.total_liucheng"
                  style="width: 100px;"
                  
                />
              </el-form-item>

              <el-form-item
                label="流程单号"
              >
                <el-input
                  v-model="detailData.qczl_num"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc1"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc2"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc3"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc4"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc5"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc6"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc7"
                  style="width: 60px; margin-left: 5px;"
                />
                <el-input
                  v-model="detailData.qczl_NumDesc8"
                  style="width: 60px; margin-left: 5px;"
                />
              </el-form-item>

              <el-form-item
                label="备注"
              >
                <el-input
                  v-model="detailData.qczl_NumDesc"
                  style="width: 200px;"
                />
              </el-form-item>

              <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"
                        @keyup.enter="handleFplbEnter($index, row)"
                      />
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="数量"
                    width="100"
                  >
                    <template #default="{ row, $index }">
                      <el-input
                        v-model="row.fp_sl"
                        @keyup.enter="handleFpslEnter($index, row)"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="工序及责任机长"
                    width="500"
                  >
                    <template #default="{ row }">
                      <el-input
                        v-model="row.fp_gxmc"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label=""
                    width="100"
                  >
                    <template #default="{ row }">
                      <el-input
                        v-model="row.fp_bz"
                        
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label=""
                    width="100"
                  >
                    <template #default="{ row }">
                      <el-input
                        v-model="row.fp_bh"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label=""
                    width="100"
                  >
                    <template #default="{ row }">
                      <el-input
                        v-model="row.fp_name"
                        
                      />
                    </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"
            title="选择"
            destroy-on-close
            width="600px"
          >
            <el-tree
              :data="selecTreeData"
              :props="defaultProps"
              highlight-current
              @node-click="handleFplbClick"
            />
          </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="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="GetjtbhVisible"
            title="选择"
            destroy-on-close
            width="600px"
          >
            <el-table
              tooltip-effect="dark"
              :data="JTBHselectData"
              row-key="ID"
              highlight-current-row="true"
              border
              style="width:100%"
              @row-dblclick="JTBHSelectClick"
            >
              <el-table-column
                prop="gxh"
                label="工序号"
                width="70"
              />
              <el-table-column
                prop="gxmc"
                label="工序名称"
                width="150"
              />
              <el-table-column
                prop="addGxmc"
                label="工序名称"
                width="150"
              />
            </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 } from 'element-plus'
import { Search, Refresh, Download } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { getSide, getTable, getOneWorkOrder, getOrderInfo, getGxAndLeader, getYjInfo, getWastInfo, updateData, add } 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 GetjtbhVisible = ref(false)
const total = ref(0)
const page = ref(1)
const limit = ref(10)
const JTBHselectData = reactive([])
const searchInfo = ref('')
const params = {
  date: '',
  sys_id: '',
  order: '',
  page: page.value.toString(),
  limit: limit.value.toString(),
}
// 获取工序
const getgxsubmit = () => {
  GetJtbh()
}
const GetJtbh = async() => {
  try {
    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) {
        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
        }))
        console.log(tableData)
        JTBHselectData.splice(0, JTBHselectData.length, ...tableData)
        GetjtbhVisible.value = true
        // Now you can use the tableData to populate your table
      } else {
        console.log('No data found')
      }
    } else {
      console.log('Error: ', response.msg)
    }
  } catch (error) {
    console.error('Error fetching data: ', error)
  }
}
const JTBHSelectClick = (row, column, event) => {
  const { gxh, gxmc } = row
  detailData.qczl_gxmc = gxh + '-' + gxmc
  detailData.qczl_gxh = gxh
  GetjtbhVisible.value = false
}
// 批量删除控制标记
const deleteVisible = ref(false)
const multipleSelection = ref([])
const minUniqId = 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)
    minUniqId.value = Math.min(...tableData.map(row => row.UniqId))
  }
}

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

// 搜索
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' },
]
let selecTreeData = []

// 行为控制标记（弹窗内部需要增还是改）
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
      try {
        const res = await getOrderInfo({ order: detailData.qczl_gdbh })
        if (res.code === 0) {
          detailData.Gd_cpmc = res.data.Gd_cpmc
          // dialogFormVisible.value = true	
			showDialog()
        }
      } catch (e) {
        console.log(e)
      }
    }
  } catch (e) {
    console.log(e)
  }
}

// 工单编号回车
const handleGdbhEnter = async() => {
	if(detailData.qczl_gdbh!=''){
		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){
				  document.getElementById('废品总数').focus()
				  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 handleFplbEnter = async(index, row) => {
  let res
  try {
    res = await getWastInfo({ search: row.fp_lb })
    if (res.code !== 0) {
      return
    }
  } catch (e) {
    console.log(e)
    return
  }

  const obj = res.data
  const treeData = []
  for (const category in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, category)) {
      const children = []

      for (const subCategory in obj[category]) {
        if (Object.prototype.hasOwnProperty.call(obj[category], subCategory)) {
          const subChildren = obj[category][subCategory].map(item => {
            return { label: item }
          })

          children.push({
            label: subCategory,
            children: subChildren
          })
        }
      }

      treeData.push({
        label: category,
        children: children
      })
    }
  }
  selecTreeData = treeData
  selectIndex = index
  dialogSelectVisible1.value = true
}

const handleFplbClick = (node, check) => {
  if (!node.children) {
    detailData.table[selectIndex].fp_lb = node.label
    dialogSelectVisible1.value = false
  }
}

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

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

  const params = {
    type: row.fp_lb,
    order: detailData.qczl_gdbh,
  }
  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
  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 value1 = ref('')
const table = ref(null)

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

// 新增数据
const handleShowAdd = async() => {
  type.value = '新增'
  if(minUniqId.value==''){
	  console.log('123')
	  // 循环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{
	  getDetailData(minUniqId.value)
  }
  
  
  // 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)
}

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

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

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

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

.JKWTree-content {
  flex: 1;
}
.bt{
  margin-left: 2px !important;
  padding: 3px !important;
  font-size: 12px;
}
/* 选中某行时的背景色 */
:deep(.el-table__body tr.current-row) > td {
  background: #ff80ff !important;
}
</style>