mes-ai-admin-backend-ui/src/view/performance/QualityAssessment/cropdefective.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-item>
                <el-input v-model="positionvalue" @keydown="keydown_onSearch($event)" placeholder="输入工单编号或产品名称" style="width: 180px;" />
                <el-button type="primary" class="search" icon="search" @click="onSearch"></el-button>
                <el-button type="primary" class="bt" icon="plus" @click="onAdd">新增</el-button>
                <el-button type="primary" class="bt" icon="delete" @click="Del">删除</el-button>
                <div style="margin-left: auto;">
                  <el-button type="primary" :icon="Download" @click="exportExcel">导出到Excel</el-button>
                </div>
              </el-form-item>
              <!-- 数据展示 -->
              <el-table ref="multipleTable" style="width: 100%;height: 70vh;" tooltip-effect="dark" :data="tableData" row-key="ID"
                highlight-current-row="true"   border @selection-change="handleSelectionChange" 
                :row-style="{ height: '20px' }"  :header-cell-style="{ padding: '0px' }"
                :cell-style="{ padding: '0px' }" :header-row-style="{ height: '20px' }"
                :show-overflow-tooltip="true" @row-click="Click" @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
                    show-overflow-tooltip="true"/>
              </el-table>
              <!-- 分页 -->
              <div class="gva-pagination">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" v-model:current-page="page"
                  v-model:page-size="limit"
                  :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 === 'create' ? '裁剪次片汇总报工页面' : '裁剪次片汇总报工修改'"
              destroy-on-close width="1000px">
              <el-form :model="formData" label-position="right" ref="elFormRef" :rules="rule" label-width="70px" >
                <el-row :gutter="24">
                  <el-col :span="6">
                    <el-form-item label="日期" prop="name">
                        <el-input type="date" max="9999-12-31" v-model="formData.sczl_rq" id="日期" @focus="rqHandleFocus()" @keydown="ent1($event)"  style="width: 120px; " />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                    <div style="width: 900px; margin-left: 40px;">
                        <div style="margin-bottom: 5px;">
                            <span style="display: inline-block; text-align: center; width: 220px; margin-right: 5px;" >工单号|款号</span>
                            <span style="display: inline-block; text-align: center; width: 120px; margin-left: 45px; margin-right: 5px;" >款式名称</span>
                            <span style="display: inline-block; text-align: center; width: 95px;  margin-left: 10px; margin-right: 5px;" >次片数量</span>
                            <span style="display: inline-block; text-align: center; width: 160px; margin-left: -30  px;" >报工小组</span>
                            <!-- <span style="display: inline-block; text-align: center; width: 95px; margin-right: 5px;" >包装产量</span>
                            <span style="display: inline-block; text-align: center; width: 95px; margin-right: 5px;" >每箱数量</span>
                            <span style="display: inline-block; text-align: center; width: 95px; margin-right: 5px;" >零头</span> -->
                        </div>
                      <div v-for="index in 6" :key="index">
                        <el-input style="width: 220px; margin-left: 75px; margin-right: 5px;margin-bottom: 5px;" placeholder="Enter回车" v-model="formData['sczl_gdbh' + index]" :id="'sczl_gdbh' + index" @keydown="ent1($event, index.toString())" @blur="getGxMcsubmit($event, index.toString())" />
                        <el-input style="width: 120px; margin-right: 5px;margin-bottom: 5px;" :readonly="true" :value="formData['sczl_yjGx' + index]" :id="'sczl_yjGx' + index" @keydown="ent1($event)"/>
                        <el-input style="width: 95px; margin-right: 5px;margin-bottom: 5px;" :readonly="true" v-model="formData['sczl_gxmc' + index]" :id="'sczl_gxmc' + index" @keydown="ent1($event)"/>
                        <el-input style="width: 160px; margin-right: 5px;margin-bottom: 5px;" :readonly="true" v-model="formData['Gd_cpmc' + index]" :id="'Gd_cpmc' + index" @keydown="ent1($event)"/>
                        <!-- <el-input style="width: 95px; margin-right: 5px;margin-bottom: 5px;" v-model="formData['sczl_cl' + index]" :id="'sczl_cl' + index" @keydown="ent1($event)"/>
                        <el-input style="width: 95px; margin-right: 5px;margin-bottom: 5px;" v-model="formData['sczl_PgCl' + index]" :id="'sczl_PgCl' + index" @keydown="ent1($event)"/>
                        <el-input style="width: 95px;margin-bottom: 5px;" v-model="formData['sczl_clAdd' + index]" :id="'sczl_clAdd' + index" @keydown="ent1($event)"/> -->
                      </div>
                    </div>
                </el-row>
              </el-form>

              <!-- </el-scrollbar> -->
              <template #footer>
                <div class="dialog-footer" style="display: flex; margin-left: 500px;">
                    <p style="font-size: 18px;">报工人: 
                        <el-input v-model="linguser" style="width: 200px;" />
                    </p>
                  <el-button @click="closeDialog">取 消</el-button>
                  <el-button type="primary" @click="enterDialog">确 定</el-button>
                </div>
              </template>
            </el-dialog>
  
  
  
            <el-dialog v-model="positioningVisibleshow" :before-close="closepositioningVisible" :title="type==='create'?'添加':'修改'" destroy-on-close>
              <el-card>
                  <el-form-item label="工单编号" prop="name">
                        <el-input v-model="positionvalue" :clearable="true" placeholder="ZT01733" />
                  </el-form-item>
              </el-card>
              <el-button type="primary" @click="enterpositioning">确 定</el-button>
            </el-dialog>
  
  
              <el-dialog v-model="dialogSelectVisible" title="选择"
                destroy-on-close width="800px" >
                <el-table tooltip-effect="dark" :data="selectData" row-key="ID"
                  highlight-current-row="true" border style="width:100%"
                  @row-dblclick="handleSelectClick" >
                  <el-table-column prop="Gd_cpmc" label="印件名称" width="450" />
                  <el-table-column prop="jyGx" label="检验工序" width="85" />
                  <el-table-column prop="Gy0_gxmc" label="工序名称" width="225" />			 
                </el-table>
              </el-dialog>
              
              <el-dialog v-model="getGxMcshow"  :before-close="closegetGxMcshow" title="工序选择"  destroy-on-close  width="630px" >
                  <el-table tooltip-effect="dark" :data="selectData"
                      row-key="ID" highlight-current-row="true"
                      border style="width:100%"
                      @row-dblclick="handleSelectClick">
                      <el-table-column prop="jyGx" label="印件工序" width="100" />
                      <el-table-column prop="Gd_cpmc" label="印件名称"/>
                 </el-table>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="closegetGxMcshow">取 消</el-button>
                </div>
              </template>
            </el-dialog>
  
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  <script setup>
  // 全量引入格式化工具 请按需保留
  import { ElMessage, ElMessageBox, LAST_KEYS } from 'element-plus'
  import { Search, Refresh, Download } from '@element-plus/icons-vue'
  import { ref, reactive, nextTick, onMounted, onBeforeMount } from 'vue'
  // import { getPackingSideTable, getPackingTable } from '@/api/mes_api_gty/myapi'
  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: '06-packingDocuments'})
  
  // 侧边栏数据请求
  const treeData = reactive([]);
  
  const getTabdata = async () => {
      //接口调用函数
      const response  = await getTab();
      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,
            total: sysItem.count,
          },
        })),
      }));
      treeData.splice(0, treeData.length, ...transformedData);
  }
  getTabdata();
  
  // 自动化生成的字典（可能为空）以及字段
  const formData = ref({
    sczl_rq: '',
    sczl_gdbh1: '',
    sczl_gdbh2: '',
    sczl_gdbh3: '',
    sczl_gdbh4: '',
    sczl_gdbh5: '',
    sczl_gdbh6: '',
    sczl_yjGx1: '',
    sczl_yjGx2: '',
    sczl_yjGx3: '',
    sczl_yjGx4: '',
    sczl_yjGx5: '',
    sczl_yjGx6: '',
    sczl_gxmc1: '',
    sczl_gxmc2: '',
    sczl_gxmc3: '',
    sczl_gxmc4: '',
    sczl_gxmc5: '',
    sczl_gxmc6: '',
    Gd_cpmc1: '',
    Gd_cpmc2: '',
    Gd_cpmc3: '',
    Gd_cpmc4: '',
    Gd_cpmc5: '',
    Gd_cpmc6: '',
    sczl_cl1: '0.00',
    sczl_cl2: '0.00',
    sczl_cl3: '0.00',
    sczl_cl4: '0.00',
    sczl_cl5: '0.00',
    sczl_cl6: '0.00',
    sczl_PgCl1:'0',
    sczl_PgCl2: '0',
    sczl_PgCl3: '0',
    sczl_PgCl4: '0',
    sczl_PgCl5: '0',
    sczl_PgCl6: '0',
    sczl_clAdd1: '0',
    sczl_clAdd2: '0',
    sczl_clAdd3: '0',
    sczl_clAdd4: '0',
    sczl_clAdd5: '0',
    sczl_clAdd6: '0',
    UniqId:'000',
  })
  const initFormData = () => {
      formData.value = {
          sczl_rq: '',
          sczl_gdbh1: '',
          sczl_gdbh2: '',
          sczl_gdbh3: '',
          sczl_gdbh4: '',
          sczl_gdbh5: '',
          sczl_gdbh6: '',
          sczl_yjGx1: '',
          sczl_yjGx2: '',
          sczl_yjGx3: '',
          sczl_yjGx4: '',
          sczl_yjGx5: '',
          sczl_yjGx6: '',
          sczl_gxmc1: '',
          sczl_gxmc2: '',
          sczl_gxmc3: '',
          sczl_gxmc4: '',
          sczl_gxmc5: '',
          sczl_gxmc6: '',
          Gd_cpmc1: '',
          Gd_cpmc2: '',
          Gd_cpmc3: '',
          Gd_cpmc4: '',
          Gd_cpmc5: '',
          Gd_cpmc6: '',
          sczl_cl1: '0.00',
          sczl_cl2: '0.00',
          sczl_cl3: '0.00',
          sczl_cl4: '0.00',
          sczl_cl5: '0.00',
          sczl_cl6: '0.00',
          sczl_PgCl1:'0',
          sczl_PgCl2: '0',
          sczl_PgCl3: '0',
          sczl_PgCl4: '0',
          sczl_PgCl5: '0',
          sczl_PgCl6: '0',
          sczl_clAdd1: '0',
          sczl_clAdd2: '0',
          sczl_clAdd3: '0',
          sczl_clAdd4: '0',
          sczl_clAdd5: '0',
          sczl_clAdd6: '0',
          UniqId:'000',
      }
  }
  
  
  const elFormRef = ref()
  const elSearchFormRef = ref()
  // =========== 表格控制部分 ===========
  const tableData = reactive([])
  const GxMctableData = reactive([])
  const tableColumns = [
    { label: '创建用户', prop: 'sys_id', width: '200' },
    { label: '日期', prop: 'sczl_rq', width: '100' },
    { label: '包装产量', prop: 'sczl_cl', width: '105' },
    { label: '包装数量', prop: 'sczl_PgCl', width: '105' },
    { label: '创建时间', prop: 'sys_rq', width: '160' },
    { label: '修改时间', prop: 'mod_rq', width: '160' },
    { label: 'UNIQID', prop: 'UniqId', width: '120' },
  ]
  
  // 总条数
  const total = ref(0);
  // 当前页码
  const page = ref(1);
  // 每页条数
  const limit = ref(50);
  // 搜索关键字
  const searchInfo = ref('');
  // 查询参数
  const params = ref({
    // type: 'getTableData', // 默认查询类型
    type: '',
    date: '',
    sys_id: '',
    gdbh: '',
    limit: limit.value, // 每页条数
    page: page.value, // 当前页码
  });
  
  const inputname=ref(0)
  
  const locatevalue={
      gdbh:'',
      cpmc:'',
      page:page.value.toString(),
      limit:limit.value.toString(),  
  }
  let table=ref(5);
  let positionvalue=ref()
  let GxMcvalue=ref()
  
  // 分页设置
  const handleSizeChange = (val) => {
      params.page = val;
   switch (params.type) {
     case 'getTableData':
       getTableData()
       break
     case 'getLocateTable':
       Getlocate()
       break
     default:
       break
   }
  }
  // 页面跳转
  const handleCurrentChange = (val) => {
      params.page = val;
   switch (params.type) {
     case 'getTableData':
       getTableData()
       break
     case 'getLocateTable':
       Getlocate()
       break
     default:
       break
   }
  }
  
//   // 查询
//   const getTableData = async () => {
//       console.log(params)
//     const response = await getList(params);
//     if (response.code === 0) {
//       tableData.splice(0, tableData.length, ...response.data.rows);
//     }
//   }
  
//   const handleNodeClick = (node, check) => {
//     //存放当前节点的nodeId
//     if (node.params) {
//       params.date = node.params.date;
//       params.sys_id = node.params.sys_id;
//       total.value = node.params.total;
//       getTableData();
//     }
//   }
//   const Getlocate = async () => {
//     const response = await locate({
//       gdbh: params.gdbh,
//       page: page.value.toString(), limit: limit.value.toString(),
//     })
//     if (response.code === 0) {
//       total.value = response.data.total
//       tableData.splice(0, tableData.length, ...response.data.rows)
//     }
//   }
//   //确定
//   const enterpositioning = async () => {
//    locatevalue.gdbh = positionvalue.value;
//    Getlocate()
//    closepositioningVisible()
//   }
  
//   let sczl_rqValue=ref()
//   const getpickInfo = async (value) => {
//     const response = await getInfo({UniqId:value});
//     if (response.code === 0) {
//         formData.value=response.data;
//     }
//   }
  
  //键盘 input框跳转
  const ent1 = (event) => {
    const inputs = document.getElementsByTagName('input');
    const currentIndex = Array.from(inputs).indexOf(event.target);
    if (event.keyCode === 13 || event.keyCode === 40) { // Enter 或向下箭头
        if(event.target.id=='sczl_clAdd6'){
            ElMessageBox.confirm('数据存盘?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                      enterDialog()
                  })
        }
      for (let i = currentIndex + 1; i < inputs.length; i++) {
        if (!inputs[i].readOnly) {
            nextTick(()=>{
                inputs[i].focus();
                inputs[i].select();
            })
          break;
        }
      }
      if(event.target.id.substring(0, 2)=='cl' || event.target.id.substring(0, 2)=='fp'){
          ent_sum()
      }
    } 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;
        }
      }
      if(event.target.id.substring(0, 2)=='cl' || event.target.id.substring(0, 2)=='fp'){
          ent_sum()
      }
    } 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;
          }
        }
        if(event.target.id.substring(0, 2)=='cl' || event.target.id.substring(0, 2)=='fp'){
            ent_sum()
        }
      }
    } 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;
          }
        }
        if(event.target.id.substring(0, 2)=='cl' || event.target.id.substring(0, 2)=='fp'){
            ent_sum()
        }
      }
    } else if (event.keyCode === 39) { // 向右箭头
        if(event.target.id=='sczl_clAdd6'){
            ElMessageBox.confirm('数据存盘?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                      enterDialog()
                  })
        }
      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;
          }
        }
      }
      if(event.target.id.substring(0, 2)=='cl' || event.target.id.substring(0, 2)=='fp'){
          ent_sum()
      }
    }
  }
  
  //追加字体颜色和不可输入
  const setColorReadonly = (id) => {
      const newInput = document.getElementById(id)
      newInput.style.color = 'red';
      newInput.setAttribute('readonly', true);
  }
  
  //追加字体颜色和可输入
  const unsetColorReadonly = (id) => {
      const newInput = document.getElementById(id)
      newInput.style.color = 'black';
      newInput.removeAttribute('readonly');
  }
  
  //日期获得焦点事件
  const rqHandleFocus = () =>{
      if(formData.value.sczl_rq==''){
          formData.value.sczl_rq = new Date().toISOString().split('T')[0]
      }
  }
  
  //工单编号失去焦点事件
  const getGxMcshow = ref(false)
  const selectData = reactive([])
  let tableIndex = 0
  
  const getGxMcsubmit = async (event, index) => {
      if(formData.value['sczl_gdbh'+index]!=''){
          const response = await getGxMc({gdbh: formData.value['sczl_gdbh'+index] })
          if (response.code === 0) {
              if(response.data.length==0){
                    ElMessage({
                      type: 'error',
                      message: '查无此编号的工单，请仔细检查后重新输入'
                    })
                    //设置输入框的值为空
                    formData.value['sczl_gdbh'+index] = ''
                    formData.value['Gd_cpmc'+index] = ''
                    formData.value['sczl_yjGx'+index] = ''
                    formData.value['sczl_gxmc'+index] = ''
              }else if(response.data.length==1){
                    const { Gd_cpmc, Gy0_gxmc, jyGx } = response.data[0]
                    formData.value['Gd_cpmc'+index] = Gd_cpmc
                    formData.value['sczl_yjGx'+index] = jyGx
                    formData.value['sczl_gxmc'+index] = Gy0_gxmc
                    setColorReadonly('Gd_cpmc'+index);
                    setColorReadonly('sczl_yjGx'+index);
                    setColorReadonly('sczl_gxmc'+index);
                    unsetColorReadonly('sczl_cl'+index);
                    unsetColorReadonly('sczl_PgCl'+index);
              }else{
                  selectData.splice(0, selectData.length, ...response.data)
                  tableIndex = index
                  getGxMcshow.value = true
              }
          }
      }else{
          formData.value['Gd_cpmc'+index] = ''
          formData.value['sczl_yjGx'+index] = ''
          formData.value['sczl_gxmc'+index] = ''
          formData.value['sczl_cl'+index] = '0.00'
          formData.value['sczl_PgCl'+index] = '0'
          setColorReadonly('sczl_cl'+index);
          setColorReadonly('sczl_PgCl'+index);
      }
        
  }
  // 处理选择框
  const handleSelectClick = (row, column, event) => {
    const { Gd_cpmc, Gy0_gxmc, jyGx } = row
    formData.value['Gd_cpmc'+tableIndex] = Gd_cpmc
    formData.value['sczl_yjGx'+tableIndex] = jyGx
    formData.value['sczl_gxmc'+tableIndex] = Gy0_gxmc
    setColorReadonly('Gd_cpmc'+tableIndex);
    setColorReadonly('sczl_yjGx'+tableIndex);
    setColorReadonly('sczl_gxmc'+tableIndex);
    unsetColorReadonly('sczl_cl'+tableIndex);
    unsetColorReadonly('sczl_PgCl'+tableIndex);
    getGxMcshow.value = false
  }
  
  
  // 更新数据
  const updateDetailData = async() => {
      const restoredData = {
           UniqId: lastCellValue,
           sczl_rq: formData.value.sczl_rq,
           sczl_gdbh1: formData.value.sczl_gdbh1,
           sczl_gdbh2: formData.value.sczl_gdbh2,
           sczl_gdbh3: formData.value.sczl_gdbh3,
           sczl_gdbh4: formData.value.sczl_gdbh4,
           sczl_gdbh5: formData.value.sczl_gdbh5,
           sczl_gdbh6: formData.value.sczl_gdbh6,
           sczl_yjGx1: formData.value.sczl_yjGx1,
           sczl_yjGx2: formData.value.sczl_yjGx2,
           sczl_yjGx3: formData.value.sczl_yjGx3,
           sczl_yjGx4: formData.value.sczl_yjGx4,
           sczl_yjGx5: formData.value.sczl_yjGx5,
           sczl_yjGx6: formData.value.sczl_yjGx6,
           sczl_gxmc1: formData.value.sczl_gxmc1,
           sczl_gxmc2: formData.value.sczl_gxmc2,
           sczl_gxmc3: formData.value.sczl_gxmc3,
           sczl_gxmc4: formData.value.sczl_gxmc4,
           sczl_gxmc5: formData.value.sczl_gxmc5,
           sczl_gxmc6: formData.value.sczl_yjGx6,
           sczl_cl1: formData.value.sczl_cl1,
           sczl_cl2: formData.value.sczl_cl2,
           sczl_cl3: formData.value.sczl_cl3,
           sczl_cl4: formData.value.sczl_cl4,
           sczl_cl5: formData.value.sczl_cl5,
           sczl_cl6: formData.value.sczl_cl6,
           sczl_PgCl1:formData.value.sczl_PgCl1,
           sczl_PgCl2: formData.value.sczl_PgCl2,
           sczl_PgCl3: formData.value.sczl_PgCl3,
           sczl_PgCl4: formData.value.sczl_PgCl4,
           sczl_PgCl5: formData.value.sczl_PgCl5,
           sczl_PgCl6: formData.value.sczl_PgCl6,
           Gd_cpmc1: formData.value.Gd_cpmc1,
           Gd_cpmc3: formData.value.Gd_cpmc2,
           Gd_cpmc4: formData.value.Gd_cpmc3,
           Gd_cpmc5: formData.value.Gd_cpmc4,
           Gd_cpmc6: formData.value.Gd_cpmc5,
           sczl_clAdd1: formData.value.sczl_clAdd1,
           sczl_clAdd2: formData.value.sczl_clAdd2,
           sczl_clAdd3: formData.value.sczl_clAdd3,
           sczl_clAdd4: formData.value.sczl_clAdd4,
           sczl_clAdd5:formData.value.sczl_clAdd5,
           sczl_clAdd6: formData.value.sczl_clAdd6,
           sys_id:sys_id,
      }
    
    if(ADD.value=='新增'){
         const response = await packagingAdd(restoredData);
         ADD.value='0'
       if(response.code==0){
                ElMessage({
                  type: 'success',
                  message: '新增成功',
                })
               dialogFormVisible.value = false
               //刷新侧边栏
               getTabdata()
               if(params.date != ''){
                   //刷新页面
                   getTableData()
               }
       }
    }else{
          const res = await edit(restoredData)
       if(res.code==0){
                ElMessage({
                  type: 'success',
                  message: '更新成功',
                })
       }
       dialogFormVisible.value = false
    }
  }
  
  
  const GxMcdel = () => {
      if(typeof(lastCellValue)=='object'){
          ElMessage({
            type: 'warning',
            message: '未选中记录',
          })
          return
      }
      
      ElMessageBox.confirm(
        `确认删除这条数据么?`,
        '警告',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(async() => {
          const response = await del({UniqId:lastCellValue});
          if (response.code === 0) {
              ElMessage({type: 'success',message: '删除成功',})
              //刷新侧边栏
              getTabdata()
              getTableData()
          }
      })
    
  }
  
  //搜索按钮
  const onSearch = async (event) => {
    params.gdbh = positionvalue.value
    params.type = 'getLocateTable'
    page.value = 1
    Getlocate()
  }
  //回车搜索
  const keydown_onSearch = async (event) => {
      const inputs = document.getElementsByTagName("input");
      const currentIndex = Array.from(inputs).indexOf(event.target);
      if(event.keyCode === 13){
       params.gdbh = positionvalue.value
       params.type = 'getLocateTable'
       page.value = 1
       Getlocate()
      }
  }
  
  // ============== 表格控制部分结束 ===============
  
  // 获取需要的字典 可能为空 按需保留
  const setOptions = async () => {
  }
  
  // 获取需要的字典 可能为空 按需保留
  setOptions()
  
  // 多选数据
  const multipleSelection = ref([])
  // 多选
  const handleSelectionChange = (val) => {
      if(val.length>0){		
          multipleSelection.value = val
          const lenth=val.length
          lastCellValue=val[lenth-1].UniqId
          console.log(val)
          val.splice(0, val.length);  // 清空 val 数组	
          console.log(lastCellValue)
      }
  }
  
  // 批量删除控制标记
  const deleteVisible = ref(false)
  
  // 多选删除
  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 dialogFormVisible = ref(false)
  
  // 行为控制标记（弹窗内部需要增还是改）
  const type = ref('')
  
  // 更新行
  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
    }
  }
  
  
  
  //新增
  const ADD=ref('0')
  const onAdd = async () => {
      ADD.value='新增'
      type.value = 'create'
      initFormData()
      dialogFormVisible.value = true
      setTimeout(() => {
      const inputElement = document.getElementById('日期');
          if (inputElement) {
              inputElement.focus();		
          }
      }, 100);
  }
  
  const Del = () => {
     GxMcdel()
  }
  
  /*
      新增弹窗控制标记
  */
  const positioningVisibleshow = ref(false)
  const closepositioningVisible = () => {
    positioningVisibleshow.value = false
    formData.value = {
      address: '',
      image: '',
      name: '',
    }
  }
  // 新增工单弹窗取消
  const closegetGxMcshow = () => {
    getGxMcshow.value = false
  }
  
  // 打开弹窗
  const openDialog = () => {
    type.value = 'create'
    dialogFormVisible.value = true
  }
  
  // 关闭弹窗
  const closeDialog = () => {
    dialogFormVisible.value = false
    formData.value = {
      address: '',
      image: '',
      name: '',
    }
  }
  // 弹窗确定
  const enterDialog = async () => {
        ElMessageBox.confirm('数据存盘?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          if(formData.value.sczl_rq==''){
              ElMessage({
                  type: 'error',
                  message: '请填写日期'
              });
              document.getElementById('日期').focus()
              document.getElementById('日期').select()
              return;
          }
          if(formData.value.sczl_gdbh1=='' && formData.value.sczl_gdbh2=='' && formData.value.sczl_gdbh3=='' &&
              formData.value.sczl_gdbh4=='' && formData.value.sczl_gdbh5=='' && formData.value.sczl_gdbh6==''){
              ElMessage({
                  type: 'error',
                  message: '请填写工单编号'
              });
              document.getElementById('sczl_gdbh1').focus()
              document.getElementById('sczl_gdbh1').select()
              return;
          }
          if(parseFloat(formData.value.sczl_cl1)==0 && parseFloat(formData.value.sczl_cl2)==0 && parseFloat(formData.value.sczl_cl3)==0 &&
              parseFloat(formData.value.sczl_cl4)==0 && parseFloat(formData.value.sczl_cl5)==0 && parseFloat(formData.value.sczl_cl6)==0){
              ElMessage({
                  type: 'error',
                  message: '请填写包装产量'
              });
              document.getElementById('sczl_cl1').focus()
              document.getElementById('sczl_cl1').select()
              return;
          }
          if(parseFloat(formData.value.sczl_PgCl1)==0 && parseFloat(formData.value.sczl_PgCl2)==0 && parseFloat(formData.value.sczl_PgCl3)==0 &&
              parseFloat(formData.value.sczl_PgCl4)==0 && parseFloat(formData.value.sczl_PgCl5)==0 && parseFloat(formData.value.sczl_PgCl6)==0){
              ElMessage({
                  type: 'error',
                  message: '请填写每箱数量'
              });
              document.getElementById('sczl_PgCl1').focus()
              document.getElementById('sczl_PgCl1').select()
              return;
          }
          
          updateDetailData()
        });
  }
  
  let lastCellValue=ref()
  // 双击表格操作
  function doubleClick(row) {
      type.value = 'update';
      getpickInfo(row['UniqId'])
      dialogFormVisible.value = true
  }
  // 单击表格操作
  function Click(row, column, event) {
      lastCellValue= row['UniqId'];  
  }
  
  // 导出excel
  function exportExcel() {
    console.log('导出到excel');
  }
  
  // 生命周期钩子
  onMounted(async () => {
  });
  </script>
  
  <style>
  .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;
  }
  
  /* 选中某行时的背景色*/
  .el-table__body tr.current-row>td {
    background: #ff80ff !important;
    /* 背景颜色 */
  }
  </style>
  <style scoped>
  :deep(.el-table td .cell) {
    line-height: 20px !important;
  }
  :deep(.el-tabs__header){
    margin-bottom: 0;
  }
  .search{
    margin-left: 0px !important;
    margin-right: 10px !important;
  }
  .bt{
    margin-left: 2px !important;
    padding: 3px !important;
    font-size: 12px;
  }
  .el-tabs__header{
    margin: 0px !important;
  }
  .gva-table-box{
    padding: 0px !important;
  }
  .mab{
    margin-bottom: 5px;
  }
  /* tree组件背景高亮 */
  :deep(.el-tree-node:focus > .el-tree-node__content){
      background: #ff80ff !important;
  }
  </style>